@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--paper:#f4f2eb;--ink:#242820;--muted:#777a6f;--line:#dcded2;--orange:#ed6e40;--character:#ed6e40}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:15px}button,input,select{font:inherit}button,a,label.button{-webkit-tap-highlight-color:transparent}button,.button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #796ac6;outline-offset:4px}header,main,footer{max-width:1360px;margin:auto}header{height:112px;display:flex;align-items:center;justify-content:space-between;padding:0 64px;border-bottom:1px solid var(--line)}.brand{font-family:'Space Grotesk',sans-serif;font-size:29px;font-weight:700;letter-spacing:-1.5px;display:flex;align-items:center;gap:9px}.brand-icon{font-size:43px;line-height:1;color:var(--orange)}.brand-dot{font:11px sans-serif;align-self:flex-start;margin-top:7px}nav{display:flex;gap:30px;font-size:13px}nav a{padding:14px 0;color:#71766a}nav .active{color:var(--ink);border-bottom:2px solid var(--ink)}.wallet{padding:11px 16px;border:1px solid var(--line);border-radius:30px;display:flex;gap:8px;align-items:center;font-size:13px}.wallet>span:last-child{color:var(--muted)}.coin{color:#956d1e;background:#f4d788;border-radius:50%;padding:2px 6px}main{padding:0 64px}.hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;min-height:540px;gap:20px;padding:46px 0}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:9px}.live-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#779267;flex-shrink:0}h1,h2,h3{font-family:'Space Grotesk',sans-serif}h1{font-size:clamp(42px,4.7vw,66px);font-weight:500;line-height:1.07;letter-spacing:-3.7px;margin:25px 0 22px}h1>span{color:var(--orange)}.intro{max-width:380px;line-height:1.8;color:#777a70;font-size:14px}.button{border:1px solid transparent;border-radius:7px;display:inline-flex;gap:26px;justify-content:space-between;align-items:center;padding:13px 18px;font-size:12px;font-weight:600;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.dark{background:var(--ink);color:#fff}.hero .button{margin-top:17px}.hero-note{font-size:10px;color:var(--muted);margin-top:24px;display:flex;align-items:center;gap:8px}.hero-note span{font-size:20px}.hero-art{height:420px;position:relative;background:radial-gradient(ellipse,#e5e8ce 0,transparent 65%);overflow:hidden}.orbit{border:1px solid #d8dbcb;border-radius:50%;position:absolute;inset:50px 5px;transform:rotate(-24deg)}.orbit-two{inset:12px 70px;transform:rotate(35deg)}.art-label{font-size:9px;letter-spacing:1.6px;font-weight:600}.label-top{position:absolute;right:10px;top:28px;transform:rotate(7deg)}.label-bottom{position:absolute;left:35px;bottom:20px;transform:rotate(-7deg)}.island{position:absolute;width:290px;height:175px;left:50%;top:54%;transform:translate(-50%,-20%);background:#b8c595;border-radius:40% 40% 30% 30%;box-shadow:0 15px #899b6b,0 30px #687d53,0 48px 35px #abb49d55}.island-grid{position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(#d9dfbb77 1px,transparent 1px),linear-gradient(90deg,#d9dfbb77 1px,transparent 1px);background-size:35px 28px;transform:skewX(-12deg)}.avatar{width:95px;height:135px;position:relative;--avatar-color:var(--character)}.hero-avatar{position:absolute;left:100px;top:-72px;transform:rotate(-7deg) scale(1.2)}.head{position:absolute;top:28px;width:95px;height:69px;background:var(--avatar-color);border-radius:25px;box-shadow:inset -9px -7px #00000012;display:flex;align-items:center;justify-content:center;gap:20px}.head i{width:9px;height:13px;background:#282a25;border-radius:5px}.head:after{content:'';position:absolute;bottom:12px;left:43px;width:11px;height:5px;border-bottom:2px solid #282a25;border-radius:50%}.body{position:absolute;top:89px;left:17px;width:61px;height:35px;background:var(--avatar-color);border-radius:10px 10px 19px 19px;box-shadow:inset -8px -3px #00000018}.feet{position:absolute;top:117px;left:17px;width:24px;height:15px;background:#343e34;border-radius:8px;box-shadow:38px 0 #343e34}.antenna{position:absolute;top:9px;left:46px;width:4px;height:25px;background:#343e34;transform:rotate(10deg)}.antenna:before{content:'';position:absolute;top:-5px;left:-6px;width:16px;height:16px;background:var(--avatar-color);border-radius:50%}.avatar.ears .antenna{width:18px;height:30px;left:10px;top:12px;background:var(--avatar-color);border-radius:9px;transform:rotate(-15deg);box-shadow:60px 16px var(--avatar-color)}.avatar.ears .antenna:before,.avatar.plain .antenna{display:none}.tree{position:absolute;width:12px;height:70px;background:#66734d;top:-38px;left:33px}.tree:before{content:'';position:absolute;width:64px;height:88px;border-radius:50%;background:#779163;bottom:30px;left:-27px;box-shadow:inset -15px -5px #00000012}.tree-two{left:240px;top:-5px;transform:scale(.7)}.rock{position:absolute;bottom:30px;left:55px;width:35px;height:20px;border-radius:50% 50% 30% 30%;background:#ecebd9;box-shadow:5px 4px #989d80}.floating-coin{position:absolute;border:3px solid #e6b752;background:#f3d17b;color:#b58630;border-radius:50%;width:39px;height:43px;display:grid;place-items:center;font-size:25px;box-shadow:4px 2px #c99b3c}.c1{left:55px;top:100px;transform:rotate(-18deg)}.c2{right:55px;top:160px;transform:rotate(15deg) scale(.75)}.spark{position:absolute;right:65px;bottom:40px;font-size:43px;color:#9184ad}.progress-strip{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;border:1px solid var(--line);border-radius:10px;padding:24px 0}.progress-strip>div{display:flex;gap:12px;align-items:center;padding:0 24px;border-right:1px solid var(--line)}.progress-strip>div:last-child{border:0}.progress-strip p{margin:0;display:grid;gap:7px}.progress-strip small{font-size:8px;letter-spacing:1px;color:var(--muted)}.progress-strip strong{font-size:13px}.strip-icon{font-size:25px;color:#858d75}.progress-strip a{margin-left:auto}.save-status strong{font-size:11px}.save-status small{letter-spacing:0;font-size:10px}.section{padding-top:74px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:27px}h2{font-size:32px;letter-spacing:-1.2px;font-weight:500;margin:12px 0 0}.count{display:inline-block;vertical-align:middle;font-size:10px;letter-spacing:0;border:1px solid var(--line);border-radius:20px;padding:5px 8px;margin-left:14px}.filters{display:flex;padding:4px;border:1px solid var(--line);border-radius:8px;gap:3px}.filters button{border:0;background:transparent;border-radius:5px;font-size:11px;padding:9px 14px;color:var(--muted)}.filters button.selected{background:#fff;color:var(--ink);box-shadow:0 2px 4px #00000008}.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.game-card{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#faf9f5}.game-art{height:244px;position:relative;overflow:hidden;background:#dce3c9}.game-art.space{background:#dcd6e8}.game-art canvas{width:100%;height:100%;object-fit:cover}.game-tag{position:absolute;left:17px;top:17px;font-size:9px;letter-spacing:1px;background:#ffffffc9;padding:7px 9px;border-radius:4px}.card-content{padding:23px}.card-title{display:flex;justify-content:space-between;align-items:center}.card-title h3{margin:0;font-size:23px;letter-spacing:-.7px;font-weight:500}.genre{font-size:9px;color:var(--muted)}.card-content p{font-size:12px;line-height:1.8;color:var(--muted);margin:12px 0 22px}.card-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:16px}.reward{font-size:10px;color:#8b783f}.card-bottom button{border:0;background:none;font-size:12px;font-weight:700}.library-note{text-align:center;font-size:11px;color:var(--muted);margin-top:23px}.library-note span{margin-right:7px}.workshop{display:grid;grid-template-columns:1fr 1.15fr;background:#e8e9de;border-radius:12px;margin-top:70px;padding:42px;gap:65px}.studio-preview{position:relative;min-height:350px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background:radial-gradient(ellipse,#d5dac5,transparent 68%);padding:10px}.studio-avatar{position:absolute;top:94px;transform:scale(1.55);z-index:1}.preview-ground{position:absolute;top:275px;width:180px;height:30px;background:#b7bea055;border-radius:50%}.studio-controls h2{margin-top:14px}.studio-controls>p:not(.eyebrow){color:var(--muted);font-size:12px;line-height:1.7;max-width:350px}form{display:grid;grid-template-columns:1fr 1fr;gap:10px 15px;margin-top:20px}form label,legend{font-size:10px;font-weight:600}form>label,form>input,form>select,form>.button{grid-column:1/-1}input,select{padding:10px 12px;border:1px solid #ccd0bf;border-radius:6px;background:#f5f5ed;color:var(--ink);width:100%;font-size:12px}fieldset{padding:0;border:0;margin:8px 0;grid-column:1/-1}legend{margin-bottom:10px}.swatches{display:flex;gap:12px}.swatch{width:25px;height:25px;border-radius:50%;border:3px solid #e8e9de;outline:1px solid transparent}.swatch.selected{outline-color:var(--ink)}form .button{margin-top:8px;width:fit-content}.heading-note{color:var(--muted);font-size:12px;line-height:1.7}.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.shop-card{border:1px solid var(--line);border-radius:10px;padding:25px;background:#faf9f5}.shop-icon{width:45px;height:45px;border-radius:12px;background:#e9e3f0;color:#8f79a8;display:grid;place-items:center;font-size:26px;margin-bottom:24px}.shop-card:nth-child(2) .shop-icon{background:#e5eacb;color:#84924c}.shop-card:nth-child(3) .shop-icon{background:#f5e4ca;color:#c58b3e}.shop-card small{font-size:8px;letter-spacing:1.5px;color:var(--muted)}.shop-card h4{font-size:19px;font-weight:500;margin:9px 0}.shop-card p{font-size:12px;color:var(--muted);line-height:1.7;min-height:42px}.shop-card button{width:100%;margin-top:15px}.outline{background:transparent;border-color:var(--line)}.save-panel{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:65px;padding:32px 0;gap:20px}.save-panel h3{font-size:16px;font-weight:500;margin:0 0 8px}.save-panel p{font-size:11px;color:var(--muted);margin:0}.save-panel>div:last-child{display:flex;gap:10px;flex-shrink:0}footer{padding:34px 64px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line)}footer .brand{font-size:20px}footer .brand-icon{font-size:30px}footer p{font-size:10px;color:var(--muted)}footer>span{font-size:8px;letter-spacing:1.5px}dialog{width:min(1020px,95vw);max-height:95dvh;padding:24px;border:1px solid var(--line);border-radius:15px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#1c251caa;backdrop-filter:blur(5px)}.game-toolbar,.game-actions,.game-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}.game-toolbar h2{font-size:24px;margin:4px 0}.game-toolbar small{font-size:9px;letter-spacing:1.5px}.icon-button{border:0;background:none;font-size:30px}.game-toolbar+p{font-size:12px;color:var(--muted)}.canvas-wrap{position:relative}#game-canvas{display:block;width:100%;aspect-ratio:16/9;border-radius:9px;background:#dce3c9;touch-action:none}#game-result{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#f4f2ebe8;border-radius:9px;font-size:19px}#game-result[hidden]{display:none}#game-result strong{font:500 36px 'Space Grotesk',sans-serif;margin-bottom:14px}.game-bottom{margin-top:15px}#game-hud{margin-right:auto;font-size:12px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:white;border-radius:8px;padding:14px 22px;font-size:12px;z-index:10;transition:.2s;max-width:90vw}#toast.visible{opacity:1;transform:translate(-50%,0)}@media(min-width:1500px){header,main,footer{max-width:1440px}.hero{min-height:590px}}@media(max-width:950px){header{padding:0 30px}main{padding:0 30px}nav{gap:16px}.hero-art{transform:scale(.85)}.hero{gap:0}h1{font-size:48px}.progress-strip>div{padding:0 15px}.save-status{display:none!important}.progress-strip{grid-template-columns:repeat(3,1fr)}.workshop{gap:30px}.shop-card{padding:18px}footer{padding:25px 30px}}@media(max-width:650px){header{height:auto;min-height:85px;flex-wrap:wrap;padding:20px;gap:18px}.brand{font-size:26px}nav{order:3;width:100%;justify-content:space-between;font-size:12px}.wallet{margin-left:auto}main{padding:0 20px}.hero{grid-template-columns:1fr;padding:35px 0 20px}.hero h1{font-size:52px}.hero-art{height:320px;transform:scale(.9);margin-top:10px}.hero-copy{position:relative;z-index:1}.hero-note{margin-top:18px}.progress-strip>div{padding:0 10px;gap:8px}.progress-strip small{font-size:7px;letter-spacing:.4px}.strip-icon{display:none}.section{padding-top:45px}.section-heading{align-items:start;gap:20px;flex-direction:column}h2{font-size:29px}.game-grid,.shop-grid{grid-template-columns:1fr}.game-art{height:230px}.workshop{grid-template-columns:1fr;margin-top:40px;padding:25px;gap:20px}.studio-preview{min-height:280px}.studio-avatar{top:65px;transform:scale(1.3)}.preview-ground{top:220px}.heading-note{margin:0}.save-panel{flex-direction:column;align-items:start;line-height:1.8}.save-panel>div:last-child{flex-wrap:wrap}footer{flex-wrap:wrap;gap:10px;padding:25px 20px}footer>span{width:100%}dialog{padding:14px}.game-toolbar .button{padding:9px;font-size:10px}.game-bottom{flex-wrap:wrap}#game-hud{width:100%}.game-toolbar h2{font-size:20px}.game-bottom .button{padding:10px 14px}.game-actions{gap:5px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* The maze keeps square tiles on desktop and touch screens. */
.maze-dialog{width:min(780px,95vw)}.maze-dialog .canvas-wrap{max-width:min(100%,65dvh);margin:auto}.maze-dialog #game-canvas{image-rendering:pixelated}.maze-dialog #game-result{padding:20px}.maze-dialog #game-result strong{font-size:clamp(22px,4vw,34px)}.maze-dialog #game-result span{font-size:14px;line-height:1.7}.direction-pad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);grid-template-areas:". up ." "left . right" ". down .";justify-content:center;gap:6px;margin:12px 0}.direction-pad[hidden]{display:none}.direction-pad button{width:48px;height:48px;border:1px solid #bdc2b2;border-radius:7px;background:#e8e9de;font-size:22px;touch-action:manipulation}.direction-pad button:active{background:#c6ceb6}.game-art.dungeon{background:#10151f}.maze-dialog #game-instructions{line-height:1.6}

.maze-life-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:min(100%,65dvh);margin:12px auto}.maze-life-bar[hidden]{display:none}#maze-lives{display:flex;align-items:center;gap:10px;min-height:36px}#maze-lives>span:first-child{font-size:11px;letter-spacing:2px;margin-right:6px}.life-face{color:#886019;background:#f5d47c;border-radius:50%;font-size:32px;line-height:32px;width:32px;text-align:center}

.direction-pad [data-direction="up"]{grid-area:up}.direction-pad [data-direction="right"]{grid-area:right}.direction-pad [data-direction="down"]{grid-area:down}.direction-pad [data-direction="left"]{grid-area:left}

#game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:20px;background:#f4f2ebcc;border-radius:9px;text-align:center}
#game-overlay[hidden]{display:none}
#game-overlay #game-result{position:static;background:transparent;padding:0;font-size:16px}
#game-overlay #restart-game{min-height:64px;min-width:190px;max-width:100%;justify-content:center;padding:18px 28px;background:#ed6e40;color:#1f241d;font-size:20px;font-weight:700;box-shadow:0 5px 18px #00000025;touch-action:manipulation}

.knight-customizer{display:grid;grid-template-columns:180px 1fr;gap:20px;border:1px solid var(--line);border-radius:10px;padding:20px;margin:18px 0;background:#e8e9de}.knight-customizer[hidden]{display:none}.knight-customizer h3{font-size:18px;margin:0}.knight-customizer canvas{display:block;width:150px;height:150px;image-rendering:pixelated}.knight-customizer p{font-size:11px;line-height:1.5;color:#656b5c}.knight-customizer form{margin:0;align-content:start;gap:8px}.knight-customizer select{min-height:44px}.knight-customizer .accessory-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px}.accessory-toggle input{width:22px;height:22px;accent-color:var(--orange)}.cosmetic-note{grid-column:1/-1;margin:0}@media(max-width:500px){.knight-customizer{grid-template-columns:1fr;padding:16px;gap:10px}.knight-customizer>div{display:grid;grid-template-columns:1fr 100px;align-items:center}.knight-customizer canvas{width:100px;height:100px;grid-column:2;grid-row:1/3}.knight-customizer h3,.knight-customizer #knight-save-status{grid-column:1}}

/* Scenic home backgrounds stay behind readable surfaces; game dialogs keep their own theme. */
html[data-background="country"]{--home-scene:url('./assets/backgrounds/country.svg');--home-sky:#b8d9d0}
html[data-background="city"]{--home-scene:url('./assets/backgrounds/city.svg');--home-sky:#c7d3e1}
html[data-background="sunset"]{--home-scene:url('./assets/backgrounds/sunset.svg');--home-sky:#dbb1c1}
html[data-background="night"]{--home-scene:url('./assets/backgrounds/night.svg');--home-sky:#515675}
html[data-background]:not([data-background="classic"]) body{background:var(--home-sky)}
html[data-background]:not([data-background="classic"]) body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--home-scene) center/cover no-repeat}
html[data-background]:not([data-background="classic"]) header,html[data-background]:not([data-background="classic"]) footer{background:#f4f2ebed;border-radius:0 0 15px 15px}
html[data-background]:not([data-background="classic"]) .hero-copy{background:#f4f2ebed;padding:28px;border-radius:16px}
html[data-background]:not([data-background="classic"]) .progress-strip{background:#f4f2ebf5}
html[data-background]:not([data-background="classic"]) #library,html[data-background]:not([data-background="classic"]) #upgrades{background:#f4f2ebf2;border-radius:16px;padding:28px;margin-top:36px}
html[data-background]:not([data-background="classic"]) .save-panel{background:#f4f2ebf2;border-radius:12px;padding:24px}
.background-picker{margin:24px 0 0;padding:20px 24px;background:#f4f2ebf5;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:20px}.background-picker h2{font-size:21px;margin:0;letter-spacing:-.5px}.background-picker p{font-size:11px;line-height:1.5;color:#626958;max-width:240px;margin:8px 0 0}.background-options{display:flex;gap:10px;flex-wrap:wrap}.background-choice{display:grid;gap:6px;border:2px solid transparent;background:transparent;border-radius:9px;padding:5px;font-size:11px;min-height:78px;min-width:76px}.background-choice[aria-pressed="true"]{border-color:#424e39;background:#e3e8d5}.background-thumbnail{display:block;width:75px;height:44px;background-color:#f4f2eb;background-position:center;background-size:cover;border:1px solid #c9cdbc;border-radius:5px}@media(max-width:950px){.background-picker{flex-direction:column;align-items:start}.background-picker p{max-width:none}}@media(max-width:650px){.background-picker{padding:16px}.background-options{gap:5px;display:grid;grid-template-columns:repeat(3,1fr);width:100%}.background-thumbnail{width:100%;min-width:60px}.background-choice{min-width:0}html[data-background]:not([data-background="classic"]) .hero-copy{padding:20px}html[data-background]:not([data-background="classic"]) #library,html[data-background]:not([data-background="classic"]) #upgrades{padding:20px}}

body{isolation:isolate}

html[data-background="aurora"]{--home-scene:url('./assets/backgrounds/aurora.svg');--home-sky:#394b6b}html[data-background="forest"]{--home-scene:url('./assets/backgrounds/forest.svg');--home-sky:#344e62}.background-choice:disabled{opacity:.65}.background-options{justify-content:flex-end}

.shop-section+.shop-section{margin-top:36px}.shop-section>h3{font-size:24px;font-weight:500;letter-spacing:-.6px;margin:0 0 8px}.shop-section>p{font-size:13px;line-height:1.6;color:#626958;margin:0 0 20px}.shop-card h4{font-family:"Space Grotesk",sans-serif}