/* Layout: the pixel battle map fills the screen; menus and the HUD are flat black panels with
   hard pixel frames over it. Red, black and white like a war broadcast; gold, cyan and toxic
   green only mark coins, gems and the Horde. One dark look by design. */
:root {
  color-scheme: dark;
  --bg: #0b0b0b;
  --panel: #141414;
  --panel-2: #1c1b1b;
  --line: #2e2b2a;
  --fg: #f2eee6;
  --muted: #8f8a84;
  --red: #e0242d;
  --red-d: #8a0f14;
  --red-b: #ff4c3c;
  --gold: #f2b705;
  --cyan: #3fd0e0;
  --toxic: #8ee03a;
  /* Built-in fonts (nothing to download, works offline). Big headline text gets a pixel filter (.pxf). */
  --display: "DIN Condensed", "Avenir Next Condensed", "Bahnschrift SemiCondensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --fc: var(--line);
}

* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--fg);
  font: 400 16px/1.3 var(--body); -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none; -webkit-font-smoothing: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--red-b); outline-offset: 2px; }
[hidden] { display: none !important; }
.wi { display: inline-flex; flex: none; width: 24px; height: 24px; }
.wi img { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.emo { width: 100%; height: 100%; image-rendering: pixelated; display: block; }

/* Pixel frame: a border drawn outside the box with the corners knocked out. */
.px { box-shadow: 0 -3px 0 0 var(--fc), 0 3px 0 0 var(--fc), -3px 0 0 0 var(--fc), 3px 0 0 0 var(--fc); }

#map { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; background: #0a0b0c; image-rendering: pixelated; }
/* The 3D planet (js/globe.js) sits under the map canvas, which then only holds labels, units and effects. */
#globe { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; background: #08080a; }
#map.over { background: transparent; }
#shade { position: fixed; inset: 0; pointer-events: none; transition: opacity 0.4s; background: linear-gradient(180deg, rgba(11, 11, 11, 0.55), rgba(11, 11, 11, 0.25) 35%, rgba(11, 11, 11, 0.92) 85%); }
body.in-match #shade { opacity: 0; }

/* ---------- shared ---------- */
.card { background: var(--panel); padding: 14px; margin: 3px; box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line); }
.card h3, .section-title { margin: 0 0 10px; font: 400 22px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--red-b); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card h3 small { font: 400 13px var(--body); text-transform: none; color: var(--muted); letter-spacing: 0; }
.section-title { margin: 4px 2px -4px; }
.bar { flex: 1; height: 8px; background: #2a2626; position: relative; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--red); transition: width 0.9s steps(12); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px; margin: 3px;
  background: var(--panel-2); font: 400 22px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase;
  --fc: #3a3635;
  box-shadow: 0 -3px 0 0 var(--fc), 0 3px 0 0 var(--fc), -3px 0 0 0 var(--fc), 3px 0 0 0 var(--fc), inset 0 -4px 0 rgba(0, 0, 0, 0.45), inset 0 3px 0 rgba(255, 255, 255, 0.07);
}
.btn:active { transform: translateY(2px); }
.btn .wi { width: 24px; height: 24px; }
.btn.primary { background: var(--red); color: #fff; --fc: #fff; }
.btn.danger { background: var(--red-d); color: #fff; --fc: var(--red); }
.btn.good { background: #f2eee6; color: #111; --fc: #f2eee6; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--muted); }
.btn.small { min-height: 36px; padding: 0 10px; font-size: 19px; }
.btn[disabled] { opacity: 0.35; cursor: default; }
.tag { display: inline-block; padding: 2px 6px; background: var(--red); color: #fff; font: 400 16px/1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font: 400 15px/1.1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; background: #232020; }
.pill.ally { color: var(--cyan); } .pill.war { color: #fff; background: var(--red); } .pill.neutral { color: var(--muted); } .pill.traitor { color: var(--red-b); } .pill.horde { color: var(--toxic); }
.pill.real { color: #fff; background: #3a3635; } .pill.bot { color: var(--muted); } .pill.human { color: #fff; background: #8f1d22; }
.note { color: var(--muted); font-size: 14px; margin: 0; }
.price { display: inline-flex; align-items: center; gap: 4px; }
.price .wi { width: 18px; height: 18px; }

/* ---------- home ---------- */
#home { position: fixed; inset: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(var(--safe-t) + 12px) 16px 6px; max-width: 560px; width: 100%; margin: 0 auto; }
.logo { font: 400 40px/0.8 var(--display); letter-spacing: 0.02em; color: #fff; text-shadow: 3px 3px 0 var(--red-d); }
.logo span { color: var(--red); text-shadow: 3px 3px 0 #000; }
.wallet { display: flex; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 8px; margin: 3px; background: var(--panel); font: 400 20px var(--display); box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line); }
.chip .wi { width: 20px; height: 20px; }
.chip.coin b { color: var(--gold); font-weight: 400; } .chip.gem b { color: var(--cyan); font-weight: 400; }
.chip em { font-style: normal; color: #111; background: var(--cyan); width: 16px; height: 16px; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.pages { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.page { max-width: 560px; margin: 0 auto; padding: 8px 16px calc(var(--safe-b) + 100px); display: flex; flex-direction: column; gap: 14px; }

.profile { display: grid; grid-template-columns: 56px 1fr auto; gap: 4px 12px; align-items: center; }
.avatar { width: 56px; height: 56px; display: block; image-rendering: pixelated; grid-row: 1 / 3; }
.who-name { display: flex; align-items: center; gap: 6px; font: 400 28px/1 var(--display); text-transform: uppercase; min-width: 0; }
.who-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-name button { width: 22px; height: 22px; opacity: 0.6; }
.lvl { display: flex; align-items: center; gap: 8px; font: 400 18px var(--display); color: var(--muted); grid-column: 2; }
.lvl b { color: var(--fg); font-weight: 400; }
.rank { grid-row: 1 / 3; grid-column: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.rank-badge { width: 36px; height: 40px; image-rendering: pixelated; }
.rank-text b { font: 400 17px/1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
.rank-text small { display: block; font: 400 15px var(--display); color: var(--muted); }

.play {
  position: relative; display: block; width: calc(100% - 8px); margin: 4px; padding: 16px 12px 14px; text-align: center; background: var(--red); color: #fff;
  box-shadow: 0 -4px 0 0 #fff, 0 4px 0 0 #fff, -4px 0 0 0 #fff, 4px 0 0 0 #fff, inset 0 -6px 0 var(--red-d), inset 0 4px 0 rgba(255, 255, 255, 0.25);
}
.play:active { transform: translateY(3px); box-shadow: 0 -4px 0 0 #fff, 0 4px 0 0 #fff, -4px 0 0 0 #fff, 4px 0 0 0 #fff, inset 0 4px 0 var(--red-d); }
.play b { display: block; font: 400 56px/0.8 var(--display); letter-spacing: 0.03em; text-shadow: 3px 3px 0 var(--red-d); }
.play small { display: block; margin-top: 8px; font: 400 18px var(--display); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.linkrow { display: flex; gap: 8px; }
.nowplaying { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #0b0b0b; font: 400 20px var(--display); text-transform: uppercase; }
.linkrow .btn { flex: 1; }
.mode-row { display: flex; flex-direction: column; gap: 8px; }
.mode-pick { display: grid; grid-template-columns: 40px 1fr 18px; gap: 10px; align-items: center; width: calc(100% - 6px); margin: 3px; padding: 10px 12px; background: var(--panel); text-align: left; box-shadow: 0 -3px 0 0 #fff, 0 3px 0 0 #fff, -3px 0 0 0 #fff, 3px 0 0 0 #fff, inset 0 -4px 0 rgba(0, 0, 0, 0.45); }
.mode-pick .wi, .mode-opt .wi { width: 40px; height: 40px; }
.mode-pick b, .mode-opt b { display: block; font: 400 28px/0.9 var(--display); text-transform: uppercase; }
.mode-pick small, .mode-opt small { display: block; color: var(--muted); font-size: 13px; line-height: 1.2; margin-top: 2px; }
.caret { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid #fff; }
.mode-list { display: flex; flex-direction: column; gap: 8px; }
.mode-opt { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 12px; background: #1d1b1b; text-align: left; }
.mode-opt.on { background: var(--red); }
.mode-opt.on small { color: #fff; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 3px; background: var(--panel); text-align: left; box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line), inset 0 -4px 0 rgba(0, 0, 0, 0.4); }
.mode .wi { width: 40px; height: 40px; }
.mode b { display: block; font: 400 24px/1 var(--display); text-transform: uppercase; }
.mode small { color: var(--muted); font-size: 13px; line-height: 1.15; }
.mode.outbreak b { color: var(--toxic); }
.boostbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #11262a; color: var(--cyan); font: 400 18px var(--display); text-transform: uppercase; }

.streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 4px; background: #1d1b1b; font: 400 15px var(--display); color: var(--muted); }
.day .wi { width: 24px; height: 24px; }
.day b { font-weight: 400; color: var(--fg); min-height: 15px; }
.day.got { opacity: 0.35; }
.day.next { background: var(--red); color: #fff; }
.supply-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.crates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.crate { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: #1d1b1b; }
.crate .wi { width: 40px; height: 40px; }
.crate b { font: 400 17px/1 var(--display); text-transform: uppercase; text-align: center; }
.crate small { font: 400 15px var(--display); color: var(--muted); }
.crate.has { background: #2a1314; }
.crate.has small { color: var(--red-b); }
.quest { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 8px 0; border-top: 2px solid #201e1e; }
.quest:first-of-type { border-top: 0; padding-top: 0; }
.quest p { margin: 0; font-size: 15px; }
.quest .bar { grid-column: 1 / 2; height: 6px; }
.quest .reward { grid-row: 1 / 3; grid-column: 2; font: 400 19px var(--display); color: var(--gold); display: flex; align-items: center; gap: 4px; }
.quest .reward .wi { width: 18px; height: 18px; }
.quest.done p { color: var(--muted); text-decoration: line-through; }
.quest.done .reward { color: var(--fg); }

/* armory */
.loadout { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot { display: flex; align-items: center; gap: 10px; padding: 10px; background: #1d1b1b; text-align: left; min-height: 60px; }
.slot .wi { width: 36px; height: 36px; }
.slot b { display: block; font: 400 22px/1 var(--display); text-transform: uppercase; }
.slot small { color: var(--muted); font-size: 13px; }
.slot.on { background: var(--red); }
.slot.on small { color: #fff; }
.slot.locked { opacity: 0.45; }
.tac, .perk { display: grid; grid-template-columns: 44px 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-top: 2px solid #201e1e; }
.tac:first-of-type, .perk:first-of-type { border-top: 0; padding-top: 0; }
.tac > .wi, .perk > .wi { width: 44px; height: 44px; grid-row: 1 / 4; }
.tac b, .perk b { font: 400 24px/1 var(--display); text-transform: uppercase; }
.perk b em { font-style: normal; color: var(--red-b); margin-left: 6px; }
.tac p, .perk small { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.2; grid-column: 2; }
.tac .stats { grid-column: 2; font: 400 16px var(--display); color: var(--fg); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tac .act, .perk .act { grid-row: 1 / 4; grid-column: 3; display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.tac.locked { opacity: 0.45; }
/* Ability badges: every tactic, superweapon and doctrine on its own war-palette tile. */
.ab { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; background: var(--ab, #8f1d22);
  background: linear-gradient(160deg, color-mix(in srgb, var(--ab, #8f1d22), #fff 22%), var(--ab, #8f1d22) 55%, color-mix(in srgb, var(--ab, #8f1d22), #000 35%));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55), inset 0 3px 0 rgba(255, 255, 255, 0.16), 0 2px 0 #000; }
.ab .wi { width: 34px; height: 34px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7)); }
.tac > .ab, .perk > .ab { grid-row: 1 / 5; align-self: start; }
.slot .ab { width: 40px; height: 40px; } .slot .ab .wi { width: 30px; height: 30px; }
.wrow > .ab { width: 40px; height: 40px; } .wrow > .ab .wi { width: 30px; height: 30px; }
.tac[data-prev], .perk[data-prev] { cursor: pointer; }
.tac .stats em, .perk .stats em { font-style: normal; color: #8fe08a; }
.tac .stats { display: flex; flex-wrap: wrap; gap: 0 12px; white-space: normal; overflow: visible; }
.tac .stats > span { white-space: nowrap; }
.perk .stats { font: 400 16px var(--display); color: var(--fg); }
.peek { grid-column: 2; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font: 400 14px/1 var(--display); text-transform: uppercase; }
.peek .wi { width: 16px; height: 16px; }
.explain { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.35; }
.explain b { color: var(--fg); font-weight: 600; }
.locker-hint { margin: 8px 2px 6px; }
.ad-offer { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; text-align: left; }
.ad-offer .art { width: 44px; height: 44px; }
.ad-offer span { display: flex; flex-direction: column; font: 400 20px/1.1 var(--display); text-transform: uppercase; }
.ad-offer small { font: 400 13px var(--body); text-transform: none; opacity: 0.85; }
/* Armory preview sheet */
.ab-sheet .ab-head { display: flex; gap: 12px; align-items: center; }
.ab-sheet .ab-head .ab { width: 56px; height: 56px; } .ab-sheet .ab-head .ab .wi { width: 44px; height: 44px; }
.ab-sheet h2 { margin: 0; }
.ab-sheet .ab-head small { color: var(--muted); }
.ab-desc { margin: 10px 0; font-size: 15px; line-height: 1.35; }
.ab-cv { display: block; width: 100%; background: #0d0c0c; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--ab); margin: 8px 0 14px; }
.ab-table { width: 100%; border-collapse: collapse; font: 400 18px var(--display); text-transform: uppercase; }
.ab-table th, .ab-table td { padding: 5px 6px; border-bottom: 2px solid #201e1e; text-align: left; }
.ab-table th { color: var(--muted); font-weight: 400; }
.ab-table td.up { color: #8fe08a; }
.ab-tip { color: var(--muted); font-size: 14px; line-height: 1.35; margin: 10px 0; }
.ab-buy { display: flex; gap: 8px; margin-bottom: 8px; } .ab-buy .btn { flex: 1; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 8px; }
.pips i { width: 10px; height: 10px; background: #2c2929; }
.pips i.on { background: var(--red); }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.medal { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; font: 400 15px/1 var(--display); text-transform: uppercase; color: var(--muted); }
.medal .wi { width: 44px; height: 44px; }
.medal.none { opacity: 0.25; filter: grayscale(1); }
.medal b { font-weight: 400; color: var(--fg); }

/* locker */
.preview { width: 100%; aspect-ratio: 16 / 8; max-width: 100%; display: block; image-rendering: pixelated; }
.slots { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.slots::-webkit-scrollbar { display: none; }
.slots button { flex: none; height: 36px; padding: 0 12px; background: #1d1b1b; font: 400 20px var(--display); text-transform: uppercase; color: var(--muted); }
.slots button.on { background: var(--fg); color: #111; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.item { display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--panel); text-align: center; min-width: 0; outline: 3px solid transparent; outline-offset: -3px; }
.item canvas { width: 100%; aspect-ratio: 1; display: block; image-rendering: pixelated; }
.item b { font: 400 18px/1 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item small { font: 400 17px var(--display); display: inline-flex; gap: 3px; align-items: center; justify-content: center; }
.item small .wi { width: 16px; height: 16px; }
.item.on { outline-color: var(--red); }
.item.on small { color: var(--red-b); }
.item .x { color: var(--muted); text-transform: uppercase; }

/* shop */
.starter { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 16px; margin: 3px; background: var(--red-d); box-shadow: 0 -3px 0 0 var(--red), 0 3px 0 0 var(--red), -3px 0 0 0 var(--red), 3px 0 0 0 var(--red); }
.starter h4 { margin: 0; font: 400 32px/1 var(--display); text-transform: uppercase; }
.starter ul { margin: 0; padding: 0 0 0 18px; font-size: 14px; grid-column: 1; }
.starter .btn { grid-row: 1 / 3; grid-column: 2; }
.warchest { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; align-items: center; padding: 12px; margin: 3px; background: #1d1b1b; box-shadow: 0 -3px 0 0 var(--gold), 0 3px 0 0 var(--gold), -3px 0 0 0 var(--gold), 3px 0 0 0 var(--gold); }
.warchest .wi { width: 48px; height: 48px; }
.warchest h4 { margin: 0; font: 400 28px/1 var(--display); text-transform: uppercase; color: var(--gold); }
.warchest p { margin: 2px 0; font-size: 14px; }
.warchest small { color: var(--muted); font-size: 13px; }
.ad { text-align: center; }
.ad-tag { font: 400 16px var(--display); text-transform: uppercase; color: var(--muted); }
.ad-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 10px; background: repeating-linear-gradient(-45deg, #1b1919 0 10px, #141313 10px 20px); }
.ad-body .wi { width: 72px; height: 72px; }
.ad-body b { font: 400 36px var(--display); text-transform: uppercase; }
.ad-body small { color: var(--muted); }
.subtabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.subtabs button { font-size: 19px !important; gap: 4px !important; }
.carousel { overflow: hidden; touch-action: pan-y; margin: 0 -3px; padding: 0 3px; }
.track { display: flex; align-items: flex-start; will-change: transform; }
.panel { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 3px; opacity: 0.4; transform: scale(0.96); transition: opacity 0.25s, transform 0.25s; }
.panel.active { opacity: 1; transform: none; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: -4px; }
.dots i { width: 10px; height: 10px; background: #2c2929; transition: background 0.2s, transform 0.2s; }
.dots i.on { background: var(--red); transform: scale(1.3); }
/* Tap feedback everywhere: a quick flash on whatever you pressed. */
button { transition: transform 0.08s, filter 0.08s; }
button:active { filter: brightness(1.25); }
.tap { animation: tapflash 0.25s steps(3); }
@keyframes tapflash { 0% { filter: brightness(2) saturate(1.4); } 100% { filter: none; } }
.page:not([hidden]) { animation: pageIn 0.18s steps(4); }
@keyframes pageIn { from { transform: translateY(8px); } }
.seg button.on, .slots button.on, .subtabs button.on, .mode-opt.on { animation: pop 0.2s steps(3); }
.transmission { position: fixed; left: 50%; top: calc(var(--safe-t) + 10px); transform: translate(-50%, -140%); z-index: 45; width: min(440px, calc(100vw - 20px)); display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; padding: 10px 12px; background: #0d0d0d; box-shadow: 0 -3px 0 0 var(--red), 0 3px 0 0 var(--red), -3px 0 0 0 var(--red), 3px 0 0 0 var(--red); transition: transform 0.35s steps(5); pointer-events: none; }
.transmission.show { transform: translate(-50%, 0); }
.transmission .wi { width: 36px; height: 36px; }
.transmission small { display: block; font: 400 15px var(--display); color: var(--red-b); text-transform: uppercase; letter-spacing: 0.1em; }
.transmission b { display: block; font-size: 15px; font-weight: 500; line-height: 1.25; }
.transmission em { font: 400 15px var(--display); color: var(--muted); font-style: normal; text-transform: uppercase; }
.subtabs button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; background: #1d1b1b; font: 400 22px var(--display); text-transform: uppercase; color: var(--muted); }
.subtabs button .wi { width: 24px; height: 24px; }
.subtabs button.on { background: var(--red); color: #fff; }
.swipe { display: flex; flex-direction: column; gap: 14px; touch-action: pan-y; animation: dispIn 0.15s steps(3); }
.slots button { display: inline-flex; align-items: center; gap: 6px; }
.slots button .wi { width: 20px; height: 20px; }
.item { position: relative; }
.item .rtag { position: absolute; top: 4px; left: 4px; z-index: 1; padding: 0 4px; font: 400 13px/1.3 var(--display); text-transform: uppercase; background: #000; color: var(--rc, #aaa); }
.item.r-common { --rc: #b9b3a1; } .item.r-rare { --rc: #4f9fe8; } .item.r-epic { --rc: #a15be0; } .item.r-legendary { --rc: #f2b705; } .item.r-mythic { --rc: #ff3b5c; }
.item.r-rare, .item.r-epic, .item.r-legendary, .item.r-mythic { box-shadow: inset 0 -4px 0 var(--rc); }
.item.r-mythic { background: linear-gradient(180deg, rgba(255, 59, 92, 0.16), rgba(255, 59, 92, 0) 60%), #161515; }
.item.r-mythic .rtag { animation: mythic 1.6s steps(6) infinite; }
@keyframes mythic { 50% { color: #fff; } }
#lk-edit { display: flex; align-items: center; gap: 6px; margin: 6px auto 0; }
.pe-cv { display: block; width: min(288px, 76vw); aspect-ratio: 1; margin: 6px auto; image-rendering: pixelated; touch-action: none; box-shadow: 0 0 0 3px var(--line); cursor: crosshair; }
.pe-pal { display: flex; gap: 6px; justify-content: center; margin: 4px 0 8px; }
.pe-pal button { width: 32px; height: 32px; box-shadow: inset 0 0 0 2px #000; }
.pe-pal button.on { outline: 3px solid #fff; outline-offset: 1px; }
.deals .items { grid-template-columns: repeat(3, 1fr); }
.deals .item .rtag { background: var(--red); color: #fff; }
.tryon { text-align: center; }
.tryon .rar { font: 400 20px var(--display); text-transform: uppercase; color: var(--rc); }
.tryon s { opacity: 0.6; }
.short-note { margin: 0; font-size: 13px; color: var(--red, #e0242d); text-align: center; }
/* Not enough coins/gems: what's missing, how to get it, and the collection that unlocks everything */
.short-sheet h2 { margin-bottom: 0; }
.short-item { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.short-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.short-bar span { display: inline-flex; gap: 6px; align-items: center; }
.short-bar b { font: 400 20px var(--display); color: var(--red, #e0242d); text-transform: uppercase; }
.short-earn { margin: 0; opacity: 0.85; }
.short-hero { display: flex; flex-direction: column; gap: 6px; }
.short-all-h { margin: 4px 0 0; font: 400 15px var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.short-all { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.short-all li { min-width: 0; padding: 5px 7px; background: rgba(255,255,255,0.05); font-size: 12px; overflow-wrap: anywhere; }
.short-all b { font: 400 16px var(--display); margin-right: 3px; }
.celebrate { position: relative; align-items: center; text-align: center; overflow: hidden; }
.celebrate .huge { width: 128px; height: 128px; margin-top: 10px; animation: pop 0.4s steps(5); }
.celebrate .amt { font: 400 56px/1 var(--display); color: var(--rc); text-shadow: 3px 3px 0 #000; }
.burst { position: absolute; left: 50%; top: 90px; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; width: 8px; height: 8px; background: var(--c); animation: burst 0.9s steps(9) forwards; }
@keyframes burst { from { transform: rotate(var(--a)) translateX(0); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)); opacity: 0; } }
.chip.bump { animation: bump 0.5s steps(4); }
@keyframes bump { 50% { transform: scale(1.25); background: var(--red); } }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; padding: 12px 8px 8px; margin: 3px; background: var(--panel); box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line); }
.pack .wi { width: 44px; height: 44px; }
.pack b { font: 400 30px/1 var(--display); color: var(--cyan); }
.pack small { color: var(--muted); font-size: 13px; min-height: 17px; }
.pack .btn { width: calc(100% - 6px); }
.pack .tag { position: absolute; top: 4px; right: 4px; }
.line-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 2px solid #201e1e; }
.line-item:first-of-type { border-top: 0; padding-top: 0; }
.line-item > .wi { width: 30px; height: 30px; }
.line-item span { flex: 1; }

.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 2px; padding: 6px 10px calc(var(--safe-b) + 6px); background: #0b0b0b; border-top: 3px solid #1f1d1d; }
.tabbar button { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; color: var(--muted); font: 400 18px/1 var(--display); text-transform: uppercase; letter-spacing: 0.05em; }
.tabbar button .wi { width: 28px; height: 28px; filter: grayscale(1) brightness(0.7); }
.tabbar button.on { color: #fff; background: var(--red); }
.tabbar button.on .wi { filter: none; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-top { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: calc(var(--safe-t) + 8px) 12px 14px; background: linear-gradient(180deg, rgba(11, 11, 11, 0.95) 55%, rgba(11, 11, 11, 0)); pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.hud-troops b { display: block; font: 400 36px/0.85 var(--display); }
.hud-troops span { font: 400 16px var(--display); color: var(--muted); }
.hud-troops em { font-style: normal; }
.hud-troops .inc { color: var(--fg); }
.hud-mid { display: flex; flex-direction: column; align-items: center; }
.hud-land { font: 400 34px/0.85 var(--display); color: var(--red-b); }
.hud-time { font: 400 17px var(--display); color: var(--muted); }
.hud-time.low { color: var(--red-b); }
.hud-btns { justify-self: end; display: flex; gap: 8px; }
.hud-btn { position: relative; width: 40px; height: 40px; margin: 3px; background: var(--panel); display: grid; place-items: center; box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line); }
.hud-btn .wi { width: 26px; height: 26px; }
.hud-btn .dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; background: var(--red); }
.board { position: absolute; right: 8px; top: calc(var(--safe-t) + 66px); margin: 0; padding: 4px 8px; list-style: none; background: rgba(11, 11, 11, 0.78); font: 400 18px/1.05 var(--display); min-width: 130px; max-width: 44vw; }
.board li { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
.board li i { width: 10px; height: 10px; flex: none; }
.board li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.board li.me { color: var(--red-b); }
.board li.bot { color: var(--muted); }
.board li.real i { outline: 2px solid #fff; }
.board li.ally span { color: var(--cyan); }
.board li.horde span { color: var(--toxic); }
.board li.sep { height: 2px; background: #2c2929; margin: 3px 0; padding: 0; }
body.spawning .board { display: none; }
.board li.rest { display: none; }

.hud-note { position: absolute; left: 8px; top: calc(var(--safe-t) + 90px); display: flex; align-items: flex-start; gap: 6px; max-width: calc(100vw - 190px); pointer-events: none; z-index: 5; }
.hud-note > * { pointer-events: auto; }
.note-tab { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(14, 13, 13, 0.9); box-shadow: inset 0 0 0 2px #2c2929; }
.note-tab .wi { width: 22px; height: 22px; }
.note-tab em { position: absolute; top: -6px; right: -6px; min-width: 16px; padding: 0 3px; background: var(--red); color: #fff; font: 400 14px/16px var(--display); font-style: normal; text-align: center; }
.note-tab em:empty { display: none; }
.note-tab.hot { box-shadow: inset 0 0 0 2px var(--cyan); }
.note-line { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 8px 5px 6px; background: rgba(14, 13, 13, 0.88); border-left: 3px solid var(--kc, #fff); cursor: pointer; opacity: 0; transform: translateX(-12px); transition: opacity 0.2s, transform 0.2s steps(3); pointer-events: none; }
.note-line.show { opacity: 1; transform: none; pointer-events: auto; }
.note-line .wi { width: 18px; height: 18px; flex: none; }
.note-line span { min-width: 0; font-size: 12px; line-height: 1.15; color: #cfc9bd; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.note-line b { font: 400 16px/1 var(--display); text-transform: uppercase; color: var(--kc, var(--fg)); }
.note-line em { font-style: normal; }
.inrow { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: start; padding: 7px 0; border-top: 2px solid #201e1e; }
.inrow .wi { width: 24px; height: 24px; }
.inrow b { font: 400 18px/1 var(--display); text-transform: uppercase; color: var(--kc, var(--fg)); }
.inrow p { margin: 2px 0 0; font-size: 13px; }
.inrow small { font: 400 14px var(--display); color: var(--muted); }
.inrow .acts { display: flex; gap: 6px; margin-top: 6px; }
.inrow.req { background: rgba(79, 209, 232, 0.06); }
.radial { position: absolute; width: 0; height: 0; z-index: 7; }
.radial .hub { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); min-width: 96px; padding: 6px 8px; background: rgba(12, 11, 11, 0.94); text-align: center; border-top: 4px solid var(--kc, #fff); color: #f2eee6; pointer-events: auto; }
.radial .hub em { display: block; margin-top: 3px; font: 400 12px/1 var(--display); font-style: normal; text-transform: uppercase; color: var(--gold); }
.radial .hub b { display: block; font: 400 18px/1 var(--display); text-transform: uppercase; white-space: nowrap; }
.radial .hub small { font: 400 14px var(--display); color: var(--muted); }
.radial .arm { position: absolute; width: 74px; height: 58px; margin: -29px 0 0 -37px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: #1a1818; box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line); }
.radial .arm .wi { width: 26px; height: 26px; }
.radial .arm span { font: 400 15px/1 var(--display); text-transform: uppercase; }
.radial .arm.red { background: var(--red); --line: #fff; }
.radial .up { left: 0; top: -78px; }
.radial .down { left: 0; top: 78px; }
.radial .left { left: -96px; top: 0; }
.radial .right { left: 96px; top: 0; }
.radial.open .arm { animation: armOut 0.14s steps(3); }
@keyframes armOut { from { left: 0; top: 0; opacity: 0; } }
.radial .emo-ring { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(4, 46px); gap: 6px; padding: 8px; background: rgba(12, 11, 11, 0.95); box-shadow: 0 0 0 3px var(--line); }
.radial .emo-ring button { width: 46px; height: 46px; display: grid; place-items: center; background: #1d1b1b; }
@keyframes blinkSoft { 50% { background: rgba(122, 11, 16, 0.92); } }
@keyframes blink { 50% { background: var(--red-d); } }

.banner { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 70px); padding: 6px 12px; background: #111; font: 400 20px var(--display); text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.banner.hot { background: var(--red); color: #fff; }

.rail { position: absolute; right: 8px; bottom: calc(var(--dock, 170px) + 8px); display: flex; flex-direction: column; gap: 8px; }
.tool { width: 50px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; margin: 3px; background: var(--panel); box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line); }
.tool .wi { width: 28px; height: 28px; }
.tool span { font: 400 14px/1 var(--display); text-transform: uppercase; color: #d8d2c6; }
.tool.on span { color: #fff; }
.tool.on { background: var(--red); --line: #fff; }
.tool.arsenal { position: relative; opacity: 0.55; }
.tool.arsenal.ready { opacity: 1; --line: var(--gold); }
.tool.arsenal em { position: absolute; top: -8px; right: -8px; min-width: 18px; padding: 0 3px; background: var(--red); color: #fff; font: 400 16px/18px var(--display); font-style: normal; text-align: center; }
.tool.arsenal em:empty { display: none; }
.wrow { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 2px solid #201e1e; }
.wrow .wi { width: 40px; height: 40px; }
.wrow b { font: 400 22px/1 var(--display); text-transform: uppercase; }
.wrow b small { color: var(--red-b); font-size: 16px; }
.wrow p { margin: 2px 0; font-size: 13px; }
.arsenal-item > b, .wrow > div { min-width: 0; }
.tac p.arsenal-summary, .wrow p.arsenal-summary { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow small { color: var(--muted); font: 400 15px var(--display); text-transform: uppercase; }
.wrow.ready { background: rgba(224, 36, 45, 0.08); }

.order {
  position: absolute; left: 10px; right: 10px; margin: 0 auto; bottom: calc(var(--dock, 170px) + 6px); max-width: 420px;
  display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 12px; background: #121111;
  --fc: var(--kc, #fff); box-shadow: 0 -3px 0 0 var(--fc), 0 3px 0 0 var(--fc), -3px 0 0 0 var(--fc), 3px 0 0 0 var(--fc); animation: dispIn 0.15s steps(3);
}
body.ordering .rail { display: none; }
.o-head { display: grid; grid-template-columns: 30px 1fr 34px; gap: 8px; align-items: center; }
.o-head > .wi { width: 30px; height: 30px; }
.o-head b { font: 400 25px/0.95 var(--display); text-transform: uppercase; }
.order .x { width: 34px; height: 34px; display: grid; place-items: center; background: #1d1b1b; }
.order .x .wi { width: 18px; height: 18px; }
.o-detail { margin: 0; font-size: 14px; color: var(--muted); }
.o-detail strong { color: var(--fg); font-weight: 400; font-family: var(--display); font-size: 20px; }
.odds { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 7px 8px; background: #0b0b0b; }
.o-meter { height: 12px; background: #262323; position: relative; background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), #0b0b0b calc(10% - 2px) 10%); }
.o-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width 0.25s steps(5), background 0.2s; -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%); mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 2px), transparent calc(10% - 2px) 10%); }
.o-pct { font: 400 24px/1 var(--display); min-width: 52px; text-align: right; }
.o-verdict { grid-column: 1 / -1; font: 400 19px/1.05 var(--display); text-transform: uppercase; color: #fff; quotes: none; }
.o-why { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; }
.o-why:empty { display: none; }
.o-why .up { color: #b9e07a; }
.o-why .down { color: #ff7a6e; }
.order .warn { padding: 6px 8px; background: var(--red-d); font-size: 14px; }
.order .strat { flex-wrap: nowrap; }
.order .strat button { height: 46px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 20px; border: 3px solid #2a2727; }
.order .strat button .wi { width: 22px; height: 22px; }
.order .strat button.on { border-color: #fff; animation: none; }
.o-tip { font-size: 12px; color: var(--muted); margin-top: -2px; }
.order #h-undig { align-self: stretch; }
.order .go { margin: 2px 3px 3px; min-height: 54px; font-size: 30px; }

.showdown { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--safe-t) + 70px); width: min(360px, calc(100vw - 24px)); padding: 8px 12px 10px; background: rgba(122, 11, 16, 0.28); text-align: center; cursor: pointer; touch-action: manipulation; z-index: 6; box-shadow: 0 -3px 0 0 var(--red-b), 0 3px 0 0 var(--red-b), -3px 0 0 0 var(--red-b), 3px 0 0 0 var(--red-b); text-shadow: 2px 2px 0 #000; }
.showdown.hit { animation: sdHit 0.12s steps(2); }
@keyframes sdHit { 50% { background: rgba(224, 36, 45, 0.45); } }
.showdown b { display: block; font: 400 34px/0.9 var(--display); text-transform: uppercase; }
.showdown p { margin: 2px 0 6px; font-size: 13px; }
.showdown small { display: block; margin-top: 2px; font-size: 12px; color: #f1d3cf; }
.tug { position: relative; height: 16px; background: rgba(0, 0, 0, 0.6); }
.tug i { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; transition: width 0.08s; }
.tug span { position: absolute; top: -4px; bottom: -4px; width: 3px; left: 50%; background: var(--red-b); }
.showdown .row { display: flex; justify-content: space-between; margin-top: 5px; font: 400 17px var(--display); }
.showdown .cta { margin-top: 4px; font: 400 24px var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
body.showdown-on .order, body.showdown-on .hud-note, body.showdown-on .board { opacity: 0.25; pointer-events: none; }
.reward-pop { position: fixed; left: 50%; top: calc(var(--safe-t) + 150px); transform: translate(-50%, -50%); z-index: 90; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: rgba(11, 11, 11, 0.72); pointer-events: none; text-align: left; animation: rewardPop 1.3s steps(10) forwards; }
.reward-pop .wi { width: 34px; height: 34px; }
.reward-pop b { display: block; font: 400 26px/0.95 var(--display); text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 var(--red-d); white-space: nowrap; }
.reward-pop small { display: block; font: 400 14px var(--display); color: var(--gold); }
.reward-pop .spark { display: none; }
.reward-pop .spark { position: absolute; left: 50%; top: 32px; width: 8px; height: 8px; margin: -4px; background: #fff; box-shadow: 40px -30px 0 var(--gold), -46px -22px 0 var(--red-b), 60px 20px 0 #fff, -58px 28px 0 var(--gold), 20px 52px 0 var(--red-b), -24px -54px 0 #fff, 0 -70px 0 var(--gold), 78px -6px 0 var(--red-b), -80px 4px 0 #fff; animation: spark 0.6s steps(6) forwards; }
@keyframes rewardPop { 0% { transform: translate(-50%, -40%); opacity: 0; } 12% { transform: translate(-50%, -50%); opacity: 1; } 80% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; transform: translate(-50%, -60%); } }
@keyframes spark { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

.dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 12px calc(var(--safe-b) + 10px); background: linear-gradient(0deg, rgba(11, 11, 11, 0.97) 70%, rgba(11, 11, 11, 0)); max-width: 620px; margin: 0 auto; }
.ops { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-bottom: 4px; }
.ops::-webkit-scrollbar { display: none; }
.ops:empty, .ops .hint { display: none; }
.op { position: relative; flex: none; display: grid; grid-template-columns: 22px auto 26px; gap: 0 6px; align-items: center; padding: 4px 4px 6px 6px; background: #161515; max-width: 220px; border-left: 4px solid var(--kc, #fff); }
.op > .wi { width: 22px; height: 22px; grid-row: 1 / 3; }
.op b { font: 400 17px/1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.op small { font: 400 17px/1 var(--display); white-space: nowrap; }
.op small em { font-style: normal; color: var(--muted); }
.op .rc { grid-row: 1 / 3; grid-column: 3; width: 26px; height: 26px; display: grid; place-items: center; }
.op .rc .wi { width: 18px; height: 18px; }
.op .prog { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--kc, #fff); }
.op.done { opacity: 0.55; }
.send-row { display: flex; align-items: baseline; gap: 8px; margin: 0 2px; }
.send-label { font: 400 17px var(--display); color: #c3bbae; text-transform: uppercase; white-space: nowrap; }
.send-label b { color: var(--fg); font-weight: 400; font-size: 22px; }
.send-label em { font-style: normal; }
.send-chips { display: flex; gap: 6px; }
.send-chips button { height: 26px; min-width: 40px; padding: 0 6px; background: #1d1b1b; font: 400 17px var(--display); }
.send-chips button.on { background: #fff; color: #111; }
.send-row { justify-content: space-between; }
.slider-row { display: flex; align-items: center; gap: 6px; margin: 1px 0 4px; }
.slider-row .step { width: 34px; height: 30px; flex: none; background: #1d1b1b; font: 400 24px/1 var(--display); color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.5); touch-action: manipulation; }
.slider-row .step:active { background: var(--red); }
.dock-row .grow { flex: 1; }
.dock-row { display: flex; align-items: center; gap: 10px; }
.tactics-row { display: flex; gap: 8px; }
.tbtn { position: relative; width: 54px; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; margin: 3px; background: var(--panel); --fc: var(--line); box-shadow: 0 -3px 0 0 var(--fc), 0 3px 0 0 var(--fc), -3px 0 0 0 var(--fc), 3px 0 0 0 var(--fc); }
.tbtn > .wi { width: 26px; height: 26px; position: relative; z-index: 1; }
.tbtn .tl { position: relative; z-index: 1; font: 400 13px/1 var(--display); text-transform: uppercase; color: #d8d2c6; white-space: nowrap; }
.tbtn .cd { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--cd, 0) * 100%); background: rgba(0, 0, 0, 0.72); }
.tbtn.ready { --fc: #fff; }
.tbtn[style*="--ab"]::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ab); }
.tbtn.active { --fc: var(--red-b); background: var(--red-d); }
.tbtn.aim { background: var(--red); --fc: #fff; }
.tbtn.dig em { position: absolute; top: -9px; right: -9px; min-width: 20px; padding: 1px 3px; background: var(--red); text-align: center; font: 400 15px/1 var(--display); font-style: normal; color: #fff; z-index: 2; text-shadow: 1px 1px 0 #000; }
.tbtn.dig em:empty { display: none; }
.cmds { display: flex; flex-direction: column; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 2px; }
.chips .btn { font-size: 17px; min-height: 34px; }
.rally { position: relative; flex: none; width: 72px; height: 52px; margin: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--red); color: #fff; font: 400 18px/1 var(--display); text-transform: uppercase; touch-action: manipulation; box-shadow: 0 -4px 0 0 #fff, 0 4px 0 0 #fff, -4px 0 0 0 #fff, 4px 0 0 0 #fff, inset 0 -5px 0 var(--red-d); }
.rally > .wi { width: 26px; height: 26px; }
.rally em { position: absolute; top: -16px; right: -8px; font: 400 20px var(--display); font-style: normal; color: #fff; background: #000; padding: 0 4px; }
.rally em:empty { display: none; }
.rally.hit { transform: translateY(3px); box-shadow: 0 -4px 0 0 #fff, 0 4px 0 0 #fff, -4px 0 0 0 #fff, 4px 0 0 0 #fff, inset 0 4px 0 var(--red-d); }
.float { position: fixed; pointer-events: none; font: 400 24px var(--display); color: #fff; text-shadow: 2px 2px 0 var(--red-d); animation: floatUp 0.7s steps(7) forwards; z-index: 40; }
@keyframes floatUp { to { transform: translateY(-48px); opacity: 0; } }

input[type=range] { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 52px; background: transparent; margin: 0; touch-action: none; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 20px; background: linear-gradient(90deg, var(--red) var(--fill, 35%), #2a2626 0); box-shadow: inset 0 0 0 3px #000; }
input[type=range]::-moz-range-track { height: 20px; background: linear-gradient(90deg, var(--red) var(--fill, 35%), #2a2626 0); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 46px; margin-top: -13px; background: #fff; border: 0; box-shadow: inset 0 -6px 0 #9a948c, 0 0 0 3px #000; }
input[type=range]::-moz-range-thumb { width: 30px; height: 46px; background: #fff; border: 0; border-radius: 0; }
#h-send { height: 30px; }
#h-send::-webkit-slider-runnable-track { height: 10px; box-shadow: inset 0 0 0 2px #000; }
#h-send::-moz-range-track { height: 10px; }
#h-send::-webkit-slider-thumb { width: 18px; height: 26px; margin-top: -8px; box-shadow: inset 0 -4px 0 #9a948c, 0 0 0 2px #000; }
#h-send::-moz-range-thumb { width: 18px; height: 26px; }

/* ---------- sheets, modals, toasts ---------- */
#toasts { position: fixed; left: 0; right: 0; top: calc(var(--safe-t) + 14px); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 50; }
.toast { max-width: calc(100vw - 32px); padding: 6px 12px; background: #111; color: var(--fg); font: 400 20px var(--display); text-transform: uppercase; box-shadow: 0 -3px 0 0 #fff, 0 3px 0 0 #fff, -3px 0 0 0 #fff, 3px 0 0 0 #fff; animation: dispIn 0.2s steps(4); transition: opacity 0.3s; }
.toast.bad { background: var(--red); }
.toast.out { opacity: 0; }

#modal, #sheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; padding: 14px; padding-bottom: calc(var(--safe-b) + 14px); }
#modal { background: rgba(5, 5, 5, 0.78); }
#sheet { z-index: 25; background: rgba(5, 5, 5, 0.35); }
@media (min-width: 720px) { #modal { align-items: center; } }
.sheet-box {
  width: calc(100% - 8px); max-width: 450px; max-height: calc(100% - var(--safe-t) - 10px); overflow-y: auto; background: var(--panel); margin: 4px;
  padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 12px; animation: dispIn 0.2s steps(4);
  box-shadow: 0 -4px 0 0 #fff, 0 4px 0 0 #fff, -4px 0 0 0 #fff, 4px 0 0 0 #fff;
}
.sheet-box h2 { margin: 0; font: 400 40px/0.9 var(--display); text-transform: uppercase; color: #fff; text-wrap: balance; }
.sheet-box p { margin: 0; color: var(--muted); font-size: 15px; }
.sheet-box .actions { display: flex; gap: 8px; }
.sheet-box .actions .btn { flex: 1; }
.sheet-box input[type=text] { width: 100%; height: 46px; border: 0; background: #0b0b0b; color: var(--fg); padding: 0 12px; font: 400 16px var(--body); -webkit-user-select: text; user-select: text; border-radius: 0; box-shadow: inset 0 0 0 3px var(--line); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { flex: 1; min-width: 60px; height: 38px; padding: 0 6px; background: #1d1b1b; font: 400 19px var(--display); text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg button.on { background: var(--red); color: #fff; }
.field-label { font: 400 18px var(--display); text-transform: uppercase; color: var(--red-b); margin-bottom: -4px; }
.tips { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tips li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; }
.tips li .wi { width: 36px; height: 36px; }
.tips li p { color: var(--fg); font-size: 15px; }
.tips li p b { color: var(--red-b); font-weight: 400; }
.fineprint { font-size: 13px; color: var(--muted); text-align: center; }

/* nation panel and chat */
.nation-head { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; }
.nation-head canvas { width: 60px; height: 60px; display: block; image-rendering: pixelated; }
.nation-head .meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; font: 400 17px var(--display); color: var(--muted); }
.dip { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dip .wide { grid-column: 1 / -1; }
.dip .btn { font-size: 19px; }
.loanrow { display: flex; gap: 4px; align-items: center; }
.loanrow span { font: 400 19px var(--display); text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.loanrow .btn { flex: 1; }
.debt { padding: 6px 10px; background: #2a2208; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat { display: flex; flex-direction: column; gap: 6px; max-height: 180px; min-height: 56px; overflow-y: auto; padding: 8px; background: #0b0b0b; -webkit-user-select: text; user-select: text; }
.msg { max-width: 82%; padding: 5px 9px; font-size: 15px; line-height: 1.2; background: #232020; align-self: flex-start; }
.msg.me { align-self: flex-end; background: var(--red-d); }
.msg .emo { width: 48px; height: 48px; }
.msg.sys { align-self: center; background: none; color: var(--muted); font: 400 16px var(--display); text-transform: uppercase; }
.emotes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.emotes button { aspect-ratio: 1; background: #1d1b1b; display: grid; place-items: center; padding: 3px; }
.compose { display: flex; gap: 6px; align-items: center; }
.compose input { flex: 1; }
.nlist { display: flex; flex-direction: column; }
.nrow { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 2px; border-top: 2px solid #201e1e; text-align: left; }
.nrow:first-child { border-top: 0; }
.nrow i { width: 12px; height: 12px; }
.nrow b { font: 400 22px/1 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.nrow small { font: 400 18px var(--display); color: var(--muted); }
.nrow .unread { width: 10px; height: 10px; background: var(--red); }

/* deployment & vote */
.mm-head { display: flex; align-items: center; gap: 14px; }
.mm-head > div:not(.radar) { flex: 1; min-width: 0; }
.mm-head small { font: 400 20px var(--display); color: var(--muted); text-transform: uppercase; }
.radar { width: 76px; height: 76px; position: relative; flex: none; background: #120707; overflow: hidden; box-shadow: inset 0 0 0 3px var(--red-d); background-image: linear-gradient(var(--red-d) 2px, transparent 2px), linear-gradient(90deg, var(--red-d) 2px, transparent 2px); background-size: 19px 19px; }
.radar::after { content: ''; position: absolute; left: 50%; top: 50%; width: 76px; height: 3px; background: var(--red-b); transform-origin: 0 50%; animation: sweep 1.2s steps(16) infinite; }
.radar i { position: absolute; width: 6px; height: 6px; background: #fff; animation: blip 1s steps(3) forwards; }
@keyframes sweep { to { transform: rotate(1turn); } }
@keyframes blip { to { background: var(--red); } }
#mm-vote { display: flex; flex-direction: column; gap: 10px; }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 3px; }
.rcard { display: grid; grid-template-columns: 10px 1fr auto; gap: 5px; align-items: center; padding: 2px 5px; background: #1b1919; min-height: 24px; min-width: 0; animation: dispIn 0.15s steps(3); }
.rcard i { width: 10px; height: 10px; }
.rcard b { font: 400 16px/1 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.rcard small { font: 400 14px var(--display); color: var(--muted); }
.rcard.real b { color: #fff; } .rcard.bot b { color: var(--muted); }
.rcard.real i { outline: 2px solid #fff; }
.rcard.empty { background: #141313; animation: none; }
.rcard.me { background: var(--red-d); }
.roster.dense { display: grid; grid-template-columns: repeat(auto-fill, 12px); gap: 3px; justify-content: center; }
.rdot { width: 12px; height: 12px; background: #1d1b1b; }
.rdot.real { outline: 2px solid #fff; outline-offset: -1px; }
.rdot.bot { opacity: 0.7; }
.rdot.me { outline: 3px solid var(--red-b); }
.mm-count { text-align: center; font: 400 20px var(--display); color: var(--muted); text-transform: uppercase; }
.mm-count b { color: #fff; font-weight: 400; }
.votes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vote { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 5px; background: #1b1919; text-align: left; min-width: 0; outline: 3px solid transparent; outline-offset: -3px; }
.vote canvas { width: 100%; aspect-ratio: 1; display: block; image-rendering: pixelated; }
.vote b { font: 400 19px/1 var(--display); text-transform: uppercase; font-weight: 400; }
.vote small { font: 400 14px var(--display); color: var(--muted); text-transform: uppercase; }
.vote .count { position: absolute; top: 8px; right: 8px; min-width: 24px; padding: 0 5px; background: #000; font: 400 20px var(--display); text-align: center; }
.vote.mine { outline-color: #fff; }
.vote.win { outline-color: var(--red); }
.vote.lose { opacity: 0.3; }
.countdown { font: 400 30px var(--display); color: var(--red-b); text-align: center; text-transform: uppercase; }

/* results */
.result-head { text-align: center; }
.result-head .place { font: 400 96px/0.8 var(--display); }
.result-head .verdict { font: 400 36px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; }
.result-head.win .place { color: var(--gold); }
.result-head.win .verdict { color: var(--gold); }
.result-head.out .verdict { color: var(--red-b); }
.score { display: flex; align-items: baseline; justify-content: center; gap: 8px; font: 400 20px var(--display); color: var(--muted); text-transform: uppercase; }
.score b { font: 400 40px var(--display); color: #fff; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.stats div { background: #1b1919; padding: 6px; text-align: center; }
.stats b { display: block; font: 400 26px/1 var(--display); }
.stats small { color: var(--muted); font: 400 14px var(--display); text-transform: uppercase; }
.medal-row { display: flex; gap: 10px; overflow-x: auto; }
.medal-row .medal { flex: none; width: 74px; color: var(--fg); animation: pop 0.3s steps(4) both; }
@keyframes pop { from { transform: scale(0.3); opacity: 0; } }
.rewards { display: flex; flex-direction: column; gap: 6px; }
.rewards > div { display: flex; align-items: center; gap: 10px; font: 400 21px var(--display); text-transform: uppercase; }
.rewards .wi { width: 24px; height: 24px; }
.rewards .grow { flex: 1; }
.rewards b { font-weight: 400; }
.up { color: #fff; } .down { color: var(--red-b); }

/* crates */
.crate-stage { display: grid; place-items: center; min-height: 220px; }
.crate-stage .big { width: 144px; height: 144px; cursor: pointer; animation: rattle 0.4s steps(2) infinite; }
.crate-stage .big .wi { width: 144px; height: 144px; }
/* Painted item art: coins, gems, crates, boosters. A dark drop shadow seats them on the panels. */
.art { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; }
.art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)); pointer-events: none; image-rendering: pixelated; }
.chip .art { width: 24px; height: 24px; }
.day .art { width: 32px; height: 32px; }
.crate .art { width: 72px; height: 72px; margin: -6px 0 -2px; transition: transform 0.15s; }
.crate.has .art { animation: crate-bob 1.6s ease-in-out infinite; filter: drop-shadow(0 0 10px var(--crate)); }
@keyframes crate-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-2deg); } }
.crate-stage .big .art { width: 168px; height: 168px; }
.art.huge { width: 132px; height: 132px; position: relative; z-index: 1; }
.pack .art { width: 76px; height: 76px; margin: 2px auto; }
.line-item > .art { width: 44px; height: 44px; }
.warchest > .art { width: 84px; height: 84px; }
.starter > .art.side { grid-column: 2; grid-row: 1 / 3; align-self: start; justify-self: center; width: 88px; height: 88px; }
.starter > .btn { grid-row: 3; grid-column: 1 / 3; }

.crate-stage .big.boom { animation: boom 0.4s steps(4) forwards; }
@keyframes rattle { 50% { transform: translateX(4px) rotate(3deg); } }
@keyframes boom { to { transform: scale(1.8); opacity: 0; } }
.loot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; min-width: 220px; background: #111; animation: pop 0.3s steps(4); box-shadow: 0 -4px 0 0 var(--rc), 0 4px 0 0 var(--rc), -4px 0 0 0 var(--rc), 4px 0 0 0 var(--rc); }
.loot .rar { font: 400 26px var(--display); color: var(--rc); text-transform: uppercase; }
.loot .wi, .loot canvas { width: 96px; height: 96px; display: block; image-rendering: pixelated; }
.loot b { font: 400 30px var(--display); text-transform: uppercase; font-weight: 400; }
.loot small { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.rewards .rw { animation: rowIn 0.32s steps(4) backwards; }
@keyframes rowIn { from { transform: translateX(-24px) scale(0.9); opacity: 0; } 60% { transform: translateX(4px) scale(1.04); opacity: 1; } }
.next-goal { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 8px 10px; background: rgba(242, 183, 5, 0.08); font: 400 17px/1.1 var(--display); color: var(--gold); text-transform: uppercase; }
.next-goal .wi { width: 22px; height: 22px; flex: none; }

/* Pixel filter for big headline text only (defined as an SVG filter in index.html). Small text stays crisp.
   Apple's WebKit (Safari, every iPhone browser, the iOS app) blanks text under this filter, so it's off there. */
html.no-pxf .logo, html.no-pxf .play > b, html.no-pxf .sheet-box > h2, html.no-pxf .verdict, html.no-pxf .result-head .place, html.no-pxf .reward-pop b, html.no-pxf .showdown b, html.no-pxf .hud-troops b, html.no-pxf .hud-land, html.no-pxf .o-head b { filter: none; }
.logo, .play > b, .sheet-box > h2, .verdict, .result-head .place, .reward-pop b, .showdown b, .hud-troops b, .hud-land, .o-head b { filter: url(#pxf); }
.legal-links { display: flex; gap: 18px; justify-content: center; margin: 12px 0 4px; font-size: 14px; }
.legal-links a { color: var(--muted); }
.card.earn p { margin: 0; font-size: 14px; color: var(--muted); }
.logo-img { display: block; height: 62px; width: auto; image-rendering: auto; margin: -4px 0 -6px -4px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.6)); }
.linkbtn { display: inline; padding: 0; margin-left: 4px; color: var(--fg); text-decoration: underline; font: inherit; }

/* ---------- battle controls: odds bar, sword, drawing bar, inbox panel ---------- */
/* The odds bar: full width under the leaderboard while you have a target. */
/* The odds pill (Gage 10-21 night): small, top centre under the scoreboard, a traffic light instead of a meter. */
.oddsbar { position: absolute; left: 50%; transform: translateX(-50%); top: var(--oddsTop, calc(var(--safe-t) + 150px)); z-index: 6; width: max-content; max-width: min(300px, calc(100vw - 16px)); padding: 4px 6px 5px; background: rgba(12, 11, 11, 0.9); box-shadow: inset 0 0 0 1.5px #2c2929, 0 4px 12px rgba(0, 0, 0, 0.45); }
.oddsbar.betray { box-shadow: inset 0 0 0 2px var(--red), 0 4px 12px rgba(0, 0, 0, 0.45); }
.ob-row { display: flex; align-items: center; gap: 6px; }
.ob-chip { width: 10px; height: 10px; flex: none; box-shadow: 0 0 0 1.5px #000; }
.ob-name { min-width: 0; max-width: 112px; font: 400 15px/1 var(--display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-light { display: inline-flex; gap: 3px; flex: none; padding: 3px 4px; background: #070707; border-radius: 7px; box-shadow: inset 0 0 0 1.5px #2c2929; }
.ob-light i { width: 9px; height: 9px; border-radius: 50%; background: #2a1514; }
.ob-light i.y { background: #2c2612; } .ob-light i.g { background: #132a17; }
.ob-light.on-r i.r { background: #ec3b2f; box-shadow: 0 0 7px #ec3b2f; }
.ob-light.on-y i.y { background: #f2c230; box-shadow: 0 0 7px #f2c230; }
.ob-light.on-g i.g { background: #3fd25a; box-shadow: 0 0 7px #3fd25a; }
.ob-pct { font: 400 17px/1 var(--display); min-width: 34px; text-align: right; }
.ob-x { width: 24px; height: 24px; flex: none; display: grid; place-items: center; background: #1d1b1b; }
.ob-x .wi { width: 13px; height: 13px; }
.ob-sub { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.ob-modes { display: flex; gap: 3px; flex: none; }
.ob-modes button { display: grid; place-items: center; width: 26px; height: 24px; background: #1d1b1b; color: var(--muted); box-shadow: inset 0 0 0 1.5px #2c2929; }
.ob-modes button .wi { width: 15px; height: 15px; }
.ob-modes button.on { background: #f2eee6; color: #000; }
.oddsbar .ob-strategy { flex: 1; gap: 3px; flex-wrap: nowrap; }
.oddsbar .ob-strategy button { min-width: 0; height: 24px; padding: 0 7px; font-size: 13px; }
.ob-verdict { display: block; max-height: 16px; margin-top: 3px; font: 400 11px/1.3 var(--body); color: #cfc9bd; quotes: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: ob-fade 2.8s forwards; }
.oddsbar.armed .ob-verdict, .oddsbar.betray .ob-verdict { animation: none; }
@keyframes ob-fade { 0%, 70% { opacity: 1; max-height: 16px; margin-top: 3px; } 100% { opacity: 0; max-height: 0; margin-top: 0; } }
/* The inbox: a panel over the top of the screen with a big X, not a full sheet. */
.topsheet { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--oddsTop, 220px) + 70px); max-height: 72vh; z-index: 9; display: flex; flex-direction: column; padding: calc(var(--safe-t) + 6px) 10px 8px; background: rgba(10, 9, 9, 0.97); box-shadow: 0 3px 0 #000, 0 6px 0 var(--red); }
.ts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ts-head h3 { margin: 0; font: 400 26px var(--display); text-transform: uppercase; }
.ts-x { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--red); }
.ts-x .wi { width: 22px; height: 22px; }
.ts-body { flex: 1; min-height: 0; overflow-y: auto; }
/* Drawing strikes or halt lines: undo, redo, what's next. */
.drawbar { position: absolute; left: 10px; right: 10px; bottom: calc(var(--dock, 170px) + 6px); z-index: 6; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 6px; padding: 6px; background: rgba(12, 11, 11, 0.94); box-shadow: inset 0 0 0 2px var(--red); }
.drawbar .dt { flex: 1; min-width: 0; font: 400 15px/1.1 var(--display); text-transform: uppercase; }
.drawbar .db { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: #1d1b1b; }
.drawbar .db.wide { width: auto; padding: 0 10px; font: 400 15px var(--display); text-transform: uppercase; }
.drawbar .db:disabled { opacity: 0.35; }
.drawbar .db .wi { width: 22px; height: 22px; }
body.ordering .drawbar { bottom: calc(var(--dock, 170px) + var(--order, 220px) + 14px); }
.order.weapon-order { gap: 6px; padding: 8px 10px; }
.weapon-order .o-head { grid-template-columns: 24px 1fr 34px; gap: 7px; }
.weapon-order .o-head:has([data-weapon-edit]) { grid-template-columns: 24px 1fr 34px 34px; }
.weapon-order .o-head > .wi { width: 24px; height: 24px; }
.weapon-order .o-head b { font-size: 21px; }
.weapon-order .o-detail { margin: 0; font-size: 13px; line-height: 1.35; }
.weapon-order .go { min-height: 44px; margin: 0; font-size: 25px; }
/* The dock row: tactics, Arsenal, Strike, Halt line, then the sword. */
.dock-row { gap: 2px; }
.dock-row .tbtn { width: 52px; margin: 3px 2px; }
.dock-row .tbtn .tl { font-size: 12px; }
.tool-btn.on { --fc: #fff; background: var(--red); }
.tool-btn.arsenal .energy { position: absolute; left: 5px; right: 5px; bottom: 3px; height: 4px; background: #2a2727; }
.tool-btn.arsenal .energy i { display: block; height: 100%; width: 0; background: var(--gold); }
.tool-btn.arsenal.ready { --fc: var(--gold); }
.sword { position: relative; flex: none; width: 74px; height: 74px; margin: 0 2px 4px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 38% 32%, #ff5a4a, var(--red) 55%, #7d0f14); box-shadow: 0 0 0 3px #000, 0 0 0 5px #f2eee6, 0 6px 0 5px #000; color: #fff; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.sword .wi { width: 34px; height: 34px; }
.sword span { font: 400 13px/1 var(--display); text-transform: uppercase; }
.sword em { position: absolute; top: -10px; right: -8px; font: 400 18px var(--display); font-style: normal; background: #000; padding: 0 4px; }
.sword em:empty { display: none; }
.sword.armed { animation: swordPulse 1.2s steps(2) infinite; }
.sword.hit { animation: swordHit 0.12s steps(2); }
@keyframes swordPulse { 50% { box-shadow: 0 0 0 3px #000, 0 0 0 5px #ffcf5a, 0 6px 0 5px #000; } }
@keyframes swordHit { 0% { transform: scale(0.9) translateY(3px); } 100% { transform: none; } }
body.spawning .sword { filter: grayscale(1) brightness(0.6); }
/* The plus menu (hold a nation): small circles. */
.radial .arm { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--line, #3a3636); }
.radial .arm .wi { width: 22px; height: 22px; }
.radial .arm span { font-size: 11px; }
.radial .up { top: -66px; } .radial .down { top: 66px; } .radial .left { left: -72px; } .radial .right { left: 72px; }
/* Arsenal: energy */
.energy-big { position: relative; height: 22px; margin: 4px 0 8px; background: #2a2727; }
.energy-big i { display: block; height: 100%; background: linear-gradient(90deg, #b0901a, #f2b705); }
.energy-big span { position: absolute; inset: 0; display: grid; place-items: center; font: 400 16px var(--display); text-transform: uppercase; text-shadow: 0 1px 0 #000; }
.wrow .cost { color: var(--muted); }
.wrow .cost .en { color: var(--gold); }

/* Rally: its own spammable button next to the sword. It heats up (gold) as the multiplier climbs. */
.rally-btn { position: relative; flex: none; width: 62px; height: 62px; margin: 0 4px 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: #fff; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  background: color-mix(in srgb, #1d1b1b, #c98a1c calc(var(--heat, 0) * 100%)); box-shadow: 0 -3px 0 0 #f2eee6, 0 3px 0 0 #f2eee6, -3px 0 0 0 #f2eee6, 3px 0 0 0 #f2eee6, inset 0 -4px 0 rgba(0, 0, 0, 0.45); }
.rally-btn .wi { width: 28px; height: 28px; }
.rally-btn span { font: 400 12px/1 var(--display); text-transform: uppercase; }
.rally-btn em { position: absolute; top: -12px; right: -10px; font: 400 16px var(--display); font-style: normal; color: #fff; background: #000; padding: 0 4px; }
.rally-btn em:empty { display: none; }
.rally-btn.hot { box-shadow: 0 -3px 0 0 var(--gold), 0 3px 0 0 var(--gold), -3px 0 0 0 var(--gold), 3px 0 0 0 var(--gold), inset 0 -4px 0 rgba(0, 0, 0, 0.45); }
/* Hold the Line: the climb to ×3 turns the button green and lights its multiplier while you spam it. */
.rally-btn.held { background: color-mix(in srgb, #1d1b1b, #3f7a1c calc(var(--heat, 0) * 100%)); box-shadow: 0 -3px 0 0 #b9f07a, 0 3px 0 0 #b9f07a, -3px 0 0 0 #b9f07a, 3px 0 0 0 #b9f07a, 0 0 18px 3px rgba(134, 224, 58, calc(0.25 + var(--heat, 0) * 0.55)), inset 0 -4px 0 rgba(0, 0, 0, 0.45); }
.rally-btn.held em { color: #071004; background: #b9f07a; box-shadow: 0 0 10px rgba(185, 240, 122, 0.9); }
.rally-btn.held:not(.hit) { animation: rallyGlow 0.6s ease-in-out infinite alternate; }
@keyframes rallyGlow { from { filter: brightness(1); } to { filter: brightness(1.22); } }
@media (prefers-reduced-motion: reduce) { .rally-btn.held:not(.hit) { animation: none; } }
.rally-btn.hit { animation: swordHit 0.12s steps(2); }
body.spawning .rally-btn { filter: grayscale(1) brightness(0.6); }
/* No target yet: the sword waits (dimmer, no pulse) until you tap something on the map. */
.sword.idle { filter: saturate(0.55) brightness(0.8); }
/* Narrow phones: the tool buttons share the row evenly so the sword and Rally always fit. */
.dock-row .tbtn { flex: 0 1 52px; min-width: 38px; }
.dock-row .tactics-row { flex: 0 1 auto; min-width: 0; gap: 0; }
@media (max-width: 400px) {
  .dock { padding-left: 6px; padding-right: 6px; }
  .dock-row .tbtn { height: 48px; margin: 3px 2px; }
  .dock-row .tbtn > .wi { width: 22px; height: 22px; }
  .dock-row .tbtn .tl { font-size: 10px; }
  .sword { width: 66px; height: 66px; }
  .rally-btn { width: 56px; height: 56px; }
  .dock-row .tbtn { min-width: 36px; }
}

/* Cinematics (js/fx-cinema.js): letterbox bars slide in, the HUD steps back, a caption in the bottom bar. */
body.cine::before, body.cine::after { content: ''; position: fixed; left: 0; right: 0; height: calc(var(--cine, 0) * 9vh); background: #000; z-index: 30; pointer-events: none; }
body.cine::before { top: 0; }
body.cine::after { bottom: 0; }
body.cine .hud-top, body.cine .hud-note, body.cine .dock, body.cine #h-odds, body.cine .board { opacity: calc(1 - var(--cine, 0) * 0.8); }
#cine-cap { position: fixed; left: 0; right: 0; bottom: calc(var(--safe-b, 0px) + 2.2vh); z-index: 31; text-align: center; pointer-events: none; font: 400 22px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #f2eee6; opacity: 0; text-shadow: 2px 2px 0 #000; }
body.cine #cine-cap.on { opacity: var(--cine, 0); }

/* Flags: the rankings show your flag instead of the colour chip; the flag designer is 12×8. */
#h-board li i.fl { width: 17px; image-rendering: pixelated; }
.fe-cv { width: min(300px, 80vw); height: auto; aspect-ratio: 3 / 2; image-rendering: pixelated; touch-action: none; }

/* War Bond (season pass) and the bundles */
.pass-card { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; color: inherit; border-top: 4px solid var(--gold); }
.pass-card.prem { border-top-color: var(--red); }
.pass-card > div { flex: 1; min-width: 0; }
.pass-card h3 { margin: 0 0 4px; }
.pass-card em { color: var(--gold); font-style: normal; }
.pass-row { display: flex; align-items: center; gap: 8px; font: 400 15px var(--display); }
.pass-row .bar { flex: 1; height: 8px; background: #2a2727; }
.pass-row .bar i { display: block; height: 100%; background: var(--gold); }
.pass-sheet .phead, .ptier { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 6px; align-items: center; }
.pass-sheet .phead { font: 400 14px var(--display); text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.ptiers { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.ptier > b { font: 400 18px var(--display); text-align: center; color: var(--muted); }
.ptier.reached > b { color: #fff; }
.pr { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 6px; background: #1d1b1b; color: #d8d2c6; text-align: left; font: 400 13px/1.1 var(--display); text-transform: uppercase; }
.pr .art, .pr .wi { width: 24px; height: 24px; flex: none; }
.pr.prem { background: #2a2215; }
.pr.open { box-shadow: inset 0 0 0 2px var(--gold); color: #fff; }
.pr.got { opacity: 0.45; }
.pr.big small { color: var(--gold); }
.bundle { display: grid; grid-template-columns: 72px 1fr; gap: 6px 10px; align-items: center; padding: 10px; margin: 0 0 10px; background: var(--panel); box-shadow: inset 0 0 0 2px #3a332a; }
.bundle .art.side { grid-row: span 2; width: 72px; height: 72px; }
.bundle h4 { margin: 0 0 4px; }
.bundle ul { margin: 0; padding-left: 16px; font-size: 13px; color: #d8d2c6; }
.bundle .btn { grid-column: 2; justify-self: start; }
.bundle.b-supreme { box-shadow: inset 0 0 0 2px var(--gold); background: linear-gradient(180deg, #2a2215, var(--panel)); }
.bundle.b-marshal { box-shadow: inset 0 0 0 2px #5d6b34; }

/* Rally pops: the multiplier sprays off the button, spinning out at random angles. */
.rally-pops { position: fixed; inset: 0; pointer-events: none; z-index: 41; }
.rally-pops b { position: absolute; transform: translate(-50%, -50%); font: 400 var(--sz, 18px)/1 var(--display); text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; animation: rallyPop 0.75s steps(9) forwards; white-space: nowrap; }
.rally-pops b.max { text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 190, 40, 0.9); }
.rally-pops b.held.max { text-shadow: 2px 2px 0 #000, 0 0 12px rgba(134, 224, 58, 0.95); }
@keyframes rallyPop {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.6); opacity: 1; }
  25% { transform: translate(calc(-50% + var(--dx) * 0.45), calc(-50% + var(--dy) * 0.45)) rotate(var(--rot)) scale(1.15); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--rot) * 1.4)) scale(0.9); opacity: 0; }
}
/* The ×multiplier badge on the button warms to gold too. */
.rally-btn em { color: color-mix(in srgb, #f2eee6, #ffc828 calc(var(--heat, 0) * 100%)); }

/* The pop-up sword: floats beside the target you tapped (js/hud.js placeSword). */
.sword.pop { position: fixed; left: 0; top: 0; width: 64px; height: 64px; margin: 0; z-index: 7; }
.sword.pop .wi { width: 30px; height: 30px; }
.sword.pop[hidden] { display: none; }
.sword.pop.pop-in .wi { animation: swordIn 0.18s steps(3); }
@keyframes swordIn { 0% { transform: scale(0.4); } 100% { transform: none; } }
.sword.pop span { font-size: 11px; }
body.cine .sword.pop { opacity: 0.25; }
/* Rally owns the corner now: a touch bigger. */
.rally-btn { width: 70px; height: 66px; margin-right: 2px; }
.rally-btn .wi { width: 30px; height: 30px; }
.rally-btn span { font-size: 13px; }
@media (max-width: 400px) { .rally-btn { width: 64px; height: 60px; } }

/* The hold menu, in pixel art: square buttons with notched pixel borders, no round corners. */
.radial .arm { width: 60px; height: 58px; margin: -29px 0 0 -30px; border-radius: 0; background: #1a1818; image-rendering: pixelated;
  box-shadow: 0 -3px 0 0 var(--line, #6e6863), 0 3px 0 0 var(--line, #6e6863), -3px 0 0 0 var(--line, #6e6863), 3px 0 0 0 var(--line, #6e6863), inset 0 -4px 0 rgba(0, 0, 0, 0.45), inset 0 3px 0 rgba(255, 255, 255, 0.08); }
.radial .arm.red { background: var(--red); --line: #f2eee6; }
.radial .arm .wi { width: 24px; height: 24px; }
.radial .arm span { font: 400 12px/1 var(--display); letter-spacing: 0.02em; }
.radial .hub { border-radius: 0; box-shadow: 0 -3px 0 0 #000, 0 3px 0 0 #000, -3px 0 0 0 #000, 3px 0 0 0 #000; }

/* Armory live preview: a second little planet (WebGL layer under its 2D canvas). */
.ab-live { position: relative; width: 100%; aspect-ratio: 16 / 10; margin: 8px 0; background: #08080a; box-shadow: 0 -3px 0 0 var(--ab, #8f1d22), 0 3px 0 0 var(--ab, #8f1d22), -3px 0 0 0 var(--ab, #8f1d22), 3px 0 0 0 var(--ab, #8f1d22); overflow: hidden; }
.ab-live .globe-layer, .ab-live .ab-live-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.ab-live .globe-layer { pointer-events: none; }
.ab-live small { position: absolute; left: 6px; bottom: 4px; font: 400 12px var(--display); text-transform: uppercase; color: var(--gold); text-shadow: 1px 1px 0 #000; pointer-events: none; z-index: 2; }

/* EMP after a nuke: the HUD glitches for a moment (Hud.emp; off with Reduce flashes). */
#hud.emp > * { animation: emp-jit 0.45s steps(3) 3; }
#hud.emp::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 5px); animation: emp-scan 0.32s steps(4) 4; }
@keyframes emp-jit {
  0% { transform: translate(0, 0); filter: none; }
  20% { transform: translate(-4px, 1px); filter: hue-rotate(90deg) saturate(3) contrast(1.5); }
  40% { transform: translate(3px, -2px); filter: invert(1); opacity: 0.85; }
  60% { transform: translate(-1px, 2px); filter: saturate(0) contrast(2); }
  80% { transform: translate(2px, 0); filter: none; opacity: 0.6; }
  100% { transform: none; filter: none; opacity: 1; }
}
@keyframes emp-scan { 0% { transform: translateY(0); opacity: 0.9; } 100% { transform: translateY(10px); opacity: 0.2; } }

/* ---------- Squads and friends (js/social.js) ---------- */
.card.squad.on { box-shadow: 0 -3px 0 0 var(--red), 0 3px 0 0 var(--red), -3px 0 0 0 var(--red), 3px 0 0 0 var(--red); }
.sq-code { color: #fff; font: 400 18px var(--display); letter-spacing: 0.12em; }
.sq-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.sq-random { width: 100%; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; font-size: 22px; }
.sq-random .wi { width: 22px; height: 22px; }
.sq-safe { margin: 6px 0 0; font-size: 12px; }
.sq-open { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.sq-open small { color: var(--muted); font-size: 12px; flex: 1 1 160px; }
.sq-open .chip.on { background: var(--red); color: #fff; }
.sq-block { border: 0; padding: 0; background: transparent; cursor: pointer; width: 22px; height: 22px; display: inline-grid; place-items: center; opacity: .55; }
.sq-block:hover, .sq-block:focus-visible { opacity: 1; }
.sq-block .wi { width: 16px; height: 16px; }
.sq-actions .btn { flex: 1 1 auto; min-width: 0; }
.sq-members { display: grid; gap: 6px; }
.sq-m { display: flex; align-items: center; gap: 10px; padding: 7px 8px; background: #191616; position: relative; }
.sq-m span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sq-m b { font: 400 20px/1 var(--display); letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-m small { color: var(--muted); font-size: 13px; }
.sq-m.rdy { background: #1d241a; }
.sq-m.rdy small { color: #fff; font-weight: 700; }
.sq-m.off { opacity: 0.5; }
.sq-dot { width: 12px; height: 12px; flex: none; background: var(--c, #c9c2b2); box-shadow: 0 0 0 2px #000; opacity: 0.45; }
.sq-dot.on { opacity: 1; animation: sq-blink 1.6s steps(2) infinite; }
@keyframes sq-blink { 50% { box-shadow: 0 0 0 2px #000, 0 0 0 4px rgba(155, 209, 46, 0.6); } }
.sq-emo { width: 34px; height: 34px; animation: sq-pop 0.35s steps(3); }
.sq-emo img, .sq-emo svg { width: 100%; height: 100%; image-rendering: pixelated; }
@keyframes sq-pop { 0% { transform: scale(0.3); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.sq-mode { display: flex; flex-wrap: wrap; margin: 8px -3px 0; }
.sq-mode .chip { font-size: 17px; height: 30px; }
.sq-mode .chip.on { background: var(--red); color: #fff; }
.sq-emotes { display: flex; gap: 4px; margin-top: 8px; overflow-x: auto; }
.sq-emotes button { width: 40px; height: 40px; flex: none; padding: 4px; background: #191616; }
.sq-emotes button:active { transform: translateY(2px); }
.sq-emotes img, .sq-emotes svg { width: 100%; height: 100%; image-rendering: pixelated; }
.x { width: 30px; height: 30px; flex: none; color: var(--muted); font: 400 22px/1 var(--display); background: transparent; }
.play.squad { background: linear-gradient(#2a3a1c, #18220f); }
.friends h3 { margin: 14px 0 6px; font: 400 18px var(--display); color: var(--red-b); text-transform: uppercase; letter-spacing: 0.05em; }
.fr-code { display: flex; align-items: center; gap: 10px; padding: 10px; background: #191616; }
.fr-code small { color: var(--muted); }
.fr-code b { flex: 1; font: 400 30px/1 var(--display); letter-spacing: 0.14em; color: #fff; }
.fr-add { display: flex; gap: 6px; margin-top: 8px; }
.fr-add input { flex: 1; min-width: 0; height: 40px; padding: 0 10px; background: #0f0d0d; color: #fff; border: 0; box-shadow: inset 0 0 0 2px var(--line); font: 400 22px var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.fr-list { display: grid; gap: 5px; max-height: 42vh; overflow-y: auto; }
.fr-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; background: #191616; }
.fr-row span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fr-row b { font: 400 19px/1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-row small { color: var(--muted); font-size: 13px; }
.fr-row.on small { color: #fff; font-weight: 700; }
.fr-row.req { background: #1d241a; }
.sq-invite .sq-who { display: flex; align-items: center; gap: 10px; padding: 10px; background: #191616; margin: 8px 0; }
.sq-invite .sq-who b { font: 400 24px var(--display); flex: 1; }

/* PLAY with its mode dropdown attached underneath */
.play-stack { margin: 4px; }
.play-stack .play { width: 100%; margin: 0; }
.play-stack .mode-pick.attached { width: 100%; margin: 0; padding: 9px 12px 10px; background: #1b1414; position: relative; z-index: 0;
  box-shadow: -4px 0 0 0 #fff, 4px 0 0 0 #fff, 0 4px 0 0 #fff, inset 0 4px 0 var(--red-d), inset 0 -4px 0 rgba(0, 0, 0, 0.45); }
.play-stack .mode-pick.attached b { font-size: 24px; }
.play-stack .mode-pick.attached .wi { width: 34px; height: 34px; }
.play-stack .mode-pick.attached:active { transform: translateY(2px); }
.play { animation: play-breathe 2.4s ease-in-out infinite; }
@keyframes play-breathe { 50% { filter: brightness(1.12); } }

/* The daily supplies popup */
.daily .daily-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 10px; position: relative; }
.daily .daily-hero::before { content: ''; position: absolute; inset: 10% 25%; background: radial-gradient(closest-side, var(--rc), transparent); opacity: 0.35; animation: daily-glow 1.4s ease-in-out infinite; }
.daily .daily-hero .art { position: relative; animation: daily-bob 1.6s ease-in-out infinite; }
.daily .daily-hero b { position: relative; font: 400 30px var(--display); color: var(--rc); text-transform: uppercase; letter-spacing: 0.04em; }
@keyframes daily-glow { 50% { opacity: 0.6; transform: scale(1.08); } }
@keyframes daily-bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.btn.big { width: 100%; height: 56px; font-size: 28px; margin-top: 12px; }

/* Coins and gems flying into the wallet */
.fly-coin, .fly-gem { position: fixed; z-index: 200; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; }
.fly-coin .wi, .fly-gem .wi { width: 26px; height: 26px; }
.daily .huge { width: 112px; height: 112px; }
.daily .huge img { width: 100%; height: 100%; image-rendering: pixelated; }
.fr-code { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.fr-code small { grid-column: 1 / -1; }
.fr-code b { white-space: nowrap; }
/* the close button on every sheet */
.sheet-x { position: sticky; top: 0; float: right; z-index: 5; width: 42px; height: 42px; margin: -4px -4px 4px 8px; background: #0d0b0b; color: #fff; font: 400 34px/1 var(--display);
  box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line); }
.sheet-x:active { transform: translateY(2px); background: var(--red-d); }
#modal[data-nox="1"] .sheet-x { display: none; }

/* ---------- Command (membership) ---------- */
.cmd-card { display: grid; grid-template-columns: 1fr; gap: 2px; width: calc(100% - 6px); margin: 3px 3px 10px; padding: 14px 14px 12px; text-align: left; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2b2207, #120e05 60%, #2b2207); color: #f8e6a6;
  box-shadow: 0 -3px 0 0 #f2c14e, 0 3px 0 0 #f2c14e, -3px 0 0 0 #f2c14e, 3px 0 0 0 #f2c14e; }
.cmd-card::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 230, 150, 0.22), transparent); animation: cmd-shine 3.2s ease-in-out infinite; }
@keyframes cmd-shine { 60%, 100% { left: 130%; } }
.cmd-card b { font: 400 34px/0.9 var(--display); letter-spacing: 0.08em; color: #f2c14e; text-shadow: 2px 2px 0 #000; }
.cmd-card span { font-size: 14px; color: #e8d9a8; }
.cmd-card small { font: 400 18px var(--display); color: #fff; letter-spacing: 0.04em; text-transform: uppercase; }
.cmd-card.on b::after { content: ' ★'; }
.cmd-sheet .cmd-hero { text-align: center; padding: 14px 0 6px; }
.cmd-sheet .cmd-hero b { display: block; font: 400 52px/0.9 var(--display); letter-spacing: 0.1em; color: #f2c14e; text-shadow: 3px 3px 0 #000, 0 0 24px rgba(242, 193, 78, 0.45); }
.cmd-sheet .cmd-hero small { color: var(--muted); font: 400 16px var(--display); letter-spacing: 0.2em; text-transform: uppercase; }
.cmd-perks { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.cmd-perks li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; background: #17140c; font-size: 15px; }
.cmd-perks .wi { width: 26px; height: 26px; flex: none; }
.cmd-perks b { color: #f2c14e; font-weight: 600; }
.cmd-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cmd-plan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 6px 10px; background: #17140c; color: #fff;
  box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line); }
.cmd-plan.best { background: #2b2207; box-shadow: 0 -3px 0 0 #f2c14e, 0 3px 0 0 #f2c14e, -3px 0 0 0 #f2c14e, 3px 0 0 0 #f2c14e; }
.cmd-plan .tag { position: absolute; top: -10px; background: #f2c14e; color: #000; }
.cmd-plan b { font: 400 22px var(--display); letter-spacing: 0.05em; text-transform: uppercase; }
.cmd-plan em { font: 400 30px/1 var(--display); font-style: normal; color: #f2c14e; }
.cmd-plan em small { font-size: 16px; color: var(--muted); }
.cmd-plan > small { font-size: 12px; color: var(--muted); text-align: center; }
.cmd-plan:active { transform: translateY(2px); }
.legal { font-size: 11px; line-height: 1.35; color: var(--muted); margin: 10px 0 6px; }
.legal a { color: #cfc6b0; }
.cmd-up { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; margin: 8px 0 2px; padding: 10px 12px; text-align: left; background: #1c1709; color: #e8d9a8;
  box-shadow: 0 -2px 0 0 #f2c14e, 0 2px 0 0 #f2c14e, -2px 0 0 0 #f2c14e, 2px 0 0 0 #f2c14e; }
.cmd-up b { font: 400 22px var(--display); color: #f2c14e; letter-spacing: 0.06em; }
.cmd-up span { font-size: 13px; line-height: 1.25; }
.cmd-up em { font-style: normal; color: #fff; font-weight: 600; }
.cmd-up small { font: 400 15px var(--display); color: #000; background: #f2c14e; padding: 3px 6px; text-transform: uppercase; }
.sheet-x { align-self: flex-end; }

/* ---------- Accounts ---------- */
.acct { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 4px 0 10px; background: #191616; }
.acct > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acct b { font: 400 20px var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
.acct small { color: var(--muted); font-size: 13px; }
.acct.on b { color: #fff; }
.acct #acct-in { background: #000; color: #fff; box-shadow: 0 0 0 2px #fff; white-space: nowrap; }
.acct-del { align-self: flex-start; color: var(--muted); margin: -4px 0 8px; }
.save-chip { display: flex; align-items: center; gap: 10px; width: calc(100% - 6px); margin: 3px 3px 6px; padding: 8px 12px; background: #170c0d; text-align: left; box-shadow: 0 -2px 0 0 var(--red), 0 2px 0 0 var(--red), -2px 0 0 0 var(--red), 2px 0 0 0 var(--red); }
.save-chip .wi { width: 24px; height: 24px; flex: none; }
.save-chip span { display: flex; flex-direction: column; }
.save-chip b { font: 400 19px var(--display); color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }
.save-chip small { color: var(--muted); font-size: 12px; }
.pick2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.pick2 .btn { height: auto; padding: 10px 6px; display: flex; flex-direction: column; gap: 2px; }
.pick2 small { font: 400 13px var(--body); text-transform: none; opacity: 0.85; }
.g-btn { display: flex; justify-content: center; padding: 16px 0 8px; }
.tag.gold { background: #f2c14e; color: #000; }

/* ---------- The website hook (js/hook.js) ---------- */
#hook-ui { position: fixed; inset: 0; z-index: 40; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: max(14px, env(safe-area-inset-top)) 14px max(22px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.55) 100%); }
.hook-live { align-self: flex-start; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(0, 0, 0, 0.75); font: 400 18px var(--display); letter-spacing: 0.08em; color: #fff; }
.hook-live i { width: 10px; height: 10px; background: #e0242d; animation: sq-blink 1s steps(2) infinite; box-shadow: 0 0 8px #e0242d; }
.hook-you { display: flex; align-items: center; gap: 6px; padding: 5px 10px; background: rgba(0, 0, 0, 0.7); color: #fff; font: 400 17px var(--display); text-transform: uppercase; letter-spacing: 0.06em; transform: translateY(-46px); animation: hook-bob 1.4s ease-in-out infinite; }
.hook-you .wi { width: 20px; height: 20px; }
@keyframes hook-bob { 50% { transform: translateY(-54px); } }
.hook-cta { pointer-events: auto; width: min(100%, 420px); display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.hook-cta > b { font: 400 30px var(--display); color: #fff; text-shadow: 2px 2px 0 #000; }
.hook-cta > small { color: #ddd; }
.hook-jump { display: flex; flex-direction: column; align-items: center; padding: 18px 12px 14px; background: var(--red); color: #fff; animation: hook-pulse 1.1s ease-in-out infinite;
  box-shadow: 0 -4px 0 0 #fff, 0 4px 0 0 #fff, -4px 0 0 0 #fff, 4px 0 0 0 #fff, inset 0 -6px 0 var(--red-d), 0 0 40px rgba(224, 36, 45, 0.6); }
.hook-jump b { font: 400 58px/0.85 var(--display); letter-spacing: 0.04em; text-shadow: 3px 3px 0 var(--red-d); }
.hook-jump small { margin-top: 6px; font: 400 17px var(--display); text-transform: uppercase; letter-spacing: 0.06em; }
.hook-jump:active { transform: translateY(3px); }
@keyframes hook-pulse { 50% { transform: scale(1.04); filter: brightness(1.15); } }
body.hook-idle .tabbar, body.hook-idle #home { display: none !important; }
#hook-coach { position: fixed; left: 50%; bottom: 34%; z-index: 45; transform: translateX(-50%); pointer-events: none; padding: 10px 16px; background: rgba(0, 0, 0, 0.85); text-align: center; min-width: 240px;
  box-shadow: 0 -3px 0 0 #f2c14e, 0 3px 0 0 #f2c14e, -3px 0 0 0 #f2c14e, 3px 0 0 0 #f2c14e; animation: coach-in 0.35s steps(4); }
#hook-coach b { display: block; font: 400 26px var(--display); color: #f2c14e; letter-spacing: 0.04em; text-transform: uppercase; }
#hook-coach small { color: #eee; font-size: 14px; }
#hook-coach.hide { display: none; }
@keyframes coach-in { from { transform: translate(-50%, -12px); opacity: 0; } }
.hook-glow { animation: hook-glow 0.8s ease-in-out infinite !important; z-index: 46; position: relative; }
@keyframes hook-glow { 50% { box-shadow: 0 0 0 4px #f2c14e, 0 0 26px 6px rgba(242, 193, 78, 0.85); } }
.hook-gate { text-align: center; align-items: stretch; }
.hook-verdict { font: 400 52px/0.9 var(--display); color: #fff; letter-spacing: 0.05em; text-shadow: 3px 3px 0 var(--red-d); margin: 10px 0 4px; }
.hook-gate.win .hook-verdict { color: #f2c14e; text-shadow: 3px 3px 0 #000, 0 0 30px rgba(242, 193, 78, 0.5); }
.hook-pitch { font-size: 17px; margin: 6px 0 10px; }
.hook-perks { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 5px; font: 400 18px var(--display); text-transform: uppercase; letter-spacing: 0.04em; color: #ddd; }
.hook-perks li::before { content: '■ '; color: var(--red); }
.hook-store { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.hook-notify { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: #191616; text-align: left; }
.hook-notify b { font: 400 22px var(--display); text-transform: uppercase; color: #fff; }
.hook-notify small { color: var(--muted); }
.hook-notify .fr-add input { text-transform: none; letter-spacing: 0; font: 400 17px var(--body); }

#hook-load { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #0b0b0b; }
#hook-load b { font: 400 30px var(--display); color: #fff; letter-spacing: 0.06em; text-transform: uppercase; }
#hook-load i { display: block; width: 0; max-width: 220px; height: 6px; background: var(--red); box-shadow: 0 0 0 2px #333; transition: width 0.1s linear; align-self: center; }
#hook-ui { background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.35) 100%); }
.mode-pick .mp-label { display: block; font: 400 14px var(--display); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red-b); margin-bottom: 2px; }
.play-stack + .card.squad { margin-top: 12px; }

/* ---------- final-pass animations ---------- */
/* crates: three rattles that build, then light rays and a burst in the rarity colour */
.crate-stage { position: relative; overflow: hidden; }
.crate-stage .big.charge { animation: crate-charge 0.82s linear forwards; }
@keyframes crate-charge {
  0%, 30% { transform: rotate(0); } 8% { transform: rotate(-6deg) scale(1.02); } 16% { transform: rotate(6deg); } 24% { transform: rotate(-4deg); }
  38% { transform: rotate(10deg) scale(1.05); } 46% { transform: rotate(-10deg); } 54% { transform: rotate(6deg); } 60% { transform: rotate(0); }
  68% { transform: rotate(-16deg) scale(1.1); } 76% { transform: rotate(16deg) scale(1.12); } 84% { transform: rotate(-12deg); } 92% { transform: rotate(10deg) scale(1.16); filter: brightness(1.6); }
  100% { transform: scale(1.2); filter: brightness(2.2); }
}
.crate-stage .rays { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none; opacity: 0.5;
  background: repeating-conic-gradient(from 0deg, var(--rc) 0deg 10deg, transparent 10deg 30deg); -webkit-mask: radial-gradient(circle, #000 15%, transparent 62%); mask: radial-gradient(circle, #000 15%, transparent 62%);
  animation: rays-spin 9s linear infinite, rays-in 0.5s ease-out; }
@keyframes rays-spin { to { transform: rotate(360deg); } }
@keyframes rays-in { from { opacity: 0; transform: scale(0.3); } }
.crate-stage .burst { top: 50%; }
.crate-stage .loot { position: relative; animation: pop 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
.crate-stage .loot.top .rar { animation: top-glow 0.9s ease-in-out infinite; }
@keyframes top-glow { 50% { text-shadow: 0 0 16px var(--rc), 0 0 2px #fff; } }

/* victory: the verdict stamps down, confetti falls */
.result-head { position: relative; overflow: hidden; }
.result-head.win .verdict { animation: stamp 0.55s cubic-bezier(.2, 1.7, .35, 1) both 0.15s; }
@keyframes stamp { from { transform: scale(2.4) rotate(-6deg); opacity: 0; } 60% { opacity: 1; } }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 7px; height: 11px; background: var(--c); animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translateY(260px) rotate(540deg); opacity: 0.2; } }

/* tabs slide in; buttons press */
.page.enter > * { animation: page-rise 0.32s ease-out both; }
.page.enter > *:nth-child(2) { animation-delay: 0.04s; } .page.enter > *:nth-child(3) { animation-delay: 0.08s; }
.page.enter > *:nth-child(4) { animation-delay: 0.12s; } .page.enter > *:nth-child(n+5) { animation-delay: 0.16s; }
@keyframes page-rise { from { transform: translateY(8px); } }
.btn:active, .chip:active, .crate:active, .mode-opt:active { transform: translateY(2px) scale(0.98); }
.wallet .chip.bump { animation: bump 0.5s steps(4); }
@media (prefers-reduced-motion: reduce) { .page.enter > *, .crate-stage .rays, .confetti i { animation: none !important; } }

/* deal of the day */
.deal { display: grid; grid-template-columns: 72px 1fr auto; grid-template-rows: auto 1fr; gap: 4px 12px; align-items: center; margin: 3px 3px 12px; padding: 12px; background: linear-gradient(135deg, #24133a, #120b1d);
  box-shadow: 0 -3px 0 0 #a15be0, 0 3px 0 0 #a15be0, -3px 0 0 0 #a15be0, 3px 0 0 0 #a15be0; }
.deal-tag { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; font: 400 20px var(--display); letter-spacing: 0.08em; color: #d6b2ff; }
.deal-tag small { font: 400 14px var(--display); color: #fff; letter-spacing: 0.04em; animation: blink-soft 2s ease-in-out infinite; }
@keyframes blink-soft { 50% { opacity: 0.55; } }
.deal-cv { width: 72px; height: 72px; image-rendering: pixelated; }
.deal-txt { display: flex; flex-direction: column; min-width: 0; }
.deal-txt b { font: 400 22px var(--display); text-transform: uppercase; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-txt small { color: var(--muted); }
.deal-txt span { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.deal-txt s { opacity: 0.55; display: inline-flex; align-items: center; }
.deal-txt em { font: 400 22px var(--display); font-style: normal; color: #3fd0e0; display: inline-flex; align-items: center; }
.deal-txt .wi { width: 16px; height: 16px; }
.deal-txt .off { font: 400 15px var(--display); font-style: normal; background: #e0242d; color: #fff; padding: 1px 6px; }

/* ---------- squad voice chat (js/voice.js) ---------- */
.voice-out { display: none; }
.sq-vc { display: inline-grid; place-items: center; width: 22px; height: 22px; opacity: 0.85; }
.sq-vc .wi { width: 18px; height: 18px; }
.sq-vc.mu { opacity: 0.5; }
.sq-m.talk .sq-dot { box-shadow: 0 0 0 3px #f2eee6, 0 0 12px 4px var(--c); }
.sq-m.talk .sq-vc { animation: vtalk 0.5s steps(2) infinite; }
@keyframes vtalk { 50% { transform: scale(1.18); } }
.sq-mic { display: inline-flex; align-items: center; gap: 6px; }
.sq-mic .wi { width: 20px; height: 20px; }
.sq-mic.live { background: #1f5a2a; }
.sq-mic.mu, .sq-mic.off { background: #3a1416; }
#h-mic.muted { background: #3a1416; }
#h-mic.talk { box-shadow: 0 -3px 0 0 #8ee03a, 0 3px 0 0 #8ee03a, -3px 0 0 0 #8ee03a, 3px 0 0 0 #8ee03a; }
.vtalk { position: fixed; left: 8px; top: calc(env(safe-area-inset-top) + 150px); z-index: 6; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; background: rgba(10, 10, 10, 0.82); color: #fff; font: 400 15px var(--display); text-transform: uppercase; letter-spacing: 0.04em; pointer-events: none; }
.vtalk .wi { width: 16px; height: 16px; }
.fr-push { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 10px; background: #1d1a14; border: 2px solid #3a3020; }
.fr-push > .wi { width: 28px; height: 28px; flex: none; }
.fr-push span { flex: 1; display: flex; flex-direction: column; }
.fr-push small { color: var(--muted); }
.fr-row .btn.small .wi { width: 16px; height: 16px; margin-right: 4px; }

/* ---------- clips (js/clips.js) ---------- */
.hud-btn.rec .wi { width: 24px; height: 24px; }
body.clipmode #hud > *:not(.hud-top), body.clipmode .hud-top > *:not(.hud-btns), body.clipmode .hud-btns > *, body.clipmode .sword.pop, body.clipmode #cine-cap, body.clipmode #toasts { visibility: hidden !important; }
body.clipmode #h-board, body.clipmode #h-vtalk { visibility: hidden !important; }
#clip-ui { position: fixed; z-index: 60; top: calc(env(safe-area-inset-top) + 10px); right: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; background: rgba(0, 0, 0, 0.7); color: #fff; font: 400 18px var(--display); letter-spacing: 0.05em; }
#clip-ui .clip-dot { width: 12px; height: 12px; border-radius: 50%; background: #e0242d; animation: blink 1s steps(2) infinite; }
#clip-ui.ending .clip-dot { animation: none; background: #8a8580; }
@keyframes blink { 50% { opacity: 0.2; } }
.clip-sheet .clip-vid { display: block; width: 100%; max-height: 52vh; object-fit: contain; background: #000; margin: 6px 0 10px; }
.clip-sheet .note .wi { width: 16px; height: 16px; vertical-align: -3px; }
.replay { display: grid; gap: 8px; justify-items: center; margin: 10px 0; }
.replay canvas { width: min(62vw, 230px); aspect-ratio: 9 / 16; height: auto; background: #0b0b0b; box-shadow: 0 0 0 3px #000, 0 0 0 5px #2b2727; }
.replay .btn .wi, .clip-ready .wi { width: 20px; height: 20px; margin-right: 6px; }
.clip-ready { width: 100%; margin-bottom: 8px; }
button.sq-vc { border: 0; padding: 0; background: transparent; cursor: pointer; }
button.sq-vc.mu { opacity: 0.6; }

/* Compact upgrade values, calm movement and first-party discovery. */
.tac .stats, .perk .stats, .ab-stats td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tac .stats > span { max-width: 100%; }
.house-promo > small { display: block; color: var(--muted); margin-bottom: 8px; }
.house-promo a { display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; }
.house-promo a > .wi { width: 32px; height: 32px; flex: none; }
.house-promo a > span:first-of-type { flex: 1; }
.house-promo b, .house-promo a small { display: block; }
.house-promo a small { color: var(--muted); margin-top: 4px; }
#h-sword { touch-action: none; }
@media (prefers-reduced-motion: reduce) {
  .carousel .track, .ab-sheet, .pips i { transition: none !important; animation: none !important; }
}

/* Feedback stays short so controls remain readable during a war. */
.btn, .tbtn, .chip { transition: transform 120ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out; }
.btn:active, .tbtn:active, .chip:active { transform: translateY(1px) scale(.97); }
#h-voice.on { color: #a9dba9; box-shadow: inset 0 -2px #75b47a; }
@media (prefers-reduced-motion: reduce) { .btn, .tbtn, .chip { transition: none; } }

/* Scroll tall sheets instead of collapsing their headings and controls. */
.sheet-box > * { flex-shrink: 0; }
.replay canvas { width: min(38vw, 150px); }
.pv-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 0; border-top: 2px solid var(--line); }
.pv-row > span { grid-column: 1 / -1; overflow-wrap: anywhere; }
.pv-row .btn { min-width: 0; padding: 8px; }

/* A movie uses the available screen width without a separate map frame. */
.clip-sheet { width: 100%; max-width: none; padding-left: 0; padding-right: 0; }
.clip-sheet > :not(video) { margin-left: 18px; margin-right: 18px; }
.clip-sheet .clip-vid { width: 100%; max-height: 70vh; border: 0; margin: 0; object-fit: contain; }
.film-choice { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.film-choice select { margin-left: auto; }
.weapon-counter { position: fixed; top: 130px; left: 50%; transform: translateX(-50%); z-index: 30; background: #a51d28; max-width: 90vw; }

#modal:has(.clip-sheet) { padding: 0; }
.clip-sheet { border: 0; box-shadow: none; clip-path: none; }
#modal:has(.clip-sheet){background:#090c11;padding:0}.clip-sheet{position:relative;isolation:isolate;height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:transparent;border-radius:0;padding:0!important}.clip-sheet .clip-backdrop{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(24px) brightness(.35);z-index:-2}.clip-sheet .clip-vid{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;z-index:-1}.clip-sheet .note,.clip-sheet .actions,.clip-sheet #clip-x{background:#07101877;backdrop-filter:blur(16px);border-radius:12px}.clip-sheet .note{padding:10px;margin-top:auto}.clip-sheet .actions{padding:10px}.clip-sheet #clip-x{margin-bottom:env(safe-area-inset-bottom,12px)}.film-render{position:absolute;top:7vh;max-width:300px;background:#09111cb3!important;backdrop-filter:blur(18px);border-radius:16px!important}.film-render h2{font-size:24px}.film-render p{margin:5px 0}#modal:has(.film-render){background:transparent}

/* Home: clear color landmarks and restrained motion. */
.home-profile { background: linear-gradient(115deg, #20161a, #17181c 60%); border-left: 3px solid #e0242d; }
.home-supply { background: linear-gradient(120deg, #262017, #17181c 70%); border-left: 3px solid #d9a441; }
.home-orders { background: linear-gradient(120deg, #14232a, #17181c 70%); border-left: 3px solid #4f9caf; }
.home-supply h3 { color: #edc777; }
.home-orders h3 { color: #83c9da; }
#tab-play .play { background: linear-gradient(115deg, #c8202a, #eb3f3c); }
#tab-play .card { transition: border-color .18s ease, background-color .18s ease; }
#tab-play .linkrow .btn { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { #tab-play .card { transition: none; } }
/* Squad staging: each nation occupies a raised platform with readiness overhead. */
.squad.on .sq-members{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;background:radial-gradient(ellipse at 50% 85%,#4c2638 0%,#111623 65%);padding:24px 10px 14px;min-height:190px}
.squad.on .sq-m{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:110px;flex:1;max-width:160px;padding:8px;background:transparent;border:0}
.sq-ready-badge{color:#eee;font-size:13px;padding:4px 8px;background:#292d38;border:1px solid #555;margin-bottom:10px}
.rdy .sq-ready-badge{background:#163a30;border-color:#4fc78c;color:#a4ffd0}
.sq-podium{position:relative;width:84px;height:66px;display:grid;place-items:center;margin-bottom:20px;filter:drop-shadow(0 0 12px #dd394944)}
.sq-podium svg,.sq-podium img{width:44px;height:44px}
.sq-podium:after{content:"";position:absolute;bottom:-16px;width:100px;height:24px;border-radius:50%;background:linear-gradient(#717788,#222734);border-bottom:7px solid #111621;box-shadow:0 4px 18px #ff334433}
.rdy .sq-podium:after{box-shadow:0 4px 20px #59df9977}
.squad.on .sq-m .sq-dot{position:absolute;top:54px;left:calc(50% - 4px)}
.house-promo img{width:86px;height:110px;object-fit:cover;object-position:top;border-radius:6px}
.promo-break .house-promo img{width:120px;height:220px}
.promo-break video{width:120px;height:220px;object-fit:contain;background:#10151c;border-radius:6px}
@media(prefers-reduced-motion:no-preference){.sq-podium{animation:squad-hover 4s ease-in-out infinite}.sq-m:nth-child(2) .sq-podium{animation-delay:-1s}.sq-m:nth-child(3) .sq-podium{animation-delay:-2s}@keyframes squad-hover{50%{transform:translateY(-4px)}}}
.film-lengths{display:flex;gap:10px;margin:18px 0}.film-lengths .btn{flex:1;display:flex;flex-direction:column;padding:15px}.film-lengths small{font-size:12px;opacity:.65;margin-top:4px}.film-lengths .on{border-color:#e43b45;background:#3b2026}.film-lengths .locked{opacity:.7}

.watch-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:40;background:#121216ed;border:1px solid #e0242d;padding:12px;display:flex;gap:12px;align-items:center;max-width:95vw}.watch-bar select{max-width:40vw;background:#222;color:white;padding:8px}
.intensity-picker{display:grid;grid-template-columns:1fr auto;gap:7px;padding:12px;color:#adaaaa}.intensity-picker input,.intensity-picker small{grid-column:1/-1;width:100%}.intensity-picker b{color:#ef6b48}.intensity-picker small{font-size:12px}
.sq-podium{height:115px;perspective:450px}.sq-soldier{position:relative;width:66px;height:112px;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(-5deg)}.soldier-part{position:absolute;transform-style:preserve-3d;--w:24px;--h:38px;--d:14px;width:var(--w);height:var(--h)}.soldier-part b{position:absolute;display:block;background:var(--uniform);border:1px solid #0004;backface-visibility:hidden}.soldier-part .front,.soldier-part .back{width:var(--w);height:var(--h)}.soldier-part .front{transform:translateZ(calc(var(--d)/2))}.soldier-part .back{transform:rotateY(180deg) translateZ(calc(var(--d)/2))}.soldier-part .left,.soldier-part .right{width:var(--d);height:var(--h);left:calc((var(--w) - var(--d))/2);background:color-mix(in srgb,var(--uniform),black 30%)}.soldier-part .left{transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}.soldier-part .right{transform:rotateY(90deg) translateZ(calc(var(--w)/2))}.soldier-part .top,.soldier-part .bottom{width:var(--w);height:var(--d);top:calc((var(--h) - var(--d))/2)}.soldier-part .top{transform:rotateX(90deg) translateZ(calc(var(--h)/2));background:color-mix(in srgb,var(--uniform),white 20%)}.soldier-part .bottom{transform:rotateX(-90deg) translateZ(calc(var(--h)/2))}.soldier-part.head{--w:25px;--h:24px;--d:22px;left:21px;top:0;--uniform:#74766b}.soldier-part.head .front{background:linear-gradient(#74766b 40%,#292c26 40% 62%,#b4a68b 62%)}.soldier-part.body{left:20px;top:26px}.soldier-part.arm-left,.soldier-part.arm-right{--w:11px;--h:39px;--d:12px;top:27px;transform:rotateZ(5deg)}.soldier-part.arm-left{left:6px}.soldier-part.arm-right{left:47px;transform:rotateZ(-5deg)}.soldier-part.leg-left,.soldier-part.leg-right{--w:12px;--h:39px;--d:14px;top:66px;--uniform:#343831}.soldier-part.leg-left{left:19px}.soldier-part.leg-right{left:35px}.squad-flag{position:absolute;left:65px;top:8px;width:26px;height:70px;border-left:3px solid #777;transform:translateZ(-9px)}.squad-flag:after{content:"";display:block;height:18px;background:linear-gradient(135deg,var(--uniform) 55%,#eee 55% 65%,#181818 65%);transform:rotateY(-15deg)}
@media(prefers-reduced-motion:no-preference){.sq-soldier{animation:soldier-idle 5s ease-in-out infinite}@keyframes soldier-idle{50%{transform:rotateY(-17deg) rotateX(-5deg) translateY(-2px)}}}

.intensity-picker{border:1px solid #383336;border-left:3px solid var(--intensity);background:#171316}.intensity-picker b{color:var(--intensity)}.intensity-picker input[type=range]{appearance:none;height:8px;border-radius:0;background:linear-gradient(to right,var(--intensity) 0 var(--fill),#363036 var(--fill) 100%);cursor:pointer}.intensity-picker input::-webkit-slider-thumb{appearance:none;width:22px;height:22px;background:var(--intensity);border:3px solid #f4ede6;box-shadow:0 0 0 2px #101012}.intensity-picker input::-moz-range-thumb{width:17px;height:17px;background:var(--intensity);border:3px solid #f4ede6;border-radius:0}.intensity-scale{grid-column:1/-1;display:flex;justify-content:space-between;gap:3px;font-size:11px;color:#827a7f}.intensity-scale .on{color:var(--intensity)}.intensity-picker small{color:#cbc1c5;min-height:17px}.intensity-picker input:disabled{opacity:.5;cursor:default}

/* Brief, non-interactive declaration below the HUD; emergency controls keep priority. */
#war-title{position:absolute;top:calc(env(safe-area-inset-top) + 86px);left:50%;transform:translate(-50%,-8px);display:flex;align-items:center;gap:9px;max-width:min(90vw,460px);padding:7px 12px;background:rgba(11,13,17,.82);border-bottom:1px solid #ba3138;opacity:0;pointer-events:none;z-index:3;transition:opacity .18s,transform .25s}
#war-title.show{opacity:1;transform:translate(-50%,0)}#war-title canvas{width:30px;height:22px;image-rendering:pixelated;flex:none}#war-title span{text-align:center;min-width:0}#war-title small{display:block;color:#ef6268;font-size:10px;letter-spacing:2px}#war-title b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#war-title i{font-style:normal;color:#8f969f}#war-title>.ic{width:19px;flex:none;animation:war-clash .5s ease-out}
@keyframes war-clash{0%{transform:scale(1.5) rotate(-12deg);filter:brightness(3)}100%{transform:scale(1) rotate(0);filter:brightness(1)}}

/* Incoming defense stays at the top, in the same square war frames as the HUD. */
.weapon-counter{top:calc(env(safe-area-inset-top) + 72px);z-index:80;border:2px solid #f3545d;border-radius:0;min-height:46px;font-family:var(--body);font-weight:bold;box-shadow:0 3px 0 #480b10,0 0 18px #e0242d44;animation:counter-alert 1s ease-in-out infinite}
@keyframes counter-enter{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes counter-alert{50%{box-shadow:0 3px 0 #480b10,0 0 24px #e0242d99}}
@media(prefers-reduced-motion:reduce){.weapon-counter,.counter-card{animation:none}}

/* Video actions share the battle's square controls and clear price hierarchy. */
.film-options,.film-render{border-radius:2px!important;border:1px solid #773238!important;box-shadow:0 0 0 3px #121318,0 18px 60px #0009!important}
.film-choice select{margin-left:auto;background:#181b22;color:#f4f1e9;border:1px solid #5a626d;padding:8px;font:inherit}
.film-options .actions{flex-wrap:wrap;gap:8px}.film-options .film-choice{display:flex;gap:10px;align-items:center}

/* Locker categories remain reachable on narrow screens and by keyboard. */
.locker-selector{display:flex;align-items:center;gap:6px}.locker-selector .slots{flex:1;min-width:0;scroll-behavior:smooth;scroll-snap-type:x proximity}.locker-selector .slots button{scroll-snap-align:center;transition:background .15s,color .15s}.locker-arrow{flex:none;width:34px;height:36px;background:#292424;color:var(--fg);font-size:20px}.locker-position{font-size:12px;color:var(--muted);margin:7px 0;text-align:center}

/* Keep feedback responsive without changing the authoritative defense timing. */
.intensity-picker{transition:border-color .18s,background-color .18s}
.intensity-picker b,.intensity-scale span{transition:color .18s}
.intensity-picker input::-webkit-slider-thumb{transition:background-color .18s,box-shadow .18s}
.intensity-picker input:active::-webkit-slider-thumb{box-shadow:0 0 0 2px #101012,0 0 16px var(--intensity)}
.intensity-picker input::-webkit-slider-runnable-track{height:8px;background:linear-gradient(to right,var(--intensity) 0 var(--fill),#363036 var(--fill) 100%);box-shadow:inset 0 0 0 1px #101012}
.intensity-picker input::-moz-range-track{height:8px;background:linear-gradient(to right,var(--intensity) 0 var(--fill),#363036 var(--fill) 100%)}
.film-lengths .ic{width:15px;height:15px;vertical-align:middle}

#war-title .war-country{display:flex;flex-direction:column;align-items:center;gap:4px;width:135px;max-width:34vw}#war-title .war-country b{width:100%;font-size:13px}#war-title .war-vs{font-size:23px;color:#ed535b;animation:war-clash .5s ease-out}#war-title{gap:16px}


/* Counter input and confirmed attempt results use separate visual states. */


.future-mode{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:10px 12px;margin:8px 0;background:linear-gradient(110deg,#301716,#151719);border:1px solid #755147;color:#f4e4ce;cursor:pointer}.future-mode>.wi{width:32px;height:32px;flex:none}.future-mode span{display:grid;gap:2px}.future-mode small{color:#eda46c;font-size:10px;letter-spacing:1px}.future-mode b{font-family:var(--display);font-size:22px}.future-mode em{font-style:normal;font-size:12px;color:#d1c3b8}.future-mode:active{transform:translateY(2px)}.future-salvo{display:flex;justify-content:center;gap:20px;padding:20px;background:radial-gradient(ellipse,#5d282233,transparent)}.future-salvo .wi{width:48px;height:48px}.store-guide p{margin:5px 0;font-size:13px;color:#c5c7ca}.store-guide b{color:#f0d6a6}

.house-promo{position:relative}.promo-dismiss{position:absolute;right:5px;top:3px;border:0;background:transparent;color:#aaa;font-size:22px;padding:0 6px;cursor:pointer}.house-promo>small{padding-right:28px}
/* Permanent identity, pass presentation and restrained idle motion. */
.match-estimate{display:block;color:#baa991;font-size:13px;font-style:normal;margin-top:5px}
.pass-hero{position:relative;overflow:hidden;border-top:3px solid #d9a441;background:radial-gradient(ellipse at 80% 10%,#55422644,transparent 60%),#141316}
.pass-hero h2{font-size:32px;margin:8px 0}.pass-hero .preview{max-height:190px}.pass-benefits{display:flex;flex-wrap:wrap;gap:12px;font-size:13px}.pass-benefits span{display:flex;align-items:center;gap:5px}.pass-benefits .wi{width:19px;height:19px}
.collection-card{border:1px solid #b28d36;background:linear-gradient(135deg,#292217,#141316);position:relative;overflow:hidden}.collection-card .side{animation:collection-float 5s ease-in-out infinite}.collection-card h3{margin:4px 0;font-size:27px}.collection-card p{font-size:13px;line-height:1.4;margin:5px 0}.collection-card del{font-size:13px;color:#beb2a0;margin-right:5px}.collection-owned{border-left:3px solid #65c098}.offer-clock{color:#edbd61}.custom-color{display:flex;align-items:center;justify-content:center;gap:18px;padding:15px}.custom-color input{width:80px;height:50px;border:2px solid #e1cfac;background:#191719}
.pass-card,.collection-card{isolation:isolate}.pass-card:after,.collection-card:after{content:'';position:absolute;inset:-60%;background:linear-gradient(110deg,transparent 47%,#ffe4a011 50%,transparent 53%);transform:translateX(-45%);animation:collection-shine 9s ease-in-out infinite;pointer-events:none;z-index:-1}.pass-card{position:relative;overflow:hidden}
.btn,.item,.mode-opt{transition:background-color .15s,box-shadow .15s,filter .15s}.btn:active,.item:active{filter:brightness(1.15)}.crate.has:not(:active) .side{animation:collection-float 5.5s ease-in-out infinite}.promo-break .sheet-box{margin-top:auto}.house-promo{margin-bottom:0}
@keyframes collection-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes collection-shine{0%,65%{transform:translateX(-45%)}85%,100%{transform:translateX(45%)}}
@media(prefers-reduced-motion:reduce){.collection-card .side,.pass-card:after,.collection-card:after,.crate.has .side{animation:none}}
#promo-dock{position:fixed;left:12px;right:12px;bottom:calc(67px + var(--safe-b));z-index:5;max-width:660px;margin:auto}#promo-dock:empty{display:none}#promo-dock .house-promo{padding:5px 9px;background:#171518ee;border:1px solid #3b3434}#promo-dock .house-promo>small{font-size:10px;margin:0 0 3px}#promo-dock .house-promo img,#promo-dock .house-promo video{width:54px;height:42px;object-fit:cover;border-radius:0}#promo-dock .house-promo a{gap:8px}#promo-dock .house-promo b{font-size:15px}#promo-dock .house-promo a small{font-size:11px;margin:2px 0}.has-promo .pages{padding-bottom:155px}.promo-break{align-self:flex-end}
.diagnostics-choice{display:flex;align-items:center;gap:9px;font-size:14px;margin-top:15px}.diagnostics-choice input{accent-color:var(--red)}
/* Reserve the ad footprint so it cannot steal taps from menu controls. */
#home .pages{min-height:0;margin-bottom:calc(64px + var(--safe-b))}#home.has-promo .pages{margin-bottom:calc(145px + var(--safe-b));padding-bottom:0}#home .page{padding-bottom:25px}

/* Defense console: a visible action, a live target and explicit results. */
#h-counter {display:flex;align-items:center;gap:10px;overflow:hidden;border:2px solid #e0242d;background:linear-gradient(120deg,#3a0d10,#120607);color:#fff;text-align:left;box-shadow:0 0 16px #e0242d33;animation:defense-alert 1.4s ease-in-out infinite}
#h-counter[hidden]{display:none}#h-counter>.ic{width:28px;height:28px;flex:none}#h-counter>span{flex:1;min-width:0}#h-counter b{display:block;font-size:17px;letter-spacing:1px}#h-counter small{display:block;font-size:13px;color:#d8d2c8}#h-counter strong{font-size:22px;color:#fff}#h-counter .cw-meter{position:absolute;left:0;bottom:0;width:calc(var(--window,1)*100%);height:3px;background:#e0242d;transition:width .1s linear}
@keyframes defense-alert{50%{box-shadow:0 0 22px #e0242d66;border-color:#ff6a6a}}
@keyframes defense-scan{from{left:-35%}to{left:100%}}
@keyframes defense-impact{50%{transform:translateX(-50%) scale(1.2);filter:drop-shadow(0 0 10px #fff)}}
@media(prefers-reduced-motion:reduce){#h-counter,.defense-scan,.counter-fired .defense-contact{animation:none}}
/* The "X VS Y" war banner sits in open map space, clear of the notice line and the leaderboard. */
#hud #war-title{top:34%;z-index:3;box-shadow:0 10px 30px rgba(0,0,0,.45)}
body:has(#h-radial:not([hidden])) #hud #war-title,body:has(#h-top:not([hidden])) #hud #war-title{opacity:0}

/* ---------- PC mode (js/pc.js): mouse + keyboard on computers ---------- */
#pc-tip { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; display: flex; flex-direction: column; gap: 1px; min-width: 150px; max-width: 220px; padding: 7px 10px; background: rgba(10, 10, 10, 0.92); box-shadow: 0 0 0 2px #2c2929, 0 8px 20px rgba(0, 0, 0, 0.5); color: #f2eee6; font: 400 13px/1.25 var(--body, sans-serif); }
#pc-tip[hidden] { display: none; }
#pc-tip b { font: 400 18px/1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
#pc-tip small { color: #b9b2a6; }
body.pc [data-key]::after { content: attr(data-key); position: absolute; right: 3px; top: 2px; z-index: 2; font: 400 9px/1 var(--display); letter-spacing: 0.04em; color: #f2eee6; opacity: 0.55; pointer-events: none; }
body.pc .rally-btn[data-key] { position: relative; }
body.pc .sword.pop[data-key]::after { top: auto; bottom: -14px; right: 50%; transform: translateX(50%); opacity: 0.8; }
body.pc canvas#map, body.pc #map { cursor: crosshair; }
.pc-keys .keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; margin: 8px 0 14px; }
.pc-keys kbd { justify-self: start; padding: 3px 7px; background: #1d1b1b; box-shadow: inset 0 0 0 2px #3a3535; font: 400 15px var(--display); letter-spacing: 0.04em; color: #f2eee6; white-space: nowrap; }
.pc-keys span { color: #d8d2c6; font-size: 14px; }
/* Wide windows: roomier HUD and menus. */
body.pc-wide .dock { max-width: 900px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
body.pc-wide .tbtn { width: 64px; height: 56px; }
body.pc-wide .board { font-size: 20px; min-width: 240px; }
body.pc-wide .hud-note { max-width: 520px; }
body.pc-wide .topbar, body.pc-wide .page { max-width: 1060px; }
body.pc-wide #tab-play.page, body.pc-wide #tab-shop.page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 22px; }
body.pc-wide #tab-play.page > *, body.pc-wide #tab-shop.page > * { min-width: 0; }
body.pc-wide .tabbar { padding-left: calc(50vw - 330px); padding-right: calc(50vw - 330px); }
body.pc-wide .sheet-box { max-width: 560px; }

/* Countermeasure mini-games (js/counters.js): a docked war-palette panel, one canvas game per kind. */
.counter-card{position:fixed;z-index:85;left:10px;bottom:calc(var(--safe-b,0px) + 196px);width:min(360px,calc(100vw - 20px));background:#0b0b0b;border:2px solid #e0242d;box-shadow:0 0 0 2px #000,0 10px 30px #000a;color:#f2eee6;padding:8px 10px 10px;animation:cc-in .18s ease-out}
.counter-card header{display:flex;align-items:center;gap:8px}.counter-card header .wi,.counter-card header .ic{width:24px;height:24px;flex:none}
.counter-card header b{flex:1;font-size:16px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-clock{position:relative;width:38px;height:38px;flex:none}.cc-clock canvas{width:38px;height:38px}.cc-clock i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700}
.cc-fold{width:32px;height:32px;border:2px solid #3a3a3a;background:#151515;color:#f2eee6;font-size:18px;line-height:1}
.cc-scene{display:block;width:100%;height:132px;margin:8px 0 6px;background:#050505;border:1px solid #2d2d2d}
.cc-hint{margin:0 0 6px;font-size:13px;color:#cfc9bf}
.cc-pads{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.counter-timing .cc-pads{grid-template-columns:1fr}
.cc-pads button{min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;border:2px solid #3a3a3a;background:#161616;color:#f2eee6;font-size:14px;letter-spacing:.04em;text-transform:uppercase;transition:background-color .1s,border-color .1s,transform .06s}
.cc-pads button kbd{font:inherit;font-size:11px;color:#8f8a82;border:1px solid #4a4a4a;padding:0 4px}body:not(.pc) .cc-pads kbd{display:none}
.cc-pads button.lit{background:#e0242d;border-color:#ff6a6a;color:#fff;box-shadow:0 0 14px #e0242d88}.cc-pads button:active:not(:disabled){transform:scale(.96)}.cc-pads button:disabled{opacity:.55}
.cc-marks{display:flex;gap:6px;margin-top:8px}.cc-marks i{flex:1;height:8px;background:#222;border:1px solid #333}
.cc-marks i[data-q=hit]{background:#f2eee6}.cc-marks i[data-q=good]{background:#bdb8ae}.cc-marks i[data-q=partial]{background:#7a5a58}.cc-marks i[data-q=miss]{background:#e0242d}
.counter-card.folded{width:auto}.counter-card.folded .cc-scene,.counter-card.folded .cc-pads,.counter-card.folded .cc-marks,.counter-card.folded .cc-hint{display:none}
.counter-card[data-flash=hit]{border-color:#fff}.counter-card[data-flash=miss]{border-color:#ff2a2a;animation:cc-shake .25s}
@keyframes cc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes cc-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
body.pc-wide .counter-card{left:auto;right:16px;bottom:auto;top:150px}
@media(prefers-reduced-motion:reduce){.counter-card,.counter-card[data-flash=miss]{animation:none}}

/* UI pass 2026-10-13 */
/* Movie options: the create button on top, full width; save and back side by side under it. */
.film-options .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.film-options .actions #film-create{grid-column:1/-1;order:-1;min-height:52px}.film-options .actions .btn{white-space:nowrap}
/* Top sheets (inbox, nation): a plain close button like every other sheet. */
.ts-x{background:#111;box-shadow:0 0 0 2px #3a3a3a}.ts-x:active{background:var(--red)}
/* Settings: volume sliders. */
.vol-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;margin:6px 0 10px}.vol-row .field-label{margin:0}.vol-row b{font:400 16px var(--display);color:#fff;min-width:44px;text-align:right}
.vol-row input.vol{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0}
.vol-row input.vol::-webkit-slider-runnable-track{height:8px;background:linear-gradient(90deg,var(--red) var(--v,50%),#2a2a2a var(--v,50%));box-shadow:0 0 0 2px #000}
.vol-row input.vol::-moz-range-track{height:8px;background:linear-gradient(90deg,var(--red) var(--v,50%),#2a2a2a var(--v,50%))}
.vol-row input.vol::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-7px;background:#fff;border:3px solid #000;border-radius:0}
.vol-row input.vol::-moz-range-thumb{width:18px;height:18px;background:#fff;border:3px solid #000;border-radius:0}
/* Nations list: each nation's flag, troops and share of the land. */
.nrow .nflag{width:36px;height:24px;flex:none;image-rendering:pixelated;box-shadow:0 0 0 2px #000}.nrow .nname{flex:1;min-width:0;display:flex;flex-direction:column;text-align:left}.nrow .nname b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nrow .nname em{font-style:normal;font-size:12px;color:var(--muted)}
.nrow{grid-template-columns:36px 1fr auto auto}
/* Update timeline (Deploy card + sheet) */
.future-mode .tl-dots{display:flex;gap:4px;margin-left:auto;flex:none}.future-mode .tl-dots i{width:7px;height:7px;background:#3a3a3a}.future-mode .tl-dots i.on{background:var(--red)}
.timeline{list-style:none;margin:10px 0 14px;padding:0 0 0 14px;border-left:3px solid #2e2e2e}
.tl-row{position:relative;display:flex;align-items:center;gap:10px;padding:10px 0}.tl-row::before{content:'';position:absolute;left:-21px;top:50%;width:11px;height:11px;margin-top:-6px;background:#1a1a1a;box-shadow:0 0 0 2px #4a4a4a}
.tl-row.now::before{background:var(--red);box-shadow:0 0 0 2px #fff}.tl-v{font:400 22px var(--display);min-width:54px;color:#f2eee6}.tl-row.now .tl-v{color:var(--red)}
.tl-main{flex:1;min-width:0;display:flex;flex-direction:column}.tl-main b{font:400 19px var(--display);text-transform:uppercase;letter-spacing:.03em}.tl-main small{color:var(--muted);font-size:13px}
.tl-now{font:400 13px var(--display);padding:3px 7px;background:var(--red);color:#fff;letter-spacing:.06em}
.tl-row.blur .tl-main,.tl-row.blur .tl-v{filter:blur(2.5px);opacity:.6}
.tl-secret{position:relative;width:34px;height:34px;flex:none;display:grid;place-items:center;background:#111;box-shadow:0 0 0 2px #3a3a3a}
.tl-q{font:400 22px var(--display);font-style:normal;color:#8f8a82}
.tl-tree{position:absolute;inset:3px;display:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd54a' d='M6 0h2v2H6z'/%3E%3Cpath fill='%232f7d3a' d='M5 2h4v2h1v2H4V4h1zM3 6h8v2h1v2H2V8h1zM1 10h12v2h1v1H0v-1h1z'/%3E%3Cpath fill='%23c8202a' d='M5 5h1v1H5zM9 8h1v1H9zM4 11h1v1H4zM10 11h1v1h-1z'/%3E%3Cpath fill='%236b4423' d='M6 13h2v3H6z'/%3E%3C/svg%3E")}
.tl-secret.glitch{animation:tl-glitch .3s steps(3) 1;box-shadow:-2px 0 0 #ff2a5a,2px 0 0 #2affd4}.tl-secret.glitch .tl-q{display:none}.tl-secret.glitch .tl-tree{display:block}
@keyframes tl-glitch{0%{transform:translate(1px,-1px) skewX(6deg)}50%{transform:translate(-2px,1px) skewX(-8deg)}100%{transform:none}}
@media(prefers-reduced-motion:reduce){.tl-secret.glitch{animation:none}}

/* Practice: Choose Map / Battle tabs, a to-scale map preview and a grid of map cards (Gage 10-14 night) */
.practice-sheet .pm-sub { margin: 0; }
.pm-tabs { grid-template-columns: 1fr 1fr; }
.pm-pane { display: flex; flex-direction: column; gap: 10px; }
.pm-pane[hidden] { display: none; }
.pm-preview { position: relative; }
.pm-preview canvas { display: block; width: 100%; height: 200px; background: #08080a; border: 2px solid #2a2626; image-rendering: pixelated; }
.pm-preview canvas.pm-flash { animation: dispIn 0.18s steps(3); }
.pm-reroll { position: absolute; right: 6px; bottom: 6px; }
.pm-reroll[hidden] { display: none; }
.pm-cap { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.pm-cap b { font: 400 18px var(--display); text-transform: uppercase; color: #f2eee6; }
.pm-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.pm-map { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 5px; background: #1d1b1b; border: 2px solid transparent; color: var(--muted); text-align: center; }
.pm-map canvas { width: 100%; aspect-ratio: 4 / 3; image-rendering: pixelated; background: #08080a; }
.pm-map span { font: 400 15px var(--display); text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere; min-height: 2.1em; display: flex; align-items: center; justify-content: center; }
.pm-map.on { border-color: var(--red); color: #fff; }
.practice-sheet .intensity-scale { flex-wrap: wrap; gap: 2px 6px; }
body.pc-wide .pm-preview canvas { height: 260px; }

/* Loadout: your soldier, flag and equipped tank / aircraft / warship, with chips for the rest (Gage 10-14 night) */
.loadout { display: grid; grid-template-columns: 96px 1fr; grid-template-areas: "hero gear" "chips chips"; gap: 6px 8px; padding: 8px; background: linear-gradient(180deg, #1f1c1c, #121010); border: 1px solid rgba(255,255,255,0.1); border-left: 4px solid var(--uniform, #9d3c42); }
.lo-hero { grid-area: hero; position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 110px; background: radial-gradient(ellipse at 50% 92%, rgba(0,0,0,0.45) 0 30%, transparent 32%), radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--uniform, #9d3c42) 35%, transparent), transparent 70%); }
.lo-soldier { width: 90px; height: 120px; object-fit: contain; }
.lo-flag { position: absolute; top: 4px; left: 4px; width: 30px; height: 20px; image-rendering: pixelated; border: 1px solid #050505; box-shadow: 0 1px 0 rgba(255,255,255,0.15); }
.lo-gear { grid-area: gear; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-items: end; }
.lo-gear-i { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06); color: inherit; }
.lo-gear-i img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.lo-gear-i small { font: 400 13px var(--display); text-transform: uppercase; line-height: 1.05; text-align: center; overflow-wrap: anywhere; color: var(--muted); }
.lo-chips { grid-area: chips; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.lo-chip { min-width: 0; display: grid; grid-template-columns: 40px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 6px; background: rgba(255,255,255,0.05); color: inherit; text-align: left; }
.lo-chip .lo-thumb { grid-column: 1; grid-row: 1 / 3; width: 40px; height: 32px; object-fit: contain; pointer-events: none; }
.lo-chip span { grid-column: 2; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lo-chip b { grid-column: 2; font: 400 14px var(--display); text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere; }
.lo-chip .lo-sw { grid-row: 1 / 3; justify-self: center; width: 24px; height: 24px; border: 1px solid #050505; }
button.lo-chip, button.lo-gear-i { cursor: pointer; }
button.lo-chip:active, button.lo-gear-i:active { transform: translateY(1px); }
.loadout.small { grid-template-columns: 1fr; grid-template-areas: "hero" "gear" "chips"; padding: 6px; }
.loadout.small .lo-hero { min-height: 90px; }
.loadout.small .lo-soldier { width: 68px; height: 90px; }
.loadout.small .lo-chips { grid-template-columns: 1fr; }
.loadout.small .lo-gear-i small { display: none; }
.loadout.small .lo-chip b { font-size: 13px; overflow-wrap: normal; }
.sq-m .loadout { width: 100%; }
#tab-locker > .loadout { margin-bottom: 4px; }