:root{font-family:Georgia,'Times New Roman',serif;color:#fff0c9;background:#b7d7cf;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:600 16px system-ui;cursor:pointer;border:1px solid #fff0c94a;border-radius:6px;padding:15px 24px;background:#e7ddc2;color:#183e3d;touch-action:manipulation}button:hover{background:#fff0c9}button:focus-visible{outline:3px solid #62c9bc;outline-offset:4px}button:active{transform:translateY(1px)}button:disabled{opacity:.5}canvas{display:block;width:100vw;height:100dvh;touch-action:none}.panel{position:absolute;top:50%;left:7%;transform:translateY(-50%);max-width:440px;padding:40px;background:linear-gradient(120deg,#183e3df2,#183e3dcc);box-shadow:0 20px 100px #183e3d35;border:1px solid #e7ddc233;border-radius:4px}.eyebrow{font:11px system-ui;letter-spacing:.22em;color:#a9d5c5;margin:0 0 15px}h1{font-weight:400;font-size:clamp(34px,5vw,66px);line-height:1.05;margin:0 0 24px}.panel p:not(.eyebrow){line-height:1.7;color:#e7ddc2}.panel button{margin:10px 0 4px}.fine{font:11px system-ui!important;opacity:.7}.secondary{background:transparent;color:#e7ddc2;width:100%;margin:4px 0!important}.secondary:hover{background:#3f7860}.compact{left:50%;transform:translate(-50%,-50%);min-width:310px;max-width:420px}.compact h1{font-size:38px}#hud{position:absolute;top:24px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:start;text-shadow:0 2px 8px #183e3d}#hud .eyebrow{margin-bottom:6px;color:#fff0c9}h2{font-size:25px;font-weight:400;margin:0}#pause{background:#183e3dd9;color:#fff0c9;padding:10px 15px}#caption{position:absolute;bottom:116px;left:50%;transform:translateX(-50%);text-align:center;max-width:540px;width:80%;font-size:18px;line-height:1.4;text-shadow:0 2px 6px #183e3d;background:#183e3de3;border-radius:4px;padding:12px 20px;pointer-events:none;opacity:0;transition:opacity .3s}#charge{position:absolute;bottom:45px;left:32px;background:#183e3ddc;padding:9px 15px;border:1px solid #fff0c933;border-radius:40px;display:flex;align-items:center;gap:10px;font:13px system-ui}#chargeIcon{font-size:30px;color:#62c9bc}#action{position:absolute;right:32px;bottom:34px;min-width:175px;background:#183e3ded;color:#fff0c9;box-shadow:0 4px 20px #183e3d33}#action span{display:block;font-size:9px;letter-spacing:.15em;opacity:.65;margin-top:6px}#hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font:11px system-ui;white-space:nowrap;color:#183e3d}#hint span{padding:0 12px}#stick{display:none;position:absolute;bottom:26px;left:24px;width:116px;height:116px;border-radius:50%;border:1px solid #fff0c966;background:#183e3d66;touch-action:none}#knob{position:absolute;width:44px;height:44px;top:35px;left:35px;background:#e7ddc2d9;border-radius:50%;pointer-events:none;border:2px solid #fff0c9}#error{position:absolute;inset:20%;background:#183e3d;padding:24px} [hidden]{display:none!important}@media(pointer:coarse),(max-width:700px){#stick{display:block}#hint{display:none!important}.panel{left:22px;right:22px;top:auto;bottom:155px;transform:none;padding:24px;max-width:410px}.panel h1{font-size:40px}.compact{bottom:20%;left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 40px)}#hud{top:max(20px,env(safe-area-inset-top));left:20px;right:20px}h2{font-size:21px;max-width:270px}#charge{bottom:158px;left:20px;font-size:11px;padding:4px 12px}#action{right:20px;bottom:40px;min-width:128px;padding:18px 14px}#caption{bottom:220px;font-size:16px;width:90%}} 

#targetMarker{position:absolute;transform:translate(-50%,-100%);background:#183e3de8;color:#e7ddc2;border:1px solid #62c9bc77;border-radius:24px;padding:8px 12px;font:12px system-ui;pointer-events:none;box-shadow:0 4px 12px #183e3d33}
@media(pointer:coarse),(max-width:700px){#action span{display:none}}

#jump,#run{position:absolute;bottom:36px;background:#183e3de0;color:#fff0c9;padding:13px 20px}#jump{right:232px}#run{right:332px}#jump span,#run span{display:block;font:9px system-ui;opacity:.6;margin-top:6px}#run[aria-pressed=true]{border-color:#8ae9c0;background:#3c7160}#action:disabled{opacity:.55}#hud{pointer-events:none}#pause{pointer-events:auto}#caption:empty{display:none}#hint{color:#fff0c9;text-shadow:0 1px 4px #183e3d}#targetMarker{display:none!important}
@media(pointer:coarse),(max-width:700px){#jump{right:24px;bottom:120px;padding:13px 24px}#run{display:none}#action{bottom:38px;max-width:170px;min-height:62px}#jump span{display:none}#caption{bottom:225px}.panel{bottom:190px}#charge{bottom:170px}#hud .eyebrow{font-size:9px}h2{font-size:19px}}

/* Game gestures must not start native selection or long-press callouts. */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
#controls,#controls button{touch-action:none}
#audioUnlock{display:none;background:#e7ddc2;color:#183e3d}
#map{position:absolute;right:28px;bottom:112px;width:220px;height:150px;border:1px solid #d7c58d88;border-radius:12px;background:#102e2de8;box-shadow:0 10px 30px #102e3d66,0 0 0 4px #102e2d44;pointer-events:none;image-rendering:auto;padding:4px}
@media(max-width:700px){#audioUnlock:not([hidden]){display:block;position:absolute;right:20px;bottom:181px;padding:12px 16px;font-size:13px}}
@media(pointer:coarse),(max-width:700px){#map{right:14px;bottom:270px;width:156px;height:106px;opacity:.94}}

@media(min-width:701px){#action{width:185px;min-height:72px;padding:10px 12px;font-size:14px}#hint{color:#fff1cd;text-shadow:0 1px 4px #173c32}}

/* Field instruments: parchment, forest ink and aged copper. */
:root{--ink:#243e37;--paper:#eee0bb;--copper:#ae7951}
#mapToggle{display:none}
#map.expanded{pointer-events:auto;touch-action:none}
@media(pointer:coarse){.deep-chart #map:not(.expanded){visibility:hidden}}
#pausePanel{top:50%;bottom:auto;transform:translate(-50%,-50%);max-height:calc(100dvh - 24px);overflow-y:auto;z-index:20;scrollbar-width:thin}
#hud{top:max(24px,env(safe-area-inset-top));gap:20px;text-shadow:none}
#hud>div{max-width:min(560px,calc(100vw - 130px));padding:15px 22px 17px;border-left:3px solid var(--copper);border-radius:2px 12px 12px 2px;background:linear-gradient(110deg,#203b34f5,#203b34d9);box-shadow:0 8px 30px #142b3426}
#hud .eyebrow{color:#d6b986;font-size:9px;letter-spacing:.24em;margin-bottom:7px}
#objective{font-size:clamp(18px,2.1vw,25px);line-height:1.25;color:#f4e8cb;text-wrap:balance}
#pause{border:1px solid var(--copper);border-radius:50%;width:42px;height:42px;padding:0;background:var(--ink);color:var(--paper)}
#map{right:28px;top:128px;bottom:auto;width:270px;height:auto;aspect-ratio:300/354;padding:0;border:1px solid var(--copper);border-radius:5px;background:var(--paper);box-shadow:0 12px 35px #152d3440,0 0 0 3px #263e3733;opacity:1}
#charge{border:1px solid #ae795199;border-radius:4px;background:#243e37ed;color:var(--paper);box-shadow:0 6px 20px #142b3426;padding:10px 16px}
#chargeIcon{color:#e2b975}
#action,#jump,#run{border:1px solid #ae7951bb;border-radius:5px;background:#243e37f2;color:var(--paper);box-shadow:0 5px 18px #142b3426}
#action{background:linear-gradient(135deg,#f1e4c3,#ddc696);color:var(--ink);border-color:#d5b57c}
#action:hover{background:#fff0cd}#jump:hover,#run:hover,#pause:hover{background:#355447}
#caption{border:1px solid #ae795177;background:#243e37f2;color:#f4e8cb;border-radius:5px;text-shadow:none}
#hint{bottom:9px;padding:6px 12px;border-radius:4px;background:#243e37ed;color:var(--paper);text-shadow:none;font-size:10px}
#hint span{padding:0 6px;color:#c4a477}kbd{font:inherit;color:#fff4d9}
.panel{border:1px solid #ae795188;border-top:3px solid var(--copper);background:linear-gradient(120deg,#243e37fa,#243e37e8);border-radius:4px 14px 14px 4px}
@media(min-width:701px) and (max-width:1100px){#map{width:225px}#caption{left:32px;transform:none;width:calc(100% - 330px);max-width:540px;text-align:left}#hint{font-size:9px}#hint span{padding:0 3px}}
@media(pointer:coarse),(max-width:700px){
 #hud{left:16px;right:16px;top:max(16px,env(safe-area-inset-top))}
 #hud>div{padding:11px 13px;max-width:calc(100vw - 88px)}
 #hud .eyebrow{font-size:8px}#objective{font-size:18px;max-width:none}
 #map{top:154px;right:14px;bottom:auto;width:164px}
 #mapToggle:not([hidden]){display:block;position:absolute;right:14px;top:110px;min-height:44px;padding:8px 14px;font:11px system-ui;color:var(--paper);background:var(--ink);border-color:var(--copper);border-radius:4px}
 #map.expanded{width:min(320px,calc(100vw - 28px));z-index:3;box-shadow:0 16px 48px #142b3480}
 #charge{left:20px;bottom:170px;padding:6px 12px;max-width:calc(100vw - 40px);font-size:11px}
 #caption{bottom:225px;width:calc(100% - 32px);font-size:15px}
}
@media(max-height:740px) and (max-width:700px){#map{top:146px;width:140px}#mapToggle:not([hidden]){top:102px}#caption{bottom:215px;font-size:13px;padding:8px 12px}}
@media(max-height:600px) and (min-width:701px){#map{top:108px;width:180px}#hud>div{padding:10px 16px}#caption{max-width:calc(100vw - 460px);bottom:116px}}
@media(max-height:500px) and (pointer:coarse){#map{top:80px;right:16px;width:135px}#hud{top:10px}#hud>div{padding:7px 12px}#objective{font-size:16px}#caption{bottom:110px;left:160px;transform:none;width:calc(100vw - 360px);font-size:12px}#charge{bottom:18px;left:155px;max-width:calc(100vw - 360px)}#jump{bottom:116px}#audioUnlock:not([hidden]){bottom:185px}}
@media(max-height:500px) and (pointer:coarse){#mapToggle:not([hidden]){top:10px;right:70px}#map.expanded{top:80px;width:min(260px,calc(84.75dvh - 85px))}}
/* Adventure presentation: restrained film framing; all menus remain touch-safe. */
#skipIntro{position:fixed;right:24px;bottom:24px;z-index:30;background:#183e3de8;border:1px solid #b76f48;color:#fff0c9;padding:14px 22px;border-radius:4px}
.cinematic #controls,.cinematic #hud,.cinematic #map,.cinematic #mapToggle,.cinematic #charge,.cinematic #hint{visibility:hidden}
.cinematic:before,.cinematic:after{content:'';position:fixed;left:0;right:0;height:7vh;background:#102928;z-index:8;pointer-events:none}.cinematic:before{top:0}.cinematic:after{bottom:0}
.cinematic #caption{bottom:15vh;z-index:10}
.cinematic #controls{visibility:visible}.cinematic #controls>button{visibility:hidden}.cinematic #stick{opacity:.65}
#ending,#creditsPanel{z-index:45;max-height:85dvh;overflow:auto}#ending h1{font-size:clamp(36px,6vw,68px)}
#ending{top:50%;bottom:auto;transform:translateY(-50%);max-height:calc(100dvh - 24px);overflow-y:auto}
#pausePanel{z-index:60}
@media(max-height:500px){#ending{left:50%;right:auto;transform:translate(-50%,-50%);width:min(680px,calc(100vw - 32px));max-width:none;padding:18px 24px}#ending h1{font-size:34px;margin-bottom:10px}#ending p{margin:8px 0;line-height:1.35}#ending button{min-height:44px;padding:11px 20px}}
#title .secondary{margin-top:9px}button:focus-visible{outline:3px solid #62c9bc;outline-offset:4px}
.volume-setting{display:flex;align-items:center;gap:16px;color:#eee0bb;padding:10px 2px;font-size:14px}.volume-setting input{accent-color:#b76f48;min-width:0;flex:1;min-height:34px}
#title{top:50%;bottom:auto;transform:translateY(-50%);max-height:calc(100dvh - 24px);overflow-y:auto;scrollbar-width:thin}
@media(max-height:500px){#title{left:50%;right:auto;transform:translate(-50%,-50%);width:min(680px,calc(100vw - 32px));max-width:none;display:grid;grid-template-columns:1.15fr 1fr;gap:5px 24px;padding:18px 24px}#title .eyebrow{grid-column:1;grid-row:1;margin-bottom:4px}#title h1{grid-column:1;grid-row:2/5;font-size:42px;margin:0}#title p:not(.eyebrow):not(.fine){grid-column:1;grid-row:5;font-size:12px;line-height:1.4;margin:0}#title .fine{grid-column:1/3;grid-row:6;margin:5px 0 0}#title button{grid-column:2;margin:0;min-height:44px;padding:11px 15px}#continueb{grid-row:1}#startb{grid-row:2}#settingsb{grid-row:3}#creditsb{grid-row:4}}
/* Subject-aware field chart: it tucks into a corner button while it would cover the scene's subject. */
#map{transition:opacity .3s ease,transform .3s ease;transform-origin:top right}
body.chart-tucked #map:not(.expanded){opacity:0;transform:scale(.25);visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility 0s .3s}
@media(pointer:fine) and (min-width:701px){body:is(.chart-tucked,.chart-shown) #mapToggle:not([hidden]){display:block;position:absolute;right:28px;top:84px;min-height:36px;padding:7px 14px;font:11px system-ui;letter-spacing:.06em;color:var(--paper);background:var(--ink);border:1px solid var(--copper);border-radius:4px;z-index:2}}
@media(pointer:fine) and (min-width:701px) and (max-height:600px){body:is(.chart-tucked,.chart-shown) #mapToggle:not([hidden]){top:66px}}
/* The ending card owns the left column: objective, charge and the duplicate caption step aside. */
body:has(#ending:not([hidden])) #hud>div,body:has(#ending:not([hidden])) #charge,body:has(#ending:not([hidden])) #caption{visibility:hidden}

/* v2: compact completion card (the ending lands on the bell, not on a menu), legacy save note, held-wind glow. */
#ending.completion{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));top:auto;transform:translateX(-50%);z-index:45;width:min(520px,calc(100vw - 32px));padding:14px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;background:#243e37f2;border:1px solid #ae795199;border-top:3px solid #e9b949;border-radius:6px;color:var(--paper);box-shadow:0 10px 30px #142b3440}
#ending.completion .eyebrow{flex-basis:100%;margin:0;color:#e9b949;font-size:10px}
#ending.completion p:not(.eyebrow){margin:0;flex:1;font-size:15px;line-height:1.4;color:#f4e8cb}
#ending.completion button{margin:0;padding:10px 16px;min-height:44px;font-size:13px}
body:has(#ending:not([hidden])) #hud>div,body:has(#ending:not([hidden])) #charge{visibility:visible}
body:has(#ending.completion:not([hidden])) #controls>button,body:has(#ending.completion:not([hidden])) #hint{visibility:hidden}
.legacy-note{margin-top:10px;color:#d6b986!important;opacity:.95!important}
body.wind-held #charge{border-color:#8fd3e0;box-shadow:0 0 0 2px #8fd3e055,0 6px 20px #142b3426}
body.wind-held #chargeIcon{color:#8fd3e0;text-shadow:0 0 10px #8fd3e0}
#action[data-kind=catch],#action[data-kind=give],#action[data-kind=vent],#action[data-kind=push]{background:linear-gradient(135deg,#e6f6f8,#a9dde6);border-color:#8fd3e0}

/* Audit fixes: captions never cover the hero; a lighter desktop bottom HUD. */
body.caption-high #caption{bottom:auto;top:max(130px,17vh)}
@media(pointer:coarse),(max-width:700px){body.caption-high #caption{top:max(150px,19vh);bottom:auto}}
@media(pointer:fine) and (min-width:701px){
 #jump,#run{display:none}            /* keys cover them: A and Shift are in the hint line */
 #action{min-height:52px;width:170px;padding:8px 12px;bottom:26px;font-size:13px}
 #action span{margin-top:3px}
 #charge{bottom:26px;padding:7px 12px}
 #hint{bottom:6px;padding:4px 10px;font-size:10px}
 #caption{bottom:92px}
}
/* Round 2 HUD. The finale letterbox is a film moment: no joystick. */
body.finale-cine #stick{visibility:hidden!important}
/* Action button: one or two lines at most, never three; an idle ("Look around") button disappears instead of ghosting;
   a busy button (mid-action) is a clear, solid muted state. */
#action{line-height:1.2;text-wrap:balance}
@media(min-width:701px){#action{width:220px;font-size:13px}}
#action[data-idle=true]{visibility:hidden}
#action:disabled{opacity:1;background:#243e37f2;color:#d9cba6;border-color:#ae795188;box-shadow:none}
@media(pointer:coarse),(max-width:700px){#action{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;width:auto;min-width:150px;max-width:min(230px,calc(100vw - 150px));font-size:13px;padding:8px 14px;min-height:54px}}
/* Portrait phones: the caption sits above the hero (who is framed high), not on the feet. */
@media(max-width:700px) and (orientation:portrait){body:not(.cinematic) #caption{bottom:auto;top:calc(max(16px,env(safe-area-inset-top)) + 142px)}}
/* Ending: a proper panel centred low over the ringing bell, with Mara's line (not a small toast). */
#ending.completion{width:min(620px,calc(100vw - 32px));padding:22px 28px 20px;border-top:3px solid var(--copper);border-radius:4px 14px 14px 4px;background:linear-gradient(120deg,#243e37fa,#243e37ec);box-shadow:0 14px 40px #142b3455}
#ending.completion p:not(.eyebrow){font-size:17px;line-height:1.5}#ending.completion #endingDetail{display:block;margin-top:8px;font-style:italic;color:#eedfb8}
/* guardian fight: three bell-shaped lives beside the bell status; soft fade when the gust sweeps the hero back */
#lives{display:inline-flex;gap:5px;margin-left:4px;padding-left:10px;border-left:1px solid #fff0c933}#lives i{width:15px;height:17px;background:#e2b975;border-radius:8px 8px 3px 3px;box-shadow:0 2px 0 #7a4a2a,0 0 6px #e2b97599}#lives i.off{background:transparent;border:2px solid #e2b97577;box-shadow:none}
body.swept canvas{animation:swept 1.8s ease both}@keyframes swept{0%{filter:none}30%,65%{filter:brightness(.22) saturate(.6) blur(2px)}100%{filter:none}}