*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:ui-rounded,"Trebuchet MS",Arial,sans-serif;color:#293d68;background:#fff9ee}button,input{font:inherit}button{cursor:pointer;border:0;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid #bc4153;outline-offset:5px}button:disabled{opacity:.5;cursor:wait}button:hover:not(:disabled){filter:brightness(1.06)}button:active:not(:disabled){transform:translateY(2px)}#game{position:relative;width:100%;height:100%;isolation:isolate}#world{width:100%;height:100%;display:block;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#e8f2ff88,transparent 35%,transparent 65%,#293d6822)}.hud{position:absolute;top:28px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;gap:10px}.eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:2.5px;margin-bottom:7px}.brand strong{font-size:23px;letter-spacing:-.8px}.dot{color:#d5884b}.tools{display:flex;gap:8px}.tools button{width:44px;height:44px;background:#fff9;border:1px solid #fff9;border-radius:50%;font-size:22px}.journey{position:absolute;top:108px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center}.score{display:flex;gap:8px;align-items:center;padding:10px 15px;background:#fff9;border-radius:30px;font-size:12px}.score>span:first-child{color:#a86b19;font-size:24px}.score b{font-size:22px}.route{text-align:right;font-size:11px;letter-spacing:.3px}.route progress{display:block;width:160px;height:5px;margin-top:9px;accent-color:#8d74be;border:0;border-radius:10px;overflow:hidden}.route progress::-webkit-progress-bar{background:#fff9}.route progress::-webkit-progress-value{background:#8d74be}.overlay{position:absolute;inset:0;display:flex;align-items:center;padding:40px 6%;background:linear-gradient(90deg,#fff9eed9,transparent 80%)}.overlay[hidden]{display:none}.card{max-width:480px;padding-top:50px}.tag{font-size:10px;letter-spacing:2px;font-weight:bold;color:#5b5590}h1{font-size:clamp(38px,5.4vw,76px);line-height:1.02;letter-spacing:-3px;margin:20px 0}h1 em{font-family:Georgia,serif;font-weight:normal;color:#c4415b}#description{font-size:15px;line-height:1.8;color:#52617a}.primary{background:#365ed1;color:#fffde8;border-radius:50px;padding:18px 32px;font-weight:700;min-height:58px;margin:12px 0 4px;box-shadow:0 8px 20px #365ed120}.hint{font-size:11px;color:#52617a;line-height:1.6}.gentle{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:18px;min-height:30px}.gentle input{width:18px;height:18px;accent-color:#365ed1}.nameplate{position:absolute;right:16%;top:44%;transform:rotate(-9deg);font-family:Georgia,serif;font-style:italic;font-size:21px;color:#52617a}.nameplate span{display:block;font-size:40px;text-align:right}.controls{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;gap:12px}.directions{display:flex;gap:10px}.directions button{width:62px;height:58px;border-radius:20px;font-size:30px;background:#fffc;box-shadow:0 4px 0 #355a4220}.jump{min-width:116px;height:60px;border-radius:22px;background:#f7d885;font-weight:bold;font-size:20px;box-shadow:0 4px 0 #9d77384a}.jump span{margin-left:14px}.keyboard{font-size:11px;color:#52617a;background:#fff9eeb0;border-radius:20px;padding:9px 14px}.keyboard span{margin:0 10px}.announcement{position:absolute;bottom:102px;left:15%;right:15%;text-align:center;font-size:15px;font-weight:bold;pointer-events:none;text-shadow:0 1px 8px #fff}.nojs{position:absolute;inset:40%;background:white;padding:20px}body[data-mode=playing] .nameplate{display:none}
@media(max-width:600px){.hud{top:20px;left:18px;right:18px}.brand strong{font-size:18px}.eyebrow{font-size:8px;letter-spacing:1.6px}.tools{gap:5px}.tools button{width:38px;height:38px}.journey{top:88px;left:18px;right:18px}.route progress{width:112px}.score{gap:5px;padding:7px 10px}.score>span:last-child{font-size:10px}.route{font-size:9px}.overlay{align-items:flex-start;padding:150px 24px 90px;background:linear-gradient(90deg,#fff9eecf,transparent)}.card{padding:0;max-width:310px}h1{font-size:44px;letter-spacing:-2px;margin:15px 0}#description{font-size:13px}.primary{padding:15px 25px;min-height:52px}.nameplate{display:none}.hint{max-width:210px}.gentle{font-size:11px;margin-top:6px}.controls{left:18px;right:18px;bottom:max(20px,env(safe-area-inset-bottom))}.keyboard{display:none}.directions button{width:58px;height:58px}.jump{min-width:108px}.tag{font-size:8px}}
@media(max-height:510px){.hud{top:12px}.journey{top:67px}.overlay{padding:90px 6% 75px;align-items:center}.card{padding:0;max-width:70%}h1{font-size:34px;margin:5px 0}h1 br{display:none}.tag,.hint,.nameplate{display:none}#description{font-size:12px;margin:5px 0;line-height:1.4}.primary{min-height:44px;padding:10px 24px;margin:4px 0}.gentle{margin:0}.controls{bottom:12px}.directions button,.jump{height:48px}.announcement{bottom:65px}}
@media(max-width:600px) and (max-height:650px) and (min-height:511px){.overlay{padding-top:127px}h1{font-size:34px;line-height:1.02;margin:10px 0}#description{font-size:12px;line-height:1.5;margin:8px 0}.primary{min-height:46px;padding:12px 20px;margin:7px 0 0}.hint{font-size:10px;margin:8px 0;max-width:240px}.gentle{font-size:10px;margin:0}.tag{font-size:7px;letter-spacing:1.5px}}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.basket{position:absolute;top:160px;left:32px;display:flex;gap:6px;pointer-events:none}.basket span{background:#fff9eee8;border:1px solid #c9d9ee;padding:8px 10px;border-radius:14px;font-size:16px;opacity:.65}.basket .found{opacity:1;background:#e6edff;border-color:#8da8df}.overlay{z-index:2}.controls,.hud{z-index:3}body:not([data-mode=playing]) .basket{display:none}
@media(max-width:600px){.basket{top:132px;left:18px}.basket span{font-size:13px;padding:6px 8px}.card{max-width:330px}#description{line-height:1.6}}
@media(max-height:510px){.basket{top:110px;left:32px}.basket span{font-size:12px;padding:4px 8px}.overlay .card{max-width:76%}}

.pace-controls{display:flex;gap:6px}.pace-controls button{min-height:44px;padding:10px 14px;background:#e7efff;border:1px solid #bacded;border-radius:16px;font-weight:bold;font-size:12px}.pace-controls .held{background:#365ed1;color:white}
@media(max-width:1000px){.keyboard{display:none}}
@media(max-width:600px){.pace-controls{position:absolute;bottom:76px;left:0;right:0;justify-content:center}.pace-controls button{padding:8px 14px}.announcement{bottom:156px}}
/* Mobile games get a separate control dock: buttons never sit on the canvas. */
body:not([data-mode="playing"]) .controls,
body:not([data-mode="playing"]) .journey,
body:not([data-mode="playing"]) .basket{display:none}
.overlay{z-index:10;overflow:auto;overscroll-behavior:contain}
.hud{z-index:11}
@media(max-width:900px),(pointer:coarse){
 #game{--hud-space:132px;--control-space:116px}
 #world{position:absolute;top:var(--hud-space);left:0;width:100%;height:calc(100% - var(--hud-space) - var(--control-space))}
 .vignette{display:none}
 .hud{top:8px;left:12px;right:12px;height:40px}.eyebrow{display:none}.brand strong{font-size:18px}.tools button{width:40px;height:40px}
 .journey{top:56px;left:12px;right:12px}.score{padding:4px 10px}.score b{font-size:18px}.score>span:first-child{font-size:18px}.route progress{width:110px;margin-top:5px}
 .basket{top:96px;left:12px;gap:5px}.basket span{font-size:13px;padding:5px 9px}
 .controls{inset:auto 0 0;height:var(--control-space);padding:8px 12px max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:112px 1fr 80px;gap:8px;background:#fff9ee;border-top:1px solid #d4e3f8}
 .directions{gap:8px}.directions button{width:52px;height:54px;border-radius:16px}
 .pace-controls{position:static;display:grid;gap:4px;justify-content:stretch}.pace-controls button{min-height:44px;padding:5px 4px;font-size:11px;border-radius:12px}
 .jump{min-width:0;width:80px;height:66px;font-size:18px}.jump span{margin-left:4px}.keyboard{display:none}
 .announcement{bottom:calc(var(--control-space) + 6px);left:12px;right:12px;font-size:12px;margin:0;background:#fff9eee8;border-radius:12px;padding:5px}
 .announcement:empty{display:none}
 .overlay{inset:52px 0 0;padding:16px 20px;display:block;background:#fff9eef2}
 .overlay .card{padding:0;max-width:520px;margin:0 auto}.overlay h1{font-size:34px;line-height:1.06;letter-spacing:-1px;margin:10px 0}.overlay h1 br{display:none}
 #description{font-size:13px;line-height:1.5;margin:12px 0}.primary{min-height:48px;padding:12px 22px;width:100%;margin:6px 0}.gentle{min-height:44px;margin:4px 0}.hint{max-width:none;font-size:11px;margin:8px 0}.nameplate{display:none}
}
@media(max-height:480px) and (min-width:601px){
 #game{--hud-space:98px;--control-space:68px}
 .journey{top:52px;right:12px;left:auto;width:240px}.basket{top:58px}.route{display:none}
 .controls{grid-template-columns:128px 220px 90px;justify-content:space-between;padding:6px 14px}.pace-controls{display:flex}.pace-controls button{padding:8px 14px}.directions button,.jump{height:48px}.jump{width:90px}
 .overlay{padding:10px 24px}.overlay h1{font-size:26px}#description{margin:6px 0}.overlay .card{max-width:620px}.tag,.hint{display:none}
}
@media(max-width:350px){.controls{grid-template-columns:96px 1fr 68px;gap:5px;padding-left:8px;padding-right:8px}.directions{gap:4px}.directions button{width:46px}.jump{width:68px}.tools{gap:3px}.brand strong{font-size:16px}.basket span{padding:5px 7px}}