/* Hand-cut painted frames. Nine-slice SVG borders keep the chips at a
   consistent scale while each panel grows around live, readable text. */
:root{
  --moss-frame:url("assets/ui/moss-frame.svg");
  --bark-frame:url("assets/ui/bark-frame.svg");
  --honey-frame:url("assets/ui/honey-frame.svg");
}

/* Leave carved charms and the actual inventory pockets as physical objects. */
button:not(.tray-charm,.packed-charm,.pack-cell,.stash-cell,.tower-orbit),
.hud-pill,.hud-phase,.run-clock,.wave-forecast,.tower-card,
.charm-bag-panel,.charm-tooltip{
  border:3px solid transparent;
  border-image:var(--moss-frame) 18 fill / 12px / 2px stretch;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  filter:drop-shadow(0 3px 1px #0b20164d);
}
button:not(.tray-charm,.packed-charm,.pack-cell,.stash-cell,.tower-orbit){
  color:#f1e5be;
  text-shadow:0 2px #16281d;
  transition:filter .12s ease,translate .12s ease;
}
button:not(.tray-charm,.packed-charm,.pack-cell,.stash-cell,.tower-orbit):hover:not(:disabled){
  background:none;
  border-color:transparent;
  filter:brightness(1.13) drop-shadow(0 4px 1px #0b201660);
  translate:0 -1px;
}
button:not(.tray-charm,.packed-charm,.pack-cell,.stash-cell,.tower-orbit):active:not(:disabled){
  translate:0 2px;
  filter:brightness(.94) drop-shadow(0 1px 0 #0b20164d);
}
button.primary,.tower-card .primary,.minimal-packing .loadout-footer .primary{
  border-image-source:var(--honey-frame);
  color:#293524;
  text-shadow:0 1px #f9e6b188;
  padding:12px 18px 14px;
}
button:disabled{opacity:.48;filter:saturate(.55)}
button:focus-visible{outline:3px solid #efd592;outline-offset:4px}

.hud-pill,.hud-phase,.run-clock,.wave-forecast,
.map-hud .wave-buttons button,.bag-toggle{
  border-image:var(--moss-frame) 18 fill / 10px / 2px stretch;
  background:none;
  border-radius:0;
  box-shadow:none;
}
#token-hud{border:3px solid transparent;border-image:var(--moss-frame) 18 fill / 10px / 2px stretch}
#emerald-hud{border:3px solid transparent;border-image:var(--moss-frame) 18 fill / 10px / 2px stretch;color:#a8efb7}
.hud-pill,.hud-phase,.run-clock{padding-top:10px;padding-bottom:12px}
.hud-pill b,.run-clock,.wave-forecast strong{color:#f2e8c9;text-shadow:0 2px #16281d}
.hud-pill em,.wave-forecast .tiny{color:#c5ceb0}
.gold-shortage{animation:gold-shortage-bounce .38s ease-in-out}
.tower-card #build-active[aria-disabled="true"]{cursor:not-allowed;opacity:.4}
@keyframes gold-shortage-bounce{0%,100%{translate:0 0}25%{translate:-6px 0}50%{translate:6px 0}75%{translate:-3px 0}}
.run-clock.urgent{border-image-source:var(--honey-frame);color:#303821}
.run-clock.urgent{text-shadow:0 1px #f9e6b188}
.map-hud .wave-buttons .quiet{background:none}
.countdown-track{height:7px;border-radius:1px;background:#12261c;box-shadow:0 1px #87916266}
#countdown-fill{border-radius:0;background:#c5d790;box-shadow:inset 0 2px #f1e4b577}
.run-clock.urgent #countdown-fill{background:#b7833d}

.tower-card,.charm-bag-panel,.charm-tooltip{
  border:6px solid transparent;
  border-image:var(--bark-frame) 18 fill / 17px / 2px stretch;
  padding:17px 17px 16px;
  outline:none;
  box-shadow:none;
  scrollbar-color:#9e9569 #26392a;
}
.tower-card.above{box-shadow:none}
.card-heading strong,.bag-heading strong{color:#ead39a}
.tower-card #selection-text{color:#e0e2c7}
.tower-card #tower-stats,.tower-card #ring-help{color:#c5d3b0}
.tower-card .tower-actions{gap:9px}
.tower-card .tower-actions button{padding:9px 11px}
.charm-tooltip strong{color:#efd59a}
.charm-tooltip[data-rarity="magical"] strong{color:#91aaf0}
.charm-tooltip[data-rarity="rare"] strong{color:#e8d85b}
.charm-tooltip[data-rarity="set"] strong{color:#55cc55}
.charm-tooltip[data-rarity="unique"] strong{color:#b49a69}
.charm-tooltip .item-rule{height:2px;background:linear-gradient(90deg,transparent,#a0905d 20%,#786e47 75%,transparent);rotate:-.5deg}
.charm-tooltip .item-power{color:#91aaf0}
.charm-tooltip .item-roll{color:#d4dfc6;font-size:9px;letter-spacing:.04em;margin:8px 0}
.charm-tooltip[data-rarity="magical"] .item-roll{color:#b1c3fa}
.charm-tooltip[data-rarity="rare"] .item-roll{color:#f0dd84}
.charm-tooltip .item-type,.charm-tooltip .item-lore,.charm-tooltip small{color:#cad0b9}
.bag-toggle{padding:10px 14px 12px}
.bag-toggle b{background:none;border-radius:0;color:#ead59c}
.bag-close,.dev-header button{min-width:32px;min-height:32px;justify-content:center;align-items:center}

/* Chunky carved tokens preserve the circular menu's existing motion. */
.tower-orbit,.tower-orbit:hover{
  border:0;border-radius:0;
  background: url("assets/ui/tower-token.svg") center / 100% 100% no-repeat;
  box-shadow:none;
  padding:9px;
  filter:drop-shadow(0 3px 1px #10291d66);
}
.tower-orbit.active,.tower-orbit.active:hover{
  border:0;background:transparent url("assets/ui/tower-token-active.svg") center / 100% 100% no-repeat;
  box-shadow:none;
  filter:drop-shadow(0 3px 1px #10291d88) drop-shadow(0 0 4px #e3cf8966);
}
.tower-orbit:hover{filter:brightness(1.15) drop-shadow(0 3px 1px #10291d66)}
.tower-orbit:focus-visible{outline-offset:2px}

/* Softer full-map veils, with painted plaques for pause and result moments. */
.overlay{background:#142a20c9;backdrop-filter:blur(2px)}
.minimal-packing{background:#142a20c9;backdrop-filter:blur(2px)}
.overlay-inner.event-moment,.overlay-inner.nature-moment{
  border:10px solid transparent;
  border-image:var(--bark-frame) 18 fill / 25px / 3px stretch;
  padding:28px 30px 32px;
  filter:drop-shadow(0 8px 3px #091b2055);
}
.overlay-inner p{color:#d2d9bf}
.minimal-packing #packing-actions{gap:8px}
.minimal-packing #packing-actions button{width:38px;height:36px;padding:7px}

.dev-drawer{
  border:0;border-left:9px solid transparent;
  border-image:var(--bark-frame) 18 fill / 0 0 0 17px / 0 stretch;
  background:none;box-shadow:-8px 0 20px #091b2055;
}
.dev-header{background:#273b2d;border-bottom:3px solid #68704a}
.dev-controls,.dev-drawer .lab-section{border-bottom:2px solid #65704b66}
.dev-drawer input[type=text],.dev-drawer select{
  border:3px solid #75805b;border-radius:4px 2px 6px 3px;
  background:#182c22;box-shadow:inset 0 3px #0e211955;color:#e8e3c7;
}
.dev-drawer kbd{border:2px solid #7d8960;border-radius:3px 1px 4px 2px;background:#3d5036;box-shadow:0 2px #13261c}
@media(max-width:700px){
  .hud-pill,.hud-phase,.run-clock{padding-top:7px;padding-bottom:9px}
  .map-hud .wave-buttons button{padding:7px 8px 9px}
  .tower-card{padding:13px 12px}
  .tower-orbit{padding:7px}
  .overlay-inner.event-moment,.overlay-inner.nature-moment{padding:15px 17px 18px}
}
@media(prefers-reduced-motion:reduce){button:not(.tower-orbit){transition:none;translate:none!important}}

/* Compact type and cards: keep the painted edge, reduce the information footprint. */
.charm-tooltip{width:220px}
.tower-card,.charm-bag-panel,.charm-tooltip{padding:10px 11px;border-width:4px;border-image-width:12px}
.charm-tooltip p{margin:4px 0}.charm-tooltip .item-type{margin:3px 0 5px}.charm-tooltip .item-rule{margin:0 12px 6px}.charm-tooltip .item-lore,.charm-tooltip small{margin-top:5px}
.tower-card #tower-stats{margin:4px 0}.tower-card #selection-text{margin:4px 0 6px}.tower-card #ring-help{margin-top:5px}
button.primary,.tower-card .primary,.minimal-packing .loadout-footer .primary{padding:8px 11px 9px;min-width:0}
.tower-card .tower-actions{gap:5px}.tower-card .tower-actions button{padding:6px 8px}
.hud-pill,.hud-phase,.run-clock,.map-hud .wave-buttons button{min-height:30px;padding:6px 8px 7px}
.hud-phase,.hud-actions .hud-phase{width:32px;min-height:30px;padding:6px}
.map-hud svg{width:18px;height:18px}.hud-pill,.hud-resources{gap:5px}
#token-hud{padding:6px 8px 7px;gap:5px}.run-clock.counting{min-width:100px}
#emerald-hud{padding:6px 8px 7px;gap:5px;opacity:1;visibility:visible}
#emerald-stash{margin:0}
#emerald-stash [data-emerald-stacks]{display:flex;flex-wrap:wrap;gap:6px}
#emerald-stash [data-emerald-stack],#emerald-stash .emerald-empty{position:relative;display:grid;place-items:center;flex:none;padding:2px;border:1px solid #abb28a22;border-radius:0;border-image:none;background:transparent;box-shadow:none;filter:none;cursor:grab}
#emerald-stash [data-emerald-stack]:hover,#emerald-stash [data-emerald-stack]:focus-visible,#emerald-stash .emerald-empty:hover{background:#e2cc8520;outline:1px solid #d5c48a;outline-offset:-2px}
#emerald-stash [data-emerald-stack] svg{width:43px;height:43px;pointer-events:none}
#emerald-stash [data-emerald-stack] b{position:absolute;bottom:3px;right:4px;font-size:14px;line-height:1;color:#eee6cb;text-shadow:1px 1px #000;pointer-events:none}
#emerald-stash .emerald-empty{color:#38513c;cursor:default}
.wave-forecast{padding:6px 8px}.countdown-track{height:4px}
.bag-toggle{padding:7px 9px 8px}.bag-toggle>svg{width:25px;height:25px}
.overlay-inner.event-moment,.overlay-inner.nature-moment{max-width:400px;padding:18px 22px;border-image-width:20px}
.minimal-packing header{margin-bottom:12px}.minimal-packing .loadout-footer{margin-top:38px}

/* Choice tokens follow the map scale, independently of compact label sizes. */
#board{aspect-ratio:8 / 5}
.tower-orbit,.tower-orbit.active,.tower-orbit:hover,.tower-orbit.active:hover{
  width:var(--tower-choice-size,56px);height:var(--tower-choice-size,56px);
  padding:clamp(5px,.5cqw,9px);border:0;border-image:none;
  background-size:100% 100%;background-position:center;background-repeat:no-repeat;
  transition:transform .23s ease,filter .15s ease;
}
@media(prefers-reduced-motion:reduce){.tower-orbit{transition:none}}

.sound-settings #sound-preview{margin-top:12px;padding:8px 12px}.sound-settings .checkbox{margin-top:0}

/* A compact room slip in the stash; setup controls stay in the + drawer. */
.online-room {display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 auto 12px;padding:8px 12px;background:#293d32;color:#e6d9ae;max-width:540px;border:2px solid #827d57;}
.online-room[hidden]{display:none}.online-room small{font-size:10px}.online-room strong{font-size:12px;letter-spacing:1px}.online-room button{font-size:11px;padding:7px 10px}.online-settings p{font-size:11px;line-height:1.4}.online-settings button{margin:5px 0}.online-settings input{text-transform:uppercase}

.online-notice{position:absolute;top:95px;left:12px;max-width:300px;padding:8px 12px;background:#304432;color:#ecd69e;font-size:11px;border:2px solid #9a8759}.online-notice[hidden]{display:none}

/* A carved axe token floats above the keeper while lining up a tree fall. */
#timber-prompt{position:absolute;left:0;top:0;min-width:0;padding:0;border:0;border-image:none;border-radius:50%;background:none;box-shadow:none;clip-path:none;pointer-events:auto;transform:translate(-50%,-50%);animation:timber-bob 1.05s ease-in-out infinite;filter:drop-shadow(0 3px 2px #10291b44);}
#timber-prompt[hidden]{display:none}
#timber-prompt svg{display:block;width:100%;height:100%;pointer-events:none}
#timber-prompt:hover{background:none;filter:brightness(1.1) drop-shadow(0 3px 2px #10291b44)}
#timber-prompt:focus-visible{outline:2px solid #f6e9bd;outline-offset:3px}
#timber-prompt:disabled{opacity:.5;cursor:not-allowed}
@keyframes timber-bob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 7px))}}
@media(prefers-reduced-motion:reduce){#timber-prompt{animation:none}}

/* The front door: a storybook title and one clear route into the stash. */
.welcome-screen{z-index:35;overflow:auto;padding:26px 20px;background:radial-gradient(ellipse at 50% 35%,#4e674178,#172d25ed 78%);backdrop-filter:blur(4px);text-align:center}
.welcome-active .map-hud{visibility:hidden}
.welcome-inner{width:min(100%,440px);margin:auto;padding:18px 24px 22px;box-sizing:border-box;color:#f0e5b9}
.welcome-screen .welcome-tagline{font-size:12px;color:#c8d5b1;margin:0 0 24px}
.welcome-options,.welcome-join,.welcome-host{display:flex;gap:12px;justify-content:center;margin:12px auto;max-width:360px}.welcome-options button{flex:1;font-size:13px;padding:13px 10px}.welcome-options button[aria-pressed=true]{color:#f2df9c;filter:brightness(1.12)}
.welcome-join input{min-width:0;flex:1;width:160px;background:#1e362bea;color:#efe1b0;border:1px solid #9a9f7066;border-radius:4px;padding:12px;text-align:center;font-family:var(--font-ui);font-size:12px;text-transform:uppercase;letter-spacing:2px}.welcome-join button{font-size:12px;padding:10px 14px}
.welcome-screen .welcome-status{font-size:10px;min-height:18px;margin:14px 0;color:#c8d5b1}.welcome-screen .welcome-footnote{font-size:10px;margin:14px 0 0;color:#aaba97}
#welcome-start{width:260px;max-width:100%;font-size:22px;padding:16px 24px;margin:0}
.welcome-room{padding:12px 0}.welcome-room>small{display:block;font-size:10px;color:#c8d5b1}.welcome-room>strong{display:block;font-weight:400;font-size:28px;letter-spacing:4px;margin-top:8px}.welcome-room p{font-size:11px}.welcome-room button{font-size:10px;padding:7px 12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.minimal-packing header{display:block;position:relative;text-align:center;margin-bottom:28px}
.minimal-packing header h2{font-family:var(--font-nature);font-size:clamp(38px,4.8vw,62px);line-height:1.1;margin:0 0 8px}
.minimal-packing header p{font-size:11px;color:#c4cfab;margin:0}
.minimal-packing .stash-back{position:absolute;left:0;top:8px;font-size:10px;padding:7px 12px}
.minimal-packing .loadout-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;margin-top:42px}
.minimal-packing #pack-status{max-width:100%;text-align:center;font-size:10px}
.minimal-packing .loadout-footer .primary{width:280px;max-width:100%;min-height:58px;font-size:22px;padding:15px 22px;margin:0}
@media(max-height:680px){.welcome-screen{padding:16px}.welcome-inner{padding:14px 18px 18px}.welcome-screen .welcome-tagline{margin-bottom:14px}.welcome-options,.welcome-join{margin:8px auto}.minimal-packing header h2{font-size:40px}.minimal-packing header{margin-bottom:20px}}
@media(max-width:560px){.minimal-packing .stash-back{position:static;margin-bottom:10px}.minimal-packing header h2{font-size:38px}.minimal-packing .loadout-footer .primary{font-size:20px;min-height:54px}}

.minimal-packing .loadout-footer .primary.ready-update{min-height:0;width:auto;font-size:11px;padding:7px 14px}
.welcome-screen,.minimal-packing{max-height:100dvh;overflow-y:auto;box-sizing:border-box}
@media(max-height:800px){.minimal-packing{padding:16px}.minimal-packing header{margin-bottom:18px}.minimal-packing header h2{font-size:44px}.minimal-packing .loadout-footer{margin-top:24px;gap:10px}}

/* A single compact tower readout at the top of the forest. */
.tower-card.tower-strip{display:flex;align-items:center;gap:12px;height:37px;min-height:37px;padding:6px 8px 7px;border-width:3px;border-image-width:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;box-shadow:0 3px 6px #10241733;backdrop-filter:blur(5px)}
.tower-card.tower-strip::-webkit-scrollbar{display:none}
.tower-strip .card-heading{display:flex;align-items:center;gap:10px;margin:0;flex:none;white-space:nowrap}
.tower-strip .card-heading strong{font-size:10px;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.tower-card.tower-strip #tower-stats{display:flex;flex:1 0 auto;align-items:center;justify-content:space-between;gap:10px;margin:0;font-size:10px;height:18px;white-space:nowrap}
.tower-stat{display:flex;align-items:center;gap:4px;flex:none;white-space:nowrap}
.tower-stat>span{font-variant-numeric:tabular-nums}
.tower-strip svg{display:block;width:16px;height:16px;flex:none;color:#d7d5aa}
.tower-strip #tower-cost svg{color:#ecc679}.tower-strip #tower-cost{font-size:10px;min-width:0}
.tower-strip #selection-text,.tower-strip #ring-help,.tower-strip #xp-wrap,
.tower-card.tower-strip .primary,.tower-card.tower-strip .tower-actions{display:none}

.room-code-line{display:flex;align-items:center;justify-content:center;gap:10px}.room-code-line strong{user-select:all}
.welcome-room .room-code-line strong{font-size:28px;letter-spacing:4px;font-weight:400}
button.copy-code{display:inline-flex;align-items:center;justify-content:center;padding:7px;min-width:32px;min-height:32px;color:#dfdfb5}
.copy-code svg{width:17px;height:17px;display:block}.copy-code.copied{color:#a9df98;filter:brightness(1.2)}
#room-copy-status{font-size:10px;min-height:12px;color:#c4d69f}.welcome-join input{font-variant-numeric:tabular-nums}
@container(max-width:800px){.tower-card.tower-strip{gap:8px}.tower-card.tower-strip #tower-stats{font-size:9px;gap:8px}.tower-strip svg{width:15px;height:15px}.tower-strip .card-heading{gap:8px}.tower-strip .card-heading strong{font-size:9px;max-width:100px}}
@container(max-width:600px){.tower-strip .card-heading strong{max-width:86px}.tower-card.tower-strip #tower-stats{justify-content:flex-start}}

/* Soft flax cords run through combo charms' real holes, above the carvings. */
.charm-threads{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.charm-threads path{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.charm-threads .cord-shadow{stroke:#403829;stroke-width:4.2;opacity:.85}
.charm-threads .cord-body{stroke:#c9ac75;stroke-width:2.6}
.charm-threads .cord-fiber{stroke:#f0d6a0;stroke-width:.8;stroke-dasharray:2 2.8;opacity:.85}

/* A twelve-cell hat stash and one socket. Details live in the same tooltip treatment as charms. */
.hat-equipment{display:grid;grid-template-columns:calc(var(--charm-cell)*6) calc(var(--charm-cell)*4 + 64px);gap:32px;margin-top:38px;text-align:center;align-items:center}
.hat-inventory{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(3,1fr);gap:3px;width:calc(var(--charm-cell)*6)}
.hat-equipment .hat-choice,.hat-inventory .hat-empty{aspect-ratio:1;min-width:0;min-height:0;border:1px solid #bdad7755;border-radius:4px;border-image:none;background:#e1cf8510;box-shadow:none;filter:none}
.hat-equipment .hat-choice{padding:2px;touch-action:none;text-shadow:none}
.hat-inventory .hat-empty{display:block;border-style:dashed;opacity:.55}
.hat-choice svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 2px #071d1555)}
.hat-equipment .hat-choice[aria-pressed=true]{border-color:#e4cb8d;background:#e4cb8d14}
.hat-choice.equipped svg{opacity:.3}
.hat-socket{position:relative;justify-self:center}
.hat-equipment .hat-slot{width:clamp(44px,9dvh,76px);height:clamp(44px,9dvh,76px);padding:4px;color:#a5b28c;border-image:var(--bark-frame) 18 fill / 12px / 2px stretch;touch-action:none}
.hat-slot svg{width:100%;height:100%}.hat-slot.hat-slot-ready{outline:2px dashed #e4cb8d;outline-offset:4px}
#hat-drag-preview{position:fixed;z-index:125;pointer-events:none;width:72px;height:80px;filter:drop-shadow(0 7px 4px #071d1599)}
#hat-drag-preview svg{width:100%;height:100%}
.run-hat{display:flex;align-items:center;gap:12px;border-top:1px solid #c8cc933b;margin-top:12px;padding-top:10px;font:400 10px/1.4 var(--font-ui);color:#ded9b9}
.run-hat svg{width:54px;height:54px;flex:none}.run-hat small{display:block;font-size:9px;color:#c6cdb3;margin-top:4px}
/* The whole stash fits the viewport; scale the objects, never crop the controls. */
body:has(#loadout-screen:not(.lobby-stash):not([hidden])){overflow:hidden}
.minimal-packing{position:fixed;inset:0;height:100dvh;max-height:none;overflow:hidden;padding:clamp(8px,2dvh,20px);--charm-cell:clamp(16px,min(4vw,4.5dvh),38px)}
.minimal-packing .loadout-inner{margin:auto;width:calc(var(--charm-cell)*10 + 96px);max-height:none;flex:none}
.minimal-packing header{margin-bottom:clamp(10px,2.5dvh,24px)}
.minimal-packing header h2{font-size:clamp(28px,6dvh,54px);margin:0;line-height:1.1}
.minimal-packing #pack-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.minimal-packing .loadout-footer{margin-top:clamp(12px,2.5dvh,24px);gap:8px;flex-direction:row;flex-wrap:nowrap}
.minimal-packing .loadout-footer .primary{width:auto;min-width:140px;min-height:40px;font-size:16px;padding:10px 24px}
.minimal-packing .loadout-footer .primary.ready-update{min-width:0;font-size:10px;padding:8px 12px}
.minimal-packing #online-room{margin:0 0 10px;padding:0;font-size:10px}
.minimal-packing #online-room .room-code-line{font-size:12px}
.minimal-packing #online-roster{font-size:9px}
.minimal-packing #room-copy-status:empty{display:none}
@container(max-width:680px){.hat-equipment{gap:18px}.minimal-packing .loadout-inner{width:calc(var(--charm-cell)*10 + 82px)}}
@media(max-height:560px){.minimal-packing .charm-sack{padding-top:48px;padding-bottom:16px}.hat-equipment{margin-top:28px}.minimal-packing #packing-actions{bottom:-29px}.minimal-packing #packing-actions button{width:25px;height:25px}.minimal-packing .sack-caption{margin-top:4px}.minimal-packing .loadout-footer .primary{min-height:34px;padding:7px 20px;font-size:14px}}

/* Decorative faces need room to breathe; small information stays in Warbler. */
.charm-tooltip strong,.bag-heading strong,.sack-caption>span:first-child{font-family:var(--font-ui);font-size:14px;line-height:1.35}
.charm-tooltip{width:280px}
.charm-tooltip p,.charm-tooltip .item-type,.charm-tooltip .item-lore,.charm-tooltip small{font-size:12px;line-height:1.45}
.charm-tooltip strong{text-transform:uppercase;letter-spacing:.08em}
.charm-tooltip .item-type{color:#c9c9c6;letter-spacing:.035em}
.charm-tooltip .item-affixes{margin:8px 0}
.charm-tooltip .item-affix{color:#898ce2;font-size:12px;line-height:1.4;margin:3px 0;text-transform:uppercase;letter-spacing:.035em}
.charm-tooltip .item-affix-set,.charm-tooltip .item-bonus{color:#5bcf58}
.charm-tooltip .item-affix-set.is-inactive,.charm-tooltip .item-condition{color:#7d827e}
.charm-tooltip .item-bonus,.charm-tooltip .item-condition{font-size:11px;line-height:1.4;margin:5px 0}
.charm-tooltip .item-lore{color:#aeb4a7}
.charm-tooltip small{color:#bfc4b7}
.minimal-packing .sack-caption,.minimal-packing .sack-caption #loadout-count{font-size:12px}
.minimal-packing .stash-back{font-size:12px}
.minimal-packing header p{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal;margin:6px 0 0;font:400 13px/1.4 var(--font-ui);color:#d2dbbc}
#welcome-start,.minimal-packing .loadout-footer .primary,.overlay-inner .primary{font-family:var(--font-event);font-size:30px;line-height:1.1;padding:10px 24px}
.welcome-options button,.welcome-join button{font-family:var(--font-nature);font-size:28px;line-height:1.15}
.welcome-screen .welcome-status,.welcome-room>small,.welcome-room button{font-size:12px}
.minimal-packing .loadout-footer .primary.ready-update{font-family:var(--font-ui);font-size:12px}
.event-moment h2,.nature-moment h2{font-size:34px}
.overlay-inner p{font-size:13px}
/* Stash carvings use the same pocket scale and footprint as the carried bag. */
.minimal-packing .charm-tray{grid-template-columns:repeat(6,var(--charm-cell));grid-template-rows:none;grid-auto-rows:var(--charm-cell);grid-auto-flow:row dense;gap:0;padding:0;border:0;border-radius:3px;outline:1px solid #abb28a40;background-color:#182e2344;background-image:linear-gradient(to right,#abb28a18 1px,transparent 1px),linear-gradient(to bottom,#abb28a18 1px,transparent 1px);background-size:var(--charm-cell) var(--charm-cell)}
.minimal-packing .tray-charm{grid-column:span var(--cw);grid-row:span var(--ch);display:block;width:100%;height:100%;padding:0;border:0;background:transparent;border-radius:2px;overflow:visible}
.minimal-packing .tray-art,.minimal-packing .tray-art svg{display:block;width:100%;height:100%;max-width:none;max-height:none}
@media(max-height:560px){.minimal-packing header{margin-bottom:10px}.minimal-packing header p{font-size:12px;margin-top:3px}.minimal-packing .loadout-footer .primary{font-size:26px;padding:6px 18px}.minimal-packing .sack-caption,.minimal-packing .sack-caption>span:first-child,.minimal-packing .sack-caption #loadout-count{font-size:11px}.hat-equipment{margin-top:24px}}

@media(max-height:560px){.minimal-packing .stash-back{top:-4px;font-size:11px;min-height:0;padding:4px 6px}}

/* Room details live outside the centered packing layout. */
.minimal-packing #online-room{position:absolute;right:clamp(10px,2vw,24px);bottom:clamp(10px,2vh,24px);width:clamp(150px,25vw,220px);max-width:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin:0;padding:10px 12px;background:#172d25cc;border:0;border-radius:4px;text-align:right}
.minimal-packing #online-room .room-code-line{justify-content:flex-end;gap:6px}
.minimal-packing #online-room strong{font-size:12px;letter-spacing:0}
.minimal-packing #online-room .copy-code{flex:none}
.minimal-packing #online-roster{font-size:11px;line-height:1.5;color:#c4cfb1}
.minimal-packing #online-room #online-start{font:400 12px/1.3 var(--font-ui);width:auto;min-width:0;min-height:32px;padding:7px 10px;margin:2px 0 0}

.minimal-packing .loadout-footer{min-height:54px}

/* A compact wordmark and one menu decision at a time. */
.welcome-screen .welcome-tagline{margin-bottom:18px}
.welcome-options{max-width:400px}
#welcome-start{margin-top:10px}
.welcome-join{flex-direction:column;align-items:center;gap:14px;max-width:280px;margin:16px auto 0}
.welcome-join input{flex:none;width:100%;min-height:52px;font-size:16px;letter-spacing:3px}
.welcome-join #online-join{font-family:var(--font-event);font-size:30px;width:180px;min-height:48px}
.welcome-join .welcome-menu-back{align-self:flex-start;font-family:var(--font-ui);font-size:12px;padding:6px 10px}

/* One fixed price medallion crowns the active, northern tower slot. */
.tower-price{position:absolute;display:grid;place-items:center;width:30px;height:30px;transform:translate(-50%,-50%);border:2px solid #c8ad70;border-radius:50%;background:#304535;color:#f5dda0;font:700 12px/1 'WS WARBLER';box-shadow:0 2px 0 #192d22,0 3px 5px #13281d55;pointer-events:none;z-index:3;}
.tower-price[hidden]{display:none}.tower-price.unaffordable{color:#cb9b7a;border-color:#9a825e;}
.tower-orbit>svg{width:100%;height:100%;display:block;}

/* A light pack is a choice, confirmed before solo departure or co-op Ready. */
.loadout-warning{position:fixed;inset:0;z-index:190;display:flex;align-items:center;justify-content:center;padding:20px;background:#0b1c16b8;backdrop-filter:blur(3px)}
.loadout-warning-card{width:min(420px,100%);padding:26px 24px;text-align:center;color:#eee2b9;border:6px solid transparent;border-image:var(--bark-frame) 18 fill / 18px / 2px stretch}
.loadout-warning-card h2{font:400 36px/1.1 var(--font-nature);margin:0 0 14px}
.loadout-warning-card p{font:400 13px/1.6 var(--font-ui);margin:0 0 20px}
.loadout-warning-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.loadout-warning-actions button{font:400 12px/1.4 var(--font-ui);min-width:0;padding:10px 14px}
.boss-shrine-warning .loadout-warning-card{border-image:none;border:2px solid #73506f;border-radius:18px;background:linear-gradient(155deg,#1b1822,#2c1c29);box-shadow:0 24px 80px #09070bdd,0 0 50px #71375544;color:#eadfc5}
.boss-shrine-warning .loadout-warning-card .eyebrow{color:#d68aaa;letter-spacing:.18em;margin-bottom:8px}
.boss-shrine-warning .primary{background:#8b3f62;border-color:#d78aa9;color:#fff4e4}

/* A short, non-blocking recap during the existing wave interlude. */
.round-summary{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 28px));max-height:calc(100% - 24px);overflow:auto;box-sizing:border-box;padding:22px 26px 18px;border:8px solid transparent;border-image:var(--moss-frame) 18 fill / 18px / 3px stretch;filter:drop-shadow(0 10px 18px #0b201680);color:#eee5c5;text-align:center;pointer-events:none;animation:round-summary-in .22s ease-out}
.round-summary[hidden]{display:none}
.round-summary .eyebrow{margin:0 0 6px;color:#c7d799;font:400 10px/1.3 var(--font-ui);letter-spacing:2px}
.round-summary h2{margin:0;font:400 clamp(28px,4vw,42px)/1.05 var(--font-event);color:#f1dda5}
.round-summary-result{margin:8px 0 16px;font:400 12px/1.4 var(--font-ui);color:#d7dfc0}
.round-summary-monsters{display:grid;grid-template-columns:1fr 1fr;gap:9px 24px;margin:0;padding:12px 0;list-style:none;border-block:1px solid #c8cc9340;font:400 12px/1.4 var(--font-ui)}
.round-summary-monsters li{display:flex;justify-content:space-between;gap:8px;text-align:left}
.round-summary-monsters b{color:#efce87;font-weight:400}
.round-summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 8px;margin:18px 0}
.round-summary-stats dt{font:400 10px/1.4 var(--font-ui);color:#c7d3b3}
.round-summary-stats dd{margin:4px 0 0;font:400 23px/1 var(--font-ui);color:#f1dda5}
.round-summary-note,.round-summary>small{display:block;margin:0;font:400 9px/1.5 var(--font-ui);color:#b6c5a6}
.round-summary-timer{height:3px;margin:14px 0 7px;background:#12261c}
.round-summary-timer span{display:block;height:100%;background:#c5d790;transform-origin:left;transition:transform .12s linear}
@keyframes round-summary-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(max-width:600px){.round-summary{padding:12px 18px 10px}.round-summary-result{margin:5px 0 8px}.round-summary-monsters{gap:5px 18px;padding:8px 0}.round-summary-stats{gap:10px 6px;margin:12px 0}.round-summary-stats dd{font-size:19px}.round-summary-note{display:none}}
@media(prefers-reduced-motion:reduce){.round-summary{animation:none}.round-summary-timer span{transition:none}}
/* Packing beside the chest leaves the grove visible and clickable. */
/* Keep page scrolling unchanged: hiding its scrollbar would resize the map. */
.minimal-packing.lobby-stash{background:transparent;backdrop-filter:none;pointer-events:none;padding:0;--charm-cell:clamp(12px,min(calc((46vw - 144px)/10),5dvh),48px)}
.minimal-packing.lobby-stash .loadout-inner{position:absolute;left:25%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;width:46vw;height:88dvh;max-width:none;max-height:88dvh;pointer-events:auto;margin:0;padding:clamp(16px,2vw,28px);border:1px solid #83976a77;border-radius:18px;background:#19362bef;box-shadow:0 12px 40px #10251e66;box-sizing:border-box;overflow:auto;overscroll-behavior:contain}
.minimal-packing.lobby-stash .packing-workbench,.minimal-packing.lobby-stash .hat-equipment{flex:none;width:calc(var(--charm-cell)*10 + 96px)}
@media(max-width:700px){.minimal-packing.lobby-stash{--charm-cell:clamp(12px,min(calc((92vw - 144px)/10),4.5dvh),36px)}.minimal-packing.lobby-stash .loadout-inner{left:50%;width:92vw}.minimal-packing.lobby-stash .packing-workbench,.minimal-packing.lobby-stash .hat-equipment{gap:18px;width:calc(var(--charm-cell)*10 + 82px)}}
.minimal-packing.lobby-stash header h2{font-size:clamp(28px,4dvh,42px)}
.minimal-packing.lobby-stash .stash-back{display:grid;place-items:center;width:36px;height:36px;min-width:36px;padding:0;font-size:0}
.minimal-packing.lobby-stash .stash-back .ui-icon{width:19px;height:19px}
.minimal-packing.lobby-stash .loadout-footer{min-height:0;margin-top:10px}
.minimal-packing.lobby-stash #online-room{display:none}
/* Hat skills: colored art, a draining cooldown ring, and a pressable unavailable state. */
.jump-button{--skill-color:#e89967;--skill-progress:0;position:fixed;left:18px;bottom:18px;display:block;width:64px;height:64px;min-width:64px;box-sizing:border-box;overflow:hidden;padding:0;border:1px solid var(--skill-color);border-radius:5px;background:radial-gradient(circle at 50% 35%,#456653,#203b30 75%);box-shadow:inset 0 0 0 2px #f9e4b019,0 3px 0 #13271e,0 4px 12px #071b2444;color:#fff0cf;z-index:14;pointer-events:auto;cursor:pointer;transition:border-color .18s,background .18s}
.jump-button[hidden]{display:none}
.jump-button .skill-icon{position:absolute;inset:4px 4px 10px;display:block;opacity:1;filter:saturate(1);transition:opacity .25s,filter .25s}
.jump-button .skill-icon svg{display:block;width:100%;height:100%}
.jump-button.unavailable .skill-icon{opacity:.32;filter:saturate(.1)}
.jump-button.unavailable{border-color:#738b7e;background:#233c32}
.jump-button.passive{border-color:var(--skill-color);cursor:default!important}
.jump-button.passive .skill-icon{opacity:.85;filter:none}
.jump-button .skill-cooldown{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);fill:none;stroke-width:3;pointer-events:none;opacity:0}
.jump-button.cooling .skill-cooldown{opacity:1}
.jump-button .skill-ring-track{stroke:#e4eac21a}
.jump-button .skill-ring{stroke:var(--skill-color);stroke-dasharray:100;stroke-dashoffset:calc(100 * (1 - var(--skill-progress)));transform:rotate(-90deg);transform-origin:32px 32px;stroke-linecap:round}
.jump-button .skill-timer{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);padding:2px 4px;border-radius:3px;background:#142e24df;color:#fff1ce;font:700 14px/1.1 system-ui,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #071a13;pointer-events:none}
.jump-button .skill-timer:empty{display:none}
.jump-button:not(.cooling) .skill-timer{left:auto;right:3px;top:3px;transform:none;font-size:10px;padding:1px 3px}
.jump-button .skill-key{position:absolute;bottom:3px;left:0;width:100%;border:0;background:none;color:#f4e4c0;font:700 8px/1 system-ui,sans-serif;letter-spacing:.08em;text-align:center;pointer-events:none}
.jump-button[aria-disabled="true"]{cursor:pointer!important}
.jump-button:active{transform:translateY(2px) scale(.94)}
.jump-button:focus-visible{outline:2px solid #fff0ba;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.jump-button,.jump-button .skill-icon{transition:none}}

/* The gathering grove keeps the board playable beneath its small HUD. */
.lobby-panel{position:absolute;inset:0;z-index:12;pointer-events:none;color:#f0e6c6;font-family:var(--font-ui)}
.lobby-panel[hidden]{display:none}
.lobby-heading{position:absolute;top:5%;left:25%;width:50%;text-align:center}
.lobby-eyebrow{font-size:12px;letter-spacing:.12em;color:#b5c998}
.lobby-heading h2{font-family:"WS BROTHER WIND";font-weight:400;font-size:clamp(20px,2.8vw,36px);margin:8px 0}
.lobby-heading p{font-size:clamp(12px,1.4vw,18px);margin:0;color:#eee1b7}
.lobby-room{position:absolute;left:3%;top:5%;display:flex;flex-direction:column;align-items:flex-start;gap:7px;pointer-events:auto;font-size:14px}
.lobby-room button{font-size:12px;padding:5px 10px;background:#243c32;color:#efe3c0;border:1px solid #75816a;border-radius:20px}
.lobby-active .hud-left,.lobby-active .hud-resources{visibility:hidden}
.lobby-active .hud-resources{visibility:visible}
.lobby-active .hud-resources>:not(#emerald-hud){display:none}
@media(max-width:600px){.lobby-heading{left:28%;width:68%;top:3%}.lobby-heading h2{font-size:20px;margin:3px 0}.lobby-eyebrow{font-size:9px}.lobby-room{font-size:11px;gap:3px}.lobby-room button{font-size:10px;padding:3px 6px}}

/* Lobby and active play share the same full-width canvas layout. */

.lobby-heading{text-shadow:0 2px 5px #142a20,0 0 16px #142a20}
.lobby-room{padding:10px 12px;border-radius:16px;background:#19362bc9;backdrop-filter:blur(5px)}

.welcome-name{display:flex;flex-direction:column;gap:8px;width:min(280px,90%);margin:12px auto 20px;text-align:left;color:#e6dab7;font:400 13px/1.4 var(--font-ui)}
.welcome-name input{width:100%;box-sizing:border-box;padding:10px 14px;min-height:44px;border:1px solid #a1ad7b;border-radius:9px;background:#17352ccf;color:#f5e4bd;font:400 16px/1.4 var(--font-ui)}
.welcome-name input::placeholder{color:#adbc97}.welcome-name input:focus{outline:2px solid #efd599;outline-offset:3px}
.welcome-name[hidden]{display:none}


/* Persistent end-of-run results; scroll within small viewports. */
#overlay.final-score-overlay{position:fixed;z-index:100;padding:clamp(10px,3vh,28px);overflow:auto;align-items:flex-start;background:#10241ee8}
.overlay-inner.event-moment.final-score-card{width:100%;max-width:780px;max-height:none;margin:auto;padding:24px 30px 26px;color:#efe5c3}
.final-score-card h2{font:400 clamp(28px,4vw,42px)/1.1 var(--font-event);margin:4px 0 14px;color:#f1dda5}
.final-score-card .final-score-label{margin:0;color:#bdcda5;font-size:10px;letter-spacing:2px}
.final-score-value{display:block;margin:4px 0;font:400 clamp(44px,7vw,70px)/1.05 var(--font-event);color:#f4d489;font-variant-numeric:tabular-nums}
.final-score-card .final-score-meta{margin:10px 0 22px;color:#d0d7b8;font-size:12px}
.final-score-columns{display:grid;grid-template-columns:1fr 1fr;gap:30px;text-align:left}
.final-score-card h3{margin:0 0 12px;font:400 15px/1.4 var(--font-nature);color:#e5dbb5}
.final-score-breakdown{margin:0}
.final-score-breakdown>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-top:1px solid #c8cc932c}
.final-score-breakdown dt{font:400 11px/1.4 var(--font-ui)}
.final-score-breakdown small{display:block;font-size:9px;color:#aebb9e;margin-top:2px}
.final-score-breakdown dd{margin:0;color:#edce87;font:400 14px/1.2 var(--font-ui);white-space:nowrap}
.final-score-monsters{gap:8px 18px;font-size:11px}
.final-score-stats{grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 0}
.final-score-stats dd{font-size:21px}
.final-score-card .final-score-note{margin:20px 0 4px;color:#b6c5a6;font-size:10px}
.final-score-card .primary{min-width:190px}
@media(max-width:560px){.overlay-inner.event-moment.final-score-card{padding:16px 16px 20px}.final-score-columns{grid-template-columns:1fr;gap:20px}.final-score-stats{grid-template-columns:repeat(3,1fr)}.final-score-card .final-score-meta{font-size:10px;margin-bottom:16px}.final-score-breakdown>div{padding:6px 0}}

/* Hearth shop: every upgrade stays visible while its price gates purchase. */
/* Hearth choices share the tower tokens, orbit, and information strip. */
.hearth-owned-mark{display:none;position:absolute;right:2px;bottom:0;color:#e1f4b1;background:#294735;border:1px solid #a9c87b;border-radius:50%;width:17px;height:17px;font:12px/16px sans-serif;text-align:center}
.hearth-upgrade.owned .hearth-owned-mark{display:block}
.hearth-upgrade.locked>svg{filter:grayscale(.8);opacity:.55}
.hearth-purchase-status{color:#eed698}

/* Lobby collection and starter reveal. */
.stash-collection{min-width:0}.starter-pack{display:block;margin:0 auto 18px;padding:20px 30px;border:1px solid #d7bb77;border-radius:12px;background:linear-gradient(135deg,#394632,#202c27);color:#f5dfaa;font-size:20px;box-shadow:0 0 20px #ddbd6530}.starter-pack small{display:block;font-size:12px;margin-top:8px}#pack-reveal{text-align:center;min-height:40px;color:#f5dfaa}#pack-reveal svg{width:90px;height:90px;animation:pack-arrive .4s ease-out}.new-charm{position:relative;animation:new-charm-shine 1.35s ease-in-out infinite alternate}.lobby-party{pointer-events:auto;max-width:290px;background:#17271ee8;border-radius:10px;padding:10px}.lobby-party summary{cursor:pointer}.lobby-loadout{margin:10px 0;font-size:12px}.lobby-charm-stack{display:flex;align-items:center;margin-top:5px;color:#cfbe9a}.lobby-charm-stack span{width:34px;height:40px;margin-right:-3px}.lobby-charm-stack svg{width:100%;height:100%}#lobby-status:not(:empty){background:#263021e8;color:#ffe3a3;padding:10px 14px;border:1px solid #c6a667;border-radius:8px}@keyframes pack-arrive{from{opacity:0;transform:translateY(-15px) scale(.8)}to{opacity:1;transform:none}}@keyframes new-charm-shine{from{filter:drop-shadow(0 0 2px #f9d97866) brightness(1)}to{filter:drop-shadow(0 0 10px #f9d978dd) brightness(1.18)}}@media(prefers-reduced-motion:reduce){.new-charm,#pack-reveal svg{animation:none}}

.starter-pack[hidden]{display:none}.lobby-party{position:absolute;right:3%;bottom:5%;max-height:45%;overflow:auto}.stash-collection{width:calc(var(--charm-cell)*6)}

/* Stable stash workbench: collection positions never depend on message length. */
.minimal-packing.lobby-stash{--charm-cell:clamp(22px,min(calc((62vw - 160px)/10),4.8dvh),44px)}
.minimal-packing.lobby-stash .loadout-inner{left:33%;width:64vw;height:94dvh;max-height:94dvh;justify-content:flex-start;gap:12px;padding:18px 24px}
.minimal-packing.lobby-stash header{flex:none;margin:0}.minimal-packing.lobby-stash header h2{margin:0 0 5px}.minimal-packing.lobby-stash header p{margin:4px 0}
.minimal-packing .packing-workbench{align-items:center}
.stash-pack-slot{height:68px;display:flex;align-items:center;justify-content:center;flex:none}
.stash-pack-slot .starter-pack{margin:0;padding:8px 18px;font-size:15px}.stash-pack-slot .starter-pack small{margin-top:3px}
.stash-grid-label{height:28px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#e3d7af}.stash-grid-label button{font-size:10px;padding:3px 10px}
.minimal-packing #charm-tray{position:relative;display:block;min-height:calc(var(--charm-cell)*6);background:#14271d66;border:1px solid #abb28a66;box-sizing:content-box}
.minimal-packing #charm-tray .stash-cell{position:absolute;min-width:0;min-height:0;margin:0;padding:0;border:1px solid #abb28a22;border-radius:0;background:transparent;box-sizing:border-box}
.minimal-packing #charm-tray .stash-cell:focus-visible{outline:1px solid #d5c48a;outline-offset:-2px}
.minimal-packing #charm-tray .tray-charm{position:absolute;z-index:1}.minimal-packing #charm-tray .tray-charm.chosen{opacity:.35}
.minimal-packing.lobby-stash .hat-equipment{margin-top:0;flex:none}
.minimal-packing.lobby-stash .loadout-footer,.minimal-packing .loadout-footer{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 94px;height:94px;min-height:94px;width:100%;box-sizing:border-box;margin-top:auto;padding:12px 16px;border:1px solid #a8b58555;border-radius:9px;background:#12251fe6;overflow:auto}
.minimal-packing .loadout-footer #pack-status{max-width:100%;width:100%;margin:0;font-size:12px;line-height:1.5;text-align:center}
.minimal-packing .loadout-footer #pack-reveal{position:absolute;inset:0;box-sizing:border-box;margin:0;padding:10px 16px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;background:#12251f;border-radius:9px;overflow:auto;text-align:left;min-height:0}
.minimal-packing .loadout-footer #pack-reveal[hidden]{display:none}.minimal-packing .loadout-footer #pack-reveal svg{width:60px;height:60px;flex:0 0 60px}.minimal-packing .loadout-footer #pack-reveal p{margin:0}
.minimal-packing #packing-actions{height:30px;min-height:30px}.minimal-packing #packing-actions[hidden]{display:flex!important;visibility:hidden}
@media(max-width:700px){.minimal-packing.lobby-stash{--charm-cell:clamp(18px,min(calc((94vw - 115px)/10),4.5dvh),36px)}.minimal-packing.lobby-stash .loadout-inner{left:50%;width:96vw;padding:12px;gap:8px}.minimal-packing.lobby-stash .loadout-footer{flex-basis:88px;min-height:88px;height:88px}.stash-pack-slot{height:58px}}

.minimal-packing .loadout-footer #pack-status{position:static;height:auto;padding:0;overflow:visible;clip:auto;white-space:normal}

/* Collection and room furniture use the same carved bark frame as the game. */
.minimal-packing.lobby-stash .loadout-inner,.lobby-room,.lobby-party,.ground-charm-panel,#ground-charm-status:not(:empty),#lobby-status:not(:empty),.minimal-packing .loadout-footer{border:8px solid transparent;border-image:var(--bark-frame) 18 fill / 18px / 2px stretch;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;color:#f0dfb4}
.minimal-packing .loadout-footer #pack-reveal{background:#392d21;border-radius:0}
.stash-grid-shell{position:relative}.stash-grid-label{display:none}
.stash-pack-slot{position:absolute;z-index:3;left:calc(var(--charm-cell)*4);top:calc(var(--charm-cell)*4);width:calc(var(--charm-cell)*2);height:calc(var(--charm-cell)*2);pointer-events:none}
.stash-pack-slot .starter-pack{pointer-events:auto;width:100%;height:100%;padding:4px;font-size:11px;line-height:1.3;border-image:var(--honey-frame) 18 fill / 9px / 0 stretch;box-sizing:border-box;overflow:hidden}.stash-pack-slot .starter-pack small{font-size:9px}
.stash-disposal{display:flex;justify-content:space-between;gap:10px;height:38px;margin-top:10px}.stash-disposal button{font-size:12px;padding:6px 12px}.stash-disposal #stash-trash:hover{color:#ffae91;filter:brightness(1.2)}
.minimal-packing #charm-tray .stash-cell{border-image:none;filter:none;box-shadow:none}
.lobby-room{padding:12px;gap:9px}.lobby-party{padding:0;overflow:visible;max-height:none;min-width:170px}.lobby-party summary{padding:10px 15px;list-style:none;color:#efd7a4}.lobby-party summary:hover{filter:brightness(1.25)}.lobby-party:not([open]) #lobby-loadouts{display:none!important}
#lobby-loadouts{max-height:40dvh;overflow:auto;padding:8px 14px;min-width:230px}.lobby-loadout{border-left:3px solid var(--keeper-color);padding:7px 10px;color:var(--keeper-color)}.keeper-red{--keeper-color:#efa69b}.keeper-blue{--keeper-color:#9fc7ef}.keeper-gold{--keeper-color:#edd18a}.keeper-violet{--keeper-color:#ceb0ed}
.lobby-charm-stack{flex-wrap:wrap;gap:5px}.lobby-charm-stack .party-charm{position:relative;width:38px;height:44px;padding:4px;border:1px solid transparent;border-image:none;background:#201a1466;filter:none}.party-charm:hover,.party-charm:focus-visible{border-color:var(--keeper-color);background:#c4ac6233;outline:none}.party-charm .party-charm-tip{display:none}.party-charm:hover .party-charm-tip,.party-charm:focus-visible .party-charm-tip{display:block;position:absolute;z-index:30;bottom:100%;left:0;width:160px;height:auto;margin:0;padding:9px;background:#2a2219;border:1px solid #b69661;color:#f2e2ba;font:11px/1.5 var(--font-ui);pointer-events:none}
.ground-charm-panel{position:absolute;left:3%;bottom:6%;padding:12px;pointer-events:auto;max-width:230px;max-height:32%;overflow:auto}.ground-charm-panel h3{font-size:13px;margin:0 0 8px}.ground-charm-panel button{display:flex;align-items:center;gap:8px;font-size:11px;width:100%;margin-bottom:6px}.ground-charm-panel svg{width:30px;height:34px;flex:none}#ground-charm-status{position:absolute;left:28%;bottom:3%;max-width:40%;font-size:12px;padding:8px;pointer-events:none}#ground-charm-status:empty{display:none}

.minimal-packing.lobby-stash .loadout-footer{border:6px solid transparent;border-image:var(--bark-frame) 18 fill / 12px / 0 stretch;border-radius:0;background:none;box-shadow:none}
.stash-disposal button,.stash-grid-label button,.lobby-room button{border-image:var(--bark-frame) 18 fill / 10px / 1px stretch}
.stash-disposal button{display:flex;align-items:center;justify-content:center;gap:5px}.stash-disposal svg{width:17px;height:19px}
.stash-pack-slot .starter-pack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}.stash-pack-slot .starter-pack[hidden]{display:none}.stash-pack-slot .starter-pack svg{height:65%;width:75%}.stash-pack-slot .starter-pack small{font-size:9px;margin:0;max-width:100%;white-space:normal;line-height:1.2;text-align:center}

#online-room,.welcome-inner{border:8px solid transparent;border-image:var(--bark-frame) 18 fill / 18px / 2px stretch;border-radius:0;background:none;box-shadow:none}
.welcome-screen .welcome-inner{width:min(960px,100%,max(340px,calc((100dvh - 275px)*1.7778)));padding:0 0 18px;overflow:hidden}
.welcome-art{display:block;width:100%;height:auto;object-fit:contain;margin:0;filter:none;border-bottom:1px solid #bda76b66}
.welcome-kicker{max-width:760px;margin:12px auto 0;padding:0 16px;color:#d8c48b;font:400 10px/1.5 var(--font-ui);letter-spacing:.12em}
.welcome-screen #welcome-title{margin:0;color:#f5dfa9;font:400 clamp(38px,11vw,64px)/1.05 var(--font-event);letter-spacing:-.035em;white-space:nowrap;text-shadow:0 3px 0 #354b35,0 7px 16px #10261dc9}
.welcome-screen .welcome-tagline{max-width:480px;margin:6px auto 15px;padding:0 16px;color:#e0e2c3;font:400 13px/1.45 var(--font-ui);letter-spacing:.015em}
.welcome-meta{position:fixed;z-index:2;right:12px;bottom:calc(8px + env(safe-area-inset-bottom));left:12px;margin:0;color:#d8c48b;font:400 9px/1.4 var(--font-ui);letter-spacing:.12em;opacity:.72;pointer-events:none}
.welcome-screen .welcome-options{width:calc(100% - 32px);margin-top:0;margin-bottom:10px;flex-wrap:wrap}
.welcome-screen #welcome-continue{flex-basis:100%}
.welcome-screen .welcome-name{margin-left:16px;margin-right:16px}
@media(max-width:560px){.welcome-screen .welcome-inner{padding:0 0 16px}.welcome-kicker{font-size:9px;letter-spacing:.05em}.welcome-screen .welcome-tagline{font-size:12px;margin-bottom:12px}}
@media(max-height:480px){.welcome-screen .welcome-inner{padding-bottom:10px}.welcome-kicker{margin-top:8px}.welcome-screen .welcome-tagline{margin-bottom:8px}.welcome-screen .welcome-options button{padding-top:8px;padding-bottom:8px}}
/* Fixed tooltip escapes the party list's scroll clipping. */
.party-charm:hover .party-charm-tip,.party-charm:focus-visible .party-charm-tip{position:fixed;left:auto;right:4vw;bottom:calc(5vh + 190px);width:min(230px,80vw);box-sizing:border-box;white-space:normal;text-align:left}

/* Three fixed collection pages, with compact labels above the tray. */
.minimal-packing.lobby-stash{--charm-cell:clamp(18px,min(calc((62vw - 160px)/10),4.3dvh),42px)}
.minimal-packing #charm-tray{min-height:calc(var(--charm-cell)*8)}
.stash-pack-slot{left:0;top:0}.stash-disposal{justify-content:flex-end}
.stash-tabs{display:flex;width:100%;gap:4px;margin:0 0 6px}.stash-tab{display:flex;align-items:center;justify-content:center;gap:5px;flex:1;min-width:0;min-height:28px;padding:3px 4px;border:1px solid #8f98707a;background:#22392e;color:#d4c9a6;font:11px var(--font-ui);cursor:pointer}.stash-tab span{font-size:10px;color:#b8caa6}.stash-tab[aria-selected="true"]{background:transparent;color:#fff0bf;border-color:#e1cc8d}.stash-tab:focus-visible{outline:2px solid #ffe1a1;outline-offset:2px}
.stash-tab{flex-direction:column;gap:1px;min-height:32px;font-size:10px;line-height:1.1}.stash-tab[data-stash-page="2"][aria-selected="true"]{background:transparent;border-color:#9bcec6}
.stash-tab.drag-target{background:#876f3d;color:#fff2c5;border-color:#f1d18a;box-shadow:0 0 0 2px #f1d18a66}
@media(max-width:700px){.minimal-packing.lobby-stash{--charm-cell:clamp(16px,min(calc((94vw - 115px)/10),3.7dvh),34px)}}
/* Three carved keepsakes suspended from a shared cord. */
.pack-opening{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:radial-gradient(ellipse at 50% 40%,#43523bec,#081711fc 75%);color:#f8e7b7;overflow:auto}
.pack-opening::backdrop{background:#07100cf0}.pack-opening-content{min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px;gap:14px;text-align:center}
.pack-eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;margin:0;color:#c9bc91}.pack-opening h2{font:38px 'WS BROTHER WIND',serif;margin:0}.pack-opening-stage{position:relative;flex:none;width:min(900px,95vw);display:grid;place-items:center}
.bundle-moonlight{position:absolute;inset:-20% 0;background:radial-gradient(ellipse,#ebd7a229,transparent 65%);pointer-events:none;animation:bundle-light 4s ease-in-out infinite alternate}
.bundle-cord{position:absolute;left:50%;top:10px;width:100vw;height:90px;transform:translateX(-50%);overflow:visible;pointer-events:none}.bundle-cord path{fill:none;stroke-linecap:round}.bundle-cord .cord-shadow{stroke:#142017;stroke-width:7}.bundle-cord .cord-fiber{stroke:#c0a775;stroke-width:3}.bundle-cord .bundle-knot{stroke:#d0b985;stroke-width:3}
.bundle-charms{position:relative;width:100%;box-sizing:border-box;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:100px 40px 22px;z-index:1}.bundle-piece{position:relative;min-width:0;transform-origin:50% -55px;animation:bundle-sway 3s ease-in-out infinite alternate;animation-delay:calc(var(--charm-index)*-.7s)}
.hanging-charm{position:relative;height:190px;display:flex;justify-content:center;align-items:flex-start;perspective:900px}.hanging-charm:before{content:'';position:absolute;z-index:3;left:calc(50% - 1px);top:-56px;height:72px;width:3px;background:repeating-linear-gradient(150deg,#c6af7b 0 3px,#75603e 3px 5px);box-shadow:1px 0 0 #17231b;transition:opacity .3s}.hanging-charm:after{content:'';position:absolute;z-index:-1;inset:-35px -15px;background:radial-gradient(ellipse,#efda994b,transparent 65%);transition:background .7s,opacity .7s;pointer-events:none}
.hanging-carving{height:180px;max-width:100%;transform-origin:50% 10px}.hanging-carving svg{height:100%;width:auto;max-width:100%;overflow:visible}
.carving-solid{position:relative;display:block;height:100%;transform-style:preserve-3d}
.carving-face,.carving-depth{display:block;height:100%;transform-style:preserve-3d;backface-visibility:visible}
.carving-face{position:relative;transform:translateZ(5px)}
.carving-depth{position:absolute;inset:0;transform:translateZ(var(--depth)) translateX(var(--edge-shift));filter:brightness(.28) sepia(.8) saturate(.75)}
.carving-depth:nth-child(1){filter:brightness(.48) sepia(.7) saturate(.8)}
.carving-depth:nth-child(5){filter:brightness(.18) sepia(.75) saturate(.7)}
.carving-depth svg,.carving-face svg{display:block}
.carving-face svg{filter:drop-shadow(0 9px 8px #07130b99)}
.pack-opening-stage:is([data-phase="spinning"],[data-phase="revealing"]) .bundle-piece:not(.revealed) .carving-solid{animation:unidentified-spin 1.12s cubic-bezier(.42,.1,.58,.9) infinite}
.charm-reveal-sparks{position:absolute;inset:0;pointer-events:none;z-index:4}
.charm-reveal-sparks:before{content:'';position:absolute;inset:-15%;opacity:0;background:radial-gradient(ellipse,#fff9dcbb, #f5cb6844 32%,transparent 65%)}
.charm-reveal-sparks i{position:absolute;left:50%;top:45%;width:7px;height:7px;opacity:0;background:#fff7d0;box-shadow:0 0 6px #fff9dd,0 0 14px #f5bd55;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.bundle-piece.charging:not(.revealed) .carving-face svg{animation:charm-charge .62s ease-out both}
.bundle-piece.charging:not(.revealed) .charm-reveal-sparks:before{animation:charm-flash .62s ease-out both}
.bundle-piece.charging:not(.revealed) .charm-reveal-sparks i{animation:charm-spark .48s ease-out both;animation-delay:var(--spark-delay)}
.pack-opening-stage[data-phase="spinning"] .bundle-cord,.pack-opening-stage[data-phase="revealing"] .bundle-cord{animation:cord-sound-pulse 4.73s ease-out both}
.pack-opening-stage[data-phase="complete"] .bundle-knot{animation:knot-untie .62s ease-in both}
.pack-opening-stage[data-phase="complete"] .bundle-piece{transform:translateY(16px);animation:charm-detach .62s ease-out both}
.pack-opening-stage[data-phase="complete"] .hanging-charm:before{opacity:0;transform:scaleY(0);animation:tether-retract .62s ease-in both}
@keyframes cord-sound-pulse{0%,25%,48%,59%,82%,100%{filter:drop-shadow(0 0 0 transparent)}37%,70%,96%{filter:drop-shadow(0 0 10px #ffdf91)}}
@keyframes knot-untie{0%,55%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-12px)}}
@keyframes charm-detach{0%{transform:translateY(0) rotate(-3deg)}35%{transform:translateY(-7px) rotate(4deg)}100%{transform:translateY(16px) rotate(0)}}
@keyframes tether-retract{0%{opacity:1;transform:scaleY(1)}45%{opacity:1}100%{opacity:0;transform:scaleY(0)}}
@keyframes unidentified-spin{0%{transform:rotateY(-14deg) rotateZ(-2deg)}50%{transform:rotateY(190deg) rotateZ(2deg)}100%{transform:rotateY(346deg) rotateZ(-2deg)}}
@keyframes charm-charge{0%{filter:brightness(1) drop-shadow(0 9px 9px #07130b99)}55%{filter:brightness(1.18) saturate(1.12) drop-shadow(0 0 17px #e9c873aa) drop-shadow(0 12px 9px #07130b99)}100%{filter:brightness(1.05) drop-shadow(0 0 13px #e1ba6b88) drop-shadow(0 9px 9px #07130b99)}}
@keyframes charm-flash{0%,100%{opacity:0;transform:scale(.82)}48%{opacity:.45;transform:scale(1.08)}}
@keyframes charm-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}22%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.2) rotate(100deg)}}
.bundle-description{min-height:128px;margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:8px}.bundle-description[hidden]{display:flex;visibility:hidden}.bundle-description h3{font-size:16px;margin:0;line-height:1.4}.bundle-description p{font-size:10px;text-transform:uppercase;letter-spacing:3px;margin:0;color:#d8c383}.bundle-description small{font-size:11px;line-height:1.5;max-width:220px}
.bundle-piece.revealed .carving-solid{animation:carving-turn .85s cubic-bezier(.18,.72,.23,1) both}.bundle-piece.revealed .bundle-description{animation:carving-caption .6s ease-out both}.bundle-piece[data-rarity="unique"] .hanging-charm:after{background:radial-gradient(ellipse,#a47d4380,transparent 68%)}.bundle-piece[data-rarity="unique"] .bundle-description h3,.bundle-piece[data-rarity="unique"] .bundle-description p{color:#b49a69}.bundle-piece[data-rarity="magical"] .hanging-charm:after{background:radial-gradient(ellipse,#8298e580,transparent 68%)}.bundle-piece[data-rarity="magical"] .bundle-description h3,.bundle-piece[data-rarity="magical"] .bundle-description p{color:#91aaf0}.bundle-piece[data-rarity="rare"] .bundle-description h3,.bundle-piece[data-rarity="rare"] .bundle-description p{color:#e8d85b}.bundle-piece[data-rarity="set"] .bundle-description h3,.bundle-piece[data-rarity="set"] .bundle-description p{color:#55cc55}
.bundle-piece[data-reward]:not(.charging):not(.revealed) .carving-face svg{filter:drop-shadow(0 0 9px #c4d2bb55) drop-shadow(0 9px 9px #07130b99)}
.bundle-piece[data-rarity="rare"] .hanging-charm:after{background:radial-gradient(ellipse,#dfca6280,transparent 68%)}
.pack-opening-content>button{flex:none}#pack-opening-action{padding:13px 32px;min-width:180px;border-image:var(--honey-frame) 18 fill / 12px / 2px stretch;font-size:14px}
.pack-opening-stage[data-phase="collect"] .bundle-knot,.pack-opening-stage[data-phase="collect"] .hanging-charm:before{opacity:0}.pack-opening-stage[data-phase="collect"] .bundle-piece{animation:bundle-release .65s ease-in forwards}
.stash-pack-slot .starter-pack{border-image:none;border:0;background:radial-gradient(ellipse,#e1cf8540,transparent 70%);box-shadow:none;filter:drop-shadow(0 2px 2px #0005)}.stash-pack-slot .starter-pack:hover{background:radial-gradient(ellipse,#e1cf8570,transparent 70%)}.stash-pack-slot .starter-pack svg{height:75%;width:95%}
@keyframes bundle-sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}@keyframes bundle-light{from{opacity:.5}to{opacity:1}}@keyframes carving-turn{0%{transform:rotateY(-76deg) rotateZ(-3deg) scale(.94)}52%{transform:rotateY(22deg) rotateZ(2deg) scale(1.07)}100%{transform:rotateY(-9deg) rotateZ(0) scale(1)}}@keyframes carving-caption{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes bundle-release{to{transform:translateY(160px) scale(.3);opacity:0}}
@media(max-width:600px){.pack-opening-content{padding:20px 10px;gap:10px}.pack-opening h2{font-size:27px}.bundle-charms{gap:10px;padding:85px 8px 22px}.hanging-charm{height:135px}.hanging-carving{height:125px}.bundle-description{margin-top:10px;min-height:140px}.bundle-description h3{font-size:12px}.bundle-description small{font-size:10px}.pack-eyebrow{font-size:9px}}
@media(prefers-reduced-motion:reduce){.pack-opening *{animation:none!important;transition:none!important}.pack-opening-stage[data-phase="complete"] .bundle-knot{opacity:0}}

.bundle-piece:nth-child(2) .hanging-charm:before{top:-42px;height:58px}

/* Compact stash furniture, sized to its pockets rather than the viewport. */
.minimal-packing.lobby-stash{--charm-cell:clamp(16px,min(calc((100vw - 180px)/10),4.3dvh),40px)}
.minimal-packing.lobby-stash .loadout-inner{left:16px;transform:translateY(-50%);width:calc(var(--charm-cell)*10 + 160px);max-width:calc(100vw - 32px);height:auto;max-height:94dvh;padding:22px 24px 18px;gap:14px}
.minimal-packing.lobby-stash header{position:static;width:100%;padding:0 38px;box-sizing:border-box;text-align:center}
.minimal-packing.lobby-stash header h2{font-size:clamp(36px,6dvh,54px);line-height:1.1;margin:0 0 6px}
.minimal-packing.lobby-stash .stash-back{position:absolute;left:auto;right:10px;top:10px;margin:0;z-index:5}
.minimal-packing.lobby-stash .loadout-footer{display:none}
@media(max-width:600px){.minimal-packing.lobby-stash .loadout-inner{left:50%;transform:translate(-50%,-50%);padding-inline:16px}.minimal-packing.lobby-stash header{padding-inline:24px}.minimal-packing.lobby-stash header h2{font-size:36px}}
.charm-reward-status{position:absolute;z-index:15;top:96px;left:50%;transform:translateX(-50%);width:max-content;max-width:min(480px,90vw);padding:12px 18px;border:1px solid #c5ac65;border-radius:10px;background:#203427f2;color:#f7e2a8;font:400 14px/1.4 "WS WARBLER",sans-serif;text-align:center;pointer-events:none;box-shadow:0 5px 20px #0004}
.charm-reward-status[hidden]{display:none}
.journey-label{position:absolute;top:16px;left:50%;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:8px;background:#263021e8;color:#ffe3a3;white-space:nowrap;font:400 14px/1.4 "WS WARBLER",sans-serif;pointer-events:none}
.stash-grid-shell:has(.starter-pack[data-earned="true"]:not([hidden])){padding-top:64px}
.stash-grid-shell .stash-pack-slot:has(.starter-pack[data-earned="true"]){left:0;top:0;width:100%;height:60px}
.stash-pack-slot .starter-pack[data-earned="true"]{flex-direction:row;gap:8px;background:#e1cf8520;border:1px solid #c5ac65;border-radius:8px}
.stash-pack-slot .starter-pack[data-earned="true"] svg{width:56px;height:52px;flex:none;filter:drop-shadow(0 3px 3px #101e1b80)}
.stash-pack-slot .starter-pack[data-earned="true"] small{font-size:12px;white-space:normal;line-height:1.3}

/* The stash controls belong to the chest: close in the upper-left, discard in the lower-right. */
.minimal-packing .loadout-inner{position:relative}
.minimal-packing .stash-back{position:absolute;left:0;right:auto;top:8px;display:grid;place-items:center;width:36px;height:36px;min-width:36px;padding:0;font-size:0}
.minimal-packing .stash-back .ui-icon{width:19px;height:19px}
.minimal-packing .stash-disposal{position:absolute;right:0;bottom:0;height:auto;margin:0;z-index:6}
.minimal-packing.lobby-stash .loadout-inner{position:relative}
.minimal-packing.lobby-stash .stash-back{left:10px;right:auto;top:10px;display:grid;place-items:center;width:36px;height:36px;min-width:36px;padding:0;font-size:0}
.minimal-packing.lobby-stash .stash-back .ui-icon{width:19px;height:19px}
.minimal-packing.lobby-stash .stash-disposal{position:absolute;right:24px;bottom:18px;height:auto;margin:0;z-index:6}
.minimal-packing.lobby-stash .stash-sort{display:none}
.minimal-packing.lobby-stash #stash-trash{width:42px;height:42px;padding:8px;font-size:0}
.minimal-packing.lobby-stash #stash-trash svg{width:21px;height:21px}

/* Party equipment lives in the lower-left of the opened stash. */
.minimal-packing.lobby-stash .lobby-party{left:24px;right:auto;bottom:18px;z-index:7;max-width:min(290px,calc(100% - 110px));min-width:0;overflow:visible}
.minimal-packing.lobby-stash .lobby-party #lobby-loadouts{position:absolute;left:-8px;bottom:calc(100% + 8px);width:min(290px,calc(100vw - 48px));max-height:min(40dvh,320px);box-sizing:border-box;border:8px solid transparent;border-image:var(--bark-frame) 18 fill / 18px / 2px stretch;background:#17271e;color:#f0dfb4;overflow:auto}
.minimal-packing.lobby-stash .party-charm:hover .party-charm-tip,.minimal-packing.lobby-stash .party-charm:focus-visible .party-charm-tip{position:fixed;left:24px;right:auto;bottom:min(45vh,360px)}
@media(max-width:600px){.minimal-packing.lobby-stash .lobby-party{left:16px;bottom:14px}}

/* Keep stash actions together in the chest's upper-right corner. */
.minimal-packing .stash-disposal{top:8px;right:0;bottom:auto}
.minimal-packing.lobby-stash .stash-disposal{top:10px;right:24px;bottom:auto}

/* Hats use the same pocket scale as the charm stash, with a real 6 × 2 grid. */
.minimal-packing .hat-stash{width:calc(var(--charm-cell)*6);padding:2px;border:2px solid #74633f;border-radius:3px;outline:1px solid #c5b07b55;outline-offset:1px;background:#615e3ec9;box-shadow:inset 0 1px 8px #25351b99}
.minimal-packing .hat-inventory{width:100%;grid-template-columns:repeat(6,var(--charm-cell));grid-template-rows:repeat(3,var(--charm-cell));gap:0}
.minimal-packing .hat-equipment .hat-choice,.minimal-packing .hat-inventory .hat-empty{border:1px solid #d5d7a32a;border-radius:0;background:transparent}
.minimal-packing .hat-equipment .hat-choice:hover,.minimal-packing .hat-equipment .hat-choice:focus-visible,.minimal-packing .hat-inventory .hat-empty:hover{background:#e2cc8520}

/* Keep the hat collection on the same pocket surface as the charm stash. */
.minimal-packing .hat-stash{
  width:calc(var(--charm-cell)*6);
  padding:0;
  border:0;
  border-radius:3px;
  outline:1px solid #abb28a40;
  outline-offset:0;
  background-color:#182e2344;
  background-image:linear-gradient(to right,#abb28a18 1px,transparent 1px),linear-gradient(to bottom,#abb28a18 1px,transparent 1px);
  background-size:var(--charm-cell) var(--charm-cell);
  box-shadow:none;
}
.minimal-packing .hat-inventory{width:100%;grid-template-columns:repeat(6,var(--charm-cell));grid-template-rows:repeat(3,var(--charm-cell));gap:0}
.minimal-packing .hat-equipment .hat-choice,.minimal-packing .hat-inventory .hat-empty{
  border:1px solid #abb28a22;
  border-radius:0;
  background:transparent;
  box-sizing:border-box;
}
.minimal-packing .hat-equipment .hat-choice:hover,.minimal-packing .hat-equipment .hat-choice:focus-visible,.minimal-packing .hat-inventory .hat-empty:hover{
  background:#e2cc8520;
  outline:1px solid #d5c48a;
  outline-offset:-2px;
}
.minimal-packing .hat-equipment .hat-choice[aria-pressed="true"]{
  background:#e2cc8520;
  outline:1px solid #d5c48a;
  outline-offset:-2px;
}
.minimal-packing .hat-equipment .hat-choice.equipped svg{opacity:.3}
/* The shared loot phase fades out before the result overlay opens. */
#loot-fade{position:fixed;inset:0;background:#000;z-index:9999;pointer-events:none}
.final-score-overlay{background:#000!important}

/* The wave clock uses the same carved moss chip as the gold and gem bars. */
.wave-forecast{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:176px;max-width:240px;padding:8px 11px 10px}
.wave-forecast-row{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:6px;row-gap:2px;align-items:baseline}
.wave-forecast-row .tiny{font-size:9px}
.wave-forecast-row strong{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#forecast-current{color:#f2e8c9}
#forecast{color:#c5d790}
.wave-progress-track{display:block;width:100%;height:5px;background:#12261c;box-shadow:0 1px #87916266;overflow:hidden}
#wave-progress-fill{display:block;width:100%;height:100%;background:#c5d790;transform:scaleX(0);transform-origin:left center;transition:transform .13s linear}
@media(max-width:700px){.wave-forecast{min-width:0;max-width:calc(100cqw - 20px);padding:6px 8px 8px}.wave-forecast-row{gap:4px}.wave-forecast-row strong{font-size:9px}}
@media(prefers-reduced-motion:reduce){#wave-progress-fill{transition:none}}

/* The live wave readout is a small creature strip, closer to a field-sign
   than a second information card. The countdown remains readable above it. */
.hud-left{flex-direction:row;align-items:flex-start;gap:7px}
.hud-actions{gap:0}
.wave-forecast{
  display:flex;
  position:relative;
  align-items:center;
  gap:10px;
  width:250px;
  height:42px;
  min-height:0;
  max-width:none;
  padding:0 8px;
  overflow:hidden;
  border-image-source:var(--bark-frame);
}
.wave-forecast-heading{
  display:grid;
  grid-template-columns:auto auto;
  gap:1px 7px;
  min-width:105px;
  align-items:baseline;
}
.wave-forecast-heading{display:none}
.wave-forecast-heading .tiny,.wave-forecast-heading strong{font-size:9px;line-height:1.15;white-space:nowrap}
.wave-forecast-heading strong{overflow:hidden;text-overflow:ellipsis;max-width:92px}
.wave-forecast-next{font-size:8px;color:#aebc99;line-height:1.15}
.enemy-preview-strip{display:flex;align-items:center;justify-content:space-around;gap:2px;width:100%;min-width:0;flex:1}
.enemy-preview{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:36px;flex:1 1 0}
.enemy-preview img{display:block;width:48px;height:48px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 2px 1px #09180d99)}
.enemy-preview b{display:none}
.wave-forecast .wave-progress-track{position:absolute;left:15px;right:15px;bottom:5px;width:auto;height:3px}
@media(max-width:700px){
  .map-hud{flex-wrap:nowrap}
  .hud-left{order:initial;flex-basis:auto;gap:4px;min-width:0}
  .wave-forecast{width:132px;height:34px;padding:0 4px;gap:2px}
  .wave-forecast-heading{min-width:88px;gap:1px 4px}
  .wave-forecast-heading .tiny,.wave-forecast-heading strong,.wave-forecast-next{font-size:8px}
  .wave-forecast-heading strong{max-width:78px}
  .enemy-preview{width:42px;height:30px}
  .enemy-preview img{width:38px;height:38px}
}

/* A short, non-blocking spotlight for newly acquired stash items. */
#charm-tray .spotlight-old{filter:brightness(calc(1 - var(--stash-spotlight,0)*.48))!important;transition:filter .12s linear}
#charm-tray.stash-spotlight .spotlight-new{z-index:2;box-shadow:0 0 18px rgb(255 218 112 / calc(var(--stash-spotlight,0)*.35))}
@media(prefers-reduced-motion:reduce){#charm-tray .spotlight-old{transition:none}}

/* Keep the lobby stash anchored to the left side beside the chest. */
@media(min-width:701px){
  .minimal-packing.lobby-stash{--charm-cell:clamp(18px,min(calc((52vw - 200px)/10),6dvh),56px)}
  .minimal-packing.lobby-stash .loadout-inner{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    width:min(52vw,760px);
    max-width:calc(100vw - 32px);
    height:94dvh;
    max-height:94dvh;
  }
}

#hat-found .bundle-charms{grid-template-columns:minmax(0,280px);justify-content:center}
.bundle-charms:has(> .bundle-piece:only-child){grid-template-columns:minmax(0,280px);justify-content:center}
#hat-found-action{padding:13px 32px;min-width:180px;font-size:14px}

/* Selection and keyboard focus use a soft fill instead of a gold frame. */
#loadout-screen button:focus-visible,#hat-found button:focus-visible,#pack-opening button:focus-visible,
.minimal-packing .hat-equipment .hat-choice:hover,
.minimal-packing .hat-equipment .hat-choice[aria-pressed="true"],
.hat-slot.hat-slot-ready{outline:none}
#loadout-screen button:focus-visible,#hat-found button:focus-visible,#pack-opening button:focus-visible{background-color:#46584b}
.hat-equipment .hat-choice[aria-pressed="true"]{border-color:#abb28a22}
#loadout-screen .stash-tab[aria-selected="true"]{border-color:#8f98707a}
.map-hud .wave-buttons #quit-to-lobby,.map-hud .wave-buttons #pause{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;padding:0}
#quit-portal-icon{width:32px;height:32px;pointer-events:none}

/* A generous hearth wheel with the selected upgrade card in its center. */
.tower-card.hearth-detail{box-sizing:border-box;transform:translate(-50%,-50%);padding:clamp(8px,calc(var(--hearth-size)*.026),20px);overflow:auto;text-align:center;scrollbar-width:thin}
.hearth-detail .card-heading{flex-direction:column;gap:clamp(4px,calc(var(--hearth-size)*.012),9px)}
.hearth-detail .card-heading strong{font-size:clamp(11px,calc(var(--hearth-size)*.033),24px);line-height:1.2}
.hearth-detail .card-heading b{font-size:clamp(11px,calc(var(--hearth-size)*.029),21px)}
.hearth-detail #tower-cost .tower-stat{justify-content:center}
.hearth-detail svg{width:1.2em;height:1.2em}
.tower-card.hearth-detail #tower-stats{display:flex;flex-direction:column;gap:8px;font-size:clamp(10px,calc(var(--hearth-size)*.024),17px);line-height:1.4;margin:10px 0}
.tower-card.hearth-detail #selection-text{font-size:clamp(9px,calc(var(--hearth-size)*.020),14px);line-height:1.45;margin:8px 0}
.tower-card.hearth-detail #ring-help{font-size:clamp(8px,calc(var(--hearth-size)*.017),12px);line-height:1.4;margin-top:12px}
.hearth-detail .tower-actions{display:none}
@container(max-width:600px){.tower-card.hearth-detail #selection-text,.tower-card.hearth-detail #ring-help{display:none}.tower-card.hearth-detail #tower-stats{gap:4px;margin:5px 0}}

/* Unidentified rewards are carved inventory pieces; their family and sigil stay sealed. */
.tray-charm.unidentified-charm{background:radial-gradient(ellipse,#d9e5e51c,transparent 72%);cursor:pointer;filter:drop-shadow(0 2px 2px #101c1b80)}
.tray-charm.unidentified-charm .tray-art{color:#edf1e9}
.tray-charm.unidentified-charm:hover,.tray-charm.unidentified-charm:focus-visible{filter:drop-shadow(0 0 5px #cfdfdc88);outline:1px solid #c3d0ce;outline-offset:-2px}
.mystery-hint{position:absolute;bottom:3px;left:0;right:0;color:#f2f1df;font-size:9px;text-align:center;opacity:0;pointer-events:none;text-shadow:0 1px 3px #182424}
.unidentified-charm:hover .mystery-hint,.unidentified-charm:focus-visible .mystery-hint{opacity:1}
#charm-tray:has(.mystery-overflow){margin-bottom:calc(var(--charm-cell)*2 + 8px)}
#charm-tray .mystery-overflow{left:0;top:calc(100% + 8px);width:calc(var(--charm-cell)*1);height:calc(var(--charm-cell)*2)}

/* Keep party controls clear of the expanded three-row hat stash. */
.minimal-packing.lobby-stash .lobby-party{left:auto;right:24px}
@media(max-width:600px){.minimal-packing.lobby-stash .lobby-party{left:auto;right:16px}}

/* Keyboard-only workshop: editor menus and short, focused dev pages. */
.dev-drawer{width:min(480px,100%);display:flex;flex-direction:column;overflow:hidden;background:#213629}
.dev-header{position:static;flex:none;padding:14px 18px}
.dev-header p{margin:8px 0 0;color:var(--muted);font-size:10px}
.dev-menu-nav,.dev-category-nav{display:flex;gap:6px;padding:12px 16px;flex:none;margin:0;border-bottom:1px solid #65704b66}
.dev-menu-nav button{flex:1;min-width:0;padding:10px 7px;font-size:11px;line-height:1.4}
.dev-category-nav{flex-wrap:wrap;padding:10px 16px;background:#192d22}
.dev-category-nav button{flex:1;padding:8px 6px;font-size:10px}
.dev-menu-nav button[aria-pressed="true"],.dev-category-nav button[aria-pressed="true"]{background:#d5daa3;color:#203425;border-color:#e5e5b7}
#dev-panel-tools{display:flex;flex-direction:column;min-height:0;flex:1}
.dev-page,.dev-editor-menu{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1}
.dev-editor-menu{padding:20px;font-size:12px;line-height:1.7}
.dev-editor-menu h3{font-size:17px;margin:0 0 12px}
.dev-editor-menu ul{padding-left:20px;margin:18px 0 24px;color:#c6d0b7}
.dev-editor-launch{display:block;border:1px solid #c6d58b;border-radius:6px;padding:12px;background:#334d35;text-align:center}
.dev-editor-menu small{display:block;margin-top:10px;color:var(--muted)}
.dev-page h3{margin:0 0 12px;font-size:12px}
.dev-page .lab-section>button{display:block;width:100%;margin:7px 0}
.dev-button-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.dev-drawer .journal{flex:none;padding:10px 16px;background:#192d22;border-top:1px solid #65704b66}
.dev-drawer .journal p{line-height:1.4;margin:0;max-height:2.8em;overflow:auto}
.dev-drawer .journal>span{margin-top:5px;font-size:9px}
.dev-page .dev-controls{border:0}
@media(max-width:380px){.dev-menu-nav{padding:9px;gap:4px}.dev-menu-nav button{font-size:10px}.dev-category-nav{padding:8px;gap:4px}}

.dev-drawer .dev-menu-nav button,.dev-drawer .dev-category-nav button{border-image:none;border:1px solid #71865b;border-radius:5px;box-shadow:none;min-width:0}
.dev-category-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.dev-page .muted{margin-top:8px}
#dev-drawer .dev-menu-nav button,#dev-drawer .dev-category-nav button{background:#233b2c;border-color:#71865b;text-shadow:none;filter:none;translate:none}
#dev-drawer .dev-menu-nav button:hover,#dev-drawer .dev-category-nav button:hover{background:#3d5438;border-color:#bdcc91}
#dev-drawer .dev-menu-nav button[aria-pressed="true"],#dev-drawer .dev-category-nav button[aria-pressed="true"]{background:#d5daa3;color:#203425;border-color:#e5e5b7}