:root {
  color-scheme: dark;
  --bg: #0c0e19;
  --surface: #121625;
  --panel: #181b2c;
  --line: #303850;
  --text: #edf0fb;
  --muted: #b1b9ce;
  --quiet: #99a3bb;
  --signal: #c3fa72;
  --teal: #76dcc9;
  --orange: #f4ab86;
  --blue: #9eb9f9;
  --ice: #a2e8ff;
  --violet: #bea6ff;
  --mint: #a6f1db;
  --coral: #ffad9d;
  --mono: ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
  --title: 'Arial Narrow', 'Aptos Display', system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font: 15px/1.55 var(--body);
  background: var(--bg);
  color: var(--text);
}
*, *::before, *::after { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(ellipse at 66% 3%, #292333 0, transparent 47%), var(--bg); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
:where(h1, h2, h3, p) { margin: 0; }
:where(h1, h2, h3) { letter-spacing: -.035em; line-height: 1.14; }
.icon { width: 1.2em; height: 1.2em; flex: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.mono, .eyebrow, .tag, .connection, .footer, .section-hint { font-family: var(--mono); }
.muted { color: var(--muted); }
.eyebrow { color: var(--signal); font-size: .69rem; letter-spacing: .145em; font-weight: 700; }
.eyebrow .led { margin-inline-end: .55rem; }
.led { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--signal); box-shadow: 0 0 9px #a1f85e80; }
.connection.is-offline .led { background: var(--orange); box-shadow: none; }
.skip-link { position: absolute; z-index: 3; left: 1rem; top: -5rem; background: var(--signal); color: #0b140f; padding: .55rem 1rem; }
.skip-link:focus { top: .5rem; }
.visually-hidden { width: 1px; height: 1px; padding: 0; margin: -1px; position: absolute; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
.shell, .topbar-inner { max-width: 1334px; width: calc(100% - 6rem); margin-inline: auto; }
.topbar { position: relative; z-index: 2; background: #101221f7; border-bottom: 1px solid #343654; }
.topbar-inner { min-height: 68px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.25rem; }
.brand { display: inline-flex; width: max-content; align-items: center; gap: .65rem; text-decoration: none; font: 900 1.08rem var(--title); letter-spacing: .03em; }
.brand-wordmark { display: grid; gap: .12rem; font: 700 .62rem/1 var(--mono); letter-spacing: .095em; }
.brand-second { color: var(--ice); font: 900 1rem/1 var(--title); letter-spacing: .035em; }
.brand-mark { display: block; width: 32px; height: 32px; flex: none; }
.main-nav { min-width: 0; display: flex; align-items: stretch; justify-content: center; gap: .25rem; }
.main-nav a { position: relative; display: grid; align-items: center; min-height: 68px; padding: 0 .88rem; color: var(--muted); font-size: .85rem; font-weight: 650; text-align: center; text-decoration: none; white-space: nowrap; }
.main-nav a:hover, .main-nav a[aria-current] { color: var(--text); }
.main-nav a[aria-current]::after { content: ''; height: 2px; background: linear-gradient(90deg, var(--coral), var(--mint)); position: absolute; bottom: -1px; left: .8rem; right: .8rem; }
.topbar-right { display: flex; justify-content: flex-end; align-items: center; gap: .95rem; min-width: 0; }
.connection, .section-hint { display: inline-flex; gap: .55rem; align-items: center; color: var(--muted); font-size: .65rem; letter-spacing: .075em; text-transform: uppercase; white-space: nowrap; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: .63rem; min-height: 47px; padding: .63rem .95rem; border: 1px solid transparent; color: var(--text); font-weight: 730; line-height: 1.3; text-decoration: none; transition: color .18s, background .18s, border-color .18s; }
.button-primary { background: var(--signal); color: #14200b; border-color: var(--signal); }
.button-primary:hover:not(:disabled) { background: #ddffa5; border-color: #ddffa5; }
.button-crosslink { background: var(--ice); color: #101827; border-color: var(--ice); box-shadow: 0 0 19px #95dfff2c; }
.button-crosslink:hover:not(:disabled) { background: #c6f1ff; border-color: #c6f1ff; }
.button-ghost { background: var(--mint); color: #102325; border-color: var(--mint); box-shadow: 0 0 20px #a6f1db25; }
.button-ghost:hover:not(:disabled) { background: #c5ffed; border-color: #c5ffed; }
.button-ai-security { background: #a6e9ff; color: #102034; border-color: #a6e9ff; box-shadow: 0 0 20px #a6e9ff30; }
.button-ai-security:hover:not(:disabled) { background: #cef4ff; border-color: #cef4ff; }
.button-outline { background: #171b2ce8; border-color: #48516c; }
.button-outline:hover:not(:disabled) { color: var(--signal); border-color: var(--signal); }
.button-small { min-height: 36px; padding: .43rem .65rem; font-size: .8rem; }
.button-end { margin-inline-start: .38rem; }
.button:disabled { opacity: .48; }
#account-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 115px; }
#account-button { min-width: 0; }
.hero { min-height: 435px; display: flex; position: relative; isolation: isolate; overflow: hidden; align-items: center; margin-block-start: 1.55rem; padding: 2.35rem 3.3rem; border: 1px solid #535c84; background: #141b2d; }
.hero-art { position: absolute; inset: 0; z-index: -2; background: #1c2441 url('art/ai-security-hero.webp') center 50% / cover no-repeat; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #10141ffc 0%, #10141ff2 18%, #10141fbc 34%, #10141f40 58%, transparent 77%), linear-gradient(0deg, #10141fab, transparent 38%); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, #a8c8ff06 0 1px, transparent 1px 4px); }
.hero-content { max-width: 680px; }
.hero h1 { font: 950 clamp(3.6rem, 8vw, 7.05rem)/.84 var(--title); letter-spacing: -.091em; margin-left: -.07em; white-space: nowrap; }
.hero h1 em { font-style: normal; color: var(--ice); }
.period { color: var(--signal); }
.hero h1 .period { color: var(--text); }
.hero-copy { font-weight: 680; font-size: clamp(1.02rem, 2vw, 1.24rem); margin-top: 1.32rem; }
.hero-subcopy { max-width: 395px; color: #c4c9de; margin-top: .18rem; font-size: .94rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.37rem; }
.quick-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.escalation-brief { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: .8rem; padding: .65rem .8rem; background: linear-gradient(90deg, #20241d, #151c1c 57%); border: 1px solid #5d6544; }
.escalation-emblem { display: grid; place-items: center; flex: 0 0 34px; height: 34px; color: var(--signal); border: 1px solid #5e6e43; background: #323926; }
.escalation-brief > div { flex: 1 1 115px; }
.escalation-brief > div p:last-child { color: var(--muted); margin-top: .1rem; font-size: .82rem; }
.escalation-brief .mode-link { align-self: center; margin-top: 0; padding: .35rem 0; }
.relay-brief { --mode-color: var(--ice); border-color: #575586; background: linear-gradient(90deg, #26213c, #181c2e 61%); }
.relay-brief .escalation-emblem { color: var(--ice); background: #2d3250; border-color: #625d8c; }
.relay-brief .eyebrow { color: var(--ice); }
.ghost-brief { --mode-color: var(--coral); border-color: #735465; background: linear-gradient(90deg, #302534, #201e2d 61%); }
.ghost-brief .escalation-emblem { color: var(--coral); background: #3c2935; border-color: #7b5868; }
.ghost-brief .eyebrow { color: var(--coral); }
.modes-section { margin-top: 2.3rem; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: .8rem; margin-block-end: 1.1rem; }
.section-head h2, .hand-head h2, .telemetry h2 { font-size: 1.85rem; margin-top: .3rem; }
.mode-grid, .mission-grid, .card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.mode-tile { --mode-color: var(--signal); background: var(--surface); border: 1px solid var(--line); border-top-color: color-mix(in srgb, var(--mode-color) 47%, var(--line)); padding: 1.05rem 1.1rem; min-height: 184px; display: flex; flex-direction: column; transition: background .18s; }
.mode-tile:hover { background: #1b2035; }
.mode-invite { --mode-color: var(--violet); }
.mode-campaign { --mode-color: var(--orange); }
.mode-training { --mode-color: var(--ice); }
.mode-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mode-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--mode-color) 29%, #1b282b); background: color-mix(in srgb, var(--mode-color) 8%, #0d1719); color: var(--mode-color); }
.tag { color: var(--quiet); font-size: .66rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.mode-tile h3 { font-size: 1.23rem; margin-top: .83rem; }
.mode-tile p { color: var(--muted); font-size: .86rem; margin-top: .39rem; }
.mode-link { color: var(--mode-color, var(--signal)); display: inline-flex; width: fit-content; gap: .5rem; align-items: center; margin-top: auto; padding: .85rem 0 0; font-size: .82rem; font-weight: 720; background: none; border: 0; text-align: start; text-decoration: none; }
.mode-link:hover { text-decoration: underline; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: .9rem; margin-top: 2.5rem; min-height: 65px; border-top: 1px solid #253336; color: var(--quiet); font-size: .66rem; letter-spacing: .075em; }
.footer-brand { color: var(--muted); font-weight: 700; }
.footer-mark { margin-right: .2rem; vertical-align: middle; }
.footer-version { text-align: right; }
.page-head { margin-top: 1.75rem; padding: 2rem; border: 1px solid var(--line); background: radial-gradient(ellipse at 95% 10%, #292443, transparent 65%), var(--surface); }
.page-head h1, .match-top h1 { margin: .4rem 0 .5rem; font-size: clamp(2.2rem, 5vw, 4rem); }
.page-head p:last-child { color: var(--muted); }
.campaign-chapter { margin-top: 1.5rem; }
.campaign-chapter > h2 { font-size: clamp(1.1rem, 2.8vw, 1.55rem); margin: 0; }
.campaign-chapter[data-campaign='ai_security'] > h2 { color: var(--ice); }
.mission-grid { margin-top: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campaign-chapter[data-campaign='ai_security'] .mission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mission { min-height: 228px; background: var(--surface); border: 1px solid var(--line); padding: 1.15rem; display: flex; flex-direction: column; gap: .62rem; }
.mission-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--signal); }
.mission h3 { font-size: 1.35rem; margin: 0; }
.mission p { font-size: .87rem; color: var(--muted); }
.mission .objective { color: var(--text); margin-top: auto; }
.mission .button { align-self: flex-start; }
.mission.is-locked { background: #0e1416; }
.mission.is-escalation { border-color: #53634a; }
.mission-scene { min-height: clamp(76px, 11vw, 138px); margin: -.62rem -.62rem 0; border: 1px solid #53634a; background: #192623 url('art/escalation-operations.webp') var(--mission-art-x, 0%) 50% / 200% auto no-repeat; }
.mission-edition { color: var(--signal); padding: .16rem .25rem; border: 1px solid #596c45; background: #253020; font: 700 .58rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.mission.is-escalation .mission-top { flex-wrap: wrap; justify-content: flex-start; }
.mission.is-escalation .mission-top .icon { margin-left: auto; }
.mission.is-crosslink { border-color: #65578e; }
.mission.is-crosslink .mission-top { flex-wrap: wrap; justify-content: flex-start; }
.mission.is-crosslink .mission-top .icon { margin-left: auto; }
.mission.is-crosslink .mission-scene { background-image: url('art/crosslink-operations.webp'); border-color: #65578e; }
.mission.is-crosslink .mission-edition { color: var(--ice); background: #292440; border-color: #65578e; }
.mission.is-ghost { border-color: #835f68; }
.mission.is-ghost .mission-top { flex-wrap: wrap; justify-content: flex-start; }
.mission.is-ghost .mission-top .icon { margin-left: auto; }
.mission.is-ghost .mission-scene { background-image: url('art/ghost-operations.webp'); border-color: #835f68; }
.mission.is-ghost .mission-edition { color: var(--coral); background: #38252e; border-color: #835f68; }
.mission.is-ai-security { border-color: #576e93; }
.mission.is-ai-security .mission-top { flex-wrap: wrap; justify-content: flex-start; }
.mission.is-ai-security .mission-top .icon { margin-left: auto; }
.mission.is-ai-security .mission-scene { min-height: clamp(92px, 16vw, 198px); background-image: url('art/ai-security-operations.webp'); border-color: #576e93; }
.mission.is-ai-security .mission-edition { color: var(--ice); background: #20334a; border-color: #576e93; }
.archive-toolbar { margin: 1rem 0; padding: .72rem .85rem; border: 1px solid #45556a; border-top-color: #668b93; background: linear-gradient(140deg, #202d3a, #141a28 70%); }
.archive-controls { display: grid; grid-template-columns: minmax(160px, 1.25fr) repeat(2, minmax(108px, .82fr)) minmax(132px, 1fr) minmax(180px, 1.42fr); gap: .55rem; }
.archive-control { display: grid; grid-template-rows: auto minmax(41px, 1fr); gap: .24rem; min-width: 0; }
.archive-control > span:first-child { color: var(--ice); font: 750 .67rem/1.25 var(--mono); letter-spacing: .055em; text-transform: uppercase; }
.archive-control select { width: 100%; min-width: 0; }
.archive-control select:disabled { opacity: .65; }
.search-field { display: flex; align-items: center; gap: .55rem; min-width: 190px; padding-inline: .7rem; border: 1px solid #3b4c4f; background: #0d1517; color: var(--muted); }
.search-field input { min-width: 0; border: 0; background: transparent; color: var(--text); padding: .6rem .2rem; }
.archive-search .search-field { gap: .4rem; min-width: 0; padding-inline: .58rem; border-color: #405356; background: #0c1517; }
.archive-search input { width: 100%; padding: .4rem .12rem; }
.search-field:focus-within { border-color: var(--signal); }
.search-field input:focus-visible { outline: 0; }
.archive-toolbar-footer { display: flex; flex-wrap: wrap; align-items: center; gap: .28rem .65rem; margin-top: .6rem; }
.archive-index-feedback { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; min-width: 0; font-size: .78rem; }
.archive-toolbar-footer .button { min-height: 33px; padding: .3rem .55rem; font-size: .78rem; }
.archive-toolbar-footer .button:disabled { opacity: .55; }
#archive-count { font-size: .75rem; white-space: nowrap; }
@media (max-width: 850px) {
  .archive-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-search { grid-column: 1 / -1; }
}
select, .form-input { min-height: 41px; padding: .5rem .7rem; color: var(--text); background: #0c1517; border: 1px solid #405356; }
.library-card, .hand-card, .drag-ghost {
  --card-accent: var(--teal);
  --frame-edge: color-mix(in srgb, var(--card-accent) 51%, #293141);
  display: flex;
  flex-direction: column;
  gap: .34rem;
  min-width: 0;
  position: relative;
  color: var(--text);
  background:
    linear-gradient(128deg, transparent 8%, #c8e7ff13 21%, transparent 33%),
    repeating-linear-gradient(135deg, #c4deff09 0 1px, transparent 1px 5px),
    linear-gradient(145deg, color-mix(in srgb, var(--card-accent) 26%, #1c2533) 0%, #161e2a 42%, #111723 85%);
  border: 1px solid var(--frame-edge);
  border-top: 2px solid var(--card-accent);
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #0c131ccc, inset 0 0 0 3px color-mix(in srgb, var(--card-accent) 11%, transparent), 0 5px 10px #0006;
  text-align: start;
}
.library-card { min-height: 245px; padding: .69rem; transition: border-color .18s, background .18s, transform .18s; }
button.library-card:hover, button.library-card:focus-visible { border-color: var(--card-accent); transform: translateY(-3px); }
.hand-card { padding: .48rem; min-height: 178px; }
.hand-card[aria-pressed='true'] { border-color: var(--signal); box-shadow: inset 0 0 0 2px #c3fa7255, 0 0 18px #c3fa7238; }
.hand-card:disabled { filter: saturate(.72); }
.card-attack { --card-accent: var(--orange); }
.card-tactic { --card-accent: #ffcf78; }
.card-firewall { --card-accent: var(--teal); }
.card-sensor { --card-accent: var(--blue); }
.card-upgrade { --card-accent: #b8a0ff; }
.card-reaction { --card-accent: #f0a7d7; }
.card-recovery { --card-accent: var(--signal); }
.card-protocol { --card-accent: #c1a8fe; }
.card-top { display: flex; justify-content: space-between; align-items: center; min-height: 32px; gap: .3rem; }
.card-type { display: inline-flex; gap: .24rem; align-items: center; padding: .17rem .29rem; color: var(--card-accent); border: 1px solid color-mix(in srgb, currentColor 36%, #202b3b); border-radius: 3px; background: color-mix(in srgb, currentColor 11%, #121a27); font: 800 .66rem var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.card-cost { display: inline-flex; gap: .12rem; flex: none; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: .15rem; border: 1px solid color-mix(in srgb, var(--card-accent) 78%, #818797); border-radius: 50%; background: radial-gradient(ellipse at 32% 24%, #303c48, #101823 70%); box-shadow: inset 0 0 0 2px #121724, 0 0 9px color-mix(in srgb, var(--card-accent) 26%, transparent); color: var(--card-accent); font: 850 1rem var(--mono); }
.card-type .icon { width: 1em; height: 1em; }
.card-cost .icon { width: .59em; height: .66em; fill: currentColor; stroke-width: .7; }
.card-art { color: var(--card-accent, var(--teal)); position: relative; isolation: isolate; display: grid; place-items: center; border: 1px solid color-mix(in srgb, currentColor 55%, #142125); border-radius: 4px; overflow: hidden; background: radial-gradient(ellipse at center, color-mix(in srgb, currentColor 19%, #102024), #101719 73%); }
.card-art::before { content: ''; position: absolute; z-index: -1; top: 50%; left: 0; width: 100%; aspect-ratio: 1; transform: translateY(-50%); background: var(--card-illustration, none) var(--card-art-x, 50%) var(--card-art-y, 50%) / var(--card-art-size, 400% 200%) no-repeat; }
.card-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(132deg, #cde8ff21, transparent 31%); box-shadow: inset 0 -7px 12px #090e17a0, inset 0 0 0 1px #ffffff28; }
.card-art > .icon { position: absolute; z-index: 1; left: .26rem; bottom: .21rem; width: 1.12rem; height: 1.12rem; padding: .14rem; border: 1px solid color-mix(in srgb, currentColor 42%, #101724); border-radius: 3px; background: #101724de; }
.library-card > .card-art { aspect-ratio: 1.65; }
.detail-card > .card-art { aspect-ratio: 2.05; }
.card-detail-meta { margin: .55rem 0 0; }
.card-field-notes {
  margin-top: .8rem;
  border: 1px solid #354757;
  border-radius: 5px;
  background: linear-gradient(145deg, #19242e, #141e27 70%);
}
.card-field-notes > summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .55rem .75rem;
  color: #d8eee8;
  font: 750 .77rem var(--mono);
  cursor: pointer;
  list-style: none;
}
.card-field-notes > summary::-webkit-details-marker { display: none; }
.card-field-notes > summary:hover { color: var(--teal); background: #1c2b35; }
.card-field-notes > summary .icon { flex: none; width: 1rem; height: 1rem; }
.card-field-notes .field-notes-chevron { margin-left: auto; }
.card-field-notes[open] .field-notes-chevron { transform: rotate(90deg); }
.field-notes-body {
  display: grid;
  gap: .75rem;
  padding: .78rem .75rem .85rem;
  border-top: 1px solid #354757;
  color: #d4deeb;
  font-size: .87rem;
  line-height: 1.5;
}
.field-notes-body p { margin: 0; }
.field-notes-body > .button { justify-self: start; }
.field-notes-body h3 { margin: 0 0 .27rem; font: 750 .73rem var(--mono); color: #a6d9d1; }
.field-notes-chain h3 a { color: inherit; }
.field-notes-chain h3 a .icon, .field-notes-reference-name .icon { width: .72rem; height: .72rem; vertical-align: -.08em; }
.field-notes-sources ul { display: grid; gap: .36rem; margin: 0; padding: 0; list-style: none; }
.field-notes-reference {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .55rem;
  padding: .38rem .55rem;
  border: 1px solid #344651;
  border-radius: 3px;
  background: #14212b;
}
.field-notes-source-link {
  display: grid;
  flex: 1 1 12rem;
  gap: .13rem;
  color: #d6e8f1;
  text-decoration: none;
}
.field-notes-source-link:hover, .field-notes-source-link:focus-visible { color: var(--teal); }
.field-notes-reference-name { font-weight: 700; overflow-wrap: anywhere; }
.field-notes-sources small { color: #a9c0cf; font: .71rem/1.3 var(--mono); overflow-wrap: anywhere; }
.field-notes-stage-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.archive-crossref, .dossier-back {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .27rem .42rem;
  border: 1px solid #496861;
  border-radius: 3px;
  color: #b8e7d8;
  background: #1e352f;
  font: 720 .71rem/1.35 var(--mono);
  text-decoration: none;
}
.archive-crossref:hover, .dossier-back:hover { border-color: var(--teal); color: var(--teal); }
.archive-crossref .icon, .dossier-back .icon { width: .85rem; height: .85rem; flex: none; }
.dossier-back { margin-bottom: .6rem; min-height: 2.25rem; }
.dossier-back .icon { transform: rotate(180deg); }
dialog:has(.detail-card) { width: min(94vw, 600px); }
.counter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: start; gap: .45rem; padding: 0; margin: 0; list-style: none; }
.counter-record {
  display: grid;
  align-content: start;
  gap: .32rem;
  min-width: 0;
  padding: .45rem;
  border: 1px solid #384959;
  border-left: 2px solid var(--card-accent, var(--teal));
  border-radius: 4px;
  background: #121d28;
}
.counter-record:has(> .dossier-support > .dossier-support-group:not([hidden]), > .dossier-matchup) { grid-column: 1 / -1; }
.counter-record-link {
  display: grid;
  grid-template-columns: 3.3rem 1fr auto;
  align-items: center;
  gap: .43rem;
  padding: .25rem;
  min-height: 3.1rem;
  border: 1px solid #3b5160;
  border-radius: 3px;
  background: #202f3c;
  color: var(--text);
  text-align: left;
}
.counter-record-link:hover, .counter-record-link:focus-visible { border-color: var(--card-accent, var(--teal)); }
.counter-record-link .card-art { align-self: stretch; min-height: 2.55rem; }
.counter-record-link .card-art .icon { width: .8rem; height: .8rem; padding: .08rem; }
.counter-record-link small, .counter-record-link strong { display: block; overflow-wrap: anywhere; }
.counter-record-link small { color: var(--card-accent, var(--teal)); font: 750 .64rem/1.3 var(--mono); }
.counter-record-link strong { font: 800 .92rem/1.2 var(--title); }
.counter-record-chevron { width: .85rem; height: .85rem; color: var(--card-accent, var(--teal)); }
.counter-record p, .counter-conditions { font-size: .81rem; line-height: 1.38; }
.counter-record .counter-sectors { color: #a6d9d1; font: 700 .69rem/1.4 var(--mono); }
.counter-conditions { color: #bbc9d8; margin: 0; padding-left: 1.1rem; }
.counter-conditions li + li { margin-top: .19rem; }
.counter-additional > summary { width: fit-content; cursor: pointer; color: #b8e7d8; padding: .28rem 0; font: 750 .73rem/1.5 var(--mono); }
.dossier-support { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .32rem; margin-top: .15rem; }
.dossier-support-group { display: grid; gap: .24rem; min-width: 0; padding: .31rem .34rem; border: 1px solid #3d5668; border-radius: 3px; background: #162633; }
.dossier-support-group[data-support-kind='requirement'] { flex: 1 1 100%; }
.dossier-support-group[data-support-kind='boost'] { flex: 1 1 11rem; border-color: #465977; background: #1a273a; }
.counter-record .dossier-support-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: .08rem .45rem; font: .66rem/1.35 var(--mono); color: #b9cbd9; }
.dossier-support-heading strong { color: #b6e5ed; }
[data-support-kind='boost'] .dossier-support-heading strong { color: #c9d5ff; }
.dossier-support-options, .dossier-support-option { display: flex; flex-wrap: wrap; align-items: center; gap: .19rem .27rem; min-width: 0; }
.dossier-support-options .dossier-support-option:has(.dossier-support-joiner) { padding: .14rem; border: 1px solid #3a5362; border-radius: 3px; }
.dossier-support-joiner { color: #d1dce9; font: 700 .65rem/1.25 var(--mono); }
.dossier-support-link { display: inline-grid; grid-template-columns: 1.38rem minmax(0, 1fr) auto; align-items: center; gap: .25rem; max-width: 100%; min-height: 31px; padding: .13rem .2rem; border: 1px solid #4c6574; border-radius: 3px; background: #203441; color: var(--text); font: 700 .72rem/1.18 var(--body); text-align: start; overflow-wrap: anywhere; }
.dossier-support-link:hover, .dossier-support-link:focus-visible { border-color: var(--card-accent, var(--teal)); }
.dossier-support-link .card-art { width: 1.38rem; height: 1.38rem; }
.dossier-support-link .card-art .icon { display: none; }
.dossier-support-link > .icon { width: .7rem; height: .7rem; color: #b6e5ed; }
.counter-record .dossier-support-effect { color: #c4d2e5; font-size: .73rem; }
.dossier-support-more > summary { width: fit-content; padding: .2rem 0; color: #c5e3ec; cursor: pointer; font: 730 .69rem/1.4 var(--mono); }
.dossier-support-more .dossier-support-options { margin-top: .15rem; }
.counter-record > [data-test-matchup] { justify-self: start; min-height: 33px; margin-top: .1rem; padding: .25rem .48rem; font-size: .73rem; }
.counter-record > [data-test-matchup][aria-expanded='true'] { color: var(--ice); border-color: #7295ad; }
.dossier-matchup { display: grid; gap: .57rem; min-width: 0; margin-top: .15rem; padding: .58rem; border: 1px solid #52758b; border-radius: 4px; background: linear-gradient(146deg, #1a3546, #152333 67%); }
.matchup-heading, .matchup-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .32rem .5rem; }
.matchup-heading h3 { margin: 0; color: var(--ice); font-size: .8rem; }
.matchup-heading h3 .icon { margin-inline-end: .2rem; }
.matchup-heading .button, .matchup-actions .button { min-height: 34px; padding: .28rem .5rem; font-size: .74rem; }
.matchup-pair, .matchup-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .32rem; }
.matchup-nameplate { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; gap: .38rem; min-width: 0; padding: .3rem; border: 1px solid #496377; border-radius: 3px; background: #152332; }
.matchup-nameplate .card-art { height: 2.6rem; }
.matchup-nameplate .card-art > .icon, .matchup-choice .card-art > .icon, .matchup-step .card-art > .icon { display: none; }
.matchup-nameplate :is(small, strong), .matchup-choice :is(small, strong) { display: block; overflow-wrap: anywhere; }
.matchup-nameplate small { color: var(--card-accent, var(--ice)); font: 720 .63rem/1.3 var(--mono); }
.matchup-nameplate strong { color: var(--text); font: 810 .9rem/1.2 var(--title); }
.matchup-form, .matchup-config, [data-matchup-setup], .matchup-boosts { display: grid; gap: .38rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.matchup-config, .matchup-boosts { min-inline-size: 0; }
.matchup-select, .matchup-boosts legend { color: #bee5e7; font: 730 .7rem/1.32 var(--mono); }
.matchup-select { display: grid; gap: .18rem; }
.matchup-select select { width: 100%; min-width: 0; min-height: 36px; padding: .25rem .4rem; font: .78rem/1.3 var(--body); }
.matchup-boosts legend { margin-bottom: .22rem; padding: 0; }
.matchup-choice { display: grid; grid-template-columns: auto 1.65rem minmax(0, 1fr); align-items: center; gap: .28rem; padding: .26rem .31rem; border: 1px solid #425a6b; border-radius: 3px; background: #142331; color: var(--text); cursor: pointer; }
.matchup-choice:has(input:checked) { border-color: #70a9a3; background: #1e353e; }
.matchup-choice input { accent-color: var(--teal); }
.matchup-choice .card-art { height: 1.65rem; }
.matchup-choice strong { font-size: .75rem; }
.matchup-choice small { color: #c3d7e7; font-size: .68rem; }
.matchup-actions { justify-content: flex-start; }
.matchup-actions [data-matchup-status] { min-width: 0; flex: 1 1 9rem; color: #d3e3ee; font-size: .73rem; }
.matchup-result { display: grid; gap: .43rem; }
.matchup-scenario > summary { width: fit-content; color: #bfdbe7; cursor: pointer; font: 720 .71rem/1.45 var(--mono); }
.matchup-scenario .counter-conditions { margin-top: .2rem; }
.matchup-outcome { padding: .4rem .48rem; border: 1px solid #5d788b; border-radius: 3px; background: #1b303f; }
.matchup-outcome.is-stopped { border-color: #638d77; background: #1b3835; }
.matchup-outcome.is-hit { border-color: #927169; background: #382b33; }
.matchup-outcome h4 { margin: 0; color: var(--text); font: 810 .87rem/1.3 var(--title); }
.matchup-outcome h4 .icon { margin-inline-end: .22rem; }
.counter-record .matchup-outcome-note { margin-top: .15rem; color: #e8c6ba; font-size: .73rem; }
.matchup-outcome dl { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: .28rem 0 0; }
.matchup-outcome dt { color: #d3deea; font: .65rem/1.3 var(--mono); }
.matchup-outcome dd { margin: 0; font: 760 .81rem/1.4 var(--mono); }
.matchup-timeline { display: grid; gap: .29rem; margin: 0; padding: 0; list-style: none; }
.matchup-step { display: grid; grid-template-columns: 1.3rem 1.82rem minmax(0, 1fr); align-items: start; gap: .3rem; padding: .27rem .33rem; border: 1px solid #405567; border-radius: 3px; background: #142532; }
.matchup-step[aria-current='step'] { border-color: var(--ice); background: #244258; }
.matchup-step .card-art { height: 1.82rem; }
.matchup-step > .icon { margin: .3rem auto; color: var(--ice); }
.matchup-step-number { padding-top: .12rem; color: #a9c7da; font: 700 .66rem/1.4 var(--mono); }
.matchup-step-kind { display: block; color: #abd7e9; font: 700 .65rem/1.35 var(--mono); }
.matchup-step strong { font-size: .78rem; }
.counter-record .matchup-step p { color: #ccdae7; font-size: .73rem; }
.matchup-step-values { display: flex; flex-wrap: wrap; gap: .18rem; margin-top: .2rem; }
.matchup-step-values > span { padding: .09rem .2rem; border: 1px solid #4c697c; border-radius: 2px; color: #d3eaf4; font: 700 .64rem/1.3 var(--mono); }
@media (max-width: 420px) {
  .matchup-nameplate { grid-template-columns: 1.85rem minmax(0, 1fr); gap: .25rem; }
  .matchup-nameplate .card-art { height: 1.85rem; }
  .matchup-choices { grid-template-columns: 1fr; }
}
.coverage-brief { display: grid; gap: .55rem; padding: .55rem .65rem; border: 1px solid #405969; border-radius: 4px; background: #13232d; }
.coverage-brief dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem .85rem; margin: 0; }
.coverage-brief dt, .coverage-filters label { color: #b1ddd8; font: 750 .68rem/1.35 var(--mono); }
.coverage-brief dd { display: flex; flex-wrap: wrap; align-items: center; gap: .22rem; margin: .16rem 0 0; color: var(--text); font-weight: 700; }
.coverage-sector-chip { padding: .14rem .28rem; border: 1px solid #4a696e; border-radius: 3px; background: #1b353c; color: #c8edea; font: 700 .66rem/1.3 var(--mono); }
.coverage-matchups { display: grid; gap: .43rem; min-width: 0; }
.coverage-matchups h3 { margin: 0; }
.coverage-filters { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: .45rem; }
.coverage-filters label { display: grid; gap: .2rem; min-width: 0; }
.coverage-filters :is(input, select) { width: 100%; min-width: 0; min-height: 36px; padding: .32rem .42rem; font: .8rem/1.35 var(--body); }
.coverage-count { font: .68rem/1.3 var(--mono); }
@media (max-width: 425px) {
  .coverage-filters { grid-template-columns: 1fr; }
}
.counter-additional[open] > summary { margin-bottom: .35rem; }
.card-preview { display: grid; gap: .45rem; margin-top: .72rem; }
.card-preview .button { justify-self: start; }
.card-preview-stage { min-height: 146px; max-height: 180px; aspect-ratio: 2.5; width: 100%; position: relative; overflow: hidden; border: 1px solid #586579; border-radius: 5px; background: repeating-linear-gradient(0deg, #a6f1db0b 0 1px, transparent 1px 20px), repeating-linear-gradient(90deg, #a6f1db0b 0 1px, transparent 1px 20px), radial-gradient(ellipse at center, #20333e, #111927); }
.card-preview-stage canvas { display: block; }
.card-preview > p { font-size: .82rem; }
.hand-card .card-art, .drag-ghost .card-art { min-height: 67px; }
.card-name { font: 820 1.07rem/1.15 var(--title); letter-spacing: -.019em; overflow-wrap: anywhere; }
.card-description { font-size: .79rem; color: #d4deeb; line-height: 1.35; }
.card-stat-row, .card-tag-row { display: flex; align-items: center; flex-wrap: wrap; gap: .19rem; }
.card-stat { display: inline-flex; align-items: baseline; gap: .19rem; padding: .14rem .25rem; color: var(--card-accent); border: 1px solid color-mix(in srgb, var(--card-accent) 42%, #273144); border-radius: 3px; background: #111b28; font: 750 .61rem var(--mono); text-transform: uppercase; }
.card-stat b { color: var(--text); font-size: .89rem; }
.card-tag { padding: .13rem .24rem; border: 1px solid #49556c; border-radius: 3px; color: #c6d2e5; background: #233147; font: 700 .59rem/1.15 var(--mono); }
.card-trait { color: var(--card-accent); border-color: color-mix(in srgb, var(--card-accent) 40%, #273144); background: color-mix(in srgb, var(--card-accent) 12%, #162133); }
.leaderboard-wrap { margin-top: 1rem; border: 1px solid var(--line); overflow: auto; }
.leaderboard { background: var(--surface); width: 100%; border-collapse: collapse; text-align: left; }
.leaderboard th, .leaderboard td { padding: .82rem 1rem; }
.leaderboard th { background: #162124; color: var(--signal); font: 700 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.leaderboard td { border-top: 1px solid var(--line); }
.leaderboard td:not(:nth-child(2)) { font-family: var(--mono); }
.leaderboard tr.is-you td { background: #1a2b24; }
.leaderboard td:first-child { color: var(--teal); }
.live-panel { display: flex; gap: .8rem; align-items: center; justify-content: space-between; margin-top: 1rem; padding: .9rem 1rem; border: 1px solid #526a48; background: #16201a; }
.live-content { min-width: 0; display: grid; gap: .25rem; }
.live-content p { color: var(--muted); font-size: .88rem; }
.live-actions, .dialog-actions { display: flex; flex-wrap: wrap; gap: .52rem; align-items: center; }
.invite-code { font: 800 1.15rem var(--mono); letter-spacing: .12em; color: var(--signal); user-select: all; }
.recent { margin: 1rem 0 0; background: var(--surface); border: 1px solid var(--line); }
.recent summary { padding: .65rem .9rem; cursor: pointer; }
.recent-list { list-style: none; padding: 0 .85rem .5rem; margin: 0; }
.recent-list li { display: flex; gap: .7rem; align-items: center; justify-content: space-between; padding: .38rem 0; border-top: 1px solid var(--line); font-size: .84rem; }
dialog { width: min(94vw, 520px); max-height: 92vh; padding: 0; border: 1px solid #56705e; background: var(--panel); color: var(--text); box-shadow: 0 30px 120px #000b; }
dialog::backdrop { background: #030a0cda; }
.dialog-shell { position: relative; padding: 1.6rem; }
.dialog-shell h2 { font-size: 1.9rem; margin-block: .3rem .8rem; padding-inline-end: 2rem; }
.icon-button { display: inline-grid; place-items: center; background: #142025; border: 1px solid #3b4d50; color: var(--text); min-width: 34px; min-height: 34px; }
.icon-button:hover { color: var(--signal); border-color: var(--signal); }
#dialog-close { position: absolute; top: 1.15rem; right: 1.15rem; }
#dialog:has(.detail-card, .arena-pile-inspector) #dialog-close { position: sticky; float: right; z-index: 2; top: .55rem; right: auto; margin: -.15rem -.4rem 0 .4rem; }
.dialog-copy { color: var(--muted); margin-bottom: .95rem; }
.dialog-actions { margin-top: .85rem; }
.dialog-form { display: grid; gap: .7rem; }
.dialog-form label { display: grid; gap: .27rem; color: var(--muted); font-size: .83rem; font-weight: 680; }
.dialog-form .button { justify-self: start; }
.dialog-form .form-input, .dialog-form select { width: 100%; }
dialog:has(.arena-pile-inspector) { width: min(94vw, 680px); }
.arena-pile-inspector { display: grid; gap: .65rem; }
.arena-pile-inspector :is([data-recovery-picker], [data-recovery-preview]):not([hidden]) { display: grid; gap: .65rem; }
.arena-pile-inspector-total { margin: 0; color: #c4dce2; font: 750 .72rem/1.35 var(--mono); }
.arena-pile-inspector-context { margin: 0; color: #bff2e4; font: 750 .76rem/1.35 var(--mono); }
.arena-pile-inspector-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .42rem; margin-top: .15rem; }
.arena-recovery-repair {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .36rem .62rem;
  padding: .52rem .65rem; border: 1px solid #507b71; border-radius: 5px;
  background: linear-gradient(140deg, #21413d, #172c31 76%); box-shadow: inset 0 1px #b4f8e21c;
}
.arena-recovery-integrity { display: flex; flex-wrap: wrap; align-items: baseline; gap: .24rem .45rem; color: #bfdcd4; font: 700 .74rem/1.25 var(--mono); }
.arena-recovery-integrity strong { color: #e1faf3; font-size: .98rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arena-recovery-healed { padding: .18rem .34rem; border: 1px solid #6e9c80; border-radius: 3px; background: #224538; color: #d3f9d6; font: 750 .71rem/1.2 var(--mono); }
.arena-recovery-card .detail-card > .card-art, .arena-recovery-card.detail-card > .card-art { aspect-ratio: 2.65; }
[data-inspector-mode='preview'] .arena-pile-inspector-actions {
  position: sticky; bottom: 0; z-index: 1; padding-block: .52rem .2rem;
  border-top: 1px solid #46615d; background: var(--panel);
}
[data-inspector-mode='preview'] .arena-pile-inspector-actions .button { min-height: 35px; }
.arena-pile-rule { margin: 0; color: #becdd4; font-size: .84rem; line-height: 1.4; }
.arena-pile-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .42rem; margin: 0; padding: 0; list-style: none; }
.arena-pile-entry {
  display: grid; grid-template-columns: 3.45rem minmax(0, 1fr); align-items: center; gap: .52rem;
  min-width: 0; padding: .32rem; border: 1px solid #425867; border-radius: 5px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent, #97d9cf) 12%, #1c2a36), #14212c 70%);
}
.arena-pile-entry > .card-art { min-height: 3.45rem; height: 100%; max-height: 5rem; }
.arena-pile-entry:has(> .arena-pile-choice) { display: block; padding: 0; border-color: #527a73; }
.arena-pile-choice {
  display: grid; grid-template-columns: 3.45rem minmax(0, 1fr) .42rem; align-items: center; gap: .52rem;
  width: 100%; padding: .32rem .65rem .32rem .32rem; border: 0; border-radius: inherit;
  background: transparent; color: var(--text); cursor: pointer; text-align: start;
}
.arena-pile-choice > .card-art { min-height: 3.45rem; height: 100%; max-height: 5rem; }
.arena-pile-choice::after { content: ''; width: .34rem; height: .34rem; border: solid #a7ebd5; border-width: 1px 1px 0 0; transform: rotate(45deg); }
.arena-pile-choice:hover, .arena-pile-choice:focus-visible { background: #25443f; box-shadow: inset 0 0 0 1px #7cc7b8; }
.arena-pile-choice:focus-visible { outline: 2px solid #a6f9e6; outline-offset: 2px; }
.arena-pile-entry .card-art > .icon { width: .92rem; height: .92rem; padding: .11rem; }
.arena-pile-entry-copy { display: grid; justify-items: start; gap: .15rem; min-width: 0; }
.arena-pile-entry-copy strong { font-size: .88rem; line-height: 1.16; overflow-wrap: anywhere; }
.arena-pile-entry-meta { color: #b5c4d3; font: 650 .66rem/1.24 var(--mono); }
.arena-pile-entry-status { padding: .13rem .25rem; border: 1px solid #516675; border-radius: 3px; color: #c0d3e1; font: 700 .64rem/1.16 var(--mono); }
.arena-pile-entry[data-entry-state='eligible'] .arena-pile-entry-status { border-color: #547c70; color: #b5e9d7; }
.arena-pile-entry[data-entry-state='shuffle'] .arena-pile-entry-status { border-color: #736278; color: #e4c7df; }
.arena-pile-entry[data-entry-state='destroyed'] { border-color: #6d4c48; background: linear-gradient(145deg, #36292d, #1d232e 76%); }
.arena-pile-entry[data-entry-state='destroyed'] .card-art { filter: saturate(.68); }
.arena-pile-entry[data-entry-state='destroyed'] .arena-pile-entry-status { border-color: #9a6258; background: #442d32; color: #ffd0bb; }
.arena-pile-empty { margin: 0; padding: .8rem; border: 1px dashed #526672; border-radius: 5px; background: #13212a; color: #bdccd4; font-size: .84rem; }
.form-error { margin-top: .7rem; font-size: .85rem; color: var(--orange); }
.form-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.deck-field { display: grid; gap: .28rem; align-content: start; min-width: 0; }
.deck-summary { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.deck-lab-head { border-color: #556b70; background: radial-gradient(ellipse at 95% 0%, #283e42, transparent 65%), var(--surface); }
.deck-lab-head .eyebrow, .deck-lab-head .period { color: var(--mint); }
.deck-identity { display: flex; justify-content: space-between; align-items: center; gap: .52rem 1rem; margin-block: .7rem; padding: .6rem .75rem; background: #19242a; border: 1px solid #465a61; color: var(--muted); font-size: .84rem; }
.deck-identity .button { flex: none; }
.deck-lab-layout { display: grid; grid-template-columns: minmax(178px, 23%) minmax(0, 1fr); gap: .7rem; align-items: start; }
.deck-saved, .deck-editor { min-width: 0; padding: .84rem; border: 1px solid var(--line); background: var(--surface); }
.deck-saved h2 { display: flex; gap: .35rem; align-items: baseline; justify-content: space-between; font-size: 1.08rem; }
.deck-saved h2 small { color: var(--mint); font: .65rem var(--mono); white-space: nowrap; }
.deck-actions { display: flex; flex-wrap: wrap; gap: .34rem; }
.deck-saved .deck-actions { margin-top: .52rem; }
.deck-saved .button { min-height: 30px; padding: .28rem .42rem; }
.deck-saved-list, .deck-list { display: grid; align-content: start; gap: .23rem; max-height: 350px; margin: .48rem 0 0; padding: 0; list-style: none; overflow: auto; scrollbar-width: thin; scrollbar-color: #536b72 #19232b; }
.deck-saved-list { max-height: 255px; }
.deck-saved-list .muted, .deck-list .muted { font-size: .8rem; padding: .36rem .18rem; }
.deck-saved-list button { display: grid; width: 100%; gap: .14rem; padding: .38rem .48rem; background: #17222d; color: var(--text); border: 1px solid #3d4a5c; text-align: start; font-size: .82rem; overflow-wrap: anywhere; }
.deck-saved-list button[aria-pressed='true'] { border-color: var(--mint); background: #203333; }
.deck-saved-list small { color: var(--muted); font: .66rem var(--mono); }
.deck-clone { display: grid; gap: .3rem; margin-top: .7rem; }
.deck-clone label, .deck-edit-heading label { color: var(--muted); font-size: .78rem; font-weight: 680; }
.deck-clone select { min-width: 0; }
.deck-clone .button { justify-self: start; }
.deck-form { display: grid; gap: .65rem; }
.deck-edit-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .48rem .7rem; }
.deck-edit-heading .eyebrow { color: var(--mint); }
.deck-edit-heading h2 { font-size: 1.45rem; margin-top: .22rem; }
.deck-edit-heading label { display: grid; gap: .2rem; width: min(100%, 280px); }
.deck-edit-heading input { width: 100%; }
.deck-check { display: flex; flex-wrap: wrap; gap: .3rem; }
.deck-count { padding: .21rem .34rem; background: #202434; border: 1px solid #48556c; color: var(--muted); font: .7rem var(--mono); }
.deck-count.is-valid { background: #20352f; border-color: #547d69; color: var(--mint); }
.deck-workbench { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .56rem; }
.deck-workbench > section { min-width: 0; padding: .45rem; background: #101825; border: 1px solid #374557; }
.deck-workbench h3 { font-size: .92rem; margin: .1rem 0 .36rem; }
.deck-filters { display: flex; gap: .25rem; flex-wrap: wrap; }
.deck-filters > * { flex: 1 1 109px; min-width: 0; }
.deck-filters input { width: 100%; }
.deck-filters select { min-height: 33px; padding: .25rem .36rem; font-size: .77rem; }
.deck-filters .search-field { padding-inline: .35rem; font-size: .76rem; }
.deck-filters .search-field input { padding-block: .33rem; }
.deck-card-row { display: flex; justify-content: space-between; gap: .35rem; align-items: center; padding: .28rem .36rem; border: 1px solid #354558; border-inline-start: 2px solid var(--card-accent, var(--mint)); background: #172230; }
.deck-card-info { display: flex; align-items: center; min-width: 0; gap: .35rem; }
.deck-card-info .card-art { flex: 0 0 30px; width: 30px; height: 30px; }
.deck-card-info .card-art > .icon { display: none; }
.deck-card-meta { min-width: 0; display: grid; line-height: 1.22; }
.deck-card-meta strong { font-size: .82rem; overflow-wrap: anywhere; }
.deck-card-meta small { color: var(--muted); font: .63rem var(--mono); }
.deck-copy { min-width: 39px; min-height: 29px; padding: .13rem .25rem; border: 1px solid #577670; color: var(--mint); background: #22332e; font: 720 .84rem var(--mono); }
.deck-copy span { font-size: .61rem; }
.deck-copy:hover:not(:disabled) { border-color: var(--mint); }
.deck-copy:disabled { opacity: .47; }
.deck-save-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .8rem; }
.deck-delete { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; color: var(--coral); font-size: .8rem; }
.deck-form .form-error { margin: 0; }
.auth-switch { display: inline-flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: .85rem; width: 100%; }
.auth-switch button { background: none; border: 0; border-bottom: 2px solid transparent; padding: .4rem .65rem; color: var(--muted); }
.auth-switch button[aria-pressed='true'] { border-bottom-color: var(--signal); color: var(--text); }
.rules-list { display: grid; gap: .65rem; margin: 0; padding-left: 1.15rem; color: var(--muted); }
.rules-list strong { color: var(--text); }
.rules-relay { margin-bottom: .95rem; padding: .69rem .83rem; border: 1px solid #665988; background: #242039; }
.rules-relay h3 { display: flex; align-items: center; gap: .4rem; margin-bottom: .48rem; color: var(--ice); font-size: 1.05rem; }
.rules-relay .rules-list { gap: .43rem; font-size: .87rem; }
.toast { position: fixed; z-index: 4; right: 1rem; bottom: 1rem; max-width: min(400px, calc(100vw - 2rem)); background: #1c2d27; color: var(--text); border: 1px solid #597453; padding: .7rem 1rem; box-shadow: 0 9px 40px #0008; }
.arena { --table-line: #405851; --table-rim: #263c36; --hand-card-width: clamp(115px, 10vw, 143px); padding-top: .72rem; }
.arena-hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.arena-title { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.arena-title h1 { font-size: clamp(1.17rem, 2.05vw, 1.75rem); margin: .08rem 0 0; }
.arena-title .eyebrow { font-size: .58rem; }
.arena .back-link { display: grid; place-items: center; flex: none; width: 32px; height: 32px; color: var(--muted); background: #151f20; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; }
.arena .back-link .icon { transform: rotate(180deg); }
.arena .back-link:hover { color: var(--signal); border-color: var(--signal); }
.arena .match-status { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .23rem .8rem; min-height: 38px; min-width: 0; padding: .34rem .65rem; border: 1px solid var(--line); border-radius: 4px; background: #131e20; font-size: .82rem; }
.arena .match-status strong { color: var(--signal); }
.arena :is(.status-main, .status-meta) { display: flex; flex-wrap: wrap; align-items: center; gap: .32rem; }
.arena .status-meta { color: var(--muted); font: .67rem var(--mono); }
.arena .status-clock { color: var(--teal); }
.relay-mode-pill { color: var(--ice); }
.arena .match-status.is-relay-finished { background: linear-gradient(100deg, #312749, #182b3d); border-color: #8a78c1; }
.arena .match-status.is-relay-finished strong { color: var(--ice); }
.arena-hud-actions { display: flex; align-items: center; justify-content: flex-end; gap: .36rem; }
.arena-settings { position: relative; z-index: 5; }
.arena-settings summary { min-height: 36px; cursor: pointer; list-style: none; }
.arena-settings summary::-webkit-details-marker { display: none; }
.arena-settings[open] summary { border-color: var(--signal); color: var(--signal); }
.arena-settings-menu { display: grid; gap: .46rem; position: absolute; inset: calc(100% + .35rem) 0 auto auto; width: max-content; padding: .65rem .78rem; background: #162223; border: 1px solid #566c5c; box-shadow: 0 6px 24px #0009; }
.arena-settings-menu label { display: flex; gap: .5rem; align-items: center; font-size: .81rem; cursor: pointer; }
.arena-settings-menu input { margin: 0; accent-color: var(--signal); }
.arena-settings-menu select { min-height: 2rem; font-size: .81rem; }
.arena-settings-menu label[for='arena-volume'] { justify-content: space-between; cursor: default; }
#arena-volume { width: 100%; min-height: 22px; }
#arena-volume-value { color: var(--muted); font: 720 .68rem var(--mono); }
.arena-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(168px, 18%, 224px); align-items: start; gap: .48rem; }
.arena-layout:has(.arena-feed:not([open])) { grid-template-columns: minmax(0, 1fr) 43px; }
.arena-main { min-width: 0; display: grid; gap: .4rem; }
.arena-rival { min-height: 37px; display: flex; align-items: center; gap: .58rem; padding: .22rem .65rem; background: linear-gradient(90deg, #192629, #101a1d); border: 1px solid var(--line); border-radius: 5px; }
.arena-rival-label { display: inline-flex; align-items: center; gap: .32rem; color: var(--muted); font: 650 .62rem var(--mono); letter-spacing: .085em; white-space: nowrap; }
.opponent-hand { display: flex; align-items: center; flex-wrap: wrap; flex: 1; min-width: 0; gap: .23rem .43rem; font-size: .74rem; color: var(--muted); }
.opponent-id { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .43rem; }
.opponent-name { color: var(--text); font-weight: 750; overflow-wrap: anywhere; }
.opponent-backs { display: inline-flex; align-items: center; padding-inline: .25rem; }
.opponent-back { display: inline-block; width: 16px; height: 22px; border: 1px solid #8cbca6; border-radius: 3px; background: #274438 url('art/ghost-cards.webp') 100% 100% / 300% 200%; box-shadow: 0 2px 4px #0008; transform: rotate(-8deg); }
.opponent-back + .opponent-back { margin-inline-start: -5px; }
.arena-piles { display: inline-flex; flex-wrap: wrap; align-items: center; min-width: 0; max-width: 100%; gap: .24rem; }
.arena-pile {
  --pile-tint: #92e2bd;
  position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .14rem .34rem .18rem .22rem;
  border: 1px solid #3c5353; border-radius: 4px; background: linear-gradient(155deg, #263639, #121c21 70%);
  box-shadow: inset 0 1px #c9ffff0d; white-space: nowrap;
}
.arena-pile[data-pile='discard'] { --pile-tint: #ebbcde; border-color: #544956; background: linear-gradient(155deg, #362d3a, #1b1b25 70%); }
.arena-pile[data-pile='destroyed'] { --pile-tint: #ffaf91; border-color: #79534f; background: linear-gradient(155deg, #412e33, #201e25 70%); }
button.arena-pile { cursor: pointer; text-align: start; }
button.arena-pile:hover, button.arena-pile:focus-visible { border-color: var(--pile-tint); background: color-mix(in srgb, var(--pile-tint) 15%, #151c23); }
button.arena-pile:focus-visible { outline: 2px solid var(--pile-tint); outline-offset: 2px; }
.arena-pile-open { flex: none; width: .62rem; height: .62rem; color: var(--pile-tint); }
.arena-pile-caption { display: inline-flex; align-items: baseline; gap: .25rem; color: #bbcacb; font: 650 .62rem var(--mono); }
.arena-pile-caption b { min-width: 2ch; color: var(--pile-tint); font-size: .73rem; font-variant-numeric: tabular-nums; text-align: end; }
.arena-deck-stack, .arena-discard-stack, .arena-destroyed-stack {
  display: block; position: relative; flex: none; width: 19px; height: 25px;
  border: 1px solid var(--pile-tint, #92e2bd); border-radius: 3px;
  background: #274438 url('art/ghost-cards.webp') 100% 100% / 300% 200%;
  box-shadow: 1px 1px 0 #152524, 2px 2px 0 #72958b, 3px 3px 0 #162624, 4px 4px 0 #507169;
}
.arena-discard-stack {
  transform: rotate(7deg); background-color: #423549;
  box-shadow: 1px 1px 0 #2a2130, 2px 2px 0 #a28b9e, 3px 3px 0 #251f29, 4px 4px 0 #665066;
}
.arena-destroyed-stack {
  background: repeating-linear-gradient(126deg, #3b2329 0 3px, #512b30 3px 4px);
  box-shadow: 1px 1px 0 #2a1920, 2px 2px 0 #a35f52, 3px 3px 0 #2d1e24, 4px 4px 0 #744a42;
}
.arena-destroyed-stack::after {
  content: ''; position: absolute; inset: 2px 3px; background: var(--pile-tint);
  clip-path: polygon(61% 0, 83% 0, 53% 37%, 80% 53%, 39% 100%, 16% 100%, 54% 56%, 30% 40%);
}
.arena-destroyed-stack[data-pile-count='0']::after { opacity: .35; }
.arena-pile i[data-pile-count='1'] { box-shadow: 0 2px 4px #000b; }
.arena-pile i:is([data-pile-count='0'], [data-pile-motion-empty]) { transform: none; border-style: dashed; border-color: #758d91; background: #0f191c; box-shadow: inset 0 1px 4px #000a; }
.arena-pile:has(i[data-pile-count='0']) .arena-pile-caption b { color: #a0acaf; }
.arena-pile[data-pile-state='shuffle'], .arena-pile:has(.is-shuffling) { --pile-tint: #d2ffb4; }
.arena-pile[data-pile-state='recover'] { --pile-tint: #80f4ed; }
.arena-pile[data-pile-state], .arena-pile:has(.is-receiving, .is-shuffling) {
  border-color: var(--pile-tint); box-shadow: inset 0 0 9px color-mix(in srgb, var(--pile-tint) 29%, transparent), 0 0 12px color-mix(in srgb, var(--pile-tint) 43%, transparent);
}
.arena-pile[data-pile-state]::after, .arena-pile:has(.is-receiving, .is-shuffling)::after {
  content: ''; position: absolute; inset: -2px; border: 1px solid var(--pile-tint); border-radius: inherit; pointer-events: none;
  animation: arena-pile-pulse .36s ease-out both;
}
@keyframes arena-pile-pulse { from { opacity: .95; scale: .94; } to { opacity: 0; scale: 1.12 1.23; } }
.opponent-energy { display: inline-flex; align-items: center; gap: .22rem; margin-inline-start: auto; color: var(--teal); font: 700 .68rem var(--mono); }
.opponent-energy .energy-pip.is-filled { border-color: #a0d8c6; background: var(--teal); box-shadow: none; }
.relay-hud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.44fr) minmax(0, 1fr); align-items: center; gap: .26rem .57rem; padding: .35rem .58rem; border: 1px solid #655991; border-radius: 5px; background: linear-gradient(90deg, #2b203d, #191e34 49%, #182f40); }
.relay-score { --score-color: var(--violet); display: flex; align-items: center; gap: .38rem; min-width: 0; color: var(--score-color); }
.relay-score.is-defender { --score-color: var(--ice); justify-self: end; }
.relay-score.is-winner strong { text-shadow: 0 0 .65rem var(--score-color); }
.relay-score-label { color: var(--muted); font: 750 .63rem var(--mono); text-transform: uppercase; letter-spacing: .035em; }
.relay-score strong { font: 850 .88rem var(--mono); white-space: nowrap; }
.relay-score strong > span { color: var(--muted); font-size: .64rem; }
.relay-score-pips { display: inline-flex; gap: 3px; }
.relay-score-pips i { width: clamp(5px, 1vw, 11px); height: 9px; border: 1px solid color-mix(in srgb, var(--score-color) 52%, #303147); transform: skewX(-13deg); }
.relay-score-pips i.is-filled { background: var(--score-color); box-shadow: 0 0 5px color-mix(in srgb, var(--score-color) 60%, transparent); }
.relay-readout { display: flex; align-items: center; justify-content: center; min-width: 0; gap: .39rem; text-align: left; }
.relay-readout-icon { flex: none; color: var(--ice); font-size: 1.15rem; filter: drop-shadow(0 0 4px #93e1ff5c); }
.relay-readout > div { display: grid; gap: .05rem; min-width: 0; line-height: 1.16; }
.relay-readout strong { color: var(--ice); font-size: .83rem; }
.relay-readout > div > span { color: var(--muted); font: .65rem/1.2 var(--mono); }
.relay-note { grid-column: 1 / -1; color: #cfbfef; font: .62rem/1.2 var(--mono); text-align: center; }
.arena-board {
  --arena-emitter: #86d7bb;
  min-height: clamp(305px, 43vh, 465px);
  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
  isolation: isolate;
  gap: .5rem;
  padding: .55rem;
  border: 1px solid #688382;
  border-radius: 9px;
  background: radial-gradient(ellipse at 48% 21%, #284847 0%, #172c31 61%, #0b171d 100%);
  box-shadow: inset 0 0 0 3px #101e25, inset 0 0 0 4px #55717070, inset 0 0 40px #07151c, 0 5px 0 #0c151d, 0 13px 29px #0007;
}
.arena-board::before, .arena-board::after { content: ''; position: absolute; z-index: 0; pointer-events: none; }
.arena-board::before {
  inset: 4px; border-radius: 5px;
  background: linear-gradient(90deg, #102026 9%, #11232988 44%, #0c1c23b0 100%), url('art/arena.webp') 68% 45% / cover no-repeat;
  opacity: .49;
}
.arena-board::after {
  inset: 4px; border-radius: 5px;
  background:
    linear-gradient(90deg, transparent, var(--arena-emitter) 24%, var(--arena-emitter) 76%, transparent) center top / 72% 1px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 23px, #b4e7d818 23px 24px) center / auto,
    repeating-linear-gradient(0deg, transparent 0 23px, #b4e7d810 23px 24px) center / auto;
  opacity: .65;
}
.arena-board:has(.combat-readout:not([hidden])) { grid-template-rows: auto 1fr auto; }
.arena.is-relay-match .arena-board { --arena-emitter: #b6a8ff; border-color: #8779ad; background: radial-gradient(ellipse at 51% 34%, #393654 0%, #25293b 65%, #141a2b 100%); }
#arena-canvas { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
#arena-canvas canvas { display: block; }
.arena-stack { display: flex; align-items: center; justify-content: center; gap: .48rem; position: relative; z-index: 3; }
.arena-stack-label { display: flex; align-items: center; gap: .24rem; color: #b4c9be; font: 700 .62rem var(--mono); letter-spacing: .09em; white-space: nowrap; }
.arena-stack-target { display: flex; justify-content: center; align-items: center; gap: .38rem; width: min(100%, 373px); min-width: 0; min-height: 55px; padding: .24rem .4rem; color: var(--text); background: linear-gradient(155deg, #1c3036e8, #0f1922f5); border: 1px dashed #6b9690; border-radius: 5px; text-align: start; box-shadow: inset 0 0 0 2px #0e1b22, 0 2px 0 #0b151b; }
.arena-stack-target:has(.stack-card) { border-style: solid; border-color: #a77d63; box-shadow: inset 3px 0 0 #d29069, inset 0 0 0 2px #181920, 0 2px 0 #0b151b; }
.arena-stack-target[role='button'], button.arena-drop { cursor: pointer; }
.stack-empty { display: inline-flex; align-items: center; gap: .32rem; color: #afc0b6; font: .69rem var(--mono); }
.stack-empty > .icon { color: var(--signal); }
.stack-empty small { display: block; margin-top: .13rem; color: var(--quiet); font: .61rem var(--mono); }
.stack-card { display: grid; flex: 0 0 40px; min-width: 0; padding: .14rem; color: var(--text); background: linear-gradient(115deg, #392c28, #242221); border: 1px solid #a37159; border-radius: 4px; box-shadow: 0 2px 5px #0006; transform: rotate(-5deg); }
.stack-card .card-art { min-height: 36px; }
.stack-card .card-art .icon { display: none; }
.stack-copy { flex: 1 1 auto; display: grid; gap: .14rem; min-width: 0; font-size: .75rem; line-height: 1.25; }
.stack-copy span { color: var(--muted); font-size: .63rem; }
.stack-copy .stack-label { color: var(--orange); text-transform: uppercase; font: 750 .58rem var(--mono); }
.stack-damage { flex: none; color: var(--orange); font: 750 .72rem var(--mono); text-align: center; }
.stack-damage b { font-size: .95rem; }
.stack-damage > span { display: block; font-size: .55rem; text-transform: uppercase; }
.combat-readout { position: relative; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1.04fr) minmax(0, 1.46fr) auto; grid-template-areas: 'heading strike defenses outcome'; gap: .28rem .5rem; align-items: stretch; padding: .31rem .42rem; border: 1px solid #647077; border-radius: 5px; background: #111b25ec; }
.combat-heading { grid-area: heading; display: flex; align-items: center; gap: .24rem; padding-inline-end: .24rem; color: var(--ice); font: 800 .64rem var(--mono); text-transform: uppercase; }
.combat-heading small { display: block; color: var(--muted); font: .57rem var(--mono); margin-top: .09rem; }
.combat-attack { grid-area: strike; }
.combat-attack, .combat-defense { display: flex; align-items: center; gap: .29rem; min-width: 0; padding: .18rem .29rem; border: 1px solid color-mix(in srgb, var(--card-accent) 38%, #334357); border-radius: 3px; background: color-mix(in srgb, var(--card-accent) 8%, #172333); }
.combat-attack > span:not(.card-art), .combat-defense > span:not(.card-art) { display: grid; gap: .06rem; min-width: 0; }
.combat-attack strong, .combat-defense strong { color: var(--text); font: 770 .76rem/1.14 var(--body); overflow-wrap: anywhere; }
.combat-attack small, .combat-defense small { color: var(--muted); font: .64rem/1.18 var(--mono); overflow-wrap: anywhere; }
.combat-attack small .icon, .combat-defense small .icon { margin-inline-end: .23rem; color: var(--card-accent); }
.combat-attack .card-art, .combat-defense .card-art { flex: 0 0 26px; height: 26px; }
.combat-readout .card-art > .icon { display: none; }
.combat-defenses { grid-area: defenses; display: flex; align-items: stretch; flex-wrap: wrap; gap: .22rem; min-width: 0; }
.combat-defense { flex: 1 1 105px; }
.combat-defense > .icon { color: var(--teal); }
[data-ai-security='prompt_filter'] { --security-tint: #a1e7ff; }
[data-ai-security='tool_block'] { --security-tint: #ffce9b; }
[data-ai-security$='quarantine'] { --security-tint: #dec5ff; }
[data-ai-security='model_attestation'] { --security-tint: #a9f0c8; }
[data-ai-security='provenance_trace'] { --security-tint: #b9ccff; }
[data-ai-security='response_redaction'] { --security-tint: #ffc4e2; }
[data-ai-security='agent_sandbox'] { --security-tint: #ffd1a2; }
[data-ai-security='retrieval_canary'] { --security-tint: #d6edaa; }
[data-ai-security='output_schema'] { --security-tint: #a8f2e1; }
[data-ai-security='model_gateway'] { --security-tint: #b6e5ff; }
[data-ai-security='embedding_alert'] { --security-tint: #dfc8ff; }
[data-ai-security='session_revoke'] { --security-tint: #ffc5a9; }
[data-ai-security='tool_allowlist'] { --security-tint: #b1f2d4; }
[data-ai-security='model_monitor'] { --security-tint: #bedbff; }
[data-ai-security='data_boundary'] { --security-tint: #d4ebac; }
[data-ai-security='retrieval_acl'] { --security-tint: #a6ecff; }
[data-ai-security='agent_audit'] { --security-tint: #b4f0c4; }
[data-ai-security='output_guardrail'] { --security-tint: #ffe0b3; }
.combat-defense[data-ai-security] { border-color: color-mix(in srgb, var(--security-tint) 54%, #334357); }
.combat-defense[data-ai-security] small, .combat-defense[data-ai-security] small .icon { color: var(--security-tint); }
.combat-empty, .combat-extra { align-self: center; color: var(--muted); font: .64rem var(--mono); }
.combat-extra { flex: none; }
.combat-outcome { grid-area: outcome; display: grid; align-content: center; gap: .08rem; padding: .2rem .37rem; color: var(--ice); background: #202d40; border: 1px solid #64758c; border-radius: 3px; font: 750 .72rem var(--mono); }
.combat-outcome strong .icon { margin-inline-end: .28rem; }
.combat-outcome.is-impact { color: var(--orange); border-color: #9a604e; background: #342729; }
.combat-outcome.is-breach { color: #ffc7b7; border-color: #c28075; background: #442a30; }
.combat-outcome.is-stopped { color: var(--mint); border-color: #54816f; background: #1f342e; }
.combat-outcome small { font-size: .61rem; color: var(--muted); }
.arena-stack-target .button { min-height: 29px; padding: .22rem .4rem; font-size: .67rem; }
.stack-forecast, .sector-forecast { font: 700 .65rem/1.26 var(--mono); color: var(--signal); }
.arena .sector-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: .48rem; position: relative; z-index: 1; }
.arena .sector {
  --lane-color: #f0bd80;
  --lane-signal: var(--lane-color);
  --lane-surface: #2d2928;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: .34rem;
  padding: .42rem;
  border: 1px solid color-mix(in srgb, var(--lane-signal) 58%, #203238);
  border-radius: 6px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--lane-surface) 86%, #0e1f26), #101d26db 81%);
  box-shadow: inset 0 0 0 2px #0e1c24cf, inset 0 0 28px #0a131ccb, 0 3px 0 #0c1721;
}
.arena .sector > :not(.sector-damage-layer, .sector-surface) { position: relative; z-index: 1; }
.arena .sector[data-lane='staff'] { --lane-color: #b9c5ff; --lane-surface: #282b42; }
.arena .sector[data-lane='cloud'] { --lane-color: #88ebdd; --lane-surface: #163b40; }
.sector-surface { position: absolute; inset: 2px; z-index: -1; overflow: hidden; border-radius: inherit; color: var(--lane-color); pointer-events: none; }
.sector-surface::before {
  content: ''; position: absolute; inset: 15% 0 0; opacity: .39;
  background:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 19px);
  mask-image: radial-gradient(ellipse at 76% 72%, #000 0%, transparent 72%);
}
.sector-surface::after {
  content: ''; position: absolute; inset: 4px;
  background:
    linear-gradient(currentColor 0 0) left bottom / 12px 1px no-repeat,
    linear-gradient(currentColor 0 0) left bottom / 1px 9px no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 12px 1px no-repeat,
    linear-gradient(currentColor 0 0) right bottom / 1px 9px no-repeat;
  opacity: .64;
}
.sector-surface .sector-watermark { position: absolute; right: 7%; bottom: 9%; width: 46%; height: 54%; max-width: 122px; max-height: 102px; opacity: .16; }
[data-lane='staff'] .sector-surface::before {
  background:
    radial-gradient(circle, currentColor 0 1.2px, transparent 1.5px) 0 0 / 20px 20px,
    repeating-linear-gradient(140deg, transparent 0 19px, currentColor 19px 20px);
  opacity: .32;
}
[data-lane='cloud'] .sector-surface::before {
  background: repeating-radial-gradient(circle at 72% 67%, transparent 0 16px, currentColor 16px 17px);
  opacity: .33;
}
.arena .sector.is-breached .sector-surface { color: var(--coral); opacity: .48; }
.arena .sector[data-context-level]::after { content: ''; position: absolute; inset: 2px 2px auto auto; width: .72rem; height: .72rem; border-top: 1px solid #a7e4ff; border-right: 1px solid #a7e4ff; opacity: .68; z-index: 2; pointer-events: none; }
.arena .sector[data-context-level='2']::after { width: 1.06rem; height: 1.06rem; border-width: 2px; }
.arena .sector[data-integrity-state='damaged'] { --condition-tone: #ffdfa7; }
.arena .sector[data-integrity-state='degraded'] { --condition-tone: #ffc298; border-color: #936a60; }
.arena .sector[data-integrity-state='critical'] { --condition-tone: #ffc3bb; border-color: #b87c73; }
.arena .sector[data-integrity-state]:not([data-integrity-state='intact']) { padding-bottom: 1.1rem; }
.arena .sector.is-relay-lane { --lane-signal: #c0aeff; border-color: #aa94e4; background: linear-gradient(145deg, #3e3659ed, #1a273bce); box-shadow: inset 0 0 0 1px #ba9ff469, inset 0 0 25px #8375c24a, 0 3px 0 #17162b; }
.arena .sector.is-attack { --lane-signal: var(--orange); border-color: #d58e66; box-shadow: inset 0 0 0 1px #e0a0787a, inset 0 0 25px #a8583143, 0 3px 0 #241a21; }
.arena .sector.is-breached { --lane-signal: var(--coral); border-color: #a26964; background: repeating-linear-gradient(130deg, #ffad9d0b 0 1px, transparent 1px 6px), linear-gradient(155deg, #39272d, #251e28); box-shadow: inset 0 0 0 2px #1d1722, 0 3px 0 #251822; }
.sector-damage-layer { --crack-angle: -7deg; --crack-opacity: .37; --fault-color: color-mix(in srgb, var(--lane-color) 55%, var(--coral)); position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
[data-integrity-state='degraded'] .sector-damage-layer { --crack-opacity: .57; }
[data-integrity-state='critical'] .sector-damage-layer, [data-integrity-state='breached'] .sector-damage-layer { --crack-opacity: .76; }
[data-lane='staff'] .sector-damage-layer { --crack-angle: 13deg; }
[data-lane='cloud'] .sector-damage-layer { --crack-angle: 41deg; }
.sector-damage-crack { position: absolute; left: -5%; top: 37%; width: 106%; height: 64%; transform: rotate(var(--crack-angle)); opacity: var(--crack-opacity); background: var(--fault-color); clip-path: polygon(0 52%, 16% 46%, 23% 50%, 34% 33%, 48% 39%, 59% 24%, 73% 32%, 84% 15%, 100% 22%, 100% 24%, 84% 18%, 73% 35%, 60% 27%, 48% 42%, 35% 36%, 24% 53%, 16% 49%, 0 55%); }
.sector-damage-crack:nth-child(2) { left: 5%; top: 25%; transform: rotate(calc(151deg + var(--crack-angle))); }
.sector-damage-crack:nth-child(3) { left: -12%; top: 35%; width: 92%; transform: rotate(calc(72deg + var(--crack-angle))); }
.sector-damage-panels { position: absolute; right: .25rem; bottom: .26rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; width: min(56%, 5.8rem); }
.sector-damage-panel { height: 4px; border: 1px solid color-mix(in srgb, var(--fault-color) 38%, #203b40); border-radius: 1px; background: color-mix(in srgb, var(--fault-color) 24%, #24363b); }
.sector-damage-panel.is-failed { border-color: color-mix(in srgb, var(--fault-color) 57%, #332630); background: repeating-linear-gradient(120deg, #181b23 0 2px, var(--fault-color) 2px 3px, #181b23 3px 5px); }
[data-lane='staff'] .sector-damage-panels { left: .25rem; right: auto; grid-template-columns: repeat(6, minmax(0, 1fr)); }
[data-lane='staff'] .sector-damage-panel { height: 7px; border-radius: 50%; }
[data-lane='cloud'] .sector-damage-panels { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(50%, 4.8rem); }
[data-lane='cloud'] .sector-damage-panel { height: 10px; }
.sector-repair-layer { z-index: 2; }
.sector-repair-scar-mask { position: absolute; inset: 0; }
.sector-repair-layer .sector-damage-crack { opacity: .74; }
.sector-repair-layer.is-highlight .sector-damage-crack { opacity: .89; }
.sector-repair-layer .repair-unchanged, .sector-repair-layer[data-sector-repair='held'] .repair-same-band { visibility: hidden; }
.sector-repair-layer .sector-damage-panel { position: relative; }
.sector-repair-panel-light { position: absolute; inset: -1px; opacity: 0; border: 1px solid #cbffe8; border-radius: inherit; background: #90ffd8; box-shadow: 0 0 7px #90ffd8; }
.arena .sector-head { display: grid; gap: .22rem; width: 100%; min-height: 51px; padding: .35rem .42rem; color: var(--text); background: linear-gradient(147deg, color-mix(in srgb, var(--lane-color) 11%, #17252c), #101c25); border: 1px solid color-mix(in srgb, var(--lane-signal) 38%, #26353d); border-radius: 4px; box-shadow: inset 0 1px 0 #cfe8ee11, 0 2px 0 #0c1721; text-align: start; }
.arena .sector-head:disabled { opacity: 1; }
.arena .sector.is-breached .sector-head { background: #2b202a; border-color: #895f63; }
.arena .sector-head.is-target { cursor: pointer; background: linear-gradient(145deg, #344734, #192925); border-color: #95b370; }
.arena .sector-head.is-target:hover, .arena .sector-head.is-target:focus-visible { background: linear-gradient(145deg, #475c38, #26382b); }
.arena .sector-label { display: flex; align-items: center; gap: .37rem; min-width: 0; font-weight: 760; font-size: .84rem; line-height: 1.16; overflow-wrap: anywhere; }
.sector-emblem { display: inline-grid; place-items: center; flex: none; width: 1.34rem; height: 1.34rem; color: var(--lane-color); border: 1px solid color-mix(in srgb, currentColor 56%, #314551); border-radius: 4px; background: color-mix(in srgb, currentColor 12%, #12202b); box-shadow: inset 0 0 0 1px #0e1b24; }
.sector-emblem .icon { width: .92rem; height: .92rem; }
.arena .sector-integrity-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .11rem .28rem; }
.arena .sector-hp { color: #d2ddd8; font: .63rem var(--mono); }
.arena .sector-condition { padding: .05rem .18rem; color: var(--condition-tone); border: 1px solid color-mix(in srgb, var(--condition-tone) 49%, #34313a); border-radius: 3px; background: #2c252e; font: 750 .56rem/1.15 var(--mono); text-transform: uppercase; }
.arena .sector.is-breached .sector-hp { color: #ffc7b7; font-weight: 750; }
.sector-integrity-meter { position: relative; display: block; padding: 1px; border: 1px solid #50676a; border-radius: 3px; background: #0c1720; overflow: hidden; }
.sector-integrity-meter::after { content: ''; position: absolute; inset: 1px; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), #08121bb5 calc(12.5% - 1px) 12.5%); }
.arena .sector meter { width: 100%; height: 5px; display: block; background: #2c4248; border-radius: 2px; overflow: hidden; }
.arena .sector meter::-webkit-meter-bar { border: 0; border-radius: 0; background: #2c4248; }
.arena .sector meter::-webkit-meter-optimum-value { border-radius: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--lane-color) 73%, #395064), var(--lane-color)); }
.arena .sector meter::-webkit-meter-suboptimum-value { border-radius: 0; background: var(--orange); }
.arena .sector meter::-webkit-meter-even-less-good-value { border-radius: 0; background: #ee7163; }
.arena .sector meter::-moz-meter-bar { background: var(--condition-tone, var(--lane-color)); }
.arena .sector-forecast { margin-inline: .25rem; }
.arena .forecast-relay { display: block; margin-top: .16rem; color: var(--ice); }
.arena .sector-relay-tag { display: flex; align-items: center; width: fit-content; gap: .2rem; padding: .14rem .27rem; border: 1px solid #8b77ba; border-radius: 3px; background: #343050; color: var(--ice); font: 750 .59rem/1.18 var(--mono); text-transform: uppercase; }
.sector-combat-outcome { display: flex; flex-wrap: wrap; gap: .18rem; }
.sector-combat-outcome > span { display: inline-flex; align-items: center; gap: .19rem; max-width: 100%; padding: .13rem .24rem; border: 1px solid #647589; border-radius: 3px; background: #202d40; color: var(--ice); font: 750 .62rem/1.16 var(--mono); overflow-wrap: anywhere; }
.sector-combat-outcome > :is([data-combat-kind='block'], [data-combat-kind='counter']) { border-color: #648877; background: #1c342d; color: var(--mint); }
.sector-combat-outcome > [data-combat-kind='counter'] { border-color: #8b76a8; background: #30263e; color: #e2ceff; }
.sector-combat-outcome > [data-combat-kind='hit'] { border-color: #9a6758; background: #3a292b; color: var(--coral); }
.sector-combat-outcome > [data-combat-kind='fracture'] { border-style: dashed; border-color: #bf986d; background: #342b2a; color: #ffdbad; }
.sector-combat-outcome > [data-combat-kind='security'] { color: var(--security-tint); border-color: color-mix(in srgb, var(--security-tint) 57%, #364357); background: #202735; }
.shield-fracture { position: relative; display: inline-grid; place-items: center; flex: none; width: 1.2em; height: 1.2em; }
.shield-fracture .shield-crack { position: absolute; inset: .23em auto auto .27em; width: .7em; height: .75em; color: #ffdbad; fill: #342b2a; stroke-width: 2.5; }
.arena .sector-forecast small { display: block; margin-top: .16rem; color: var(--muted); font: .6rem/1.23 var(--mono); }
.arena .sector-intel { display: flex; flex-wrap: wrap; gap: .24rem; align-items: center; }
.arena .sector-intel-chip { display: inline-flex; align-items: center; gap: .22rem; min-width: 0; min-height: 23px; padding: .18rem .28rem; color: var(--chip-color); background: color-mix(in srgb, var(--chip-color) 14%, #172224); border: 1px solid color-mix(in srgb, var(--chip-color) 48%, #293a3b); border-radius: 3px; font: 700 .64rem/1.2 var(--mono); text-align: start; overflow-wrap: anywhere; }
.arena .sector-intel-chip .icon { color: var(--chip-color); }
.arena .sector-intel-chip:hover { border-color: var(--chip-color); }
.arena .sector-intel-chip.is-mark { --chip-color: #f7ba8a; }
.arena .sector-intel-chip.is-protocol { --chip-color: #d4bbff; }
.arena .sector-context { --chip-color: #9be7ff; flex-wrap: wrap; background: repeating-linear-gradient(132deg, #9be7ff0c 0 1px, transparent 1px 5px), #20334a; }
.arena .sector-context strong { padding: .05rem .17rem; border-radius: 2px; background: #131e2d; }
.sector-context-change, .sector-recovery { display: inline-flex; align-items: center; gap: .21rem; min-width: 0; max-width: 100%; padding: .14rem .24rem; color: #c8dcef; border: 1px dashed #647792; border-radius: 3px; background: #1a2635; font: 700 .61rem/1.16 var(--mono); overflow-wrap: anywhere; }
.sector-context-change .icon { color: var(--ice); }
.sector-context-change[data-context-scrubbed], .sector-recovery { color: #b9f4dc; border-style: solid; border-color: #618577; background: #20342f; }
.sector-context-change[data-context-scrubbed] .icon, .sector-recovery .icon { color: var(--mint); }
.arena .sector-units { flex: 1 0 auto; display: flex; align-content: center; justify-content: center; align-items: center; flex-wrap: wrap; gap: .28rem; min-height: 89px; padding: .36rem .19rem; }
.arena .sector-empty { display: grid; place-items: center; flex: 1; min-height: 73px; padding: .35rem; color: #b1c2b9; border: 1px dashed #657d70a3; border-radius: 4px; background: #1126214f; font: 650 .64rem var(--mono); text-transform: uppercase; text-align: center; }
.arena .sector-socket { align-content: center; gap: .32rem; border-color: color-mix(in srgb, var(--lane-color) 31%, #2b444a); background: linear-gradient(150deg, #0d1b22e0, #1626308f); box-shadow: inset 0 0 0 2px #10212a94, inset 0 3px 9px #06111b85; }
.sector-socket > .icon { width: 1.17rem; height: 1.17rem; color: var(--lane-color); opacity: .73; }
.arena .is-drop-ready .sector-socket { color: #e4f6ca; border-color: #8fb574; background: #202e27bd; }
.arena .is-drop-ready .sector-socket > .icon { color: #d8f8a8; opacity: 1; }
.arena .sector-breach-state { align-content: center; gap: .43rem; color: #ffc7b7; border: 1px solid #925d61; background: repeating-linear-gradient(130deg, #ffc7b70c 0 2px, transparent 2px 7px), #2d2029; overflow-wrap: anywhere; }
.sector-breach-icon { display: grid; place-items: center; width: 1.46rem; height: 1.46rem; border: 1px solid currentColor; border-radius: 3px; transform: rotate(45deg); }
.sector-breach-icon .icon { width: 1rem; height: 1rem; transform: rotate(-45deg); }
.sector-lost-controls { color: #f6bbac; font: 700 .61rem/1.2 var(--mono); text-transform: none; }
.arena .sector-unit { --unit-color: var(--card-accent, var(--lane-color)); position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex: 0 1 82px; min-width: 0; min-height: 74px; gap: .17rem; padding: .25rem .25rem .27rem; color: var(--text); border: 1px solid color-mix(in srgb, var(--unit-color) 63%, #344352); border-top: 2px solid var(--unit-color); border-radius: 5px; background: linear-gradient(155deg, color-mix(in srgb, var(--unit-color) 18%, #273749), #14212d 58%, #152027); box-shadow: inset 0 0 0 2px #0e1b29d6, 0 2px 0 #091622, 0 4px 7px #0008; text-align: center; font-size: .65rem; line-height: 1.17; overflow-wrap: anywhere; }
.arena .sector-unit .unit-icon, .arena .sector-unit > .icon { display: grid; place-items: center; color: var(--unit-color); }
.arena .sector-unit .unit-icon .icon, .arena .sector-unit > .icon { width: 1.24rem; height: 1.24rem; }
.arena .sector-unit .unit-name { font-weight: 730; }
.arena .sector-unit .card-art, .drag-ghost.sector-unit .card-art { align-self: stretch; min-height: 39px; }
.arena .sector-unit .card-art { border-radius: 2px; }
.arena .sector-unit .card-art .icon, .drag-ghost.sector-unit .card-art .icon { display: none; }
.unit-type { display: flex; align-items: center; justify-content: center; gap: .15rem; color: var(--unit-color, var(--card-accent)); font: 780 .47rem/1 var(--mono); letter-spacing: .055em; text-transform: uppercase; }
.unit-type .icon { width: .7rem; height: .7rem; }
.unit-foot { display: flex; align-items: center; justify-content: center; gap: .25rem; }
.unit-stat { color: var(--unit-color, var(--card-accent)); font: 720 .56rem/1.16 var(--mono); }
.unit-stat .icon { width: .88em; height: .88em; }
.unit-state { width: 5px; height: 5px; flex: none; border: 1px solid #b4efc7; border-radius: 50%; background: #8eeab2; box-shadow: 0 0 5px #83ecac88; }
.can-intercept .unit-state { width: 6px; height: 6px; outline: 1px solid #e4faa6; outline-offset: 1px; background: #e0ffa0; }
.is-spent .unit-state { border-radius: 0; border-color: #edc3a3; background: #263345; box-shadow: none; transform: rotate(45deg); }
.arena .sector-unit .unit-grip { position: absolute; right: 2px; top: 2px; font: .61rem var(--mono); color: var(--unit-color); cursor: grab; }
.arena button.sector-unit { border-color: color-mix(in srgb, var(--unit-color) 72%, var(--signal)); }
.arena button.sector-unit:hover, .arena button.sector-unit:focus-visible { box-shadow: inset 0 0 0 2px #a4c4778c, 0 3px 8px #0008; }
.arena [data-drag-unit] { cursor: grab; touch-action: none; user-select: none; }
.arena [data-drag-unit]::after { content: ''; position: absolute; top: 2px; right: 3px; width: 8px; height: 11px; background: radial-gradient(circle, var(--unit-color) 0 1px, transparent 1.1px) 0 0 / 4px 4px; opacity: .7; }
.arena .sector-unit.can-intercept { border-color: var(--signal); box-shadow: inset 0 0 11px #c3fa723c, 0 2px 0 #091622, 0 0 9px #c3fa7254; }
.arena .sector-unit.is-spent { border-top-style: dashed; opacity: .79; }
.arena .sector-unit.is-spent .card-art { filter: saturate(.44) brightness(.78); }
.arena .sector-upgrades { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .22rem; }
.arena .unit-upgrade, .arena .sector-upgrades > * { display: inline-flex; justify-content: center; align-items: center; gap: .2rem; min-height: 0; flex: 0 1 auto; padding: .15rem .29rem; color: #c0cbe6; border: 1px solid #536376; border-radius: 3px; background: #1e2937; font: .58rem/1.2 var(--mono); text-align: center; }
.arena [data-sector-module], .arena .sector-module-exit { display: inline-flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: .17rem .26rem; max-width: 100%; min-width: 0; min-height: 24px; text-align: start; }
.sector-module-name { display: inline-flex; align-items: center; gap: .19rem; min-width: 0; font-weight: 750; overflow-wrap: anywhere; }
.sector-module-status { padding: .09rem .15rem; color: var(--module-state-tone); border: 1px solid color-mix(in srgb, var(--module-state-tone) 52%, #273340); border-radius: 2px; background: #131c28; font: 750 .53rem/1.1 var(--mono); text-transform: uppercase; }
.arena [data-module-state='armed'] { --module-state-tone: #d4bbff; }
.arena [data-module-state='online'] { --module-state-tone: var(--mint); }
.arena [data-module-state='activated'] { --module-state-tone: var(--ice); border-color: #637f9b; background: #20323f; }
.arena [data-module-state='spent'] { --module-state-tone: #f7c58f; border-style: dashed; background: #2b2833; }
.arena button[data-sector-module]:hover { border-color: var(--module-state-tone); }
.arena .sector-module-exit { padding: .18rem .27rem; color: #c8c2dc; border: 1px dashed #776787; border-radius: 3px; background: #252231; font: 700 .61rem/1.18 var(--mono); }
.arena .sector-module-exit[data-module-state='triggered'] { --module-state-tone: #dac5ff; }
.arena .sector-module-exit[data-module-state='disarmed'] { --module-state-tone: #ffbc92; }
.arena .sector-option { display: flex; justify-content: center; flex-wrap: wrap; gap: .24rem; }
.arena .sector-option .button { min-height: 25px; padding: .2rem .43rem; font-size: .67rem; }
.arena .sector-option .relay-uplink { gap: .26rem; }
.arena .sector.is-target, .arena .is-drop-ready { border-color: #a3d378; box-shadow: inset 0 0 0 1px #a3d37885, inset 0 0 23px #a3d37828; }
.arena .sector.is-target .sector-surface::after { color: #d8f8a8; opacity: .9; }
.arena :is(.sector, .arena-drop).is-drop-hover { border-color: #dbffa0; box-shadow: inset 0 0 0 2px #c3fa72a2, inset 0 0 37px #c3fa7260, 0 0 13px #c3fa7255; }
.arena .sector.is-drop-hover .sector-head { background: linear-gradient(145deg, #516343, #283e31); border-color: #d8f8a8; }
.arena .sector.is-drop-hover .sector-socket { border-style: solid; color: #f0ffd5; }
.arena.is-dragging, .arena.is-dragging button { cursor: grabbing; user-select: none; }
.arena .is-drag-source { opacity: .49; }
.drag-ghost { position: fixed; top: 0; left: 0; z-index: 10; pointer-events: none; width: clamp(106px, 14vw, 143px); padding: .45rem; box-shadow: 0 14px 34px #000a, 0 0 16px #c3fa7246; }
.drag-ghost.is-over-target { border-color: var(--signal); box-shadow: 0 10px 29px #000a, 0 0 19px #c3fa7270; }
.drag-ghost.sector-unit { align-items: center; justify-content: center; font: 700 .63rem var(--body); text-align: center; }
.drag-ghost.sector-unit .unit-icon { color: var(--card-accent); }
.arena-dock { min-width: 0; margin-top: .1rem; background: linear-gradient(158deg, #23323a, #111d27 68%); border: 1px solid #4c676a; border-radius: 7px; box-shadow: inset 0 0 0 2px #111e27, 0 4px 0 #0c1720, 0 8px 18px #0004; }
.arena-operator { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .32rem .64rem; min-height: 44px; padding: .3rem .53rem; border-bottom: 1px solid #425959; background: linear-gradient(0deg, #1a292f, #27383a); border-radius: 6px 6px 0 0; box-shadow: inset 0 1px 0 #b5dbc318; }
.arena .hand-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.arena .hand-head h2 { font-size: 1.04rem; margin: 0; white-space: nowrap; }
.arena .player-deck { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; color: var(--muted); font: .6rem var(--mono); }
.arena-loadout-name { max-width: 17ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena .energy-badge { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid #596849; border-radius: 4px; background: #243121; color: var(--signal); padding: .22rem .33rem; font: 700 .65rem var(--mono); white-space: nowrap; }
.arena .energy-pips { display: inline-flex; gap: 2px; align-items: center; }
.arena .energy-pip { display: inline-block; width: 6px; height: 11px; border: 1px solid #637057; border-radius: 2px; background: #142019; transform: skewX(-9deg); }
.arena .energy-pip.is-filled { border-color: #d6f5a3; background: var(--signal); box-shadow: 0 0 5px #c3fa7262; }
.arena .action-hint { flex: 1 1 145px; color: var(--muted); font-size: .74rem; line-height: 1.25; }
.arena .arena-command, .arena #command-drops, .arena .turn-controls { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }
.arena .arena-command { justify-content: flex-end; }
.arena .arena-command .button, .arena .arena-command .arena-drop { min-height: 29px; padding: .24rem .42rem; font-size: .68rem; }
.arena .arena-command .arena-drop { display: inline-flex; align-items: center; gap: .25rem; color: var(--signal); border: 1px dashed #7f9366; border-radius: 4px; background: #243124; white-space: nowrap; }
.arena .arena-command .arena-drop:disabled { opacity: .58; }
.arena .arena-command .arena-drop.is-drop-hover { background: #3e5631; }
.arena .hand-scroller { min-width: 0; overflow: auto hidden; scrollbar-width: thin; scrollbar-color: #617d75 #19252e; background: repeating-linear-gradient(119deg, #d6ece809 0 1px, transparent 1px 4px), radial-gradient(ellipse at 50% 88%, #345054c4, #13222b 75%); box-shadow: inset 0 5px 10px #07141c75; }
.arena .hand-grid { display: flex; align-items: stretch; justify-content: flex-start; justify-content: safe center; gap: 0; min-width: 100%; min-height: 172px; padding: .82rem .56rem .59rem; }
.arena .hand-card {
  --tilt: 0deg; --lift: 0px; --inspect-x: 0deg; --inspect-y: 0deg; --inspect-gleam: 50%;
  flex: 0 0 var(--hand-card-width); align-self: stretch; z-index: 1; min-height: 162px;
  transform: translateY(var(--lift)) rotate(var(--tilt)); transform-origin: center 84%;
  transition: transform .15s, border-color .16s, box-shadow .16s; touch-action: pan-x;
  box-shadow: inset 0 0 0 2px #111923, inset 0 0 0 3px color-mix(in srgb, var(--card-accent) 22%, #263749),
    0 3px 0 #101823, 0 4px 0 color-mix(in srgb, var(--card-accent) 33%, #101823), 0 7px 12px #0009;
}
.arena .hand-card::after {
  content: ''; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at var(--inspect-gleam) 8%, color-mix(in srgb, var(--card-accent) 26%, transparent), transparent 62%);
  transition: opacity .15s;
}
.arena .hand-card:not(:disabled) { cursor: grab; user-select: none; }
.arena .hand-card + .hand-card { margin-inline-start: -7px; }
.arena .hand-card:nth-child(4n + 1) { --tilt: -2deg; --lift: 3px; }
.arena .hand-card:nth-child(4n + 2) { --tilt: -.8deg; }
.arena .hand-card:nth-child(4n + 3) { --tilt: .85deg; }
.arena .hand-card:nth-child(4n) { --tilt: 1.9deg; --lift: 3px; }
.arena .hand-card:is(:focus-visible, [aria-pressed='true']) { z-index: 3; border-color: var(--signal); box-shadow: inset 0 0 0 2px #c3fa7255, 0 3px 0 #101823, 0 0 14px #c3fa7249; }
.arena .hand-card:focus-visible { opacity: 1 !important; }
.arena.has-card-motion .hand-card:is(:focus-visible, [aria-pressed='true']) { transform: translateY(-8px) rotate(0); }
@media (hover: hover) and (pointer: fine) {
  .arena .hand-card:not(:disabled):hover { z-index: 3; }
  .arena .hand-card:not(:disabled, [aria-pressed='true']):hover { border-color: var(--card-accent); }
  .arena.has-card-motion .hand-card:not(:disabled):hover { transform: perspective(590px) translateY(-8px) rotateX(var(--inspect-x)) rotateY(var(--inspect-y)); }
  .arena .hand-card:not(:disabled):hover::after { opacity: .86; }
}
.arena .hand-card.is-playable:not([aria-pressed='true']) { border-bottom-color: color-mix(in srgb, var(--card-accent) 72%, #8ea2a4); }
.arena .hand-card.is-cycle-only { border-style: dashed; }
.arena .is-awaiting-deal { opacity: 0; }
.arena .is-awaiting-deal:focus-visible { opacity: 1; }
.arena-card-motion-layer { position: fixed; inset: 0; z-index: 8; overflow: clip; pointer-events: none; }
.arena-motion-card { position: absolute; perspective: 620px; transform-style: preserve-3d; }
.arena-motion-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.arena-motion-face, .arena-motion-back { position: absolute; inset: 0; border-radius: 6px; backface-visibility: hidden; }
.arena-motion-face {
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: .14rem; min-width: 0;
  padding: .28rem; color: var(--text); border: 1px solid var(--card-accent); border-top-width: 2px;
  background: linear-gradient(148deg, color-mix(in srgb, var(--card-accent) 23%, #253243), #131b27 66%);
  box-shadow: inset 0 0 0 2px #0d1521, 0 4px 13px #0009, 0 0 13px color-mix(in srgb, var(--card-accent) 34%, transparent);
}
.arena-motion-face .card-art { min-height: 0; }
.arena-motion-card.is-dealing .arena-motion-face { box-shadow: inset 0 0 0 2px #0d1521, 0 9px 19px #000a, 0 0 14px color-mix(in srgb, var(--card-accent) 48%, transparent); }
.arena-motion-card.is-opponent .arena-motion-back { box-shadow: 0 3px 7px #0009; }
.arena-motion-card.is-cycling .arena-motion-back { border-color: #dbb8e8; box-shadow: 0 4px 12px #0009, 0 0 9px #deb8f172; }
.arena-motion-card.is-discarding .arena-motion-back { border-color: #f0c7e4; box-shadow: 0 5px 12px #000b, 0 0 8px #e0a8daab; }
.arena-motion-card.is-shuffling .arena-motion-back { border-color: #c1f3a6; box-shadow: 1px 2px 0 #122a25, 2px 3px 0 #7da178, 0 3px 9px #a9e88d93; }
.arena-motion-card.is-recovering .arena-motion-back { border-color: #a5fff4; box-shadow: 0 4px 9px #000c, 0 0 9px #76f9ed, 0 0 22px #37bbbfaa; }
.arena-motion-card.is-recovering .arena-motion-face { box-shadow: inset 0 0 0 2px #102a2b, 0 8px 16px #000a, 0 0 16px #66efdf9c; }
.arena-motion-face .card-art .icon { display: none; }
.arena-motion-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 740 .63rem var(--body); }
.arena-motion-type { display: flex; align-items: center; gap: .19rem; color: var(--card-accent); font: 750 .51rem var(--mono); text-transform: uppercase; }
.arena-motion-type .icon { width: .68rem; height: .68rem; flex: none; }
.arena-motion-back { border: 1px solid #a1d8bb; background: #1d3833 url('art/ghost-cards.webp') 100% 100% / 300% 200%; box-shadow: 0 3px 10px #0009, 0 0 9px #9ff4cc66; }
.arena-motion-flip:has(.arena-motion-face) .arena-motion-back { transform: rotateY(180deg); }
.arena-motion-shard.shard-left { clip-path: polygon(0 0, 56% 0, 46% 37%, 57% 53%, 41% 100%, 0 100%); }
.arena-motion-shard.shard-right { clip-path: polygon(56% 0, 100% 0, 100% 100%, 41% 100%, 57% 53%, 46% 37%); }
.arena-motion-shard .arena-motion-face::after, .arena-motion-card.is-fracture .arena-motion-face::after {
  content: ''; position: absolute; inset: 0; background: #f9d7b0;
  clip-path: polygon(54% 0, 58% 0, 48% 37%, 59% 53%, 43% 100%, 39% 100%, 55% 53%, 44% 37%);
}
.arena-motion-card.is-destroying .arena-motion-face {
  border-color: #ff876f;
  background: linear-gradient(145deg, #4b272c, #210e1b 78%);
  box-shadow: inset 0 0 0 2px #ff614542, 0 5px 15px #000c, 0 0 18px #ff6e5291;
}
.arena-motion-card.is-destroying .arena-motion-type { color: #ffd0b7; }
.arena-motion-card.is-fracture .arena-motion-face::after {
  background: linear-gradient(#ffd2a3, #fff4dd 47%, #ff7e60);
}
.arena-motion-card.is-destroying.arena-motion-shard .arena-motion-face::after { background: #ffb08a; }
.arena .hand-card .card-top, .drag-ghost.hand-card .card-top { min-height: 28px; }
.arena .hand-card .card-type, .drag-ghost.hand-card .card-type { font-size: .6rem; }
.arena .hand-card .card-cost, .drag-ghost.hand-card .card-cost { min-width: 27px; height: 27px; font-size: .87rem; }
.arena .hand-card .card-name, .drag-ghost.hand-card .card-name { font-size: .91rem; }
.arena .hand-card .card-description, .drag-ghost.hand-card .card-description { font-size: .71rem; line-height: 1.23; }
.arena .hand-card .card-stat, .drag-ghost.hand-card .card-stat { font-size: .56rem; }
.arena .hand-card .card-stat b, .drag-ghost.hand-card .card-stat b { font-size: .76rem; }
.arena .hand-card .card-tag, .drag-ghost.hand-card .card-tag { font-size: .55rem; }
.arena-rail { min-width: 0; background: #111b1c; border: 1px solid var(--line); border-radius: 5px; }
.arena-feed-summary { display: flex; align-items: center; min-height: 36px; gap: .39rem; padding: .35rem .49rem; color: var(--text); cursor: pointer; list-style: none; font: 700 .7rem var(--mono); }
.arena-feed-summary::-webkit-details-marker { display: none; }
.arena-feed-summary > .icon:first-child { color: var(--signal); }
.arena-feed-toggle { color: var(--muted); margin-inline-start: auto; }
.arena-feed[open] .arena-feed-toggle { transform: rotate(90deg); }
.arena-feed-content { padding: 0 .46rem .46rem; }
.arena-feed:not([open]) #telemetry-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.arena-feed:not([open]) .arena-feed-toggle { display: none; }
.arena-feed:not([open]) .arena-feed-summary { justify-content: center; }
.arena .incident-log { max-height: clamp(185px, 43vh, 395px); overflow: auto; padding-left: 0; margin: .25rem 0 0; list-style: none; scrollbar-width: thin; scrollbar-color: #53695d #192527; }
.arena .incident-log li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .24rem; border-top: 1px solid var(--line); padding: .4rem .13rem; font-size: .73rem; color: var(--muted); line-height: 1.37; }
.arena .log-round { font: .62rem var(--mono); color: var(--teal); }
.arena .incident-log li:is([data-type='damage'], [data-type='attack']) { color: var(--orange); }
.arena .incident-log li:is([data-type='mark'], [data-type='mark_spent']) { color: #f7ba8a; }
.arena .incident-log li:is([data-type='protocol_armed'], [data-type='protocol_triggered'], [data-type='protocol_disarmed']) { color: #d4bbff; }
.arena .incident-log li[data-type^='relay_'] { color: var(--ice); }
.arena .incident-log li[data-type='stealth'] { color: var(--coral); }
.arena .incident-log li[data-type='trace'] { color: var(--mint); }
.arena .incident-log li[data-type='context'] { color: var(--ice); }
.replay-panel { display: flex; justify-content: space-between; align-items: center; gap: .52rem 1rem; min-height: 46px; padding: .34rem .52rem; border: 1px solid #527368; border-radius: 5px; background: linear-gradient(90deg, #202c31, #18292a); }
.replay-panel > p { font: .72rem/1.36 var(--mono); color: var(--mint); }
.replay-actions { display: flex; flex: none; gap: .26rem; }
.replay-actions .button { min-height: 29px; padding: .24rem .48rem; font-size: .72rem; }
.arena .incoming { padding: .4rem; margin-top: .33rem; border: 1px solid #6c4f43; border-radius: 4px; background: #261d1d; font-size: .72rem; color: var(--orange); }
.arena .incoming.incident { background: #172725; border-color: #3c5c51; color: var(--teal); }
.arena .incoming p { margin-top: .15rem; color: var(--muted); }
.noscript { padding: 1rem; color: var(--orange); text-align: center; }

@media (max-width: 1100px) {
  .connection { display: none; }
  .hero { padding-inline: 2.55rem; min-height: 382px; }
  .mode-tile { padding-inline: .8rem; }
  .quick-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 851px) and (max-height: 760px) {
  .arena-board { min-height: clamp(250px, 38.6vh, 293px); }
  .arena .hand-grid { min-height: 153px; padding-block: .63rem .44rem; }
  .arena .hand-card { min-height: 146px; }
  .arena .hand-card .card-art { min-height: 54px; }
}
@media (max-width: 850px) {
  .shell, .topbar-inner { width: calc(100% - 2.5rem); }
  .hero { padding-inline: 1.85rem; }
  .hero::before { background: linear-gradient(90deg, #0d1020 0%, #0d1020ea 34%, #0d10204c 68%, #0d102029 100%), linear-gradient(0deg, #0d1020ad, transparent 48%); }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode-tile { min-height: 163px; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arena-layout, .arena-layout:has(.arena-feed:not([open])) { grid-template-columns: minmax(0, 1fr); }
  .arena .incident-log { max-height: 240px; }
  .arena-feed:not([open]) #telemetry-title { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .arena-feed:not([open]) .arena-feed-toggle { display: inline; }
  .arena-feed:not([open]) .arena-feed-summary { justify-content: flex-start; }
}
@media (max-width: 920px) {
  .topbar-inner { grid-template-columns: 1fr 1fr; gap: 0; min-height: 0; }
  .brand, .topbar-right { min-height: 54px; }
  .main-nav { grid-row: 2; grid-column: 1 / -1; justify-content: space-between; }
  .main-nav a { min-height: 39px; padding: 0 .35rem; font-size: .78rem; }
  .main-nav a[aria-current]::after { left: .33rem; right: .33rem; }
}
@media (max-width: 660px) {
  .hero { min-height: 326px; margin-top: 1rem; }
  .hero-art { background-position: 62% center; }
  .hero::before { background: linear-gradient(90deg, #0d1020fa, #0d1020aa 54%, #0d102048), linear-gradient(0deg, #0d1020b0, transparent 50%); }
  .section-hint { display: none; }
  .quick-presets { grid-template-columns: 1fr; gap: 0; }
  .modes-section { margin-top: 1.55rem; }
  .live-panel { align-items: flex-start; flex-direction: column; }
  .leaderboard th, .leaderboard td { padding-inline: .55rem; }
  .arena-hud { grid-template-columns: minmax(0, 1fr) auto; gap: .42rem; }
  .arena .match-status { grid-row: 2; grid-column: 1 / -1; }
  .arena-hud-actions { grid-row: 1; grid-column: 2; }
  .arena-operator .action-hint { flex-basis: 100%; order: 2; }
  .arena .hand-grid { gap: .26rem; }
  .arena .hand-card + .hand-card { margin-inline-start: 0; }
  .arena .hand-card:nth-child(n) { --tilt: 0deg; --lift: 0px; }
  .relay-score { display: grid; grid-template-columns: auto auto; gap: .12rem .23rem; }
  .relay-score-label { grid-column: 1 / -1; }
  .combat-readout { grid-template-columns: auto minmax(0, 1fr) minmax(72px, 34%); grid-template-areas: 'heading strike strike' 'defenses defenses outcome'; }
  .deck-lab-layout { grid-template-columns: 1fr; }
  .deck-saved { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .66rem; }
  .deck-saved h2, .deck-saved .deck-actions { grid-column: 1 / -1; }
  .deck-saved .deck-actions, .deck-clone { margin: 0; }
  .deck-saved-list { margin: 0; }
  .deck-identity { align-items: flex-start; }
  .replay-panel { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 450px) {
  .shell, .topbar-inner { width: calc(100% - 1.5rem); }
  .main-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .main-nav a { padding-inline: .1rem; white-space: normal; font-size: .71rem; }
  .hero { min-height: 305px; padding: 1.2rem; }
  .hero h1 { font-size: clamp(2.65rem, 12.8vw, 4rem); }
  .hero-copy { font-size: 1rem; }
  .hero-subcopy { font-size: .84rem; }
  .hero-actions { gap: .42rem; }
  .hero-actions .button { min-height: 40px; font-size: .83rem; padding-inline: .53rem; }
  .hero-actions .button-end { display: none; }
  .mode-grid { gap: .5rem; }
  .mode-tile { padding: .65rem; }
  .mode-tile h3 { font-size: 1.05rem; }
  .mode-tile p, .mode-link { font-size: .77rem; }
  .mode-top .tag { font-size: .57rem; }
  .escalation-brief { flex-wrap: wrap; gap: .47rem; }
  .escalation-brief > div { flex-basis: calc(100% - 42px); }
  .escalation-brief .mode-link { margin-inline-start: 42px; }
  .footer span:nth-child(2) { display: none; }
  .page-head { margin-top: 1rem; padding: 1rem; }
  .mission-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .46rem; }
  .mission { padding: .65rem; }
  .mission p { font-size: .8rem; }
  .mission-scene { margin: -.4rem -.4rem 0; }
  .archive-toolbar { padding: .55rem; }
  .archive-control > span:first-child { font-size: .61rem; }
  .archive-control select { padding-inline: .4rem; font-size: .86rem; }
  .archive-index-feedback:has(#archive-index-status:not(:empty)) { flex-basis: 100%; }
  .library-card { min-height: 220px; padding: .47rem; }
  .library-card .card-name { font-size: .93rem; }
  .library-card .card-description { font-size: .73rem; }
  .library-card .card-top { min-height: 28px; }
  .library-card .card-cost { min-width: 28px; height: 28px; font-size: .88rem; }
  .library-card .card-type { font-size: .59rem; }
  .deck-identity { flex-direction: column; }
  .deck-saved, .deck-editor { padding: .53rem; }
  .deck-workbench { grid-template-columns: 1fr; }
  .deck-list { max-height: 225px; }
  .deck-copy { min-height: 36px; }
  .arena-board { min-height: 305px; padding: .27rem; gap: .3rem; }
  .arena-stack { gap: .31rem; }
  .arena-stack-label { font-size: .54rem; }
  .arena-stack-target { min-height: 47px; padding: .16rem .25rem; }
  .stack-card { padding: .23rem .26rem; gap: .28rem; }
  .stack-damage, .stack-copy { font-size: .65rem; }
  .stack-card { flex-basis: 29px; }
  .stack-card .card-art { min-height: 25px; }
  .arena .sector-controls { gap: .25rem; }
  .arena .sector { padding: .25rem; gap: .24rem; }
  .arena .sector-head { padding: .24rem; min-height: 49px; }
  .arena .sector-label { gap: .25rem; font-size: .69rem; }
  .arena .sector-emblem { width: 1.08rem; height: 1.08rem; }
  .arena .sector-label .icon { width: .9em; }
  .arena .sector-hp { font-size: .56rem; }
  .arena .sector-condition { font-size: .51rem; }
  .arena .sector-relay-tag { font-size: .53rem; }
  .sector-combat-outcome > span { padding: .11rem .18rem; font-size: .56rem; }
  .arena .sector-option .relay-uplink { font-size: .58rem; padding-inline: .27rem; }
  .relay-hud { gap: .22rem .35rem; padding: .32rem .32rem; }
  .relay-score-label { font-size: .57rem; }
  .relay-score-pips { gap: 2px; }
  .relay-score-pips i { height: 7px; }
  .relay-readout { gap: .18rem; }
  .relay-readout-icon { font-size: .84rem; }
  .relay-readout strong { font-size: .72rem; }
  .relay-readout > div > span { font-size: .56rem; }
  .arena .sector-intel-chip { font-size: .57rem; }
  .sector-context-change, .sector-recovery { font-size: .55rem; }
  .arena .sector-units { gap: .19rem; padding: .2rem 0; }
  .arena .sector-unit { flex-basis: 61px; min-height: 55px; font-size: .59rem; }
  .arena .sector-unit .card-art { min-height: 29px; }
  .arena .unit-type { gap: .1rem; font-size: .44rem; letter-spacing: .025em; }
  .arena .unit-type .icon { width: .58rem; height: .58rem; }
  .arena .unit-foot { gap: .16rem; }
  .arena .unit-stat { font-size: .51rem; }
  .combat-readout { padding: .27rem .29rem; gap: .25rem; }
  .combat-heading { font-size: .58rem; padding: 0; }
  .combat-heading > .icon { display: none; }
  .combat-attack strong, .combat-defense strong { font-size: .69rem; }
  .combat-attack small, .combat-defense small { font-size: .59rem; }
  .combat-attack .card-art, .combat-defense .card-art { flex-basis: 22px; height: 22px; }
  .combat-outcome { padding-inline: .27rem; font-size: .65rem; }
  .arena .sector-empty { font-size: .52rem; }
  .arena .hand-card { min-height: 147px; }
  .arena .hand-grid { min-height: 155px; padding-inline: .37rem; }
  .form-split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}