/* 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}
/* Three icon tools under the place pin. Slots never move when a mode turns on (Petr: "the same button in the
   same place"). Their words are the tooltip (.hud-tip). */
.hud-tool{position:absolute;z-index:25;top:calc(var(--safe-t) + 72px);width:48px;height:48px;padding:0;display:grid;place-items:center;background:var(--paper);color:var(--ink);-webkit-touch-callout:none}
.hud-tool[hidden]{display:none}
.hud-tool-play{left:calc(var(--safe-l) + 14px)}
.hud-tool-actions{left:calc(var(--safe-l) + 70px)}
.hud-tool-3d{left:calc(var(--safe-l) + 126px)}
.hud-tool:hover{background:#ffe7a8}
.hud-tool:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.hud-tool[aria-pressed="true"]{background:var(--sun);color:#2a170c}
.hud-tool[aria-pressed="true"]:hover{background:#ff9a3a}
/* The one tooltip (game/tooltip.mjs): beside its button, never over it. */
.hud-tip{position:fixed;z-index:95;left:0;top:0;max-width:min(300px,calc(100vw - 12px));padding:6px 9px 7px;background:var(--panel-solid);color:var(--cream);font-family:'Owl Pixel',ui-monospace,monospace;font-size:16px;line-height:1.2;white-space:pre-line;pointer-events:none;
  box-shadow: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-tip[hidden]{display:none}
/* A long press reads the label: no iOS callout or text selection on a labelled button. */
[data-tip]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.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],.hud-pill.always .hud-turn-controls{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{width:48px;height:44px;padding:0;display:grid;place-items:center;background:var(--cream);color:var(--ink);-webkit-touch-callout:none}
.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:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);margin:0;padding:3px 10px 4px;text-align:center;font-size:16px;color:var(--cream);background:rgba(27,26,20,.72);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}
/* The place is a pin; its name and «карта» are its label (hover, focus, long press). The name stays for readers. */
.world-place{position:absolute;top:calc(var(--safe-t) + 16px);left:calc(var(--safe-l) + 14px);width:40px;height:40px;margin:0;padding:0;background:var(--panel-solid);display:grid;place-items:center;color:var(--cream);-webkit-touch-callout:none}
.world-place-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.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:6px 10px;-webkit-touch-callout:none;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}
/* The unfolded sign is the place's pictogram (the same one a quest bubble uses), no words. */
.world-exit-pic{flex:none;display:grid;place-items:center;width:54px;height:36px;color:#ffd84a;box-shadow:0 0 0 2px var(--line);opacity:0;transition:opacity .2s}
.world-exit-pic .px-icon{width:28px;height:28px}
.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-pic,.world-exit.peek .world-exit-pic,.world-exit:focus-visible .world-exit-pic,.world-exit[data-touched] .world-exit-pic{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-pic{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-pic{margin-bottom:6px}.world-exit-down .world-exit-pic{margin-top:6px}
/* 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-tool.hud-chip{width:48px;height:48px;padding:0;max-width:none;display:grid;place-items:center}
.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-pics{display:flex;gap:10px;align-items:center;justify-content:center;min-width:88px;min-height:44px}
.hud-bubble-pics{gap:14px}
.hud-bubble-pics .hud-pic{display:grid}
.hud-bubble-pics .px-icon{width:44px;height:44px}
/* Backpack: three picture slots under the scene, above the command pill. Not a .hud-tool (those stay by the pin). */
.hud-pack{position:absolute;z-index:24;left:50%;bottom:calc(var(--safe-b) + 76px);transform:translateX(-50%);display:flex;gap:6px;align-items:center}
.hud-pack-toggle,.hud-pack-slot{width:44px;height:44px;display:grid;place-items:center;padding:3px;background:var(--panel);color:var(--cream)}
.hud-pack-slot{background:var(--paper)}
.hud-pack-slot.is-empty{opacity:1;box-shadow:inset 0 0 0 3px #c8b89a}
.hud-pack-slot canvas{width:34px;height:34px;image-rendering:pixelated}
.hud-pack-toggle:hover,.hud-pack-slot:hover{background:#ffe7a8;color:var(--ink)}
.hud-pack-toggle:focus-visible,.hud-pack-slot:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.hud-pack.flash{animation:hud-pack-flash .55s ease-out}
@keyframes hud-pack-flash{0%{filter:brightness(1)}35%{filter:brightness(1.8)}100%{filter:brightness(1)}}
.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:64px;height:48px;padding:0;background:rgba(30,22,14,.92);-webkit-touch-callout:none}
.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}
  /* Thumbs own the bottom; the pack sits above the jump button and the down-exit tab. */
  .hud-pack{bottom:calc(var(--safe-b) + 188px)}
  .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;left:calc(var(--safe-l) + 14px);transform:none;text-align:left;font-size:16px;max-width:calc(100% - 28px)}
  .hud-tool{top:calc(var(--safe-t) + 148px)}
  /* The centred pack crossed the owl's face and the down-exit. On a phone it sits under the tools, on the left. */
  .hud-pack{left:calc(var(--safe-l) + 10px);right:auto;bottom:auto;top:calc(var(--safe-t) + 236px);transform:none}
  /* A spoken request's text and ✓/× open where the tool row sits: the row steps aside until it is done. */
  .hud:has(.hud-pill.voice-turn) .hud-tool{visibility:hidden}
  .hud-turn-controls{top:calc(100% + 42px);bottom:auto}
  /* Plan chips share the tool row, right of the three icons (14 + 3×56 px), so neither covers the other. */
  .hud-plan{top:calc(100% + 40px);left:170px;align-content:flex-start}
  .hud-toast{display:none}
  .world-place{top:calc(var(--safe-t) + 14px);width:36px;height:36px}
  .world-exit{top:48%;min-height:52px}
  .world-exit-up{top:calc(var(--safe-t) + 196px)}
  /* A little left of centre, clear of the dash button, so a thumb aimed at one never hits the other. */
  .world-exit-down{top:auto;bottom:calc(var(--safe-b) + 124px);translate:calc(-50% - 24px) 0}
  .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)}
}

/* Owner-only menu links stay hidden for everyone else. */
.hud-popover a[hidden]{display:none}