/* Kit (Gage 10-20): hand-inked, animated, organised. Loaded after field-ui.css. Home = a Campaign | Battle switch,
   then one screen: commander strip, illustrated mode cards, event cards, PLAY and a row of tiles. Press particles,
   drifting embers and live timers come from js/kit.js. Every animation stops under reduced motion. */

/* ---------- the switch ---------- */
.home-switch { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 2px; padding: 4px;
  background: linear-gradient(180deg, #1d1a16, #121110); border: 1px solid #8a72545e; box-shadow: 0 3px 0 #070807, inset 0 1px #f2d9a91c; }
.home-switch button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px;
  font: 400 21px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #a49a8e; transition: color .2s; }
.home-switch button[aria-selected="true"] { color: #fff; text-shadow: 1px 2px #5d1417; }
.home-switch .wi { width: 22px; height: 22px; }
.hs-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); transition: transform .32s cubic-bezier(.3,1.4,.5,1);
  background: linear-gradient(100deg, #b5232a, #e23a36 55%, #b31f27); border: 1px solid #ffb294; box-shadow: 0 3px #5e171b, inset 0 1px #ffd9b65c; }
.home-switch[data-side="battle"] .hs-thumb { transform: translateX(100%); }
.hs-thumb::after { content: ''; position: absolute; inset: 3px; border: 1px dashed #ffe0c040; }

/* ---------- two sides that slide ---------- */
.home-sides { position: relative; display: grid; grid-template-columns: 100% 100%; overflow: hidden; touch-action: pan-y; }
.home-side { grid-row: 1; display: flex; flex-direction: column; gap: 10px; transition: transform .4s cubic-bezier(.25,1,.35,1), opacity .3s; min-width: 0; }
.side-campaign { grid-column: 1; }
.side-battle { grid-column: 2; }
.home-sides[data-side="battle"] .home-side { transform: translateX(-100%); }
.home-sides[data-side="battle"] .side-campaign, .home-sides[data-side="campaign"] .side-battle { opacity: 0; pointer-events: none; }

/* ---------- commander strip ---------- */
.hb-strip { display: grid; grid-template-columns: 46px 1fr auto auto; align-items: center; gap: 10px; padding: 6px 8px 6px 10px;
  background: url('../assets/ui/command-etch.svg') right 40% / 380px auto, linear-gradient(115deg, #33291f, #1b1a18 65%);
  border: 1px solid #b49b7238; border-left: 3px solid #c8483f; box-shadow: 0 3px 0 #080908; }
.hb-strip .avatar { width: 46px; height: 46px; background: #0b0e0c; outline: 1px solid #b6a18067; outline-offset: 2px; }
.hb-who { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hb-name { text-align: left; font: 400 22px var(--display); letter-spacing: .03em; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 2px #070907; }
.hb-who .lvl { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; font: 400 14px var(--display); color: var(--muted); }
.hb-rank { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.hb-rank .rank-badge { width: 30px; height: 30px; }
.hb-rank small { font: 400 12px var(--display); letter-spacing: .05em; color: #d9c7a8; text-transform: uppercase; white-space: nowrap; }
.hb-tools { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.hb-tool { width: 34px; height: 34px; display: grid; place-items: center; background: linear-gradient(170deg, #2b2620, #121110); border: 1px solid #8a72546e; box-shadow: 0 2px #050605, inset 0 1px #f2d9a91c; }
.hb-tool:active { transform: translateY(1px); box-shadow: 0 1px #050605; }
.glyph { display: block; width: 20px; height: 20px; }
.glyph svg { width: 100%; height: 100%; fill: none; stroke: #ecdcc0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.glyph .f { fill: #ecdcc0; stroke: none; }
.save-chip.slim { display: flex; align-items: center; gap: 8px; min-height: 0; padding: 6px 10px; }
.save-chip.slim b { font: 400 16px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.save-chip.slim small { margin-left: auto; font: 400 14px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #ff8b78; }
.save-chip.slim .wi { width: 18px; height: 18px; }

/* ---------- mode cards ---------- */
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode-card, .event-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px;
  min-width: 0; padding: 6px 4px 8px; color: var(--fg); text-align: center; background: linear-gradient(170deg, #26221d, #141311 70%);
  border: 1px solid #7d6a5266; box-shadow: 0 3px #070807, inset 0 1px #f2d9a91a; transition: transform .14s, box-shadow .2s, border-color .2s; }
.mode-card::before, .event-card::before { content: ''; position: absolute; inset: 3px; z-index: -1; pointer-events: none; border: 1px solid #ddc39a12;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--mc) 26%, transparent), transparent 70%); }
.mode-card:active, .event-card:active { transform: translateY(2px) scale(.985); box-shadow: 0 1px #070807; }
.mode-card.on, .event-card.on { border-color: var(--mc); box-shadow: 0 3px #070807, 0 0 0 2px color-mix(in srgb, var(--mc) 55%, transparent), 0 0 18px color-mix(in srgb, var(--mc) 35%, transparent); }
.mode-card .mc-art { width: 100%; height: 50px; }
.mc-art svg { width: 100%; height: 100%; overflow: visible; }
.mode-card b { font: 400 21px var(--display); letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.mode-card small { font-size: 11px; color: var(--muted); line-height: 1.15; }
.mc-stamp { position: absolute; top: 5px; right: -22px; transform: rotate(32deg); width: 90px; padding: 1px 0; font: 400 10px var(--display); letter-spacing: .12em;
  text-transform: uppercase; font-style: normal; color: #fff; background: var(--mc); box-shadow: 0 1px #0008; animation: stamp .28s steps(3); }

/* the ink drawings */
.mc-art .ink { fill: none; stroke: #e9dcc4; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mc-art .contour { stroke: #8d7a62; stroke-width: 1.2; stroke-dasharray: 4 3; animation: ink-drift 6s linear infinite; }
.mc-art .contour.c2 { animation-duration: 9s; opacity: .6; }
.mc-art .globe { stroke: color-mix(in srgb, var(--mc) 80%, #fff); }
.mc-art .globe-l { stroke-width: 1.2; opacity: .7; }
.mc-art .rifle { fill: #2a2420; stroke: #e9dcc4; }
.mc-art .pole { stroke: #d6c6aa; }
.mc-art .flag { fill: var(--mc); stroke: #0b0b0b; stroke-width: 1; }
.mc-art .flag-wave .flag, .mc-art .team .flag { transform-box: fill-box; transform-origin: left center; animation: flag-wave 1.6s ease-in-out infinite; }
.mc-art .team.t1 .flag { animation-delay: -.4s; } .mc-art .team.t2 .flag { animation-delay: -.8s; } .mc-art .team.t3 .flag { animation-delay: -1.2s; }
.mc-art .bolt { fill: #f2b705; stroke: #0b0b0b; stroke-width: 1.5; animation: bolt 2.4s steps(1) infinite; }
.mc-art .speed { stroke: #f2b70588; animation: speed 0.9s linear infinite; stroke-dasharray: 10 6; }
.mc-art .arrow-a, .mc-art .arrow-b { stroke: #e9dcc4; animation: arrow-run 1.8s ease-in-out infinite; }
.mc-art .arrow-b { animation-delay: -.9s; }
.mc-art .moon { fill: #e9e4c8; stroke: none; opacity: .8; }
.mc-art .hand { stroke: #9bd34a; transform-box: fill-box; transform-origin: bottom center; animation: hand-rise 2.6s ease-in-out infinite; }
.mc-art .hand.h2 { animation-delay: -.9s; } .mc-art .hand.h3 { animation-delay: -1.7s; }
.mc-art .ground { stroke: #6e5f4c; }
.mc-art .land { fill: #2d3a24; stroke: #c9b48c; stroke-width: 1.5; }
.mc-art .border { stroke: #d9b450; stroke-width: 1.2; stroke-dasharray: 3 3; animation: ink-drift 4s linear infinite; }
.mc-art .front { stroke: #e0242d; stroke-width: 1.6; stroke-dasharray: 5 4; animation: ink-drift 3s linear infinite; }
.mc-art .push { stroke: #f2eee6; stroke-width: 2.4; stroke-dasharray: 40; animation: push 2.8s ease-in-out infinite; }
.mc-art .push.p2 { animation-delay: -1.4s; }
.mc-art .pin path { fill: #e0242d; stroke: #0b0b0b; } .mc-art .pin circle { fill: #fff; stroke: none; }
.mc-art .pin { transform-box: fill-box; transform-origin: bottom center; animation: pin-bob 2.2s ease-in-out infinite; }

/* ---------- event cards ---------- */
.mode-events { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.event-card { flex-direction: row; justify-content: flex-start; align-items: center; gap: 6px; padding: 6px 8px; text-align: left; min-height: 64px; }
.event-card .mc-art { flex: 0 0 64px; height: 46px; }
.ev-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ev-text em { display: inline-flex; align-items: center; gap: 4px; font: 400 11px var(--display); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--mc); }
.ev-text b { font: 400 19px var(--display); letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.ev-text small { font-size: 11px; color: var(--muted); }
.ev-text small span { font-variant-numeric: tabular-nums; color: #f2eee6; }
.event-card.open { animation: ev-glow 2.8s ease-in-out infinite; }
.event-card.closed { filter: saturate(.55) brightness(.85); }
.ev-lock { position: absolute; top: 5px; right: 6px; }
.ev-lock .wi { width: 14px; height: 14px; opacity: .8; }
.event-card.ea .ea-mark { width: 13px; height: 13px; }

/* ---------- PLAY ---------- */
.side-battle .play-stack .play { min-height: 82px; padding: 10px 12px 9px; }
.side-battle .play-stack .play b { font-size: 46px; line-height: 1; }
.side-battle .home-side, .home-side { gap: 8px; }
.play-stack .play { animation: play-breath 3.2s ease-in-out infinite; }
.play-stack .play-practice { align-self: center; margin-top: 2px; min-height: 30px; padding: 4px 12px; }
.play-stack { display: flex; flex-direction: column; align-items: stretch; }

/* ---------- tiles ---------- */
.home-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tile { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; color: var(--fg);
  background: linear-gradient(170deg, #27231e, #141311); border: 1px solid #7d6a5250; box-shadow: 0 3px #070807, inset 0 1px #f2d9a914; transition: transform .12s; }
.tile:active { transform: translateY(2px); box-shadow: 0 1px #070807; }
.tile-wrap { position: relative; min-width: 0; display: flex; }
.tile-wrap .tile { flex: 1; padding-bottom: 40px; }
.tile-quick { position: absolute; left: 3px; right: 3px; bottom: 4px; height: 32px; padding: 0 2px; font: 400 12px var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; background: var(--red); border: 1px solid #0b0b0b; box-shadow: 0 2px #070807; }
.tile-quick:active { transform: translateY(1px); box-shadow: 0 1px #070807; }
.tile-ic { height: 30px; display: grid; place-items: center; }
.tile-ic .wi, .tile-ic .art, .tile-ic .pass-mark { width: 28px; height: 28px; }
.tile-ic .art img { width: 100%; height: 100%; object-fit: contain; }
.tile b { font: 400 15px var(--display); letter-spacing: .06em; text-transform: uppercase; line-height: 1; }
.tile small { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tile .dot { position: absolute; top: 4px; right: 4px; min-width: 15px; height: 15px; padding: 0 3px; display: grid; place-items: center; font: 700 10px var(--body); font-style: normal;
  color: #fff; background: var(--red); border: 1px solid #0b0b0b; border-radius: 8px; animation: dot-pulse 1.6s ease-in-out infinite; }

/* ---------- campaign ---------- */
.camp-hero { position: relative; overflow: hidden; isolation: isolate; padding: 14px 14px 16px; text-align: center;
  background: radial-gradient(ellipse at 50% 20%, #5a1a1a66, transparent 70%), linear-gradient(170deg, #241f1a, #121110);
  border: 1px solid #9c7f5a66; box-shadow: 0 3px #070807, inset 0 1px #f2d9a920; --mc: #e0242d; }
.camp-hero .camp-art { display: block; height: 130px; margin: -4px auto 4px; }
.camp-hero .camp-art svg { width: 100%; height: 100%; }
.camp-hero em { font: 400 13px var(--display); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: #f27661; }
.camp-hero h2 { margin: 2px 0 6px; font: 400 40px var(--display); letter-spacing: .05em; text-transform: uppercase; text-shadow: 2px 3px #5d1417; }
.camp-hero p { margin: 0 auto 10px; max-width: 30ch; color: #d9cdb8; }
.camp-clock { display: inline-flex; gap: 6px; padding: 5px 10px; font: 400 15px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #d9c7a8; background: #0d0d0c; border: 1px solid #6c5b4766; }
.camp-clock b { color: #fff; font-variant-numeric: tabular-nums; }
.camp-go { margin: 2px 0; }
.camp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.camp-row .war-lab { grid-column: auto; }
/* BattleLab (js/battlelab.js): every battle type and starting mode, offline */
.blab h3 { margin: 12px 0 5px; font: 400 14px var(--display); letter-spacing: .12em; text-transform: uppercase; color: #f27661; }
.blab-sub { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.blab-list { display: grid; gap: 6px; }
.blab-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 8px 10px; text-align: left; color: #f2eee6; background: #1a1714;
  border: 1px solid #0d0b09; box-shadow: 2px 2px 0 #0b0a08; cursor: pointer; }
.blab-row .wi { width: 30px; height: 30px; }
.blab-row b { display: block; font: 400 17px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.blab-row small { display: block; font-size: 12px; color: #d9c7a8; }
.blab-row em { display: block; font-size: 12px; font-style: normal; color: var(--muted); }
.blab-row:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #0b0a08; }
.camp-stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px;
  background: linear-gradient(170deg, #26221d, #141311); border: 1px solid #7d6a5250; box-shadow: 0 3px #070807; }
.camp-stat > :first-child { grid-row: 1 / 3; width: 26px; height: 26px; }
.camp-stat b { font: 400 16px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.camp-stat small { font-size: 11px; color: var(--muted); }

/* ---------- premium & pass symbols ---------- */
.ea-mark, .pass-mark { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; filter: drop-shadow(0 1px 0 #0009); }
.ea-mark svg, .pass-mark svg { width: 100%; height: 100%; display: block; }
.ea-mark .sh { fill: #1b1610; stroke: #f2c84b; stroke-width: 1.6; }
.ea-mark .st { fill: #f2c84b; }
.ea-mark.big { width: 46px; height: 46px; animation: mark-shine 3s ease-in-out infinite; }
.premium-sheet .ps-head { display: flex; align-items: center; gap: 12px; }
.premium-sheet .ps-head em { font: 400 13px var(--display); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: #f2c84b; }
.premium-sheet h2 { margin: 0; }
.ps-focus { margin: 0; padding: 8px 10px; background: #2b2412; border-left: 3px solid #f2c84b; color: #f6e7bf; }
.ps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ps-list li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 8px 10px; background: #171512; border: 1px solid #5a4b3955; }
.ps-list li.hot { border-color: #f2c84b; box-shadow: 0 0 12px #f2c84b33; }
.ps-list li > :first-child { width: 28px; height: 28px; }
.ps-list b { display: block; font: 400 17px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.ps-list small { color: var(--muted); }

/* ---------- squad sheet / supply / orders sheets ---------- */
.squad-sheet .card.squad { margin: 0; }
.supply-sheet .streak { margin: 0; }

/* ---------- press particles & embers ---------- */
#kit-fx { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.kp { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; animation: kp var(--t) cubic-bezier(.2,.7,.4,1) forwards; }
.kp-spark { background: #ffd27a; box-shadow: 0 0 6px #ff9a3c; }
.kp-casing { width: 4px; height: 10px; margin: -5px 0 0 -2px; background: linear-gradient(90deg, #8a6420, #f2c45c 50%, #8a6420); border-radius: 1px; }
.kp-dust { width: 8px; height: 8px; background: #b9a684aa; border-radius: 50%; filter: blur(.6px); }
.kit-embers { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.kit-embers i { position: absolute; bottom: -10px; width: 3px; height: 3px; background: #ff9a3c; box-shadow: 0 0 6px #ff6a2a; border-radius: 50%; opacity: 0;
  transform: scale(var(--s)); animation: ember var(--d) linear infinite; animation-delay: calc(var(--w) * -1); }

@keyframes kp { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 26px)) rotate(var(--r)); opacity: 0; } }
@keyframes ember { 0% { transform: translate(0,0) scale(var(--s)); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(30px,-105vh) scale(var(--s)); opacity: 0; } }
@keyframes ink-drift { to { stroke-dashoffset: -28; } }
@keyframes flag-wave { 0%,100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(.92); } }
@keyframes bolt { 0%,100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .35; } 52% { opacity: 1; } 55% { opacity: .5; } 58% { opacity: 1; } }
@keyframes speed { to { stroke-dashoffset: -32; } }
@keyframes arrow-run { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
@keyframes hand-rise { 0%,100% { transform: scaleY(.9); } 50% { transform: scaleY(1.06); } }
@keyframes push { 0% { stroke-dashoffset: 40; } 60%,100% { stroke-dashoffset: 0; } }
@keyframes pin-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ev-glow { 0%,100% { box-shadow: 0 3px #070807, 0 0 0 1px color-mix(in srgb, var(--mc) 25%, transparent); } 50% { box-shadow: 0 3px #070807, 0 0 14px color-mix(in srgb, var(--mc) 45%, transparent); } }
@keyframes play-breath { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
@keyframes dot-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes mark-shine { 0%,100% { filter: drop-shadow(0 1px 0 #0009) brightness(1); } 50% { filter: drop-shadow(0 0 8px #f2c84b88) brightness(1.15); } }

@media (prefers-reduced-motion: reduce) {
  .mc-art *, .event-card.open, .play-stack .play, .tile .dot, .ea-mark.big, .kit-embers i, .mc-stamp { animation: none !important; }
  .home-side, .hs-thumb { transition: none !important; }
}
body.pc-wide .mode-card .mc-art { height: 84px; }
body.pc-wide .home-tiles { gap: 10px; }

/* Desktop: Campaign and Battle side by side, no switch needed */
body.pc-wide #tab-play.page { display: block; }
body.pc-wide .home-switch { display: none; }
body.pc-wide .home-sides { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; overflow: visible; }
body.pc-wide .home-side { transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
body.pc-wide .side-campaign { grid-column: 1; } body.pc-wide .side-battle { grid-column: 2; }

/* ---------- update timeline: a scrolling road of updates ---------- */
.timeline-sheet.tl2 { max-width: 760px; }
.tl2-key { display: flex; flex-wrap: wrap; gap: 6px 12px; font: 400 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tl2-key .k::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border: 1px solid #0b0b0b; }
.tl2-key .major::before { background: #e0242d; } .tl2-key .medium::before { background: #e3a01b; } .tl2-key .war::before { background: #8f2a22; } .tl2-key .mystery::before { background: #6b6560; }
.tl2-track { list-style: none; margin: 0 -14px; padding: 18px 20px 8px; display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, transparent 63px, #3a332b 63px, #3a332b 67px, transparent 67px); }
.tl2-node { position: relative; flex: 0 0 150px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  animation: tl2-in .35s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(var(--i) * 45ms); }
.tl2-when { font: 400 13px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #cdbfa6; white-space: nowrap; height: 16px; }
.tl2-dot { position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; background: #1b1916; border: 2px solid #6b6560; box-shadow: 0 3px #050605; }
.tl2-dot svg { width: 70%; height: 70%; fill: none; stroke: #ecdcc0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tl2-dot svg .f { fill: currentColor; stroke: #0b0b0b; stroke-width: 1; }
.tl2-dot svg .q { stroke: #f2c84b; stroke-dasharray: 2 2; }
.tl2-node.size-major .tl2-dot { width: 46px; height: 46px; color: #e0242d; border-color: #ff6b5b; background: radial-gradient(circle, #5a1414, #1b1916 70%); animation: tl2-pulse 2.4s ease-in-out infinite; }
.tl2-node.size-medium .tl2-dot { width: 38px; height: 38px; color: #e3a01b; border-color: #e3a01b; }
.tl2-node.war .tl2-dot { color: #c0392b; border-color: #8f2a22; transform: rotate(45deg); }
.tl2-node.war .tl2-dot svg { transform: rotate(-45deg); }
.tl2-node.mystery .tl2-dot { color: #8b847c; border-style: dashed; }
.tl2-node.mystery .tl2-dot.glitch { transform: translateX(2px) skewX(-8deg); filter: hue-rotate(80deg) contrast(1.6); }
.tl2-node.now .tl2-dot { color: #86c23a; border-color: #86c23a; }
.tl2-card { width: 132px; min-height: 86px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 6px; background: linear-gradient(170deg, #26221d, #141311);
  border: 1px solid #7d6a5255; box-shadow: 0 3px #070807; }
.tl2-card em { font: 400 13px var(--display); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: #f27661; }
.tl2-card b { font: 400 19px var(--display); letter-spacing: .03em; text-transform: uppercase; line-height: 1.05; }
.tl2-size { font: 400 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #e0242d; padding: 1px 6px; }
.size-medium .tl2-size { background: #b07812; }
.tl2-node.size-major .tl2-card { border-color: #e0242d88; box-shadow: 0 3px #070807, 0 0 14px #e0242d26; }
.tl2-node.mystery .tl2-card { background: repeating-linear-gradient(135deg, #1c1a17 0 8px, #191714 8px 16px); }
.redact { display: block; width: 92px; height: 12px; margin: 4px auto 0; background: #0b0b0b; }
.redact.s { width: 60px; }
.tl2-stamp { margin-top: 4px; padding: 1px 6px; font: 400 13px var(--display); letter-spacing: .14em; text-transform: uppercase; color: #e0242d; border: 2px solid #e0242d; transform: rotate(-6deg); }
.tl2-node.blur .tl2-card { filter: blur(2px); opacity: .7; }
.tl2-node.now .tl2-card { border-color: #86c23a88; }
.tl2-hint { margin: 0; text-align: center; font: 400 13px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tl2-node .tl-secret { width: 28px; height: 28px; }
@keyframes tl2-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes tl2-pulse { 0%,100% { box-shadow: 0 3px #050605, 0 0 0 0 #e0242d55; } 50% { box-shadow: 0 3px #050605, 0 0 0 8px #e0242d00; } }
@media (prefers-reduced-motion: reduce) { .tl2-node, .tl2-node .tl2-dot { animation: none !important; } }

/* ---------- Hold the Line ---------- */
/* The dock button: greyed with your charges and a "when losing" stamp until it unlocks, then a bright pulse; a
   ring that empties while it holds. */
.hold-btn { position: relative; flex: 0 1 auto; min-width: 76px; display: flex; align-items: center; gap: 6px; height: 50px; margin: 3px 8px 3px 4px; padding: 0 9px 0 7px;
  text-align: left; color: #eaffd6; background: linear-gradient(170deg, #36521f, #1b2a10); border: 1px solid #86c23a; box-shadow: 0 3px #0b1206, 3px 4px 0 #050605;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.hold-btn .hold-ic { position: relative; flex: none; width: 24px; height: 24px; }
.hold-btn svg { position: relative; width: 100%; height: 100%; fill: #1b2a10; stroke: #b9f07a; stroke-width: 1.8; }
.hold-btn svg .x { stroke-linecap: round; }
.hold-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.hold-txt b { font: 400 14px/.95 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.hold-txt small { padding: 1px 4px 0; font: 400 10px/1.1 var(--display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: #b9f07a;
  border: 1px solid currentColor; transform: rotate(-2deg); }
.hold-btn em { position: absolute; top: -11px; right: -8px; padding: 0 4px; font: 400 15px var(--display); font-style: normal; color: #b9f07a; background: #050605; box-shadow: 0 0 0 1px #86c23a; }
.hold-btn em:empty { display: none; }
.hold-btn.idle, .hold-btn.used { color: #a9ad9f; background: linear-gradient(170deg, #2a2c27, #171815); border-color: #5d6354; box-shadow: 0 3px #0b0c0a, 3px 4px 0 #050605; }
.hold-btn.idle svg, .hold-btn.used svg { fill: #1d1f1a; stroke: #8d9580; }
.hold-btn.idle .hold-txt small, .hold-btn.used .hold-txt small { color: #8d9580; }
.hold-btn.idle em, .hold-btn.used em { color: #c9cdbf; box-shadow: 0 0 0 1px #5d6354; }
.hold-btn.used { opacity: .6; }
.hold-btn.recovering { color: #e0edce; background: linear-gradient(170deg,#394a30,#1b2617); border-color: #9aae77; }
.hold-btn.recovering .hold-txt small { color: #e0edce; border-color: #9aae77; }
.hold-btn.ready { border-color: #c8ff8a; animation: hold-call 1s ease-in-out infinite; }
.hold-btn.ready .hold-txt small { color: #071004; background: #b9f07a; border-color: #b9f07a; }
.hold-btn.ready.none { animation: none; border-color: #86c23a; }
.hold-btn.ready.none .hold-txt small { color: #f2c84b; background: none; border-color: #f2c84b; }
.hold-btn.active { background: linear-gradient(170deg, #4f7a2a, #22360f); border-color: #eaffd6; }
.hold-btn.active .hold-ic::before { content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(#eaffd6 calc(var(--hp, 1) * 360deg), #ffffff1f 0); -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 78%); mask: radial-gradient(closest-side, transparent 76%, #000 78%); }
.hold-btn.active .hold-txt small { color: #071004; background: #eaffd6; border-color: #eaffd6; }
.hold-btn.active em { color: #eaffd6; }
body.holding #map { outline: 4px dashed #86c23acc; outline-offset: -10px; box-shadow: inset 0 0 60px #86c23a55; }
@keyframes hold-call { 0%,100% { box-shadow: 0 3px #0b1206, 3px 4px 0 #050605, 0 0 6px #9be04a55; filter: brightness(1); }
  50% { box-shadow: 0 3px #0b1206, 3px 4px 0 #050605, 0 0 26px 5px #9be04acc; filter: brightness(1.3); } }
/* Narrow phones: it keeps its words and the tool buttons give way; with four or more of them, the shield icon goes. */
@media (max-width: 400px) {
  .hold-btn { flex: 0 0 auto; min-width: 0; gap: 4px; margin: 3px 4px 3px 2px; padding: 0 6px 0 5px; }
  .hold-btn .hold-ic { width: 20px; height: 20px; }
  .hold-txt b { font-size: 12px; white-space: nowrap; }
  .hold-txt small { font-size: 9px; letter-spacing: .08em; }
  .dock-row:has(.tactics-row > .tbtn:nth-child(2)) .hold-btn .hold-ic, .dock-row:has(#h-voice:not([hidden])) .hold-btn .hold-ic { display: none; }
}
/* The stamped note above the button: why it isn't ready yet, or the first-time coach tip. */
#hud > .hold-tip { position: fixed; z-index: 8; max-width: min(290px, calc(100vw - 24px)); padding: 8px 11px 9px; pointer-events: none; color: #eaffd6;
  font: 400 15px/1.15 var(--display); letter-spacing: .03em; text-transform: uppercase; background: #121a0c; border: 2px solid #86c23a; box-shadow: 4px 5px 0 #050605;
  transform: rotate(-1.2deg); }
.hold-tip[hidden] { display: none; }
.hold-tip.in { animation: hold-stamp .3s steps(3); }
.hold-tip b { display: inline-block; margin-bottom: 6px; padding: 1px 6px 0; font: 400 13px var(--display); letter-spacing: .14em; color: #071004; background: #b9f07a; transform: rotate(-3deg); }
.hold-tip span { display: block; }
.hold-tip small { display: block; margin-top: 5px; font: 400 12px var(--display); letter-spacing: .1em; color: #b9f07a; }
.hold-tip.coach { border-color: #c8ff8a; box-shadow: 4px 5px 0 #050605, 0 0 22px #9be04a55; }
.hold-tip::after { content: ''; position: absolute; bottom: -8px; right: var(--ax, 20px); width: 12px; height: 12px; background: #121a0c;
  border-right: 2px solid #86c23a; border-bottom: 2px solid #86c23a; transform: rotate(45deg); }
@keyframes hold-stamp { 0% { transform: scale(1.3) rotate(-5deg); opacity: 0; } 100% { transform: rotate(-1.2deg); opacity: 1; } }
/* Supply: your charges and when the free one comes. */
.hold-card { display: grid; grid-template-columns: 56px 1fr; gap: 10px 12px; align-items: center; padding: 12px; background: linear-gradient(170deg, #1d2a14, #10150b);
  border: 1px solid #86c23a77; box-shadow: 3px 4px 0 #050605; }
.hold-card .hold-ic { position: relative; width: 56px; height: 56px; }
.hold-card .hold-ic svg { width: 100%; height: 100%; fill: #1b2a10; stroke: #b9f07a; stroke-width: 1.3; }
.hold-card .hold-ic svg .x { stroke-linecap: round; }
.hold-card .hc-n { display: flex; align-items: baseline; gap: 6px; font: 400 32px/1 var(--display); color: #eaffd6; }
.hold-card .hc-n small { font: 400 14px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #b9f07a; }
.hold-card p { margin: 4px 0 0; font-size: 13px; line-height: 1.3; color: #c9d3bd; }
.hold-card .hc-free { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hc-stamp { padding: 2px 7px 1px; font: 400 13px var(--display); letter-spacing: .12em; text-transform: uppercase; color: #b9f07a; border: 2px solid currentColor; transform: rotate(-2deg); }
.hc-stamp.wait { color: #a9ad9f; }
.hold-card .hc-note { font-size: 12px; color: #a9ad9f; }
.hold-card .hc-note .pass-mark { width: 14px; height: 14px; vertical-align: -2px; }
.hold-card .btn { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .hold-btn, .hold-tip.in { animation: none; } }

/* ---------- Supreme picks ---------- */
.claim-pick { width: 100%; margin-top: 6px; color: #2a1d05; font: 400 18px var(--display); letter-spacing: .05em; text-transform: uppercase;
  background: linear-gradient(170deg, #ffe08a, #d9a531); border: 1px solid #fff1b8; box-shadow: 0 3px #6a4b0d, inset 0 1px #fff8d8; }
.claim-pick .ea-mark .sh { fill: #2a1d05; }
.picks-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: linear-gradient(100deg, #3a2c0c, #1b1610); border: 1px solid #f2c84b88; box-shadow: 0 3px #070807; }
.picks-bar b { font: 400 17px var(--display); letter-spacing: .05em; text-transform: uppercase; color: #ffe08a; }
.picks-bar small { margin-left: auto; color: #d9c7a8; font-size: 11px; }
.pass-only { display: inline-flex; align-items: center; gap: 3px; color: #f2c84b !important; }
.pass-only .pass-mark { width: 14px; height: 14px; }
.pass-buy .pass-mark { width: 20px; height: 20px; }

/* ---------- Pass tab ---------- */
.btn.gold { color: #2a1d05; background: linear-gradient(170deg, #ffe08a, #d9a531); border: 1px solid #fff1b8; box-shadow: 0 3px #6a4b0d, inset 0 1px #fff8d8; font: 400 20px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.kit-h { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font: 400 20px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #f2c84b; }
.kit-h.cmd { color: #ff6b5b; }
.kit-h .ea-mark, .kit-h .wi { width: 22px; height: 22px; }

/* ---------- Supply tab ---------- */
.cur-key { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cur-key span { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 10px;
  background: linear-gradient(170deg, #26221d, #141311); border: 1px solid #7d6a5250; box-shadow: 0 3px #070807; }
.cur-key .art { grid-row: 1 / 3; width: 28px; height: 28px; }
.cur-key .art img { width: 100%; height: 100%; object-fit: contain; }
.cur-key b { font: 400 18px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.cur-key small { font-size: 11px; color: var(--muted); }
.shop-h { margin-top: 12px; color: #f2eee6; }
.shop-h .art { width: 24px; height: 24px; } .shop-h .art img { width: 100%; height: 100%; object-fit: contain; }
.shop-h small { margin-left: auto; font: 400 12px var(--display); letter-spacing: .08em; color: var(--muted); }
.pass-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; text-align: left; color: var(--fg);
  background: linear-gradient(100deg, #3a2c0c, #1b1610); border: 1px solid #f2c84b88; box-shadow: 0 3px #070807; }
.pass-link .ea-mark { width: 28px; height: 28px; }
.pass-link b { display: block; font: 400 17px var(--display); letter-spacing: .04em; text-transform: uppercase; color: #ffe08a; }
.pass-link small { color: #d9c7a8; font-size: 11px; }
.explain.short { margin: 0 0 6px; font-size: 13px; color: #c9bba3; }

/* ---------- no stock controls (Gage 10-20): inked toggles and pickers ---------- */
input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; position: relative; width: 44px; height: 24px; margin: 0; cursor: pointer; vertical-align: middle;
  background: #0c0b0a; border: 1px solid #6c5b47; box-shadow: inset 0 2px 3px #000a, 0 1px #f2d9a914; transition: background .2s, border-color .2s; }
input[type="checkbox"]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: linear-gradient(170deg, #a59d93, #6f6962);
  box-shadow: 0 2px #050505; transition: transform .22s cubic-bezier(.3,1.5,.5,1), background .2s; }
input[type="checkbox"]:checked { background: #4d1212; border-color: #e0242d; }
input[type="checkbox"]:checked::after { transform: translateX(20px); background: linear-gradient(170deg, #ff8b78, #e0242d); }
input[type="checkbox"]:focus-visible { outline: 2px solid #ffe08a; outline-offset: 2px; }
select { -webkit-appearance: none; appearance: none; padding: 7px 34px 7px 10px; color: var(--fg); font: 400 17px var(--display); letter-spacing: .04em; text-transform: uppercase;
  background: #121110 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e0242d' stroke-width='2'/%3E%3C/svg%3E") right 10px center / 12px 8px no-repeat;
  border: 1px solid #7d6a5266; box-shadow: 0 2px #070807, inset 0 1px #f2d9a914; border-radius: 0; }
select:focus-visible { outline: 2px solid #ffe08a; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { input[type="checkbox"]::after { transition: none; } }

/* ---------- the month's war trailer and the Campaign spotlight ---------- */
#trailer { position: fixed; inset: 0; z-index: 10000; pointer-events: auto; display: grid; place-items: center; color: #fff; overflow: hidden; }
#trailer.out { animation: tr-out .45s ease forwards; }
.tr-bar { position: absolute; left: 0; right: 0; height: 13vh; background: #000; z-index: 2; animation: tr-bar .7s cubic-bezier(.2,.8,.2,1) both; }
.tr-bar.top { top: 0; transform-origin: top; } .tr-bar.bot { bottom: 0; transform-origin: bottom; }
.tr-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 35%, #000c 100%), linear-gradient(180deg, color-mix(in srgb, var(--ta) 22%, transparent), transparent 40%); }
.tr-beat { position: absolute; z-index: 3; text-align: center; opacity: 0; padding: 0 20px; }
.tr-beat.b1 { animation: tr-beat 2.1s ease .3s both; }
.tr-beat.b1 em { display: block; font: 400 16px var(--display); letter-spacing: .3em; text-transform: uppercase; font-style: normal; color: #ff8b78; }
.tr-beat.b1 span { font: 400 14px var(--display); letter-spacing: .2em; text-transform: uppercase; color: #d9c7a8; }
.tr-beat.b2 { animation: tr-beat 4.4s ease 2.4s both; }
.tr-beat.b2 small { font: 400 16px var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--tb); }
.tr-beat.b2 h1 { margin: 4px 0 8px; font: 400 clamp(44px, 13vw, 96px) var(--display); letter-spacing: .04em; text-transform: uppercase; line-height: .95;
  color: #fff; text-shadow: 3px 4px 0 var(--ta), 0 0 30px color-mix(in srgb, var(--ta) 60%, transparent); animation: tr-stamp .5s cubic-bezier(.2,1.6,.4,1) 2.5s both; }
.tr-beat.b2 p { margin: 0; font: italic 400 17px var(--body); color: #efe6d4; }
.tr-beat.b3 { animation: tr-beat 2.4s ease 6.8s both; }
.tr-beat.b3 b { display: block; font: 400 34px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.tr-beat.b3 span { color: #d9c7a8; }
.tr-skip { position: absolute; z-index: 4; right: 14px; bottom: calc(13vh + 12px); padding: 6px 14px; color: #fff; font: 400 16px var(--display); letter-spacing: .1em; text-transform: uppercase;
  background: #0009; border: 1px solid #ffffff55; }
#coach { position: fixed; inset: 0; z-index: 9999; }
.co-ring { position: fixed; transform: translate(-50%, -50%); border: 3px solid #ffe08a; box-shadow: 0 0 0 9999px #000b, 0 0 24px #ffe08a88; pointer-events: none; animation: co-pulse 1.4s ease-in-out infinite; }
.co-tip { position: fixed; left: 50%; transform: translateX(-50%); width: min(320px, 88vw); display: flex; flex-direction: column; gap: 6px; padding: 12px; text-align: center;
  background: linear-gradient(170deg, #26221d, #121110); border: 1px solid #ffe08a88; box-shadow: 0 4px #050505; }
.co-tip b { font: 400 20px var(--display); letter-spacing: .05em; text-transform: uppercase; color: #ffe08a; }
.co-tip small { color: #d9c7a8; }
.camp-trailer { align-self: center; }
@keyframes tr-bar { from { transform: scaleY(0); } }
@keyframes tr-beat { 0% { opacity: 0; transform: translateY(8px); } 12% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tr-stamp { 0% { transform: scale(1.6) rotate(-4deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tr-out { to { opacity: 0; } }
@keyframes co-pulse { 0%,100% { outline: 0 solid #ffe08a00; } 50% { outline: 8px solid #ffe08a33; } }
@media (prefers-reduced-motion: reduce) { .tr-beat, .tr-beat.b2 h1, .tr-bar, .co-ring { animation-duration: .01s !important; animation-delay: 0s !important; opacity: 1; } .tr-beat.b1, .tr-beat.b3 { display: none; } }
body.trailer-on #home { opacity: 0; pointer-events: none; transition: opacity .35s; }
#home { transition: opacity .35s; }

/* ---------- radio transmissions: fully hidden when off (it used to peek out under the notch) and glitchy ---------- */
.transmission { opacity: 0; visibility: hidden; transform: translate(-50%, calc(-100% - var(--safe-t) - 24px)) !important;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.1), opacity .3s, visibility 0s linear .35s; overflow: hidden; }
.transmission.show { opacity: 1; visibility: visible; transform: translate(-50%, 0) !important; transition: transform .35s cubic-bezier(.2,.9,.3,1.1), opacity .2s, visibility 0s; }
.transmission .tx-static { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, #ffffff10 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, #00000022 0 2px, transparent 2px 5px); mix-blend-mode: screen; }
.transmission.glitch .tx-static, .transmission.tear .tx-static { opacity: 1; animation: tx-noise .12s steps(2) infinite; }
.transmission.glitch > div, .transmission.tear > div { animation: tx-tear .18s steps(3) 3; }
.transmission.glitch .wi { animation: tx-flick .25s steps(2) 2; }
@keyframes tx-noise { 0% { background-position: 0 0, 0 0; } 100% { background-position: 0 7px, 9px 0; } }
@keyframes tx-tear { 0% { transform: translateX(0); clip-path: inset(0 0 0 0); } 33% { transform: translateX(-4px) skewX(-6deg); clip-path: inset(20% 0 40% 0); } 66% { transform: translateX(3px); clip-path: inset(55% 0 5% 0); } 100% { transform: none; clip-path: inset(0 0 0 0); } }
@keyframes tx-flick { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .transmission.glitch > div, .transmission.tear > div, .transmission .tx-static { animation: none !important; } }

/* Matchmaking: the lobby fills toward its seats (Gage 10-20: "Finding players…", lobbies filling, no labels) */
.mm-fill { position: relative; height: 10px; margin: 12px 0 6px; background: #1a0d0b; box-shadow: inset 0 0 0 2px var(--red-d); overflow: hidden; }
.mm-fill i { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(-45deg, var(--red-b) 0 6px, var(--red) 6px 12px); transition: width .25s steps(4); animation: mm-march .6s linear infinite; background-size: 17px 17px; }
@keyframes mm-march { to { background-position: 17px 0; } }
.mm-seats { display: block; text-align: center; font: 400 20px var(--display); color: var(--muted); letter-spacing: .04em; }
.mm-seats b { color: #fff; font-weight: 400; }
.radar i.dim { opacity: .35; }
@media (prefers-reduced-motion: reduce) { .mm-fill i { animation: none; } }

/* ---------- The war (Campaign side, js/war.js) ---------- */
.war { display: grid; gap: 10px; --us: #4f86de; --ca: #d8423a; --gold: #ffd36e; }
.war-head { position: relative; text-align: center; padding: 6px 4px 2px; }
.war-head em { font: 400 13px var(--display); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: #f27661; }
.war-head h2 { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 6px; font: 400 36px var(--display); letter-spacing: .05em; text-transform: uppercase; text-shadow: 2px 3px #3a0e10; }
.war-head h2 i { font-style: normal; color: var(--gold); font-size: .7em; vertical-align: middle; }
.war-flag { display: inline-block; width: 38px; height: 24px; flex: none; box-shadow: 0 0 0 2px #0d0b09, 2px 3px 0 2px #0d0b09; transform: rotate(-3deg); }
.war-flag + span + .war-flag, .wp-side.ca .war-flag { transform: rotate(3deg); }
.war-flag svg { display: block; width: 100%; height: 100%; }
.war-off { margin-top: 6px; font-size: 12px; color: #e9b36a; }
.war-map { position: relative; border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #3b2c1c, 3px 4px 0 #0d0b09; background: #0b141f; overflow: hidden; aspect-ratio: 887 / 800; }
.war-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.war-map #war-fx { pointer-events: none; }
.war-key { position: absolute; left: 8px; bottom: 6px; display: flex; gap: 10px; font: 400 12px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #e6dccb; text-shadow: 1px 1px #000; pointer-events: none; }
.war-key i { display: inline-block; width: 12px; height: 4px; margin-right: 4px; vertical-align: middle; }
.k-front { background: var(--gold); } .k-att { background: repeating-linear-gradient(45deg, #fff8 0 2px, transparent 2px 4px); outline: 1px solid #fff6; height: 8px !important; }
.war-tag { position: absolute; transform: translate(-50%, -110%); display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 7px 10px; background: #120c08f2; border: 1px solid var(--gold); box-shadow: 2px 3px 0 #000; min-width: 150px; z-index: 2; }
.war-tag .war-flag { grid-row: 1 / 3; width: 28px; height: 18px; }
.war-tag b { font: 400 18px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.war-tag small { font-size: 11px; color: #d9cdb8; }
.war-tug { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.wt-side { display: grid; text-align: center; min-width: 64px; }
.wt-side b { font: 400 30px/1 var(--display); }
.wt-side.us b { color: var(--us); } .wt-side.ca b { color: var(--ca); }
.wt-side small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wt-bar { position: relative; height: 22px; background: var(--ca); border: 2px solid #0d0b09; box-shadow: 2px 3px 0 #0d0b09; overflow: hidden; }
.wt-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: var(--us); box-shadow: 3px 0 0 var(--gold); transition: width .6s steps(8); }
.wt-bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 15px var(--display); letter-spacing: .08em; color: #fff; text-shadow: 1px 1px #000; }
.war-score { display: flex; justify-content: space-between; font: 400 14px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #d9cdb8; margin-top: -4px; }
.war-score b { font-size: 18px; } .war-score .us b { color: var(--us); } .war-score .ca b { color: var(--ca); }
.war-card { padding: 12px; background: linear-gradient(#1c1612, #14100d); border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #3b2c1c, 3px 4px 0 #0d0b09; }
.war-card h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 8px; font: 400 20px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.war-card h3 small { font: 400 12px var(--display); letter-spacing: .05em; color: var(--muted); text-align: right; }
.war-card h3 small b { color: #fff; }
.war-card p { margin: 0 0 10px; color: #d9cdb8; font-size: 13px; }
.wp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wp-side { display: grid; justify-items: center; gap: 4px; padding: 14px 8px 12px; color: #fff; cursor: pointer; border: 2px solid #0d0b09; box-shadow: 3px 4px 0 #0d0b09; transition: transform .12s steps(2); }
.wp-side.us { background: linear-gradient(160deg, #2a4f8f, #172b4f); } .wp-side.ca { background: linear-gradient(200deg, #8f2a26, #4f1714); }
.wp-side:active { transform: translate(2px, 3px); box-shadow: 1px 1px 0 #0d0b09; }
.wp-side .war-flag { width: 54px; height: 34px; margin-bottom: 4px; }
.wp-side b { font: 400 20px var(--display); letter-spacing: .05em; text-transform: uppercase; }
.wp-side small { font-size: 12px; color: #e6dccb; }
.wp-side em { font: 400 12px var(--display); letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--gold); }
.war-you.us { border-left: 6px solid var(--us); } .war-you.ca { border-left: 6px solid var(--ca); }
.wy-top { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.wy-top b { font: 400 22px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.wy-top small { display: block; font-size: 12px; color: #d9cdb8; }
.rank-bar, .hold { height: 6px; margin-top: 5px; background: #0d0b09; border: 1px solid #3b2c1c; }
.rank-bar i { display: block; height: 100%; background: var(--gold); }
.hold i { display: block; height: 100%; background: #e6dccb; }
.wy-fronts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.wy-f { padding: 8px; background: #0f0c0a; border: 1px solid #2c2219; }
.wy-f small { display: block; font: 400 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wy-f b { font: 400 18px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.wy-f.att small { color: #f27661; } .wy-f.def small { color: #8fb6ff; }
.wv-list { display: grid; gap: 6px; }
.wv { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 9px 10px; text-align: left; color: #fff; background: #0f0c0a; border: 1px solid #3b2c1c; overflow: hidden; cursor: pointer; }
.wv b { position: relative; z-index: 1; font: 400 18px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.wv small { position: relative; z-index: 1; font-size: 12px; color: #d9cdb8; }
.wv i { position: absolute; left: 0; top: 0; bottom: 0; background: #ffd36e22; border-right: 2px solid #ffd36e66; }
.wv.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.wv.on b::after { content: ' · your vote'; font-size: 12px; color: var(--gold); }
.wv:disabled { cursor: default; opacity: 1; }
.war-go { margin: 2px 0; }
.war .camp-stat { color: #fff; text-align: left; cursor: pointer; }
.war-feed ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.war-feed li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #e6dccb; padding-left: 10px; border-left: 3px solid #3b2c1c; }
.war-feed li.capture, .war-feed li.retake { border-left-color: var(--gold); color: #fff; }
.war-feed li.offensive { border-left-color: #f27661; }
.war-feed li small { color: var(--muted); flex: none; }
.war-loading .war-map { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .wt-bar i { transition: none; } }

/* The US vs Canada trailer (js/trailer.js): beats run off the .go class, the flags clash on .clash */
#trailer.tr-war .tr-beat.b3 { animation: none; }
#trailer.tr-war.go .tr-beat.b3 { animation: tr-beat 3s ease 3.9s both; }
#trailer.tr-war.go .tr-beat.b4 { animation: tr-beat 3s ease 7.1s both; }
#trailer.tr-war.go .tr-beat.b5 { animation: tr-land .7s cubic-bezier(.2,.9,.25,1.2) 10.3s both; }
.tr-beat.b4 b { display: block; font: 400 34px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.tr-beat.b4 span { color: #d9c7a8; }
.tr-beat.b5 small { font: 400 16px var(--display); letter-spacing: .3em; text-transform: uppercase; color: #ffd36e; }
.tr-beat.b5 h1 { margin: 4px 0 8px; font: 400 clamp(52px, 15vw, 110px)/.95 var(--display); letter-spacing: .04em; text-transform: uppercase; text-shadow: 3px 4px #3a0e10, 0 0 30px #000; }
.tr-beat.b5 h1 i { font-style: normal; font-size: .5em; color: #ffd36e; vertical-align: middle; }
.tr-beat.b5 p { margin: 0; font: 400 20px var(--display); letter-spacing: .12em; text-transform: uppercase; color: #efe6d4; }
.tr-clash { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4vw; opacity: 0; pointer-events: none; }
#trailer.tr-war.go .tr-clash { animation: tr-beat 3.4s ease .35s both; }
.trc { display: grid; justify-items: center; gap: 10px; }
.trc svg { width: min(34vw, 220px); height: auto; box-shadow: 0 0 0 4px #0d0b09, 6px 8px 0 4px #0d0b09; }
.trc b { font: 400 clamp(20px, 6vw, 40px) var(--display); letter-spacing: .06em; text-transform: uppercase; text-shadow: 2px 3px #000; }
#trailer.tr-war.go .trc.us { animation: trc-in-l .6s cubic-bezier(.2,.9,.3,1.15) .35s both; }
#trailer.tr-war.go .trc.ca { animation: trc-in-r .6s cubic-bezier(.2,.9,.3,1.15) .35s both; }
.trc-vs { font: 400 clamp(28px, 9vw, 64px) var(--display); font-style: normal; color: #ffd36e; text-shadow: 3px 4px #000; transform: scale(0); }
#trailer.tr-war.clash .trc-vs { animation: tr-stamp .35s cubic-bezier(.2,.9,.3,1.4) both; transform: none; }
.tr-flash { position: absolute; inset: 0; z-index: 2; background: #fff; opacity: 0; pointer-events: none; }
#trailer.tr-war.clash .tr-flash { animation: tr-flash .5s ease-out both; }
#trailer.tr-war.clash .tr-clash { animation-name: tr-beat, tr-shake; animation-duration: 3.4s, .35s; animation-delay: .35s, 0s; }
@keyframes trc-in-l { from { transform: translateX(-70vw) rotate(-8deg); } }
@keyframes trc-in-r { from { transform: translateX(70vw) rotate(8deg); } }
@keyframes tr-flash { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes tr-shake { 0%, 100% { translate: 0 0; } 20% { translate: -10px 4px; } 40% { translate: 8px -6px; } 60% { translate: -6px 3px; } 80% { translate: 4px -2px; } }
@keyframes tr-land { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #trailer.tr-war .tr-clash, #trailer.tr-war .trc, #trailer.tr-war .tr-flash { animation: none !important; } #trailer.tr-war .tr-beat.b5 { animation: tr-land .01s 3s both !important; } #trailer.tr-war .tr-beat.b4 { display: none; } }
.wy-next { margin-top: 8px; font-size: 12px; color: #d9cdb8; } .wy-next b { color: var(--gold); font-weight: 400; font-family: var(--display); letter-spacing: .05em; text-transform: uppercase; font-size: 14px; }

/* Territories setup (js/territories.js) */
.terr-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.terr-head h2 { margin: 0; } .terr-head small { color: #d9b450; font: 400 13px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.terr-maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.terr-map { display: grid; padding: 7px 6px; text-align: left; color: #fff; background: #0f0c0a; border: 1px solid #3b2c1c; cursor: pointer; }
.terr-map b { font: 400 16px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.terr-map small { font-size: 10px; color: var(--muted); }
.terr-map.on { border-color: #d9b450; box-shadow: inset 0 0 0 1px #d9b450; }
.terr-canvas { border: 2px solid #0d0b09; box-shadow: 3px 4px 0 #0d0b09; background: #0b141f; }
.terr-canvas canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; cursor: crosshair; }
.terr-pick { min-height: 42px; margin: 8px 0; display: grid; }
.terr-pick b { font: 400 22px var(--display); letter-spacing: .05em; text-transform: uppercase; color: #ffd36e; }
.terr-pick small { color: #d9cdb8; font-size: 12px; }
.terr-go { position: sticky; bottom: -1px; z-index: 2; display: grid; grid-template-columns: 1fr 2fr; gap: 8px; padding: 10px 0 2px; background: var(--panel, #24221b); }
.terr-net { display: grid; gap: 4px; margin-bottom: 8px; }
.terr-net .seg button { height: 44px; font-size: 17px; }
.terr-net .seg button.on { background: var(--red); color: #fff; }
.terr-net small { color: #d9cdb8; font-size: 12px; }
.terr-pick small { margin-top: 4px; }
.terr-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (max-width: 500px) { .terr-slots { grid-template-columns: 1fr; } .terr-slot { min-height: 40px; } }
.terr-slot { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; text-align: left; color: #8f877a; background: #0f0c0a; border: 1px dashed #3b2c1c; font: inherit; }
.terr-slot i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; font: 400 15px var(--display); font-style: normal; color: #8f877a; background: #1a1612; border-radius: 50%; }
.terr-slot b { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 15px var(--display); letter-spacing: .04em; text-transform: uppercase; color: inherit; }
.terr-slot.full { color: #fff; cursor: pointer; border: 1px solid #d9b450; background: #1c1710; }
.terr-slot.full i { color: #fff; background: #c8202a; box-shadow: 0 0 0 2px #fff; }
.terr-slot u { flex: none; text-decoration: none; color: #d9b450; font-size: 17px; line-height: 1; }
.terr-go .btn.ghost.on { background: var(--red); color: #fff; border-color: var(--red); }
.terr-go .btn:disabled { opacity: .45; }
.terr-enemy-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; }
.terr-enemy-head output { color: #ffd36e; font-size: 20px; }
#terr-battle-pane > small, #terr-size-note { display: block; margin: 8px 0 16px; color: #d9cdb8; font-size: 12px; }
#terr-enemies { width: 100%; margin: 10px 0 18px; accent-color: #d9b450; }
#terr-enemies::-webkit-slider-runnable-track { height: 10px; background: linear-gradient(90deg, #d9b450 var(--fill), #29271f 0); box-shadow: inset 0 0 0 2px #0d0b09; }
#terr-enemies::-moz-range-track { height: 10px; background: linear-gradient(90deg, #d9b450 var(--fill), #29271f 0); }
#terr-size .seg { margin-top: 6px; } #terr-size button, #terr-enemy-presets button { min-height: 44px; }
#terr-tabs { margin: 10px 0; } #terr-battle-start { color: #ffd36e; font-size: 15px; }

/* The Territories reveal: a stamped card for 3 s before an online match (Territories.reveal) */
.terr-reveal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(5, 5, 5, .86); animation: tr-fade .25s ease-out; }
.tr-card { width: min(440px, 100%); display: grid; gap: 8px; padding: 14px; text-align: center; background: linear-gradient(170deg, #26221c, #141311); border: 2px solid #0d0b09; box-shadow: 0 0 0 1px #d9b45066, 4px 6px 0 #0d0b09; }
.tr-top { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tr-top small { color: #d9b450; font: 400 13px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.tr-map { display: block; width: 100%; height: auto; image-rendering: pixelated; border: 2px solid #0d0b09; background: #0b141f; }
.tr-stamp { justify-self: center; max-width: 100%; padding: 8px 12px; font: 400 25px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #ffd36e; border: 3px solid #ffd36e; transform: rotate(-2.5deg); animation: tr-stamp .5s cubic-bezier(.2, .9, .3, 1.2) .9s both; }
.tr-stars { display: flex; align-items: center; justify-content: center; gap: 4px; animation: tr-fade .4s ease-out 1.5s both; }
.tr-stars b { margin-left: 8px; font: 400 20px var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.tr-star { width: 24px; height: 24px; fill: #2a241c; stroke: #8a6d2c; stroke-width: 1.2; }
.tr-star.on { fill: #ffd36e; stroke: #fff3c4; }
.tr-sub { color: #d9cdb8; font-size: 12px; animation: tr-fade .4s ease-out 1.7s both; }
@keyframes tr-fade { from { opacity: 0; } }
@keyframes tr-stamp { 0% { opacity: 0; transform: rotate(-9deg) scale(2); } 70% { opacity: 1; transform: rotate(-2.5deg) scale(.94); } 100% { transform: rotate(-2.5deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .terr-reveal, .tr-stamp, .tr-stars, .tr-sub { animation: none !important; } }


/* First launch (js/first.js): the notifications ask and the starter picks */
.first-push { text-align: center; }
.first-push .fp-art { display: grid; place-items: center; width: 84px; height: 84px; margin: 4px auto 6px; background: radial-gradient(#3a2414, #1a120c); border: 2px solid #0d0b09; border-radius: 50%; box-shadow: 0 0 0 4px #d9b45033, 3px 4px 0 #0d0b09; animation: fp-ring 2.4s ease-in-out infinite; }
.first-push .fp-art svg, .first-push .fp-art img { width: 44px; height: 44px; }
.first-push h2 { margin: 6px 0 10px; }
.first-push ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 10px; text-align: left; }
.first-push li { padding: 10px 12px; background: #0f0c0a; border-left: 4px solid #d9b450; color: #d9cdb8; font-size: 14px; }
.first-push li b { display: block; color: #fff; font: 400 18px var(--display); letter-spacing: .05em; text-transform: uppercase; }
@keyframes fp-ring { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-12deg); } 80% { transform: rotate(10deg); } 85% { transform: rotate(-6deg); } 90% { transform: rotate(3deg); } }
.first-picks h2 { margin-bottom: 2px; } .first-picks p { margin: 0 0 10px; color: #d9cdb8; }
.fpk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.fpk { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 6px 7px; color: #fff; background: #0f0c0a; border: 2px solid #2c2219; cursor: pointer; animation: fpk-in .45s cubic-bezier(.2,.9,.3,1.2) var(--d, 0ms) both; }
.fpk canvas { width: 100%; height: 64px; display: block; image-rendering: pixelated; }
.fpk b { font: 400 15px/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; text-align: center; }
.fpk small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.fpk.r-epic { border-color: #6d3fa0; } .fpk.r-rare { border-color: #2f5f9f; }
.fpk.on { border-color: #ffd36e; box-shadow: 0 0 0 2px #ffd36e, 0 0 18px #ffd36e55; transform: translateY(-2px); }
.fpk.on::after { content: '✓'; position: absolute; top: 4px; right: 6px; font: 400 18px var(--display); color: #ffd36e; }
.fpk.locked { border-style: dashed; border-color: #5b4a34; color: #d9cdb8; align-content: center; min-height: 112px; }
.fpk.locked svg, .fpk.locked img { width: 26px; height: 26px; opacity: .8; }
.fpk.locked small { text-transform: none; letter-spacing: 0; font-size: 10px; text-align: center; }
@keyframes fpk-in { from { opacity: 0; transform: rotateY(90deg) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .fpk, .first-push .fp-art { animation: none; } }

/* War battles: the side split under the clock (Hud.warBar) */
.hud-war { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px; width: 132px; margin-top: 3px; padding: 1px 4px; background: #d8423a; border: 1px solid #0d0b09; overflow: hidden; }
.hud-war i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 50%); background: #4f86de; box-shadow: 2px 0 0 #ffd36e; transition: width .4s; }
.hud-war b, .hud-war span { position: relative; font: 400 12px/1.2 var(--display); letter-spacing: .04em; color: #fff; text-shadow: 1px 1px #000; }
/* War battle positions (js/battle.js): the stamped intro banner and the rule chip under the war bar */
.bintro { position: absolute; left: 50%; top: calc(var(--safe-t) + 150px); transform: translateX(-50%) rotate(-1deg); z-index: 4; display: grid; justify-items: center; gap: 3px;
  width: max-content; max-width: min(92vw, 440px); padding: 8px 14px 10px; color: #f2eee6; background: #14110ef2; border: 2px solid #0d0b09;
  box-shadow: 4px 4px 0 #0b0a08, inset 0 0 0 1px #e0242d66; pointer-events: none; animation: bstamp .3s steps(3); transition: opacity .5s; }
@keyframes bstamp { from { transform: translateX(-50%) scale(1.8) rotate(-5deg); opacity: 0; } 60% { opacity: 1; } }
.bintro.out { opacity: 0; }
.bintro em { padding: 1px 7px; font: 400 12px var(--display); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: #fff; background: #e0242d; }
.bintro b { display: flex; align-items: center; gap: 7px; font: 400 24px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; text-align: center; text-shadow: 1px 2px #000; }
.bintro b .wi { width: 26px; height: 26px; flex: none; }
.bintro small { font: 400 13px/1.25 var(--display); letter-spacing: .03em; color: #d9c7a8; text-align: center; }
.bchip { display: flex; align-items: center; gap: 4px; max-width: 220px; margin-top: 3px; padding: 1px 5px 1px 3px; color: #e9e2cf; background: #14110e; border: 1px solid #0d0b09; box-shadow: 2px 2px 0 #0b0a08; }
.bchip .bi .wi { display: block; width: 14px; height: 14px; }
.bchip b { font: 400 11px/1.25 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bchip em { font: 400 12px/1.25 var(--display); font-style: normal; color: #ffd36e; font-variant-numeric: tabular-nums; }
.bchip.hot { color: #fff; background: #e0242d; }
.bchip.hot em { color: #fff; }
@media (prefers-reduced-motion: reduce) { .bintro { animation: none; transition: none; } }
.hud-war span { text-align: center; text-transform: uppercase; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.war-battle .banner { top: calc(var(--safe-t) + 96px); } /* below the war bar */

/* ---------- The finish (js/finish.js): rewards slam in, then one compact finish card ---------- */
#modal:has(.finish) { padding: calc(var(--safe-t) + 8px) 6px calc(var(--safe-b) + 8px); align-items: center; }
.sheet-box.finish { width: 100%; max-width: 640px; max-height: 100%; min-height: min(100%, 700px); margin: 0; padding: 0; gap: 0; overflow: hidden; position: relative; isolation: isolate;
  background: linear-gradient(170deg, #2b241c, #161714 55%, #121311); border: 1px solid #b59a7377; box-shadow: 0 0 0 2px #0b0b0a, 5px 7px 0 #050505, 0 18px 50px #000b; }
body.pc-wide .sheet-box.finish { max-width: 680px; }
.finish > .sheet-x { display: none; }
.finish.pre { opacity: 0; pointer-events: none; animation: none; }
.finish.pre * { animation-play-state: paused; } /* the stamp and the confetti wait for the card to land */
.finish.land { pointer-events: none; animation: fin-land .45s cubic-bezier(.2,.9,.3,1) both; } /* a late skipping tap can't press Again */
@keyframes fin-land { from { opacity: 0; transform: scale(.9) translateY(16px); } }

/* the header: place, a stamped verdict, the war score */
.fin-head { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 14px 11px;
  background: url('../assets/ui/command-etch.svg') right 30% / 420px auto, linear-gradient(115deg, #3a2b1e, #1d1b18 70%); border-bottom: 1px dashed #c9a87a55; box-shadow: inset 0 -3px 0 #0b0b0a; }
.finish.win .fin-head { background: url('../assets/ui/command-etch.svg') right 30% / 420px auto, radial-gradient(ellipse at 20% 40%, #6b4a1088, transparent 70%), linear-gradient(115deg, #4a3618, #1d1b18 70%); }
.finish.out .fin-head { background: url('../assets/ui/command-etch.svg') right 30% / 420px auto, radial-gradient(ellipse at 20% 40%, #6b141888, transparent 70%), linear-gradient(115deg, #3a1a18, #1d1b18 70%); }
.fin-place { display: grid; justify-items: center; line-height: 1; padding: 4px 10px 5px; background: #0d0c0a; border: 2px solid #e9dcc4; box-shadow: 3px 3px 0 #000; transform: rotate(-2deg); }
.fin-place b { font: 400 50px/0.9 var(--display); color: #fff; }
.fin-place small { font: 400 11px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.finish.win .fin-place { border-color: #f2c14e; } .finish.win .fin-place b { color: #f2c14e; }
.fin-title { min-width: 0; }
.fin-verdict { display: inline-block; padding: 2px 10px 0; font: 400 32px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff;
  border: 3px solid currentColor; box-shadow: 2px 2px 0 #000, inset 0 0 0 1px #0006; transform: rotate(-2.5deg); animation: stamp .5s cubic-bezier(.2,1.7,.35,1) both .1s; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finish.win .fin-verdict { color: #f2c14e; } .finish.out .fin-verdict { color: #ff6a55; }
.fin-title p { margin: 6px 0 0; font-size: 12px; color: #d9cdb8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-score { display: grid; justify-items: end; line-height: 1; }
.fin-score small { font: 400 11px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fin-score b { font: 400 30px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 2px 2px #000; }

/* the body scrolls only when something extra (feedback, an offer) is on the card; the buttons never move */
.finish > .fin-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 12px 12px 10px; }
.fin-scroll > * { flex-shrink: 0; }

/* where you stand: level, XP to the next one, your rank */
.fin-you { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; background: #100f0d; border: 1px solid #7d6a5266; border-left: 3px solid #c8483f; box-shadow: 0 3px #070807; }
.fy-lv { display: grid; justify-items: center; line-height: 1; padding: 4px 0 3px; background: linear-gradient(170deg, #b5232a, #6d1a1f); border: 2px solid #0b0b0a; box-shadow: 2px 2px 0 #000, inset 0 1px #ffb29466; }
.fy-lv small { font: 400 10px var(--display); letter-spacing: .14em; text-transform: uppercase; color: #ffd9c4; }
.fy-lv b { font: 400 30px/1 var(--display); color: #fff; text-shadow: 1px 2px #5d1417; }
.fy-xp { min-width: 0; display: grid; gap: 4px; }
.fy-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font: 400 15px var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.fy-top span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.fy-top .num { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.fy-xp .bar { height: 9px; background: #060706; box-shadow: 0 0 0 1px #000, inset 0 1px 2px #000; }
.fy-xp .bar i { height: 100%; background: linear-gradient(90deg, #a52628, #e96e51); transition: width 1.1s cubic-bezier(.3,.1,.3,1); box-shadow: 0 0 9px #e753383b; }
.fy-xp > small { font-size: 11px; color: #d9cdb8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fy-rank { display: grid; justify-items: center; gap: 2px; min-width: 56px; }
.fy-rank .rank-badge { width: 26px; height: 33px; }
.fy-rank small { font: 400 12px var(--display); letter-spacing: .05em; text-transform: uppercase; color: #d9c7a8; white-space: nowrap; }
.fy-rank .fy-war { font-size: 10px; color: #ff9c86; }
.xp-mark { display: inline-block; flex: none; width: 24px; height: 24px; }
.xp-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.xp-mark.sm { width: 18px; height: 18px; }

/* what the match paid: one stamped chip each (the ceremony's tokens land on these) */
.fin-loot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.fin-loot.n2, .fin-loot.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* two even rows rather than a lone chip */
.loot { position: relative; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px 8px 6px;
  background: linear-gradient(170deg, #2a251f, #141311); border: 1px solid #8a72546e; box-shadow: 0 3px #070807, inset 0 1px #f2d9a914; }
.loot > .xp-mark, .loot > .art, .loot > .rank-badge { width: 34px; height: 34px; }
.loot > .war-flag { width: 32px; height: 20px; margin: 0 1px; }
.loot > span { min-width: 0; display: grid; line-height: 1; }
.loot b { font: 400 25px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.loot small { margin-top: 2px; font: 400 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loot[data-k="xp"] b { color: #ffd36e; } .loot[data-k="coins"] b { color: #f2c14e; } .loot[data-k="gems"] b { color: #7fe3ef; }
.loot.none b { color: var(--muted); }
.loot em { position: absolute; top: -7px; right: -3px; padding: 1px 5px; font: 400 10px/1.3 var(--display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #c8202a; box-shadow: 1px 1px 0 #000; transform: rotate(3deg); }
.loot.hit, .fin-pass.hit, .fin-medals.hit { animation: fin-hit .38s ease-out; }
@keyframes fin-hit { 35% { transform: scale(1.07); filter: brightness(1.6); } }
.fin-xpparts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: -3px; padding: 4px 8px; font: 400 13px var(--display); letter-spacing: .04em; text-transform: uppercase; color: #d9cdb8; background: #ffd36e0d; border-left: 2px solid #ffd36e66; }
.fin-xpparts b { color: #ffd36e; font-weight: 400; }
/* Gage 10-21: an honest line when a match paid less (left early, or too little real play). */
.fin-note { display: flex; align-items: center; gap: 8px; margin-top: -2px; padding: 6px 9px 5px; border: 1px solid #e0242d88; border-left: 4px solid #e0242d; background: #e0242d14; }
.fin-note .wi { flex: none; width: 20px; height: 20px; }
.fin-note b { display: block; font: 400 15px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #ff8a7a; }
.fin-note small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.25; color: #d9cdb8; }
.fin-note.low { border-color: #f2c14e88; border-left-color: #f2c14e; background: #f2c14e12; } .fin-note.low b { color: #f2c14e; }
.fin-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -2px; }
.fin-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 2px 4px; font: 400 13px var(--display); letter-spacing: .04em; text-transform: uppercase; color: #f2c14e; background: #f2b70512; border: 1px dashed #f2b70555; }
.fin-tags .wi { width: 16px; height: 16px; }

/* the Battle Pass: this match's XP as the bright segment on the tier bar */
.fin-pass { display: grid; grid-template-columns: 30px auto minmax(40px, 1fr) auto; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; color: var(--fg); text-align: left;
  background: linear-gradient(110deg, #33291c, #171612 70%); border: 1px solid #d9a44155; border-left: 3px solid #d9a441; box-shadow: 0 3px #070807; }
.fin-pass:active { transform: translateY(2px); box-shadow: 0 1px #070807; }
.fin-pass .pass-mark { width: 30px; height: 30px; }
.fp-txt { display: grid; line-height: 1; }
.fp-txt small { font: 400 11px var(--display); letter-spacing: .12em; text-transform: uppercase; color: #d9a441; }
.fp-txt b { font: 400 21px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.fp-bar { position: relative; height: 12px; background: #060706; box-shadow: 0 0 0 1px #000, inset 0 1px 2px #000; overflow: hidden; }
.fp-bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.fp-bar .now { background: repeating-linear-gradient(-45deg, #ffe08a 0 6px, #f2c14e 6px 12px); box-shadow: 0 0 10px #f2c14e66; }
.fp-bar .was { z-index: 1; background: #b8862e; box-shadow: 1px 0 0 #000; }
.fin-pass em { font: 400 16px var(--display); font-style: normal; color: #ffd36e; white-space: nowrap; }
.fin-pass { position: relative; }
.fp-claim { position: absolute; top: -9px; right: 8px; padding: 2px 8px 1px; font: 400 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #000; background: #f2c14e; box-shadow: 2px 2px 0 #000; animation: dot-pulse 1.6s ease-in-out infinite; }

/* the replay poster beside the battle numbers */
.fin-body { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; }
.fin-body.solo { grid-template-columns: 1fr; }
.fin-replay { position: relative; margin: 0; gap: 0; }
.fin-replay canvas { width: 96px; aspect-ratio: 9 / 16; height: auto; box-shadow: 0 0 0 2px #000, 3px 4px 0 2px #000; }
.fin-replay .btn { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); min-height: 28px; margin: 0; padding: 0 8px; font-size: 15px; white-space: nowrap; }
.fin-replay .btn .wi { width: 16px; height: 16px; margin-right: 2px; }
.fin-side { min-width: 0; display: grid; gap: 8px; }
.fin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.fin-stats div { padding: 6px 4px 5px; text-align: center; background: #12110f; border: 1px solid #5a4c3c55; }
.fin-stats b { display: block; font: 400 22px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-stats small { font: 400 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.fin-medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 5px; } /* a good match wraps to a second row, never clips */
.fm { min-width: 0; display: grid; justify-items: center; gap: 1px; padding: 4px 2px 3px; background: #1a160f; border: 1px solid #d9a44144; }
.fm .wi { width: 28px; height: 28px; }
.fm small { max-width: 100%; font: 400 10px/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: #e9dcc4; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finish .fb-card, .finish .cmd-up { margin: 0; }

/* the buttons: always on screen */
.fin-actions { flex: none; display: grid; gap: 6px; padding: 8px 10px 10px; background: linear-gradient(#1b1915, #0f0f0d); border-top: 1px solid #b59a7344; box-shadow: 0 -6px 14px #0006; }
.fin-more { display: flex; gap: 6px; }
.fin-more .btn { flex: 1; min-width: 0; margin: 3px; font-size: 17px; }
.fin-more .glyph { width: 18px; height: 18px; }
.fin-actions .actions .btn { min-height: 52px; font-size: 25px; }

/* ---- the ceremony on top ---- */
.fin-fx { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
.fin-fx.leaving { pointer-events: none; }
.fin-shield { position: fixed; inset: 0; z-index: 36; touch-action: none; } /* swallows the skipping tap's click */
.fin-fx.leaving > :not(.ffx-tally) { animation: ffx-out .32s ease-in both; }
.ffx-dim { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, #2c1611f2, #080706fa 72%); animation: ffx-in .25s ease-out both; }
.fin-fx.win .ffx-dim { background: radial-gradient(ellipse at 50% 46%, #3d2c0ef2, #080706fa 72%); }
.ffx-rays { position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax; opacity: .16; pointer-events: none;
  background: repeating-conic-gradient(#f2c14e 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 46%); mask: radial-gradient(circle, #000 0, transparent 46%); animation: rays-spin 40s linear infinite; }
.fin-fx.out .ffx-rays { opacity: .1; background: repeating-conic-gradient(#e0242d 0 6deg, transparent 6deg 18deg); }
.fin-fx.leaving .ffx-rays { animation: ffx-out .3s ease-in both; }
.ffx-head { position: absolute; top: calc(var(--safe-t) + 22px); left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 12px; pointer-events: none; }
.ffx-head b { font: 400 54px/1 var(--display); color: #fff; text-shadow: 3px 3px #000; animation: stamp .45s cubic-bezier(.2,1.7,.35,1) both; }
.ffx-head span { padding: 2px 12px 0; font: 400 34px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #fff; border: 3px solid currentColor; box-shadow: 3px 3px 0 #000; transform: rotate(-3deg); animation: stamp .5s cubic-bezier(.2,1.7,.35,1) both .12s; }
.fin-fx.win .ffx-head b, .fin-fx.win .ffx-head span { color: #f2c14e; } .fin-fx.out .ffx-head span { color: #ff6a55; }
.ffx-tally { position: absolute; top: calc(var(--safe-t) + 96px); left: 12px; right: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; pointer-events: none; }
.ffx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; background: #110f0c; border: 1px solid #b59a7377; box-shadow: 2px 3px 0 #000; }
.ffx-chip.in { animation: ffx-chip .3s cubic-bezier(.2,1.6,.4,1); }
.ffx-chip > .xp-mark, .ffx-chip > .art, .ffx-chip > .wi, .ffx-chip > .rank-badge, .ffx-chip > .pass-mark { width: 26px; height: 26px; }
.ffx-chip > .war-flag { width: 26px; height: 17px; }
.ffx-chip b { font: 400 20px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.ffx-chip small { font: 400 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@keyframes ffx-chip { from { transform: scale(1.5); } }
.ffx-stage { position: relative; display: grid; place-items: center; width: 100%; min-height: 330px; margin-top: 70px; pointer-events: none; }
.ffx-token { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ffx-token.slam, .ffx-medal.slam { animation: ffx-slam .44s cubic-bezier(.2,.9,.3,1) both; }
@keyframes ffx-slam { 0% { transform: scale(3.6) rotate(-12deg); opacity: 0; filter: blur(4px); } 55% { transform: scale(.88) rotate(1.5deg); opacity: 1; filter: none; } 78% { transform: scale(1.06); } 100% { transform: none; } }
.ffx-ic { display: grid; place-items: center; width: 140px; height: 140px; filter: drop-shadow(4px 6px 0 #000a); }
.ffx-token.hero .ffx-ic { width: 190px; height: 190px; }
.ffx-ic > .xp-mark, .ffx-ic > .art, .ffx-ic > .wi, .ffx-ic > .rank-badge { width: 100%; height: 100%; }
.ffx-ic > .rank-badge { width: 70%; }
.ffx-ic > .war-flag { width: 150px; height: 94px; box-shadow: 0 0 0 4px #0d0b09, 6px 8px 0 4px #0d0b09; }
.ffx-n { font: 400 84px/0.9 var(--display); color: #ffd36e; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-shadow: 4px 5px 0 #000, 0 0 30px #f2b70555; }
.k-coins .ffx-n { color: #f2c14e; } .k-gems .ffx-n { color: #7fe3ef; } .k-war .ffx-n, .k-rp .ffx-n { color: #fff; }
.ffx-unit { padding: 2px 12px 0; font: 400 22px/1.1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #e9dcc4; border: 2px solid #e9dcc499; box-shadow: 2px 2px 0 #000; transform: rotate(-2deg); }
.ffx-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ffx-tags em { padding: 2px 8px; font: 400 15px var(--display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #c8202a; box-shadow: 2px 2px 0 #000; transform: rotate(2deg); animation: ffx-in .3s ease-out both .35s; }
.ffx-parts { display: grid; gap: 3px; min-width: 220px; margin-top: 4px; }
.ffx-parts:empty { display: none; }
.ffx-parts > div { display: flex; justify-content: space-between; gap: 18px; padding: 3px 10px; font: 400 18px var(--display); letter-spacing: .05em; text-transform: uppercase; color: #e9dcc4; background: #0d0c0acc; border-left: 3px solid #ffd36e; animation: ffx-part .28s cubic-bezier(.2,1.4,.4,1) both; }
.ffx-parts b { font-weight: 400; color: #ffd36e; }
.ffx-parts > .tag { justify-content: center; border-left-color: #c8202a; background: #c8202a; color: #fff; }
@keyframes ffx-part { from { opacity: 0; transform: translateX(-30px); } }
.ffx-parts > .ffx-lvup { display: grid; justify-items: center; justify-self: center; line-height: 1; margin-top: 6px; padding: 4px 18px 6px; background: linear-gradient(170deg, #c8202a, #7a1218); border: 3px solid #fff; box-shadow: 4px 4px 0 #000; rotate: -4deg; animation: ffx-slam .4s cubic-bezier(.2,.9,.3,1) both; }
.ffx-lvup small { font: 400 14px var(--display); letter-spacing: .2em; text-transform: uppercase; color: #ffd9c4; }
.ffx-lvup b { font: 400 46px/1 var(--display); color: #fff; }
.ffx-medals { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 360px; }
.ffx-medal { display: grid; justify-items: center; gap: 4px; width: 88px; }
.ffx-medal:not(.slam) { visibility: hidden; }
.ffx-medal .wi { width: 76px; height: 76px; filter: drop-shadow(3px 4px 0 #000a); }
.ffx-medal small { font: 400 15px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-align: center; }
.ffx-ring { position: fixed; width: 60px; height: 60px; margin: -30px; border: 5px solid #ffd36e; border-radius: 50%; pointer-events: none; animation: ffx-ring .65s ease-out forwards; }
@keyframes ffx-ring { from { transform: scale(.5); opacity: 1; } to { transform: scale(6); opacity: 0; border-width: 1px; } }
.ffx-flash { position: absolute; inset: 0; background: #fff8e0; pointer-events: none; animation: tr-flash .35s ease-out forwards; opacity: 0; }
.fin-fx.shake .ffx-stage, .fin-fx.shake .ffx-tally, .fin-fx.shake .ffx-head { animation: tr-shake .34s linear; }
.ffx-skip { position: absolute; bottom: calc(var(--safe-b) + 18px); font: 400 14px var(--display); letter-spacing: .22em; text-transform: uppercase; color: #b3aaa0; animation: blink-soft 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes ffx-in { from { opacity: 0; } }
@keyframes ffx-out { to { opacity: 0; } }

/* the Battle Pass fill */
.ffx-pass { display: grid; gap: 10px; width: min(420px, calc(100vw - 40px)); padding: 14px 14px 12px; background: linear-gradient(115deg, #3a2e1c, #171612 70%); border: 1px solid #d9a44188; border-left: 4px solid #d9a441; box-shadow: 5px 6px 0 #000; }
.ffx-pass.rise { animation: ffx-rise .4s cubic-bezier(.2,1.2,.4,1) both; }
.ffx-pass.up { animation: fin-hit .45s ease-out; }
@keyframes ffx-rise { from { opacity: 0; transform: translateY(40px) scale(.9); } }
.ffx-pass .fp-head { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; }
.ffx-pass .pass-mark { width: 48px; height: 48px; }
.ffx-pass .fp-head > span { display: grid; line-height: 1; }
.ffx-pass .fp-head small { font: 400 13px var(--display); letter-spacing: .16em; text-transform: uppercase; color: #d9a441; }
.ffx-pass .fp-head b { font: 400 36px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.ffx-pass .fp-head em { font: 400 26px var(--display); font-style: normal; color: #ffd36e; font-variant-numeric: tabular-nums; }
.fp-track { position: relative; height: 22px; background: #060706; box-shadow: 0 0 0 2px #000, inset 0 2px 3px #000; overflow: hidden; }
.fp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(-45deg, #ffe08a 0 8px, #f2c14e 8px 16px); box-shadow: 0 0 14px #f2c14e88; }
.fp-next { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 400 13px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 1px 1px #000, -1px -1px #000; }
.fp-reveal { display: grid; gap: 6px; justify-items: center; }
.fp-reveal:empty { display: none; }
.fp-stamp { padding: 2px 14px 0; font: 400 34px/1.05 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #000; background: #f2c14e; border: 3px solid #000; box-shadow: 4px 4px 0 #000; rotate: -4deg; animation: ffx-slam .42s cubic-bezier(.2,.9,.3,1) both; }
.fp-rw { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; background: #0d0c0a; border: 1px solid #d9a44166; animation: ffx-part .3s cubic-bezier(.2,1.4,.4,1) both .25s; }
.fp-rw.prem { border-color: #f2c14e; animation-delay: .4s; }
.fp-rw > .art, .fp-rw > .wi { width: 40px; height: 40px; }
.fp-rw span { display: grid; line-height: 1.1; }
.fp-rw b { font: 400 21px var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.fp-rw small { font: 400 11px var(--display); letter-spacing: .12em; text-transform: uppercase; color: #d9a441; }
.fp-hint { font: 400 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

@media (min-width: 720px) {
  .sheet-box.finish { min-height: min(100%, 760px); }
  .fin-head { padding: 12px 20px 12px; gap: 16px; }
  .fin-place b { font-size: 62px; }
  .fin-verdict { font-size: 42px; }
  .fin-title p { font-size: 14px; }
  .fin-score b { font-size: 38px; }
  .finish > .fin-scroll { gap: 10px; padding: 12px 18px 10px; }
  .fin-you { grid-template-columns: 70px minmax(0, 1fr) auto; padding: 10px 14px; }
  .fy-lv b { font-size: 38px; }
  .fy-top { font-size: 18px; }
  .fin-loot.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .loot { grid-template-columns: 42px minmax(0, 1fr); padding: 9px 10px 8px; }
  .loot > .xp-mark, .loot > .art, .loot > .rank-badge { width: 42px; height: 42px; }
  .loot b { font-size: 30px; }
  .loot small { font-size: 12px; }
  .fin-body { grid-template-columns: 140px minmax(0, 1fr); gap: 14px; }
  .fin-replay canvas { width: 140px; }
  .fin-stats b { font-size: 28px; }
  .fin-stats small { font-size: 12px; }
  .fin-stats div { padding: 9px 4px 7px; }
  .fy-top .num { font-size: 15px; } .fy-xp > small { font-size: 13px; }
  .fy-rank small { font-size: 14px; } .fy-rank .rank-badge { width: 32px; height: 41px; }
  .fin-pass { grid-template-columns: 38px auto minmax(40px, 1fr) auto; padding: 9px 14px; }
  .fin-pass .pass-mark { width: 38px; height: 38px; }
  .fp-txt small { font-size: 13px; } .fp-txt b { font-size: 26px; }
  .fp-bar { height: 15px; } .fin-pass em { font-size: 20px; } .fp-claim { font-size: 15px; }
  .fin-medals { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); } .fm .wi { width: 36px; height: 36px; } .fm small { font-size: 11px; }
  .fin-xpparts, .fin-tags span { font-size: 15px; }
  .fin-actions { padding: 10px 18px 14px; }
  .fin-more .btn { min-height: 40px; font-size: 20px; }
  .fin-actions .actions .btn { min-height: 56px; font-size: 28px; }
  .ffx-ic { width: 170px; height: 170px; } .ffx-token.hero .ffx-ic { width: 230px; height: 230px; }
  .ffx-n { font-size: 108px; }
  .ffx-stage { min-height: 400px; }
}
@media (max-height: 700px) { /* short phones: the same card, packed tighter so little or nothing scrolls */
  .fin-head { padding-top: 8px; padding-bottom: 8px; } .fin-place b { font-size: 40px; }
  .finish > .fin-scroll { gap: 7px; padding: 8px 10px; }
  .fin-you { padding: 5px 8px; } .fy-lv b { font-size: 26px; }
  .loot { padding: 5px 7px 4px; } .loot b { font-size: 22px; } .fin-pass { padding: 6px 10px; }
  .fin-body { grid-template-columns: 74px minmax(0, 1fr); } .fin-replay canvas { width: 74px; }
  .fin-replay .btn { min-height: 24px; padding: 0 5px; font-size: 13px; }
  .fin-stats div { padding: 4px 3px 3px; } .fin-stats b { font-size: 19px; }
  .fin-actions { padding: 6px 10px 8px; } .fin-actions .actions .btn { min-height: 46px; font-size: 23px; } .fin-more .btn { min-height: 36px; font-size: 16px; }
  .ffx-ic { width: 110px; height: 110px; } .ffx-token.hero .ffx-ic { width: 140px; height: 140px; } .ffx-n { font-size: 64px; } .ffx-stage { min-height: 260px; margin-top: 60px; }
}
@media (prefers-reduced-motion: reduce) { .finish.land, .fin-verdict, .loot.hit, .fin-pass.hit, .fp-claim, .fin-fx *, .fin-fx { animation: none !important; } }
/* ---------- Levels (Gage 10-20: XP has to be worth something): the Level Road, level locks, the level card ---------- */
.lv-stamp { display: inline-grid; place-items: center; align-content: center; min-width: 44px; height: 44px; padding: 0 4px; color: #fff; transform: rotate(-4deg);
  background: #a3242a; border: 2px solid #ffb294; box-shadow: 0 3px #3a0c0e, inset 0 0 0 2px #5d1417; }
.lv-stamp small { font: 400 10px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #ffd9c4; }
.lv-stamp b { font: 400 24px/1 var(--display); }
.lv-stamp.big { min-width: 66px; height: 66px; } .lv-stamp.big b { font-size: 36px; }
.hb-who .lvl { grid-template-columns: auto 1fr 8px; width: 100%; text-align: left; }
.hb-who .lvl b { font-size: 18px; color: #fff; }
.lvl-go { width: 6px; height: 6px; border-top: 2px solid #d9c7a8; border-right: 2px solid #d9c7a8; transform: rotate(45deg); }
/* the Locker: where you are, then locks on what your level hasn't reached */
.lk-level { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin: 2px 0 8px; padding: 6px 10px 6px 8px; text-align: left;
  background: linear-gradient(170deg, #26221d, #141311); border: 1px solid #7d6a5266; border-left: 3px solid #c8483f; box-shadow: 0 3px #070807; }
.lk-level:active { transform: translateY(2px); box-shadow: 0 1px #070807; }
.lk-next { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lk-next b { font: 400 17px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.lk-next small { font-size: 11px; color: var(--muted); }
.lk-level em, .level-card em { font: 400 13px var(--display); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: #ff8b78; white-space: nowrap; }
.lk-level em::after, .level-card em::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 6px; vertical-align: 2px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.item.locked canvas { filter: saturate(.7) brightness(.8); }
.item.locked b { color: #b7ab98; }
.item .lv-lock { color: #f2c84b; text-transform: uppercase; }
.item .lv-lock .wi { width: 14px; height: 14px; }
.item .lv-reward { color: #f2c84b; }
.new-tag { position: absolute; top: 4px; right: 4px; z-index: 1; padding: 0 4px; font: 400 12px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; font-style: normal;
  color: #fff; background: var(--red); transform: rotate(4deg); box-shadow: 1px 1px #000; }
.lock-note { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 4px 0 8px; padding: 8px 10px; text-align: left; color: #e9dcc4;
  background: #3a2c0c55; border: 1px dashed #f2c84b88; }
.lock-note .wi { width: 22px; height: 22px; flex: none; }
.lock-note b { color: #ffe08a; font: 400 17px var(--display); letter-spacing: .03em; text-transform: uppercase; }
.lock-note small { display: block; color: var(--muted); font-size: 12px; }
.tryon #t-road .wi { width: 18px; height: 18px; }
/* the Pass tab's level card */
.level-card { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; text-align: left; color: var(--fg);
  background: url('../assets/ui/command-etch.svg') right 40% / 380px auto no-repeat, linear-gradient(115deg, #33291f, #1b1a18 65%);
  border: 1px solid #b49b7238; border-left: 3px solid #c8483f; box-shadow: 0 3px 0 #080908; }
.level-card:active { transform: translateY(2px); box-shadow: 0 1px #080908; }
.lc-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lc-row b { font: 400 20px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.lc-row small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.level-card .bar { display: block; flex: none; height: 7px; background: #090c0b; border: 1px solid #3a332b; }
.level-card .bar i { display: block; height: 100%; background: linear-gradient(90deg, #a52628, #e96e51); box-shadow: 0 0 9px #e753383b; }
.lc-body > small { font-size: 11px; color: #d9c7a8; line-height: 1.3; }
.lc-body > small b { color: #fff; font-weight: 600; }
/* the Level Road sheet: a hand-inked road down the left, every level a milestone on it */
.lr-sub { margin: 2px 0 0; font: 400 15px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #b9ad9c; }
.lr-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 6px 2px 2px; }
.lr-xp { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lr-xp .bar { flex: none; height: 12px; background: #0c0b0a; border: 1px solid #5a4b39; }
.lr-xp .bar i { display: block; height: 100%; background: linear-gradient(90deg, #a52628, #e96e51); box-shadow: 0 0 10px #e7533855; }
.lr-xp span { font: 400 17px var(--display); letter-spacing: .04em; color: #d9c7a8; }
.lr-xp span b { color: #fff; font-weight: 400; }
.lr-xp small { font-size: 12px; color: var(--muted); }
.lr-bonus { display: flex; gap: 8px; align-items: center; margin: 8px 0 6px; padding: 6px 10px; font-size: 12px; color: #d9c7a8; border: 1px dashed #d9a53166; }
.lr-bonus b { color: #ffe08a; font: 400 15px var(--display); letter-spacing: .04em; text-transform: uppercase; }
.lr-bonus.on { border-style: solid; border-color: #f2c84b; background: #3a2c0c66; }
.lr-bonus .pass-mark { width: 20px; height: 20px; flex: none; }
.lr-road { position: relative; list-style: none; margin: 0 -6px; padding: 4px 6px 8px 0; flex: 1 1 auto; min-height: 150px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.lr-lv { position: relative; display: grid; grid-template-columns: 50px 1fr; gap: 8px; align-items: start; min-height: 44px; padding: 5px 0; }
.lr-lv::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 14px; z-index: 0;
  background: repeating-linear-gradient(180deg, #6b5f50 0 5px, transparent 5px 11px) center / 2px 100% no-repeat, #151412;
  border-left: 2px dashed #5d5245; border-right: 2px dashed #5d5245; }
.lr-lv.done::before, .lr-lv.here::before { background: repeating-linear-gradient(180deg, #f2e6cf 0 5px, transparent 5px 11px) center / 2px 100% no-repeat, linear-gradient(90deg, #5d1417, #a3242a 50%, #5d1417);
  border-left: 2px solid #0b0b0b; border-right: 2px solid #0b0b0b; }
.lr-lv.here::before { bottom: auto; height: 26px; }
.lr-lv:first-child::before { top: 20px; }
.lr-node { position: relative; z-index: 1; justify-self: center; width: 30px; height: 30px; display: grid; place-items: center; font: 400 17px/1 var(--display); font-style: normal;
  color: #a49a8e; background: #1b1916; border: 2px solid #6b6560; box-shadow: 0 3px #050605; }
.lr-lv.five .lr-node { width: 34px; height: 34px; margin-top: -2px; border-color: #b08a3a; color: #e9dcc4; }
.lr-lv.big .lr-node { width: 38px; height: 38px; margin-top: -4px; font-size: 20px; color: #ffe08a; border-color: #f2c84b; background: radial-gradient(circle, #5a3a0e, #1b1916 70%); box-shadow: 0 3px #050605, 0 0 12px #f2c84b44; }
.lr-lv.done .lr-node { color: #fff; background: #a3242a; border-color: #ffb294; }
.lr-lv.here .lr-node { width: 40px; height: 40px; margin-top: -2px; font-size: 22px; color: #fff; background: #e0242d; border: 3px solid #fff; box-shadow: 0 3px #3a0c0e, 0 0 0 4px #e0242d55; animation: lr-here 1.8s ease-in-out infinite; }
.lr-lv.beyond .lr-node { width: 44px; font-size: 15px; }
.lr-lv.here { background: linear-gradient(90deg, #e0242d2e, transparent 75%); }
.lr-pay { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-top: 4px; }
.lr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; font: 400 14px/1.15 var(--display); letter-spacing: .04em; text-transform: uppercase;
  color: #d9c7a8; background: #171512; border: 1px solid #5a4b3955; }
.lr-chip .art, .lr-chip .wi { width: 16px; height: 16px; }
.lr-chip .art img { width: 100%; height: 100%; object-fit: contain; }
.lr-chip.gem { color: #a6ecf6; }
.lr-chip.tac { color: #fff; border-color: var(--tc); background: color-mix(in srgb, var(--tc) 24%, #141311); }
.lr-chip.opens { color: #f2c84b; border-color: #f2c84b55; }
.lr-lv.ahead .lr-chip { opacity: .82; }
.lr-item { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; padding: 6px; background: linear-gradient(170deg, #2b2419, #141311);
  border: 1px solid #d9a53188; box-shadow: 0 3px #070807, inset 0 1px #ffe08a22; }
.lr-item canvas { width: 52px; height: 52px; display: block; image-rendering: pixelated; background: #0b0e0c; }
.lr-item b { display: block; font: 400 18px/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #ffe08a; }
.lr-item small { font-size: 11px; color: #d9c7a8; }
.lr-item.r-mythic { border-color: #ff3b5c88; box-shadow: 0 3px #070807, 0 0 14px #ff3b5c26; }
.lr-item.got { border-color: #86c23a88; }
.lr-item.got small { color: #b9f07a; }
.lr-you { align-self: flex-start; padding: 1px 7px; font: 400 12px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: #fff;
  background: var(--red); transform: rotate(-3deg); box-shadow: 1px 2px #000; }
@keyframes lr-here { 0%,100% { box-shadow: 0 3px #3a0c0e, 0 0 0 3px #e0242d55; } 50% { box-shadow: 0 3px #3a0c0e, 0 0 0 9px #e0242d00; } }
@media (prefers-reduced-motion: reduce) { .lr-lv.here .lr-node { animation: none; } }
/* ---------- Video Library (js/film.js): a taped photo per saved match, stamped Keep, the replay player ---------- */
.film-library { max-width: 520px; gap: 10px; }
.film-library .fl-sub { margin-top: -4px; font: 400 14px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #cdbfa6; }
.fl-list { list-style: none; margin: 0; padding: 4px 2px 2px; display: flex; flex-direction: column; gap: 12px; }
.fl-card { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px 12px; padding: 10px 9px 9px; color: var(--fg);
  background: linear-gradient(170deg, #26221d, #141311 70%); border: 1px solid #7d6a5266; box-shadow: 0 3px #070807, inset 0 1px #f2d9a91a;
  animation: fl-in .3s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(var(--i, 0) * 40ms); }
.fl-card::before { content: ''; position: absolute; inset: 3px; border: 1px solid #ddc39a12; pointer-events: none; }
.fl-card.kept { border-color: #f2c84b88; box-shadow: 0 3px #070807, 0 0 14px #f2c84b1c, inset 0 1px #f2d9a91a; }
.fl-card.gone { animation: fl-out .22s ease forwards; }
.fl-thumb { position: relative; margin: 0; width: 112px; height: 84px; display: grid; place-items: center; background: #0b0e0c; outline: 1px solid #b6a18067; outline-offset: 2px;
  box-shadow: 2px 3px 0 #050605; transform: rotate(-1.4deg); }
.fl-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-thumb .glyph { width: 34px; height: 34px; opacity: .6; }
.fl-thumb::before { content: ''; position: absolute; z-index: 1; top: -7px; left: 50%; width: 36px; height: 12px; margin-left: -18px; background: #d9c7a84d; transform: rotate(4deg); box-shadow: 0 1px #0004; }
.fl-thumb figcaption { position: absolute; right: -6px; bottom: -6px; padding: 0 5px; font: 400 13px/1.3 var(--display); letter-spacing: .06em; font-variant-numeric: tabular-nums;
  color: #f2eee6; background: #0b0b0b; border: 1px solid #6c5b47; transform: rotate(1.4deg); }
.fl-info { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.fl-card.kept .fl-info { padding-right: 34px; }
.fl-info em { font: 400 12px var(--display); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: #f27661; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-info b { font: 400 24px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 2px #070907; }
.fl-info b.win { color: #f2c84b; text-shadow: 1px 2px #5d1417; }
.fl-info small { font-size: 12px; line-height: 1.3; color: var(--muted); }
.fl-stamp { position: absolute; top: 8px; right: 8px; padding: 0 6px; font: 400 13px/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase;
  color: #f2c84b; border: 2px solid #f2c84b; transform: rotate(9deg); opacity: .92; animation: stamp .28s steps(3); }
.fl-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr 1fr 40px; gap: 6px; }
.fl-btn { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 38px; padding: 0 5px; font: 400 16px var(--display); letter-spacing: .05em;
  text-transform: uppercase; color: var(--fg); background: linear-gradient(170deg, #2b2620, #121110); border: 1px solid #8a72546e; box-shadow: 0 2px #050605, inset 0 1px #f2d9a91c;
  transition: transform .12s, background-color .16s, border-color .16s; }
.fl-btn:active { transform: translateY(1px); box-shadow: 0 1px #050605; }
.fl-btn .glyph { flex: 0 0 auto; width: 16px; height: 16px; }
.fl-btn.play { color: #fff; background: linear-gradient(100deg, #b5232a, #e23a36 55%, #b31f27); border-color: #ffb294; box-shadow: 0 2px #5e171b, inset 0 1px #ffd9b65c; }
.fl-btn.play .glyph .f { fill: #fff; }
.fl-btn[aria-pressed="true"] { color: #ffe08a; border-color: #f2c84b; }
.fl-btn[aria-pressed="true"] .glyph svg { fill: #f2c84b66; stroke: #f2c84b; }
.fl-btn.del.arm { background: #4d1212; border-color: #e0242d; box-shadow: 0 2px #050605, 0 0 0 2px #e0242d55; }
.fl-btn.del.arm .glyph svg { stroke: #ff8b78; }
.fl-btn[disabled] { opacity: .6; }
.sheet-box .fl-foot { text-align: center; font: 400 13px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fl-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 10px; text-align: center; border: 1px dashed #8a725466; background: #0c0b0a55; }
.fl-empty .glyph { width: 44px; height: 44px; opacity: .85; }
.fl-empty b { font: 400 22px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.fl-empty small { color: var(--muted); font-size: 13px; max-width: 300px; }
/* while a movie renders (export or replay) the map canvas shows the film: menus and HUD step aside */
body.filming #hud, body.filming #home, body.filming #shade { visibility: hidden; }
/* the replay player: the movie exactly as it would export, in a 9:16 frame */
#modal:has(.film-player) { background: #070807; align-items: center; }
.film-player { max-width: 420px; align-items: stretch; gap: 10px; }
.vp-head { display: flex; flex-direction: column; gap: 1px; padding-right: 44px; }
.vp-head em { font: 400 12px var(--display); letter-spacing: .14em; text-transform: uppercase; font-style: normal; color: #f27661; }
.vp-head b { font: 400 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.vp-frame { position: relative; align-self: center; height: min(58vh, 600px); aspect-ratio: 9 / 16; background: #0b0e0c; outline: 1px solid #b6a18067; outline-offset: 3px; box-shadow: 3px 4px 0 #050605; }
.vp-frame canvas { display: block; width: 100%; height: 100%; }
.vp-load { position: absolute; inset: 0; display: grid; place-items: center; font: 400 18px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #cdbfa6; background: #0b0e0c; }
.vp-bar { height: 6px; background: #0c0b0a; border: 1px solid #6c5b47; }
.vp-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #b5232a, #e23a36); }
.film-player .actions .btn { display: flex; align-items: center; justify-content: center; gap: 6px; }
.film-player .actions .glyph { width: 18px; height: 18px; }
@keyframes fl-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes fl-out { to { opacity: 0; transform: translateX(-28px); } }
@media (prefers-reduced-motion: reduce) { .fl-card, .fl-card.gone, .fl-stamp { animation: none !important; } }
/* ---------- Tactics in the dock (Hud.update) ---------- */
/* Running: the ability's colour fills the button and drains round it as a ring, the seconds big in the
   middle, blinking for the last 3. Recharging: a dark clock sweep with the seconds. Ready: glow and shine. */
#h-tactics .tbtn.tac { overflow: visible; isolation: isolate; }
#h-tactics .tbtn.tac::after { height: 5px; box-shadow: 0 1px #0009; }
#h-tactics .tac .cd { inset: 0; height: auto; z-index: 2; background: conic-gradient(#050505e0 calc(var(--cd, 0) * 1turn), transparent 0); }
#h-tactics .tac .tring { position: absolute; inset: -4px; z-index: 3; padding: 4px; opacity: 0; pointer-events: none;
  background: conic-gradient(var(--ab) calc(var(--left, 0) * 1turn), #000000c8 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
#h-tactics .tac .ts { position: absolute; inset: 0 0 11px; z-index: 4; display: grid; place-items: center; pointer-events: none;
  font: 400 21px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
#h-tactics .tac .ts:empty { display: none; }
#h-tactics .tac .tsh { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
#h-tactics .tac.cool > .wi { opacity: .4; filter: grayscale(.7); }
#h-tactics .tac .tl { z-index: 4; }
#h-tactics .tac.cool { background: color-mix(in srgb, var(--ab) 34%, #12100d); } /* the charged part shows the colour, so the sweep reads */
#h-tactics .tac.cool .tl { color: #d4cdc1; text-shadow: 1px 1px 0 #000; }
#h-tactics .tac.active { background: color-mix(in srgb, var(--ab) 46%, #0c0b0a); box-shadow: 0 0 18px color-mix(in srgb, var(--ab) 75%, transparent), 0 2px #0008; }
#h-tactics .tac.active .tring { opacity: 1; }
#h-tactics .tac.active > .wi { opacity: .45; }
#h-tactics .tac.active .tl { color: #fff; text-shadow: 1px 1px 0 #000; }
#h-tactics .tac.active .ts { font-size: 25px; }
#h-tactics .tac.low .tring, #h-tactics .tac.low .ts { animation: tac-blink .5s steps(1) infinite; }
#h-tactics .tac.low { background: color-mix(in srgb, #e0242d 40%, #0c0b0a); }
#h-tactics .tac.ready { box-shadow: 0 0 0 2px var(--ab), 0 0 14px color-mix(in srgb, var(--ab) 80%, transparent), 0 2px #0008; animation: tac-ready 1.6s ease-in-out infinite; }
#h-tactics .tac.ready .tl { color: #fff; }
#h-tactics .tac.ready .tsh::before { content: ''; position: absolute; top: -30%; bottom: -30%; left: -70%; width: 45%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, #ffffffa8 50%, transparent); animation: tac-shine 2.6s ease-in-out infinite; }
@keyframes tac-blink { 50% { opacity: .12; } }
@keyframes tac-ready { 50% { box-shadow: 0 0 0 2px var(--ab), 0 0 26px var(--ab), 0 2px #0008; } }
@keyframes tac-shine { 0% { left: -70%; } 50%, 100% { left: 140%; } }

/* Your running tactics, stamped at the top centre under the clock (Hud.tacticBar places it): name, seconds, a draining bar. */
.tacbar { position: absolute; top: calc(var(--safe-t) + 68px); left: 50%; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translateX(-50%); }
#hud > .tacbar { pointer-events: none; } /* taps go through to the map (#hud > * turns them back on) */
.tstamp { position: relative; display: flex; align-items: center; gap: 5px; padding: 3px 5px 7px 6px; color: var(--ai, #15120d); background: var(--ab);
  border: 2px solid #0b0a08; box-shadow: 3px 3px 0 #0b0a08, inset 0 0 0 1px #ffffff55; transform: rotate(-2deg);
  font: 400 19px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; animation: tac-stamp .34s cubic-bezier(.2, 1.5, .4, 1) both; }
.tstamp .wi { width: 20px; height: 20px; filter: drop-shadow(0 1px 0 #0009); }
.tstamp b { font-weight: 400; }
.tstamp em { min-width: 2.4ch; padding: 2px 5px 1px; font-style: normal; text-align: center; color: var(--ab); background: #0b0a08; font-variant-numeric: tabular-nums; }
.tstamp .tdrain { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 3px; background: #0000004d; }
.tstamp .tdrain i { display: block; height: 100%; background: var(--ai, #15120d); transform-origin: left center; }
.tstamp.low { animation: tac-low .5s steps(1) infinite; }
@keyframes tac-stamp { 0% { opacity: 0; transform: scale(1.5) rotate(-9deg); } 100% { opacity: 1; transform: rotate(-2deg); } }
@keyframes tac-low { 50% { color: var(--ab); background: #0b0a08; } }
body.tac-on .banner { top: calc(var(--tacB, calc(var(--safe-t) + 110px)) + 8px); }
@media (min-width: 900px) {
  .tstamp { gap: 7px; padding: 4px 6px 8px 8px; font-size: 25px; box-shadow: 4px 4px 0 #0b0a08, inset 0 0 0 1px #ffffff55; }
  .tstamp .wi { width: 26px; height: 26px; }
}
/* Phones: icon, then the name over the seconds, so it fits between the clock and the leaderboard. */
@media (max-width: 520px) {
  .tstamp { display: grid; grid-template-columns: auto auto; column-gap: 5px; row-gap: 2px; align-items: center; padding: 4px 7px 8px 5px; font-size: 14px; }
  .tstamp .wi { grid-row: 1 / 3; width: 24px; height: 24px; }
  .tstamp em { justify-self: start; font-size: 20px; padding: 2px 5px 0; }
}
@media (prefers-reduced-motion: reduce) {
  #h-tactics .tac.ready, #h-tactics .tac.low .tring, #h-tactics .tac.low .ts, #h-tactics .tac .tsh::before, .tstamp, .tstamp.low { animation: none; }
  .tstamp.low { outline: 2px solid #e0242d; }
}
/* ---------- Armory marks (Gage 10-20): five levels per weapon and doctrine, the fifth golden ---------- */
.pips i.gold { background: #2c2617; box-shadow: inset 0 0 0 1px #d9a53188; transform: rotate(45deg) scale(.86); }
.pips i.gold.on { background: linear-gradient(135deg, #fff1b8, #f2c14e 45%, #b8862e); box-shadow: 0 0 6px #ffd36e99; }
.lv-stamp { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 6px 0; margin-right: 2px; border: 2px solid #c9bfae; color: #f2eee6;
  font: 400 15px/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 2px 2px 0 #000; white-space: nowrap; }
.tac .lv-stamp b, .perk .lv-stamp b, .lv-stamp b { font: inherit; text-transform: inherit; color: inherit; text-shadow: none; }
.lv-stamp small { font: inherit; font-size: 12px; color: #a49a8e; letter-spacing: .04em; }
.lv-stamp.gold { color: #2a1d05; border-color: #fff1b8; background: linear-gradient(170deg, #ffe08a, #d9a531); box-shadow: 2px 2px 0 #6a4b0d; }
.lv-stamp.gold small { color: #5a4210; }
.perk small .lv-stamp { display: flex; width: max-content; margin: 4px 0 6px; }
/* The upgrade plate (Gage 10-21): not the XP badge. A stamped steel plate with notched corners, the mark in Roman
   numerals, and chevrons under it that fill as you upgrade (IV and V in gold); golden at the top level. No fixed height,
   so the card has no gap under it. */
.mk-plate { position: relative; display: inline-grid; justify-items: start; row-gap: 3px; flex: none; margin-right: 4px; padding: 3px 8px 4px 10px; color: #f2eee6;
  background: linear-gradient(175deg, #4a4f55, #2a2d31 55%, #1d1f22); border: 1px solid #0b0a08; box-shadow: inset 0 1px #ffffff2e, inset 0 -1px #00000080, 2px 2px 0 #000;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); vertical-align: middle; }
.mk-plate::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #e0242d; }
.mk-plate::after { content: ''; position: absolute; right: 4px; top: 4px; width: 3px; height: 3px; border-radius: 50%; background: #9aa3ab; box-shadow: 0 0 0 1px #0008; }
.mk-plate b { font: 400 15px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: inherit; text-shadow: 1px 1px 0 #000; }
.tac .mk-plate b, .perk .mk-plate b { font: 400 15px/1 var(--display); text-transform: uppercase; }
.mk-pips { display: flex; gap: 2px; }
.mk-pips i { width: 10px; height: 6px; background: #121110; clip-path: polygon(0 0, 65% 0, 100% 50%, 65% 100%, 0 100%, 35% 50%); }
.mk-pips i.on { background: #e0242d; }
.mk-pips i.gem { background: #2c2617; } .mk-pips i.gem.on { background: linear-gradient(135deg, #fff1b8, #f2c14e 45%, #b8862e); }
.mk-plate.none b { color: #a49a8e; }
.mk-plate.gold { color: #2a1d05; background: linear-gradient(170deg, #fff1b8, #f2c14e 40%, #b8862e); box-shadow: inset 0 1px #fffbe6, 2px 2px 0 #6a4b0d; }
.mk-plate.gold::before { background: #6a4b0d; } .mk-plate.gold b { text-shadow: 0 1px 0 #fff6d0; }
.mk-plate.gold .mk-pips i { background: #6a4b0d; } .mk-plate.gold .mk-pips i.on { background: #2a1d05; }
.perk small .mk-plate { display: inline-grid; margin: 4px 6px 4px 0; }
.up-step .mk-plate b { font-size: 20px; } .ab-where .mk-plate b { font-size: 17px; }
/* Gems-only marks: one cyan-edged button with the price and a stamped note under it. */
.btn.gem-only { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 48px; border: 1px solid #3fd0e0aa; box-shadow: 0 3px #0b3a40, inset 0 1px #a6ecf633; }
.btn.gem-only small { font: 400 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #a6ecf6; }
.btn.gold.gem-only { border-color: #fff1b8; box-shadow: 0 3px #6a4b0d, inset 0 1px #fff8d8; }
.btn.gold.gem-only small { color: #5a4210; }
.btn.short { opacity: .55; filter: saturate(.6); }
.tag.gold-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px 3px; color: #2a1d05; background: linear-gradient(170deg, #ffe08a, #d9a531); box-shadow: 2px 2px 0 #6a4b0d; transform: rotate(-3deg); }
.tag.gold-tag .wi { width: 16px; height: 16px; }
/* A golden card: gold frame, warm wash and a shine that sweeps across it now and then. */
.tac.gold, .perk.gold { position: relative; isolation: isolate; overflow: hidden; margin: 6px -8px; padding: 10px 8px; border: 2px solid #d9a531;
  background: linear-gradient(115deg, #3a2c12, #1c1710 60%, #2b2110); box-shadow: 3px 3px 0 #000, inset 0 0 0 1px #fff1b833; }
.tac.gold + .tac, .perk.gold + .perk { border-top-color: transparent; }
.tac.gold > b, .perk.gold > b { color: #ffd36e; text-shadow: 1px 2px 0 #3a2a08; }
.tac.gold::after, .perk.gold::after { content: ''; position: absolute; z-index: -1; top: -2px; bottom: -2px; left: 0; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, #fff1b830 40%, #fff8d84d 50%, #fff1b830 60%, transparent); transform: translateX(-140%) skewX(-18deg); animation: gold-shine 3.6s ease-in-out infinite; }
.tac.gold .ab, .perk.gold .ab { outline-color: #ffd36e; }
.tac.gold .pips i.on, .perk.gold .pips i.on { background: linear-gradient(135deg, #fff1b8, #f2c14e 45%, #b8862e); }
.tac .stats { row-gap: 5px; align-items: center; }
@keyframes gold-shine { 0%, 55% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(400%) skewX(-18deg); } } /* transform only: no layout per frame */
.wrow b small { white-space: nowrap; } .wrow.gold b small { color: #ffd36e; } /* "Golden Mk V" never splits */
/* The preview sheet and the upgrade confirm */
.ab-where { display: flex; align-items: center; gap: 4px; margin: 10px 0 0; }
.ab-where .pips i { width: 12px; height: 12px; }
.ab-sheet.gold, .up-confirm.gold { border-color: #d9a531; box-shadow: 0 0 0 2px #000, 0 0 0 4px #d9a531, 6px 8px 0 #000; }
.ab-sheet.gold h2, .up-confirm.gold h2 { color: #ffd36e; }
.ab-sheet.gold .ab-where .pips i.on { background: linear-gradient(135deg, #fff1b8, #f2c14e 45%, #b8862e); }
.sheet-box .gold-note { color: #ffd36e; font: 400 18px var(--display); letter-spacing: .06em; text-transform: uppercase; }
.up-confirm .ab-head { display: flex; gap: 12px; align-items: center; }
.up-confirm .ab-head .ab { width: 52px; height: 52px; } .up-confirm .ab-head .ab .wi { width: 40px; height: 40px; }
.up-confirm .ab-head small { font: 400 14px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.up-confirm.gold .ab-head small { color: #f2c84b; }
.up-confirm h2 { margin: 0; }
.up-step { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; }
.up-step .lv-stamp { font-size: 20px; }
.up-arrow { font: 400 26px/1 var(--display); color: #8fe08a; }
.up-confirm > .pips { margin: 2px 0 10px; } .up-confirm > .pips i { width: 12px; height: 12px; }
.sheet-box .up-gold-note { margin: 10px 0 0; color: #ffd36e; font-size: 14px; line-height: 1.35; }
.sheet-box .up-cost { display: flex; align-items: center; gap: 6px; margin: 12px 0; color: var(--muted); font-size: 15px; }
.up-cost .wi { width: 20px; height: 20px; } .up-cost b { font: 400 22px var(--display); color: var(--fg); }
.up-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 10px 0 2px; padding: 0; list-style: none; }
.up-ladder li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px 3px; min-width: 0; background: #141210; border: 1px solid #5a4b3966; box-shadow: 2px 2px 0 #000; }
.up-ladder b { font: 400 15px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--fg); }
.up-ladder span { display: inline-flex; align-items: center; gap: 2px; font: 400 13px/1 var(--display); letter-spacing: .02em; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.up-ladder span .wi { width: 12px; height: 12px; }
.up-ladder li.own { background: #1d1a16; border-color: #8a7254aa; } .up-ladder li.own span { color: #8fe08a; }
.up-ladder li.here { border: 2px solid var(--red); } .up-ladder li.here span { color: #fff; }
.up-ladder li.gold { border: 1px dashed #d9a531; } .up-ladder li.gold b { color: #ffd36e; }
.up-ladder li.gold.own { border: 2px solid #fff1b8; background: linear-gradient(170deg, #ffe08a, #d9a531); } .up-ladder li.gold.own b, .up-ladder li.gold.own span { color: #2a1d05; }
.sheet-box .up-ladder-note { margin: 2px 0 0; font: 400 13px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #a6ecf6; }
@media (prefers-reduced-motion: reduce) { .tac.gold::after, .perk.gold::after { animation: none; display: none; } }

/* ---------- Campaign: the war countdown, Enter the War, the Major Battle line (js/war.js) ---------- */
.war-count { position: relative; text-align: center; padding: 10px 6px 12px; background: linear-gradient(#1f1813, #130e0b); border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #4a3826, 3px 4px 0 #0d0b09; overflow: hidden; }
.war-count::after { content: ''; position: absolute; inset: 5px; border: 1px dashed #7a5a4466; pointer-events: none; }
.war-count em { display: block; margin-bottom: 7px; font: 400 14px var(--display); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: #f27661; }
.wc { display: inline-flex; align-items: flex-start; justify-content: center; gap: 5px; }
.wc-u { display: grid; justify-items: center; gap: 4px; min-width: 56px; }
.wc-u b { padding: 2px 7px 0; font: 400 54px/1.02 var(--display); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 3px 3px #7a1d20;
  background: linear-gradient(#2c231b, #17110d); border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #5d4730, 2px 3px 0 #0d0b09; transform: rotate(-1.6deg); }
.wc-u:nth-of-type(even) b { transform: rotate(1.4deg); }
.wc-u small { font: 400 11px var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.wc-sep { padding-top: 7px; font: 400 40px/1.1 var(--display); font-style: normal; color: #f27661; }
.wc-room { gap: 3px; }
.wc-room .wc-u { min-width: 0; gap: 1px; }
.wc-room .wc-u b { padding: 1px 5px 0; font-size: 27px; text-shadow: 2px 2px #7a1d20; box-shadow: inset 0 0 0 1px #5d4730, 1px 2px 0 #0d0b09; transform: none !important; }
.wc-room .wc-u small { font-size: 9px; letter-spacing: .14em; }
.wc-room .wc-sep { padding-top: 2px; font-size: 24px; }
.wc-short { font-variant-numeric: tabular-nums; }

.war-enter { position: relative; isolation: isolate; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 112px; padding: 20px 12px 12px; overflow: hidden; text-align: center; color: #fff; cursor: pointer;
  background: radial-gradient(ellipse at 50% 130%, #ff7a3066, transparent 62%), linear-gradient(100deg, #1d3d73 0%, #3a1519 30%, #5c1519 50%, #3a1519 70%, #7a201c 100%);
  border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #ffd36e90, inset 0 0 0 4px #0d0b09aa, 4px 5px 0 #0d0b09; animation: we-breath 3.4s ease-in-out infinite; }
.war-enter::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; z-index: 2; background: repeating-linear-gradient(-45deg, #ffd36e 0 8px, #15120e 8px 16px); border-bottom: 2px solid #0d0b09; }
.war-enter::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background-image: radial-gradient(#0000004d 1px, transparent 1.6px); background-size: 6px 6px; }
.war-enter:active { transform: translate(2px, 3px); box-shadow: inset 0 0 0 1px #ffd36e90, inset 0 0 0 4px #0d0b09aa, 2px 2px 0 #0d0b09; filter: brightness(1.12); }
.we-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.we-ridge { fill: #0d0b09; opacity: .62; } .we-wire { fill: none; stroke: #0d0b09; stroke-width: 1.8; stroke-linecap: round; opacity: .8; }
.we-beam { fill: #fff; opacity: .1; transform-origin: 50% 100%; animation: we-beam 5s ease-in-out infinite; } .we-beam.b2 { animation-delay: -2.5s; }
.we-flag .war-flag { width: 50px; height: 31px; box-shadow: 0 0 0 2px #0d0b09, 3px 4px 0 2px #0d0b09; }
.we-flag.us .war-flag { transform: rotate(-6deg); } .we-flag.ca .war-flag { transform: rotate(6deg); }
.we-mid { display: grid; justify-items: center; gap: 3px; min-width: 0; }
.we-rifles .wi { width: 46px; height: 46px; filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 9px #ffb04ccc); }
.we-mid b { font: 400 34px/.95 var(--display); letter-spacing: .05em; white-space: nowrap; text-transform: uppercase; text-shadow: 3px 3px 0 #6e1519, 0 0 20px #ff7a3070; transform: rotate(-1.5deg); }
.we-mid small { max-width: 100%; padding: 3px 9px 2px; font: 400 14px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #ffdcaa; background: #0d0b09b8; border: 1px solid #ffd36e66; }
@keyframes we-breath { 50% { box-shadow: inset 0 0 0 1px #ffd36e, inset 0 0 0 4px #0d0b09aa, 4px 5px 0 #0d0b09, 0 0 18px #ff6a3055; } }
@keyframes we-beam { 0%, 100% { transform: rotate(-5deg); opacity: .05; } 50% { transform: rotate(5deg); opacity: .14; } }
.kp-ember { width: 5px; height: 5px; margin: -2px 0 0 -2px; border-radius: 50%; background: radial-gradient(#fff4c8, #ff9a3c 60%, #e0242d); box-shadow: 0 0 8px #ff7a30; animation-name: kp-up; }
@keyframes kp-up { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) - 46px)) scale(.3); opacity: 0; } }
.war-major { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: #14100d; border: 1px solid #3b2c1c; box-shadow: 2px 3px 0 #0d0b09; }
.war-major .wi { width: 26px; height: 26px; }
.war-major b { display: block; font: 400 16px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.war-major small { display: block; font-size: 12px; color: #d9cdb8; }
.war-major small .wc-short { display: inline; color: #fff; }
.war-major em { margin-left: auto; padding: 2px 8px; font: 400 13px var(--display); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: #b5232a; border: 1px solid #ffd36e; transform: rotate(-2deg); }
.war-major.live { border-color: #b5232a; background: linear-gradient(90deg, #3a1210, #14100d); animation: wr-urgbox 1.6s ease-in-out infinite; }
.war-major.soon { border-color: #8a6420; }
@media (max-width: 350px) { .wc-u b { font-size: 44px; } .wc-u { min-width: 48px; } .we-mid b { font-size: 27px; } .we-flag .war-flag { width: 40px; height: 25px; } }

/* ---------- The War Room (js/warroom.js): body.war-room hides every other UI element ---------- */
body.war-room #home, body.war-room #hud, body.war-room #promo-dock, body.war-room #map, body.war-room #shade, body.war-room #cine-cap { visibility: hidden; }
.wr { position: fixed; inset: 0; z-index: 20; overflow: hidden; color: #f2eee6; background: #08101a; touch-action: none; --us: #4f86de; --ca: #d8423a; --gold: #ffd36e; }
.wr[hidden] { display: none; }
.wr-stage { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.wr-stage:active { cursor: grabbing; }
.wr-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 58%, transparent 52%, #03060ab0 100%); }
#wr-cv, #wr-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#wr-fx { pointer-events: none; }
.wr-pins { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wr-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: grid; gap: 5px; padding: calc(var(--safe-t) + 6px) 10px 12px; pointer-events: none;
  background: linear-gradient(#0a0e13f5 0%, #0a0e13e6 70%, #0a0e1300); }
.wr-top > * { pointer-events: auto; }
.wr-bar { display: flex; align-items: center; gap: 10px; }
.wr-x { display: flex; align-items: center; gap: 2px; padding: 7px 11px 7px 5px; font: 400 15px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #f2eee6; background: #1a1714; border: 1px solid #0d0b09; box-shadow: inset 0 0 0 1px #4a3826, 2px 3px 0 #0d0b09; cursor: pointer; }
.wr-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; }
.wr-clock { flex: 1; display: grid; justify-items: end; gap: 2px; min-width: 0; }
.wr-clock small { font: 400 12px var(--display); letter-spacing: .2em; text-transform: uppercase; color: #f27661; }
.wr-off { font: 400 11px var(--display); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wr-split { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
.wr-split .war-flag, .wr-you .war-flag { width: 32px; height: 20px; box-shadow: 0 0 0 2px #0d0b09, 2px 2px 0 2px #0d0b09; }
.wr-sbar { position: relative; height: 21px; background: var(--ca); border: 2px solid #0d0b09; box-shadow: 2px 3px 0 #0d0b09; overflow: hidden; }
.wr-sbar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: var(--us); box-shadow: 3px 0 0 var(--gold); }
.wr-sbar b { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; padding: 0 9px; font: 400 15px var(--display); letter-spacing: .06em; color: #fff; text-shadow: 1px 1px #000; }
.wr-sbar b:last-child { right: 0; }
.wr-you { display: grid; grid-template-columns: auto auto 1fr 1.2fr; gap: 10px; align-items: center; padding: 4px 9px 5px; background: #15110e; border: 2px solid #0d0b09; border-left: 6px solid var(--us); box-shadow: inset 0 0 0 1px #3b2c1c, 2px 3px 0 #0d0b09; }
.wr-you.ca { border-left-color: var(--ca); }
.wr-you small { display: block; font: 400 10px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.wr-you b { display: block; font: 400 22px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.wy-pos b { display: inline-block; padding: 2px 7px 1px; color: var(--gold); border: 2px solid var(--gold); transform: rotate(-2deg); }
.wy-lv b::before { content: 'LV '; font-size: 13px; color: var(--muted); }
.wy-rk b { color: var(--gold); font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-meter { display: block; height: 5px; margin-top: 3px; background: #0d0b09; border: 1px solid #3b2c1c; }
.wr-meter i { display: block; height: 100%; background: #e6dccb; } .wr-meter.gold i { background: var(--gold); }
.wr-majorline { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 10px; text-align: left; font: 400 14px var(--display); letter-spacing: .06em; text-transform: uppercase; color: #f2eee6; background: linear-gradient(90deg, #3a1210, #17100d); border: 1px solid #0d0b09; box-shadow: inset 0 0 0 1px #8f2a22, 2px 3px 0 #0d0b09; }
.wr-majorline .wi { width: 20px; height: 20px; } .wr-majorline b { color: var(--gold); } .wr-majorline span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wr-majorline .wc-short { color: #fff; }
.wr-majorline em { padding: 1px 7px; font-style: normal; font-size: 12px; letter-spacing: .12em; color: #fff; background: #b5232a; border: 1px solid var(--gold); transform: rotate(-2deg); }
.wr-majorline.live { animation: wr-urgbox 1.5s ease-in-out infinite; }
.wr-key { position: absolute; left: 10px; bottom: calc(var(--safe-b) + 90px); z-index: 2; display: grid; gap: 3px; font: 400 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #e6dccb; text-shadow: 1px 1px #000; pointer-events: none; }
.wr-key i { display: inline-block; width: 14px; height: 5px; margin-right: 6px; vertical-align: middle; }
.wr-key .k-vote { height: 8px; background: repeating-linear-gradient(45deg, #ffffffb0 0 2px, transparent 2px 4px); outline: 1px solid #ffffff66; }
.wr-key .k-hot { width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: radial-gradient(#ffd27a, #ff6a30); box-shadow: 0 0 6px #ff8a3c; }
.wr-lab { position: absolute; right: 10px; bottom: calc(var(--safe-b) + 88px); z-index: 2; display: flex; align-items: center; gap: 6px; padding: 7px 11px 6px 8px; font: 400 14px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #f2eee6; background: #15110e; border: 1px solid #0d0b09; box-shadow: inset 0 0 0 1px #4a3826, 2px 3px 0 #0008; cursor: pointer; }
.wr-lab .wi { width: 20px; height: 20px; }

/* the battle plates: name, players, the big bar, badges, urgent */
.wr-pin { position: absolute; left: 0; top: 0; width: 142px; padding: 17px 0 0; text-align: left; color: #f2eee6; font-family: var(--display); background: none; border: 0; cursor: pointer; pointer-events: auto; will-change: transform; }
.wr-pin.big { width: 188px; }
.wr-pin.sel { visibility: hidden; }
.wp-top { position: absolute; left: 3px; right: 0; top: 0; height: 17px; display: flex; justify-content: space-between; align-items: flex-end; gap: 4px; padding-bottom: 1px; pointer-events: none; }
.wp-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; margin-left: auto; }
.wr-pin:not(.big) .wp-badges u:nth-child(n+3) { display: none; }
.wr-pin u, .wr-card u { display: inline-block; text-decoration: none; padding: 2px 5px 1px; font: 400 11px/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; background: #120c08; border: 1.5px solid currentColor; transform: rotate(-2deg); white-space: nowrap; }
.b-vote { color: var(--gold); } .b-major { color: #fff; background: #b5232a !important; border-color: var(--gold) !important; } .b-strat { color: #9fd0ff; } .b-pocket { color: #ff9c86; }
.b-urgent { display: inline-flex !important; align-items: center; gap: 3px; color: #fff; background: #d4262e !important; border-color: #fff !important; animation: wr-urg .8s steps(2) infinite; }
.b-urgent i { display: grid; place-items: center; width: 11px; height: 11px; border-radius: 50%; font: 700 9px/1 var(--body); font-style: normal; color: #d4262e; background: #fff; }
.wp-body { display: grid; gap: 3px; padding: 5px 6px 5px 7px; background: linear-gradient(#1c1713f4, #100c09f4); border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #4a3826, 2px 3px 0 #0009; }
.wr-pin.att-us .wp-body { border-left: 5px solid var(--us); } .wr-pin.att-ca .wp-body { border-left: 5px solid var(--ca); }
.wr-pin.hot .wp-body { box-shadow: inset 0 0 0 1px #ffb066, 0 0 14px #ff8a3c90, 2px 3px 0 #0009; }
.wr-pin.urgent .wp-body { border-color: #d4262e; animation: wr-urgbox 1s ease-in-out infinite; }
.wp-row { display: flex; align-items: center; gap: 5px; }
.wp-row .wi { width: 18px; height: 18px; }
.wp-row b { flex: 1; min-width: 0; font: 400 16px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-n { display: inline-flex; align-items: center; gap: 2px; font: 400 15px/1 var(--display); color: var(--gold); }
.wp-n .wi { width: 14px; height: 14px; }
.wp-type { display: none; font: 400 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #bfae92; }
.wr-pin.big .wp-type { display: block; }
.wr-pbar { position: relative; display: block; height: 16px; background: var(--ca); border: 1.5px solid #0d0b09; overflow: hidden; }
.wr-pbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--us); box-shadow: 2px 0 0 var(--gold); }
.wr-pbar em { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; padding: 0 5px; font: 400 13px var(--display); font-style: normal; color: #fff; text-shadow: 1px 1px #000; }
.wr-pbar .l { left: 0; } .wr-pbar .r { right: 0; }
.wr-pbar s { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: repeating-linear-gradient(#fff 0 3px, transparent 3px 5px); }
.wp-foot { display: flex; justify-content: space-between; align-items: center; font: 400 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #d9cdb8; }
.wp-foot em { padding: 1px 5px 0; font-style: normal; } .wp-foot .atk { color: #1a1208; background: var(--gold); } .wp-foot .def { color: #fff; background: #3d3731; }
@keyframes wr-urg { 50% { background: #7a1519; } }
@keyframes wr-urgbox { 50% { box-shadow: inset 0 0 0 1px #ff5b52, 0 0 16px #ff3a2e99, 2px 3px 0 #0009; } }

/* the selected battle's card, attached to its pin */
.wr-card { position: absolute; left: 0; top: 0; z-index: 4; width: min(318px, calc(100vw - 16px)); padding: 12px; background: linear-gradient(#211a15, #14100d); border: 2px solid #0d0b09; border-top: 6px solid var(--us); box-shadow: inset 0 0 0 1px #5a4630, 4px 5px 0 #000a; will-change: transform; }
.wr-card[hidden] { display: none; }
.wr-card.att-ca { border-top-color: var(--ca); }
.wc-tail { position: absolute; left: var(--tx, 50%); top: -26px; margin-left: -12px; width: 0; height: 0; border: 12px solid transparent; border-top-width: 0; border-bottom-color: #0d0b09; pointer-events: none; }
.wc-tail::after { content: ''; position: absolute; left: -8px; top: 4px; border: 8px solid transparent; border-top-width: 0; border-bottom-color: var(--gold); }
.wr-card.up .wc-tail { top: auto; bottom: -22px; border-top-width: 12px; border-bottom-width: 0; border-top-color: #0d0b09; border-bottom-color: transparent; }
.wr-card.up .wc-tail::after { top: auto; bottom: 4px; border-top-width: 8px; border-bottom-width: 0; border-top-color: var(--gold); border-bottom-color: transparent; }
.wc-x { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; font-size: 24px; line-height: 1; color: #d9cdb8; background: #0f0c0a; border: 1px solid #3b2c1c; cursor: pointer; }
.wc-head { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding-right: 34px; }
.wc-head .wi { width: 38px; height: 38px; }
.wc-head em { display: block; font: 400 11px var(--display); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: #f27661; }
.wc-head h3 { margin: 0; font: 400 24px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.wc-place { display: block; margin-top: 2px; font: 400 15px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.wc-sides { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; font: 400 17px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.wc-sides .war-flag { width: 24px; height: 15px; box-shadow: 0 0 0 1.5px #0d0b09; } .wc-sides i { font-style: normal; color: var(--gold); font-size: 13px; }
.wc-sides small { color: var(--muted); font-size: 11px; letter-spacing: .1em; } .wc-sides b { font-weight: 400; }
.wc-sides span { display: inline-flex; align-items: center; gap: 5px; }
.wc-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .wc-badges u { font-size: 12px !important; }
.wc-urgent { display: flex; align-items: center; gap: 8px; margin-top: 7px; padding: 4px 8px; color: #fff; background: #4a0f12; border: 1px solid #ff5b52; animation: wr-urgbox 1s ease-in-out infinite; }
.wc-urgent i { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; font: 700 14px/1 var(--body); font-style: normal; color: #d4262e; background: #fff; }
.wc-urgent b { flex: none; font: 400 19px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; } .wc-urgent span { font-size: 12px; line-height: 1.2; color: #ffd7d3; }
.wc-bar { margin-top: 8px; }
.wc-bar .wr-pbar { height: 24px; } .wc-bar .wr-pbar em { font-size: 17px; padding: 0 8px; }
.wc-bar small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.wc-stats { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 6px; margin-top: 8px; }
.wc-stats div { padding: 4px 3px 4px; text-align: center; background: #0f0c0a; border: 1px solid #2c2219; }
.wc-stats b { display: block; font: 400 22px/1 var(--display); } .wc-stats .up b { color: var(--gold); }
.wc-stats small { display: block; margin-top: 2px; white-space: nowrap; font-size: 10px; line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wc-rules { display: grid; gap: 3px; margin: 8px 0 0; padding: 0; list-style: none; }
.wc-rules li { position: relative; padding-left: 13px; font-size: 12.5px; line-height: 1.2; color: #e6dccb; }
.wc-rules li::before { content: ''; position: absolute; left: 1px; top: .5em; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.wc-ready { display: block; width: 100%; margin-top: 10px; padding: 8px 10px 7px; text-align: center; color: #fff; cursor: pointer; background: linear-gradient(110deg, #b5232a, #e23a36 55%, #b31f27); border: 2px solid #0d0b09; box-shadow: inset 0 0 0 2px #ffb294a0, inset 0 -5px 0 #7a1519, 3px 4px 0 #0d0b09; }
.wc-ready b { display: block; font: 400 36px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-shadow: 2px 3px #6e1519; }
.wc-ready small { display: block; margin-top: 3px; font: 400 14px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #ffe5cc; }
.wc-ready:active { transform: translate(2px, 3px); box-shadow: inset 0 0 0 2px #ffb294a0, inset 0 -3px 0 #7a1519, 1px 1px 0 #0d0b09; }
@media (max-height: 720px) { .wc-rules li { font-size: 12px; } .wc-ready b { font-size: 30px; } .wr-card { padding: 8px 10px; } .wc-stats b { font-size: 19px; } .wc-head .wi { width: 30px; height: 30px; } .wc-head h3 { font-size: 21px; } }

/* ready up: the room fades, speed streaks carry you in, the lobby sits over them */
.wr-warp { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.wr.warping .wr-warp, .wr.arriving .wr-warp { opacity: 1; }
.wr.warping .wr-top, .wr.warping .wr-key, .wr.warping .wr-lab, .wr.warping .wr-pins, .wr.warping .wr-card, .wr.warping .wr-dock, .wr.warping .wr-aimbar, .wr.warping .wr-sheet, .wr.warping .wr-cine { opacity: 0; transition: opacity .3s; pointer-events: none; }
.wr.warping .wr-stage { pointer-events: none; }
.wr.carded .wr-key, .wr.carded .wr-lab { opacity: 0; pointer-events: none; }
.wr.arriving { background: transparent; }
.wr.arriving .wr-stage, .wr.arriving .wr-top, .wr.arriving .wr-key, .wr.arriving .wr-lab, .wr.arriving .wr-card, .wr.arriving .wr-dock, .wr.arriving .wr-aimbar, .wr.arriving .wr-sheet, .wr.arriving .wr-cine { display: none; }
.wr-lobby { position: absolute; left: 0; right: 0; top: 50%; z-index: 7; transform: translateY(-50%); display: grid; justify-items: center; padding: 0 16px; text-align: center; pointer-events: none; }
.wr-lobby[hidden] { display: none; }
.wr-lobbybox { align-items: center; gap: 8px; width: 100%; max-width: 420px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; animation: none; overflow: visible; text-align: center; }
.wr-lobbybox .mm-head { display: grid; gap: 4px; }
.wr-lobbybox .radar, .wr-lobbybox .roster { display: none; }
.wr-lobbybox h2 { font: 400 46px/.95 var(--display); letter-spacing: .04em; color: #fff; text-shadow: 3px 4px #000, 0 0 26px #000; }
.wr-lobbybox .mm-head small { display: block; font: 400 24px var(--display); letter-spacing: .16em; color: var(--gold); text-shadow: 2px 2px #000, 0 0 14px #000; }
.wr-lobbybox .mm-fill { width: min(300px, 74vw); margin: 10px auto 4px; height: 12px; box-shadow: inset 0 0 0 2px #0d0b09, 0 0 0 2px #ffd36e77; }
.wr-lobbybox .mm-seats { font-size: 36px; color: #fff; text-shadow: 2px 3px #000; }
.wr-lobbybox #mm-cancel { pointer-events: auto; margin-top: 10px; min-width: 150px; color: #f2eee6; background: #14100dcc; border: 1px solid #ffd36e88; box-shadow: 2px 3px 0 #000a; }
.wr.calm *, .wr.calm *::before, .wr.calm *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .war-enter, .we-beam, .war-major.live, .wr * { animation: none !important; } }
@media (max-width: 380px) { .wr-you { grid-template-columns: auto auto 1fr 1fr; gap: 7px; } .wy-pos b { font-size: 18px; } .wc-room .wc-u b { font-size: 23px; } .wr-key { display: none; } }
@media (min-width: 800px) { .wr-top { padding-left: max(10px, calc(50% - 380px)); padding-right: max(10px, calc(50% - 380px)); } }

/* ---------- The Campaign arsenal (war battles: hud.js campStart) ---------- */
/* Its own dock group under the slider: a riveted gunmetal plate with the stamped title and the energy belt, then five
   abilities in inked frames. Ready ones light up in their colour; cooling ones darken from the top down. */
.campaign-dock { position: relative; display: flex; align-items: stretch; gap: 4px; margin: 1px 0 5px; padding: 4px; background: linear-gradient(172deg, #302e27, #17160f 70%);
  border: 1px solid #7a6a4b; box-shadow: 0 3px #0a0a08, 3px 4px 0 #050605, inset 0 1px #f0d9a826; }
.campaign-dock[hidden] { display: none; }
.campaign-dock::before, .campaign-dock::after { content: ''; position: absolute; top: 3px; width: 4px; height: 4px; border-radius: 50%; background: #8a7a5a; box-shadow: 0 0 0 1px #0a0a08, 0 43px 0 #8a7a5a, 0 43px 0 1px #0a0a08; }
.campaign-dock::before { left: 3px; } .campaign-dock::after { right: 3px; }
.camp-plate { flex: 0 0 64px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 5px 0 9px; border-right: 1px dashed #7a6a4b99; }
.camp-plate em { align-self: flex-start; padding: 1px 3px 0; font: 400 10px/1 var(--display); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #f0c870;
  border: 1px solid #b8862e; transform: rotate(-3deg); }
.camp-plate b { font: 400 21px/.9 var(--display); color: #f2eee6; text-shadow: 1px 1px 0 #000; }
.camp-gauge { position: relative; display: block; height: 7px; background: #0b0b09; box-shadow: 0 0 0 1px #5d5444; overflow: hidden; }
.camp-gauge i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8a6420, #f0c870); transition: width .3s; }
.camp-gauge::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 4px, #0b0b09 4px 5px); }
.cbtn { position: relative; flex: 1 1 0; min-width: 0; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 0 0;
  color: #cfc8b9; background: linear-gradient(175deg, #23221c, #141410); border: 1px solid #4f4838; box-shadow: inset 0 -3px #0a0a08; overflow: hidden; touch-action: manipulation; }
.cbtn::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ab); opacity: .45; }
.cbtn > .wi { width: 22px; height: 22px; }
.cbtn .cl { font: 400 11px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.cbtn .cc { position: absolute; top: 4px; right: 3px; font: 400 11px/1 var(--display); color: #d9a441; }
.cbtn .ccd { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--cd, 0) * 100%); background: #000000b8; z-index: 1; }
.cbtn .cs { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; font: 400 18px var(--display); font-style: normal; color: #f2eee6; text-shadow: 1px 1px 0 #000; }
.cbtn .cs:empty { display: none; }
.cbtn.ready { color: #fff; border-color: var(--ab); box-shadow: inset 0 -3px #0a0a08, inset 0 0 14px -6px var(--ab); }
.cbtn.ready::before { opacity: 1; }
.cbtn.poor { opacity: .6; }
.cbtn.poor .cc { color: #e0675d; }
.cbtn.cool > .wi, .cbtn.cool .cl { opacity: .55; }
.cbtn.aim { color: #fff; background: linear-gradient(175deg, #c8372d, #8e2219); border-color: #fff; box-shadow: inset 0 -3px #4e120d, 0 0 0 2px #000, 0 0 14px #e0242daa; }
.cbtn.aim .cc { color: #fff; }
.cbtn:active { transform: translateY(2px); }
@media (prefers-reduced-motion: no-preference) { .cbtn.ready > .wi { animation: camp-ready 2.4s ease-in-out infinite; } }
@keyframes camp-ready { 0%, 100% { filter: none; } 50% { filter: brightness(1.35) drop-shadow(0 0 3px var(--ab)); } }
@media (prefers-reduced-motion: reduce) { .camp-gauge i, .cbtn { transition: none; } }
.campaign-dock.calm .cbtn.ready > .wi { animation: none; }
@media (max-width: 400px) { .camp-plate { flex-basis: 54px; padding-left: 8px; } .camp-plate b { font-size: 19px; } .cbtn .cl { font-size: 10px; letter-spacing: 0; } .cbtn .cc { font-size: 10px; } }
.o-camp { display: block; margin-top: 4px; font-size: .92em; color: #d9a441; }

/* ---------- Medals (Gage 10-21: "add more medals... make them actually worth something... see them all") ----------
   Ribbon-and-metal art from js/medal-art.js, the Medal Case sheet, the profile card, ribbon racks (profile and finish
   card) and the ceremony's medal slams. Tiers: bronze #d29a68, silver #dfe5e9, gold #f2c14e; a legendary feat glows. */
.medal-art, .ribbon-art { display: block; width: 100%; height: auto; overflow: visible; }
.mc-art, .md-art { display: block; }
.hb-me { position: relative; display: block; width: 46px; height: 46px; padding: 0; }
.hb-me:active { transform: translateY(1px); }
.hb-medals { position: absolute; right: -7px; bottom: -7px; display: flex; align-items: center; gap: 1px; padding: 1px 4px 0 2px; background: #161412; border: 1px solid #d9a441aa; box-shadow: 1px 2px 0 #000a; pointer-events: none; }
.hb-medals .wi { width: 12px; height: 12px; }
.hb-medals b { font: 400 13px/1.1 var(--display); letter-spacing: .02em; color: #f2c14e; }

/* ribbons: the service rack */
.rb { display: block; position: relative; overflow: hidden; box-shadow: 1px 2px 0 #000a; }
.rb.g4 { box-shadow: 0 0 6px #f2c14e88, 1px 2px 0 #000a; }
.rb.new::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, #fff9 50%, transparent 65%); transform: translateX(-120%); animation: rb-glint 1.8s ease-in-out 1.2s 3; }
@keyframes rb-glint { to { transform: translateX(120%); } }
.rb-more { display: grid; place-items: center; font: 400 13px var(--display); letter-spacing: .05em; color: #d9c7a8; }
.rack-empty { grid-column: 1 / -1; font: 400 12px var(--body); color: var(--muted); }

/* the Medal Case */
.sheet-box.medal-case { padding: 0; gap: 0; overflow: hidden; max-width: 450px; height: calc(100% - var(--safe-t) - 10px); max-height: 860px; background: linear-gradient(180deg, #1d1a16, #121110 40%); }
.mc-head { flex: none; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 44px 10px 14px; background: url('../assets/ui/command-etch.svg') right 40% / 380px auto, linear-gradient(115deg, #33291f, #1b1a18 65%); border-bottom: 1px solid #b49b7244; }
.mc-crest svg { width: 46px; filter: drop-shadow(2px 3px 0 #000a); }
.mc-head small { font: 400 13px var(--display); letter-spacing: .18em; text-transform: uppercase; color: #d9c7a8; }
.mc-head h2 { font-size: 36px; line-height: 1; } .mc-head h2 i { font-style: normal; font-size: 20px; color: #b9ab94; letter-spacing: .04em; }
.mc-head .mc-sub { display: block; margin-top: 3px; letter-spacing: .06em; font-size: 12px; color: #9d9180; }
.mc-bar { display: block; height: 6px; margin-top: 4px; background: #0b0a09; border: 1px solid #5a4c3c; }
.mc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b5232a, #e0242d); transition: width .6s; }
.mc-bar.big { height: 8px; } .mc-bar.big i { background: linear-gradient(90deg, #b8862e, #f2c14e); }
.mc-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 16px; padding: 12px 12px 8px; }
.medal-case > #mc-close { flex: none; margin: 6px 12px 12px; }
.mc-sec h3, .mc-pins h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font: 400 22px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.mc-sec h3 small, .mc-pins h3 small { font: 400 14px var(--display); letter-spacing: .08em; color: #d9a441; }
.mc-sec > p { margin: 1px 0 8px; font-size: 12px; color: var(--muted); }
.mc-sec.legend h3 span { color: #f2c14e; }
.mc-pins h3 { margin-bottom: 8px; }
.mc-pinrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mc-pin { position: relative; isolation: isolate; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 10px 4px 8px; min-height: 150px; color: var(--fg); text-align: center; background: radial-gradient(120% 90% at 50% 20%, #3a2f20, #17150f 70%); border: 1px solid #d9a44188; box-shadow: 0 3px 0 #080908, inset 0 1px #f2d9a933; }
.mc-pin::before { content: ''; position: absolute; inset: 4px; border: 1px dashed #d9a4412e; pointer-events: none; }
.mc-pin .mc-art { width: 62px; filter: drop-shadow(2px 4px 0 #000a); }
.mc-pin.g4 { border-color: #f2c14e; background: radial-gradient(120% 90% at 50% 20%, #5a4420, #17150f 70%); }
.mc-pin.g4 .mc-art { filter: drop-shadow(0 0 10px #f2c14e99) drop-shadow(2px 4px 0 #000a); }
.mc-pin b { font: 400 15px/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.mc-pin small { font: 400 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #d9a441; }
.mc-pin.empty { align-content: center; border-style: dashed; border-color: #6a5d4a66; background: #100f0d; box-shadow: none; }
.mc-pin.empty::before { display: none; }
.mc-pin.empty small { color: #7d7466; letter-spacing: .04em; font-size: 11px; text-transform: none; font-family: var(--body); }
.mc-ghost { width: 40px; height: 60px; background: #1a1815; clip-path: polygon(30% 0, 70% 0, 66% 36%, 100% 62%, 78% 100%, 22% 100%, 0 62%, 34% 36%); }
.mc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mc-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; padding: 8px 4px 8px; color: var(--fg); text-align: center; background: linear-gradient(170deg, #26221d, #141311 70%); border: 1px solid #8a72546e; box-shadow: 0 3px 0 #080908, inset 0 1px #f2d9a91c; }
.mc-card:active { transform: translateY(1px); box-shadow: 0 2px 0 #080908; }
.mc-card .mc-art { width: 54px; filter: drop-shadow(2px 3px 0 #000a); }
.mc-card.on.g2 { border-color: #b8986a99; } .mc-card.on.g3 { border-color: #d9a441aa; } .mc-card.on.g4 { border-color: #f2c14e; background: linear-gradient(170deg, #3d3220, #17150f 75%); }
.mc-card.on.g4 .mc-art { filter: drop-shadow(0 0 8px #f2c14e88) drop-shadow(2px 3px 0 #000a); }
.mc-card.off { background: linear-gradient(170deg, #1b1a18, #11100f 70%); border-color: #4a423a66; }
.mc-card.off b { color: #b3a994; }
.mc-card b { font: 400 15px/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.mc-tier { font: 400 12px var(--display); letter-spacing: .1em; text-transform: uppercase; } .mc-tier i { font-style: normal; color: #a99c86; letter-spacing: 0; }
.mc-tier.t1 { color: #d29a68; } .mc-tier.t2 { color: #dfe5e9; } .mc-tier.t3 { color: #f2c14e; }
.mc-card.g4.on .mc-tier { color: #f2c14e; }
.mc-how { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font: 400 11px/1.2 var(--body); color: #8f8678; }
.mc-card .mc-bar { width: 86%; height: 5px; margin-top: 3px; } .mc-card.done .mc-bar i { background: #f2c14e; }
.mc-n { font: 400 11px var(--display); letter-spacing: .06em; color: #a99c86; }

/* one medal in full */
.sheet-box.medal-detail { gap: 8px; text-align: center; align-items: stretch; }
.md-hero { position: relative; display: grid; place-items: center; height: 200px; overflow: hidden; background: radial-gradient(60% 70% at 50% 45%, #3b2f1f, #14120f 75%); border: 1px solid #8a72546e; }
.md-rays { position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; margin: -190px; background: repeating-conic-gradient(from 0deg, #f2c14e1c 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 68%); mask: radial-gradient(circle, #000 15%, transparent 68%); animation: md-spin 40s linear infinite; }
@keyframes md-spin { to { transform: rotate(360deg); } }
.md-art { position: relative; width: 120px; filter: drop-shadow(3px 5px 0 #000a); animation: md-in .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes md-in { from { transform: scale(2.2) rotate(-8deg); opacity: 0; } }
.medal-detail.g4.on .md-art { filter: drop-shadow(0 0 16px #f2c14ebb) drop-shadow(3px 5px 0 #000a); }
.md-kind { font: 400 13px var(--display); letter-spacing: .2em; text-transform: uppercase; color: #d9a441; }
.medal-detail h2 { font-size: 38px; text-align: center; }
.medal-detail .md-desc { text-align: center; color: #cfc4b0; font-size: 15px; }
.md-status { display: flex; justify-content: center; align-items: baseline; gap: 10px; font: 400 14px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.md-status b { font-size: 22px; color: #f2c14e; letter-spacing: .06em; } .medal-detail.off .md-status b { color: #9a9082; }
.md-tiers { display: grid; gap: 5px; text-align: left; }
.md-tier { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 20px; gap: 8px; align-items: center; padding: 7px 8px; background: #12110f; border: 1px solid #5a4c3c55; }
.md-tier.next { border-color: #d9a441aa; background: #1d1810; } .md-tier.done { background: #14170f; border-color: #6f8f3a66; }
.md-pip { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #15120e; background: #b0703a; box-shadow: inset 2px 2px 0 #e6a872; }
.md-pip.t2 { background: #aeb6bd; box-shadow: inset 2px 2px 0 #f1f4f6; } .md-pip.t3 { background: #d9a441; box-shadow: inset 2px 2px 0 #f8de98; }
.md-t b { display: block; font: 400 18px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.md-t small { font: 400 12px var(--body); color: var(--muted); }
.md-pay { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px 8px; max-width: 150px; }
.rw { display: inline-flex; align-items: center; gap: 3px; font: 400 15px/1 var(--display); letter-spacing: .03em; color: #f2eee6; white-space: nowrap; }
.rw .art, .rw .pass-mark { width: 16px; height: 16px; }
.rw.prize { color: #f2c14e; letter-spacing: .02em; white-space: normal; text-align: right; }
.md-ck { width: 18px; height: 18px; } .md-ck .wi { width: 18px; height: 18px; }
.md-each { text-align: center; font-size: 13px !important; } .md-each b { color: #e9dcc4; font-weight: 400; }
.md-prize { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; text-align: left; background: linear-gradient(110deg, #3a2f1c, #17150f); border: 1px solid #f2c14e88; }
.md-prize.got { border-color: #6f8f3a; }
.md-prize small { display: block; font: 400 12px var(--display); letter-spacing: .14em; text-transform: uppercase; color: #d9a441; }
.md-prize b { display: block; font: 400 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.md-prize em { font: 400 12px var(--body); font-style: normal; color: #b9ab94; }
.mp-art { display: grid; place-items: center; width: 54px; height: 54px; background: #0d0c0a; border: 1px solid #5a4c3c88; }
.mp-art svg { width: 38px; height: 38px; } .md-flag { width: 44px; image-rendering: pixelated; } .md-sw { width: 34px; height: 34px; border: 2px solid #000; }
.mp-art b { font: 400 30px/1 var(--display); color: #f2c14e; }

/* the profile card */
.sheet-box.profile-sheet { gap: 10px; }
.pf-top { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-right: 30px; }
.pf-top .avatar { width: 64px; height: 64px; background: #0b0e0c; outline: 1px solid #b6a18067; outline-offset: 2px; }
.pf-id { min-width: 0; display: grid; gap: 4px; justify-items: start; }
.pf-name { max-width: 100%; text-align: left; font: 400 30px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 2px #070907; }
.pf-title { padding: 1px 8px 0; font: 400 14px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #1b1405; background: #f2c14e; box-shadow: 2px 2px 0 #000; }
.pf-title.none { color: #9a9082; background: transparent; border: 1px dashed #6a5d4a; box-shadow: none; }
.pf-lv { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px; width: 100%; font: 400 15px var(--display); color: var(--muted); } .pf-lv b { color: #fff; font-weight: 400; }
.pf-rank { display: grid; justify-items: center; gap: 1px; } .pf-rank .rank-badge { width: 30px; height: 38px; }
.pf-rank small { font: 400 12px var(--display); letter-spacing: .05em; color: #d9c7a8; text-transform: uppercase; white-space: nowrap; } .pf-rank .pf-war { color: #ffb294; }
.pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.pf-stats div { padding: 6px 4px 5px; text-align: center; background: #12110f; border: 1px solid #5a4c3c55; }
.pf-stats b { display: block; font: 400 24px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.pf-stats small { font: 400 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pf-h { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 -4px; font: 400 20px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.pf-h small { font: 400 13px var(--display); letter-spacing: .08em; color: #d9a441; }
.pf-rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 5px; padding: 9px; text-align: left; background: linear-gradient(170deg, #20241b, #131511); border: 1px solid #6f8f3a55; box-shadow: inset 0 2px 0 #0006; }
.pf-rack.static { margin: 8px 0 10px; } .pf-rack .rb { width: 100%; }
.mc-panel .mp-pins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mp-pin { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; text-align: center; background: #12110f; border: 1px solid #8a72546e; }
.mp-pin .mc-art { width: 50px; } .mp-pin b { font: 400 14px/1.05 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; } .mp-pin small { font: 400 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #d9a441; }

/* the finish card: this match's medals (one short row of art) and your ribbons */
.fin-medals { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 6px; }
.fm { position: relative; display: block; width: 32px; min-width: 0; padding: 0; background: none; border: 0; }
.fm .medal-art { width: 100%; filter: drop-shadow(1px 2px 0 #000a); }
.fm.g4 .medal-art { filter: drop-shadow(0 0 5px #f2c14e) drop-shadow(1px 2px 0 #000a); }
.fm.up::after { content: ''; position: absolute; right: -2px; top: 34px; width: 7px; height: 7px; background: #f2c14e; border: 1px solid #000; transform: rotate(45deg); }
.fm.more { display: grid; place-items: center; height: 48px; font: 400 15px var(--display); letter-spacing: .04em; color: #d9c7a8; border: 1px dashed #6a5d4a; }
.fin-rack { display: grid; gap: 4px; padding: 6px 7px; text-align: left; background: linear-gradient(170deg, #20241b, #131511); border: 1px solid #6f8f3a55; }
.fin-rack:active { filter: brightness(1.15); }
.fr-row { display: flex; flex-wrap: wrap; gap: 3px; }
.fr-row .rb { width: 32px; } .fr-row .rb-more { width: 32px; }
.fr-txt { display: flex; align-items: center; gap: 5px; font: 400 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #cfc4b0; }
.fr-txt .wi { width: 15px; height: 15px; } .fr-txt b { font-weight: 400; } .fr-txt small { margin-left: auto; color: #d9a441; font: 400 13px var(--display); }
.ffx-chip > .medal-art { width: 17px; height: auto; }

/* the ceremony */
.ffx-medals { gap: 12px 8px; max-width: 372px; align-items: flex-start; }
.ffx-medal { display: grid; justify-items: center; align-content: start; gap: 3px; width: 112px; }
.ffx-medal .medal-art { width: 94px; filter: drop-shadow(3px 5px 0 #000a); }
.ffx-medal.g4 .medal-art { filter: drop-shadow(0 0 14px #f2c14e) drop-shadow(3px 5px 0 #000a); }
.ffx-medal b { font: 400 17px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-align: center; }
.ffx-medal .tier { padding: 1px 8px 0; font: 400 13px/1.2 var(--display); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #1b1405; background: #f2c14e; box-shadow: 2px 2px 0 #000; transform: rotate(-2deg); }
.ffx-medal .rw { display: block; max-width: 112px; font: 400 13px/1.15 var(--display); letter-spacing: .03em; color: #ffd36e; text-align: center; white-space: normal; }
.ffx-medal .prz { padding: 1px 6px 0; font: 400 12px/1.25 var(--display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #c8202a; box-shadow: 2px 2px 0 #000; text-align: center; }
.sz-sm .ffx-medal { width: 104px; } .sz-sm .ffx-medal .medal-art { width: 70px; } .sz-sm .ffx-medal b { font-size: 15px; } .sz-sm .ffx-medal .rw { font-size: 12px; }
.sz-xs .ffx-medals { gap: 8px 4px; } .sz-xs .ffx-medal { width: 86px; } .sz-xs .ffx-medal .medal-art { width: 54px; } .sz-xs .ffx-medal b { font-size: 13px; } .sz-xs .ffx-medal .rw { display: none; } .sz-xs .ffx-medal .tier { font-size: 11px; }
.ffx-medal:not(.slam) { visibility: hidden; }
@media (max-height: 700px) { .ffx-medal .medal-art { width: 78px; } .sz-sm .ffx-medal .medal-art { width: 58px; } .sz-xs .ffx-medal .medal-art { width: 46px; } .fin-rack { padding: 4px 6px; } .fr-row .rb { width: 28px; } .fm { width: 28px; } .fm.more { height: 42px; } }
@media (min-width: 720px) { .mc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fm { width: 38px; } .fr-row .rb { width: 38px; } }
@media (prefers-reduced-motion: reduce) { .md-rays, .md-art, .rb.new::after { animation: none !important; } }
.ffx-medal.g4, .sz-sm .ffx-medal.g4, .sz-xs .ffx-medal.g4 { width: 112px; } /* a legendary feat has room for its prize tags */
.sz-xs .ffx-medal.g4 .medal-art { width: 64px; } .sz-xs .ffx-medal.g4 .rw { display: block; font-size: 12px; } .ffx-medal .prz { max-width: 100%; }
.sheet-box.medal-case { position: relative; } .medal-case > .sheet-x { position: absolute; top: 0; right: 0; margin: 0; float: none; }
.medal-case.calm *, .medal-detail.calm * { animation: none !important; transition: none !important; }
.item .medal-only { font-size: 13px; line-height: 1.05; text-align: center; color: #f2c14e; white-space: normal; } /* a medal reward in the Locker: "Earned from a medal" */
/* ---------- The War Room's government layer (js/wargov.js): insignia, the dock, sheets, targeting, cinematics ---------- */
.ins { display: inline-block; flex: none; width: 30px; height: 30px; filter: drop-shadow(1px 2px 0 #0009); }
.ins svg, .arm svg, .wg-lock svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ins.big { width: 44px; height: 44px; }
.arm { display: inline-block; flex: none; width: 22px; height: 22px; }
.wg-lock { position: absolute; right: 5px; top: 5px; width: 13px; height: 13px; }
.wg-st { display: inline-block; padding: 1px 6px 0; font: 400 11px/1.25 var(--display); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--gold); background: #120c08; border: 1.5px solid currentColor; transform: rotate(-3deg); white-space: nowrap; }
.wg-st.big { padding: 2px 9px 1px; font-size: 16px; border-width: 2px; }
.wg-st.you { color: #fff; background: #b5232a; border-color: #fff; }
.wg-st.y { color: #8fe08a; } .wg-st.n { color: #ff8a7a; }
.wg-t { font-variant-numeric: tabular-nums; }

/* the header: your position, the PREVIEW ribbon, War Power, incoming strikes */
.wy-pos { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; }
.wy-pos > span { min-width: 0; }
.wy-pos .ins { width: 34px; height: 34px; }
.wr-you .wy-pos b { max-width: 100%; font-size: 17px; line-height: .95; }
.wr-ribbon { display: flex; align-items: center; gap: 8px; margin: -2px -10px 1px; padding: 4px 10px; background: repeating-linear-gradient(-45deg, #b5232a 0 10px, #8e1b21 10px 20px); border-top: 2px solid #0d0b09; border-bottom: 2px solid #0d0b09; box-shadow: 0 2px 0 #0008; }
.wr-ribbon b { padding: 2px 8px 0; font: 400 17px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap; background: #0d0b09b0; border: 2px solid #fff; transform: rotate(-2deg); }
.wr-ribbon small { flex: 1; min-width: 0; font: 400 11px/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #ffe5cc; }
.wr-ribbon button { padding: 4px 10px 3px; font: 400 14px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #0d0b09; background: #f4efe4; border: 2px solid #0d0b09; box-shadow: 2px 2px 0 #0d0b09; cursor: pointer; }
.wr-power { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 8px; text-align: left; color: #f2eee6; cursor: pointer; background: linear-gradient(90deg, #1d1813, #12100d); border: 1px solid #0d0b09; box-shadow: inset 0 0 0 1px #4a3826, 2px 3px 0 #0d0b09; }
.wr-power.emp { box-shadow: inset 0 0 0 1px #4fd1e8, 2px 3px 0 #0d0b09; }
.wpw-n small { display: block; font: 400 9px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.wpw-n b { display: block; font: 400 21px/1 var(--display); color: var(--gold); text-shadow: 1px 1px #000; font-variant-numeric: tabular-nums; }
.wpw-pips { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; }
.wpw-pip { position: relative; display: grid; place-items: center; height: 26px; overflow: hidden; background: #0d0b09; border: 1px solid #3b2c1c; }
.wpw-pip::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--c) * 100%); background: linear-gradient(#ffd36e44, #ffd36e18); }
.wpw-pip .arm { position: relative; width: 20px; height: 20px; }
.wpw-pip.locked .arm { opacity: .28; filter: grayscale(1); } .wpw-pip.cool .arm { opacity: .5; filter: saturate(.4); } .wpw-pip.charge .arm { opacity: .78; }
.wpw-pip.ready, .wpw-pip.wait { border-color: var(--gold); box-shadow: inset 0 0 0 1px #ffd36e55, 0 0 8px #ffb04c66; }
.wpw-pip.ready::before { background: linear-gradient(#ffd36e66, #ff9a3c2a); }
.wpw-int { display: flex; align-items: center; gap: 1px; } .wpw-int .arm { width: 18px; height: 18px; } .wpw-int b { font: 400 17px/1 var(--display); }
.wr-alerts { display: grid; gap: 4px; }
.wr-alert { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 8px; cursor: pointer; background: #14100d; border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #4f86de88, 2px 3px 0 #0d0b09; }
.wr-alert.inc { background: repeating-linear-gradient(-45deg, #4a0f12 0 8px, #3a0b0e 8px 16px); box-shadow: inset 0 0 0 1px #ff5b52, 2px 3px 0 #0d0b09; animation: wr-urgbox 1s ease-in-out infinite; }
.wr-alert .arm { width: 26px; height: 26px; }
.wr-alert > span { flex: 1; min-width: 0; }
.wr-alert em { display: block; font: 400 10px var(--display); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: #9fc4ff; } .wr-alert.inc em { color: #ff8a7a; }
.wr-alert > span b { display: block; font: 400 15px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-alert > .wg-t { font: 400 19px var(--display); color: #fff; text-shadow: 1px 1px #000; }
.wa-int { padding: 3px 9px 2px; color: #fff; cursor: pointer; background: linear-gradient(#e23a36, #b5232a); border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #ffb294a0, 2px 2px 0 #0d0b09; }
.wa-int b { display: block; font: 400 15px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.wa-int small, .wa-n { display: block; font: 400 10px/1.15 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #ffe5cc; }
.wa-n { max-width: 78px; text-align: right; color: #ffc9c2; }

/* the dock: Command, Council, Strike, Strategy (every position, locked ones show who can) */
.wr-dock { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 10px calc(var(--safe-b) + 8px); background: linear-gradient(#0a0e1300, #0a0e13e6 26%, #0a0e13f8); }
.wd-b { position: relative; display: grid; justify-items: center; gap: 1px; min-width: 0; padding: 6px 2px 5px; color: #f2eee6; cursor: pointer; background: linear-gradient(#241c16, #15110e); border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #5a4630, 2px 3px 0 #0d0b09; }
.wd-b .ins, .wd-b .arm { width: 26px; height: 26px; }
.wd-b b { font: 400 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.wd-b small { max-width: 100%; font: 400 10px/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-b.hot { box-shadow: inset 0 0 0 1px var(--gold), 0 0 12px #ffb04c55, 2px 3px 0 #0d0b09; } .wd-b.hot small { color: var(--gold); }
.wd-b.locked { opacity: .8; } .wd-b.locked > .ins, .wd-b.locked > .arm { filter: grayscale(.85) brightness(.8); }
.wd-b:active { transform: translate(2px, 3px); box-shadow: inset 0 0 0 1px #5a4630; }
.wd-n { position: absolute; right: 4px; top: -8px; min-width: 18px; padding: 1px 4px 0; font: 400 13px/1.1 var(--display); font-style: normal; color: #fff; background: #d4262e; border: 1.5px solid #fff; transform: rotate(4deg); }
.wr.carded .wr-dock { opacity: 0; pointer-events: none; }
.wr.aiming .wr-dock { visibility: hidden; }
.wr.aiming .wr-pin { pointer-events: none; opacity: .45; }
.wr.aiming .wr-key, .wr.aiming .wr-lab, .wr.sheeted .wr-key, .wr.sheeted .wr-lab { display: none; }
.wr.cine .wr-pins, .wr.cine .wr-key, .wr.cine .wr-lab { opacity: 0; transition: opacity .3s; pointer-events: none; }
.wr.alarm .wr-stage::after { background: radial-gradient(ellipse at 50% 50%, transparent 35%, #c4161ca8 100%); animation: wr-alarm .4s steps(2) 4; }
@keyframes wr-alarm { 50% { opacity: .2; } }

/* targeting and strategy drawing: the bar over the dock (two steps: place, then confirm) */
.wr-aimbar { position: absolute; left: 8px; right: 8px; bottom: calc(var(--safe-b) + 8px); z-index: 4; display: grid; gap: 7px; max-width: 520px; margin: 0 auto; padding: 9px 10px 10px; background: linear-gradient(#241b15f6, #14100df8); border: 2px solid #0d0b09; border-top: 5px solid #d4262e; box-shadow: inset 0 0 0 1px #5a4630, 4px 5px 0 #000a; }
.wr-aimbar[hidden] { display: none; }
.ab-top { display: flex; align-items: center; gap: 9px; }
.ab-top .arm { width: 36px; height: 36px; }
.ab-top > div { flex: 1; min-width: 0; }
.ab-top em { display: block; font: 400 11px var(--display); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: #f27661; }
.ab-top b { display: block; font: 400 23px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-cost { font: 400 21px/1 var(--display); font-style: normal; color: var(--gold); text-align: right; } .ab-cost small { display: block; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ab-x, .ab-redo { padding: 6px 10px 5px; font: 400 13px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #e6dccb; background: #0f0c0a; border: 1px solid #3b2c1c; cursor: pointer; }
.ab-how { margin: 0; font-size: 13px; line-height: 1.3; color: #e6dccb; }
.ab-tgt { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; align-items: center; padding: 6px 8px; background: #0f0c0a; border: 1px solid #2c2219; }
.ab-tgt b { font: 400 20px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.ab-tgt small { grid-column: 1; font-size: 12px; line-height: 1.25; color: #d9cdb8; }
.ab-tgt .ab-redo { grid-column: 2; grid-row: 1 / 3; }
.ab-tgt.bad b { color: #bfae92; } .ab-tgt.bad small { color: #ff9c86; }
.ab-tgt input { width: 100%; min-width: 0; padding: 4px 6px; font: 400 19px var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--gold); background: #1a1411; border: 1px solid #5a4630; border-radius: 0; }
.ab-go { display: block; width: 100%; padding: 7px 10px 6px; text-align: center; color: #fff; cursor: pointer; background: linear-gradient(110deg, #b5232a, #e23a36 55%, #b31f27); border: 2px solid #0d0b09; box-shadow: inset 0 0 0 2px #ffb294a0, inset 0 -5px 0 #7a1519, 3px 4px 0 #0d0b09; }
.ab-go b { display: block; font: 400 29px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-shadow: 2px 3px #6e1519; }
.ab-go small { display: block; margin-top: 2px; font: 400 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #ffe5cc; }
.ab-go:disabled { filter: grayscale(.9) brightness(.7); cursor: not-allowed; }
.ab-go:active:not(:disabled) { transform: translate(2px, 3px); box-shadow: inset 0 0 0 2px #ffb294a0, inset 0 -3px 0 #7a1519, 1px 1px 0 #0d0b09; }

/* the strike caption: who fired what where, and the result stamped at impact */
.wr-cine { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 92px); z-index: 5; display: flex; align-items: center; gap: 10px; width: min(370px, calc(100vw - 24px)); padding: 9px 12px; pointer-events: none; transform: translateX(-50%); background: linear-gradient(#211a15f2, #14100df2); border: 2px solid #0d0b09; border-left: 6px solid var(--gold); box-shadow: inset 0 0 0 1px #5a4630, 4px 5px 0 #000a; }
.wr-cine[hidden] { display: none; }
.wr-cine.theirs { border-left-color: #ff3b30; }
.wr-cine .arm { width: 40px; height: 40px; }
.wr-cine > div { flex: 1; min-width: 0; }
.wr-cine em { display: block; font: 400 11px var(--display); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: #f27661; }
.wr-cine b { display: block; font: 400 23px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.wr-cine small { display: block; font: 400 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.wr-cine .wg-st { opacity: 0; transform: rotate(-8deg) scale(1.8); }
.wr-cine.hit .wg-st { opacity: 1; transform: rotate(-6deg); transition: transform .18s cubic-bezier(.2, 1.6, .4, 1), opacity .1s; }
.wr-cine.r-hit .wg-st { color: #ff5b52; } .wr-cine.r-partial .wg-st { color: var(--gold); } .wr-cine.r-intercepted .wg-st { color: #9fd0ff; }
.wr.calm .wr-cine .wg-st { transition: none; }

/* sheets: the chain of command, the Council, the arsenal */
.wr-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--safe-t) + 56px); z-index: 5; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto;
  background: url('../assets/ui/command-etch.svg') right 18px / 520px auto no-repeat, linear-gradient(#231b15, #14100d 40%); border: 2px solid #0d0b09; border-top: 6px solid #b5232a; border-bottom: 0;
  box-shadow: inset 0 0 0 1px #5a4630, 0 -6px 0 #0008, 0 -20px 40px #000c; animation: ws-up .26s cubic-bezier(.2, .9, .3, 1); }
.wr-sheet[hidden] { display: none; }
@keyframes ws-up { from { transform: translateY(40px); opacity: 0; } }
.ws-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 8px; border-bottom: 1px dashed #7a5a4466; }
.ws-head > div { flex: 1; min-width: 0; }
.ws-head em { display: block; font: 400 12px var(--display); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: #f27661; }
.ws-head h2 { margin: 0; font: 400 34px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; text-shadow: 3px 3px #6e1519; }
.ws-x { flex: none; width: 36px; height: 36px; font-size: 26px; line-height: 1; color: #d9cdb8; cursor: pointer; background: #0f0c0a; border: 1px solid #3b2c1c; }
.ws-body { flex: 1; display: grid; align-content: start; gap: 10px; padding: 10px 14px calc(var(--safe-b) + 18px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.ws-empty { margin: 8px 0; font-size: 14px; color: #d9cdb8; }
.cc-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cc-sides button { display: flex; align-items: center; gap: 7px; padding: 6px 8px; text-align: left; color: #e6dccb; cursor: pointer; background: #0f0c0a; border: 1px solid #3b2c1c; }
.cc-sides .war-flag { width: 26px; height: 16px; box-shadow: 0 0 0 1.5px #0d0b09; }
.cc-sides b { font: 400 16px var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cc-sides small { margin-left: auto; font: 400 10px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.cc-sides button.on { color: #fff; background: #1f1813; box-shadow: inset 0 0 0 1px var(--gold), 2px 3px 0 #0d0b09; }
.cc-sides .on.us { border-left: 5px solid var(--us); } .cc-sides .on.ca { border-left: 5px solid var(--ca); }
.cc-gov { display: flex; align-items: center; gap: 10px; } .cc-gov span { font-size: 13px; line-height: 1.25; color: #d9cdb8; }
.cc-gov .wg-st { color: #f4efe4; } .cc-gov.dict .wg-st { color: #fff; background: #b5232a; border-color: #0d0b09; }
.cc-elect { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 10px; text-align: left; color: #f2eee6; background: #14100d; border: 1px solid #3b2c1c; }
.cc-elect.open { cursor: pointer; background: linear-gradient(90deg, #3a2a10, #14100d); border-color: var(--gold); }
.cc-elect .wi { width: 24px; height: 24px; } .cc-elect b { display: block; font: 400 16px var(--display); letter-spacing: .06em; text-transform: uppercase; } .cc-elect small { display: block; font-size: 12px; color: var(--muted); }
.cc-chain { display: grid; }
.cc-line { justify-self: center; width: 3px; height: 12px; background: repeating-linear-gradient(#8a6420 0 3px, transparent 3px 6px); }
.cc-pres, .cc-seat, .cc-sol { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(#1f1813, #15110e); border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #4a3826, 2px 3px 0 #0d0b09; }
.cc-pres { padding: 10px 12px; background: linear-gradient(100deg, #2a2012, #15110e 70%); box-shadow: inset 0 0 0 1px #8a6420, 3px 4px 0 #0d0b09; }
.cc-pres .ins.big { width: 56px; height: 56px; }
.cc-pres small, .cc-seat small, .cc-sol small { display: block; font: 400 11px var(--display); letter-spacing: .16em; text-transform: uppercase; color: #f27661; }
.cc-pres b { display: block; font: 400 25px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.cc-seat b, .cc-sol b { display: block; font: 400 15px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.cc-act, .cc-sol span { display: block; margin-top: 2px; font-size: 11px; line-height: 1.2; color: var(--muted); }
.cc-cab { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cc-seat { gap: 7px; padding: 7px 8px; } .cc-seat .ins { width: 32px; height: 32px; } .cc-seat > div, .cc-pres > div, .cc-sol > div { min-width: 0; }
.cc-chain .me { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px #ffb04c55, 3px 4px 0 #0d0b09; }
.cc-chain .wg-st.you { position: absolute; right: 6px; top: -9px; }
.cc-gens { padding: 8px 10px; background: #14100d; border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #3b2c1c, 2px 3px 0 #0d0b09; }
.cc-gens h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; margin: 0 0 6px; font: 400 17px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.cc-gens h4 small { font-size: 11px; letter-spacing: .04em; color: var(--muted); } .cc-gens h4 .ins { width: 30px; height: 30px; }
.cc-gens ol { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cc-gens li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 6px; overflow: hidden; font: 400 14px/1.15 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #e6dccb; white-space: nowrap; text-overflow: ellipsis; background: #0f0c0a; border: 1px solid #2c2219; }
.cc-gens li i { font-size: 12px; font-style: normal; color: var(--gold); } .cc-gens li.open { color: #6b5a44; border-style: dashed; } .cc-gens li.me { color: #fff; background: #2a1d05; border-color: var(--gold); }
.cc-test { display: grid; gap: 7px; margin-top: 4px; padding: 10px; background: repeating-linear-gradient(-45deg, #1a1411 0 12px, #16110e 12px 24px); border: 2px dashed #8a6420; }
.cc-test h3 { margin: 0; font: 400 21px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.cc-test p { margin: 0; font-size: 12.5px; line-height: 1.3; color: #d9cdb8; }
.cc-roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 6px 0; }
.cc-roles button { display: grid; justify-items: center; gap: 3px; padding: 7px 2px 5px; color: #e6dccb; cursor: pointer; background: #0f0c0a; border: 1px solid #3b2c1c; box-shadow: 2px 2px 0 #0d0b09; }
.cc-roles .ins { width: 32px; height: 32px; } .cc-roles b { font: 400 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.cc-roles button.on { color: #fff; background: #3a1210; box-shadow: inset 0 0 0 2px var(--gold), 2px 2px 0 #0d0b09; }
.cc-exit { padding: 8px; font: 400 15px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; cursor: pointer; background: #b5232a; border: 2px solid #0d0b09; box-shadow: 2px 3px 0 #0d0b09; }
.cc-lab { display: flex; align-items: center; gap: 8px; padding: 7px 9px; text-align: left; color: #f2eee6; cursor: pointer; background: #14100d; border: 1px solid #3b2c1c; }
.cc-lab .wi { width: 22px; height: 22px; } .cc-lab b { font: 400 15px var(--display); letter-spacing: .06em; text-transform: uppercase; } .cc-lab small { margin-left: auto; font-size: 11px; color: var(--muted); }
.wg-pick .cc-roles { margin: 10px 0; }
.cl-you { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: linear-gradient(100deg, #2a2012, #15110e 70%); border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #8a6420, 2px 3px 0 #0d0b09; }
.cl-you > div { min-width: 0; }
.cl-you small { display: block; font: 400 11px var(--display); letter-spacing: .16em; text-transform: uppercase; color: #f27661; }
.cl-you b { display: block; font: 400 23px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cl-chips u { padding: 1px 6px 0; font: 400 11px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--gold); background: #120c08; border: 1px solid #8a6420; }
.cl-sec { display: grid; gap: 6px; padding: 9px 10px 10px; background: #14100dd9; border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #3b2c1c, 2px 3px 0 #0d0b09; }
.cl-sec h3 { display: flex; align-items: center; gap: 7px; margin: 0; font: 400 19px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.cl-sec h3 small { margin-left: auto; font: 400 11px var(--display); letter-spacing: .1em; color: var(--muted); white-space: nowrap; } .cl-sec h3 .wg-t { color: #fff; }
.cl-sec h3 .wi, .cl-sec h3 .arm, .cl-sec h3 .ins { width: 24px; height: 24px; }
.cl-note { margin: 0; font-size: 12.5px; line-height: 1.3; color: #d9cdb8; } .cl-note b { color: var(--gold); }
.cl-done { margin: 0; font: 400 13px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #8fe08a; }
.cl-cands { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cl-cands li { display: flex; align-items: center; gap: 8px; padding: 5px 7px; background: #0f0c0a; border: 1px solid #2c2219; } .cl-cands li.me { border-color: var(--gold); }
.cl-k { width: 16px; font: 400 16px var(--display); font-style: normal; text-align: center; color: var(--gold); }
.cl-cands span { flex: 1; min-width: 0; } .cl-cands b { display: block; font: 400 16px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; } .cl-cands small { display: block; font-size: 11px; color: var(--muted); }
.cl-empty { color: var(--muted); font-size: 13px; }
.cl-meter { display: block; height: 5px; margin-top: 3px; background: #0d0b09; border: 1px solid #3b2c1c; } .cl-meter i { display: block; height: 100%; background: #e6dccb; } .cl-meter.gold i { background: var(--gold); }
.cl-sec button[data-wg], .cl-new { padding: 5px 11px 4px; font: 400 15px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; cursor: pointer; background: linear-gradient(#e23a36, #b5232a); border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #ffb294a0, 2px 2px 0 #0d0b09; }
.cl-sec button[data-wg]:disabled { filter: grayscale(.9) brightness(.65); cursor: not-allowed; }
.cl-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cl-sec .cl-vs button { display: grid; padding: 7px; background: linear-gradient(#2c4f8f, #1d3d73); box-shadow: inset 0 0 0 1px #9fc4ff80, 2px 2px 0 #0d0b09; } .cl-sec .cl-vs button.d { background: linear-gradient(#5a1c1c, #2a0d0d); box-shadow: inset 0 0 0 1px #ff8a7a80, 2px 2px 0 #0d0b09; }
.cl-vs b { font-size: 18px; } .cl-vs small { font-size: 11px; color: #e6dccb; }
.cl-yn { display: flex; height: 8px; overflow: hidden; background: #2c2219; border: 1px solid #0d0b09; } .cl-yn .y { background: #6fbf5a; } .cl-yn .n { margin-left: auto; background: #d4262e; }
.cl-pet { display: flex; align-items: center; gap: 9px; } .cl-pet .cl-meter { flex: 1; height: 9px; margin: 0; } .cl-pet b { font: 400 16px var(--display); }
.cl-prop { display: flex; align-items: flex-start; gap: 9px; padding: 8px; cursor: pointer; background: #0f0c0a; border: 1px solid #2c2219; border-left: 4px solid var(--gold); }
.cl-prop.enemy { border-left-color: #ff5b52; }
.cl-prop > .arm { width: 30px; height: 30px; margin-top: 2px; }
.cp-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cp-main b { font: 400 16px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; } .cp-main small { font-size: 12px; line-height: 1.2; color: #d9cdb8; }
.cp-by { font: 400 11px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cp-v { display: grid; gap: 2px; margin-top: 2px; } .cp-v em { font: 400 12px var(--display); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #e6dccb; }
.cp-act { display: grid; gap: 4px; align-content: start; }
.cl-sec .cp-act button.y { background: linear-gradient(#5aa04a, #3a7a2e); box-shadow: inset 0 0 0 1px #c4f0b0a0, 2px 2px 0 #0d0b09; } .cl-sec .cp-act button.n { background: linear-gradient(#5a2a26, #3a1714); }
.cl-sec .cp-act .ord { color: var(--gold); background: linear-gradient(#2b2724, #0d0b09); box-shadow: inset 0 0 0 1px var(--gold), 2px 2px 0 #0d0b09; }
.cl-new { width: 100%; padding: 8px; }
.cl-op { display: flex; align-items: center; gap: 9px; padding: 8px; cursor: pointer; background: linear-gradient(100deg, #2a2012, #0f0c0a); border: 1px solid #8a6420; }
.cl-op > div { flex: 1; min-width: 0; } .cl-op .arm { width: 30px; height: 30px; }
.cl-op small { font: 400 11px var(--display); letter-spacing: .1em; text-transform: uppercase; color: #f27661; } .cl-op b { display: block; font: 400 19px/1 var(--display); text-transform: uppercase; color: var(--gold); } .cl-op span { font-size: 11px; color: #d9cdb8; }
.cl-ups { display: grid; gap: 5px; }
.cl-up { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #0f0c0a; border: 1px solid #2c2219; } .cl-up > span { flex: 1; min-width: 0; } .cl-up .arm { width: 26px; height: 26px; }
.cl-up b { display: block; font: 400 16px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; } .cl-up small { display: block; font-size: 11px; color: var(--muted); }
.cl-sec .cl-up button { min-width: 64px; color: var(--gold); background: linear-gradient(#2b2724, #0d0b09); box-shadow: inset 0 0 0 1px var(--gold), 2px 2px 0 #0d0b09; }
.cl-sec.intel { background: repeating-linear-gradient(-45deg, #1a0f0e 0 10px, #150c0b 10px 20px); box-shadow: inset 0 0 0 1px #5a1c1c, 2px 3px 0 #0d0b09; }
.cl-intel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.cl-intel div { padding: 5px; text-align: center; background: #0f0c0a; border: 1px solid #5a1c1c; }
.cl-intel small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cl-intel b { display: block; overflow: hidden; font: 400 18px/1.05 var(--display); text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; color: #ff8a7a; }
.ar-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 6px; }
.ar-top > div { padding: 6px 8px; background: #0f0c0a; border: 1px solid #3b2c1c; }
.ar-top small { display: block; font: 400 10px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ar-top b { display: block; font: 400 22px/1 var(--display); color: #fff; } .ar-pw b { font-size: 36px; color: var(--gold); text-shadow: 2px 2px #6e1519; } .ar-pw span { font-size: 11px; color: var(--muted); }
.ar-warn, .ar-lock { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 9px; font-size: 12.5px; line-height: 1.3; color: #e6dccb; background: #14100d; border: 1px dashed #8a6420; }
.ar-lock .wg-lock { position: static; flex: none; width: 18px; height: 18px; } .ar-warn .arm { width: 22px; height: 22px; }
.ar-list { display: grid; gap: 5px; }
.ar-w { display: flex; gap: 5px; }
.ar-go { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 7px 9px; overflow: hidden; text-align: left; color: #f2eee6; cursor: pointer; background: #0f0c0a; border: 2px solid #0d0b09; box-shadow: inset 0 0 0 1px #3b2c1c, 2px 2px 0 #0d0b09; }
.ar-go .arm { position: relative; z-index: 1; width: 38px; height: 38px; }
.ar-go span { position: relative; z-index: 1; flex: 1; min-width: 0; }
.ar-go b { display: block; font: 400 18px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; } .ar-go small { display: block; font-size: 11.5px; line-height: 1.2; color: #d9cdb8; }
.ar-go em { display: block; font: 400 11px var(--display); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ar-cost { position: relative; z-index: 1; font: 400 20px var(--display); font-style: normal; color: var(--gold); }
.ar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--c) * 100%); background: linear-gradient(90deg, #ffd36e10, #ffd36e2a); border-right: 2px solid #ffd36e55; }
.ar-w.ready .ar-go { box-shadow: inset 0 0 0 1px var(--gold), 0 0 12px #ffb04c44, 2px 2px 0 #0d0b09; } .ar-w.ready em { color: var(--gold); }
.ar-w.locked .ar-go { opacity: .62; } .ar-w.locked .ar-go .arm { filter: grayscale(1); } .ar-w.cool em { color: #9fd0ff; }
.ar-watch { padding: 0 9px; font: 400 13px var(--display); letter-spacing: .08em; text-transform: uppercase; color: #e6dccb; cursor: pointer; background: #14100d; border: 1px solid #3b2c1c; }
.ar-h { margin: 6px 0 0; font: 400 17px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.ar-sug { display: flex; align-items: center; gap: 8px; padding: 6px 8px; text-align: left; color: #f2eee6; cursor: pointer; background: #0f0c0a; border: 1px solid #2c2219; border-left: 4px solid #7a6a52; }
.ar-sug.ok { border-left-color: var(--gold); } .ar-sug .arm { width: 28px; height: 28px; } .ar-sug span { flex: 1; min-width: 0; }
.ar-sug b { display: block; font: 400 15px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; } .ar-sug small { display: block; font-size: 11.5px; color: #d9cdb8; }

/* the battle card never runs off a short phone: its rules scroll and READY UP stays pinned at the bottom */
.wc-in { max-height: var(--wc-mh, none); margin: 0 -4px; padding: 0 4px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; }
.wc-in::-webkit-scrollbar { display: none; }
.wc-ready { position: sticky; bottom: 0; z-index: 1; }

/* the Campaign: where you stand, under Enter the War; the dispatches */
.war-pos { display: grid; grid-template-columns: auto minmax(0, 1.5fr) minmax(0, .6fr) minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 7px 10px; text-align: left; color: #f2eee6; cursor: pointer;
  background: url('../assets/ui/command-etch.svg') right 40% / 360px auto, linear-gradient(100deg, #2a2012, #15110e 70%); border: 2px solid #0d0b09; border-left: 6px solid var(--us); box-shadow: inset 0 0 0 1px #5a4630, 3px 4px 0 #0d0b09; }
.war-pos.ca { border-left-color: var(--ca); } .war-pos.test { box-shadow: inset 0 0 0 2px #b5232a, 3px 4px 0 #0d0b09; }
.war-pos .ins.big { width: 46px; height: 46px; }
.war-pos small { display: block; font: 400 10px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.war-pos b { display: block; overflow: hidden; font: 400 20px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.wps-pos b { color: var(--gold); } .war-pos.test .wps-pos small { color: #ff8a7a; }
.wps-lv b::before { content: 'LV '; font-size: 12px; color: var(--muted); }
.war-pos .wr-meter, .war-pos .wr-meter i { display: block; }
.war-feed li { align-items: flex-start; }
.war-feed li > .arm, .war-feed li > .wi { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.war-feed li > span { flex: 1; min-width: 0; }
.war-feed li u { display: inline-block; margin-right: 6px; padding: 0 5px; font: 400 10px/1.4 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--gold); border: 1px solid currentColor; transform: rotate(-2deg); }
.war-feed li.warning { border-left-color: #d4262e; } .war-feed li.warning u { color: #ff8a7a; }
.war-feed li.strike { border-left-color: #ff8a3c; } .war-feed li.strike u { color: #ffb070; }
.war-feed li.strategy { border-left-color: var(--gold); } .war-feed li.gov u { color: #9fd0ff; }

/* war battles: your position by your name on the board */
.board li .h-pos { order: 1; display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 0 4px 0 1px; text-decoration: none; background: #14100d; border: 1px solid #8a6420; transform: rotate(-2deg); }
.board li .h-pos .ins { width: 15px; height: 15px; outline: none; filter: none; }
.board li .h-pos b { font: 400 10px/1.4 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
body.war-battle .board li > b { order: 2; }

@media (max-width: 420px) { .wr-you > .war-flag { display: none; } .wr-you { grid-template-columns: minmax(0, 2.2fr) minmax(0, .55fr) minmax(0, 1fr); } .wr-you .wy-pos b { font-size: 16px; } }
@media (max-width: 380px) { .wpw-n b { font-size: 18px; } .wpw-pips { gap: 2px; } .war-pos { gap: 7px; } .war-pos b { font-size: 17px; } }
@media (max-height: 720px) {
  .wr-top { gap: 4px; padding-bottom: 8px; } .wr-sbar { height: 17px; } .wr-sbar b { font-size: 13px; } .wr-you { padding: 3px 8px 4px; } .wr-you b { font-size: 18px; }
  .wy-pos .ins { width: 28px; height: 28px; } .wpw-pip { height: 22px; } .wpw-pip .arm { width: 17px; height: 17px; } .wr-alert + .wr-alert { display: none; }
  .wd-b { padding: 4px 2px 4px; } .wd-b .ins, .wd-b .arm { width: 22px; height: 22px; } .wd-b small { display: none; }
  .wr-key { bottom: calc(var(--safe-b) + 70px); } .wr-lab { bottom: calc(var(--safe-b) + 68px); } .wr-cine { bottom: calc(var(--safe-b) + 72px); } .ws-head h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .wr-sheet, .wr-alert.inc, .wr.alarm .wr-stage::after { animation: none !important; } .wr-cine .wg-st { transition: none !important; } }

/* War Room plates on phones (Gage 10-21 night: too big, they covered the map and each other): name, players and the
   bar only; the type, side and time left are on the card a tap opens. */
@media (max-width: 600px) {
  .wr-pin { width: 112px; padding-top: 15px; }
  .wr-pin.big { width: 136px; }
  .wr-pin .wp-type, .wr-pin .wp-foot { display: none; }
  .wr-pin .wp-body { gap: 2px; padding: 3px 5px 4px 6px; }
  .wr-pin .wp-row b { font-size: 14px; }
  .wr-pin .wp-row .wi { width: 14px; height: 14px; }
  .wr-pin u { padding: 1px 4px 0; font-size: 10px; }
  .wr-pin:not(.big) .wp-badges u:nth-child(n+2) { display: none; }
}

/* Home on phones (Gage 10-22: the Battle side scrolled on into the Campaign's length): the hidden side takes no height. */
body:not(.pc-wide) .home-sides { align-items: start; }
body:not(.pc-wide) .home-sides[data-side="battle"] .side-campaign, body:not(.pc-wide) .home-sides[data-side="campaign"] .side-battle { max-height: 0; overflow: hidden; }
.terr-canvas { position: relative; }
.terr-zoom { position: absolute; right: 8px; top: 8px; }
.terr-zoom[hidden] { display: none; }
.terr-flag { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
.terr-flag .seg { flex: 1; }
.terr-flag .seg button { height: 32px; font-size: 16px; }