@font-face{font-family:Baloo;src:url('/assets/fonts/baloo2-600-700.woff2') format('woff2');font-weight:600 700;font-display:swap}@font-face{font-family:Nunito;src:url('/assets/fonts/nunito-500-700.woff2') format('woff2');font-weight:500 700;font-display:swap}
:root{--ink:#153b3d;--accent:#087e84;--edge:#076068;--surface:#f1fbf6;--cta:#ffc75a;--ctab:#f79b20;--focus:#092e48;color:var(--ink);font:700 18px/1.4 Nunito,sans-serif}
:root[data-theme=candy]{--ink:#55263d;--accent:#aa356b;--edge:#78274f;--surface:#fff3f8;--cta:#ffd98b;--ctab:#ffaa51;--focus:#522b69}:root[data-theme=jungle]{--ink:#213e2b;--accent:#387444;--edge:#244e30;--surface:#f3f8df;--cta:#fadd6b;--ctab:#eeb847;--focus:#103e35}:root[data-theme=magic]{--ink:#432451;--accent:#8254a8;--edge:#563273;--surface:#faf3ff;--cta:#ffdc86;--ctab:#f6ae45;--focus:#3d1b5a}:root[data-theme=sunny]{--ink:#513317;--accent:#986423;--edge:#734814;--surface:#fffae8;--cta:#ffdd66;--ctab:#efa527;--focus:#583417}
*{box-sizing:border-box}body{margin:0;background:#b4dfd8}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button,a{min-height:48px}button{border:0}button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:4px;box-shadow:0 0 0 7px white}button:active{transform:translateY(2px)}.skip{position:fixed;z-index:20;top:8px;left:8px;transform:translateY(-150%);background:white;padding:12px}.skip:focus{transform:none}.world{position:relative;isolation:isolate;min-height:768px;height:100svh;overflow:hidden;display:flex;align-items:center;flex-direction:column;padding:18px 24px 12px}.scene{position:absolute;inset:0;z-index:-2;background:linear-gradient(#8cd8f2,#d5f2de 66%,#88ab49)}.scene img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}.topbar{width:min(100%,1020px);display:flex;justify-content:space-between;align-items:center;padding:4px 12px;background:var(--surface);border:2px solid white;border-radius:24px;box-shadow:0 6px 0 color-mix(in srgb,var(--edge) 50%,transparent);z-index:2}.brand{display:flex;align-items:center;width:245px}.brand img{display:block;width:100%;height:68px;object-fit:contain}.theme-button{display:flex;align-items:center;gap:8px;text-align:left;background:none;border-radius:14px;padding:4px 10px;font-size:18px;line-height:1.15}.theme-button strong{display:block;font-size:18px;color:var(--edge)}.hero{margin:4px 0 0;width:clamp(330px,34vw,475px);line-height:0;z-index:1}.hero img{width:100%;height:auto;filter:drop-shadow(0 7px 4px #52371430)}.companion{position:absolute;bottom:68px;width:clamp(270px,32vw,480px);height:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(0 12px 8px #254c4533)}.rech{left:max(0px,calc((100vw - 1540px)/2))}.mimi{right:max(0px,calc((100vw - 1540px)/2))}.actions{position:absolute;top:52%;left:50%;transform:translateX(-50%);width:min(460px,90%);text-align:center;z-index:2}.primary{display:flex;align-items:center;justify-content:center;gap:12px;min-height:72px;margin:auto;padding:12px 25px;border:3px solid #fff8d4;border-radius:24px;background:linear-gradient(var(--cta),var(--ctab));box-shadow:0 7px 0 #945423,0 12px 18px #213a3c40;color:#4a2b12;font:700 26px/1.2 Baloo,sans-serif}.play{display:grid;place-items:center;width:34px;height:34px;font-size:18px;border:2px solid white;border-radius:50%;background:var(--accent);color:white}.progress{margin:18px auto 0;width:fit-content;max-width:100%;padding:10px 18px;background:var(--surface);border:2px solid white;border-radius:18px;box-shadow:0 5px 0 #194b3b35;font-size:18px}.destinations{margin-top:auto;display:flex;align-items:stretch;gap:6px;padding:7px;background:var(--surface);border:2px solid white;border-radius:24px;box-shadow:0 6px 0 var(--edge);z-index:2}.destinations button{display:flex;gap:8px;align-items:center;justify-content:center;background:none;border-radius:18px;padding:10px 16px;max-width:215px;min-height:76px;font:700 23px/1.15 Baloo,sans-serif}.destinations button:hover{background:color-mix(in srgb,var(--accent) 12%,white)}.destinations img{flex:none}footer{position:relative;z-index:2;margin-top:9px}footer button{min-height:48px;padding:6px 14px;font-size:16px;border-radius:16px;color:var(--ink);background:var(--surface)}dialog{padding:22px;width:min(580px,calc(100% - 24px));max-height:calc(100svh - 32px);overflow:auto;border:3px solid white;border-radius:28px;background:var(--surface);color:var(--ink);box-shadow:0 12px 0 var(--edge),0 24px 90px #0005}dialog::backdrop{background:#102f456b;backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:flex-start;gap:12px;justify-content:space-between}.dialog-head h2{margin:0;font:700 32px/1.2 Baloo,sans-serif}.dialog-head button{flex:none;width:48px;border:2px solid var(--edge);border-radius:50%;background:white}dialog p{font-weight:600}dialog a{color:var(--edge)}.games{display:grid;gap:14px;margin:18px 0}.game{display:block;padding:16px 20px;background:white;border:2px solid var(--accent);border-radius:20px;color:var(--ink);text-decoration:none}.game strong{display:block;font:700 26px/1.2 Baloo,sans-serif}.game span{display:block;margin-top:6px;font-size:18px;font-weight:600}.theme-options{display:grid;gap:10px;margin:18px 0}.theme-options button{background:white;text-align:left;padding:12px 16px;border:2px solid var(--accent);border-radius:16px}.theme-options button[aria-pressed=true]{background:var(--accent);color:white}.notice{padding:12px;border-left:4px solid var(--accent);font-size:18px}.noscript{position:absolute;top:50%;padding:16px;background:white}.art-error{display:none!important}
@media(max-width:900px){.world{min-height:844px}.hero{width:390px}.companion{width:38vw;bottom:146px}.actions{top:47%}.destinations button{padding:10px;max-width:190px}.scene img{object-position:50% 70%}}
@media(max-width:600px){.world{min-height:820px;padding:12px 12px 8px}.topbar{padding:4px 8px;border-radius:20px}.brand{width:56px}.brand img{width:56px;height:56px}.theme-button{font-size:18px;padding:4px;gap:4px}.theme-button img{width:36px;height:36px}.theme-button strong{max-width:190px}.hero{margin-top:12px;width:min(330px,96vw)}.actions{top:40%;width:calc(100% - 28px)}.primary{width:100%;min-height:68px;padding:12px;font-size:25px;gap:8px}.progress{font-size:18px;padding:8px 12px;margin-top:15px;max-width:350px}.companion{width:46vw;bottom:188px}.rech{left:-12px}.mimi{right:-12px}.destinations{width:100%;gap:0;padding:5px;border-radius:20px}.destinations button{flex:1;min-width:0;flex-direction:column;gap:3px;padding:6px 2px;font-size:22px;min-height:108px}.destinations img{width:40px;height:40px}.destinations span{max-width:112px}footer{margin-top:8px}.scene img{object-position:50% 75%}.dialog-head h2{font-size:30px}}
@media(min-width:1600px){.hero{width:490px}.actions{top:49%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.hero.fallback{font:700 42px/1.2 Baloo,sans-serif;text-align:center;background:var(--surface);padding:20px;border-radius:24px}


/* Owner feedback refinement 2026-10-14: compact mobile chrome and illustrated choices. */
dialog[open]{inset:50% 0 auto;transform:translateY(-50%);margin:0 auto}
.companion{z-index:0}
.dialog-intro{margin:8px 0 14px;color:color-mix(in srgb,var(--ink) 82%,white);font-size:18px;font-weight:650}
dialog[data-view=themes]{width:min(1120px,calc(100% - 32px))}
dialog[data-view=journey]{width:min(900px,calc(100% - 32px))}
.theme-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.theme-options .theme-card{position:relative;min-width:0;overflow:hidden;padding:0;border:3px solid color-mix(in srgb,var(--accent) 70%,white);border-radius:22px;background:white;text-align:left;box-shadow:0 5px 0 color-mix(in srgb,var(--edge) 34%,transparent),0 12px 22px #153b3d1a}
.theme-options .theme-card[aria-pressed=true]{border:4px solid var(--accent);background:var(--surface);box-shadow:0 0 0 4px white,0 0 0 7px var(--accent),0 12px 22px #153b3d26}
.theme-preview{display:block;aspect-ratio:4/3;overflow:hidden;background:#d5eee8}
.theme-preview img{display:block;width:100%;height:100%;object-fit:cover}
.theme-card-copy{display:block;min-height:94px;padding:12px 12px 8px}
.theme-card-copy strong{display:block;color:var(--edge);font:700 20px/1.15 Baloo,sans-serif}
.theme-card-copy small{display:block;margin-top:5px;color:var(--ink);font:650 18px/1.3 Nunito,sans-serif}
.theme-status{display:flex;align-items:center;justify-content:center;min-height:42px;margin:0 10px 10px;border-radius:13px;background:color-mix(in srgb,var(--accent) 12%,white);color:var(--edge);font-size:18px;font-weight:800}
.theme-card[aria-pressed=true] .theme-status{background:var(--accent);color:white}
.games{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.game{overflow:hidden;padding:0;border:3px solid color-mix(in srgb,var(--accent) 62%,white);border-radius:25px;background:var(--surface);box-shadow:0 6px 0 color-mix(in srgb,var(--edge) 42%,transparent),0 14px 26px #153b3d1f}
.game:hover{transform:translateY(-2px)}
.game:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--edge) 42%,transparent)}
.game-art{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#bfe9ef}
.game-scene,.game-scene img{display:block;width:100%;height:100%}
.game-scene img{object-fit:cover}
.game-art::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(20,70,65,.22))}
.game-character{position:absolute;z-index:1;right:-3%;bottom:-19%;width:48%;height:auto;filter:drop-shadow(0 8px 7px #153b3d42)}
.game-mark{position:absolute;z-index:2;left:14px;bottom:13px;display:grid;place-items:center;min-width:64px;min-height:56px;padding:3px 11px;border:3px solid white;border-radius:17px;background:linear-gradient(var(--cta),var(--ctab));box-shadow:0 4px 0 #864e24;color:#4a2b12;font:700 34px/1 Baloo,sans-serif}
.game-copy{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:16px}
.game-copy strong{grid-column:1/-1;color:var(--edge);font-size:28px}
.game-domain{grid-column:1/-1;margin:0!important;color:var(--ink);font-size:18px!important}
.game-meta{align-self:center;margin:0!important;color:color-mix(in srgb,var(--ink) 84%,white);font-size:18px!important;font-weight:750!important}
.game-action{display:grid!important;place-items:center;min-height:48px;margin:0!important;padding:7px 15px;border-radius:15px;background:var(--accent);color:white;font-size:18px!important;font-weight:800!important;box-shadow:0 4px 0 var(--edge)}

@media(max-width:900px){
 .theme-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 .theme-options .theme-card:last-child:nth-child(odd){grid-column:1/-1}
 .theme-options .theme-card:last-child:nth-child(odd) .theme-preview{aspect-ratio:2/1}
}
@media(max-width:600px){
 .topbar{width:100%;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
 .brand,.theme-button{display:grid;place-items:center;width:58px;height:58px;min-height:58px;padding:4px;border:2px solid white;border-radius:18px;background:var(--surface);box-shadow:0 5px 0 color-mix(in srgb,var(--edge) 55%,transparent)}
 .brand img{width:48px;height:48px}
 .theme-button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .theme-button img{width:46px;height:46px}
 .hero{margin-top:-2px;width:min(300px,82vw)}
 .actions{top:38.5%}
 .destinations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:4px;padding:6px}
 .destinations button{display:grid;grid-template-rows:44px minmax(50px,auto);align-items:start;justify-items:center;gap:4px;min-height:108px;padding:6px 2px;font-size:22px;line-height:1.05}
 .destinations img{width:42px;height:42px}
 .destinations span{display:grid;place-items:start center;min-height:50px;max-width:112px;text-align:center}
 dialog{padding:16px 14px;border-radius:24px}
 dialog[data-view=themes],dialog[data-view=journey]{width:calc(100% - 18px);height:calc(100svh - 18px);max-height:none;overflow:auto}
 .dialog-head{position:sticky;z-index:4;top:-16px;margin:-4px -2px 0;padding:4px 2px 10px;background:var(--surface)}
 .dialog-head h2{font-size:28px}
 .theme-options{gap:10px}
 .theme-options .theme-card{border-radius:18px}
 .theme-card-copy{min-height:88px;padding:10px 9px 6px}
 .theme-card-copy strong{font-size:18px}
 .theme-card-copy small{font-size:18px}
 .theme-status{min-height:48px;margin:0 8px 8px;font-size:18px}
 .games{grid-template-columns:1fr;gap:16px}
 .game-art{aspect-ratio:2/1}
 .game-copy{padding:14px}
 .game-copy strong{font-size:26px}
 .game-meta{font-size:18px!important}
}
