/* SUNBREAKER UI — in-match HUD. No backdrop-filter here (it would re-blur the WebGL canvas every frame);
   panels use dense translucent fills instead. Everything is pointer-events: none except chat/menu. */

.hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--f-body); color: var(--ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.hfps { position: absolute; top: .5rem; left: .6rem; font-family: var(--f-mono); font-size: .72rem; color: var(--ok); opacity: .8; }

/* ───────────── top bar ───────────── */
.tb { position: absolute; top: .7rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.tb__row {
  display: grid; grid-template-columns: minmax(8.5rem, auto) auto minmax(8.5rem, auto); align-items: center; gap: .9rem;
  padding: .3rem .9rem; min-width: 27rem;
  background: linear-gradient(180deg, rgba(8, 10, 26, .82), rgba(8, 10, 26, .6));
  border: 1px solid var(--line); border-top: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.2rem) 100%, 1.2rem 100%);
}
.tb__side { display: flex; align-items: center; gap: .7rem; }
.tb__side--left { justify-content: flex-end; }
.tb__side--right { justify-content: flex-start; }
.tb__teamcol { display: flex; flex-direction: column; align-items: center; gap: .05rem; }
.tb__gate { width: 2.5rem; height: 2.5rem; }
.tb__label { font-family: var(--f-display); font-size: .56rem; font-weight: 700; letter-spacing: .2em; color: color-mix(in srgb, var(--team) 80%, white); }
.tb__side.is-mine .tb__label { color: var(--gold); }
.tb__score { font-family: var(--f-mono); font-size: 2.3rem; font-weight: 700; line-height: 1; color: var(--team); text-shadow: 0 0 14px color-mix(in srgb, var(--team) 60%, transparent); min-width: 1.6rem; text-align: center; }
.tb__side.is-hit .tb__gate { animation: gate-hit .9s var(--ease-out); }
.tb__side.is-hit .tb__score { animation: score-pop .9s var(--ease-snap); }
@keyframes gate-hit { 0% { transform: scale(1.5); filter: brightness(3); } }
@keyframes score-pop { 0% { transform: scale(1.8); color: #fff; } }
.tb__center { display: flex; flex-direction: column; align-items: center; min-width: 7rem; }
.tb__phase { font-family: var(--f-display); font-size: .58rem; font-weight: 600; letter-spacing: .22em; color: var(--ink-3); white-space: nowrap; }
.tb__clock { font-family: var(--f-mono); font-size: 1.95rem; font-weight: 700; line-height: 1.05; letter-spacing: .02em; color: var(--ink-warm); font-variant-numeric: tabular-nums; }
.tb__clock.is-low { color: var(--gold); }
.tb__clock.is-supernova { color: var(--danger); text-shadow: 0 0 16px rgba(255, 51, 85, .7); animation: nova-pulse 1s ease-in-out infinite; }
.tb.is-supernova .tb__phase { color: #FF8FA0; }
.tb.is-supernova .tb__row { border-color: rgba(255, 51, 85, .45); box-shadow: inset 0 -1px 0 rgba(255, 51, 85, .5); }
@keyframes nova-pulse { 50% { opacity: .72; } }

.pill {
  display: flex; align-items: center; gap: .45rem; height: 1.7rem; padding: 0 .8rem 0 .55rem;
  background: rgba(8, 10, 26, .72); border: 1px solid var(--line); border-radius: 1rem;
  font-family: var(--f-display); font-size: .8rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap;
}
.pill__icon { display: grid; place-items: center; width: 1rem; height: 1rem; transition: transform .3s var(--ease-out); }
.pill__icon .glyph { width: 1rem; height: 1rem; }
.pill__beats { display: none; gap: 3px; margin-left: .15rem; }
.pill__beats i { width: .38rem; height: .38rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); }
.pill__beats i.is-on { background: #fff; box-shadow: 0 0 6px #fff; }
.pill[data-mode="flare"] .pill__beats { display: flex; }
.pill[data-mode="flare"] { color: #fff; border-color: rgba(255, 255, 255, .35); }
.pill.is-inhale { animation: inhale-glow .5s ease-in-out infinite alternate; }
@keyframes inhale-glow { to { box-shadow: 0 0 16px rgba(255, 244, 224, .55); border-color: rgba(255, 244, 224, .8); } }
.pill[data-tone="ember"] { color: var(--ember); border-color: color-mix(in srgb, var(--ember) 55%, transparent); }
.pill[data-tone="tide"] { color: var(--tide); border-color: color-mix(in srgb, var(--tide) 55%, transparent); }
.pill[data-tone="prism"] .pill__icon { animation: prism 2s linear infinite; }
.pill[data-tone="prism"] .pill__text { background: linear-gradient(90deg, #FFD27A, #fff, #A8F4FF, #B8A6FF, #FFD27A); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: prism-slide 2.4s linear infinite; text-shadow: none; }
.pill[data-mode="wait"] { color: var(--ink-3); }
@keyframes prism { to { filter: hue-rotate(360deg); } }
@keyframes prism-slide { to { background-position: -200% 0; } }

.streakbar { width: 9rem; height: 3px; background: rgba(160, 175, 255, .12); opacity: 0; transition: opacity .3s; --p: 0; }
.streakbar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p)); background: var(--gold); transition: transform .2s linear; }
.streakbar[data-team="ember"] i { background: var(--ember); } .streakbar[data-team="tide"] i { background: var(--tide); }
.streakbar.is-on { opacity: 1; }
.streakbar.is-hot i { background: var(--danger); box-shadow: 0 0 8px var(--danger); animation: nova-pulse .5s ease-in-out infinite; }

/* ───────────── kill feed + toasts ───────────── */
.feed { position: absolute; top: .8rem; right: .9rem; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; max-width: 30rem; }
.feed__item {
  display: flex; align-items: center; gap: .45rem; padding: .28rem .7rem; font-size: .92rem;
  background: linear-gradient(90deg, rgba(8, 10, 26, .3), rgba(8, 10, 26, .8)); border-right: 2px solid var(--line-2);
  animation: feed-in .35s var(--ease-out) both;
}
.feed__item.is-leaving { animation: feed-out .45s ease-in both; }
.feed__item--break { border-right-color: var(--gold); background: linear-gradient(90deg, rgba(40, 32, 8, .3), rgba(40, 32, 8, .85)); }
.feed__item--loose { border-right-color: #fff; }
.feed__who { font-family: var(--f-display); font-weight: 700; color: var(--team); letter-spacing: .02em; }
.feed__who.is-me { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.feed__verb .glyph { width: 1rem; height: 1rem; color: var(--ink-2); }
.feed__item--break .feed__verb .glyph { color: var(--gold); }
.feed__extra { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-2); }
.feed__item--kill .feed__extra { color: var(--gold); }
@keyframes feed-in { from { opacity: 0; transform: translateX(20px); } }
@keyframes feed-out { to { opacity: 0; transform: translateX(12px); } }

.htoasts { position: absolute; top: 7.4rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.htoast { padding: .22rem .8rem; font-size: .9rem; background: rgba(8, 10, 26, .75); border-left: 2px solid var(--violet); animation: toast-in .3s var(--ease-out) both; }
.htoast.tone-danger { border-left-color: var(--danger); color: #FFC2CC; }
.htoast.tone-good { border-left-color: var(--ok); }
.htoast.tone-bad { border-left-color: var(--danger); }
.htoast.is-leaving { animation: toast-out .4s ease-in both; }
/* Knock-loose / yank: one who-line in the strip ("AUX-Lark knocked the shard loose · comet"). The renderer pops the one
   big LOOSE! in the world (R6), so no word here: a small white shard glyph, the causing team's edge. */
.htoast--shard { display: flex; align-items: center; gap: .45rem; padding: .2rem .85rem .22rem .6rem; border-left-color: var(--team); background: linear-gradient(90deg, rgba(8, 10, 26, .9), rgba(8, 10, 26, .7)); }
.htoast--shard.t-neutral { border-left-color: #fff; }
.htoast__glyph { display: grid; place-items: center; flex: none; }
.htoast__glyph .glyph { width: .95rem; height: .95rem; color: #fff; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--team) 80%, transparent)); }
.htoast__text { font-size: .9rem; color: var(--ink); white-space: nowrap; }
.htoast__how { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); white-space: nowrap; }
.htoast__how::before { content: '·'; margin-right: .4rem; }

/* ───────────── banners ───────────── */
/* Below the notice strip even when it holds three lines (7.4rem + 3 × ~1.9rem), at every size. `translate` (not
   `transform`) centres it, so the end banner's `scale` shrinks it about its own centre. */
.banner { position: absolute; top: max(24%, 14rem); left: 50%; translate: -50% 0; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transition: opacity .35s; --tone: #fff; transform-origin: 50% 0; }
.banner.is-on { opacity: 1; }
.banner__text { font-family: var(--f-display); font-weight: 700; letter-spacing: .12em; line-height: 1; color: var(--tone); text-shadow: 0 0 18px color-mix(in srgb, var(--tone) 70%, transparent), 0 0 50px color-mix(in srgb, var(--tone) 35%, transparent), 0 2px 0 rgba(0, 0, 0, .6); white-space: nowrap; }
.banner__sub { margin-top: .45rem; padding: .18rem .8rem; font-family: var(--f-display); font-size: .95rem; font-weight: 600; letter-spacing: .08em; color: var(--ink); background: rgba(8, 10, 26, .6); white-space: nowrap; }
.banner__sub:empty { display: none; }
.banner--xl .banner__text { font-size: 5.4rem; }
.banner--l .banner__text { font-size: 4rem; }
.banner--m .banner__text { font-size: 2.4rem; }
.banner.is-anim .banner__text { animation: banner-in .55s var(--ease-snap) both; }
.banner.is-anim .banner__sub { animation: banner-sub .5s .12s var(--ease-out) both; }
@keyframes banner-in { 0% { transform: scale(1.6); opacity: 0; filter: blur(8px); letter-spacing: .4em; } 60% { opacity: 1; } 100% { transform: scale(1); filter: none; } }
@keyframes banner-sub { from { opacity: 0; transform: translateY(-6px); } }
.tone-ember { --tone: var(--ember); } .tone-tide { --tone: var(--tide); } .tone-gold { --tone: var(--gold); }
.tone-danger { --tone: var(--danger); } .tone-white { --tone: #FFFFFF; } .tone-prism { --tone: #FFFFFF; }
/* LOOSE! is always prismatic (the shard's own colours); the glow keeps the causing team's tint. */
.banner--loose .banner__text, .banner.tone-prism .banner__text {
  background: linear-gradient(90deg, #FFD27A, #FFFFFF 25%, #A8F4FF 50%, #B8A6FF 75%, #FFD27A); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tone) 80%, transparent));
  text-shadow: none;
}
.banner--loose.is-anim .banner__text { animation: banner-in .45s var(--ease-snap) both, prism-slide 1.2s linear infinite; }
.banner--supernova .banner__text { animation: banner-in .7s var(--ease-snap) both, nova-pulse .5s .7s ease-in-out 4; }
.banner--break .banner__sub, .banner--end .banner__sub { font-size: 1.1rem; }
/* VICTORY / DEFEAT steps up and aside after ~1.5 s so the new star igniting at the winning gate reads. */
.banner.is-shrunk { top: 7.6rem; scale: .46; transition: opacity .35s, top .7s var(--ease-out), scale .7s var(--ease-out); }
.banner.is-shrunk .banner__sub { background: rgba(8, 10, 26, .75); }
.hud:has(.banner.is-shrunk) .htoasts { opacity: 0; transition: opacity .3s; }

/* ───────────── respawn + carrier ───────────── */
/* Respawn: a compact strip in the carrier slot (bottom centre), so the play centre stays clear while you are down. */
.respawn {
  position: absolute; bottom: 11.2rem; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: .85rem;
  padding: .45rem 1.1rem .55rem .7rem; overflow: hidden; --p: 1;
  background: linear-gradient(180deg, rgba(40, 8, 16, .82), rgba(8, 10, 26, .82)); border: 1px solid rgba(255, 51, 85, .5);
  box-shadow: 0 0 34px -14px rgba(255, 51, 85, .7); animation: toast-in .3s var(--ease-out);
}
.respawn__icon .glyph { width: 1.7rem; height: 1.7rem; color: #FF8FA0; opacity: .75; transform: rotate(180deg); }
.respawn__who { display: flex; flex-direction: column; gap: .05rem; min-width: 7rem; }
.respawn__title { font-family: var(--f-display); font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #FF8FA0; }
.respawn__by { font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: .03em; color: var(--team); }
.respawn__by:empty::before { content: 'Respawning at your gate'; font-weight: 500; font-size: .86rem; color: var(--ink-2); }
.respawn__by.is-hazard { color: #FFB3A8; }
.respawn__tip { font-size: .84rem; line-height: 1.2; color: var(--ink-2); white-space: nowrap; }
.respawn__tip:empty { display: none; }
.respawn__time { display: flex; align-items: baseline; gap: .15rem; }
.respawn__num { font-family: var(--f-mono); font-size: 2.3rem; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.respawn__unit { font-family: var(--f-mono); font-size: .86rem; color: var(--ink-3); }
.respawn__hint { max-width: 11.5rem; padding-left: .85rem; border-left: 1px solid var(--line-2); font-size: .84rem; line-height: 1.25; color: var(--ink-2); }
.respawn__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--danger); box-shadow: 0 0 6px var(--danger); transform-origin: left; transform: scaleX(var(--p)); }

.carrier { position: absolute; bottom: 11.2rem; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: .9rem; padding: .45rem 1rem .45rem .5rem; background: rgba(8, 10, 26, .72); border: 1px solid rgba(255, 255, 255, .25); animation: toast-in .3s var(--ease-out); }
.heat { position: relative; width: 2.9rem; height: 2.9rem; flex: none; }
.heat__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.heat__track { fill: none; stroke: rgba(160, 175, 255, .15); stroke-width: 4; }
.heat__arc { fill: none; stroke: var(--gold); stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke .3s; }
.heat__icon { position: absolute; inset: 0; display: grid; place-items: center; }
.heat__icon .glyph { width: 1.05rem; height: 1.05rem; color: var(--gold); }
.heatinfo { display: flex; align-items: center; gap: .5rem; }
.heatinfo__text { display: flex; flex-direction: column; gap: .1rem; min-width: 4.6rem; }
.heatinfo__label { font-family: var(--f-display); font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.heat__num { font-family: var(--f-mono); font-size: .82rem; color: #fff; white-space: nowrap; }
.heatinfo.is-burning .heatinfo__label, .heatinfo.is-burning .heat__num { color: #FF8FA0; }
.heat.is-burning .heat__arc { stroke: var(--danger); filter: drop-shadow(0 0 4px var(--danger)); }
.heat.is-burning .heat__icon .glyph { color: var(--danger); animation: nova-pulse .4s ease-in-out infinite; }
.integ { display: flex; flex-direction: column; gap: .25rem; width: 15rem; }
.integ__top { display: flex; justify-content: space-between; align-items: baseline; }
.integ__label { font-family: var(--f-display); font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.integ__num { font-family: var(--f-mono); font-size: .8rem; color: #fff; }
.integ__bar { position: relative; height: .6rem; background: rgba(160, 175, 255, .12); overflow: hidden; }
.integ__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 1)); background: linear-gradient(90deg, #A8F4FF, #FFFFFF 40%, #FFD27A); transition: transform .15s linear; }
.integ__ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(5, 6, 15, .9) calc(20% - 1px) 20%); }
.carrier.is-low { border-color: rgba(255, 51, 85, .7); }
.carrier.is-low .integ__fill { background: linear-gradient(90deg, var(--danger), #FF8FA0); animation: nova-pulse .35s ease-in-out infinite; }
.carrier__hint { font-size: .85rem; color: var(--ink-2); display: flex; align-items: center; gap: .3rem; }

/* ───────────── bottom: squads, deploy, flux, module ───────────── */
.hbot { position: absolute; bottom: .8rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .45rem; transition: opacity .3s; }
.hbot.is-dead .squads { opacity: .8; }
.squads { display: flex; gap: .45rem; }
.sq {
  position: relative; display: flex; align-items: center; gap: .5rem; width: 12.2rem; padding: .4rem .6rem .45rem .4rem;
  background: linear-gradient(180deg, rgba(8, 10, 26, .82), rgba(8, 10, 26, .68)); border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - .55rem) 0, 100% .55rem, 100% 100%, 0 100%);
  transition: border-color .15s, background .15s, transform .2s var(--ease-out);
  --bub: 1;
}
/* Unselected squads dim their content, never the plate: a translucent card let ships and Pyre bleed through the text. */
.sq:not(.is-selected) .sq__glyph, .sq:not(.is-selected) .sq__main { opacity: .7; transition: opacity .15s; }
.sq.is-selected { opacity: 1; border-color: var(--gold); background: linear-gradient(180deg, rgba(40, 32, 8, .88), rgba(8, 10, 26, .72)); transform: translateY(-3px); }
.sq.is-selected::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.sq.is-empty { border-style: dashed; }
.sq.is-empty .sq__glyph { width: 1.9rem; height: 1.9rem; border: 1px dashed var(--line-2); transform: rotate(45deg) scale(.62); }
.sq__key { position: absolute; top: .15rem; left: .3rem; font-family: var(--f-mono); font-size: .6rem; font-weight: 700; color: var(--ink-3); }
.sq.is-selected .sq__key { color: var(--gold); }
.sq__glyph { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-top: .3rem; }
.sq__glyph .glyph { width: 2rem; height: 2rem; color: var(--ink-warm); }
.sq__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .18rem; }
.sq__row { display: flex; align-items: baseline; gap: .4rem; }
.sq__name { font-family: var(--f-display); font-size: .92rem; font-weight: 700; letter-spacing: .03em; }
.sq__state { margin-left: auto; font-size: .7rem; font-family: var(--f-display); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.sq[data-state="hunt"] .sq__state, .sq[data-state="fling"] .sq__state, .sq[data-state="inhale"] .sq__state { color: var(--gold); }
.sq[data-state="warpin"] .sq__state { color: var(--violet); }
.sq__pips { display: flex; gap: 3px; height: .42rem; }
.sq__pips i { flex: 1; max-width: 1.4rem; background: var(--ink-warm); box-shadow: 0 0 4px rgba(255, 244, 224, .5); }
.sq__pips i.is-dead { background: rgba(160, 175, 255, .16); box-shadow: none; }
.sq[data-unit="bulwark"] .sq__pips i { max-width: none; background: linear-gradient(90deg, var(--ok) calc(var(--bub) * 100%), rgba(124, 242, 182, .18) calc(var(--bub) * 100%)); }
.sq.is-bubdown[data-unit="bulwark"] .sq__pips i { background: rgba(255, 51, 85, .45); }
.sq.is-weak .sq__pips i:not(.is-dead) { background: var(--danger); box-shadow: 0 0 4px var(--danger); }
.sq__cdrow { display: flex; align-items: center; gap: .4rem; }
.sq__cd { flex: 1; height: 3px; background: rgba(160, 175, 255, .14); --p: 0; }
.sq__cd i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p)); background: var(--ink-3); }
.sq.is-ready .sq__cd i { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.sq__cdtext { font-family: var(--f-mono); font-size: .62rem; color: var(--ink-3); white-space: nowrap; min-width: 4.4rem; text-align: right; }
.sq.is-ready .sq__cdtext { color: var(--gold); }
.sq.is-od { box-shadow: inset 0 0 0 1px var(--gold), 0 0 14px -4px var(--gold); }

.hbot__row { display: flex; align-items: center; gap: .55rem; }
.flux { position: relative; display: flex; align-items: baseline; gap: .45rem; padding: .25rem .75rem; background: rgba(8, 10, 26, .75); border: 1px solid rgba(255, 211, 77, .35); min-width: 7.5rem; }
.flux__label { font-family: var(--f-display); font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.flux__num { font-family: var(--f-mono); font-size: 1.35rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.flux.is-deny { animation: shake .4s ease-in-out; border-color: var(--danger); }
.flux__pops { position: absolute; right: .3rem; bottom: 100%; width: 0; height: 0; }
.flux__pop { position: absolute; right: 0; bottom: 0; font-family: var(--f-mono); font-size: 1rem; font-weight: 700; color: var(--gold); text-shadow: 0 0 8px rgba(255, 211, 77, .8); animation: flux-pop 1.25s var(--ease-out) forwards; white-space: nowrap; }
.flux__pop.is-refund { color: var(--ok); font-size: 1.2rem; }
.flux__pop.is-shutdown { color: #fff; font-size: 1.2rem; }
.flux__pop.is-retype { color: var(--violet); }
@keyframes flux-pop { 0% { transform: translateY(8px) scale(.7); opacity: 0; } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { transform: translateY(-2.4rem) scale(1); opacity: 0; } }
.deploy { display: flex; gap: .25rem; }
.dk { display: flex; align-items: center; gap: .3rem; padding: .2rem .45rem .2rem .25rem; background: rgba(8, 10, 26, .72); border: 1px solid var(--line); transition: opacity .2s, filter .2s; }
.dk__glyph .glyph { width: 1.25rem; height: 1.25rem; color: var(--ink-warm); }
.dk__cost { font-family: var(--f-mono); font-size: .76rem; color: var(--gold); }
.dk.is-poor { opacity: .42; filter: grayscale(1); }
.dk.is-poor .dk__cost { color: var(--ink-3); }
.dk.is-deny { animation: shake .4s ease-in-out; border-color: var(--danger); opacity: 1; filter: none; }
.cdchip { position: relative; display: flex; align-items: center; gap: .35rem; padding: .2rem .55rem .2rem .25rem; background: rgba(8, 10, 26, .72); border: 1px solid var(--line); --p: 1; }
.cdchip__dial { position: relative; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: conic-gradient(rgba(255, 244, 224, .25) calc(var(--p) * 360deg), rgba(160, 175, 255, .06) 0); }
.cdchip__dial .glyph { width: 1.1rem; height: 1.1rem; }
.cdchip__boost { font-family: var(--f-display); font-weight: 700; font-size: 1rem; line-height: 1; color: var(--tide-l); }
.cdchip__text { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-3); min-width: 3.4rem; }
.cdchip.is-ready { border-color: rgba(255, 255, 255, .3); }
.cdchip.is-ready .cdchip__dial { background: radial-gradient(circle, rgba(255, 244, 224, .25), transparent 70%); box-shadow: 0 0 0 1px rgba(255, 244, 224, .6); }
.cdchip.is-ready .cdchip__text { color: var(--ink); }
.cdchip--mod[data-mod="NOVA"].is-ready .cdchip__dial { box-shadow: 0 0 0 1px var(--magenta), 0 0 10px -2px var(--magenta); }

/* ───────────── minimap ───────────── */
.minimap { position: absolute; right: .9rem; bottom: .9rem; width: max(240px, 14.4rem); aspect-ratio: 240 / 140; background: rgba(5, 6, 15, .78); border: 1px solid var(--line-2); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 12px 30px -10px rgba(0, 0, 0, .8); }
.minimap::before { content: ''; position: absolute; left: -1px; top: -1px; width: 2rem; height: 2px; background: var(--gold); }
.minimap__canvas { display: block; width: 100%; height: 100%; }

/* ───────────── chat ───────────── */
/* Never wider than the gap left of the centred squad strip. */
.hchat { position: absolute; left: .9rem; bottom: .9rem; width: clamp(15rem, calc(50vw - 26.6rem), 27rem); display: flex; flex-direction: column; gap: .35rem; }
@media (max-width: 1500px) { .hchat__hint { display: none; } }
.hchat__log { display: flex; flex-direction: column; gap: .12rem; max-height: 11rem; overflow: hidden; font-size: .95rem; }
.hchat__log .chatline { padding: .1rem .5rem; background: linear-gradient(90deg, rgba(8, 10, 26, .7), transparent); transition: opacity 1.2s; }
.hchat__log .chatline.is-faded { opacity: 0; }
.hchat.is-open .hchat__log { overflow-y: auto; pointer-events: auto; }
.hchat.is-open .hchat__log .chatline.is-faded { opacity: .85; }
.hchat__bar { display: none; align-items: center; gap: .4rem; padding: .25rem .3rem; background: rgba(8, 10, 26, .9); border: 1px solid var(--line-2); pointer-events: auto; }
.hchat.is-open .hchat__bar { display: flex; }
.hchat__scope { flex: none; padding: .15rem .5rem; border: 1px solid var(--violet); background: transparent; font-family: var(--f-display); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.hchat.is-all .hchat__scope { border-color: var(--gold); color: var(--gold); }
.hchat__input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1rem; color: var(--ink); padding: .2rem; }
.hchat__input:focus { outline: none; }
.hchat__hint { font-family: var(--f-mono); font-size: .62rem; color: var(--ink-3); white-space: nowrap; }

/* ───────────── skirmish tutorial ───────────── */
/* The card never swallows the mouse: fire / fling clicks pass through to the canvas; only Hide takes clicks. */
.tut { position: absolute; left: .9rem; top: 34%; width: 16.5rem; padding: .7rem .8rem; background: rgba(8, 10, 26, .8); border: 1px solid var(--line-2); border-top: 2px solid var(--gold); pointer-events: none; animation: toast-in .5s var(--ease-out); }
.tut__skip { pointer-events: auto; }
.tut__ease { display: flex; align-items: center; gap: .4rem; margin: -.1rem 0 .55rem; font-size: .8rem; color: var(--ok); white-space: nowrap; }
.tut__easenum { margin-left: auto; font-family: var(--f-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.tut__easedot { flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); animation: nova-pulse 1.2s ease-in-out infinite; }
.tut.is-leaving { animation: toast-out .5s ease-in both; }
/* All four steps done while the bots still go easy: the card folds to its header and the countdown until it ends. */
.tut.is-complete { width: auto; min-width: 14rem; padding-bottom: .5rem; border-top-color: var(--ok); }
.tut.is-complete .tut__list { display: none; }
.tut.is-complete .tut__head { color: var(--ok); }
.tut.is-complete .tut__ease { margin-bottom: 0; }
.tut__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; font-family: var(--f-display); font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.tut__skip { border: 0; background: transparent; color: var(--ink-3); font-size: .8rem; padding: .1rem .3rem; }
.tut__skip:hover, .tut__skip:focus-visible { color: var(--ink); outline: none; text-decoration: underline; }
.tut__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.tut__step { display: flex; gap: .55rem; opacity: .5; transition: opacity .3s; }
.tut__step.is-current { opacity: 1; }
.tut__step.is-done { opacity: .75; }
.tut__check { flex: none; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: .7rem; }
.tut__step.is-current .tut__check { border-color: var(--gold); color: var(--gold); }
.tut__step.is-done .tut__check { background: var(--ok); border-color: var(--ok); color: #06301C; }
.tut__body { display: flex; flex-direction: column; font-size: .88rem; color: var(--ink-2); line-height: 1.3; }
.tut__body b { font-family: var(--f-display); color: var(--ink); font-size: .92rem; }
.tut__step.is-done .tut__body b { text-decoration: line-through; text-decoration-color: var(--ok); }
/* Only the step you are on explains itself; the others are one-line titles, so the coach stays a small card at the
   arena's edge instead of a 250 px slab over the left flank. */
.tut__step:not(.is-current) .tut__body > span { display: none; }
.tut__step:not(.is-current) .tut__check { width: 1.1rem; height: 1.1rem; font-size: .62rem; }
.tut__step.is-current .tut__body > span { animation: toast-in .3s var(--ease-out) both; }

/* ───────────── scoreboard ───────────── */
.sb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.97); width: min(60rem, 92vw); padding: 1rem 1.2rem 1.2rem; background: rgba(6, 8, 22, .96); border: 1px solid var(--line-2); opacity: 0; transition: opacity .15s, transform .2s var(--ease-out); text-shadow: none; }
.sb.is-open { opacity: 1; transform: translate(-50%, -50%); }
.hud.is-sb .banner, .hud.is-sb .htoasts, .hud.is-pw .banner { opacity: 0 !important; }
/* The Esc menu is modal: a banner or notice left glowing behind its dim reads as part of the menu (LOOSE! over "Menu"). */
.hud:has(.menu.is-open) .banner, .hud:has(.menu.is-open) .htoasts { opacity: 0 !important; transition: none; }
.sb__head { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin-bottom: .8rem; }
.sb__team { display: flex; align-items: center; gap: .7rem; font-family: var(--f-display); letter-spacing: .2em; color: var(--team); }
.sb__team b { font-size: 1.05rem; }
.sb__score { font-family: var(--f-mono); font-size: 2rem; font-weight: 700; letter-spacing: 0; }
.sb__clock { font-family: var(--f-mono); font-size: 1.1rem; color: var(--ink-2); }
.sb__body { display: flex; flex-direction: column; gap: .8rem; }
.sb__table { width: 100%; border-collapse: collapse; border-left: 3px solid var(--team); }
.sb__table th, .sb__table td { padding: .35rem .6rem; text-align: left; white-space: nowrap; }
.sb__table thead th { font-family: var(--f-display); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--team); background: color-mix(in srgb, var(--team) 10%, transparent); }
.sb__table tbody tr { border-bottom: 1px solid rgba(150, 168, 255, .08); }
.sb__table tbody tr.is-me { background: rgba(255, 211, 77, .07); }
.sb__table tbody tr.is-down { opacity: .55; }
.sb__table th[scope="row"] { width: 34%; }
.sb__table td, .sb__table th { vertical-align: middle; }
.sb__pilot { display: flex; align-items: center; gap: .4rem; min-width: 12rem; }
.sb__name { font-family: var(--f-display); font-size: 1rem; font-weight: 600; }
.sb__streak .glyph { width: .85rem; height: .85rem; color: var(--gold); }
.sb__carry .glyph { width: 1rem; height: 1rem; color: #fff; }
.sb__modin { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; color: var(--ink-2); vertical-align: middle; }
.sb__modin .glyph { width: 1.1rem; height: 1.1rem; }
.sb__fleet { display: inline-flex; gap: .25rem; vertical-align: middle; }
.sb__slot { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; background: rgba(160, 175, 255, .08); color: var(--team-l); }
.sb__slot .glyph { width: 1.25rem; height: 1.25rem; }
.sb__slot.is-empty { background: transparent; border: 1px dashed rgba(160, 175, 255, .2); }
.sb__slot.is-ghost { opacity: .5; }
.sb__num { font-family: var(--f-mono); text-align: right !important; width: 3.2rem; }
.sb__num--hot { color: var(--gold); font-weight: 700; }

/* ───────────── ping wheel ───────────── */
.pw { position: fixed; width: 0; height: 0; opacity: 0; pointer-events: none; transition: opacity .12s; --r: 5.9rem; }
.pw.is-open { opacity: 1; }
.pw__ring { position: absolute; left: calc(var(--r) * -1.42); top: calc(var(--r) * -1.42); width: calc(var(--r) * 2.84); height: calc(var(--r) * 2.84); border-radius: 50%; background: radial-gradient(circle, rgba(6, 8, 22, .15) 20%, rgba(6, 8, 22, .82) 42%, rgba(6, 8, 22, .82) 70%, transparent 71%); border: 1px solid transparent; }
.pw.is-open .pw__ring { animation: pw-in .18s var(--ease-out); }
@keyframes pw-in { from { transform: scale(.7); opacity: 0; } }
.pw__center { position: absolute; left: -2.2rem; top: -2.2rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(6, 8, 22, .9); }
.pw__centertext { font-family: var(--f-display); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-align: center; color: var(--ink); line-height: 1.1; padding: 0 .2rem; }
.pw__opt { position: absolute; left: calc(var(--x) * var(--r)); top: calc(var(--y) * var(--r)); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 5.2rem; color: var(--ink-2); transition: transform .12s var(--ease-out), color .12s; }
.pw__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(6, 8, 22, .85); }
.pw__icon .glyph { width: 1.3rem; height: 1.3rem; }
.pw__label { font-family: var(--f-display); font-size: .7rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.pw__opt.is-on { color: var(--gold); transform: translate(-50%, -50%) scale(1.14); }
.pw__opt.is-on .pw__icon { border-color: var(--gold); background: rgba(40, 32, 8, .95); box-shadow: 0 0 16px -2px var(--gold); }
.pw__opt--attack.is-on, .pw__opt--help.is-on { color: #FF8FA0; }
.pw__opt--attack.is-on .pw__icon, .pw__opt--help.is-on .pw__icon { border-color: var(--danger); box-shadow: 0 0 16px -2px var(--danger); background: rgba(40, 8, 16, .95); }

/* ───────────── Esc menu ───────────── */
.menu { position: absolute; inset: 0; display: none; place-items: center; background: rgba(3, 4, 12, .55); pointer-events: auto; text-shadow: none; }
.menu.is-open { display: grid; animation: toast-in .25s var(--ease-out); }
.menu__card { width: min(22rem, 90vw); padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; --team: var(--gold); background: rgba(9, 11, 26, .94); }
.menu__title { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; letter-spacing: .12em; }
.menu__note { font-size: .9rem; color: var(--ink-3); margin-bottom: .5rem; }
.menu__note.is-paused { display: flex; align-items: center; gap: .45rem; font-family: var(--f-display); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.menu__note.is-paused::before { content: ''; width: .62rem; height: .75rem; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.menu__main, .menu__confirm { display: flex; flex-direction: column; gap: .45rem; }
.menu__confirm { display: none; }
.menu__card.is-confirm .menu__main { display: none; }
.menu__card.is-confirm .menu__confirm { display: flex; }
.menu__warn { font-size: 1rem; color: var(--ink-2); margin-bottom: .3rem; }
.menu__room { margin: -.3rem 0 .5rem; font-size: .9rem; color: var(--ink-3); }
.menu__code { font-family: var(--f-mono); font-weight: 700; letter-spacing: .14em; margin-right: -.14em; color: var(--gold); }

/* ── 1024-class screens: the bottom row must fit between the chat and the 240 px minimap ── */
@media (max-width: 1180px) {
  .dk__glyph { display: none; }                         /* key + cost say it; the glyph returns ≥ 1180 px */
  .dk { padding-left: .25rem; }
  .cdchip--boost .cdchip__text { display: none; }       /* the dial fill carries the cooldown */
  .cdchip--boost { padding-right: .3rem; }
  .cdchip__text { min-width: 2.6rem; }
  .flux { min-width: 6.4rem; padding: .25rem .6rem; }
  .hbot__row { gap: .4rem; }
}
/* ── ≤ 1060 px (960 = a half-screen window on a 1920 monitor): the type stops shrinking at 13 px while the minimap
   stays 240 px, so the strip is centred in the gap between the chat column (15rem) and the minimap instead of on the
   screen, and tightened so it always ends ≥ 8 px left of the minimap (even with a 4-digit Flux). ── */
@media (max-width: 1060px) {
  .hbot { left: calc((15.4rem + 100vw - max(240px, 14.4rem) - .9rem) / 2); }     /* a hair left of centre: the minimap is solid, the chat mostly empty */
  .flux__num { font-size: 1.25rem; }
  .sq { width: 11.2rem; gap: .4rem; padding-right: .5rem; }
  .sq__cdtext { min-width: 3.6rem; }
  .hbot__row { gap: .3rem; }
  .deploy { gap: .2rem; }
  .dk { gap: .2rem; padding: .2rem .3rem .2rem .2rem; }
  .flux { min-width: 5.6rem; gap: .35rem; padding: .25rem .5rem; }
  .cdchip { padding-right: .4rem; }
  .cdchip__text { min-width: 2.3rem; }
}