/* Red / black art direction. Motion transforms and timelines live in motion.css/js. */
:root {
  --bg: #000000;
  --panel: #000000;
  --accent: #ff0000;
  --accent-bright: #ff0000;
  --gold: var(--accent-bright);
  --gold-light: #ffffff;
  --text: #ffffff;
  --muted: #9b9b9b;
  --line: #ffffff18;
  --teal: #c7c7c7;
  --sans: 'Microsoft YaHei', 'PingFang SC', 'Segoe UI', sans-serif;
  --serif: var(--sans);
  --mono: 'Cascadia Code', Consolas, monospace;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
}
body { background: var(--bg); }
body:after { display: none; }
#atmosphere { display: none; }
button:hover { color: #fff; }
button:focus-visible, input:focus-visible, select:focus-visible, [role=button]:focus-visible { outline-color: var(--accent-bright); }
::selection { background: #ff0000; color: white; }
::-webkit-scrollbar-thumb { background: #000000; border-radius: 0; }
.topbar { height: 76px; padding: 0 4.5%; background: #000000; gap: 22px; }
.brand { gap: 11px; }
.brand img { width: 34px; height: 34px; }
.brand>span { font: 600 19px var(--sans); letter-spacing: 2px; color: var(--text); }
.brand small { font: 8px var(--mono); letter-spacing: 2.1px; color: #939393; }
.topbar nav { gap: clamp(12px, 2vw, 28px); }
.topbar nav button { font-size: 12px; letter-spacing: .5px; color: #999999; }
.topbar nav button.active { color: #ffffff; }
.topbar nav button.active:after { left: 0; right: 0; background: var(--accent); box-shadow: none; height: 3px; }
.account { gap: 16px; }
.edition { color: #ababab; font: 10px var(--mono); }
.edition i { color: #737373; font-size: 9px; }
.icon-button { color: #a9a9a9; font-size: 18px; }
.avatar { border: 1px solid #000000; background: #000000; border-radius: 2px; color: #acacac; font-size: 12px; width: 28px; height: 28px; }
.eyebrow { color: var(--accent-bright); font: 10px var(--mono); letter-spacing: 2px; }
.primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); box-shadow: none; font-weight: 600; letter-spacing: 1px; }
.primary:hover { background: #ff0000; border-color: #ff0000; color: #fff; box-shadow: none; }
.primary.large { min-width: 190px; padding: 16px 24px; }
.secondary { background: #ffffff03; border-color: #ffffff27; color: #d5d5d5; }
.secondary:hover { background: #ffffff08; border-color: #ffffff60; }
.secondary.large { padding: 16px 24px; }
.text-button { color: #a7a7a7; }
.text-button:hover { color: #fff; }
.danger { color: #ff0000; border-color: #ff000060; }
.live-dot { background: var(--accent); box-shadow: none; border-radius: 0; width: 4px; height: 4px; }
.home-screen { padding: 0 5.3%; min-height: calc(100vh - 76px); }
.home-backdrop { display: none; }
.home-topline { height: 52px; font: 10px var(--mono); color: #9c9c9c; letter-spacing: .7px; border-bottom-color: var(--line); }
.home-topline .line { width: 22px; }
.coordinate { color: #727272; font: 9px var(--mono); letter-spacing: 1px; }
.hero-section { min-height: 490px; grid-template-columns: .95fr 1.05fr; gap: 24px; padding: 36px 0; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy>.eyebrow { font: 10px var(--mono); color: #aaaaaa; letter-spacing: 1.7px; display: flex; align-items: center; gap: 12px; }
.hero-copy>.eyebrow:before { content: ''; width: 20px; height: 2px; background: var(--accent); }
.hero-copy>.eyebrow span { margin-left: 0; color: #747474; }
.hero-copy h1 { font: 700 clamp(48px, 5.7vw, 82px)/1.15 var(--sans); letter-spacing: 2px; margin: 24px 0; color: #ffffff; text-shadow: none; }
.hero-copy h1 span { color: var(--accent); }
.hero-subtitle { font: 500 17px/1.8 var(--sans); letter-spacing: 1.5px; color: #c9c9c9; margin-bottom: 15px; }
.hero-copy>p { color: #969696; font-size: 12px; line-height: 2; letter-spacing: .3px; }
.hero-buttons { gap: 12px; margin-top: 27px; }
.hero-buttons .text-button { font-size: 11px; }
.hero-meta { margin-top: 31px; gap: 24px; }
.hero-meta>span { color: #ffffff; font: 16px var(--mono); border-color: #ffffff18; padding-right: 24px; }
.hero-meta i { color: #7b7b7b; font-size: 10px; margin-left: 8px; letter-spacing: 0; }
.showcase { height: 414px; overflow: visible; }
.showcase:before { content: ''; position: absolute; inset: -10px -20px 0; background: linear-gradient(0deg,#000000 0%,#00000030 48%,#00000038 100%),linear-gradient(90deg,#000000,transparent 26%,transparent 85%,#000000),url('/public/assets/geometric/sector.png') 65% 44%/cover; opacity: .63; pointer-events: none; }
.showcase:after { content: 'ARCHIVE / 217'; position: absolute; top: 7px; right: 2px; color: #b5b5b580; font: 9px var(--mono); letter-spacing: 2px; }
.orbit, .showcase-sigil { display: none; }
.showcase-card { top: 87px; }
.show-card { width: 185px; height: 279px; box-shadow: 0 16px 32px #0008; }
.show-card .card-body { left: 12px; right: 12px; bottom: 12px; }
.show-card .card-body h3 { font-size: 14px; line-height: 1.45; }
.show-card .card-text { font-size: 8px; line-height: 1.8; min-height: 42px; }
.show-card .card-type { font-size: 7px; }
.show-card .card-stats { padding-top: 7px; }
.show-card .card-stats b { font: 19px var(--mono); }
.show-card .card-cost { min-width: 30px; }
.show-card .card-cost b { font-size: 24px; line-height: 30px; }
.show-0 { transform: translate(-112px,25px) rotate(-10deg); }
.show-2 { transform: translate(114px,25px) rotate(10deg); }
.show-0:hover { transform: translate(-124px,12px) rotate(-6deg); }
.show-2:hover { transform: translate(126px,12px) rotate(6deg); }
.show-1 .game-card { border-color: #a8a8a8; box-shadow: 0 18px 40px #000a; }
.showcase-caption { bottom: 0; font: 9px var(--mono); color: #878787; letter-spacing: 1px; }
.showcase-caption span { color: var(--accent-bright); margin: 0 12px; }
.mode-grid { gap: 0; padding: 0; border-top: 1px solid #ffffff21; border-bottom: 1px solid #ffffff18; }
.mode-tile { border: 0; border-right: 1px solid #ffffff15; padding: 24px 26px 0; min-height: 169px; background: transparent; }
.mode-tile:first-child { padding-left: 0; }
.mode-tile:last-child { border-right: 0; padding-right: 0; }
.mode-tile:before { background: none; }
.mode-tile:hover { background: #ffffff03; transform: none; border-color: #ffffff15; }
.mode-index { color: #878787; font: 9px var(--mono); letter-spacing: 1px; }
.mode-index b { color: var(--accent-bright); font-weight: 500; padding-right: 10px; }
.mode-symbol { display: none; }
.mode-tile h2 { font: 600 20px var(--sans); letter-spacing: 1px; margin: 15px 0 9px; }
.mode-tile h2 span { color: #a3a3a3; font-size: 18px; }
.mode-tile:hover h2 span { color: var(--accent-bright); }
.mode-tile p { font-size: 11px; color: #9b9b9b; letter-spacing: 0; }
.mode-tile footer { border: 0; margin-top: 13px; padding: 10px 0 18px; font: 9px var(--mono); color: #7a7a7a; letter-spacing: 0; }
.mode-tile footer i { color: #7a7a7a; }
.home-footer { padding: 18px 0; font-size: 9px; letter-spacing: .3px; color: #818181; }
.home-footer>span:nth-child(2) { font: 9px var(--mono); color: #636363; letter-spacing: 1px; }

/* Matte frames, readable names and a restrained silver reflection. */
.game-card { border-color: #595959; border-radius: 3px; background: #000000; color: #ffffff; box-shadow: 0 6px 18px #0006; }
.card-rim { border-color: #ffffff10; border-radius: 1px; inset: 4px; }
.card-rim:before, .card-rim:after { content: none; }
.game-card:before { box-shadow: inset 0 1px 0 #ffffff20, inset 0 -2px 0 #0008; }
.game-card .card-art { filter: saturate(.45) contrast(1.04) brightness(.94); }
.game-card:hover .card-art, .hand-card.resting:not(.selected) .card-art { filter: saturate(.6) contrast(1.04); }
.game-card.exhausted .card-art { filter: grayscale(.8) brightness(.55); }
.card-shade { background: linear-gradient(0deg,#000000 3%,#000000f7 27%,#00000088 46%,transparent 76%); }
.card-cost { border-radius: 2px; border-color: #ffffff35; background: #000000f5; box-shadow: none; }
.card-cost b { color: #ffffff; font-family: var(--mono); }
.card-cost small { color: #bababa; }
.card-rarity { color: #cbcbcb; text-shadow: none; letter-spacing: 2px; }
.card-type { color: #a5a5a5; letter-spacing: 1px; }
.card-body h3, .rarity-3 .card-body h3 { color: #ffffff; font-family: var(--sans); font-weight: 600; }
.card-text { color: #b3b3b3; }
.card-stats, .card-seal { border-color: #ffffff20; }
.card-stats b { color: #ffffff; font-family: var(--mono); }
.card-stats .atk, .card-stats .arm { color: #acacac; }
.card-stats .hp { color: #ff0000; }
.card-stats .wounded b { color: #ff0000; }
.card-seal { color: #a7a7a7; }
.rarity-3 { border-color: #858585; box-shadow: 0 6px 18px #0008; }
.rarity-3 .card-rim { border-color: #ffffff20; }
.rarity-2 { border-color: #656565; }
.game-card:hover { border-color: #a4a4a4; box-shadow: 0 18px 35px #000b,0 0 0 1px #ffffff15; }
.game-card.selected { border-color: var(--accent-bright); box-shadow: 0 18px 40px #000b,0 0 0 1px var(--accent); outline: none; }
.game-card.playable { border-color: #999999; }
.card-shine, .rarity-3 .card-shine { background-image: radial-gradient(ellipse at var(--mx) var(--my),#ffffff22 0%,transparent 66%),linear-gradient(115deg,transparent 25%,#ffffff08 42%,#ffffff25 47%,#ffffff10 51%,transparent 63%); }
.status-tags span { background: #000000eb; color: #d2d2d2; border-color: #757575; }
.equipped { background: #000000eb; color: #d2d2d2; border-color: #757575; }
.hand-card:hover .card-text, .hand-card.selected .card-text { color: #d6d6d6; }
.hand-card.resting:not(.selected), .hand-card.resting:not(.selected):hover, .hand-card.resting:not(.selected):focus-visible { box-shadow: 0 6px 22px #0008; }

/* Clear tactical layers; the battlefield does not compete with its cards. */
.battle-screen { background: #000000; min-height: calc(100vh - 76px); padding: 0 3% 12px; }
.battle-topline { color: #b9b9b9; height: 48px; }
.battle-topline i { color: #818181; }
.battle-topline b { color: #ffffff; font-family: var(--mono); }
.battle-layout { grid-template-columns: 180px minmax(440px,1fr) 195px; gap: 20px; }
.panel-title { font-size: 11px; color: #bfbfbf; }
.panel-title>span { color: #787878; font-family: var(--mono); }
.phase-pill { color: #ff0000; border-color: #ff000055; background: #ff00000a; }
.environment-art { background: linear-gradient(#00000075,#000000dd),url('/public/assets/geometric/sector.png') 65% 35%/cover; border-color: #ffffff20; }
.environment-art>span { color: #ababab; }
.environment-art h3 { color: #ffffff; font-weight: 500; font-size: 18px; }
.env-ring { color: #c9c9c9; text-shadow: none; font-size: 32px; }
.env-counter .lit { background: var(--accent-bright); box-shadow: none; }
.env-counter b { color: #dadada; }
.env-description { color: #a6a6a6; font-size: 11px; max-height: 115px; }
.forecast { background: #ffffff02; border-color: #ffffff20; }
.forecast>span, .forecast small { color: #979797; }
.forecast>strong { color: #d7d7d7; }
.log-entry { color: #929292; font-size: 10px; }
.log-entry>span { color: #747474; font-family: var(--mono); }
.log-entry.damage p { color: #ff0000; }
.log-entry.turn p { color: #c9c9c9; }
.log-entry.environment p { color: #a9a9a9; }
.battlefield:before { background: #ffffff01; border-color: #ffffff08; }
.hq { border-color: #ffffff20; background: #000000; }
.hq.enemy { background: #ff0000; border-color: #ff000030; }
.hq-portrait { clip-path: none; border-color: #ffffff20; border-radius: 2px; filter: saturate(.4); }
.hq-info>span, .hq.enemy .hq-info>span { color: #a6a6a6; }
.hq-info>strong { color: #ffffff; font: 500 13px var(--sans); }
.hq-info strong small, .hq-info>span i { color: #8e8e8e; }
.hp-track { background: #ffffff0e; }
.hp-track>i { background: #b9b9b9; }
.enemy .hp-track>i { background: #ff0000; }
.hq-hp { color: #ffffff; }
.hq-hp>b, .hq-resources b { font-family: var(--mono); }
.hq-hp>small, .hq-resources small, .hq-deck>small { color: #939393; }
.hq-resources, .hq-resources>span:nth-child(2), .shield-label { color: #c7c7c7; }
.card-backs>i { border-color: #696969; background: #000000; color: #a9a9a9; border-radius: 1px; }
.row-label { color: #a5a5a5; }
.slot, .front .slot, .enemy .slot { background: #00000070; border-color: #ffffff20; }
.slot:before, .slot:after { border-color: #ffffff30; }
.slot-cross { color: #ffffff20; }
.slot-number { color: #7a7a7a; font: 8px var(--mono); }
.slot.legal { background: #ffffff06; border: 1px dashed #c7c7c7; box-shadow: none; }
.slot.legal .slot-cross { color: #d5d5d5; }
.targetable { border-color: #ff0000!important; box-shadow: inset 0 0 0 1px #ff000060!important; }
.slot.drag-over { background: #ff000018; outline-color: var(--accent-bright); }
.field-card { border-color: #6a6a6a; border-radius: 2px; }
.field-card .card-shade { background: linear-gradient(0deg,#000000 4%,#000000d9 37%,#00000010 80%); }
.field-card .card-rim { border-color: #ffffff13; }
.field-card .card-cost { border-color: #ffffff40; }
.field-card .card-body h3 { font: 500 11px/1.4 var(--sans); }
.field-card .card-stats { border-color: #ffffff18; }
.field-card.playable { border-color: #bdbdbd; box-shadow: 0 2px 10px #0007,inset 0 0 0 1px #ffffff18; }
.field-card.playable:after { color: #ffffff; text-shadow: none; content: '•'; }
.rift-line>i { background: #ffffff14; }
.column-marker { color: #7d7d7d; }
.rift-vortex { color: #ff0000; text-shadow: none; font-size: 29px; }
.rift-vortex:before { border-color: #ff000055; }
.rift>span:last-child b { color: #d7d7d7; letter-spacing: 1px; }
.rift small { color: #898989; }
.rift-unit { border-color: #ffffff25; background: #000000; color: #bcbcbc; }
.rift-unit b { color: #d9d9d9; }
.facility-strip, .facility-empty { color: #969696; }
.facility-strip button, .enemy-facilities button { border-color: #ffffff25; background: #ffffff03; color: #c7c7c7; }
.facility-strip b { color: #bcbcbc; }
.facility-empty { border-color: #ffffff20; }
.turn-status .eyebrow { color: var(--accent-bright); }
.turn-status h2 { font: 600 24px var(--sans); letter-spacing: 0; }
.turn-status p { color: #a6a6a6; font-size: 10px; }
.phase-track { color: #868686; font-size: 9px; }
.phase-track .active { color: #ff0000; }
.selection-panel h3 { color: #ffffff; font-size: 16px; font-weight: 500; }
.selection-panel>p { color: #aaaaaa; font-size: 11px; }
.selection-symbol { color: #747474; }
.hero-skill>span, .hero-skill>p { color: #9a9a9a; font-size: 10px; }
.skill-button { background: #ffffff03; border-color: #ffffff28; color: #ffffff; font-size: 12px; }
.skill-button small { color: #b7b7b7; }
.hand-label strong { color: #d9d9d9; font: 500 13px var(--sans); letter-spacing: .5px; }
.hand-label>span, .hand-hint { color: #989898; }
.hand-hint small { color: #787878; }

/* Archives, setup, campaign and regional command use the same material system. */
.collection-page, .campaign-page, .conquest-page { background: #000000; min-height: calc(100vh - 76px); }
.page-heading h1 { font: 600 32px var(--sans); color: #ffffff; letter-spacing: 1px; }
.page-heading h1>span { color: #878787; font-family: var(--mono); }
.page-heading p { color: #a7a7a7; font-size: 12px; }
.archive-total>b { color: #d8d8d8; font: 40px var(--mono); }
.archive-total>span { color: #999999; }
.collection-filters h4 { color: #bababa; }
.collection-filters>button { font-size: 11px; color: #a5a5a5; border-color: #ffffff08; }
.collection-filters>button small { color: #8d8d8d; font-family: var(--mono); }
.collection-filters>button.active { background: #ff000012; border-left-color: var(--accent); color: #ffffff; }
.collection-filters>button span { filter: saturate(.4); }
.filter-foot span, .filter-foot p { color: #898989; }
.type-tabs button { font-size: 11px; color: #a0a0a0; }
.type-tabs button.active { background: #ffffff07; border-color: #ffffff28; color: #ffffff; }
.search-box { border-color: #ffffff30; color: #9a9a9a; }
.search-box input { color: #dbdbdb; font-size: 11px; }
.search-box input::placeholder { color: #8d8d8d; }
.deck-count { color: #a5a5a5; }
.card-grid { grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); }
.collection-page:has(.deck-list) .card-grid { grid-template-columns: repeat(auto-fill,minmax(155px,1fr)); }
.collection-card .card-text { font-size: 9px; line-height: 1.6; min-height: 43px; }
.collection-card .card-type { font-size: 8px; }
.detail-card .card-text { font-size: 10px; }
.hand-card .card-text { font-size: 7px; line-height: 1.5; min-height: 31px; }
.deck-list .panel-title b { color: #d9d9d9; font-family: var(--mono); }
.curve i { background: #a8a8a8; border-color: #d5d5d5; }
.curve span { color: #979797; }
.deck-entries button>span { color: #ff0000; font-family: var(--mono); }
.deck-entries button>b { color: #c4c4c4; }
.deck-entries button>small { color: #9a9a9a; }
.deck-validation { color: #ff0000; }
.deck-validation .valid { color: #c7c7c7; }
.empty-screen { background: #000000; min-height: calc(100vh - 76px); }
.empty-sigil { color: var(--accent); text-shadow: none; font-size: 64px; }
.empty-screen h1 { font: 600 34px var(--sans); letter-spacing: 1px; }
.empty-screen p { color: #a7a7a7; }
.modal-backdrop { background: #000000cc; backdrop-filter: blur(5px); }
.modal, .motion-modal { background: #000000; border: 1px solid #ffffff27; border-top: 2px solid var(--accent); box-shadow: 0 24px 80px #0009; }
.modal-title h2 { font: 600 25px var(--sans); color: #ffffff; letter-spacing: 1px; }
.modal p { color: #b4b4b4; }
.modal .game-card .card-text { font-size: 9px; line-height: 1.65; }
.modal .detail-card .card-text { font-size: 10px; }
.close { color: #acacac; }
.faction-option { background: #000000; border-color: #ffffff20; }
.faction-option>.portrait { filter: saturate(.35); }
.faction-option>span { color: #dbdbdb; font: 500 13px var(--sans); }
.faction-option small { color: #a5a5a5; font-size: 8px; }
.faction-option.selected { border-color: var(--accent-bright); box-shadow: none; background: #ff000010; }
.faction-option.selected .portrait { filter: saturate(.6); }
.faction-lore>.eyebrow { color: var(--accent-bright); }
.faction-lore>h2 { color: #ffffff; font: 600 25px var(--sans); }
.faction-lore>p { color: #a9a9a9; }
.hero-options button { background: #ffffff02; border-color: #ffffff22; }
.hero-options b { color: #d4d4d4; }
.hero-options small { color: #a5a5a5; }
.hero-options .selected { background: #ff00000c; border-color: var(--accent); }
.hero-description { background: #00000060; border-color: #ffffff15; }
.hero-description strong { color: #ffffff; font-size: 15px; }
.hero-description>div span, .hero-description>small { color: #b9b9b9; }
.setup-controls label, .collection-filters label { color: #b8b8b8; font-size: 11px; }
select, select option { background: #000000; color: #d8d8d8; border-color: #ffffff28; }
.checkbox { color: #acacac!important; }
.setup-note { color: #a6a6a6; font-size: 10px; }
.inspect-copy h2 { color: #ffffff; font-weight: 600; }
.inspect-meta { color: #bfbfbf; }
.inspect-meta span { border-color: #ffffff25; }
.inspect-copy .ability-text { color: #cccccc; }
.inspect-copy blockquote { color: #aaaaaa; border-color: var(--accent); }
.inspect-copy>small { color: #969696; }
.rules-intro { background: #ffffff02; border-color: #ffffff22; }
.rules-intro strong, .rules-grid h3, .keywords-title { color: #dadada; }
.rules-grid article>span { color: var(--accent-bright); font-family: var(--mono); }
.rules-grid p { color: #b7b7b7; }
.keyword-list strong { color: #ff0000; }
.choice-modal h2, .environment-modal h2, .confirm-modal h2 { color: #ffffff; }
.choice-button { background: #ffffff03; border-color: #ffffff28; }
.environment-modal small { color: #afafaf; }
.victory-sigil { color: var(--accent); text-shadow: none; }
.result-stats b { color: #ffffff; font-family: var(--mono); }
.result-stats span { color: #a6a6a6; }
.setting-row { color: #d5d5d5; }
.setting-row small { color: #aaaaaa; }
.setting-row input { accent-color: var(--accent); }
.campaign-resources { color: #a9a9a9; }
.campaign-resources b { color: #ffffff; font-family: var(--mono); }
.map-lines line { stroke: #7b7b7b55; }
.map-lines .visited { stroke: #ff0000; }
.map-node>div { background: #000000; border-color: #6c6c6c; color: #bebebe; border-radius: 2px; box-shadow: none; }
.map-node.boss>div { background: #ff0000; border-color: #ff0000; color: #ff0000; }
.map-node>span { color: #b9b9b9; font-size: 12px; }
.map-node small { color: #959595; }
.map-node.available>div { border-color: #ff0000; background: #ff0000; box-shadow: 0 0 0 4px #ff00000c; color: #ff0000; }
.map-node.available small { color: #ff0000; }
.map-node.visited>div { border-color: #c5c5c5; color: #d5d5d5; }
.map-node.fogged>div { border-color: #ffffff10; background: #000000; color: #6b6b6b; }
.map-node.fogged>span { color: #747474; }
.campaign-bottom>p { color: #c2c2c2; }
.campaign-bottom small, .campaign-ending p { color: #a5a5a5; }
.supply-options b { color: #d9d9d9; }
.supply-options span { color: #afafaf; }
.conquest-map { background: none; }
.region { background: #000000; }
.region.hostile { background: #ff0000; }
.region.neutral { background: #000000; }
.region.selected { background: #ff0000; }
.region.reachable { filter: drop-shadow(0 0 2px #bbb); }
.region>span, .region h3 { color: #ffffff; }
.region b { color: #cfcfcf; }
.region small { color: #b2b2b2; }
.region-battle { background: #000000; }
.region-title>span { color: var(--accent-bright); }
.region-slot { background: #000000; border-color: #ffffff20; color: #959595; }
.region-slot:hover { background: #000000; border-color: #bbb; }
.region-divider { color: #bfbfbf; }
.conquest-seatbar .active { border-color: var(--accent); color: #ffffff; }
.conquest-seatbar .targetable { box-shadow: none; }
.conquest-command .objective { color: #ff0000; }
.conquest-controls p { color: #afafaf; }
.compact-environment { border-color: #ffffff25; background: #000000; color: #d7d7d7; }
.compact-environment span { color: #a7a7a7; }
.mission-emblem { color: var(--accent-bright); text-shadow: none; }
.mission-details { background: #ffffff02; border-color: #ffffff20; }
.mission-details span, .mission-footer small { color: #afafaf; }
.mission-details b { color: #ffffff; }
#toast { background: #000000; border-color: #ff0000; color: #ffffff; }

/* Only the color of feedback changes; timing, particles and trajectories are retained. */
.motion-trail { background: linear-gradient(90deg,transparent,#ff0000,#ffffff); box-shadow: 0 0 10px #ff000066; }
.motion-trail.mental { background: linear-gradient(90deg,transparent,#b0b0b0,#ffffff); box-shadow: 0 0 16px #c0c0c066; }
.motion-impact { background: radial-gradient(ellipse,#ffffffa0,transparent 68%); }
.motion-number { color: #ffffff; text-shadow: 0 2px 0 #ff0000,0 4px 14px #000; font-family: var(--mono); }
.motion-number.heal { color: #d1d1d1; text-shadow: 0 2px 0 #000000,0 4px 14px #000; }
.motion-environment { background: radial-gradient(ellipse at center,transparent 12%,#b5b5b520 50%,#94949430); box-shadow: inset 0 0 160px #ababab30; }
.motion-turn { background: linear-gradient(90deg,transparent,#000000f2 20%,#000000f2 80%,transparent); border-color: #ff000070; }
.motion-turn small { color: #979797; font-family: var(--mono); }
.motion-turn strong { color: #ffffff; font-weight: 600; letter-spacing: 4px; }
.motion-modal>p { color: #b5b5b5; }
.motion-arena { background: #00000055; }
.motion-arena>span, .motion-modal footer { color: #a0a0a0; }

@media (min-width: 1600px) {
  .home-screen { max-width: 1640px; margin: auto; }
  .hero-section { min-height: 560px; }
  .showcase { height: 470px; }
  .showcase-card { top: 110px; }
}
@media (max-width: 1150px) and (min-width: 860px) {
  .edition, .avatar { display: none; }
  .topbar { padding-inline: 3%; gap: 15px; }
  .topbar nav { gap: 14px; }
  .showcase { transform: scale(.86); transform-origin: center; margin-inline: -30px; }
  .battle-layout { grid-template-columns: 155px minmax(400px,1fr) 170px; gap: 12px; }
  .hq-info { min-width: 100px; }
  .hq-info strong small { display: none; }
}
@media (max-width: 980px) {
  .battle-layout { grid-template-columns: minmax(0,1fr) 175px; }
  .battle-sidebar { display: none; }
}
@media (max-width: 859px) {
  .topbar { height: auto; padding: 16px 5% 0; min-height: 96px; gap: 14px; }
  .brand>span { font-size: 18px; }
  .brand img { width: 31px; height: 31px; }
  .topbar nav { height: 40px; gap: 6px; }
  .topbar nav button { font-size: 10px; padding: 0 2px; }
  .edition, .avatar { display: none; }
  .account { gap: 12px; }
  .home-screen { padding: 0 6%; }
  .home-topline { height: 44px; font-size: 9px; }
  .coordinate { display: none; }
  .hero-section { display: grid; grid-template-columns: 1fr; padding: 35px 0 24px; min-height: 0; gap: 12px; }
  .hero-copy h1 { font-size: clamp(48px,9vw,68px); margin: 20px 0; }
  .hero-subtitle { font-size: 15px; margin-bottom: 12px; }
  .hero-copy>p { font-size: 11px; }
  .hero-meta { gap: 21px; margin-top: 23px; }
  .hero-meta>span { font-size: 14px; padding-right: 21px; }
  .hero-meta i { font-size: 9px; }
  .hero-buttons .primary { min-width: 174px; padding: 15px 20px; font-size: 12px; }
  .hero-buttons .secondary, .hero-buttons .text-button { font-size: 11px; padding: 15px; }
  .showcase { height: 355px; margin: 0; transform: none; right: auto; }
  .showcase:before { inset: 0 -10px; }
  .showcase-card { top: 53px; }
  .showcase .game-card { width: 170px; height: 254px; }
  .showcase-caption { bottom: 2px; }
  .mode-grid { grid-template-columns: 1fr; gap: 0; }
  .mode-tile, .mode-tile:first-child, .mode-tile:last-child { border-right: 0; border-bottom: 1px solid #ffffff15; padding: 21px 0 0; min-height: 149px; }
  .mode-tile:last-child { border-bottom: 0; }
  .mode-tile h2 { font-size: 19px; }
  .mode-tile p { font-size: 11px; }
  .mode-tile footer { font-size: 9px; }
  .home-footer { font-size: 8px; gap: 12px; }
  .home-footer>span:nth-child(2) { display: none; }
  .battle-screen { padding-inline: 12px; }
  .battle-layout { display: flex; }
  .hq-info>strong { font-size: 11px; }
  .field-card .card-body h3 { font-size: 8px; }
  .page-heading h1 { font-size: 27px; }
  .page-heading p { font-size: 11px; }
  .archive-total>b { font-size: 32px; }
  .card-grid, .collection-page:has(.deck-list) .card-grid { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }
  .collection-card .card-text { font-size: 8px; min-height: 38px; }
  .collection-card .card-type { font-size: 6px; }
  .hand-card .card-text { font-size: 6px; min-height: 28px; }
  .modal { padding: 23px; }
  .modal .game-card .card-text { font-size: 8px; }
  .faction-option>span { font-size: 12px; }
  .faction-option small { font-size: 7px; }
  .faction-lore>h2 { font-size: 23px; }
  .empty-screen { padding: 60px 22px; }
  .empty-screen h1 { font-size: 27px; }
}
@media (max-width: 430px) {
  .hero-copy h1 { font-size: 48px; }
  .hero-copy>.eyebrow { font-size: 9px; letter-spacing: 1px; }
  .hero-copy>.eyebrow span { margin-left: 0; }
  .hero-meta { gap: 12px; }
  .hero-meta>span { font-size: 13px; padding-right: 12px; }
  .hero-meta i { font-size: 8px; margin-left: 6px; }
  .showcase { height: 317px; margin: 0 -10px; }
  .showcase .game-card { width: 145px; height: 226px; }
  .show-0 { transform: translate(-83px,15px) rotate(-9deg); }
  .show-2 { transform: translate(83px,15px) rotate(9deg); }
  .show-0:hover { transform: translate(-88px,5px) rotate(-6deg); }
  .show-2:hover { transform: translate(88px,5px) rotate(6deg); }
  .show-card .card-body h3 { font-size: 12px; }
  .show-card .card-text { font-size: 7px; min-height: 36px; }
  .show-card .card-type { font-size: 6px; }
  .showcase-caption { font-size: 8px; }
  .motion-arena .game-card .card-text { font-size: 7px; }
  .hero-buttons { gap: 8px; }
  .hero-buttons .primary { min-width: 164px; }
  .hero-buttons .secondary, .hero-buttons .text-button { padding-inline: 10px; font-size: 10px; }
  .collection-card .card-body h3 { font-size: 11px; }
}