:root {
  color-scheme: dark;
  --bg: #090e17;
  --panel: #101923;
  --panel-up: #152230;
  --line: #283a4d;
  --text: #edf5fd;
  --muted: #9eb1c5;
  --accent: #64efd1;
  --accent-deep: #1d4b49;
  --rift: #c6acff;
  --relay: #b9ff76;
  --heat: #ffab73;
  --blackout: #ffc37d;
  --cargo: #81ffe0;
  --warning: #ffd58a;
  --danger: #ff9f9f;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-family: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--text); background: var(--bg); min-width: 310px; }
a { color: var(--accent); }
button, input, select { font: inherit; }
button, input, select { min-height: 2.45rem; border-radius: 6px; }
button { padding: .52rem .8rem; color: var(--text); background: #1b2b3a; border: 1px solid #344a60; font-weight: 650; cursor: pointer; transition: border-color .13s, background-color .13s, color .13s; }
button:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #062222; }
button.primary:not(:disabled):hover { background: #b5ffef; color: #062222; }
button.ghost { background: transparent; }
button.alert { color: var(--danger); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input, select { width: 100%; padding: .45rem .65rem; background: #0c141e; border: 1px solid #3b4e63; color: var(--text); }
label { display: grid; gap: .35rem; color: var(--muted); font-size: .82rem; font-weight: 650; }
label small { font-weight: 400; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.12; }
p { line-height: 1.5; }
small { font-size: .78rem; }
strong { font-weight: 720; }
.muted { color: var(--muted); }
.skip { position: absolute; top: -5rem; left: 1rem; z-index: 20; }
.skip:focus { top: .75rem; background: var(--bg); padding: .7rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.masthead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.5rem; padding: .8rem clamp(1rem, 4vw, 3.5rem); border-bottom: 1px solid var(--line); background: #0d151f; }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--accent); text-decoration: none; }
.brand span { color: var(--text); font-size: 1.13rem; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.brand strong { color: var(--accent); }
.brand-crest { color: var(--blackout); }
.brand small { display: block; color: var(--blackout); font: 700 .61rem var(--mono); letter-spacing: .17em; text-transform: uppercase; }
.masthead nav, .account { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.nav-tab { border-color: transparent; background: transparent; color: var(--muted); font-size: .88rem; }
.nav-tab[aria-current] { color: var(--accent); background: #15312f; border-color: var(--accent-deep); }
.account { justify-content: end; gap: .7rem; font-size: .83rem; }
.connection { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); }
.connection i { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px #64efd170; }
main { max-width: 1600px; margin: 0 auto; padding: 1.45rem clamp(.8rem, 3vw, 2.6rem) 2.5rem; min-height: calc(100vh - 9.5rem); }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--line); color: var(--muted); padding: 1rem clamp(1rem, 4vw, 3.5rem); font: .72rem var(--mono); }
.notice { position: fixed; z-index: 10; bottom: 1rem; right: 1rem; width: min(36rem, calc(100% - 2rem)); padding: .9rem 1.05rem; background: #162835; border: 1px solid var(--accent-deep); border-left: 4px solid var(--accent); border-radius: 8px; box-shadow: 0 10px 25px #0009; }
.notice[data-error] { border-left-color: var(--danger); }

.hero { position: relative; overflow: hidden; isolation: isolate; min-height: 18rem; display: grid; align-content: center; gap: 1.05rem; padding: clamp(1.3rem, 4vw, 3.5rem); border-radius: 12px; border: 1px solid #674b42; background: #181523; }
.hero-art { position: absolute; z-index: -2; inset: 0; background: url("art/blackout-operations.webp") 76% 53% / cover no-repeat; }
.hero::before { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, #141221fa 3%, #181525da 43%, #17142504 94%), linear-gradient(0deg, #11101ca8, transparent 55%); }
.hero::after { position: absolute; inset: .48rem; z-index: -1; content: ""; pointer-events: none; border: 1px solid #ffc37d40; border-radius: 7px; }
.cargo-scanner { position: absolute; z-index: -1; inset: .55rem .55rem .55rem 67%; overflow: hidden; pointer-events: none; }
.cargo-scanner span { display: block; height: 100%; opacity: 0; background: linear-gradient(0deg, transparent 45%, #81ffe025 48%, #81ffe06e 49.5%, transparent 50.2%); animation: cargo-sweep 3.2s .28s ease-out; }
@keyframes cargo-sweep { 0% { transform: translateY(-62%); opacity: 0; } 18% { opacity: .64; } 82% { opacity: .54; } 100% { transform: translateY(65%); opacity: 0; } }
.eyebrow { display: flex; gap: .45rem; align-items: center; color: var(--accent); font: .72rem var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .15em; }
.hero h1 { max-width: 16ch; font-size: clamp(2.35rem, 5.3vw, 5rem); letter-spacing: -.055em; line-height: .99; }
.hero p { max-width: 52ch; color: #cfdee8; }
.hero-kicker { flex-wrap: wrap; }
.hero-kicker span:first-child { padding: .29rem .42rem; border: 1px solid #bc805f9d; border-radius: 4px; background: #36251cde; color: #ffdeb3; }
.hero-kicker-secondary { color: #b1c1d5; font-size: .64rem; }
.entry-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 1fr); gap: .9rem; }
.entry-grid .auth-card { max-width: none; padding: clamp(1rem, 2vw, 1.75rem); align-content: center; }
.hero[data-compact] { min-height: 10rem; padding: clamp(1.15rem, 2.5vw, 2.2rem); gap: .65rem; }
.hero[data-compact] .hero-art { left: 28%; background-position: 78% 53%; }
.hero[data-compact] h1 { max-width: 32ch; font-size: clamp(1.7rem, 3.5vw, 3.1rem); }
.operation-cards .panel { grid-template-rows: auto auto auto 1fr; }
.operation-cards .panel form { align-content: start; }
.rift-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.rift-feature { --feature-art: url("art/blackout-operations.webp"); --feature-edge: #765749; --feature-color: #ffdcac; position: relative; display: flex; align-items: end; justify-content: space-between; gap: .75rem; min-width: 0; min-height: 7.15rem; padding: .8rem .95rem; border: 1px solid var(--feature-edge); border-radius: 8px; background: linear-gradient(90deg, #151926f2 3%, #151926d6 58%, #1519263a 100%), var(--feature-art) right 53% / cover no-repeat; }
.rift-feature[data-feature="relay"] { --feature-art: url("art/relay-control.webp"); --feature-edge: #48634c; --feature-color: #c8ffa1; }
.rift-feature[data-feature="conquest"] { --feature-art: url("art/operations.webp"); --feature-edge: #37666b; --feature-color: #94ecdf; }
.rift-feature[data-feature="extraction"] { --feature-art: url("art/data-extraction.webp"); --feature-edge: #55766f; --feature-color: var(--cargo); }
.ruleset-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ruleset-features .rift-feature { min-height: 8rem; align-items: start; background-image: linear-gradient(105deg, #121823f0, #121823ba), var(--feature-art); }
.rift-feature .eyebrow { color: var(--feature-color); font-size: .62rem; }
.rift-feature h2 { margin-top: .22rem; font-size: 1.17rem; }
.rift-feature p { max-width: 40ch; margin-top: .3rem; color: #cfdaeb; font-size: .79rem; }
.rift-feature button { flex: 0 0 auto; min-height: 2.25rem; padding: .4rem .58rem; border-color: var(--feature-edge); background: #101b2bf0; font-size: .75rem; }
#operations-status:empty { display: none; }
#operations-status .match-list, #operations-status .invite-list { max-height: 15.5rem; overflow: auto; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { border: 1px solid #3a585f; border-radius: 4px; background: #12252cd9; padding: .23rem .42rem; font: .68rem var(--mono); letter-spacing: .04em; color: #d5e9ea; }
.page, .battle { display: grid; gap: 1.1rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0 0; }
.section-heading h1 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); letter-spacing: -.035em; }
.section-heading h2 { font-size: 1.26rem; }
.section-heading p { margin-top: .35rem; color: var(--muted); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); gap: .9rem; }
.panel { min-width: 0; display: grid; align-content: start; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.panel h2 { font-size: 1.1rem; }
.panel h3 { font-size: 1rem; }
.panel p { color: var(--muted); font-size: .88rem; }
.panel p strong { color: var(--text); }
.panel form, .stack { display: grid; gap: .65rem; }
.panel form > button { justify-self: start; }
.panel .card-icon { color: var(--accent); font: .7rem var(--mono); letter-spacing: .12em; }
.guide-archive { color: var(--muted); font-size: .88rem; }
.archive-banner {
  display: grid;
  justify-items: start;
  gap: .55rem;
  padding: clamp(1.15rem, 3vw, 2.2rem);
  border: 1px solid #3a5c69;
  border-radius: 10px;
  background: linear-gradient(90deg, #101d2a 14%, #102030ec 47%, #0c1726a0 100%), url("art/signal-front.webp") 83% 39% / cover no-repeat;
}
.archive-banner h1 { font-size: clamp(1.85rem, 4vw, 3rem); letter-spacing: -.04em; }
.archive-banner p { max-width: 44rem; color: #dce7ee; }
.archive-banner a { font-size: .84rem; }
.archive-frameworks { gap: .65rem; }
.archive-frameworks p { max-width: 70rem; }
.archive-phases {
  display: flex;
  flex-wrap: wrap;
  gap: .34rem;
  margin: 0;
  padding: 0;
  list-style-position: inside;
}
.archive-phases li {
  padding: .3rem .49rem;
  border: 1px solid #395768;
  border-radius: 5px;
  background: #142633;
  color: #cfe2ef;
  font: .72rem/1.4 var(--mono);
}
.archive-phases li::marker { color: var(--accent); }
.archive-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(9rem, 1fr) auto; align-items: end; gap: .65rem; }
.archive-filters > div { display: grid; min-width: 0; gap: .35rem; }
.archive-filters p { align-self: end; padding: .55rem .15rem; color: var(--muted); font: .74rem/1.4 var(--mono); white-space: nowrap; }
.archive-group { display: grid; gap: .56rem; }
.archive-group > h2 { font-size: 1.19rem; }
.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .65rem; }
.archive-entry { gap: .45rem; padding: .78rem .9rem; }
.archive-entry .archive-field-note { color: #bce9e2; }
.archive-entry .archive-phase { padding-top: .35rem; border-top: 1px solid var(--line); font-size: .77rem; }
.archive-references { display: flex; flex-wrap: wrap; gap: .28rem .65rem; margin: 0; padding: 0; list-style: none; }
.archive-references li { min-width: 0; font-size: .77rem; line-height: 1.4; }
.archive-references a { color: #9ae6df; overflow-wrap: anywhere; text-underline-offset: .16em; }
.archive-references a:hover { color: #dcfff6; }
@media (max-width: 520px) {
  .archive-filters { grid-template-columns: minmax(0, 1fr) auto; }
  .archive-filters > div:first-child { grid-column: 1 / -1; }
}
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem; gap: .55rem; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.auth-card { max-width: 40rem; }
.auth-tabs { display: flex; gap: .4rem; }
.auth-tabs [aria-pressed="true"] { background: #15312f; color: var(--accent); border-color: var(--accent-deep); }
.match-list, .invite-list, .roster-list { display: grid; gap: .45rem; }
.item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .55rem; background: #0c141e; border: 1px solid var(--line); border-radius: 6px; padding: .55rem .7rem; }
.item strong, .item small { display: block; }
.item small { margin-top: .22rem; color: var(--muted); }
.tag { font: .68rem var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.room-code { font: 700 1.05rem var(--mono); color: var(--accent); letter-spacing: .12em; }
.room-wrap { max-width: 55rem; }
.room-rules-brief { padding: .6rem .7rem; border-left: 3px solid var(--rift); border-radius: 4px; background: #161d32; }
.room-rules-brief[data-ruleset="relay"] { border-left-color: var(--relay); background: #1b2a28; }
.room-rules-brief[data-ruleset="extraction"] { border-left-color: var(--blackout); background: #2a2428; }
.room-rules-brief p { margin-top: .24rem; }
.panel .room-rules-description { min-height: 2.5em; font-size: .77rem; }
.room-settings { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .55rem; }
.room-settings > :only-child { grid-column: 1 / -1; }
.map-card .map-size { color: var(--accent); font: .7rem var(--mono); text-transform: uppercase; }
.map-card[data-map="rift"] { border-color: #65547d; background: linear-gradient(110deg, #151a2de8, #151a2da5), url("art/rift-operations.webp") 80% 50% / cover; }
.map-card[data-map="rift"] .map-size { color: var(--rift); }
.map-card[data-map="switchyard"] { border-color: #765749; background: linear-gradient(110deg, #181523eb, #181523ae), url("art/blackout-operations.webp") 80% 55% / cover; }
.map-card[data-map="switchyard"] .map-size { color: var(--blackout); }
.mission-index { color: var(--accent); font: 700 .75rem var(--mono); }
.campaign-banner { padding: clamp(1.2rem, 3vw, 2.3rem); border: 1px solid #325363; border-radius: 10px; background: linear-gradient(90deg, #0b1a29 12%, #102337e6 46%, #10233736 100%), url("art/signal-front.webp") 83% 37% / cover no-repeat; }
.campaign-banner .section-heading { padding: 0; }
.campaign-banner .section-heading h1 { margin-top: .22rem; }
.campaign-banner .section-heading p { color: #d4e3ee; }
.mission-card { grid-template-rows: auto minmax(0, 1fr); padding: 0; gap: 0; }
.mission-card-body { display: grid; align-content: start; gap: .65rem; padding: .85rem; }
.mission-card[data-status="locked"] .mission-index { color: var(--muted); }
.mission-card[data-status="cleared"] { border-color: #387465; }
.mission-art { --mission-hue: #64efd1; position: relative; isolation: isolate; display: flex; align-items: end; height: 6.8rem; padding: .55rem; overflow: hidden; border-radius: 8px 8px 0 0; border-bottom: 1px solid var(--line); color: var(--mission-hue); background: radial-gradient(ellipse at 72% 28%, color-mix(in srgb, var(--mission-hue) 20%, transparent), transparent 62%), repeating-linear-gradient(0deg, #0a1723 0 15px, #1b2e3a 15px 16px); }
.mission-art[data-theater="frontier"] { --mission-hue: #83cafc; }
.mission-art[data-theater="archipelago"] { --mission-hue: #a6b6ff; }
.mission-art[data-theater="megagrid"] { --mission-hue: #8ee8af; }
.mission-art[data-theater="starfall"] { --mission-hue: #d5a7fa; }
.mission-art[data-art] { background-image: linear-gradient(0deg, #07111bcf, #07111b12 68%), url("art/signal-front.webp"); background-size: cover, 175% auto; }
.mission-art[data-art="backbone"] { --mission-hue: #ffd58a; background-position: center, 0 72%; }
.mission-art[data-art="counter"] { --mission-hue: #8fe4ff; background-position: center, 100% 31%; }
.mission-art[data-art="relay"] { --mission-hue: var(--relay); background-image: linear-gradient(0deg, #08190dd0, #07111b0d 62%), url("art/relay-control.webp"); background-size: cover; background-position: 70% 46%; }
.mission-art[data-art="extraction"] { --mission-hue: var(--cargo); background-image: linear-gradient(0deg, #081a19e0, #14101b0e 66%), url("art/data-extraction.webp"); background-size: cover; background-position: 60% 51%; }
.mission-art::after { position: absolute; z-index: -1; inset: .3rem; border: 1px solid #b9e5ff2d; border-radius: 5px; content: ""; pointer-events: none; }
.mission-art svg { position: absolute; z-index: -1; right: 8%; bottom: .65rem; width: min(70%, 11.5rem); opacity: .72; }
.mission-art span { padding: .26rem .4rem; border: 1px solid #94c8d55c; border-radius: 3px; background: #07131de8; font: 700 .67rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
#mission-brief .mission-art { height: clamp(5rem, 15vw, 8rem); border: 1px solid var(--line); border-radius: 6px; }
.table-wrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; text-align: left; }
th, td { padding: .65rem .55rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--muted); font-size: .78rem; }
td { font-size: .88rem; }
td:first-child { color: var(--accent); font-family: var(--mono); }
details { border-top: 1px solid var(--line); padding-top: .5rem; }
summary { color: var(--accent); cursor: pointer; font-size: .81rem; }
details p { margin-top: .5rem; }

.in-match { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.in-match main { flex: 1; display: flex; min-height: 0; width: 100%; max-width: none; padding: .62rem; }
.in-match footer { display: none; }
.in-match .masthead { padding: .38rem .82rem; }
.in-match .brand svg { width: 34px; height: 34px; }
.in-match .brand small { display: none; }
.in-match .masthead nav { width: auto; order: 0; }
.in-match .notice { bottom: 3.7rem; }
.battle { width: 100%; min-width: 0; grid-template: auto auto minmax(0, 1fr) / minmax(0, 1fr); gap: .45rem; }
.battle-heading, .match-title { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.battle-heading { justify-content: space-between; padding: 0 .12rem; }
.battle-heading h1 { font-size: clamp(1.12rem, 2vw, 1.65rem); letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-heading button { flex: 0 0 auto; min-height: 2rem; padding: .3rem .62rem; font-size: .78rem; }
.match-mode { color: var(--muted); font: .68rem var(--mono); text-transform: uppercase; white-space: nowrap; }
.match-round { flex: 0 0 auto; }
.match-ruleset { flex: 0 0 auto; padding: .24rem .4rem; border: 1px solid #58734b; border-radius: 4px; background: #172922; color: var(--relay); font: 700 .66rem var(--mono); white-space: nowrap; }
.match-ruleset[data-ruleset="extraction"] { border-color: #946d4b; background: #30241d; color: var(--blackout); }
.relay-rule-short { display: none; }
.battle-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(285px, 24vw, 365px); gap: .55rem; min-height: 0; }
.battle[data-map-focus] .battle-grid { grid-template-columns: minmax(0, 1fr); }
.board-panel, .tactical-console { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); min-width: 0; min-height: 0; }
.board-panel {
  --board-accent: #86d7df;
  display: grid;
  grid-template: auto minmax(0, 1fr) auto / minmax(0, 1fr);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--board-accent) 25%, #1d2b3b);
  box-shadow: 0 .36rem 1rem #050b1477;
}
.board-panel[data-theater="frontier"] { --board-accent: #90bff0; }
.board-panel[data-theater="archipelago"] { --board-accent: #81d7ba; }
.board-panel[data-theater="megagrid"], .board-panel[data-theater="starfall"] { --board-accent: #aab7ee; }
.board-panel[data-theater="rift"] { --board-accent: #c6acff; }
.board-panel[data-theater="switchyard"] { --board-accent: #e8b480; }
.board-toolbar, .map-summary { display: flex; align-items: center; gap: .55rem; padding: .4rem .55rem; }
.board-toolbar {
  grid-area: 1 / 1;
  border-bottom: 1px solid color-mix(in srgb, var(--board-accent) 24%, #223343);
  background: linear-gradient(100deg, color-mix(in srgb, var(--board-accent) 14%, #12202c), #0e1721 62%);
  box-shadow: inset 0 1px #cde9f414;
}
.map-kicker { color: var(--board-accent); font: 700 .69rem var(--mono); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.map-buttons { display: flex; gap: .35rem; margin-left: auto; }
.map-buttons button { min-height: 2rem; padding: .2rem .52rem; border-color: #37536a; background: #192c3c; font-size: .77rem; white-space: nowrap; }
.map-focus-control svg { display: none; }
.map-buttons .motion-control { border-color: #365b66; background: #142735; }
.motion-control strong { color: var(--accent); }
.motion-control[aria-pressed="false"] { border-color: #755a46; background: #2e241d; }
.motion-control[aria-pressed="false"] strong { color: #ffd09f; }
.audio-controls { display: flex; gap: .2rem; }
.map-buttons .audio-control { display: inline-grid; place-items: center; min-width: 2.1rem; padding-inline: .34rem; }
.audio-control[aria-pressed="true"] { color: var(--accent); border-color: #3c746f; background: #153139; }
.audio-control[aria-pressed="true"] .audio-off-glyph, .audio-control[aria-pressed="false"] .audio-on-glyph { display: none; }
.map-legend, .map-summary { color: var(--muted); font: .71rem var(--mono); }
.map-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.map-legend span { display: flex; gap: .35rem; align-items: center; }
.legend-symbol { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border: 1px solid #537087; color: var(--accent); border-radius: 4px; }
.legend-symbol[data-jam] { border-color: #8e6264; color: #ffaf94; }
.legend-supply { width: 1rem; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #3e6f70, var(--accent), #e1fff6); }
.legend-symbol[data-relay="active"] { border-color: #658954; color: var(--relay); }
.legend-symbol[data-relay="next"] { border-style: dashed; border-color: #8068a1; color: var(--rift); }
.legend-symbol[data-cargo="cache"] { border-color: #4b847b; color: var(--cargo); }
.legend-symbol[data-cargo="courier"] { border-color: #748795; color: #f0f7ff; }
#map { grid-area: 2 / 1; min-height: 0; min-width: 0; position: relative; background: #07111b; overflow: hidden; touch-action: none; cursor: grab; }
#map:active { cursor: grabbing; }
#map:focus-visible { outline-offset: -3px; }
#map canvas { display: block; }
#map::after {
  --bracket: color-mix(in srgb, var(--board-accent) 34%, transparent);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--bracket), var(--bracket)) left 7px top 7px / 11px 1px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) left 7px top 7px / 1px 11px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) right 7px top 7px / 11px 1px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) right 7px top 7px / 1px 11px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) left 7px bottom 7px / 11px 1px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) left 7px bottom 7px / 1px 11px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) right 7px bottom 7px / 11px 1px no-repeat,
    linear-gradient(var(--bracket), var(--bracket)) right 7px bottom 7px / 1px 11px no-repeat;
  content: "";
}
.map-fallback { padding: 1rem; color: var(--muted); }
.map-summary { grid-area: 3 / 1; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--line); min-height: 1.55rem; padding-block: .28rem; background: #101e2a; color: #b6cedc; }
.combat-shade {
  grid-area: 2 / 1;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, #0c192ce6 0%, #070e18eb 58%, #050913f2 100%);
  transition: opacity .24s ease-out;
}
.board-panel:has(.combat-report[data-phase="rolling"]:not([hidden])) .combat-shade { opacity: 1; transition: none; }
.board-panel:has(#map[data-disarming]):has(.combat-report[data-phase="rolling"]:not([hidden])) .combat-shade { opacity: .27; }
.board-panel:has(.combat-report:is([data-phase="trap"], [data-phase="bypass"]):not([hidden])) .combat-shade { opacity: .27; transition: none; }
.board-panel:has(.combat-report[data-phase="resolved"]:not([hidden])) .combat-shade { opacity: .36; }
.combat-report {
  position: relative;
  grid-area: 2 / 1;
  z-index: 3;
  place-self: center;
  width: min(34rem, calc(100% - 1.2rem));
  max-height: calc(100% - .7rem);
  min-width: 0;
  padding: 1rem 1.1rem .95rem;
  overflow: auto;
  overscroll-behavior: contain;
  pointer-events: none;
  border: 1px solid #537991;
  border-radius: 12px;
  background: linear-gradient(130deg, #192d3d 0%, #101c29 37%, #0e1723 83%);
  box-shadow: inset 0 1px #b0e8ff20, 0 16px 48px #030710cd, 0 0 36px #26475d51;
  animation: combat-arrive .2s ease-out;
}
.combat-report[data-phase="rolling"] { border-color: #76b0bc; }
.combat-report::before {
  position: absolute;
  inset: 0 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a3e8f5b8, transparent);
  content: "";
}
.combat-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.combat-heading > div { min-width: 0; }
.combat-heading .eyebrow { margin-bottom: .35rem; color: #86e7db; font-size: .64rem; }
.combat-heading h2 { color: #f2f7fb; overflow-wrap: anywhere; font-size: clamp(1rem, 2.1vw, 1.34rem); line-height: 1.18; }
.combat-arrow { padding-inline: .15em; color: #8fbdcc; }
.combat-dismiss {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 2.4rem;
  min-height: 2.4rem;
  padding: .08rem;
  pointer-events: auto;
  font-size: 1.35rem;
  line-height: 1;
}
.combat-vector { margin-top: .4rem; color: #b7cbdc; font-size: .78rem; }
.combat-overclock, .combat-trap { color: var(--heat); }
.combat-trap[data-mode="bypass"] { color: #91eadc; }
.combat-trap-sequence {
  --trap-color: #c7a6ff;
  --trap-tone: #302347;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .62rem .85rem;
  margin-top: .77rem;
  padding: .68rem .76rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--trap-color) 48%, #152431);
  border-radius: 8px;
  background: radial-gradient(ellipse at 0% 15%, var(--trap-tone), #101927 78%);
}
.combat-trap-sequence[data-trap="blackhole"] { --trap-color: #9eb4ff; --trap-tone: #202a4a; }
.combat-trap-sequence[data-trap="sinkhole"] { --trap-color: #ffd18b; --trap-tone: #38271d; }
.combat-trap-sequence[data-state="arming"] { border-color: #486070; }
.combat-trap-sequence[data-state="triggered"] { animation: combat-trap-trigger .45s ease-out; }
.combat-trap-sequence[data-state="blocked"] {
  border-color: #eb9a7a;
  background: radial-gradient(ellipse at 0% 15%, #4d2a23, #191e2b 82%);
}
.combat-trap-emblem {
  position: relative;
  grid-area: 1 / 1;
  width: clamp(2.6rem, 9vw, 3.6rem);
  aspect-ratio: 1;
  color: var(--trap-color);
  filter: drop-shadow(0 0 .42rem color-mix(in srgb, currentColor 60%, transparent));
}
.combat-trap-emblem::before, .combat-trap-emblem::after { position: absolute; content: ""; }
.combat-trap-emblem::before {
  inset: 2%;
  opacity: .65;
  background: conic-gradient(from 30deg, currentColor, transparent 20%, currentColor 40%, transparent 58%, currentColor 77%, transparent 94%);
  clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%, 50% 0, 50% 7%, 12% 29%, 12% 71%, 50% 93%, 88% 71%, 88% 29%, 50% 7%);
}
.combat-trap-emblem::after {
  inset: 24%;
  background: currentColor;
  clip-path: polygon(50% 0, 95% 24%, 95% 76%, 50% 100%, 5% 76%, 5% 24%, 50% 0, 50% 21%, 25% 35%, 25% 65%, 50% 79%, 75% 65%, 75% 35%, 50% 21%);
}
.combat-trap-sequence[data-trap="blackhole"] .combat-trap-emblem::before {
  inset: 7%;
  border-radius: 50%;
  clip-path: none;
  mask-image: radial-gradient(transparent 58%, #000 61%);
}
.combat-trap-sequence[data-trap="blackhole"] .combat-trap-emblem::after {
  inset: 21%;
  border-radius: 50%;
  background: radial-gradient(circle at 46% 48%, #070b16 32%, currentColor 58%, transparent 70%);
  clip-path: none;
}
.combat-trap-sequence[data-trap="sinkhole"] .combat-trap-emblem::after {
  background: repeating-linear-gradient(to bottom, currentColor 0 19%, transparent 20% 36%);
  clip-path: polygon(0 5%, 100% 5%, 50% 100%);
}
.combat-trap-sequence[data-state="arming"] .combat-trap-emblem { opacity: .47; }
.combat-trap-sequence[data-state="triggered"] .combat-trap-emblem::before { animation: combat-trap-ring .49s ease-out both; }
.combat-trap-sequence[data-burnout="active"] .combat-trap-emblem {
  animation: combat-honeypot-burnout var(--trap-burnout-duration, 320ms) ease-out both;
}
.combat-trap-sequence[data-trap="blackhole"][data-burnout="active"] .combat-trap-emblem { animation-name: combat-blackhole-burnout; }
.combat-trap-sequence[data-trap="sinkhole"][data-burnout="active"] .combat-trap-emblem { animation-name: combat-sinkhole-burnout; }
.combat-trap-sequence:is([data-burnout="active"], [data-burnout="spent"]) .combat-trap-emblem::before { animation: none; }
.combat-trap-sequence[data-burnout="spent"] .combat-trap-emblem { opacity: 0; }
.combat-trap-kicker { color: var(--trap-color); font: 700 .62rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.combat-trap-title { color: #f4f2fa; font-size: clamp(1rem, 3.9vw, 1.25rem); line-height: 1.18; }
.combat-trap-detail { margin-top: .14rem; color: #c4d3df; font-size: .76rem; }
.combat-trap-spent { margin-top: .22rem; color: #d5bfad; font: 700 .64rem var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.combat-trap-count-label { margin-inline-start: auto; color: #c4d3df; font: .67rem var(--mono); }
.combat-trap-count { display: inline-block; color: #ffd6b1; font: 700 .82rem var(--mono); font-variant-numeric: tabular-nums; }
.combat-trap-count[data-tick="odd"] { animation: combat-casualty-odd .2s ease-out; }
.combat-trap-count[data-tick="even"] { animation: combat-casualty-even .2s ease-out; }
.combat-trap-units { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: .32rem; }
.combat-trap-unit {
  position: relative;
  display: inline-grid;
  width: .93rem;
  height: .88rem;
  place-items: center;
  border: 1px solid #669d9e;
  border-radius: 3px;
  background: #193238;
}
.combat-trap-unit::before { width: .32rem; height: .32rem; border-radius: 50%; background: #a5f7eb; content: ""; }
.combat-trap-unit[data-lost] { border-color: #d27d65; background: #412820; }
.combat-trap-unit[data-lost]::before { width: .58rem; height: .12rem; border-radius: 1px; background: #ffad88; transform: rotate(-45deg); }
.combat-trap-unit[data-hit] { animation: combat-trap-hit .27s ease-out both; }
.combat-trap-unit[data-hit]::after { position: absolute; inset: -4px; border: 1px solid #ffd1aa; border-radius: 5px; animation: combat-trap-ring .26s ease-out both; content: ""; }
.combat-trap-sequence[data-mode="bypass"] .combat-trap-copy { grid-column: 1 / -1; }
.combat-trap-sequence[data-mode="bypass"] .combat-trap-kicker { color: #91eadc; }
.combat-trap-sequence[data-mode="bypass"][data-state="bypassed"] {
  border-color: #6dd4bb;
  background: radial-gradient(ellipse at 70% 84%, #18423f, #101927 78%);
}
.combat-bypass-track { position: relative; grid-column: 1 / -1; height: 2.4rem; margin-inline: .36rem; }
.combat-bypass-track::before {
  position: absolute;
  inset: .48rem 0 .73rem;
  border-top: 1px dashed #70d7c8a1;
  border-radius: 49% 49% 0 0;
  background: radial-gradient(ellipse at 50% 0%, #35696748, transparent 68%);
  content: "";
}
.combat-bypass-track::after {
  position: absolute;
  inset: auto 0 .64rem;
  border-bottom: 1px solid #5573888c;
  content: "";
}
.combat-bypass-track .combat-bypass-obstacle {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -.06rem;
  width: 1.75rem;
  opacity: .76;
  transform: translateX(-50%);
}
.combat-trap-sequence[data-state="bypassed"] .combat-bypass-obstacle { opacity: .55; }
.combat-bypass-unit {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: .48rem;
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: #b4ffed;
  box-shadow: 0 0 .4rem #7af9d8;
  opacity: 0;
}
.combat-trap-sequence[data-state="bypassing"] .combat-bypass-unit {
  animation: combat-bypass-cross var(--bypass-travel, 460ms) linear
    calc(var(--bypass-index, 0) * var(--bypass-stagger, 25ms)) both;
}
.combat-rolls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .55rem; margin-top: .78rem; }
.combat-side {
  --side-color: #98fff3;
  --side-tint: #244f57;
  --side-tone: #113039;
  --roll-sway: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) minmax(.93rem, auto);
  align-content: start;
  gap: .19rem;
  padding: .57rem .65rem .64rem;
  border: 1px solid var(--side-tint);
  border-radius: 8px;
  background: radial-gradient(ellipse at 10% 5%, var(--side-tone), #0b1521 77%);
}
.combat-side[data-side="attack"] { grid-area: 1 / 1; }
.combat-side[data-side="defense"] {
  --side-color: #ffd0aa;
  --side-tint: #725447;
  --side-tone: #38281f;
  --roll-sway: -1;
  grid-area: 1 / 3;
}
.combat-side[data-state="rolling"] { border-color: var(--side-color); box-shadow: inset 0 0 1.3rem var(--side-tint); }
.combat-side[data-winner] {
  border-color: var(--side-color);
  background: radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--side-color) 25%, var(--side-tone)), #0b1521 82%);
  box-shadow: inset 0 0 .85rem var(--side-tint), 0 0 .85rem color-mix(in srgb, var(--side-color) 24%, transparent);
  animation: combat-winner-reveal .45s ease-out;
}
.combat-versus { grid-area: 1 / 2; align-self: center; color: #9bb6c8; font: 700 .65rem var(--mono); text-align: center; }
.combat-report[data-stage="compare"] .combat-versus { color: #f9e0ab; }
.combat-side-label { color: var(--side-color); font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.combat-winner { color: var(--side-color); font: 700 .63rem/1.3 var(--mono); text-align: center; }
.combat-commander { overflow: hidden; color: #c7d8e4; text-overflow: ellipsis; white-space: nowrap; font-size: .77rem; }
.combat-numbers { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .58rem; min-height: 5.9rem; margin-top: .43rem; }
.combat-numbers > div:last-child { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .22rem; min-width: 0; }
.combat-die {
  --combat-die-size: 4.12rem;
  position: relative;
  flex: 0 0 var(--combat-die-size);
  width: var(--combat-die-size);
  height: var(--combat-die-size);
  perspective: 20rem;
}
.combat-die::before {
  position: absolute;
  inset: auto 4% -11%;
  height: 20%;
  border-radius: 50%;
  background: #02050b;
  filter: blur(.18rem);
  opacity: .85;
  content: "";
}
.combat-die-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  place-items: center;
  padding: .48rem;
  border: 1px solid var(--side-color);
  border-radius: .74rem;
  background: linear-gradient(145deg, var(--side-tint), #0b1522 90%);
  box-shadow: inset 0 0 0 2px #d5e9fc26, inset 0 1px 3px #f0fbff38;
  transform-style: preserve-3d;
}
.combat-die-face::before {
  position: absolute;
  inset: 2% -3% -7% 2%;
  border-radius: inherit;
  border: 1px solid var(--side-tint);
  background: linear-gradient(150deg, var(--side-tone), #050a13 78%);
  transform: translateZ(-.38rem);
  content: "";
}
.combat-die [data-pip] { width: .51rem; height: .51rem; border-radius: 50%; background: var(--side-color); box-shadow: 0 0 .34rem color-mix(in srgb, var(--side-color) 60%, transparent); }
.combat-die[data-tumbling] .combat-die-face { animation: die-tumble var(--combat-die-duration, .62s) linear both; }
.combat-die[data-tumbling]::before { animation: die-shadow var(--combat-die-duration, .62s) linear both; }
.combat-report[data-stage="defender"] [data-side="attack"] .combat-die[data-face] .combat-die-face,
.combat-report[data-stage="compare"] [data-side="defense"] .combat-die[data-face] .combat-die-face { animation: die-land .28s ease-out both; }
.combat-die[data-waiting] { opacity: .56; }
.combat-die[data-waiting] .combat-die-face { border-color: #738492; filter: saturate(.25); }
.combat-side[data-winner] .combat-die-face { box-shadow: inset 0 0 .65rem var(--side-tint), 0 0 .65rem color-mix(in srgb, var(--side-color) 48%, transparent); }
.combat-equation { color: #bcd2e2; font: .73rem var(--mono); white-space: nowrap; }
.combat-total { color: var(--side-color); font: 700 1.62rem/1 var(--mono); }
.combat-outcome, .combat-pending { min-height: 4.3rem; margin-top: .77rem; padding: .55rem .68rem; border: 1px solid #405b6e; border-radius: 8px; background: #0b1520; }
.combat-pending {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #c9e7ec;
  font: 700 .74rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .13em;
}
.combat-pending::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  transform-origin: left;
  background: linear-gradient(90deg, #72ebdd 15%, #f0ddb2 100%);
  animation: combat-countdown var(--combat-roll-duration, 1.5s) linear both;
  content: "";
}
.combat-outcome {
  --result-color: #bfe5fc;
  --result-tone: #203447;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  gap: .19rem;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--result-color) 46%, #17232e);
  background: linear-gradient(108deg, var(--result-tone), #0c1723 80%);
  animation: combat-arrive .24s ease-out;
}
.combat-outcome::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 88% 24%, var(--result-color), transparent 68%);
  opacity: 0;
  content: "";
}
.combat-report[data-aftermath="complete"] .combat-outcome::after { animation: combat-outcome-flash .65s ease-out; }
.combat-outcome[data-hold]::after {
  background: radial-gradient(ellipse at 88% 24%, var(--combat-defender-color, #a7bfd1), transparent 68%);
}
.combat-verdict { display: flex; align-items: center; gap: .47rem; color: var(--result-color); }
.combat-outcome-title { color: var(--result-color); font-size: 1.23rem; line-height: 1.15; }
.combat-outcome-icon {
  display: grid;
  place-items: center;
  flex: 0 0 1.52rem;
  height: 1.52rem;
  border: 1px solid color-mix(in srgb, var(--result-color) 65%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--result-color) 12%, transparent);
  font: 700 .92rem/1 var(--mono);
}
.combat-outcome[data-outcome="captured"] { --result-color: #8bf9db; --result-tone: #143a37; }
.combat-outcome[data-outcome="disrupted"] { --result-color: #97e8ff; --result-tone: #153a52; }
.combat-outcome[data-outcome="intercepted"] { --result-color: #ffdc96; --result-tone: #42331f; }
.combat-outcome:is([data-outcome="damaged"], [data-outcome="backup_restored"]) { --result-color: #d9c3ff; --result-tone: #34264b; }
.combat-outcome:is([data-outcome="repelled"], [data-outcome="blocked"]) { --result-color: #ffb5a2; --result-tone: #472b2a; }
.combat-casualties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .36rem .65rem; color: #c8d6e3; font-size: .76rem; }
.combat-casualties b { color: #f2f7fc; font-family: var(--mono); }
.combat-casualty { display: grid; align-content: start; gap: .12rem; padding: .18rem .38rem; border-left: 2px solid #7e9cb24d; }
.combat-remaining { color: #b1c9d9; font-size: .71rem; }
.combat-remaining .combat-remaining-count { font-size: .88rem; }
.combat-casualty :is(.combat-loss-count, .combat-remaining-count) { display: inline-block; min-width: 1ch; font-variant-numeric: tabular-nums; }
.combat-casualty[data-tick="odd"] :is(.combat-loss-count, .combat-remaining-count) { animation: combat-casualty-odd .16s ease-out; }
.combat-casualty[data-tick="even"] :is(.combat-loss-count, .combat-remaining-count) { animation: combat-casualty-even .16s ease-out; }
.combat-occupation {
  display: grid;
  grid-template-columns: minmax(2.9rem, auto) minmax(1.9rem, 1fr) minmax(2.9rem, auto);
  align-items: start;
  gap: .18rem .47rem;
  margin-top: .16rem;
  padding-top: .4rem;
  border-top: 1px solid #4b8a7c70;
  color: #9af7df;
}
.combat-occupation-endpoint { display: grid; justify-items: center; gap: .14rem; color: #d5ece8; font: .66rem var(--mono); }
.combat-occupation-hex {
  width: 1.04rem;
  height: .91rem;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: #6fb9a6;
}
.combat-occupation-endpoint[data-role="target"] .combat-occupation-hex { background: #446b70; }
.combat-occupation[data-state="arrived"] .combat-occupation-endpoint[data-role="target"] .combat-occupation-hex { background: #b8ffde; }
.combat-occupation-track { position: relative; height: .91rem; }
.combat-occupation-track::before { position: absolute; inset: calc(50% - 1px) 0 auto; height: 2px; background: #5fbfac70; content: ""; }
.combat-occupation-marker {
  position: absolute;
  top: calc(50% - .17rem);
  left: 0;
  width: .34rem;
  height: .34rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #a7ffde;
  box-shadow: 0 0 .4rem #8bf9db;
  opacity: 0;
}
.combat-occupation[data-state="travel"] .combat-occupation-marker {
  animation: combat-occupation-cross var(--combat-flight-travel, 340ms) linear
    calc(var(--combat-marker-index, 0) * var(--combat-flight-stagger, 18ms)) both;
}
.combat-occupation[data-direction="retreat"] {
  border-top-color: #708fa875;
}
.combat-occupation[data-direction="retreat"] .combat-occupation-track::before { background: #91adc27a; }
.combat-occupation[data-direction="retreat"] .combat-occupation-marker {
  background: var(--combat-attacker-color, #b9dfff);
  box-shadow: 0 0 .4rem var(--combat-attacker-color, #b9dfff);
}
.combat-occupation[data-direction="retreat"][data-state="travel"] .combat-occupation-marker { animation-direction: reverse; }
.combat-occupation[data-direction="retreat"] [data-role="source"] .combat-occupation-hex {
  background: var(--combat-attacker-color, #b9dfff);
}
.combat-occupation[data-direction="retreat"] [data-role="target"] .combat-occupation-hex {
  background: color-mix(in srgb, var(--combat-defender-color, #a7bfd1) 55%, #172733);
}
.combat-occupation[data-direction="retreat"][data-state="arrived"] [data-role="target"] .combat-occupation-hex {
  background: var(--combat-defender-color, #a7bfd1);
  animation: combat-hold-pulse .65s ease-out;
}
.combat-occupation-label { grid-column: 1 / -1; color: #b9e7dc; text-align: center; font: .67rem var(--mono); }
.combat-outcome p { color: #b6c9d8; font-size: .74rem; line-height: 1.35; }
@keyframes combat-arrive { from { opacity: .78; transform: translateY(.25rem) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes combat-countdown { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes combat-outcome-flash { from { opacity: .58; } to { opacity: 0; } }
@keyframes combat-winner-reveal { from { filter: brightness(1.28); } to { filter: none; } }
@keyframes combat-trap-trigger {
  from { box-shadow: inset 0 0 1.45rem color-mix(in srgb, var(--trap-color) 44%, transparent); }
  to { box-shadow: none; }
}
@keyframes combat-trap-ring { from { opacity: 1; transform: scale(.85); } to { opacity: 0; transform: scale(1.55); } }
@keyframes combat-honeypot-burnout {
  20% { transform: translateX(-.14rem) rotate(-7deg) scale(1.08); }
  47% { opacity: 1; transform: translateX(.1rem) rotate(8deg) scale(.84); }
  100% { opacity: 0; transform: translateY(.18rem) rotate(12deg) scale(.55); }
}
@keyframes combat-blackhole-burnout {
  47% { opacity: 1; transform: rotate(115deg) scale(.67); }
  100% { opacity: 0; transform: rotate(245deg) scale(.14); }
}
@keyframes combat-sinkhole-burnout {
  28% { transform: translateY(-.13rem) scale(1.12, .83); }
  47% { opacity: 1; transform: translateY(.18rem) scale(.98, .48); }
  100% { opacity: 0; transform: translateY(.62rem) scale(.67, .08); }
}
@keyframes combat-trap-hit {
  24% { background: #f09669; transform: translateY(-.17rem) rotate(-10deg) scale(1.13); }
  64% { transform: translateY(.06rem) rotate(4deg); }
}
@keyframes combat-bypass-cross {
  0% { left: 0; opacity: 0; transform: translate(-50%, 0); }
  12% { opacity: 1; transform: translate(-50%, -.3rem); }
  36% { transform: translate(-50%, -1.14rem); }
  50% { transform: translate(-50%, -1.28rem); }
  64% { transform: translate(-50%, -1.14rem); }
  88% { opacity: 1; transform: translate(-50%, -.3rem); }
  100% { left: 100%; opacity: 0; transform: translate(-50%, 0); }
}
@keyframes combat-casualty-odd { from { color: #ffab97; transform: translateY(-.19rem) scale(1.16); } to { transform: none; } }
@keyframes combat-casualty-even { from { color: #ffc1a7; transform: translateY(-.15rem) scale(1.12); } to { transform: none; } }
@keyframes combat-occupation-cross {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes combat-hold-pulse {
  25% { transform: scale(1.34); filter: brightness(1.65); }
  60% { transform: scale(1.1); filter: brightness(1.22); }
}
@keyframes die-tumble {
  0% { transform: translate3d(calc(-26% * var(--roll-sway)), -.1rem, 0) rotateZ(calc(-22deg * var(--roll-sway))) rotateX(32deg) rotateY(-34deg) scale(.86); }
  11% { transform: translate3d(calc(-19% * var(--roll-sway)), -.9rem, 0) rotateZ(calc(49deg * var(--roll-sway))) rotateX(-34deg) rotateY(30deg) scale(.91); }
  22% { transform: translate3d(calc(-13% * var(--roll-sway)), .14rem, 0) rotateZ(calc(105deg * var(--roll-sway))) rotateX(24deg) rotateY(-27deg) scale(1.06, .88); }
  35% { transform: translate3d(calc(-5% * var(--roll-sway)), -.65rem, 0) rotateZ(calc(174deg * var(--roll-sway))) rotateX(42deg) rotateY(23deg) scale(.97); }
  48% { transform: translate3d(calc(3% * var(--roll-sway)), .11rem, 0) rotateZ(calc(246deg * var(--roll-sway))) rotateX(-22deg) rotateY(-19deg) scale(1.04, .93); }
  60% { transform: translate3d(calc(6% * var(--roll-sway)), -.43rem, 0) rotateZ(calc(312deg * var(--roll-sway))) rotateX(-31deg) rotateY(28deg) scale(.99); }
  72% { transform: translate3d(calc(4% * var(--roll-sway)), .08rem, 0) rotateZ(calc(349deg * var(--roll-sway))) rotateX(18deg) rotateY(-10deg) scale(1.02, .96); }
  81% { transform: translate3d(calc(2% * var(--roll-sway)), -.17rem, 0) rotateZ(calc(366deg * var(--roll-sway))) rotateX(-13deg) rotateY(6deg) scale(1); }
  90% { transform: translate3d(0, .04rem, 0) rotateZ(calc(359deg * var(--roll-sway))) rotateX(5deg) rotateY(0deg) scale(1.01, .98); }
  100% { transform: translate3d(0, 0, 0) rotateZ(calc(360deg * var(--roll-sway))) rotateX(0deg) rotateY(0deg) scale(1); }
}
@keyframes die-shadow {
  0% { opacity: .54; transform: translateX(calc(-26% * var(--roll-sway))) scale(.76); }
  11%, 35%, 60%, 81% { opacity: .34; transform: scale(.66); }
  22%, 48%, 72%, 90%, 100% { opacity: .86; transform: scale(1); }
}
@keyframes die-land {
  0% { transform: translateY(.1rem) scale(1.05, .91); }
  31% { transform: translateY(-.34rem) rotateZ(calc(4deg * var(--roll-sway))) scale(.99, 1.02); }
  58% { transform: translateY(.07rem) scale(1.025, .965); }
  78% { transform: translateY(-.12rem) rotateZ(calc(-1.4deg * var(--roll-sway))); }
  100% { transform: none; }
}
.tactical-console { display: flex; flex-direction: column; }
.battle[data-map-focus] .tactical-console { display: none; }
.console-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem; padding: .28rem; background: #0c141e; border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; }
.console-tabs button { min-height: 2.15rem; padding: .22rem .24rem; border-color: transparent; background: transparent; color: var(--muted); font-size: .74rem; }
.console-tabs [aria-pressed="true"] { color: var(--accent); border-color: #32595c; background: #153139; }
.console-tabs button { position: relative; }
.activity-badge { display: inline-block; margin-left: .19rem; color: var(--warning); font: 700 .61rem var(--mono); vertical-align: top; }
.console-content { display: flex; flex-direction: column; min-height: 0; }
.console-scroll { overflow: auto; min-height: 0; overscroll-behavior: contain; scrollbar-gutter: stable; }
.mobile-order-footer { display: none; }
.console-panel { display: grid; gap: .65rem; padding: .67rem; }
.console-panel > h2 { font-size: 1.04rem; }
.turn-banner { display: flex; align-items: center; gap: .62rem; padding: .38rem .54rem; border: 1px solid #354a5b; border-left: 3px solid #52758e; background: #101b28; border-radius: 7px; }
.turn-banner[data-turn="own"] { border-color: #386966; border-left-color: var(--accent); background: linear-gradient(100deg, #163331, #101b27 60%); }
.turn-banner[data-turn="finished"] { border-color: #8e733f; }
.turn-banner[data-cue] { animation: tactical-confirm .72s ease-out; }
.turn-banner[data-cue="result"] { animation-duration: 1.15s; }
.turn-banner[data-cue="relay"] { animation-name: relay-shift; }
.turn-banner[data-cue="delivery"] { animation-name: cargo-delivered; }
.turn-banner[data-cue="trap-failed"] { animation-name: trap-alert; }
@keyframes tactical-confirm { from { box-shadow: inset 0 0 1.4rem #64efd150; } to { box-shadow: inset 0 0 0 #64efd100; } }
@keyframes relay-shift { from { box-shadow: inset 0 0 1.4rem #b9ff7670; } to { box-shadow: inset 0 0 0 #b9ff7600; } }
@keyframes cargo-delivered { from { box-shadow: inset 0 0 1.4rem #ffc37d76; } to { box-shadow: inset 0 0 0 #ffc37d00; } }
@keyframes trap-alert { from { box-shadow: inset 0 0 1.4rem #ff9f9f65; } to { box-shadow: inset 0 0 0 #ff9f9f00; } }
.turn-state { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .62rem; row-gap: .12rem; }
.turn-state h2 { font-size: .95rem; }
.turn-state p { color: var(--muted); font-size: .74rem; }
.turn-timer { color: var(--warning); font: 700 .72rem var(--mono); white-space: nowrap; }
.relay-score-hud { color: var(--relay); font: 700 .73rem var(--mono); white-space: nowrap; }
.delivery-score-hud { color: var(--blackout); font: 700 .73rem var(--mono); white-space: nowrap; }
.turn-banner > button { min-height: 2.16rem; flex: 0 0 auto; margin-left: .1rem; font-size: .78rem; }
.resource-row { display: grid; grid-template-columns: repeat(4, auto); gap: .25rem; margin-left: auto; }
.resource { display: flex; align-items: center; justify-content: center; gap: .3rem; min-width: 0; padding: .3rem .42rem; border: 1px solid #32495a; border-radius: 4px; background: #0d1923; }
.resource strong { color: var(--accent); font: 700 .88rem var(--mono); }
.resource small { font: .59rem var(--mono); color: #bfd2dd; text-transform: uppercase; }
.resource .short-label { display: none; }
.node-info, .action-card { display: grid; gap: .44rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.node-info h2 { font-size: 1.12rem; }
.node-name-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .28rem .5rem; }
.node-info p, .action-card p, #mission-brief p { font-size: .8rem; color: var(--muted); }
#inspector, #mission-brief { display: grid; gap: .65rem; }
.mission-goals { display: grid; gap: .35rem; }
.mission-goal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem; align-items: center; padding: .43rem .55rem; background: #0c1723; border: 1px solid var(--line); border-radius: 5px; font-size: .77rem; }
.mission-goal strong { color: var(--accent); font: 700 .75rem var(--mono); }
.mission-goal progress { grid-column: 1 / -1; width: 100%; height: .45rem; accent-color: var(--accent); }
.relay-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .36rem; font-size: .86rem; }
.relay-heading .tag, .relay-roster-score { color: var(--relay); }
.relay-list { display: grid; gap: .3rem; }
.relay-list button { display: grid; justify-items: start; gap: .16rem; min-width: 0; min-height: 2.45rem; padding: .35rem .5rem; border-left: 3px solid var(--relay); background: #10241e; text-align: left; font-size: .76rem; }
.relay-list button small { color: #acc2b6; font-size: .68rem; }
.relay-list[data-relays="next"] button { border-left-color: var(--rift); background: #1a2134; }
.relay-list[data-relays="next"] button small { color: #bdc4d8; }
.cargo-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .36rem; font-size: .86rem; }
.cargo-heading .tag, .delivery-roster-score, .delivery-goal strong { color: var(--blackout); }
.delivery-goal progress { accent-color: var(--blackout); }
.cargo-list { display: grid; gap: .3rem; }
.cargo-list button { display: grid; justify-items: start; gap: .16rem; width: 100%; min-width: 0; min-height: 2.45rem; padding: .35rem .5rem; border-left: 3px solid var(--cargo); background: #14282d; text-align: left; font-size: .76rem; }
.cargo-list button small { color: #c2d8d6; font-size: .68rem; }
.courier-entry { display: grid; gap: .3rem; padding: .35rem; border: 1px solid #385b61; border-radius: 5px; background: #0e1e27; }
.courier-entry[data-stalled] { border-color: #816548; }
.courier-entry[data-stalled] button { border-left-color: var(--blackout); }
.courier-entry details { padding: .3rem .18rem; }
.courier-entry ol { display: grid; gap: .2rem; margin: .35rem 0 0; padding: 0 0 0 1.5rem; color: #d8e6ed; font-size: .75rem; }
.node-flags { display: flex; flex-wrap: wrap; gap: .27rem; }
.node-flags:empty { display: none; }
.node-flags .chip { border-color: var(--line); }
.node-flags [data-trap-clear] { border-color: #32635b; background: #132b2b; color: #9cebd8; }
.node-flags [data-trap-hardened] { border-color: #866c44; background: #2d261a; color: #ffe0a0; }
.node-flags [data-trap-reinforced] { border-color: #c17c51; background: #3b261d; color: #ffd4b0; }
.node-flags [data-trap-braces-locked] { border-color: #c291e5; background: #332341; color: #efd7ff; }
.node-flags :is([data-trap-braces-unlocked], [data-trap-braces-cut], [data-trap-stripped]) { border-color: #477583; background: #142b34; color: #bdeff9; }
.node-info [data-trap-strip-receipt] { color: #bdeff9; }
.node-flags :is([data-disarm-failed], [data-trap-strip-failed], [data-trap-braces-failed]) { border-color: #785152; background: #322123; color: #ffc1b9; }
.action-card .trap-order-risk, .node-info :is([data-disarm-receipt], [data-trap-strip-failure-receipt], [data-trap-braces-failure-receipt]) {
  padding: .36rem .46rem;
  border-left: 2px solid var(--heat);
  border-radius: 3px;
  background: #30231f;
  color: #ffd5bc;
}
.node-info :is([data-disarm-receipt], [data-trap-strip-failure-receipt], [data-trap-braces-failure-receipt]) { border-left-color: var(--danger); background: #322123; color: #ffd0c9; }
.action-card label { font-size: .75rem; }
.action-card .actions button { flex: 1 1 auto; font-size: .78rem; padding: .35rem .4rem; }
.action-card .actions [data-order-class="field"] { color: #c3e4ee; border-color: #36596c; background: #142638; }
.action-card .actions [aria-pressed="true"] { background: var(--accent-deep); border-color: var(--accent); }
.order-icon { width: .88rem; height: .88rem; margin-right: .27rem; vertical-align: -.13rem; color: #a5eee5; }
.action-card [data-value="overclock"] .order-icon { color: var(--heat); }
.action-card [data-value="dispatch"] .order-icon, .action-card [data-value="boost"] .order-icon { color: var(--cargo); }
.field-label { color: #a7dcfc; font: 700 .65rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.action-card p.jam-impact { padding: .38rem .47rem; border-left: 2px solid var(--warning); border-radius: 3px; background: #30271e; color: #ffe3b4; }
.action-card p.boost-impact { padding: .38rem .47rem; border-left: 2px solid var(--cargo); border-radius: 3px; background: #152d2b; color: #baffef; }
.action-card form { display: grid; gap: .5rem; }
.action-card select, .action-card input { min-height: 2.15rem; font-size: .8rem; }
.trap-method-options { display: grid; min-width: 0; gap: .3rem; margin: 0; padding: 0; border: 0; }
.trap-method-options legend { margin-bottom: .26rem; padding: 0; color: var(--muted); font-size: .75rem; font-weight: 650; }
.action-card .trap-method-option {
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  grid-template-areas: "choice title cost" "choice odds odds";
  align-items: center;
  gap: .12rem .45rem;
  padding: .37rem .45rem;
  border: 1px solid #385061;
  border-radius: 5px;
  background: #111d2a;
  cursor: pointer;
}
.action-card .trap-method-option:has(input:checked) { border-color: #5bbaae; background: #133031; }
.action-card .trap-method-option:has(input:disabled) { border-color: #39414d; background: #171d26; cursor: default; }
.action-card .trap-method-option input { grid-area: choice; width: 1rem; height: 1rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--accent); }
.trap-method-title { grid-area: title; color: var(--text); }
.trap-method-cost { grid-area: cost; color: var(--muted); font: .69rem var(--mono); }
.trap-method-odds { grid-area: odds; color: #b6d1d6; font: .71rem/1.4 var(--mono); }
.action-card .trap-method-note { color: #ffcda8; font-size: .72rem; }
.action-parameters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4.5rem, .38fr); gap: .45rem; }
.action-parameters:empty { display: none; }
.action-parameters > :only-child { grid-column: 1 / -1; }
.attack-forecast { display: grid; gap: .38rem; min-height: 2.15rem; padding: .5rem .55rem; border: 1px solid #32575c; border-radius: 5px; background: #10252e; }
.forecast-stats { display: flex; gap: .55rem; flex-wrap: wrap; font-size: .72rem; }
.forecast-stats strong { color: var(--accent); }
.attack-forecast .warning { color: var(--warning); }
.attack-forecast .forecast-heat, .node-info .forecast-heat { padding: .31rem .4rem; border-left: 2px solid var(--heat); border-radius: 3px; background: #34251d; color: #ffd5b9; }
.roster-list .item { flex-wrap: nowrap; }
.roster-list [data-active] { border-left: 3px solid var(--accent); }
.owner { display: inline-flex; align-items: center; gap: .4rem; }
.swatch { flex: 0 0 auto; width: .65rem; height: .65rem; border-radius: 50%; border: 1px solid #fff4; }
.events { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.events li { border-left: 2px solid #47647b; background: #0c141e; padding: .48rem .6rem; font-size: .8rem; }
.events [data-kind="capture"], .events [data-kind="result"], .events [data-kind="airlift"], .events [data-kind="unjam"] { border-left-color: var(--accent); }
.events [data-kind="raid"], .events [data-kind="trap"], .events [data-kind="jam"] { border-left-color: var(--warning); }
.events [data-kind="overclock"] { border-left-color: var(--heat); }
.events [data-kind="relay"] { border-left-color: var(--relay); }
.events [data-kind="dispatch"], .events [data-kind="courier_move"] { border-left-color: var(--cargo); }
.events [data-kind="courier_delivery"], .events [data-kind="courier_intercept"], .events [data-kind="courier_stall"] { border-left-color: var(--blackout); }
.events [data-new] { animation: tactical-confirm .65s ease-out; }
.events .tag { margin-right: .4rem; }
.event-node { min-height: 1.6rem; padding: .12rem .35rem; font-size: .71rem; vertical-align: middle; }
.event-tools { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .28rem; }
.event-replay { border-color: #45746f; color: #c5f7ec; }
.noscript { padding: 1rem; color: var(--warning); }

@media (max-width: 930px) {
  .masthead nav { order: 2; width: 100%; }
  .map-kicker { display: none; }
  .turn-state .turn-event { display: none; }
  .map-legend [data-legend="target"], .map-legend [data-legend="supply"] { display: none; }
}
@media (max-width: 760px) {
  .in-match .masthead { display: none; }
  .in-match main { padding: .33rem; }
  .battle-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: .25rem; }
  .battle[data-map-focus] .tactical-console { display: flex; }
  .tactical-console { grid-row: 2; border: 0; background: none; }
  .console-tabs { padding: .22rem; border: 1px solid var(--line); border-radius: 7px; }
  .console-tabs button { min-height: 2.6rem; font-size: .79rem; }
  .console-content { position: absolute; z-index: 2; left: 0; right: 0; bottom: 3.15rem; max-height: min(54dvh, calc(100% - 6rem)); overflow: hidden; border: 1px solid #39586e; border-radius: 9px; background: #101923; box-shadow: 0 -5px 22px #0009; animation: tray-enter .15s ease-out; }
  .console-panel { gap: .48rem; padding: .55rem; }
  .battle[data-console-closed] .console-content { display: none; }
  .mobile-order-footer { display: grid; flex: 0 0 auto; gap: .23rem; padding: .36rem .48rem; border-top: 1px solid var(--line); background: #14222e; }
  .mobile-heat-note { color: #ffd0ac; font: 700 .65rem var(--mono); }
  #panel-orders .action-card form > button { display: none; }
  .turn-banner { padding: .32rem .38rem; gap: .3rem; }
  .turn-state { flex: 1 1 auto; }
  .turn-state h2 { font-size: .8rem; overflow-wrap: anywhere; }
  .resource-row { flex: 0 0 auto; gap: .16rem; }
  .resource { flex-direction: column; gap: .12rem; min-width: 1.82rem; padding: .18rem .24rem; }
  .resource small { font-size: .52rem; }
  .resource .long-label { display: none; }
  .resource .short-label { display: inline; }
  .turn-banner > button { padding: .24rem .38rem; font-size: .69rem; }
  .map-buttons button { min-height: 2.45rem; }
  .combat-report { width: min(27rem, calc(100% - 1rem)); padding: .72rem .75rem; }
  .event-tools button { min-height: 2.15rem; }
  .map-legend { font-size: .62rem; }
  .map-legend span { gap: .2rem; }
  .map-summary { font-size: .63rem; }
  .match-mode { display: none; }
  .relay-rule-full { display: none; }
  .relay-rule-short { display: inline; }
}
@keyframes tray-enter { from { transform: translateY(.45rem); opacity: .7; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 690px) {
  .masthead { gap: .55rem; }
  .masthead nav { gap: .15rem; }
  .nav-tab { min-height: 2.2rem; padding: .35rem .48rem; font-size: .8rem; }
  .brand svg { width: 32px; }
  .brand span { font-size: .95rem; }
  .brand small { font-size: .48rem; }
  .account { gap: .4rem; }
  .account button { padding: .35rem .52rem; min-height: 2.15rem; }
  .hero::before { background: linear-gradient(90deg, #151321ef 4%, #181525ce 52%, #15132162 100%); }
  .hero[data-compact] .hero-art { left: 0; background-position: 75% 54%; }
  .entry-grid { grid-template-columns: minmax(0, 1fr); }
  .entry-grid .hero { min-height: 0; }
  .entry-grid .hero h1 { font-size: clamp(1.75rem, 7vw, 2.6rem); }
  .ruleset-features { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 370px) {
  .masthead { padding-inline: .65rem; }
  .masthead nav { flex-wrap: nowrap; justify-content: space-between; gap: 0; }
  .nav-tab { padding-inline: .13rem; font-size: .7rem; white-space: nowrap; }
}
@media (max-width: 430px) {
  .map-legend { display: none; }
  .map-kicker { display: none; }
  .map-buttons > button { min-width: 1.5rem; padding-inline: .4rem; }
  .map-buttons .map-focus-control { display: inline-grid; place-items: center; min-width: 2.1rem; padding-inline: .34rem; }
  .map-focus-control svg { display: block; }
  .map-focus-control [data-focus-label] { display: none; }
  .rift-features { gap: .42rem; }
  .rift-feature { display: grid; align-content: start; gap: .42rem; min-height: 0; padding: .63rem; }
  .rift-feature .eyebrow { line-height: 1.25; }
  .rift-feature h2 { font-size: 1.04rem; }
  .rift-feature p { font-size: .72rem; }
  .rift-feature button { justify-self: start; }
  .match-title { gap: .3rem; }
  .combat-report { width: calc(100% - .7rem); padding: .6rem .56rem; }
  .combat-heading { gap: .35rem; }
  .combat-heading .eyebrow { margin-bottom: .23rem; }
  .combat-dismiss { min-width: 2.18rem; min-height: 2.18rem; }
  .combat-vector { margin-top: .3rem; font-size: .74rem; }
  .combat-rolls { gap: .34rem; margin-top: .56rem; }
  .combat-side { padding: .38rem .38rem .48rem; }
  .combat-commander { font-size: .72rem; }
  .combat-numbers { gap: .43rem; min-height: 4.55rem; margin-top: .35rem; }
  .combat-die { --combat-die-size: 3.12rem; }
  .combat-die-face { padding: .33rem; border-radius: .57rem; }
  .combat-die [data-pip] { width: .42rem; height: .42rem; }
  .combat-equation { font-size: .66rem; }
  .combat-total { font-size: 1.25rem; }
  .combat-outcome, .combat-pending { min-height: 4.25rem; margin-top: .55rem; padding: .45rem .5rem; }
  .combat-outcome-title { font-size: 1.08rem; }
  .combat-casualties { gap: .2rem .55rem; }
}
@media (max-width: 350px) {
  .match-ruleset[data-ruleset="extraction"] { display: none; }
  .board-toolbar { padding-inline: .4rem; }
  .map-buttons { gap: .2rem; }
  .map-buttons > button { padding-inline: .34rem; }
  .map-buttons > .motion-control { padding-inline: .27rem; font-size: .7rem; }
  .map-summary .map-help { display: none; }
}
@media (max-height: 540px) {
  .combat-report { padding: .55rem .62rem; pointer-events: auto; }
  .combat-rolls { margin-top: .46rem; }
  .combat-outcome, .combat-pending { min-height: 3.7rem; margin-top: .45rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  button { transition: none; }
}
:root[data-motion="off"] :is(.console-content, .turn-banner[data-cue], .events [data-new]) { animation: none; }
:root[data-motion="off"] .cargo-scanner { display: none; }
:root[data-motion="off"] .combat-shade { transition: none; }
:root[data-motion="off"] :is(.combat-report, .combat-outcome, .combat-die-face, .combat-side),
:root[data-motion="off"] :is(.combat-trap-sequence, .combat-trap-unit, .combat-trap-count, .combat-bypass-unit),
:root[data-motion="off"] .combat-trap-emblem,
:root[data-motion="off"] .combat-trap-emblem::before,
:root[data-motion="off"] .combat-trap-unit::after,
:root[data-motion="off"] .combat-casualty :is(.combat-loss-count, .combat-remaining-count),
:root[data-motion="off"] .combat-occupation[data-state="travel"] .combat-occupation-marker,
:root[data-motion="off"] .combat-occupation[data-direction="retreat"][data-state="arrived"] [data-role="target"] .combat-occupation-hex,
:root[data-motion="off"] :is(.combat-pending, .combat-outcome)::after,
:root[data-motion="off"] .combat-die::before { animation: none; }