/* The angular skin over the match HUD: angular panels with chamfered corners, thin bright borders,
   phase-coloured segments, a crisper ability bar with a clock sweep, big readable numbers. Loaded last; it only
   restyles (no layout behaviour or ids change). Desktop only. */
:root {
  --ar-panel: linear-gradient(180deg, rgba(16, 26, 42, .92), rgba(8, 13, 22, .92));
  --ar-line: rgba(110, 200, 255, .32);
  --ar-line-hi: rgba(150, 215, 245, .55);
  --ar-cut: 9px;
  --ar-ally-hp: linear-gradient(180deg, #7ed6ea, #2aa4c4);
  --ar-me-hp: linear-gradient(180deg, #84e6a8, #34b866);
  --ar-foe-hp: linear-gradient(180deg, #ec8692, #c8364e);
}
/* One chamfer shape: top-left and bottom-right corners cut. */
.ucard, #turnlog ol, #logBtn, .toast, #tip, #kit, #turnsum, #explain, #tileinfo, .ibtn, #skip, #bank, .cat, #hint {
  clip-path: polygon(var(--ar-cut) 0, 100% 0, 100% calc(100% - var(--ar-cut)), calc(100% - var(--ar-cut)) 100%, 0 100%, 0 var(--ar-cut));
  border-radius: 0 !important;
}
.ucard, #turnlog ol, #logBtn, .toast, #tip, #kit, #turnsum, #explain, #tileinfo, .ibtn, #skip, #bank, .cat, #hint, #ucardTip .ucard {
  background: var(--ar-panel);
  border-color: var(--ar-line);
  box-shadow: inset 0 1px 0 rgba(160, 225, 255, .14), inset 0 0 0 1px rgba(110, 200, 255, .06);
  /* The panels are near-opaque: no backdrop blur (blur under a clip-path costs a lot every frame). */
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.ibtn, #bank, .cat, #skip, #hint { --ar-cut: 6px; }
.ibtn:hover, #skip:hover { border-color: var(--ar-line-hi); box-shadow: inset 0 0 7px rgba(80, 190, 255, .21); }
.ibtn.on { background: linear-gradient(180deg, rgba(120, 24, 36, .9), rgba(60, 10, 18, .9)); border-color: #ff5a6a; }
#skip { border-color: var(--ar-line-hi); letter-spacing: .14em; }

/* Unit cards: a team-coloured edge bar and a glowing top rule. */
.ucard { position: relative; border-left-width: 1px; }
.ucard::before { content: ""; position: absolute; left: 0; top: var(--ar-cut); bottom: 0; width: 3px; background: var(--ac, var(--ally)); box-shadow: 0 0 4px color-mix(in srgb, var(--ac, var(--ally)) 60%, transparent); }
.ucard.t1::before { background: var(--enemy); box-shadow: 0 0 4px color-mix(in srgb, var(--enemy) 60%, transparent); }
#cardsR .ucard { border-right-width: 1px; }
#cardsR .ucard::before { left: auto; right: 0; top: 0; bottom: var(--ar-cut); }
.ucard.me { border-color: rgba(63, 196, 224, .6); box-shadow: inset 0 0 8px rgba(63, 196, 224, .1), inset 0 1px 0 rgba(160, 225, 255, .25); }
.ucard .hpb { border-radius: 1px; height: 13px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ucard .hpb i { background: var(--ar-ally-hp); }
.ucard.me .hpb i { background: var(--ar-me-hp); }
.ucard.t1 .hpb i { background: var(--ar-foe-hp); }
/* Segment ticks every 10% on card HP bars. */
.ucard .hpb::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, .45) calc(10% - 1px) 10%); }
.ucard .hpb em { z-index: 2; font-size: 10px; }
.ucard .nm { font-weight: 700; letter-spacing: .02em; }

/* Labels over the units: chunky segmented bars in team colours (you: green; allies: cyan; enemies: red). */
.ulabel .pip .bar { width: 56px; height: 8px; border-radius: 1px; border-color: rgba(0, 0, 0, .8); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 4px rgba(0, 0, 0, .6); }
.ulabel.t0 .bar i { background: var(--ar-ally-hp); }
.ulabel.me .bar i { background: var(--ar-me-hp); }
.ulabel.t1 .bar i { background: var(--ar-foe-hp); }
.ulabel .bar.en i { background: var(--energy); }
.ulabel .pip .bar::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(0, 0, 0, .55) calc(12.5% - 1px) 12.5%); }
.ulabel .nm { font-weight: 700; }

/* Phase tracker: a row of slanted segments, the live one lit in its phase colour. */
#phases .steps { gap: 2px; padding: 0; background: none; border: 0; backdrop-filter: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); }
#phases .arr { display: none; }
#phases .step { border-radius: 0; padding: 4px 16px; min-width: 64px; justify-content: center; font-size: 11px; letter-spacing: .16em;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ph) 16%, #0e1626), color-mix(in srgb, var(--ph) 8%, #070b13));
  color: color-mix(in srgb, var(--ph) 70%, #8d9ab0); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ph) 55%, transparent); }
#phases .step.on { color: #071019; background: linear-gradient(180deg, color-mix(in srgb, var(--ph) 70%, #fff), var(--ph)); box-shadow: none; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
#phases .step.done { opacity: .5; }
#phases .wt { margin-top: 3px; font-size: 11px; letter-spacing: .04em; }

/* Ability bar: chamfered tiles with a thin bright frame, a lit phase band, a clock sweep with a bright edge. */
.slot { border-radius: 0; width: 78px; height: 78px; border: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--ph) 22%, #1a2538), #070b13 78%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ph) 45%, rgba(110, 200, 255, .3)), inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -18px 24px rgba(0, 0, 0, .45); }
.slot .band { height: 3px; }
.slot .ic { font-size: 24px; }
.slot .nm { font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 2px #000; }
.slot .k { left: auto; right: 6px; top: 4px; font: 800 10px var(--ui); color: rgba(220, 240, 255, .75); }
.slot.cd::after { background: conic-gradient(rgba(2, 5, 10, .72) var(--sw), rgba(190, 235, 255, .9) var(--sw) calc(var(--sw) + 1.5deg), transparent 0); }
.slot.ult.cd::after { background: conic-gradient(rgba(2, 5, 10, .66) var(--sw), transparent 0); }   /* the ult fills with energy: no edge line */
.slot .cdn { font: 900 32px var(--ui); -webkit-text-stroke: 4px #05080d; paint-order: stroke fill; text-shadow: 0 0 12px rgba(0, 0, 0, .8); }
.slot:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--ph), inset 0 0 18px color-mix(in srgb, var(--ph) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
.slot.aiming { box-shadow: inset 0 0 0 2px var(--ph), inset 0 0 26px color-mix(in srgb, var(--ph) 55%, transparent); }
.slot.chosen { box-shadow: inset 0 0 0 2px var(--ph), inset 0 0 16px color-mix(in srgb, var(--ph) 35%, transparent); }
.slot.chosen::before { right: auto; left: 14px; top: 3px; }
.slot.ult.charged { animation: ar-ult 1.6s ease-in-out infinite; }
@keyframes ar-ult { 0%, 100% { box-shadow: inset 0 0 0 2px rgba(168, 138, 230, .8), inset 0 0 9px rgba(168, 138, 230, .24); } 50% { box-shadow: inset 0 0 0 2px #d6c2ff, inset 0 0 15px rgba(168, 138, 230, .45); } }
/* The dock sits on a faint angular plate. */
#dock::before { content: ""; position: absolute; left: -18px; right: -18px; top: -10px; bottom: -8px; z-index: -1; pointer-events: none;
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(10, 18, 30, .45), rgba(4, 8, 14, .8)); border-top: 1px solid var(--ar-line);
  box-shadow: inset 0 1px 0 rgba(120, 210, 255, .35); }
.cat { border-left: 3px solid var(--ph); font-weight: 700; }
.cat.aiming, .cat.chosen { box-shadow: inset 0 0 0 1px var(--ph), inset 0 0 12px color-mix(in srgb, var(--ph) 35%, transparent); }

/* Lock in: a crisp ring with a bright arc. */
#lock { background: radial-gradient(circle at 50% 35%, #1c4a62, #08131d 72%); box-shadow: 0 0 0 1px var(--ar-line), 0 0 14px rgba(63, 196, 224, .18), inset 0 0 10px rgba(63, 196, 224, .12); }
#lock circle { stroke-width: 5; }
#lock .lbl { letter-spacing: .14em; }
#lock .secs { font: 800 14px var(--ui); color: #dff6ff; }
#lock.done { background: radial-gradient(circle at 50% 35%, #1f6a46, #08170f 72%); box-shadow: 0 0 0 1px rgba(79, 209, 165, .5), 0 0 14px rgba(79, 209, 165, .21); }

/* Phase banner: the name on a band of its colour that sweeps across, with bright rules above and below. */
#banner { padding: 8px 120px; letter-spacing: .32em;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ph) 28%, transparent) 25%, color-mix(in srgb, var(--ph) 28%, transparent) 75%, transparent);
  border-top: 1px solid transparent; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--ph) 30%, var(--ph) 70%, transparent) 1; }
#banner.pop { animation-name: ar-pop; }
@keyframes ar-pop {
  0% { opacity: 0; transform: translateX(-50%) scaleX(.2); letter-spacing: .05em; }
  14% { opacity: 1; transform: translateX(-50%) scaleX(1.04); }
  22% { transform: translateX(-50%) scaleX(1); letter-spacing: .32em; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1); }
}
/* The sudden-death banner is long and big: keep its own tighter spacing (scores.css) so it fits the screen. */
#banner.big { padding: 8px 60px; }
#banner.big.pop { animation-name: ar-pop-big; }
@keyframes ar-pop-big {
  0% { opacity: 0; transform: translateX(-50%) scaleX(.2); }
  14% { opacity: 1; transform: translateX(-50%) scaleX(1.04); }
  22% { transform: translateX(-50%) scaleX(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1); }
}

/* Turn log and the top bar. */
#turnlog li { border-left-width: 3px; }
#top { background: linear-gradient(180deg, rgba(6, 12, 22, .9), rgba(6, 12, 22, 0)); }

/* Floating numbers: a harder pop and a slight italic lean (big, readable combat numbers). */
.ftext span { font-style: italic; }
@keyframes fpop { 0% { transform: scale(1.8); opacity: 0; } 30% { opacity: 1; transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.ftext.heal { text-shadow: 0 0 7px rgba(80, 255, 150, .33), 0 3px 6px rgba(0, 0, 0, .7); }

/* ==== HUD layout and consistency (2026-10). One scale for the whole match HUD:
   spacing 4 / 8 / 12 / 16; type 10 (caps labels) / 11 (meta) / 12 (secondary) / 13 (body) / 16+ (numbers);
   weights 600 / 700 / 800; secondary buttons 32 px high, compact controls 24 px; icons 16 px.
   One panel (--ar-panel, a 1 px --ar-line border, cut corners) and one accent rule: a 3 px edge in the colour of what
   it means (team cyan / enemy crimson; phase green / amber / red; tips amber). ar.css loads last, so these win. ==== */
:root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --h-btn: 32px; --h-sm: 24px; --hud-k: 1; }

/* ---- Top bar: a quieter brand; the tools in groups (view | info | settings | leave) with hairline dividers ---- */
#top { gap: var(--s3); padding: calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s3); }
#top .brand { font-size: 15px; opacity: .85; }
#top .tools { gap: var(--s3); align-items: center; }
.tgrp { display: flex; gap: var(--s1); align-items: center; }
.tgrp + .tgrp { padding-left: var(--s3); border-left: 1px solid rgba(110, 200, 255, .22); }
.ibtn { width: var(--h-btn); height: var(--h-btn); color: #cfe6f7; padding: 0; }
.ibtn svg { display: block; width: 16px; height: 16px; margin: auto; }
.ibtn.txt { font: 800 11px var(--ui); letter-spacing: .04em; }
.ibtn:hover { color: #fff; }
#leaveBtn:hover, #leaveBtn:focus-visible { color: #fff; border-color: rgba(255, 90, 106, .8); box-shadow: inset 0 0 7px rgba(255, 58, 74, .21); }
/* The sound popover hangs under the settings group (the speaker is its last button, left of Leave). */
#sndpop { top: calc(var(--h-btn) + var(--s4) + var(--s2)); right: calc(var(--s4) + var(--h-btn) + var(--s3) * 2 + 1px); }

/* ---- Centre column: the "waiting on" line on a plate; toasts clear of it ---- */
#phases .wt { margin-top: var(--s1); padding: 2px var(--s2); font: 700 11px var(--ui); background: rgba(6, 12, 22, .82); box-shadow: inset 0 0 0 1px rgba(110, 200, 255, .14); }
.mh-medal .n { font-size: 11px; }
#toasts { top: 144px; gap: var(--s1); }
.toast { padding: var(--s2) var(--s3); font: 600 13px var(--ui); color: var(--fg); border-left: 3px solid var(--ally); }
.toast.bad { border-left-color: var(--enemy); color: #ffd6dc; }

/* ---- Unit cards: the edge says the team; an ally's plan colour is a small swatch by its name ---- */
.cards { gap: var(--s1); }
#cardsL { left: var(--s4); } #cardsR { right: var(--s4); top: 60px; }
.ucard { padding: 6px var(--s2) 6px 6px; column-gap: var(--s2); }
.ucard::before { background: var(--ally); box-shadow: 0 0 4px color-mix(in srgb, var(--ally) 60%, transparent); }
.ucard[style*="--ac"] .nm::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 0 1px; vertical-align: 1px; background: var(--ac); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); transform: rotate(45deg); }
/* Not seen yet: one slim row (the header shows the "?" as well). */
.ucard.unseen { padding-top: var(--s1); padding-bottom: var(--s1); opacity: .6; }
.ucard.unseen .sub { display: none; }
.ucard.unseen .pt { grid-row: auto; height: 20px; font-size: 13px; }
.ucard.unseen .nm { font-weight: 600; color: var(--muted); }

/* ---- Kit panel: above the cards it opens over ---- */
#kit { z-index: 5; top: 60px; right: var(--s4); padding: var(--s3); }
#kit .abil { padding: var(--s2); margin-top: var(--s2); }
#kit .abil .meta { font-size: 11px; }
#kit .chip { font: 600 11px var(--ui); }
#kit .cats .chip { border-left: 3px solid var(--ph, var(--line)); text-transform: capitalize; }
#kit .close { font-size: 18px; line-height: 1; }

/* ---- Dock: the catalysts as tall as the slots; the time bank reads as a button ---- */
#dock { row-gap: var(--s2); }
#cats { gap: 3px; }
#cats .cat { height: var(--h-sm); padding: 0 var(--s2); font: 700 11px var(--ui); }
#lockwrap { gap: var(--s1); }
#bank { height: var(--h-sm); display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--s2); font: 800 11px var(--ui); color: var(--fg); }
#bank b { font-size: 9px; letter-spacing: .18em; }
.slot .cdn { font-size: 28px; -webkit-text-stroke-width: 3px; }

/* ---- Tooltips: one box (#tip, the unit hover card, the ping/chat menu, the explain card, first-use tips) ---- */
#tip { padding: var(--s2) var(--s3); font-size: 12px; max-width: 320px; }
#tip b, #explain .ad-hd b { font-size: 13px; }
#tip .tcd, #tip .ad-ph { font-size: 11px; }
#explain { right: var(--s4); top: 316px; padding: var(--s2) 28px var(--s2) var(--s3); border-color: var(--ar-line); border-left: 3px solid var(--enemy); }
#social .so-menu, #social .so-line, #social .so-btn, #fttip, #spectate {
  border-radius: 0; background: var(--ar-panel); border: 1px solid var(--ar-line);
  box-shadow: inset 0 1px 0 rgba(160, 225, 255, .14), 0 10px 30px rgba(0, 0, 0, .45);
  clip-path: polygon(var(--ar-cut) 0, 100% 0, 100% calc(100% - var(--ar-cut)), calc(100% - var(--ar-cut)) 100%, 0 100%, 0 var(--ar-cut));
  backdrop-filter: none; -webkit-backdrop-filter: none; }
#social .so-menu { padding: var(--s2); gap: 2px; min-width: 200px; }
#social .so-menu button { padding: 6px var(--s2); border-radius: 0; font: 600 13px var(--ui); }
#social .so-mh { font-size: 12px; padding: 2px var(--s1) var(--s2); }
#social .so-line { padding: 6px var(--s3); border-right: 3px solid var(--pc); font: 600 12px var(--ui); }
#social .so-btn { --ar-cut: 6px; width: var(--h-btn); height: var(--h-btn); font-size: 15px; display: grid; place-items: center; padding: 0; }
#social .so-btn:hover { border-color: var(--ar-line-hi); }
#social .so-btn.on { border-color: var(--ally); box-shadow: inset 0 0 7px rgba(63, 196, 224, .21); }
#social { right: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); }
#social .so-feed { right: calc(var(--h-btn) * 2 + var(--s4)); }
/* With the ping or quick-chat menu open, the feed moves up over it instead of sliding under it. */
#social:has(.so-menu:not([hidden])) .so-feed { right: 0; bottom: calc(100% + var(--s2)); }
#social .so-btn svg { display: block; }
/* First-use tip: the same box with an amber edge, and a plain "Tip" label instead of an emoji. */
#fttip { right: var(--s4); top: 316px; width: 320px; padding: var(--s2) var(--s3); border-left: 3px solid #ffd84a; }
#fttip .ft-hd b { font-size: 10px; letter-spacing: .16em; }
#fttip .ft-hd b::before { content: 'Tip · '; color: rgba(255, 216, 74, .7); }
#fttip p { font-size: 13px; }

/* ---- Lower corners and banners ---- */
#turnlog { left: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); width: 248px; }
#logBtn { height: var(--h-sm); padding: 0 var(--s2); font-size: 10px; }
#turnlog ol { max-height: 156px; padding: var(--s1) 0; font-size: 12px; background: linear-gradient(180deg, rgba(16, 26, 42, .86), rgba(8, 13, 22, .86)); }
#turnlog li { padding: 1px var(--s2) 1px 10px; }
#turnlog li.lt { font-size: 10px; margin: var(--s1) 0 2px; }
#turnsum { left: var(--s4); padding: var(--s2) var(--s3); }
#skip { right: var(--s4); bottom: calc(var(--s4) + var(--h-btn) + var(--s3) + env(safe-area-inset-bottom)); height: var(--h-btn); padding: 0 var(--s3); font: 800 12px var(--title); letter-spacing: .14em; }
#hint { padding: 6px var(--s3); font-size: 12px; }
/* Fallen: the banner sits above the (dimmed) dock instead of on it. */
#spectate { bottom: calc(144px + env(safe-area-inset-bottom)); padding: var(--s2) var(--s4); font: 600 13px var(--ui); color: var(--fg); border-left: 3px solid var(--ally); }
#dock.off { opacity: .35; }

/* ---- Big screens: the HUD grows with the board (transforms only, so rect-based tooltips and spotlights still line up) ---- */
@media (min-width: 1760px) and (min-height: 1000px) {
  :root { --hud-k: 1.18; --h-btn: 36px; }
  .ibtn svg { width: 18px; height: 18px; }
  #top .brand { font-size: 17px; }
  #turninfo.mh { transform: translateX(-50%) scale(var(--hud-k)); transform-origin: 50% 0; }
  #phases { top: 108px; transform: translateX(-50%) scale(1.1); transform-origin: 50% 0; }
  #toasts { top: 172px; }
  #cardsL { transform: scale(var(--hud-k)); transform-origin: 0 0; }
  #cardsR { transform: scale(var(--hud-k)); transform-origin: 100% 0; }
  #dock { transform: translateX(-50%) scale(var(--hud-k)); transform-origin: 50% 100%; }
  #hint { bottom: calc(140px + env(safe-area-inset-bottom)); }
  #spectate { bottom: calc(168px + env(safe-area-inset-bottom)); }
  #turnlog { width: 280px; } #turnlog ol { max-height: 200px; font-size: 13px; }
  #turnsum, #fttip, #explain { top: 372px; }
  #fttip, #explain { width: 330px; }
  #kit { top: 66px; }
}

/* ==== Turn order (turnorder.js): a slim strip of portraits under the phase tracker, grouped by phase, each with its
   place (1st, 2nd...). Planning: the predicted order (Any = plan unknown); replay: who is acting now, ticked off after.
   Team colour on the portrait frame (yours cyan, the enemy crimson), the phase colour on each group's edge. ==== */
#torder { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s1); pointer-events: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55)); }
#torder .to-i { display: flex; align-items: center; height: 30px; padding: 0 var(--s2); font: 800 9px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: #cfe6f7; background: rgba(6, 12, 22, .82); box-shadow: inset 0 0 0 1px rgba(110, 200, 255, .14); cursor: help; }
#torder .to-g { --ar-cut: 5px; display: flex; align-items: center; gap: 3px; height: 30px; padding: 0 6px 0 5px; border-left: 3px solid var(--ph);
  background: linear-gradient(180deg, rgba(14, 24, 40, .9), rgba(6, 11, 20, .9)); box-shadow: inset 0 0 0 1px rgba(110, 200, 255, .14);
  clip-path: polygon(var(--ar-cut) 0, 100% 0, 100% calc(100% - var(--ar-cut)), calc(100% - var(--ar-cut)) 100%, 0 100%, 0 var(--ar-cut)); transition: opacity .2s, background .2s; }
#torder .to-l { font: 800 9px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--ph) 75%, #fff); margin-right: 2px; }
#torder .to-u { --tc: var(--ally); position: relative; display: block; width: 22px; height: 22px; cursor: default; transition: transform .15s, opacity .2s; }
#torder .to-u.s1 { --tc: var(--enemy); }
#torder .to-pf { display: grid; place-items: center; width: 100%; height: 100%; box-sizing: border-box; border: 1.5px solid var(--tc); border-radius: 4px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tc) 40%, #121826), #080b12 80%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
#torder .to-pf .svgi { width: 15px; height: 15px; background: #f2fbff; }
#torder .to-pf .q { font: 800 13px var(--title); color: rgba(255, 255, 255, .7); }
#torder .to-n { position: absolute; right: -4px; bottom: -5px; padding: 0 2px; font: 800 8px/10px var(--ui); color: #061018; background: var(--tc); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7); }
#torder .to-u.me .to-pf { border-color: #fff; box-shadow: 0 0 0 1px var(--tc), inset 0 1px 0 rgba(255, 255, 255, .16); }
#torder .to-u.tent .to-pf { border-style: dashed; }
#torder .to-u.open .to-pf { opacity: .8; }
#torder .to-u.fog .to-pf { border-style: dashed; border-color: color-mix(in srgb, var(--enemy) 55%, #555); background: rgba(10, 14, 22, .9); }
#torder .to-u.fog .to-n { background: color-mix(in srgb, var(--enemy) 55%, #777); }
/* Replay: the live phase's group lights up; whoever is casting grows and glows; the ones done dim with a tick. */
#torder .to-g.live { background: linear-gradient(180deg, color-mix(in srgb, var(--ph) 26%, #0e1828), rgba(6, 11, 20, .92)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ph) 55%, transparent); }
#torder .to-g.past { opacity: .55; }
#torder .to-u.act { transform: scale(1.22); z-index: 1; }
#torder .to-u.act .to-pf { border-color: #fff; box-shadow: 0 0 0 2px var(--tc), 0 0 6px 2px color-mix(in srgb, var(--ph) 60%, transparent); animation: to-act .7s ease-in-out infinite alternate; }
@keyframes to-act { to { box-shadow: 0 0 0 2px var(--tc), 0 0 9px 4px color-mix(in srgb, var(--ph) 60%, transparent); } }
#torder .to-u.done { opacity: .42; }
#torder .to-u.done::after { content: "✓"; position: absolute; left: -3px; top: -5px; font: 900 10px/1 var(--ui); color: #84e6a8; text-shadow: 0 0 2px #000, 0 0 2px #000; }
#tip .to-tl { margin-top: 2px; font-size: 11px; color: var(--muted); }
/* Toasts clear the strip. */
#hud:has(#torder) #toasts { top: 186px; }
@media (min-width: 1760px) and (min-height: 1000px) { #hud:has(#torder) #toasts { top: 218px; } }