@font-face{font-family:Manrope;src:url('./vendor/manrope-variable.ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{font-family:Manrope,system-ui,sans-serif;color:#244d43;background:#c9e5df;font-synthesis:none;--cream:#fff9e8;--forest:#244d43;--gold:#f6b74c;--coral:#d98565}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #285cdb;outline-offset:4px}button:disabled{opacity:.6;cursor:default}button:hover{filter:brightness(1.05)}button:active{transform:translateY(1px)}[hidden]{display:none!important}
#game{position:relative;isolation:isolate;width:100%;height:100dvh;min-height:480px;overflow:hidden;background:linear-gradient(#eaccaf,#b9dfdc);touch-action:none}#game:fullscreen{width:100vw;height:100dvh}#game.immersive-fallback{position:fixed;inset:0;width:100vw;height:100dvh;z-index:1000}#world,#world canvas,.points{position:absolute;inset:0;width:100%;height:100%}#world canvas{display:block;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 35%,#376b6220 100%)}
.topbar{position:absolute;z-index:5;top:max(22px,env(safe-area-inset-top));left:max(26px,env(safe-area-inset-left));right:max(26px,env(safe-area-inset-right));display:flex;align-items:flex-start;justify-content:space-between;gap:16px;pointer-events:none}.identity{display:flex;gap:12px;align-items:center;text-shadow:0 2px 8px #fff9e888}.sun-mark{font-size:44px;line-height:1;color:#906331}.title{display:block;font-size:26px;font-weight:800;letter-spacing:-1px}.chapter{display:block;margin-top:3px;font-size:13px;font-weight:650;letter-spacing:.2px}.top-actions{display:flex;gap:8px;pointer-events:auto}.top-actions button,.camera-controls button{min-width:48px;min-height:48px;border:1px solid #ffffffb0;background:#fff9e8eb;box-shadow:0 4px 15px #224e4312;border-radius:16px;font-size:22px;font-weight:800}.top-actions #fullscreen{font-size:15px;padding:0 16px;display:flex;gap:9px;align-items:center}.top-actions #fullscreen span:first-child{font-size:25px}
.goals{position:absolute;z-index:4;left:27px;top:104px;display:flex;gap:8px}.goal{display:flex;gap:8px;align-items:center;padding:10px 13px;border-radius:15px;background:#fff9e8e8;box-shadow:0 3px 9px #204b4410;font-size:13px;font-weight:750}.goal-icon{font-size:20px}.goal.done{background:#e6f3cded;color:#386449}.goal.done .goal-icon:after{content:'✓';font-size:13px;margin-left:4px}.points{z-index:3;pointer-events:none}.point{position:absolute;display:flex;flex-direction:column;align-items:center;min-width:48px;min-height:48px;border:0;pointer-events:auto;border-radius:18px;background:none;padding:0;transform:translate(-50%,-100%);transition:opacity .25s,color .25s;white-space:nowrap}.point-disc{width:54px;height:54px;display:grid;place-items:center;background:#fff8e9f5;border:2px solid #ffffff;box-shadow:0 4px 12px #1b4d4530;border-radius:19px;font-size:26px;position:relative;transition:background .2s,transform .2s}.point-disc svg{width:31px;height:31px;stroke-width:2;overflow:visible}.point-label{font-size:12px;font-weight:800;padding:5px 10px;margin-top:5px;border-radius:9px;background:#fff9e8ef;color:#244d43;box-shadow:0 2px 6px #244d4310}.point.active .point-disc{background:#f9c55e;border-color:#fff6d7;animation:beckon 2s infinite}.point.target .point-disc{background:#ffe1a0;border-color:#a46f1b;animation:target-pulse 1.2s infinite}.point.selected .point-disc{background:#244d43;color:#fff9e8;border-color:#fff9e8}.point.muted .point-disc{opacity:.75}.point:hover .point-disc{transform:translateY(-4px);background:#ffe5a8}.point:focus-visible{outline:none}.point:focus-visible .point-disc{outline:3px solid #285cdb;outline-offset:3px}.point-progress{position:absolute;left:2px;right:2px;bottom:-2px;height:5px;background:#ddd9c6;border-radius:4px;overflow:hidden}.point-progress b{display:block;height:100%;background:#3b7b62;transition:width .2s}.point.actor .point-disc{width:48px;height:48px;border-radius:50%;font-size:23px}.point.actor .point-label{font-size:12px}.point-bubble{position:absolute;left:48px;top:-3px;background:#fff9e8;padding:4px 9px;border-radius:12px;font-size:11px;border:1px solid #dfd8bc;font-weight:750;max-width:138px}
.hint{position:absolute;z-index:5;bottom:34px;left:50%;transform:translateX(-50%);max-width:calc(100% - 180px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px 12px;padding:16px 25px;border-radius:22px;background:#fff9e8f5;box-shadow:0 6px 30px #244d4320;border:1px solid #fff;font-size:18px;font-weight:800;text-align:center;pointer-events:none}.hint-symbol{font-size:27px;color:#b6761c}.hint-small{width:100%;font-size:12px;color:#5f6450;font-weight:600;margin-top:-5px}.hint.success{background:#eaf4d9f5}.hint.hidden{opacity:0;transform:translate(-50%,10px);transition:opacity .3s,transform .3s}
.speech{position:absolute;z-index:6;left:26px;bottom:28px;width:min(370px,calc(100% - 52px));display:flex;align-items:center;gap:13px;padding:15px 37px 15px 15px;border-radius:24px;background:#fff9e8f5;box-shadow:0 5px 25px #244d4320;border:1px solid #fff;animation:speech-in .25s ease-out}.speech-avatar{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center;font-size:24px;border-radius:15px;background:#d3e9dd}.speech strong{font-size:14px}.speech p{margin:3px 0 0;font-size:14px;line-height:1.5}.speech button{position:absolute;right:2px;top:4px;width:36px;height:36px;border:none;background:none;font-size:24px;color:#7b826e}
.selection{position:absolute;z-index:6;right:26px;bottom:92px;width:268px;padding:18px;border-radius:23px;border:1px solid #fff;background:#fff9e8f5;box-shadow:0 5px 24px #244d4320;animation:speech-in .2s ease-out}.selection .card-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}.selection .portrait{display:grid;place-items:center;width:43px;height:43px;background:#d3e7d9;border-radius:15px;font-size:26px}.selection h2{margin:0;font-size:18px}.selection .role{font-size:12px;color:#626753}.selection p{font-size:13px;line-height:1.55;margin:10px 0}.selection .actions{display:flex;gap:6px;flex-wrap:wrap}.selection button{padding:10px 12px;border-radius:12px;border:1px solid #d4d9be;background:#f7f4e7;font-size:13px;min-height:44px;font-weight:750}.selection button.primary{background:#315f4c;color:#fff9e8;border-color:#315f4c}.selection .close-card{position:absolute;top:7px;right:7px;border:0;background:none;font-size:20px;padding:0;min-width:36px;min-height:36px}.camera-controls{position:absolute;z-index:5;right:26px;bottom:26px;display:flex;gap:5px}.camera-controls button{border-radius:14px}.camera-note{position:absolute;left:26px;bottom:18px;font-size:11px;color:#245a497f;pointer-events:none;display:none}.toast{position:absolute;z-index:9;top:90px;left:50%;transform:translate(-50%,-15px);opacity:0;pointer-events:none;padding:12px 20px;max-width:90%;background:#244d43f5;color:#fff9e8;border-radius:16px;font-size:14px;font-weight:650;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.end{position:absolute;z-index:10;inset:0;background:linear-gradient(transparent 20%,#173f3599);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:40px 24px 65px;pointer-events:none}.end-card{background:#fff9e8f5;padding:24px 32px;border:1px solid white;border-radius:28px;max-width:520px;text-align:center;box-shadow:0 10px 55px #1e443540;pointer-events:auto}.end-card .flag{font-size:35px}.end h1{font-size:32px;letter-spacing:-1px;margin:10px 0}.end p{font-size:15px;line-height:1.6}.end .actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}.end button{min-height:48px;padding:12px 18px;border:1px solid #315f4c;border-radius:15px;font-weight:750;background:#315f4c;color:#fff9e8}.end button.secondary{background:#fff9e8;color:#315f4c}.fallback{position:absolute;z-index:20;inset:0;background:#c9e5df;display:grid;place-items:center}.fallback div{max-width:480px;padding:32px;text-align:center}.fallback span{font-size:70px;color:#c38a38}.fallback h1{font-size:30px}.fallback p{line-height:1.6}.fallback button{min-height:48px;background:#244d43;color:#fff9e8;padding:12px 20px;border-radius:14px;border:0}
@keyframes beckon{0%,100%{box-shadow:0 4px 12px #1b4d4530,0 0 0 0 #ffd06b88}50%{box-shadow:0 4px 12px #1b4d4530,0 0 0 8px #ffd06b00;transform:translateY(-3px)}}@keyframes target-pulse{50%{box-shadow:0 0 0 9px #ffe1a04a,0 4px 12px #1b4d4530}}@keyframes speech-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(max-width:700px){.topbar{top:14px;left:16px;right:16px}.title{font-size:21px}.chapter{font-size:11px}.sun-mark{font-size:34px}.identity{gap:8px}.top-actions #fullscreen{padding:0 12px}.full-label{display:none}.goals{left:16px;right:16px;top:84px;gap:5px}.goal{padding:8px 9px;font-size:11px;gap:5px}.goal-icon{font-size:18px}.hint{bottom:88px;max-width:calc(100% - 32px);width:max-content;padding:14px 20px;font-size:16px;gap:6px 10px}.hint-small{font-size:11px}.point-disc{width:49px;height:49px;font-size:23px;border-radius:17px}.point-disc svg{width:27px;height:27px}.point-label{font-size:11px;padding:4px 7px}.point.actor .point-label{font-size:11px}.camera-controls{right:16px;bottom:18px}.speech{left:16px;bottom:78px;width:calc(100% - 32px);max-width:370px}.selection{right:16px;bottom:78px;width:min(268px,calc(100% - 32px))}.end{padding-bottom:30px}.end-card{padding:22px}.end h1{font-size:26px}}
.point-label,.point.actor .point-label{font-size:16px}.top-actions #fullscreen,.selection button{font-size:16px}.selection .close-card{font-size:22px}.selection .example-caption{margin-bottom:8px}.selection .portrait svg{width:36px;height:36px}.selection .choose-actor{flex:1;min-width:74px}.point .point-disc{transition:background .2s}.point:hover .point-disc{transform:none}.point-bubble{position:static;max-width:180px;margin-top:4px;white-space:normal}
#game{min-height:320px}.selection{max-height:calc(100dvh - 170px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}.selection button{white-space:normal;text-align:left}.point.actor.selected .point-disc{background:#315f4c}
@media(min-width:1000px){.goals{left:50%;top:27px;transform:translateX(-50%);max-width:calc(100% - 540px)}.goal{padding:10px 11px;flex:0 0 auto}}
.selection .card-instruction{font-size:16px;font-weight:800;border-top:1px solid #dedfc9;padding-top:12px;margin-top:14px}
@media(max-width:700px){#game.has-selection .hint{visibility:hidden}#game.has-selection .speech{display:none}.selection .card-instruction{margin-bottom:0}}
.connection-status{position:absolute;z-index:25;top:96px;left:50%;transform:translateX(-50%);max-width:min(640px,calc(100% - 32px));padding:15px 20px;border-radius:18px;background:#fff9e8f7;border:1px solid white;box-shadow:0 8px 25px #244d4320;font-size:15px}.connection-status p{margin:0;line-height:1.5}.connection-status button{margin-top:10px;margin-right:8px;padding:10px 13px;min-height:48px;border:0;border-radius:12px;background:#315f4c;color:#fff9e8;font-size:16px;font-weight:750}
.story-button{display:flex;align-items:center;gap:7px;padding:0 14px!important;font-size:16px!important}.story-button span:first-child{font-size:24px}.story-modal{position:absolute;z-index:30;inset:0;background:#153e3899;backdrop-filter:blur(5px);display:grid;place-items:center;padding:24px;touch-action:pan-y}.story-sheet{position:relative;width:min(720px,100%);max-height:calc(100dvh - 48px);overflow-y:auto;border-radius:28px;background:#fff9e8;padding:30px;box-shadow:0 18px 60px #122e3640}.story-sheet h2{font-size:27px;margin:0 42px 8px 0;letter-spacing:-.8px}.story-sheet p{font-size:15px;line-height:1.6;margin:0 0 20px;max-width:540px}.close-story{position:absolute;right:14px;top:14px;min-width:48px;min-height:48px;background:none;border:0;font-size:28px}.chapter-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.chapter-entry{position:relative;text-align:left;min-height:106px;border-radius:18px;border:1px solid #d7dac4;padding:17px 17px 16px 53px;background:#f4f3e6}.chapter-entry.current{border:2px solid #315f4c;background:#e5edda}.chapter-entry.completed{background:#e8eedf}.chapter-entry:disabled{opacity:.56}.chapter-number{position:absolute;top:19px;left:17px;font-size:22px;font-weight:750;color:#987230}.chapter-entry strong{display:block;font-size:16px;line-height:1.35}.chapter-entry small{display:block;margin-top:7px;font-size:12px;color:#717960}
@media(max-width:700px){.has-story .identity .chapter{display:none}.has-story .topbar{gap:10px}.has-story .title{font-size:20px}.has-story .sun-mark{font-size:28px}.has-story .identity{gap:7px}.story-label{display:none}.story-button{padding:0!important;justify-content:center;width:48px}.story-modal{padding:16px}.story-sheet{padding:23px;max-height:calc(100dvh - 32px)}.chapter-grid{grid-template-columns:1fr}.chapter-entry{min-height:84px}}
@media(max-height:480px){#game{height:100dvh;min-height:0}.topbar{top:10px;left:16px;right:16px}.identity .chapter{display:none}.title{font-size:20px}.sun-mark{font-size:30px}.goals{top:12px}.hint{bottom:76px;padding:10px 18px;font-size:16px}.hint-small{font-size:11px}.selection{bottom:74px;max-height:calc(100dvh - 156px)}.speech{bottom:74px;padding-top:10px;padding-bottom:10px}.camera-controls{bottom:12px}.connection-status{top:74px}.story-sheet{max-height:calc(100dvh - 24px)}}
@media(max-height:480px){.identity{display:none}.topbar{justify-content:flex-end}.goals{left:16px;transform:none;max-width:calc(100% - 190px)}}
.speech.opening-speech{top:100px;bottom:auto}
@media(max-width:700px){.speech{top:145px;bottom:auto}.speech.opening-speech{top:86px;bottom:auto}}
@media(max-height:480px){.speech,.speech.opening-speech{top:68px;bottom:auto;max-width:280px}}
.selection .close-card{width:48px;min-width:48px;height:48px;min-height:48px}.selection .card-head{padding-right:25px}.speech{padding-right:52px}.speech button{width:48px;height:48px}
.hint.hidden{visibility:hidden}
.actor-live-state{padding:12px 13px;margin:11px 0;border-radius:15px;background:#e8eddd}.actor-resource{display:flex;justify-content:space-between;gap:12px;font-size:14px}.actor-resource strong{font-size:16px}.resource-track{height:7px;border-radius:5px;overflow:hidden;background:#cbd7bf;margin:7px 0 11px}.resource-track i{display:block;height:100%;background:#4b876d;transition:width .2s}.actor-state{display:block;font-size:16px}.selection .actor-state-detail{font-size:14px;line-height:1.5;margin:5px 0 0}.selection .city-staff-state{padding:10px 12px;border-radius:12px;background:#e8eddd;font-size:14px;font-weight:650}
.actor-resource-point{bottom:-2px;height:5px;left:5px;right:5px}.actor-resource-point b{background:#4b876d}
@media(prefers-reduced-motion:reduce){.point.active .point-disc,.point.target .point-disc{animation:none}.speech,.selection{animation:none}}
/* 04.10 review: glyph-free icons, compact desktop UI, phone bottom sheet. Masks are plain SVG data URIs.
   Each glyph rule steps aside (:not(:has(svg))) as soon as the element holds an inline SVG; without :has() support the glyph stays. */
:root{--bay-i-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Crect x='9' y='7' width='6' height='22' rx='2'/%3E%3Crect x='21' y='7' width='6' height='22' rx='2'/%3E%3C/svg%3E");--bay-i-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M11 7.5v21a1.5 1.5 0 0 0 2.3 1.3l16-10.5a1.5 1.5 0 0 0 0-2.6l-16-10.5A1.5 1.5 0 0 0 11 7.5z'/%3E%3C/svg%3E");--bay-i-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17 18 6l13 11M9 14v16h18V14M15 30v-8h6v8'/%3E%3C/svg%3E");--bay-i-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 32V5M9 6h18l-4 6.5 4 6.5H9'/%3E%3C/svg%3E");--bay-i-story:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9c-4-3-9-3-13-1.5v21c4-1.5 9-1.5 13 1.5 4-3 9-3 13-1.5v-21C27 6 22 6 18 9zM18 9v21'/%3E%3C/svg%3E");--bay-i-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'%3E%3Ccircle cx='18' cy='18' r='6.5'/%3E%3Cpath d='M18 3v4M18 29v4M3 18h4M29 18h4M7.4 7.4l2.8 2.8M25.8 25.8l2.8 2.8M7.4 28.6l2.8-2.8M25.8 10.2l2.8-2.8'/%3E%3C/svg%3E");--bay-i-fullscreen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14V6h8M22 6h8v8M30 22v8h-8M14 30H6v-8'/%3E%3C/svg%3E");--bay-i-hint:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='12' fill='none' stroke='black' stroke-width='3'/%3E%3Ccircle cx='18' cy='18' r='4.5'/%3E%3C/svg%3E");--bay-i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 18 7 7L29 10'/%3E%3C/svg%3E");--bay-i-lantern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 9V5a6 6 0 0 1 12 0v4M6 10h20l-2 19H8zM5 29h22M7 10l5-5h8l5 5'/%3E%3Cpath d='M15 15c-4 7-2 10 2 10s5-5 1-10z' fill='black' stroke='none'/%3E%3C/svg%3E");--bay-i-hammer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 26 13-13 4 4L9 30zM15 8l7-7 9 9-7 7zM21 4l7 7'/%3E%3C/svg%3E");--bay-i-guests:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M3 24v-5c0-7 18-7 18 0v5M7 15v13m10-13v13'/%3E%3Ccircle cx='25' cy='12' r='3'/%3E%3Cpath d='M23 20c8-3 10 2 10 5m-7-6v11'/%3E%3C/svg%3E");--bay-i-cargo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 13-7 13 7v16l-13 7L3 26zM3 10l13 7 13-7M16 17v16'/%3E%3C/svg%3E");--bay-i-bench:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h25v9H4zM2 21h29M7 17v13m19-13v13'/%3E%3C/svg%3E");--bay-i-sign:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h23v15H4zM9 20v11m13-11v11M8 10h15m-15 5h9'/%3E%3C/svg%3E")}
#pause:not(:has(svg)),#camera-home:not(:has(svg)){font-size:0;display:inline-grid;place-items:center}
#pause:not(:has(svg))::before,#camera-home:not(:has(svg))::before{content:'';width:20px;height:20px;background:currentColor;-webkit-mask:var(--bay-i-pause) center/contain no-repeat;mask:var(--bay-i-pause) center/contain no-repeat}
#pause[data-intent=resume]:not(:has(svg))::before{-webkit-mask-image:var(--bay-i-play);mask-image:var(--bay-i-play)}
#camera-home:not(:has(svg))::before{-webkit-mask-image:var(--bay-i-home);mask-image:var(--bay-i-home)}
.sun-mark:not(:has(svg)),.fallback>div>span:first-child:not(:has(svg)),.hint-symbol:not(:has(svg)),.end-card .flag:not(:has(svg)),.story-button>span:first-child:not(:has(svg)),#fullscreen>span:first-child:not(:has(svg)){display:inline-block;flex:0 0 auto;width:.9em;height:.9em;overflow:hidden;line-height:1;color:transparent;text-shadow:none;background:#244d43;-webkit-mask:var(--bay-i-sun) center/contain no-repeat;mask:var(--bay-i-sun) center/contain no-repeat}
.sun-mark:not(:has(svg)){background:#906331}
.fallback>div>span:first-child:not(:has(svg)){width:1em;height:1em;background:#c38a38}
.hint-symbol:not(:has(svg)){width:.8em;height:.8em;background:#b6761c;-webkit-mask-image:var(--bay-i-hint);mask-image:var(--bay-i-hint)}
.end-card .flag:not(:has(svg)){width:.85em;height:.85em;background:#b6761c;-webkit-mask-image:var(--bay-i-flag);mask-image:var(--bay-i-flag)}
.story-button>span:first-child:not(:has(svg)){-webkit-mask-image:var(--bay-i-story);mask-image:var(--bay-i-story)}
#fullscreen>span:first-child:not(:has(svg)){width:.75em;height:.75em;-webkit-mask-image:var(--bay-i-fullscreen);mask-image:var(--bay-i-fullscreen)}
/* Goal chips: a status dot, a check when done. With data-goal="<goal id>" on .goal (app.js goalChips) each chip gets its icon:
   lights, pier, comfort, cargo, autonomy and needs have their own; any other id (guests, welcome_guests, served, visitors) shows people. */
.goal-icon:not(:has(svg)){display:inline-block;flex:0 0 auto;width:.5em;height:.5em;border-radius:50%;overflow:hidden;line-height:1;color:transparent;background:#d0a24e}
.goal[data-goal] .goal-icon:not(:has(svg)){width:.9em;height:.9em;border-radius:0;background:#244d43;-webkit-mask:var(--bay-i-guests) center/contain no-repeat;mask:var(--bay-i-guests) center/contain no-repeat}
.goal[data-goal=lights] .goal-icon:not(:has(svg)){-webkit-mask-image:var(--bay-i-lantern);mask-image:var(--bay-i-lantern)}
.goal[data-goal=pier] .goal-icon:not(:has(svg)),.goal[data-goal=autonomy] .goal-icon:not(:has(svg)){-webkit-mask-image:var(--bay-i-hammer);mask-image:var(--bay-i-hammer)}
.goal[data-goal=comfort] .goal-icon:not(:has(svg)){-webkit-mask-image:var(--bay-i-bench);mask-image:var(--bay-i-bench)}
.goal[data-goal=cargo] .goal-icon:not(:has(svg)){-webkit-mask-image:var(--bay-i-cargo);mask-image:var(--bay-i-cargo)}
.goal[data-goal=needs] .goal-icon:not(:has(svg)){-webkit-mask-image:var(--bay-i-sign);mask-image:var(--bay-i-sign)}
.goal.done .goal-icon:not(:has(svg)){width:.8em;height:.8em;border-radius:0;background:#386449;-webkit-mask:var(--bay-i-check) center/contain no-repeat;mask:var(--bay-i-check) center/contain no-repeat}
.goal.done .goal-icon:not(:has(svg))::after{content:none}
/* Goals clear the top-right buttons (the story button included): under the title up to 1399 px, centred and wrapping above.
   Short windows (max-height:480px) keep their own top-left goals row, so both ranges need some height. */
@media(min-width:1000px) and (max-width:1399px) and (min-height:481px){.goals{left:27px;top:104px;transform:none;max-width:calc(100% - 54px);flex-wrap:wrap}}
@media(min-width:1400px) and (min-height:481px){.goals{max-width:calc(100% - 800px);flex-wrap:wrap;justify-content:center}}
/* Mouse and trackpad: smaller markers and hint; touch screens keep the 48 px targets. */
@media(pointer:fine){
.point{min-width:40px;min-height:40px}.point-disc,.point.actor .point-disc{width:40px;height:40px;border-radius:14px;font-size:20px}.point.actor .point-disc{border-radius:50%}.point-disc svg{width:23px;height:23px}.selection .portrait svg{width:32px;height:32px}
.point-label,.point.actor .point-label{font-size:13px;font-weight:650;padding:3px 8px;margin-top:4px}.point-bubble{font-size:11px;padding:3px 8px}
.hint{font-size:15px;font-weight:700;padding:11px 20px;gap:6px 10px;bottom:28px}.hint-symbol{font-size:20px}.hint-small{font-size:12px;margin-top:-3px}
.top-actions button,.camera-controls button{min-width:42px;min-height:42px;border-radius:14px;font-size:18px}.top-actions #fullscreen{font-size:14px;padding:0 13px}.top-actions #fullscreen span:first-child{font-size:22px}.story-button{font-size:14px!important}.story-button span:first-child{font-size:21px}
.selection button{font-size:14px;min-height:38px;padding:8px 11px}.goal{padding:8px 11px;font-size:12.5px}.goal-icon{font-size:18px}
}
/* Phones: the card becomes a bottom sheet, the map stays visible above it; marker statuses shrink to a dot instead of disappearing. */
@media(max-width:700px){
/* Goals stay one row (a second row would sit under the speech card at top:145px); extra chips scroll sideways and fade out at the edge. */
.goals{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x;padding-bottom:8px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
.goals::-webkit-scrollbar{display:none}.goals::after{content:'';flex:0 0 20px}.goal{flex:0 0 auto;white-space:nowrap}
.point-bubble{display:block;position:absolute;top:-3px;left:50%;margin:0 0 0 13px;width:14px;height:14px;min-width:0;max-width:none;padding:0;border-radius:50%;border:2px solid #fff9e8;background:#d98565;box-shadow:0 1px 4px #1b4d4540;font-size:0;line-height:0;color:transparent;overflow:hidden;white-space:nowrap;pointer-events:none}
.point-bubble[data-tone=ok]{background:#4b876d}.point-bubble[data-tone=wait]{background:#f6b74c}
/* A dot means "look here". Episodes 5–6 give every actor a status badge (they are the ones with an energy bar), so on a
   phone those dots stay hidden unless app.js marks the badge data-tone="wait"; a resident who is already comfortable gets none. */
.point.actor:has(.actor-resource-point) .point-bubble:not([data-tone=wait]){display:none}
.point.request:not(.active) .point-bubble{display:none}
.selection{left:0;right:0;bottom:0;width:auto;max-width:none;max-height:min(52dvh,440px);padding:16px 16px calc(14px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:22px 22px 0 0;box-shadow:0 -6px 24px #244d4326}
#game.has-selection .point-disc{width:42px;height:42px;border-radius:15px}#game.has-selection .point.actor .point-disc{border-radius:50%}#game.has-selection .point-disc svg{width:24px;height:24px}
#game.has-selection .point-label{font-size:12px;max-width:120px;overflow:hidden;text-overflow:ellipsis}
#game.has-selection .point:not(.target):not(.selected):not(.active) .point-label{display:none}
}
/* bay-v3 · episode 1 as a timed shift (hud.js, app.js v3 block). #game.v3 is set only for a v3 definition; every rule
   below targets the HUD (#hud), v3-only classes or #game.v3, so the v2 interface is unchanged.
   tests/test_bay_game.py takes everything after the last phone query written without a space after «@media» as the v2
   phone block (goals stay one row, nothing there may wrap): the v3 queries are written «@media (…)» with a space, and
   v3 rows wrap with flex-flow.
   Sizes measured at run time, on #game: --hud-top-h (the top bar), --hint-top (bottom of the game to the hint's top
   edge, 0 while it is hidden), --hud-card-h (the dilemma card), --hud-complaint-h (the complaint plate, with its gap). */
:root{--bay-i-ferry:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h28l-4 7H8z'/%3E%3Cpath d='M10 19v-6h14v6M15 13V8h5v5'/%3E%3Cpath d='M3 31c3 0 3-2 6-2s3 2 6 2 3-2 6-2 3 2 6 2 3-2 6-2'/%3E%3C/svg%3E")}
/* z-index 6, above the hint and the camera controls (5): a complaint plate or a phone's dilemma sheet is never under
   them. The speech and the hero/job card (6) come later in the page and stay above the HUD. */
.hud{position:absolute;inset:0;z-index:6;pointer-events:none;--hud-gap:max(26px,env(safe-area-inset-left))}
.hud>*{pointer-events:auto}
.hud-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.hud-top{position:absolute;top:max(22px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:7px;width:max-content;max-width:calc(100% - 640px);padding:8px 10px 8px 12px;border-radius:20px;background:#fff9e8f2;border:1px solid #fff;box-shadow:0 5px 22px #244d4320}
.hud-row{display:flex;align-items:center;gap:14px}
.hud-ferry{display:flex;align-items:center;gap:10px;min-width:0}
.hud-ferry-icon{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:11px;background:#e3eee3;transition:background-color .3s}
.hud-ferry-icon::before{content:'';position:absolute;inset:6px;background:#244d43;-webkit-mask:var(--bay-i-ferry) center/contain no-repeat;mask:var(--bay-i-ferry) center/contain no-repeat}
.hud-ferry-lines{display:flex;flex-direction:column;min-width:0}
.hud-ferry-main{display:flex;gap:2px 8px;align-items:baseline;flex-flow:row wrap;min-width:0}
.hud-ferry-text{min-width:0;font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.hud-ferry-sub{font-size:13px;font-weight:700;color:#5f6450;white-space:nowrap;font-variant-numeric:tabular-nums}
.hud-ferry-sub:empty,.hud-wave:empty,.hud-ferry-word:empty{display:none}
.hud-wave{font-size:12.5px;font-weight:650;color:#5f6450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-ferry[data-tone=soon] .hud-ferry-icon{background:#ffe1a0}
.hud-ferry[data-tone=docked] .hud-ferry-icon{background:#d4ebd0}
.hud-ferry[data-tone=holding] .hud-ferry-icon{background:#f6c9b8}
.hud-ferry[data-tone=holding] .hud-ferry-text{color:#a3402c}
.hud-trust{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:8px;padding-left:14px;border-left:1px solid #e4dfc8}
.hud-trust-label{font-size:12.5px;font-weight:750;color:#5f6450}
.hud-trust-track{position:relative;width:150px;height:10px;margin:0 2px 12px;border-radius:6px;background:#e4e0cc}
.hud-trust-fill{position:absolute;left:0;top:0;bottom:0;width:50%;border-radius:6px;background:#d98565;transition:width .45s ease,background-color .3s}
.hud-trust[data-zone=mid] .hud-trust-fill{background:#d9a13a}
.hud-trust[data-zone=high] .hud-trust-fill{background:#3b7b62}
.hud-trust-tick{position:absolute;top:-3px;width:2px;height:16px;margin-left:-1px;border-radius:1px;background:#244d43}
.hud-trust-tick span{position:absolute;top:15px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;line-height:1;color:#5f6450;white-space:nowrap}
.hud-trust-value{min-width:2ch;font-size:20px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.hud-trust-delta{position:absolute;right:-4px;top:-22px;padding:2px 8px;border-radius:9px;background:#3b7b62;color:#fff9e8;font-size:12px;font-weight:800;white-space:nowrap;opacity:0;pointer-events:none}
.hud-trust-delta[data-sign=down]{background:#b8473b}
.hud-trust-delta.show{animation:hud-delta 1.9s ease-out forwards}
.hud-trust.hit .hud-trust-track{animation:hud-hit .7s ease-out}
.hud-trust.hit[data-hit=down] .hud-trust-track{animation-name:hud-hit-down}
.hud-speed{display:flex;flex:0 0 auto;gap:2px;padding:3px;border-radius:13px;background:#ece7d2}
.hud-speed-button{min-width:42px;min-height:38px;border:0;border-radius:10px;background:none;font-size:14px;font-weight:800;color:#5f6450}
.hud-speed-button[aria-pressed=true]{background:#244d43;color:#fff9e8}
.hud-pause{display:flex;align-items:center;gap:10px;padding:7px 7px 7px 13px;border-radius:14px;background:#244d43;color:#fff9e8;font-size:15px;font-weight:750}
.hud-pause-icon{flex:0 0 auto;width:15px;height:15px;background:currentColor;-webkit-mask:var(--bay-i-pause) center/contain no-repeat;mask:var(--bay-i-pause) center/contain no-repeat}
.hud-pause-text{flex:1}
.hud-resume{min-height:38px;padding:6px 13px;border:0;border-radius:10px;background:#fff9e8;color:#244d43;font-size:14px;font-weight:800}
/* The folded dilemma: a row of the top bar, so it is never under a card, the speech or the hero strip. */
.hud-card-chip{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:6px 12px;border:1px solid #a46f1b;border-radius:13px;background:#ffe1a0;color:#244d43;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.hud-card-chip::before{content:'';flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#b6761c}
#game.v3-paused .vignette{background:radial-gradient(ellipse at 50% 45%,#24433f10 30%,#1d3d3670 100%)}
/* Hero strip: portrait inside an energy ring (people), status line, a soft pulse while someone is free. */
.hud-heroes{position:absolute;left:var(--hud-gap);top:104px;display:flex;flex-direction:column;gap:8px;width:226px}
.hero{display:flex;align-items:center;gap:10px;min-height:56px;padding:5px 12px 5px 5px;border:1px solid #fff;border-radius:18px;background:#fff9e8ee;box-shadow:0 3px 12px #244d4314;text-align:left;touch-action:none}
.hero[aria-pressed=true]{background:#244d43;border-color:#244d43;color:#fff9e8}
.hero-face{--e:1;--ring:#3b7b62;flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;padding:3px;border-radius:50%;background:conic-gradient(var(--ring) calc(var(--e) * 1turn),#dcd7c1 0)}
.hero[data-tone=half] .hero-face{--ring:#d9a13a}
.hero[data-tone=tired] .hero-face{--ring:#d9653f}
.hero[data-tone=burnout] .hero-face{--ring:#b8473b}
.hero[data-kind=ai] .hero-face{--ring:#579790}
.hero-portrait{display:grid;place-items:center;width:40px;height:40px;overflow:hidden;border-radius:50%;background:#d3e7d9;font-weight:800}
.hero-portrait svg{width:36px;height:36px}
.hero-text{display:flex;flex-direction:column;min-width:0}
.hero-name{font-size:15px;font-weight:800}
.hero-status{font-size:12.5px;font-weight:650;color:#5f6450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero[aria-pressed=true] .hero-status{color:#e5ecd8}
.hero[data-status=idle] .hero-face{animation:hero-idle 1.7s ease-in-out infinite}
.hero[data-status=burnout]{background:#efe6dc}
.hero[data-status=burnout] .hero-portrait{filter:grayscale(.75)}
.hero[data-status=burnout] .hero-status{color:#a3402c}
/* Complaint plate (role="alert") right above the hint, the toast above the plate (--hud-complaint-h is 0 without
   one), so neither covers the other or the hint's last line. */
.hud-complaint{position:absolute;left:50%;bottom:calc(max(var(--hint-top,0px),120px) + 10px);transform:translateX(-50%);width:max-content;max-width:min(580px,calc(100% - 32px));padding:12px 16px 12px 46px;border-radius:16px;background:#b8473b;color:#fff9e8;font-size:15px;font-weight:700;line-height:1.45;box-shadow:0 8px 26px #6e1f1640;pointer-events:none}
.hud-complaint:empty{display:none}
.hud-complaint::before{content:'!';position:absolute;left:14px;top:50%;display:grid;place-items:center;width:22px;height:22px;transform:translateY(-50%);border-radius:50%;background:#fff9e8;color:#b8473b;font-size:15px;font-weight:900}
.hud-complaint.show{animation:speech-in .25s ease-out}
#game.v3 .toast{top:auto;bottom:calc(max(var(--hint-top,0px),120px) + 10px + var(--hud-complaint-h,0px))}
#game.v3 .toast[data-tone=warn]{background:#8c3b2f}
/* The dilemma card. With a hero or job card open it waits as the chip (hud.js: one card at a time). */
.hud-card{position:absolute;right:max(26px,env(safe-area-inset-right));top:96px;width:340px;max-height:calc(100dvh - 210px);overflow-y:auto;overscroll-behavior:contain;padding:16px;border:1px solid #fff;border-radius:22px;background:#fff9e8f7;box-shadow:0 8px 30px #244d4330;animation:speech-in .25s ease-out}
.hud-card-kicker{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:#986317}
.hud-card-title{margin:0 0 6px;font-size:18px}
.hud-card-text{margin:0 0 12px;font-size:14px;line-height:1.5}
.hud-card-options{display:flex;flex-direction:column;gap:8px}
.hud-option{display:flex;flex-direction:column;gap:3px;min-height:48px;padding:10px 12px;border:1px solid #d4d9be;border-radius:14px;background:#f7f4e7;text-align:left}
.hud-option b{font-size:14.5px}
.hud-option span{font-size:12.5px;font-weight:600;color:#5f6450}
.hud-card-later{min-height:40px;margin-top:6px;padding:4px 0;border:0;background:none;font-size:13.5px;font-weight:750;color:#5f6450;text-decoration:underline;text-underline-offset:3px}
/* Map markers: patience ring around a job, «?» on unverified AI work, urgent redo, the drop target under a dragged hero. */
.point-ring{--ring:1;--ring-c:#4b876d;position:absolute;inset:-5px;padding:3px;border-radius:23px;background:conic-gradient(var(--ring-c) calc(var(--ring) * 1turn),#24433f1f 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.point-ring[data-tone=mid]{--ring-c:#d9a13a}.point-ring[data-tone=low]{--ring-c:#d9653f}.point-ring[data-tone=late]{--ring-c:#b8473b;animation:ring-late 1s ease-in-out infinite}
.point.actor .point-ring{border-radius:50%}
.point.review .point-disc{background:#fff1c9;border-color:#d9a13a}
.point-q{font-size:27px;font-weight:900;line-height:1;color:#8a5a12}
/* A «?» on work that was familiar to Nika (it cannot hold a mistake): a small quiet badge without a ring or a label. */
.point.review.quiet .point-disc{transform:scale(.72);background:#f7f4e7;border-color:#d4d9be;box-shadow:0 2px 6px #1b4d4520}
.point.review.quiet .point-q{color:#7b826e}
.point.review.quiet:not(.target):not(:focus-visible) .point-label{display:none}
.point.review.quiet:not(.target):not(.drop-target){opacity:.85}
.point.urgent .point-disc{background:#f7d4c6;border-color:#b8473b}
.point.ferry .point-disc{background:#f6c9b8}
.point.dim{opacity:.55}
.point.drop-target .point-disc{background:#244d43;border-color:#fff9e8;color:#fff9e8;transform:scale(1.08)}
.point.drop-target .point-q{color:#fff1c9}
.forecast-tip{position:absolute;z-index:8;left:0;top:0;transform:translate(-50%,-100%);max-width:360px;padding:8px 12px;border-radius:12px;background:#244d43;color:#fff9e8;font-size:14px;font-weight:750;line-height:1.35;white-space:nowrap;box-shadow:0 6px 20px #12302a40;pointer-events:none}
.forecast-tip::before{content:'';display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:50%;background:#8fd3a8;vertical-align:1px}
.forecast-tip[data-tone=new]::before,.forecast-tip[data-tone=risky]::before{background:#f6b74c}
.forecast-tip[data-tone=danger]::before{background:#ff8f7a}
.forecast-tip[data-tone=blocked]{background:#5f6450}.forecast-tip[data-tone=blocked]::before{background:#cfcab4}
.forecast-tip.long{width:min(320px,calc(100vw - 32px));white-space:normal}
/* Cards of the v3 shift: a hero's live line, job buttons with forecasts, buttons that explain why they are not available. */
.v3-actor-live{margin:10px 0;padding:10px 12px;border-radius:14px;background:#e8eddd}
.v3-actor-status{display:block;font-size:15px;font-weight:750}
.v3-actor-live .resource-track{display:block;margin:8px 0 2px}
.selection .v3-card-note{font-size:13.5px;color:#4f5646}
.selection .v3-jobs button{flex:1 1 100%}
.selection button[aria-disabled=true]{opacity:.55;cursor:default}
.selection .portrait .point-q{font-size:24px}
.keys-hint{position:absolute;z-index:4;left:max(26px,env(safe-area-inset-left));bottom:6px;margin:0;font-size:12px;font-weight:650;color:#244d43b0;pointer-events:none}
#game.v3 .goals{display:none}
/* The debrief (debrief.js / debrief.css) lives in #end: the overlay takes clicks and scrolls on a phone. Everything
   under it is inert (app.js); the top bar (sound, full screen, story) and the toasts stay above it, in the strip
   debrief.css leaves at the top. The same as debrief.css's :has() rule, for browsers without :has(). */
.end.debrief-mode{pointer-events:auto;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#game.v3-debrief .topbar{z-index:11}
@keyframes hud-delta{0%{opacity:0;transform:translateY(6px)}12%{opacity:1;transform:translateY(0)}75%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
@keyframes hud-hit{0%{box-shadow:0 0 0 0 #3b7b6299}100%{box-shadow:0 0 0 8px #3b7b6200}}
@keyframes hud-hit-down{0%{box-shadow:0 0 0 0 #b8473b99}100%{box-shadow:0 0 0 8px #b8473b00}}
@keyframes hero-idle{0%,100%{box-shadow:0 0 0 0 #f6b74c00}50%{box-shadow:0 0 0 6px #f6b74c70}}
@keyframes ring-late{50%{opacity:.4}}
@media (pointer:fine){.point-ring{inset:-4px;border-radius:17px}.point.actor .point-ring{border-radius:50%}.point-q{font-size:22px}}
@media (pointer:coarse){.keys-hint{display:none!important}}
/* Mid widths: the top bar moves under the title, beside the hero column. */
@media (min-width:701px) and (max-width:1299px){.hud-top{top:84px;left:calc(50% + 125px);max-width:calc(100% - 300px)}.hud-row{flex-flow:row wrap;gap:8px 14px}.hud-heroes{top:84px}.hud-card{top:calc(96px + var(--hud-top-h,60px))}}
/* Phones: one compact top bar, a row of three heroes under it, the speech card below them, the dilemma as a bottom
   sheet (it would cover the speech at the top), toasts and complaints on the hint or on the sheet. */
@media (max-width:700px){
.hud-top{top:70px;left:16px;right:16px;transform:none;width:auto;max-width:none;padding:6px 6px 6px 8px;gap:6px;border-radius:16px}
.hud-row{gap:8px}.hud-ferry{flex:1 1 auto;gap:7px}.hud-ferry-icon{width:28px;height:28px;border-radius:9px}.hud-ferry-icon::before{inset:5px}
/* «Паром 1/2 на рейде» wraps between the count and the state instead of running under the trust bar. */
.hud-ferry-text{font-size:15px;white-space:normal}.hud-ferry-sub{font-size:11.5px}.hud-wave{font-size:11px;max-width:150px}
.hud-trust{padding-left:8px;gap:5px}.hud-trust-label{display:none}.hud-trust-track{width:64px}.hud-trust-tick span{font-size:9px}.hud-trust-value{font-size:16px}
.hud-speed-button{min-width:36px;min-height:36px}
.hud-pause{font-size:13.5px;padding:5px 5px 5px 10px}
.hud-card-chip{min-height:38px;font-size:13.5px}
.hud-heroes{left:16px;right:16px;top:calc(76px + var(--hud-top-h,54px));flex-direction:row;width:auto;gap:6px}
.hero{flex:1 1 0;min-width:0;min-height:48px;gap:6px;padding:4px 6px 4px 4px;border-radius:15px}
.hero-face{width:38px;height:38px;padding:2px}.hero-portrait{width:34px;height:34px}.hero-portrait svg{width:30px;height:30px}
.hero-name{font-size:13px}.hero-status{font-size:11px}
#game.v3 .speech,#game.v3 .speech.opening-speech{top:calc(136px + var(--hud-top-h,54px));bottom:auto}
.hud-card{top:auto;left:0;right:0;bottom:0;width:auto;max-height:calc(100% - 244px - var(--hud-top-h,54px));padding:16px 16px calc(14px + env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:22px 22px 0 0;box-shadow:0 -6px 24px #244d4326}
#game.hud-card-open .hint{visibility:hidden}
.hud-complaint{bottom:calc(max(var(--hint-top,0px),80px) + 10px);font-size:14px}
#game.v3 .toast{bottom:calc(max(var(--hint-top,0px),80px) + 10px + var(--hud-complaint-h,0px))}
/* With the sheet up: on top of it, but never higher than under the speech slot (on a short phone the plate covers
   the sheet's heading for its 7 s instead). */
#game.hud-card-open .hud-complaint{bottom:min(calc(var(--hud-card-h,0px) + 10px),calc(100% - 330px - var(--hud-top-h,54px)))}
#game.v3.hud-card-open .toast{bottom:calc(min(calc(var(--hud-card-h,0px) + 10px),calc(100% - 330px - var(--hud-top-h,54px))) + var(--hud-complaint-h,0px))}
.forecast-tip{white-space:normal;max-width:calc(100vw - 32px);font-size:13px}
}
/* Narrow phones: the ferry icon stands for the word «Паром», which stays for screen readers. */
@media (max-width:420px){.hud-ferry-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
/* Short landscape screens: the top bar at the very top, heroes as a compact row at the bottom left, the dilemma on the
   right between the top bar and the camera controls. */
@media (max-height:480px){
.hud-top{top:10px;left:16px;transform:none;max-width:calc(100% - 290px)}.hud-wave{display:none}
.hud-heroes{top:auto;bottom:12px;left:16px;flex-direction:row;width:auto}.hero{min-height:44px;padding:3px}.hero-text{display:none}
.hud-card{top:calc(18px + var(--hud-top-h,60px));bottom:auto;left:auto;right:16px;width:min(340px,calc(100% - 330px));max-height:calc(100% - 92px - var(--hud-top-h,60px));padding:14px;border-width:1px;border-radius:20px;box-shadow:0 8px 30px #244d4330}
#game.hud-card-open .hint{visibility:hidden}
#game.v3 .speech,#game.v3 .speech.opening-speech{top:calc(18px + var(--hud-top-h,60px))}
.hud-complaint,#game.hud-card-open .hud-complaint{bottom:calc(max(var(--hint-top,0px),66px) + 8px)}
#game.v3 .toast,#game.v3.hud-card-open .toast{bottom:calc(max(var(--hint-top,0px),66px) + 8px + var(--hud-complaint-h,0px))}
}
@media (prefers-reduced-motion:reduce){
.hud-trust-delta.show{animation:none;opacity:1}.hud-trust.hit .hud-trust-track{animation:none}
.hero[data-status=idle] .hero-face{animation:none;box-shadow:0 0 0 3px #f6b74c}
.point-ring[data-tone=late]{animation:none}.hud-complaint.show,.hud-card{animation:none}
.hud-trust-fill,.hud-ferry-icon{transition:none}
}
/* Last, so no breakpoint's toast slot (above) moves the debrief's toast back down. */
#game.v3.v3-debrief .toast{z-index:11;top:max(16px,env(safe-area-inset-top));bottom:auto}