/* Viewport owns the stage; the logical battlefield remains 960 x 600. */
html,body{width:100%;height:100%;overflow:hidden}
#game-surface{position:fixed;inset:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);height:100dvh}
.workspace{width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0;place-items:center;container-type:size}
.game-panel{position:relative;width:min(100cqw,160cqh);max-width:100%;margin:0;background:transparent}
.board-wrap{width:100%;box-shadow:none}
#board{width:100%;height:auto;aspect-ratio:8/5}
#board,#pickup-canvas{clip-path:inset(0);border-radius:0}
#frontier-scenery{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;touch-action:auto;z-index:-1}
#game-surface{isolation:isolate}
/* Menus use the viewport, with scroll fallback rather than clipping controls. */
.welcome-screen{position:fixed;inset:0;height:100dvh;max-height:100dvh;overflow:auto;align-items:safe center}
.minimal-packing:not(.lobby-stash){overflow:auto;align-items:safe center;--charm-cell:clamp(16px,min(4vw,4.5dvh),38px)}
.minimal-packing:not(.lobby-stash) .loadout-inner{flex-shrink:0;margin:auto;max-width:100%}
.minimal-packing:not(.lobby-stash) .loadout-footer{position:sticky;bottom:0;background:none;padding:10px;flex-wrap:wrap;justify-content:center;z-index:2}
.minimal-packing:not(.lobby-stash) .packing-workbench{max-width:100%;overflow-x:auto;padding:10px 4px 16px}
#overlay:not([hidden]){overflow:auto;align-items:safe center}
@container(max-width:900px){
 .map-hud{top:auto;bottom:8px;left:8px;right:8px;flex-wrap:wrap;gap:6px}
 .hud-left{order:2;flex-basis:100%;gap:4px}
 .hud-resources{margin-left:auto;gap:5px}
 .hud-pill,.hud-phase,#token-hud{min-height:36px;padding:6px 8px;gap:5px}
 .map-hud .wave-buttons button{min-height:40px;font-size:12px;padding:6px 10px}
 .run-clock{font-size:12px}.hud-pill b,#token-hud b{font-size:13px}
 .wave-forecast{max-width:calc(100cqw - 16px)}
 .wave-forecast:not(:focus-within):not(:hover) strong{display:none}
 .wave-forecast{cursor:pointer;min-height:32px}
}
@media(pointer:coarse){button:not(.tray-charm,.packed-charm,.pack-cell,.tower-orbit){min-height:44px;min-width:44px}.map-hud .wave-buttons button{min-height:44px}}
@media(max-width:600px) and (orientation:portrait){
 .game-panel::after{content:"Landscape gives your forest more room";position:absolute;top:calc(100% + 20px);left:8px;right:8px;text-align:center;color:#e5e8d3;font:14px/1.4 var(--font-ui);pointer-events:none;text-shadow:0 2px 4px #142820}
}

/* The visible world has no clipping rectangle at the playable bounds. */
.continuous-world #board{opacity:0;mask-image:none}
.continuous-world .board-wrap,.continuous-world .game-panel{background:transparent;box-shadow:none}
.continuous-world #frontier-scenery{visibility:hidden}
#frontier-view{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;touch-action:auto;z-index:-1;clip-path:none;border-radius:0}
#crt-glass{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
#crt-glass[hidden]{display:none}
#game-surface.crt-glass-active #frontier-view{opacity:0}
.follow-camera #tower-menu{position:fixed}
.follow-camera #pickup-canvas{display:none}
#tactical-minimap{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:calc(max(8px,env(safe-area-inset-bottom)) + 82px);z-index:4;display:block;width:clamp(152px,16vw,228px);height:auto;aspect-ratio:8/5;border:3px solid #b4a377;border-radius:3px;background:#203b2b;box-shadow:0 0 0 2px #14271e,0 8px 20px #081610bb;cursor:crosshair;touch-action:manipulation}
#tactical-minimap[hidden]{display:none}
#tactical-minimap:focus-visible{outline:3px solid #f5db92;outline-offset:5px}
@media(min-width:1520px){#tactical-minimap{bottom:max(14px,env(safe-area-inset-bottom))}}
/* Keep the upper snail corridor open; the battlefield HUD lives along the foot. */
.map-hud{top:auto;bottom:10px;align-items:flex-end}

.lobby-heading{left:31.25%;top:49%;width:min(340px,70cqw);transform:translateX(-50%);text-align:center;pointer-events:none}
.lobby-heading #lobby-status{font-size:clamp(12px,1.2cqw,16px);line-height:1.45;padding:10px 14px;margin:0}
@container(max-width:600px){.lobby-heading{left:40%;top:53%;width:75cqw}}

/* One screen anchored bar for all in-run controls and status. */
#game-surface > .map-hud{
  position:fixed;
  top:auto;
  bottom:max(8px,env(safe-area-inset-bottom));
  left:50%;
  right:auto;
  z-index:20;
  transform:translateX(-50%);
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:clamp(3px,.7vw,8px);
  width:min(calc(100vw - 16px),980px);
  min-height:60px;
  padding:6px 8px;
  border:0;
  border-image:none;
  background:none;
  filter:none;
  pointer-events:none;
}
#game-surface > .map-hud .hud-left{order:0;flex:none;min-width:0;flex-basis:auto}
#game-surface > .map-hud .hud-actions,
#game-surface > .map-hud .wave-buttons,
#game-surface > .map-hud .hud-resources{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;flex:none;margin:0}
#game-surface > .map-hud .wave-buttons button{min-width:0;min-height:38px;padding:6px 9px;font-size:11px;white-space:nowrap}
#game-surface > .map-hud .hud-pill{min-width:0;min-height:38px;padding:5px 7px;gap:4px;white-space:nowrap}
#game-surface > .map-hud .hud-resources #emerald-hud{display:flex}
#game-surface > .map-hud .hud-pill svg{width:17px;height:17px}
#game-surface > .map-hud .hud-pill b{font-size:12px}
#game-surface > .map-hud .wave-forecast{
  order:1;display:grid;flex:1 1 340px;
  grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr);
  gap:7px;width:auto;min-width:0;max-width:410px;
  height:48px;min-height:0;padding:4px 8px;
  overflow:hidden;
}
#game-surface > .map-hud .wave-marker{display:grid;grid-template-columns:minmax(0,1fr) 32px;grid-template-rows:auto auto;column-gap:4px;min-width:0}
#game-surface > .map-hud .wave-marker .tiny{grid-column:1 / -1;display:block;margin:0;font-size:8px;line-height:1}
#game-surface > .map-hud .wave-marker strong{display:block;grid-column:1;grid-row:2;max-width:none;font-size:10px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#game-surface > .map-hud .wave-marker small{grid-column:1;grid-row:3;font-size:8px;line-height:1.1}
#game-surface > .map-hud .wave-marker .enemy-preview{grid-column:2;grid-row:2 / span 2;display:grid;place-items:center;width:32px;height:32px;min-width:0}
#game-surface > .map-hud .wave-marker .enemy-preview img{width:32px;height:32px}
#game-surface > .map-hud .wave-current{text-align:right}
#game-surface > .map-hud .wave-countdown{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:74px;font-size:7px;line-height:1;white-space:nowrap}
#game-surface > .map-hud .wave-countdown #wave-progress-track{position:static;display:block;width:100%;height:5px}
#game-surface > .map-hud .charm-bag{order:3;position:relative;right:auto;bottom:auto;flex:none;max-width:none;pointer-events:auto}
#game-surface > .map-hud .bag-toggle{min-width:0;min-height:38px;margin:0;padding:4px 7px;gap:3px}
#game-surface > .map-hud .bag-toggle svg{width:23px;height:23px}
#game-surface > .map-hud .charm-bag-panel{position:absolute;right:0;bottom:calc(100% + 10px);max-height:min(390px,calc(100dvh - 90px));margin:0}
#game-surface > .map-hud .hud-resources{order:2}
#game-surface > .map-hud #jump-button{order:4;position:relative;left:auto;right:auto;bottom:auto;z-index:auto;flex:0 0 60px;width:60px;height:60px;min-width:60px;min-height:60px;max-width:60px;margin:0;padding:0;border-radius:5px}
#game-surface:not(.lobby-active):has(#loadout-screen:not([hidden])) > .map-hud,
#game-surface:has(#overlay:not([hidden]):not(.challenger-overlay)) > .map-hud,
#game-surface:has(.final-score-overlay:not([hidden])) > .map-hud{display:none}
#game-surface.lobby-active > .map-hud{display:flex;justify-content:flex-end}
#game-surface.lobby-active > .map-hud > :not(.hud-resources){display:none}
#game-surface.lobby-active > .map-hud .hud-resources > :not(#emerald-hud){display:none}

@media(max-width:700px){
  #game-surface > .map-hud{min-height:50px;padding:4px 5px;gap:3px}
  #game-surface > .map-hud .wave-buttons button{min-height:34px;padding:5px 6px;font-size:9px}
  #game-surface > .map-hud .hud-pill{min-height:34px;padding:4px 5px;gap:2px}
  #game-surface > .map-hud .hud-pill svg{width:14px;height:14px}
  #game-surface > .map-hud .hud-pill b{font-size:10px}
  #game-surface > .map-hud .hud-pill em{font-size:8px}
  #game-surface > .map-hud .wave-forecast{flex-basis:190px;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);height:40px;gap:3px;padding:3px 4px}
  #game-surface > .map-hud .wave-marker{grid-template-columns:minmax(0,1fr) 22px;column-gap:1px}
  #game-surface > .map-hud .wave-marker .tiny{font-size:7px}
  #game-surface > .map-hud .wave-marker strong{font-size:8px}
  #game-surface > .map-hud .wave-marker small{font-size:7px}
  #game-surface > .map-hud .wave-marker .enemy-preview,
  #game-surface > .map-hud .wave-marker .enemy-preview img{width:22px;height:22px}
  #game-surface > .map-hud .wave-countdown{width:42px;font-size:6px;white-space:normal;text-align:center}
  #game-surface > .map-hud .bag-toggle{min-height:34px;padding:4px}
  #game-surface > .map-hud .bag-toggle svg{width:19px;height:19px}
  #game-surface > .map-hud .bag-icons{display:none}

}
@media(max-width:480px){
  #game-surface > .map-hud .hud-resources .hud-pill{border:0;border-image:none;background:transparent;box-shadow:none;backdrop-filter:none;padding:2px}
  #game-surface > .map-hud .wave-forecast{flex-basis:128px;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:1px}
  #game-surface > .map-hud .wave-marker{grid-template-columns:minmax(0,1fr)}
  #game-surface > .map-hud .wave-marker strong{display:none}
  #game-surface > .map-hud .wave-marker .enemy-preview{display:none}
  #game-surface > .map-hud .wave-countdown{width:24px}
  #game-surface > .map-hud .wave-countdown > span:first-child{display:none}
  #game-surface > .map-hud .wave-marker .tiny{font-size:6px}
  #game-surface > .map-hud .wave-marker small{font-size:7px}
  #game-surface > .map-hud .bag-toggle{min-width:30px}
  #game-surface > .map-hud #jump-button{position:absolute;right:8px;left:auto;bottom:calc(100% + 8px);width:56px;height:56px;min-width:56px;min-height:56px;max-width:56px;padding:0}
  #game-surface > .map-hud #jump-button::after{content:none}
  #game-surface > .map-hud #jump-button[hidden]{display:none}
}
@media(max-width:360px){
  #game-surface > .map-hud{gap:2px;padding:3px 4px;min-height:46px}
  #game-surface > .map-hud .wave-buttons{gap:2px}
  #game-surface > .map-hud #pause{width:29px;min-width:29px;padding:0;font-size:0}
  #game-surface > .map-hud #pause::after{content:"Ⅱ";font-size:14px}
  #game-surface > .map-hud #pause[aria-pressed="true"]::after{content:"▶"}
  #game-surface > .map-hud #speed{width:25px;min-width:25px;padding:0;font-size:8px}
  #game-surface > .map-hud .wave-forecast{flex:0 0 78px;width:78px;grid-template-columns:minmax(0,1fr) 13px minmax(0,1fr);height:34px;padding:2px;gap:0}
  #game-surface > .map-hud .wave-marker .tiny{font-size:6px;letter-spacing:-.04em}
  #game-surface > .map-hud .wave-marker small{font-size:7px;letter-spacing:-.07em}
  #game-surface > .map-hud .wave-countdown{width:13px}
  #game-surface > .map-hud .hud-resources{gap:1px}
  #game-surface > .map-hud .hud-resources .hud-pill{min-height:32px;padding:1px 2px;gap:1px}
  #game-surface > .map-hud .hud-resources .hud-pill svg{display:none}
  #game-surface > .map-hud .hud-resources .hud-pill:first-child::before{content:"♥";color:#ecbaa0;font-size:10px}
  #game-surface > .map-hud #gold-hud::before{content:"●";color:#edd186;font-size:9px}
  #game-surface > .map-hud #token-hud::before{content:"◆";color:#79dbdb;font-size:9px}
  #game-surface > .map-hud .hud-pill em{display:none}
  #game-surface > .map-hud .hud-pill b{font-size:9px}
  #game-surface > .map-hud .bag-toggle{min-width:29px;min-height:32px;padding:1px;gap:0}
  #game-surface > .map-hud .bag-toggle svg{width:17px;height:17px}
  #game-surface > .map-hud .bag-toggle b{font-size:8px}

}

/* A matching moss panel for the next/current creatures and their timer. */
#game-surface > .map-hud .wave-forecast{
  --wave-icon:38px;
  flex:0 1 210px;width:210px;max-width:210px;min-width:78px;
  grid-template-columns:var(--wave-icon) minmax(14px,1fr) var(--wave-icon);
  height:38px;padding:0;gap:6px;overflow:visible;align-items:center;
  border:0;border-image:var(--moss-frame) 18 fill / 10px / 2px stretch;
  background:none;border-radius:0;box-shadow:none;backdrop-filter:none;
}
#game-surface > .map-hud .wave-marker{display:flex;align-items:center;justify-content:center;width:var(--wave-icon);height:var(--wave-icon)}
#game-surface > .map-hud .wave-marker .tiny,
#game-surface > .map-hud .wave-marker strong,
#game-surface > .map-hud .wave-marker small,
#game-surface > .map-hud .wave-countdown > span:first-child{display:none}
#game-surface > .map-hud .wave-marker .enemy-preview,
#game-surface > .map-hud .wave-marker .enemy-preview img{display:block;width:var(--wave-icon);height:var(--wave-icon);background:none;border:0}
#game-surface > .map-hud .wave-countdown{width:100%;min-width:0}
#game-surface > .map-hud .wave-countdown #wave-progress-track{
  height:5px;border-radius:4px;overflow:hidden;background:#17291dcc;
  box-shadow:0 0 0 1px #c5d79055,0 2px 3px #10231966;
}
#game-surface > .map-hud #wave-progress-fill{background:#d5e99a;border-radius:4px;transform-origin:left center}
@media(max-width:700px){#game-surface > .map-hud .wave-forecast{--wave-icon:34px;flex-basis:132px;width:132px;height:34px;gap:4px}}
@media(max-width:480px){#game-surface > .map-hud .wave-forecast{--wave-icon:27px;flex-basis:94px;width:94px;gap:3px}}
@media(max-width:360px){#game-surface > .map-hud .wave-forecast{--wave-icon:25px;flex:0 0 78px;width:78px;height:32px;gap:2px}}

/* Read-only party packing table, independent of the toolbar's positioning. */
#bag-inspection{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(10px,3vw,30px);background:#10251dcc;backdrop-filter:blur(5px);pointer-events:auto}
#bag-inspection[hidden]{display:none}
#bag-inspection #charm-bag-panel{position:relative;inset:auto;margin:0;width:min(1080px,100%);max-width:100%;max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;padding:22px;border:8px solid transparent;border-image:var(--bark-frame) 18 fill / 18px / 2px stretch;background:none;box-shadow:none;backdrop-filter:none}
#bag-inspection .bag-heading{gap:12px}
#bag-inspection #charm-bag-panel:has(#charms > :only-child){width:min(380px,100%)}
#bag-inspection #charm-bag-panel:has(#charms > :nth-child(2):last-child){width:min(620px,100%)}
#bag-inspection .bag-heading strong{font-size:22px}
#bag-inspection #close-bag{margin-left:auto;min-width:36px;min-height:36px;justify-content:center;align-items:center}
#bag-inspection #close-bag svg{width:22px;height:22px}
#bag-inspection #charm-count,#bag-inspection #run-hat{display:none}
#bag-inspection .inspection-note{font-size:12px;line-height:1.5;color:#c5cbaa;margin:6px 0 20px}
#bag-inspection #charms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px;align-items:start}
#bag-inspection .inspection-bag{min-width:0;text-align:center;padding:16px 4px;border:3px solid transparent;border-image:var(--moss-frame) 18 fill / 10px / 2px stretch}
#bag-inspection .inspection-bag h3{font-size:16px;line-height:1.3;font-weight:400;color:#f1dfb2;margin:0;overflow-wrap:anywhere}
#bag-inspection .inspection-bag p{font-size:12px;line-height:1.4;color:#c6cdab;margin:6px 0}
#bag-inspection .compact-sack{--charm-cell:38px;max-width:100%;margin:4px auto 0}
#bag-inspection .packed-charm{cursor:help;min-width:0;min-height:0}
@media(max-width:480px){#bag-inspection #charm-bag-panel{padding:12px;max-height:calc(100dvh - 20px)}#bag-inspection .bag-heading strong{font-size:18px}}

/* Center the compact lobby controls; every item shares the same 38px rail. */
#game-surface.lobby-active > .map-hud > #lobby-controls{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px;width:max-content;max-width:calc(100vw - 32px);padding:10px 16px;box-sizing:border-box;margin:0;border-radius:10px;background:#17271ed9;color:#f0dfb4;font:12px/1.6 var(--font-ui);text-shadow:0 2px 3px #07130d;pointer-events:none;animation:lobby-controls-flash 2.4s ease-in-out infinite}
#game-surface.lobby-active > .map-hud > #lobby-controls[hidden]{display:none}
#lobby-controls span{white-space:nowrap}
#lobby-controls span + span::before{content:"•";margin-right:20px;color:#c6cdab}
#lobby-controls kbd{font:inherit;color:#fff0b8;background:none;border:0;padding:0}
@keyframes lobby-controls-flash{0%,100%{opacity:.5}50%{opacity:1}}
@media(max-width:600px){#lobby-controls{font-size:10px;gap:6px 14px;padding:8px 12px}}
@media(prefers-reduced-motion:reduce){#lobby-controls{animation:none}}
#game-surface.lobby-active > .map-hud{justify-content:center;gap:4px}
#game-surface.lobby-active > .map-hud .hud-resources{order:3}
#game-surface.lobby-active > .map-hud > #journey-label,
#game-surface.lobby-active > .map-hud > #lobby-inventory,
#game-surface.lobby-active > .map-hud > #lobby-room,
#game-surface.lobby-active > .map-hud > #lobby-party{display:flex;pointer-events:auto}
#game-surface > .map-hud > #journey-label{order:0;position:static;transform:none;align-items:center;height:38px;min-height:38px;box-sizing:border-box;margin:0;padding:6px 12px;border:3px solid transparent;border-image:var(--moss-frame) 18 fill / 10px / 2px stretch;border-radius:0;background:none;color:#ffe3a3;font:400 12px/1 var(--font-ui);white-space:nowrap}
#game-surface > .map-hud > #lobby-room{order:1;position:static;transform:none;display:flex;align-items:stretch;width:auto;height:38px;min-width:0;min-height:38px;box-sizing:border-box;margin:0;padding:0;border:0;border-image:none;background:none;filter:none;box-shadow:none;backdrop-filter:none;pointer-events:auto}
#game-surface > .map-hud > #lobby-room #lobby-code{position:static;display:grid;place-items:center;width:auto;height:38px;min-width:104px;min-height:38px;box-sizing:border-box;margin:0;padding:6px 12px;border:3px solid transparent;border-image:var(--moss-frame) 18 fill / 10px / 2px stretch;border-radius:0;background:none;box-shadow:none;filter:none;color:#f2e6c0;font:400 12px/1 var(--font-ui);letter-spacing:1px;font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;pointer-events:auto}
#game-surface > .map-hud > #lobby-room #lobby-code:hover,#game-surface > .map-hud > #lobby-room #lobby-code:focus-visible{color:#fff4c9;filter:brightness(1.2);translate:none}
#game-surface > .map-hud > #lobby-room #lobby-code.copied{color:#c7df9c}
#game-surface > .map-hud > #lobby-party{order:2;position:relative;right:auto;bottom:auto;min-width:0;max-height:none;overflow:visible;padding:0;border:0;border-image:none;background:none;box-shadow:none;flex:none}
#lobby-party summary{display:grid;place-items:center;width:52px;height:38px;min-width:52px;min-height:38px;box-sizing:border-box;padding:6px;border:3px solid transparent;border-image:var(--moss-frame) 18 fill / 10px / 2px stretch;border-radius:0;background:none;color:#efe4c7;list-style:none}
#lobby-party summary::-webkit-details-marker{display:none}
#game-surface > .map-hud > #lobby-inventory{order:4;align-items:center;justify-content:center;flex:none;height:38px;min-height:38px;margin:0;padding:6px 10px;border:3px solid transparent;border-image:var(--moss-frame) 18 fill / 10px / 2px stretch;border-radius:0;background:none;color:#efe4c7;font:400 12px/1 var(--font-ui);pointer-events:auto}
#game-surface > .map-hud > #lobby-inventory[aria-expanded="true"]{color:#c7df9c;filter:brightness(1.2)}
#lobby-party summary svg{display:block;width:20px;height:20px}
#lobby-party #lobby-loadouts{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);width:min(330px,calc(100vw - 32px));max-height:55dvh;overflow:auto;padding:8px 14px;background:#17271ef5;border:1px solid #a4b88a;border-radius:10px;box-shadow:0 8px 24px #0007}
#lobby-party .lobby-charm-stack{flex-wrap:wrap;gap:3px}
.lobby-member-hat{display:block;margin-top:4px;color:#dfce9b}
#portal-confirm{width:min(420px,calc(100vw - 32px));padding:24px;border:1px solid #a4b88a;border-radius:12px;background:#17271e;color:#efe4c7}
#portal-confirm::backdrop{background:#07130dcc}
#portal-confirm h2{margin:0 0 14px;font-size:24px}
#portal-confirm p{line-height:1.6}
#portal-confirm > div{display:flex;justify-content:flex-end;gap:12px;margin-top:22px}
@media(max-width:500px){#lobby-party #lobby-loadouts{left:-8px;transform:none}}
@media(max-width:600px){#game-surface > .map-hud > #journey-label{max-width:145px;overflow:hidden;text-overflow:ellipsis}#game-surface > .map-hud > #lobby-room #lobby-code{min-width:86px;padding-inline:8px;font-size:11px}}

/* One lightweight screen layer covers the board, HUD, and menus without blocking input. */
#vapor-screen{position:fixed;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;z-index:10000;pointer-events:none;overflow:hidden}
#vapor-screen::backdrop{background:transparent;pointer-events:none}
#vapor-screen[hidden]{display:none}
#vapor-screen::before,#vapor-screen::after{content:"";position:absolute;inset:0;pointer-events:none;clip-path:var(--crt-texture-clip,var(--crt-world-texture-clip,none))}
#vapor-screen::before{background-image:radial-gradient(ellipse at center,transparent 70%,var(--vapor-vignette) 100%),repeating-linear-gradient(to bottom,var(--vapor-scan) 0 1.5px,transparent 1.5px 4px)}
#vapor-screen::after{background-image:var(--vapor-noise);background-repeat:repeat;background-size:128px 128px;opacity:var(--vapor-grain-opacity,0)}
/* The warped title supplies its own aperture against the black welcome backdrop. */
#vapor-screen.crt-title-bent .vapor-bezel{display:none}
.vapor-bezel{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* Keep menus inside the picture aperture when the TV border is enabled. */
#game-surface.crt-inset-active #loadout-screen.minimal-packing .loadout-inner,
#game-surface.crt-inset-active #inventory-panel{max-height:calc(100dvh - var(--crt-screen-inset,0vh) - var(--crt-screen-inset,0vh) - 16px)}
#game-surface.crt-inset-active #overlay:has(.pause-menu){padding-block:max(20px,calc(var(--crt-screen-inset,0vh) + 12px))}
/* The filter includes the original frame, buttons, icons and lettering. */
/* Newly opened surfaces wait for their filter, so no straight frame paints first. */
.crt-ui-warping :is(.welcome-inner,dialog:not(#type-system),#loadout-screen .loadout-inner,#inventory-panel,#acorn-wallet,#overlay > .overlay-inner,.loadout-warning-card,.charm-tooltip,#bag-inspection #charm-bag-panel,#game-surface > .map-hud):not(.crt-ui-bent):not(.crt-ui-bent *){opacity:0!important}
.crt-ui-bent{filter:var(--menu-glass)!important}
.crt-ui-bent button:hover:not(.crt-ui-hover){translate:0;filter:drop-shadow(0 3px 1px #0b20164d)}
.crt-ui-bent button.crt-ui-hover:not(:disabled){filter:brightness(1.13) drop-shadow(0 4px 1px #0b201660);translate:0 -1px}

/* Item destinations remain visible in the HUD, including during vendor visits. */
#game-surface > .map-hud > :is(#lobby-inventory,#lobby-stash-toggle,#lobby-map-toggle){display:flex;order:4;align-items:center;justify-content:center;flex:none;width:42px;height:38px;min-height:38px;margin:0;padding:6px;border:3px solid transparent;border-image:var(--moss-frame) 18 fill / 10px / 2px stretch;border-radius:0;background:none;color:#efe4c7;pointer-events:auto}
#game-surface > .map-hud > #lobby-stash-toggle{order:5}
#game-surface > .map-hud > :is(#lobby-inventory,#lobby-stash-toggle,#lobby-map-toggle) svg{width:24px;height:24px}
#game-surface > .map-hud > #lobby-stash-toggle[aria-expanded="true"]{color:#c7df9c;filter:brightness(1.2)}
#game-surface > .map-hud > :is(#lobby-inventory,#lobby-stash-toggle,#lobby-map-toggle)[hidden]{display:none}
body.vendor-stash-open #loadout-screen.minimal-packing .loadout-inner{left:12px;right:auto;z-index:61}
body.vendor-stash-open .fortune-dialog{visibility:hidden}

#game-surface.lobby-active > .map-hud{z-index:65}

#game-surface > .map-hud > #lobby-map-toggle{order:6}

/* ARPG creature focus sits above the forest, independent of camera zoom. */
.monster-health{position:fixed;top:max(18px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:19;width:min(300px,calc(100vw - 60px));text-align:center;pointer-events:none;filter:drop-shadow(0 3px 4px #0d161bcc)}
.monster-health[hidden]{display:none}
#monster-health-name{display:block;color:#f0dfb6;font-family:var(--font-ui);font-size:15px;font-weight:400;letter-spacing:2px;line-height:1.3;text-transform:uppercase;text-shadow:0 2px 3px #000,0 0 8px #000;margin:0 0 7px;overflow-wrap:anywhere}
.monster-health-frame{position:relative;padding:3px;background:linear-gradient(#bb9b65,#5b4831);border:1px solid #d4ba80;box-shadow:inset 0 0 0 1px #30271d}
.monster-health-track{position:relative;height:11px;overflow:hidden;background:#170e0c;box-shadow:inset 0 1px 3px #000;border:1px solid #37241a}
#monster-health-fill,#monster-health-trail{position:absolute;inset:0;transform-origin:left center}
#monster-health-fill{background:linear-gradient(#c54d38 0%,#9f241e 36%,#751511 80%,#aa3023);box-shadow:inset 0 1px #eb8b6655}
#monster-health-trail{background:#d9b778}
.monster-health-crown,.monster-health-thorn{display:none}
.monster-health-boss{width:min(430px,calc(100vw - 80px));padding-top:21px}
.monster-health-boss #monster-health-name{color:#efd394;font-size:17px;letter-spacing:3px;margin-bottom:9px}
.monster-health-boss .monster-health-track{height:15px}
.monster-health-boss .monster-health-frame{padding:4px;border-color:#d4b476}
.monster-health-boss .monster-health-crown{display:block;position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:64px;height:24px}
.monster-health-boss .monster-health-thorn{display:block;position:absolute;left:-30px;top:50%;transform:translateY(-50%);width:40px;height:44px}
.monster-health-boss .monster-health-thorn-right{left:auto;right:-30px;transform:translateY(-50%) scaleX(-1)}
#monster-health-trait{display:block;margin-top:7px;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#e8ac7e;text-shadow:0 2px 3px #000}
#monster-health-trait[hidden]{display:none}
@media(max-width:600px){.monster-health{top:max(12px,env(safe-area-inset-top));width:min(260px,calc(100vw - 50px))}.monster-health-boss{width:min(360px,calc(100vw - 80px))}#monster-health-name{font-size:12px}.monster-health-boss #monster-health-name{font-size:14px}}

/* Rescue information owns a row above the controls, inside the same dock. */
#game-surface > .map-hud:has(#rescue-panel:not([hidden])){flex-wrap:wrap;row-gap:10px}
#game-surface > .map-hud #rescue-panel{order:-1;position:relative;inset:auto;transform:none;flex:0 0 100%;width:100%;max-width:none;margin:0;padding:12px 14px;border-radius:8px;box-sizing:border-box;box-shadow:0 3px 12px #07191766;font-size:13px;line-height:1.4;pointer-events:auto}
#game-surface.lobby-active > .map-hud > #rescue-panel:not([hidden]){display:block}
.rescue-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left}
#rescue-status{min-width:0;overflow-wrap:anywhere}
#rescue-timer{flex:none;color:#f3c97f;font-variant-numeric:tabular-nums}
#rescue-controls{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:10px}
#rescue-controls button{padding:8px 12px;font-size:13px;min-height:38px}
#rescue-return{touch-action:none;user-select:none;border-color:#f3c97f}
#rescue-return.holding{background:#47624c}
#rescue-progress{display:block;width:100%;height:6px;margin:8px 0 0;border:0;border-radius:4px;overflow:hidden;accent-color:#a6e6bc;background:#28463a}
#rescue-progress::-webkit-progress-bar{background:#28463a}
#rescue-progress::-webkit-progress-value{background:#a6e6bc}
#rescue-hint{margin:6px 0 0;color:#c3d7bd;font-size:12px}
#rescue-controls[hidden],#rescue-timer[hidden],#rescue-progress[hidden],#rescue-hint[hidden]{display:none}
@media(max-width:700px){
  #game-surface > .map-hud:has(#rescue-panel:not([hidden])) #jump-button{position:relative;inset:auto;flex:none;width:48px;height:48px;min-width:48px;min-height:48px}
  #game-surface > .map-hud #rescue-panel{padding:10px;font-size:12px}
  #rescue-controls button{flex:1 1 130px;font-size:12px}
}
#game-surface:has(#rescue-panel:not([hidden])) .game-panel::after{display:none}

/* The final fall pulls the forest back and dims the battlefield beneath the result. */
#frontier-view{transform:scale(var(--defeat-zoom, 1));transform-origin:center;transition:transform .08s linear}
#game-surface.defeat-presentation::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;background:#000;opacity:var(--defeat-dark, 0)}

/* Keep scenery tied to the viewport, never to the current menu's content. */
body #welcome-screen{overflow:hidden}
body #welcome-screen .welcome-inner{
 height:100dvh;min-height:0;max-height:100dvh;
 display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;
 justify-items:center;align-content:start;
}
body #welcome-screen .welcome-menu{min-height:0;max-height:100%;align-self:start}
body #welcome-screen .welcome-party{position:absolute;inset:0;width:100%;margin:0;padding:0;display:block}
body #welcome-screen .welcome-gnomes{position:absolute;bottom:30px;width:min(33vw,58dvh,620px);max-height:none}
body #welcome-screen .welcome-gnomes-left{left:max(0px,calc((100vw - 1850px)/2));right:auto}
body #welcome-screen .welcome-gnomes-right{right:max(0px,calc((100vw - 1850px)/2));left:auto}
body #welcome-screen .welcome-audio{top:auto;right:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 54px);left:50%;transform:translateX(-50%)}
body #welcome-screen .welcome-meta{margin:0;align-self:end;padding:10px 12px 24px}
/* The file picker fits the same stage as the five title actions. */
body #welcome-screen[data-menu="slots"] #welcome-form-title{height:32px;min-height:0;margin:0 0 8px;font-size:28px;line-height:32px}
body #welcome-screen #welcome-save-slots .save-slot-list{grid-auto-rows:60px}
body #welcome-screen #welcome-save-slots .save-slot-list button{height:60px;padding:8px 14px}
body #welcome-screen #welcome-save-slots .save-preview{height:124px;min-height:0;grid-template-rows:24px 36px 14px;gap:4px;margin:10px 0;padding:12px 18px}
body #welcome-screen #welcome-save-slots .save-preview strong{font-size:23px;line-height:24px}
body #welcome-screen #welcome-save-slots .save-preview p{font-size:10px;line-height:18px}
body #welcome-screen #welcome-save-slots .save-preview small{font-size:9px;line-height:14px}
body #welcome-screen #save-slot-go{height:42px;min-height:0;margin-bottom:6px;padding:8px 18px}
body #welcome-screen #save-slot-delete{height:28px;min-height:0;margin-bottom:4px;padding:3px 8px}
body #welcome-screen #online-status{min-height:24px;margin:6px 0 0;font-size:10px;line-height:16px}
@media(max-aspect-ratio:6/5){
 body #welcome-screen .welcome-gnomes{width:50%;max-height:30dvh;object-position:center bottom}
}
@media(max-height:700px){
 body #welcome-screen .welcome-title-art{width:min(64vw,650px,42dvh);margin-bottom:6px}
 body #welcome-screen .welcome-intro{margin-bottom:8px}
 body #welcome-screen #welcome-options{gap:6px}
 body #welcome-screen #welcome-options button{height:46px;min-height:0;padding:7px 22px;--woodland-action-size:23px}
 body #welcome-screen .welcome-meta{padding:6px 12px 18px;font-size:8px}
}
@media(max-height:500px){
 body #welcome-screen .welcome-title-art{width:min(52vw,34dvh)}
 body #welcome-screen .welcome-intro{display:none}
 body #welcome-screen .welcome-menu{overflow-y:auto;overflow-x:hidden;padding:4px 10px;scrollbar-width:thin}
}