:root{color-scheme:light;font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:#193c51;background:#147ba5;font-synthesis:none;--ink:#193c51;--green:#13995b;--paper:#fffcf0;--blue:#126f9c}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overscroll-behavior:none}body{display:grid;place-items:center;min-height:100svh;background:radial-gradient(ellipse at 50% 0,#58c6e7,#126790)}button{font:inherit;font-weight:800;cursor:pointer;min-height:46px;border:0;border-radius:16px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--ink);background:var(--paper);box-shadow:0 4px 0 #18465c20;padding:11px 15px;transition:transform .12s,filter .12s}button:active{transform:translateY(3px);box-shadow:none}button:hover{filter:brightness(1.035)}button:focus-visible{outline:3px solid #143e68;outline-offset:3px}button:disabled{cursor:default;opacity:.65}.primary{background:var(--green);color:#fff}.blue{background:var(--blue);color:#fff}.small{font-size:.875rem}.muted{color:#597080}#game{position:relative;isolation:isolate;width:100%;max-width:480px;height:100svh;height:100dvh;max-height:900px;overflow:hidden;background:#54c9ef;box-shadow:0 0 80px #06355266}#scene{position:absolute;width:100%;height:100%;inset:0;touch-action:none}#ui{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));scrollbar-width:thin}#ui:empty{pointer-events:none}#ui.playing{pointer-events:none;display:grid;place-items:center}#ui.playing>*{pointer-events:auto}h1,h2,h3,p{margin:0}h2{font-size:1.5rem}h3{font-size:1.1rem}.home{min-height:100%;display:flex;flex-direction:column;gap:12px;align-items:center}.home-top{display:flex;justify-content:space-between;width:100%;align-items:center;gap:8px}.eyebrow{font-weight:800;letter-spacing:.11em;font-size:.75rem}.coin-pill{display:inline-flex;gap:7px;align-items:center;white-space:nowrap;background:#fffcf0ed;border-radius:30px;padding:8px 12px;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}.coin-icon{display:inline-grid;place-items:center;border-radius:50%;background:#ffcf48;box-shadow:inset 0 0 0 2px #e3a122;color:#956319;width:23px;height:23px;font-size:14px}.logo{font-size:clamp(3rem,13vw,4.7rem);text-align:center;line-height:.91;letter-spacing:-.055em;color:#fff;text-shadow:0 4px 0 #20516b; margin-top:12px}.logo b{display:block;color:#ffd54e;font-size:1.36em;text-shadow:0 5px 0 #bc7821}.tagline{font-size:1rem;font-weight:700;margin-top:6px}.mascot{width:130px;height:150px;object-fit:contain;filter:drop-shadow(0 10px 0 #18465b12);animation:bob 3s ease-in-out infinite}.home-hero{display:flex;flex:1;min-height:140px;max-height:240px;align-items:center;justify-content:center}.play-button{width:82%;font-size:1.3rem;min-height:58px;border-radius:20px}.record{font-size:.875rem;font-weight:800;text-align:center}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:3px}.menu-grid button{font-size:.94rem}.footer-nav{display:flex;gap:8px;width:100%}.footer-nav button{flex:1;font-size:.8rem;padding:10px 6px;background:#1e7198;color:white}.footnote{font-size:.8rem;text-align:center}.page-head{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:10px;margin-bottom:20px}.page-head h2{text-align:center;font-size:1.15rem;letter-spacing:.025em}.page-head button{font-size:1.5rem;padding:5px}.page{display:flex;flex-direction:column;gap:14px}.card{background:var(--paper);border-radius:23px;padding:20px;box-shadow:0 5px 0 #17395012}.intro{font-size:1rem;text-align:center;margin:0 0 5px}.skin-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.skin-card{text-align:center;padding:10px;display:flex;flex-direction:column;gap:8px}.skin-picture{height:140px;background:#daedf1;border-radius:17px;display:grid;place-items:center}.skin-picture img{height:130px;width:110px;object-fit:contain}.skin-card.selected .skin-picture{background:#d1ecd8}.skin-card button{font-size:.85rem;width:100%;padding:10px 4px}.world{display:grid;grid-template-columns:68px 1fr;gap:16px;align-items:center}.world-art{height:120px;border-radius:18px;background:linear-gradient(#54c9ef,#b8eece);position:relative;overflow:hidden}.world-art:after{content:'☀';position:absolute;top:15px;left:16px;color:#fff2b9;font-size:2rem}.world-art.sunset{background:linear-gradient(#735580,#ffa279)}.world-art.night{background:linear-gradient(#17294e,#5775a0)}.world-art.night:after{content:'☾'}.world p{margin:8px 0 12px;font-size:.875rem}.world button{width:100%}.row{display:flex;align-items:center;justify-content:space-between;gap:16px}.setting{padding:15px 0;border-bottom:1px solid #dce7df}.setting:last-child{border:0}.setting span{display:block;font-size:.875rem;color:#597080;margin-top:5px}.switch{width:60px;min-width:60px;min-height:36px;height:36px;padding:4px;background:#81969a;box-shadow:none;border-radius:30px}.switch:after{content:'';display:block;width:28px;height:28px;border-radius:50%;background:white}.switch[aria-checked=true]{background:var(--green)}.switch[aria-checked=true]:after{margin-left:24px}.progress{height:8px;border-radius:10px;background:#dce8e1;overflow:hidden;margin:14px 0}.progress i{display:block;height:100%;background:var(--green);border-radius:10px}.stat-number{font-size:4rem;font-weight:900}.center{text-align:center}.badge{display:grid;grid-template-columns:40px 1fr;gap:12px}.badge-mark{font-size:1.8rem;color:var(--green)}.story img{width:130px;height:145px;object-fit:contain;margin:auto;display:block}.story h3{font-size:1.35rem;margin:10px 0 20px}.story p{font-size:1rem;line-height:1.8;margin-bottom:10px}.story-nav{display:flex;justify-content:space-between;align-items:center}#hud{position:absolute;inset:max(16px,env(safe-area-inset-top)) 16px auto;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none;z-index:2}#hud[hidden]{display:none}#hud button{pointer-events:auto;background:#1d577e;color:white;width:48px;font-size:1.2rem}#score{position:absolute;left:50%;transform:translateX(-50%);top:42px;font-size:3.8rem;color:white;text-shadow:0 3px 0 #174e68;font-variant-numeric:tabular-nums}.ready{margin-top:20vh;background:#fffcf0ed;border-radius:24px;padding:22px;text-align:center;box-shadow:0 5px 0 #17395016;pointer-events:none!important}.ready h2{font-size:1.2rem}.ready p{margin-top:10px;font-size:1rem}.scrim{position:absolute;inset:0;display:grid;place-items:center;background:#102e4b70;padding:24px}.dialog{width:100%;max-width:360px;text-align:center;display:flex;flex-direction:column;gap:16px}.dialog h2{font-size:1.45rem}.dialog .stat-number{line-height:1}.dialog p{line-height:1.5}.dialog-actions{display:grid;gap:10px}#toast{position:absolute;z-index:10;bottom:max(24px,env(safe-area-inset-bottom));left:5%;width:90%;text-align:center;border-radius:16px;background:#183e50;color:white;padding:14px;font-size:.94rem;pointer-events:none;opacity:0;transition:opacity .2s}#toast.visible{opacity:1}#game.night .home,#game.night .page-head,#game.night .intro,#game.night .outside{color:#fffcf0}@keyframes bob{50%{transform:translateY(-7px) rotate(-4deg)}}@media(max-height:720px){.home{gap:9px}.logo{font-size:3.15rem;margin-top:5px}.home-hero{min-height:95px;max-height:135px}.mascot{height:113px;width:105px}.play-button{min-height:50px}.menu-grid{gap:8px}.menu-grid button{min-height:44px;padding:10px}.footnote{display:none}}@media(min-width:700px){#game{border-radius:24px;height:calc(100dvh - 32px)}body{padding:16px}}@media(prefers-reduced-motion:reduce){.mascot{animation:none}button{transition:none}}
/* Keep a comfortable portrait playfield even on a landscape monitor. */
#game{max-width:min(480px,calc(100dvh * .67))}
@supports not (height:100dvh){#game{height:100vh;max-width:480px}}
.page-head{grid-template-columns:46px minmax(0,1fr) auto}.page-head h2,.skin-card h3{overflow-wrap:anywhere}.world{grid-template-columns:68px minmax(0,1fr)}.menu-grid button,.footer-nav button{min-width:0;overflow-wrap:anywhere}
@media(orientation:landscape) and (max-height:500px){.logo{font-size:2.3rem}.home-top .eyebrow{letter-spacing:0}.tagline{text-align:center}}
.skin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skin-card{min-width:0}.skin-picture img{max-width:100%}.skin-card button{overflow-wrap:anywhere}.ready{background:var(--paper)}
