/* Tiny5 (OFL): 8 font pixels per em, so sizes are multiples of 8 px for crisp pixels. Real Cyrillic. */
@font-face{font-family:'Owl Pixel';src:url('/assets/fonts/tiny5/Tiny5-Owl.woff2') format('woff2');font-weight:400;font-display:swap}
:root{
  --ink:#2a170c;--line:#3d2416;--cream:#fff4dc;--paper:#fff8ea;--sun:#f08a2a;--sun-dark:#b85a14;--leaf:#5f9d3a;
  --panel:rgba(30,22,14,.72);--panel-solid:#2a1f14;--px:3px;
  --safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);
  font-family:'Owl Pixel',ui-monospace,monospace;color:var(--cream);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1b1a14;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:none}
.stage{position:fixed;inset:0}
#world{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;outline:none;cursor:crosshair}
#world:focus-visible{outline:3px solid var(--sun);outline-offset:-3px}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;border:0;background:none;padding:0}
.px-icon{display:block}

/* Pixel panels: square corners notched by box-shadow steps, no rounded vector edges. */
.hud-icon,.hud-pill,.hud-popover,.hud-toast,.hud-btn,.hud-chip,.hud-bubble-inner,.hud-mic{
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--line),0 var(--px) 0 0 var(--line),calc(-1*var(--px)) 0 0 0 var(--line),var(--px) 0 0 0 var(--line);
}
.hud{position:absolute;inset:0;pointer-events:none;font-size:16px;line-height:1.25}
.hud>*{pointer-events:auto}
.hud-bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* Corner: sound, fullscreen, ⋯ */
.hud-corner{position:absolute;z-index:30;top:calc(var(--safe-t) + 14px);right:calc(var(--safe-r) + 14px);display:flex;gap:10px;align-items:flex-start}
.hud-icon{width:38px;height:38px;display:grid;place-items:center;background:var(--panel);color:var(--cream)}
.hud-icon:hover{background:rgba(60,40,22,.85)}
.hud-icon[aria-pressed="true"]{color:#ffd84a}
.hud-actions-open{position:absolute;z-index:25;top:calc(var(--safe-t) + 70px);left:calc(var(--safe-l) + 14px);min-height:44px;padding:9px 14px;background:var(--paper);color:var(--ink);font-size:20px}
.hud-actions-open:hover{background:#ffe7a8}
.hud-actions-open:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.hud-icon:focus-visible,.hud-mic:focus-visible,.hud-btn:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.hud-popover{position:absolute;top:50px;right:0;width:288px;padding:12px 14px;background:var(--panel-solid);color:var(--cream);font-size:16px;transform-origin:top right}
.hud-popover{max-height:calc(100dvh - 84px);overflow-y:auto;scrollbar-color:var(--sun) var(--panel-solid);scrollbar-width:thin}
.hud-drawings-open{display:block;width:100%;text-align:left;padding:8px;margin-bottom:6px;background:var(--sun);color:var(--ink)}
.hud-account-open,.hud-voice-preview{display:block;width:100%;min-height:40px;text-align:left;padding:8px;margin-bottom:6px;background:rgba(255,244,220,.1)}
.hud-account-open:hover,.hud-voice-preview:hover{background:var(--sun);color:var(--ink)}
.hud-account-open:focus-visible,.hud-voice-preview:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.hud-popover a{display:block;padding:7px 8px;margin:0 0 6px;color:var(--cream);text-decoration:none;background:rgba(255,244,220,.08)}
.hud-popover a:hover,.hud-popover a:focus-visible{background:var(--sun);color:#fff;outline:none}
.hud-toggle{display:flex;gap:8px;align-items:center;margin:0 0 8px;cursor:pointer}.hud-toggle input{accent-color:var(--sun);margin:0;width:16px;height:16px}
.hud-voice{border:0;margin:10px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px}
.hud-voice legend{padding:0;margin-bottom:4px;color:#e9c98d}
.hud-voice label{display:flex;gap:5px;align-items:center;cursor:pointer}
.hud-voice input{accent-color:var(--sun);margin:0}
.hud-voice-status{font-size:14px;line-height:1.35;margin:6px 0;max-width:100%;overflow-wrap:anywhere}
.hud-keys{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:10px 0 0;font-size:16px;color:#e9dcc0}
.hud-keys dt{color:#ffd84a}.hud-keys dd{margin:0}

/* Command pill */
.hud-pill{position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 16px);margin:0 auto;width:min(540px,calc(100% - 28px));height:48px;display:flex;align-items:center;gap:10px;padding:0 10px 0 6px;background:var(--panel)}
.hud-mic{flex:none;width:36px;height:36px;display:grid;place-items:center;background:var(--sun);color:#fff;--px:2px}
.hud-mic:hover{background:#ff9a3a}
.hud-pill.listening .hud-mic{background:#e0483a;box-shadow:0 0 0 3px #ffd0c8,0 -2px 0 0 var(--line),0 2px 0 0 var(--line),-2px 0 0 0 var(--line),2px 0 0 0 var(--line)}
.hud-text{flex:1;min-width:0;height:100%;border:0;outline:none;background:transparent;font-size:24px;color:var(--cream);caret-color:var(--sun);-webkit-user-select:text;user-select:text}
.hud-text::placeholder{color:#dfceb0;opacity:1}
.hud-text::selection{background:var(--sun);color:var(--ink)}
.hud-continuous{flex:none;width:36px;height:36px;display:grid;place-items:center;padding:0;background:var(--cream);color:var(--ink)}
.hud-continuous[aria-pressed=true]{background:#ffd84a}
.hud-turn-controls{position:absolute;left:0;right:0;bottom:calc(100% + 64px);display:flex;flex-direction:column;align-items:stretch;gap:8px}
.hud-turn-controls[hidden]{display:none}
.hud-turn-buttons{display:flex;justify-content:flex-end;gap:8px}
.hud-heard{margin:0;padding:8px 10px;max-height:84px;overflow:auto;background:var(--panel-solid);color:var(--cream);font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.hud-heard[hidden]{display:none}
.hud-pill.voice-turn .hud-plan{display:none}
.hud-turn-controls button{min-height:40px;padding:7px 12px;font-size:18px;background:var(--cream);color:var(--ink)}
.hud-turn-controls .hud-turn-finish{background:var(--sun)}
.hud-turn-controls button:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.hud-continuous:hover,.hud-drawings-open:hover{background:#ffe7a8}
.hud-continuous:focus-visible,.hud-drawings-open:focus-visible,.world-exit:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.hud-mic-status{position:absolute;bottom:calc(var(--safe-b) + 72px);left:14px;right:14px;margin:0;text-align:center;font-size:16px;color:var(--cream);text-shadow:1px 2px 2px #1b1a14;pointer-events:none}
.hud-mic-status[data-phase=listening]{color:#ffe7a8}

/* Signposted exits remain reachable even when a portrait camera crops the painted edge. Each sits collapsed
   as a small arrow tab at its edge; the full sign slides out (clip-path: no reflow, the hidden part takes no taps)
   when the owl comes near (.near), on hover, keyboard focus or a touch. */
.world-navigation{pointer-events:none}
.world-place{position:absolute;top:calc(var(--safe-t) + 16px);left:calc(var(--safe-l) + 14px);max-width:calc(100% - 174px);margin:0;padding:6px 10px;background:var(--panel-solid);font-size:24px;line-height:1.1;display:flex;align-items:center;gap:8px;text-align:left;color:var(--cream)}
.world-place:hover{background:var(--line)}
.world-place:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.world-place-map{flex:none;color:#ffd84a}
.world-exit{--tab:44px;position:absolute;top:54%;width:max-content;max-width:min(230px,40vw);min-height:48px;padding:8px 10px;background:var(--panel-solid);color:var(--cream);pointer-events:auto;display:flex;align-items:center;gap:8px;font-size:16px;text-align:left;
  clip-path:inset(0 calc(100% - var(--tab)) 0 0);opacity:.8;transition:clip-path .34s cubic-bezier(.2,.8,.2,1),opacity .2s,background-color .15s}
.world-exit[hidden]{display:none}
.world-exit:focus-visible{outline-offset:-4px}
.world-exit-left{left:calc(var(--safe-l) + 10px)}
.world-exit-right{right:calc(var(--safe-r) + 10px);flex-direction:row-reverse;text-align:right;clip-path:inset(0 0 0 calc(100% - var(--tab)))}
.world-exit-arrow{flex:none;width:24px;text-align:center;font-size:32px;line-height:1;color:#ffd84a}
.world-exit-name{overflow-wrap:normal;word-break:normal;opacity:0;transition:opacity .2s}
.world-exit.near,.world-exit.peek,.world-exit:focus-visible,.world-exit[data-touched]{clip-path:inset(0);opacity:1}
.world-exit.near .world-exit-name,.world-exit.peek .world-exit-name,.world-exit:focus-visible .world-exit-name,.world-exit[data-touched] .world-exit-name{opacity:1;transition-delay:.08s}
@media (hover:hover){.world-exit:hover{clip-path:inset(0);opacity:1;background:var(--line)}.world-exit:hover .world-exit-name{opacity:1;transition-delay:.08s}}
/* Up and down: centred, the tab is the arrow alone, the name unfolds below (up) or above (down) it. */
.world-exit-up,.world-exit-down{left:50%;translate:-50% 0;flex-direction:column;gap:0;padding:4px 12px;text-align:center;max-width:min(260px,62vw);
  clip-path:inset(0 calc(50% - var(--tab) / 2) calc(100% - var(--tab)) calc(50% - var(--tab) / 2))}
.world-exit-up{top:calc(var(--safe-t) + 16px)}
.world-exit-down{top:auto;bottom:calc(var(--safe-b) + 116px);flex-direction:column-reverse;clip-path:inset(calc(100% - var(--tab)) calc(50% - var(--tab) / 2) 0 calc(50% - var(--tab) / 2))}
.world-exit-up .world-exit-arrow,.world-exit-down .world-exit-arrow{height:36px;line-height:36px}
.world-exit-up .world-exit-name{padding-bottom:4px}.world-exit-down .world-exit-name{padding-top:4px}
/* Going up or down: the new place slides in behind a curtain of its sky colour with a soft trailing edge,
   under the rest of the HUD (it is the first child). */
.world-shift{position:absolute;inset:0;pointer-events:none;opacity:0}
.world-shift-up{animation:world-shift-up .5s cubic-bezier(.45,.05,.25,1) both;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 35%);mask-image:linear-gradient(to bottom,transparent,#000 35%)}
.world-shift-down{animation:world-shift-down .5s cubic-bezier(.45,.05,.25,1) both;-webkit-mask-image:linear-gradient(to top,transparent,#000 35%);mask-image:linear-gradient(to top,transparent,#000 35%)}
.world-shift-map{animation:world-shift-fade .45s ease-out both}
@keyframes world-shift-up{from{opacity:1;transform:translateY(-20%)}to{opacity:1;transform:translateY(100%)}}
@keyframes world-shift-down{from{opacity:1;transform:translateY(20%)}to{opacity:1;transform:translateY(-100%)}}
@keyframes world-shift-fade{from{opacity:1}to{opacity:0}}
/* World map */
.world-map{position:absolute;z-index:40;top:calc(var(--safe-t) + 64px);left:calc(var(--safe-l) + 14px);width:min(372px,calc(100% - 28px - var(--safe-l) - var(--safe-r)));max-height:calc(100dvh - var(--safe-t) - 70px);overflow:auto;padding:8px 10px 10px;background:var(--panel-solid);color:var(--cream);transform-origin:0 0;animation:world-map-in .2s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 calc(-1*var(--px)) 0 0 var(--line),0 var(--px) 0 0 var(--line),calc(-1*var(--px)) 0 0 0 var(--line),var(--px) 0 0 0 var(--line)}
.world-map[hidden]{display:none}
@keyframes world-map-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.world-map-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.world-map-head h2{margin:0;font-size:16px;font-weight:400;color:#ffd84a}
.world-map-close{width:40px;height:40px;font-size:32px;line-height:1}
.world-map-close:hover{color:#ffd84a}
.world-map-close:focus-visible,.world-map-node:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.world-map-board{position:relative;margin:0 auto;max-width:100%}
.world-map-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.world-map-side{stroke:#8a6a44;stroke-width:3;stroke-dasharray:3 5}
.world-map-vertical{stroke:#9fd8f0;stroke-width:2;stroke-dasharray:6 6;opacity:.3}
.world-map-vertical-mark{fill:#9fd8f0;font-size:16px;text-anchor:middle;opacity:.3;paint-order:stroke;stroke:#2a1f14;stroke-width:4px}
.world-map-vertical.known,.world-map-vertical-mark.known{opacity:1}
.world-map-node{position:absolute;width:54px;height:36px;padding:0;background:#120a04;box-shadow:0 0 0 2px var(--line);cursor:default}
.world-map-node.known{cursor:pointer}
.world-map-node img{display:block;width:100%;height:100%;object-fit:cover;opacity:0}
.world-map-node.known img{opacity:1}
.world-map-node.known:hover{box-shadow:0 0 0 3px var(--sun)}
.world-map-unknown{position:absolute;inset:0;display:grid;place-items:center;color:#8a6a44;font-size:24px}
.world-map-node.known .world-map-unknown{display:none}
.world-map-node.here{box-shadow:0 0 0 3px #ffd84a;z-index:1}
.world-map-node.going{box-shadow:0 0 0 3px var(--sun);z-index:2}
.world-map-node.going .world-map-label{color:var(--cream);background:var(--sun-dark)}
.world-map-node.here::before{content:'';position:absolute;right:-12px;top:-14px;width:26px;height:26px;background:url('/assets/favicon.svg') 0 0/100% 100% no-repeat;image-rendering:pixelated}
.world-map-label{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:3px;padding:0 4px;white-space:nowrap;font-size:16px;line-height:1.1;color:#ffd84a;background:var(--panel-solid)}
.world-map-label:empty{display:none}
.world-map-caption{margin:6px 0 0;min-height:20px;font-size:16px;text-align:center}
@media (prefers-reduced-motion:reduce){
  .onboard-ask-pulse{animation:none;box-shadow:0 0 0 3px var(--sun)}
  .world-exit,.world-exit-name{transition:none}
  .world-shift-up,.world-shift-down,.world-shift-map{animation:world-shift-fade .25s linear both}
  .world-map{animation:none}
}
.hud-text.interim{color:#ffe7a8}
.hud-pill.thinking .hud-text::placeholder{color:#ffd84a}
.hud-plan{position:absolute;left:0;right:0;bottom:calc(100% + 42px);display:flex;flex-wrap:wrap;justify-content:center;gap:9px;pointer-events:none}
.hud-chip{--px:2px;padding:4px 10px 5px;background:var(--paper);color:var(--ink);font-size:16px;white-space:normal;max-width:100%;overflow-wrap:anywhere}
.hud-chip.chip-perform{background:#ffe7a8}
.hud-chip.now{background:var(--sun);color:#fff}
.hud-chip.done{background:#d9caa8;color:#6b5a40}
.hud-chip.chip-error{background:#e0483a;color:#fff}
.hud-chip.chip-question{background:#5ac8fa;color:#10283a;white-space:normal;max-width:min(460px,90vw)}

/* Place title */
.hud-toast{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 16px);margin:0 auto;width:max-content;max-width:calc(100% - 160px);padding:8px 18px 10px;background:var(--panel);font-size:32px;line-height:1;color:var(--cream);text-shadow:2px 2px 0 var(--line);opacity:0;pointer-events:none}

/* Speech bubbles (positioned by JS above the speaker) */
.hud-bubble{position:absolute;left:0;top:0;max-width:min(340px,72vw);will-change:transform,opacity}
.hud-bubble-inner{--px:3px;background:var(--paper);color:var(--ink);padding:8px 12px 10px;font-size:24px;line-height:1.15;transform-origin:50% 100%;overflow-wrap:break-word}
.hud-bubble-tail{position:absolute;bottom:-12px;width:15px;height:12px;margin-left:-7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 4' shape-rendering='crispEdges'%3E%3Cpath fill='%233d2416' d='M0 0h5v1H4v1H3v1H2V2H1V1H0z'/%3E%3Cpath fill='%23fff8ea' d='M1 0h3v1H3v1H2V1H1z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;image-rendering:pixelated}

/* Touch: floating joystick on the left, action buttons on the right (coarse pointers only) */
.hud-touch{display:none;position:absolute;right:calc(var(--safe-r) + 18px);bottom:calc(var(--safe-b) + 18px);gap:16px;align-items:flex-end}
.hud-act-col{display:flex;flex-direction:column;gap:8px;align-items:center}
.hud-btn{display:grid;place-items:center;background:rgba(30,22,14,.5);color:var(--cream);--px:3px}
.hud-jump{width:76px;height:76px}
.hud-act{width:64px;height:64px}
.hud-dash{width:72px;height:48px;font-size:16px;line-height:1;padding:0;background:rgba(30,22,14,.92)}
.hud-dash.cooling{color:#c8b89a;background:rgba(30,22,14,.78)}
.hud-btn.pressed{background:rgba(240,138,42,.75)}
.hud-stick{position:absolute;width:112px;height:112px;margin:-56px 0 0 -56px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Cpath fill='none' stroke='%23fff4dc' stroke-opacity='.55' d='M4.5.5h5v1h2v2h1v2h1v4h-1v2h-1v2h-2v1h-5v-1h-2v-2h-1v-2h-1v-4h1v-2h1v-2h2z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;image-rendering:pixelated}
.hud-stick-knob{position:absolute;left:50%;top:50%;width:44px;height:44px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 6' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff4dc' fill-opacity='.7' d='M2 0h2v1h1v1h1v2H5v1H4v1H2V5H1V4H0V2h1V1h1z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;image-rendering:pixelated}
/* Touch screens, upright or on their side: the bottom belongs to the thumbs, so the command pill moves to the top. */
@media (pointer:coarse){
  .hud-touch{display:flex}
  #world{cursor:default}
  .hud-pill{top:calc(var(--safe-t) + 12px);bottom:auto;left:calc(var(--safe-l) + 12px);right:auto;margin:0;width:min(540px,calc(100% - 190px - var(--safe-l) - var(--safe-r)));height:44px}
  .hud-plan{bottom:auto;top:calc(100% + 12px);justify-content:flex-start}
  .hud-toast{top:calc(var(--safe-t) + 72px)}
}
@media (pointer:coarse) and (max-width:700px){
  .hud-toast{font-size:24px}
  .hud-corner{gap:8px}
  .hud-icon{width:34px;height:34px}
  .hud-bubble-inner{font-size:16px}
  .hud-text{font-size:16px}
  .hud-bubble{max-width:min(260px,72vw)}
  .hud-pill{top:calc(var(--safe-t) + 64px);left:calc(var(--safe-l) + 14px);width:calc(100% - 28px - var(--safe-l) - var(--safe-r))}
  .hud-mic-status{top:calc(var(--safe-t) + 208px);bottom:auto;text-align:left;font-size:16px;max-width:calc(100% - 28px)}
  .hud-actions-open{top:calc(var(--safe-t) + 155px)}
  .hud-turn-controls{top:calc(100% + 42px);bottom:auto}
  .hud-plan{top:calc(100% + 64px)}
  .hud-toast{display:none}
  .world-place{font-size:16px;max-width:calc(100% - 158px);top:calc(var(--safe-t) + 14px);min-height:34px;display:flex;align-items:center}
  .world-exit{top:48%;min-height:52px}
  .world-exit-up{top:calc(var(--safe-t) + 196px)}
  .world-exit-down{top:auto;bottom:calc(var(--safe-b) + 124px)}
  .world-map{top:calc(var(--safe-t) + 56px)}
}

@media(max-width:700px){
  .world-exit{max-width:min(190px,48vw);padding:6px 10px;gap:6px}
}
.loading{position:absolute;inset:0;display:grid;place-items:center;background:#1b1a14;pointer-events:none}
.loading span{width:12px;height:12px;background:var(--sun);box-shadow:18px 0 0 #ffd84a,36px 0 0 var(--cream);margin-left:-36px}
html.ready .loading{display:none}
.boot-error{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:14px 18px;background:var(--panel-solid);color:var(--cream);font-size:20px}

/* First-run card and the modes list. Both shrink-wrap: the rest of the world still receives taps. */
.hud-guide-row{display:flex;gap:6px;margin:0 0 6px}
.hud-modes-open,.hud-guide-open{display:block;flex:1;min-width:0;min-height:40px;text-align:left;padding:8px;margin:0}
.hud-modes-open{background:var(--sun);color:var(--ink)}
.hud-guide-open{background:rgba(255,244,220,.1);color:var(--cream)}
.hud-modes-open:hover,.hud-guide-open:hover,.hud-modes-open:focus-visible,.hud-guide-open:focus-visible{background:var(--sun);color:var(--ink);outline:3px solid var(--sun);outline-offset:2px}
.onboard,.modes-sheet{box-shadow:0 -3px 0 0 var(--line),0 3px 0 0 var(--line),-3px 0 0 0 var(--line),3px 0 0 0 var(--line)}
.onboard[hidden],.modes-sheet[hidden]{display:none}
.onboard{position:absolute;z-index:20;top:calc(var(--safe-t) + 124px);left:calc(var(--safe-l) + 14px);width:min(320px,calc(100% - 28px));padding:10px 12px 12px;background:var(--paper);color:var(--ink)}
.onboard-kicker{margin:0 0 4px;font-size:16px;color:var(--sun-dark)}
.onboard-title{margin:0 0 6px;font-size:16px;font-weight:400;line-height:1.25}
.onboard-body{margin:0 0 8px;font-size:16px;line-height:1.25}
.onboard-actions{display:flex;flex-wrap:wrap;gap:8px}
.onboard-next,.onboard-skip{min-height:44px;padding:6px 10px}
.onboard-next{background:var(--sun);color:#fff}
.onboard-skip{background:transparent;color:var(--ink);box-shadow:0 -3px 0 0 var(--line),0 3px 0 0 var(--line),-3px 0 0 0 var(--line),3px 0 0 0 var(--line)}
.onboard-next:focus-visible,.onboard-skip:focus-visible,.modes-close:focus-visible,.onboard-ask:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.onboard-ask{font-size:22px;line-height:1}
@keyframes onboard-ask-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.onboard-ask-pulse{animation:onboard-ask-pulse 1s ease-in-out 3}
.modes-sheet{position:absolute;z-index:40;top:calc(var(--safe-t) + 58px);right:calc(var(--safe-r) + 10px);width:min(340px,calc(100% - 20px));max-height:min(70dvh,640px);overflow:auto;padding:12px;background:var(--panel-solid);color:var(--cream);scrollbar-color:var(--sun) var(--panel-solid);scrollbar-width:thin}
.modes-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 8px;position:sticky;top:0;background:var(--panel-solid)}
.modes-head h2,.modes-sheet h3{margin:0;font-size:16px;font-weight:400}
.modes-sheet h3{margin:10px 0 6px;color:#e9c98d}
.modes-close{min-height:40px;padding:6px 8px;background:var(--cream);color:var(--ink)}
.modes-sheet a,.modes-sheet .modes-here{display:flex;flex-direction:column;gap:2px;min-height:44px;margin:0 0 6px;padding:8px;background:rgba(255,244,220,.08);color:var(--cream);text-decoration:none}
.modes-sheet .modes-here{background:rgba(255,216,74,.16)}
.modes-sheet strong{font-weight:400;color:#ffd84a}
.modes-sheet span{font-size:16px;line-height:1.25}
.modes-sheet a:hover,.modes-sheet a:focus-visible{background:var(--sun);color:var(--ink);outline:none}
.modes-sheet a:hover strong,.modes-sheet a:focus-visible strong{color:var(--ink)}
@media (max-width:700px){
  .onboard{top:calc(var(--safe-t) + 210px);width:min(240px,calc(100% - 120px))}
}
@media (max-width:390px){
  .hud-popover{width:230px}
  .onboard{top:calc(var(--safe-t) + 176px);left:8px;right:8px;width:auto;padding:8px 10px 10px}
  .onboard-actions{flex-wrap:nowrap}
  .onboard-next,.onboard-skip{flex:1 1 auto;padding:6px 8px}
  .modes-sheet{left:8px;right:8px;width:auto;max-height:58dvh}
}
@media (pointer:coarse) and (max-width:390px){
  .onboard{top:calc(var(--safe-t) + 210px)}
}