:root{font-family:ui-rounded,"SF Pro Rounded","Trebuchet MS",system-ui,-apple-system,sans-serif;
 --ink:#183747;--soft:#486675;--deep:#174a63;--leaf:#4e9b72;--sun:#ffd26a;--panel:rgba(255,255,255,.94);--shadow:0 10px 30px rgba(24,55,71,.15);--fs:1;--glow:#3fbf7f;--top:84px;
 --bg:radial-gradient(circle at 90% 0%,rgba(255,210,106,.6),transparent 25%),linear-gradient(180deg,#d9f3f7,#fff6df)}
body.hc{--ink:#000;--soft:#000;--deep:#000;--panel:#fff;--bg:#fff;--glow:#0050ff}
body.hc button{border:3px solid #000!important}
body.dys{font-family:Verdana,"Comic Sans MS",sans-serif;letter-spacing:.04em}
*{box-sizing:border-box}
html{font-size:calc(100% * var(--fs))}
html,body{margin:0;height:100%;overflow:hidden}
body{height:100dvh;background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
img{display:block;max-width:100%;-webkit-user-drag:none}
:focus-visible{outline:4px solid var(--deep);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;height:84px}
.tools{display:flex;gap:8px}
.tool{width:68px;height:68px;border-radius:20px;border:0;background:var(--panel);box-shadow:var(--shadow);font-size:1.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding:4px}
.tool small{font-size:.68rem;font-weight:800;margin-top:4px;white-space:nowrap}
.tool.home{width:84px;border:3px solid var(--deep)}
.tool[aria-pressed=false]{opacity:.75}
.stage{height:calc(100dvh - var(--top));max-width:1100px;margin:0 auto;padding:0 12px 12px;outline:none;overflow:hidden}
.screen{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:6px;overflow:hidden;text-align:center}
h1{font-size:clamp(1.5rem,4.6vw,2.6rem);margin:0;line-height:1.1}
h2{font-size:1.5rem;margin:.2em 0}
p{font-size:1.1rem}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.maincard{background:var(--panel);border-radius:28px;box-shadow:var(--shadow);padding:clamp(12px,3vh,32px) clamp(12px,3vw,40px);display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.8vh,18px);max-width:640px;width:100%}
.badge-mode{display:inline-block;font-size:.9rem;vertical-align:middle;background:var(--deep);color:#fff;border-radius:999px;padding:4px 12px}
input[type=text]{height:64px;font-size:1.3rem;padding:6px 18px;border-radius:999px;border:3px solid var(--deep);text-align:center;width:min(360px,100%);-webkit-user-select:text;user-select:text}
.btn{min-height:64px;min-width:64px;padding:6px 20px;border-radius:999px;border:3px solid var(--deep);background:#fff;font-weight:800;font-size:1.1rem}
.btn[aria-pressed=true],.btn.primary{background:var(--deep);color:#fff}
.mode small{display:block;font-weight:600;font-size:.8rem}
.big-btn{border:0;border-radius:999px;min-height:84px;min-width:220px;padding:12px 44px;background:linear-gradient(180deg,#ffd96c,#f4b647);color:#253b3f;font-size:clamp(1.5rem,4.5vw,2.1rem);font-weight:900;box-shadow:0 8px 0 #c9832f}
.big-btn:active{transform:translateY(3px);box-shadow:0 5px 0 #c9832f}
.speaker{width:80px;height:80px;flex:none;border-radius:50%;border:4px solid var(--leaf);background:#fff;font-size:2.2rem;box-shadow:var(--shadow)}
.tokens{display:flex;gap:10px;flex:none}
.tokens span{width:22px;height:22px;border-radius:50%;border:3px solid var(--deep);background:#fff}
.tokens span.on{background:var(--sun)}
/* picture boxes: fixed shape, safe fallback */
.imgbox{display:block;position:relative;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#eef6f8}
.imgbox img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.imgbox.wide{aspect-ratio:520/280;background:transparent}
.imgbox.obj{aspect-ratio:280/220;background:transparent}
.imgbox.emo{aspect-ratio:1;background:#fff7dc}
.imgbox.bg{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.imgbox.bg img{object-fit:cover}
.fb{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.fb b{font-size:clamp(1.8rem,9vmin,3.6rem);line-height:1;font-weight:400}
.imgbox.emo .fb b{font-size:2.6rem}
.fb i{font-style:normal;font-weight:800;font-size:.95rem}
.imgbox.broken{background:#fff3c9;border:3px dashed #e0b94e}
/* choice cards */
.choices{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-content:center;max-width:100%}
.pick{position:relative;padding:8px;border-radius:22px;border:5px solid transparent;background:#fff;box-shadow:var(--shadow);font-weight:900;flex:none}
.pick .cap,.gobtn .cap{display:block;font-size:1.15rem;line-height:1.2;margin-top:4px}
.pick.mini{width:clamp(84px,22vw,130px);padding:6px}
.pick.mini .cap{font-size:1rem}
.pick[aria-pressed=true]{border-color:var(--leaf);background:#eefaf2}
.pick.show{box-shadow:0 0 0 6px rgba(255,210,106,.8)}
.pick::after,.spot::after{content:"";position:absolute;inset:-9px;border-radius:28px;box-shadow:0 0 0 8px var(--glow),0 0 26px 6px rgba(63,191,127,.6);opacity:0;transition:opacity 1.5s ease;pointer-events:none}
.pick.glow::after,.spot.glow::after,.pick.pulse::after,.spot.pulse::after{opacity:1}
.pick.pulse,.spot.pulse{animation:pulse 1.8s ease-in-out infinite}
.spot.pulse{animation-name:pulse-spot}
@keyframes pulse{50%{transform:scale(1.06)}}
@keyframes pulse-spot{50%{transform:translateX(-50%) scale(1.06)}}
.num{position:absolute;top:-12px;left:-12px;width:44px;height:44px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font-size:1.4rem;font-weight:900;z-index:2}
.slots{display:flex;gap:16px;flex:none}
.slot{position:relative;width:min(16vh,130px);aspect-ratio:4/3;min-width:72px;border-radius:18px;border:4px dashed var(--deep);background:rgba(255,255,255,.7);padding:4px}
.slot.filled{border-style:solid}
.slot .imgbox{height:100%}
.gobtn{border:0;background:var(--panel);border-radius:28px;box-shadow:var(--shadow);padding:12px;font-weight:900;font-size:1.6rem;max-width:100%}
/* travel */
.travel{position:relative;width:100%;max-width:900px;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,#9fe0ef 0 55%,#a9d982 55% 80%,#c89d50 80%)}
.travel .hill{position:absolute;bottom:20%;width:60%;height:40%;border-radius:50% 50% 0 0;background:#8fc77c}
.travel .hill.b{left:45%;background:#7cb86b;height:30%}
.travel .sun{position:absolute;right:8%;top:10%;width:60px;height:60px;border-radius:50%;background:var(--sun)}
.travel .track{position:absolute;left:0;right:0;bottom:12%;height:8px;background:#8a6a48}
.travel .mover{position:absolute;bottom:12%;width:38%;left:31%}
.travel.moving .mover{animation:ride var(--ride,6s) linear forwards}
@keyframes ride{from{left:-38%}to{left:62%}}
/* scenes */
.scene{position:relative;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);background:#e9f3f5;max-width:100%;flex:none}
.hot{position:absolute;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:5px solid #fff;background:rgba(255,210,106,.6);font-size:1.9rem;z-index:2}
.hot-say{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:var(--panel);padding:6px 18px;border-radius:999px;font-weight:900;font-size:1.3rem;pointer-events:none;z-index:3}
.hot-say:empty{display:none}
.spot{position:absolute;bottom:5%;transform:translateX(-50%);border:5px solid transparent;border-radius:22px;background:rgba(255,255,255,.55);padding:4px;min-width:72px;z-index:2}
.spot .cap{display:block;font-weight:900;background:var(--panel);border-radius:10px;font-size:.95rem}
.spot.found{border-color:var(--glow)}
.hider{position:absolute;font-size:clamp(48px,9vh,84px);line-height:1;left:50%;top:6%;transform:translate(-50%,0);pointer-events:none;z-index:4}
.hider.moving{transition:left 2.4s ease-in-out,top 2.4s ease-in-out}
.hider.gone{visibility:hidden}
.hider.peek{z-index:5}
.still{font-size:min(30vh,9rem);opacity:.9}
.bubbles{position:relative;width:100%;max-width:700px;border-radius:26px;background:linear-gradient(180deg,#c9eef7,#e8f8fb)}
.bubble{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:4px solid #fff;background:radial-gradient(circle at 35% 30%,#fff 0 12%,rgba(160,220,255,.55) 13% 100%)}
.bubble.popped{visibility:hidden}
/* rewards */
.reward{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font-size:min(30vh,12rem);pointer-events:none;z-index:10;animation:rew 2s ease-out forwards}
.reward.small{font-size:min(16vh,6rem)}
@keyframes rew{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}25%{transform:translate(-50%,-50%) scale(1.05);opacity:1}75%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
.final{font-size:clamp(2.4rem,10vw,5rem);animation:rew2 1.2s ease-out}
@keyframes rew2{from{transform:scale(.6)}to{transform:none}}
.overlay{position:fixed;inset:0;background:rgba(24,55,71,.45);display:grid;place-items:center;z-index:30;padding:12px}
.overlay[hidden]{display:none}
.overlay .card{background:var(--panel);border-radius:24px;padding:20px;max-width:520px;width:100%;max-height:92vh;overflow:auto}
.set{display:flex;justify-content:space-between;align-items:center;min-height:60px;font-size:1.1rem;font-weight:700;border-bottom:1px solid #dde}
.set input[type=checkbox]{width:34px;height:34px}
body.rm *,body.rm *::before,body.rm *::after{animation:none!important;transition:none!important}
body.rm .reward{opacity:1}
body.rm .pick.pulse::after,body.rm .spot.pulse::after{box-shadow:0 0 0 12px var(--glow)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.pick.pulse::after,.spot.pulse::after{box-shadow:0 0 0 12px var(--glow)}}
@media (max-height:700px){.topbar{height:76px}.tool{height:64px;width:64px}.tool.home{width:78px}}
@media (max-width:420px){.topbar{padding:8px 6px;gap:6px}.tools{gap:6px}.tool{width:64px}.tool.home{width:68px}.tool small{font-size:.62rem}}
/* tablets / Safari: real viewport units + safe areas, never wider than the screen */
body{height:100vh;height:100svh;height:100dvh}
.topbar{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-top:max(8px,env(safe-area-inset-top))}
.stage{height:calc(100vh - var(--top));height:calc(100svh - var(--top));height:calc(100dvh - var(--top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom));width:100%}
.screen,.choices,.scene,.travel,.bubbles{max-width:100%}
.pick{max-width:calc(50% - 8px)}
.choices .pick{max-width:100%}
.speaker.playing{border-color:var(--sun);background:#fffbe9;box-shadow:0 0 0 6px rgba(255,210,106,.55),var(--shadow)}
/* big, obvious start buttons: green, high contrast, slow gentle glow (off with reduced motion) */
.go-btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;min-height:clamp(96px,14vh,140px);min-width:clamp(180px,30vw,320px);padding:10px 48px;background:#1f8a4c;color:#fff;font-size:clamp(2rem,6vh,3rem);font-weight:900;letter-spacing:.04em;box-shadow:0 8px 0 #145c33,0 0 0 0 rgba(31,138,76,.45);animation:goglow 2.8s ease-in-out infinite;cursor:pointer}
.go-btn:active{transform:translateY(3px);box-shadow:0 5px 0 #145c33}
@keyframes goglow{0%,100%{box-shadow:0 8px 0 #145c33,0 0 0 0 rgba(31,138,76,.45)}50%{box-shadow:0 8px 0 #145c33,0 0 0 16px rgba(31,138,76,.18)}}
body.hc .go-btn{background:#000;color:#fff}
.gobtn{display:flex;flex-direction:column;align-items:center;gap:14px}
.gobtn .go-btn{pointer-events:none}
@media (min-width:700px) and (min-height:600px){.go-btn{min-height:120px;min-width:240px}}
body.rm .go-btn{animation:none}
@media (prefers-reduced-motion:reduce){.go-btn{animation:none}}
/* tap targets never move: only the glow layer animates */
.pick.pulse,.spot.pulse{animation:none!important}
.pick.pulse::after,.spot.pulse::after{animation:glowbreath 1.8s ease-in-out infinite}
@keyframes glowbreath{0%,100%{opacity:.55}50%{opacity:1}}
body.rm .pick.pulse::after,body.rm .spot.pulse::after{animation:none;opacity:1}
/* gentle neutral acknowledgement of a wrong tap: picture dips, card stays put, no colour */
.pick.dip .imgbox,.spot.dip .imgbox{animation:dip .45s ease-out}
@keyframes dip{40%{transform:translateY(6px) scale(.97)}}
.scene.plain{background:linear-gradient(180deg,#eaf6f8,#f6efe0)}