@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: block; src: url("../assets/fonts/barlow-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: block; src: url("../assets/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: block; src: url("../assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: block; src: url("../assets/fonts/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../assets/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../assets/fonts/barlow-600.woff2") format("woff2"); }

:root {
  --bg: #090b0e;
  --panel: #0f1217;
  --panel-2: #171b22;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.18);
  --text: #eef0f2;
  --muted: #8a929d;
  --bone: #f2efe6;
  --atk: #ff8a1e;
  --def: #3d9eff;
  --accent: var(--bone);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, "Segoe UI", sans-serif;
  --card-h: clamp(150px, 36cqh, 400px);
  --good: #35d07f;
  --bad: #ff4b4b;
  --gap: 10px;
  --side-w: 320px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.atk { --accent: var(--atk); }
.def { --accent: var(--def); }
.both, .neutral { --accent: var(--bone); }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.4 var(--body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
img { display: block; -webkit-user-drag: none; }
h3, h4, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
kbd {
  font: 600 11px/1 var(--display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 6px 3px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: 0.55;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- shell ---------- */

.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100%; }
.main { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; position: relative; }
/* Everything that ends up in the recording lives in .frame; sizes inside it use cq units so it scales as one piece. */
.frame { display: grid; grid-template: "hud" auto "stage" minmax(0, 1fr) "action" auto "tray" auto / minmax(0, 1fr); min-width: 0; min-height: 0; position: relative; container-type: size; }

body[data-bg="siege"] .frame {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 9px),
    radial-gradient(1100px 620px at 50% 42%, #1b2029 0%, #0d1014 58%, #08090b 100%);
}
body[data-bg="black"] .frame { background: #000; }
body[data-bg="green"] .frame { background: #00ff00; }

/* ---------- sidebar ---------- */

.side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.brand-mark {
  width: 26px; height: 30px; flex: none;
  background: linear-gradient(90deg, var(--atk) 50%, var(--def) 50%);
  clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%);
}
.brand-text strong { display: block; font: 800 22px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; }
.brand-text span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

.side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 24px; scrollbar-width: thin; scrollbar-color: #2a303a transparent; }
.grp { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.grp h3, .grp h4 { font: 700 13px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.grp h4 { margin-top: 4px; }
.grp-head { display: flex; align-items: center; justify-content: space-between; }
.count { color: var(--text); margin-left: 6px; letter-spacing: 0.08em; }
.hint { font-size: 12px; color: var(--muted); margin-top: -6px; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.seg button {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px;
  font: 700 15px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.seg button[aria-pressed="true"] { background: var(--bone); color: #0a0c0f; }
.seg-side button { height: 46px; font-size: 17px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 30px; padding: 0 11px;
  font: 600 14px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 3px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.4); }
.chip[aria-pressed="true"] { background: var(--bone); border-color: var(--bone); color: #0a0c0f; }
.chip.off { text-decoration: line-through; opacity: 0.4; }
.chip.used { border-style: dashed; }

.row { display: flex; align-items: center; gap: 12px; min-height: 30px; }
.row-text { flex: 1; min-width: 0; }
.row-text span { display: block; font-weight: 500; }
.row-text small { display: block; font-size: 12px; color: var(--muted); }
.switch { width: 40px; height: 22px; flex: none; border-radius: 11px; background: #2a303a; position: relative; transition: background 0.2s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #8a929d; transition: transform 0.2s var(--ease-out), background 0.2s; }
.switch[aria-checked="true"] { background: var(--bone); }
.switch[aria-checked="true"] i { transform: translateX(18px); background: #0a0c0f; }
input[type="range"] { width: 92px; accent-color: var(--bone); }

.mini { display: flex; gap: 4px; }
.mini.spread button { flex: 1; justify-content: center; padding: 8px 4px; }

.field { display: grid; gap: 6px; }
.field span { font-weight: 500; }
input[type="text"], input[type="number"], select {
  width: 100%; height: 36px; padding: 0 10px;
  background: #090b0e; color: var(--text);
  border: 1px solid var(--line-2); border-radius: 3px;
  font: 500 14px var(--body);
  user-select: text;
}
input.num { width: 60px; flex: none; padding: 0 4px; text-align: center; }
.hint b { color: var(--text); font-weight: 600; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pair input:first-child { border-color: color-mix(in srgb, var(--good) 55%, transparent); }
.pair input:last-child { border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.script-add { display: grid; grid-template-columns: auto 52px minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.script-add .ghost { height: 36px; }
.script-list { display: grid; gap: 4px; }
.script-list:empty { display: none; }
.script-list li { display: flex; align-items: center; gap: 10px; padding: 5px 4px 5px 10px; background: var(--panel-2); font-size: 13px; color: var(--muted); }
.script-list strong { flex: 1; font: 700 17px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.script-list button { width: 26px; height: 26px; font-size: 18px; line-height: 1; color: var(--muted); }
.script-list button:hover { color: var(--text); }
.script-list li.past { opacity: 0.4; }
.mini button, .ghost {
  font: 600 13px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
  padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 3px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
a.ghost { text-decoration: none; }
.mini button:hover, .ghost:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.4); }

.pool-ops { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.pool-op { position: relative; aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, 0.03); transition: background 0.15s, opacity 0.15s, filter 0.15s; }
.pool-op img { width: 100%; height: 100%; padding: 3px; }
.pool-op:hover { background: rgba(255, 255, 255, 0.1); }
.pool-op.off { opacity: 0.22; filter: grayscale(1); }
.pool-op.used::after { content: ""; position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 0 2px var(--panel); }

.keys ul { display: grid; gap: 7px; }
.keys li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.keys kbd { min-width: 44px; text-align: center; }
.legal { padding-top: 16px; font-size: 11px; line-height: 1.5; color: #5d646e; }

/* ---------- top bar ---------- */

.top { display: flex; align-items: center; gap: 16px; height: 58px; padding: 0 20px; border-bottom: 1px solid var(--line); background: rgba(9, 11, 14, 0.72); }
.modes { display: flex; gap: 4px; height: 100%; }
.modes button {
  position: relative; padding: 0 16px;
  font: 700 18px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); transition: color 0.15s;
}
.modes button:hover { color: var(--text); }
.modes button[aria-pressed="true"] { color: var(--text); }
.modes button[aria-pressed="true"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 3px; background: var(--bone); }
.top-actions { margin-left: auto; display: flex; gap: 8px; }
.menu { display: none; }

/* ---------- stage ---------- */

.stage-view { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: 0; overflow: hidden; }

.hud { display: grid; justify-items: center; gap: clamp(8px, 1.4cqh, 14px); padding: clamp(14px, 3.4cqh, 36px) 24px 0; text-align: center; }
.headline {
  margin: 0; max-width: 26ch;
  font: 800 clamp(26px, 6.4cqh, 66px) / 0.94 var(--display);
  letter-spacing: 0.01em; text-transform: uppercase; text-wrap: balance;
}
.hud-meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 22px;
  font: 700 clamp(14px, 2.4cqh, 22px) / 1 var(--display); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.hud-meta b { color: var(--text); }
.hud-meta span:empty { display: none; }
.tally { display: flex; gap: 18px; }
.tally .good, .tally .good b { color: var(--good); }
.tally .bad, .tally .bad b { color: var(--bad); }

.pool-line {
  font: 600 15px/1 var(--display); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted);
}
.pool-line b { color: var(--text); font-weight: 700; }
.pool-line .atk, .pool-line .def { color: var(--accent); }

.reel {
  position: relative; width: 100%;
  padding: 34px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
body[data-bg="green"] .reel { -webkit-mask-image: none; mask-image: none; }
.strip { display: flex; gap: var(--gap); width: max-content; will-change: transform; }

.card {
  position: relative; flex: none;
  height: var(--card-h);
  background: linear-gradient(180deg, #1c212a 0%, #10131a 100%);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: opacity 0.4s, filter 0.4s, transform 0.5s var(--ease-out), box-shadow 0.5s, border-color 0.2s;
}
.reel.spinning .card { transition: none; }
.card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); z-index: 3; }
.card.op { width: calc(var(--card-h) * 0.64); }
.card.weapon { width: calc(var(--card-h) * 1.08); }
.card.map { width: calc(var(--card-h) * 1.34); }

.card.op::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 75% at 50% 100%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%);
}
.card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.card.weapon .card-art { inset: 14% 12% 30%; width: 76%; height: 56%; object-fit: contain; object-position: 50% 50%; filter: invert(1); opacity: 0.94; }
.card-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 34px 12px 14px;
  background: linear-gradient(180deg, transparent, rgba(6, 7, 9, 0.94) 62%);
}
.card-icon { width: calc(var(--card-h) * 0.105); height: calc(var(--card-h) * 0.105); flex: none; }
.card-name {
  font: 700 calc(var(--card-h) * 0.088) / 1 var(--display);
  letter-spacing: 0.03em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-sub { display: block; margin-top: 5px; font: 600 calc(var(--card-h) * 0.048) / 1 var(--display); letter-spacing: 0.2em; color: var(--accent); }
.card.weapon .card-foot, .card.map .card-foot { display: block; }
.card.weapon .card-name, .card.map .card-name { display: block; }

.card.hot { border-color: var(--accent); filter: brightness(1.25); }
.reel.landed .card { opacity: 0.2; filter: grayscale(1); }
.reel.landed .card.win {
  opacity: 1; filter: none; z-index: 4;
  transform: scale(1.07);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 70px -8px var(--accent);
}
.card.win .card-art { animation: winFlash 0.55s ease-out; }
@keyframes winFlash { 0% { filter: brightness(2.4); } 100% { filter: brightness(1); } }
.card.weapon.win .card-art { animation: none; }

.marker { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.marker i { position: absolute; left: 50%; }
.flap {
  top: 8px; margin-left: -12px;
  width: 24px; height: 22px;
  background: var(--bone);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
}
.notch { bottom: 8px; margin-left: -12px; width: 24px; height: 22px; background: var(--bone); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hair { top: 30px; bottom: 30px; width: 2px; margin-left: -1px; background: linear-gradient(180deg, var(--bone), rgba(242, 239, 230, 0.12) 22%, rgba(242, 239, 230, 0.12) 78%, var(--bone)); transition: opacity 0.3s; }
.reel.landed .hair { opacity: 0; }

.action { display: flex; justify-content: center; padding: 6px 20px clamp(18px, 4vh, 40px); }
.spin {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  min-width: min(400px, 100%); height: 76px; padding: 0 44px;
  background: var(--bone); color: #0a0c0f;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transition: transform 0.18s var(--ease-out), background 0.15s, opacity 0.2s;
}
.spin-label { font: 800 34px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.spin kbd { font-size: 12px; opacity: 0.5; }
.spin:hover { background: #fff; transform: translateY(-2px); }
.spin:active { transform: translateY(1px) scale(0.985); }
.spin[disabled] { opacity: 0.35; cursor: default; transform: none; }

/* ---------- reveal ---------- */

.reveal {
  position: absolute; inset: 0; z-index: 10;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  overflow: hidden; isolation: isolate;
  background: #0a0c10;
}
.reveal[hidden] { display: none; }
.reveal.out { opacity: 0; transition: opacity 0.16s; }

.rv-bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 10px),
    linear-gradient(100deg, #0a0c10 28%, color-mix(in srgb, var(--accent) 26%, #0a0c10) 100%);
  animation: rvWipe 0.5s var(--ease-out) both;
}
.rv-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--accent); }
.rv-mark { position: absolute; right: -4%; top: 50%; height: 118%; aspect-ratio: 1; transform: translateY(-50%); opacity: var(--mark-o, 0.08); filter: grayscale(1) brightness(2); animation: rvMark 0.9s var(--ease-out) both; }

.rv-text { padding: 0 0 0 clamp(28px, 6vw, 120px); min-width: 0; }
.rv-kicker {
  display: flex; align-items: center; gap: 14px;
  font: 700 clamp(15px, 2.3vh, 24px) / 1 var(--display); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent);
  animation: rvUp 0.5s 0.16s var(--ease-out) both;
}
.rv-kicker .num { color: var(--text); }
.rv-icon { width: clamp(40px, 6.4vh, 68px); height: clamp(40px, 6.4vh, 68px); }
.rv-name {
  margin: 0.1em 0 0;
  padding-top: 0.14em;
  font: 800 var(--name-size, 18vh) / 0.9 var(--display);
  letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
  overflow: hidden;
}
.rv-name .ch { display: inline-block; animation: rvLetter 0.62s calc(0.2s + var(--i) * 0.03s) var(--ease-out) both; }
.rv-rule { width: clamp(80px, 12vw, 180px); height: 5px; margin: clamp(10px, 2vh, 22px) 0; background: var(--accent); transform-origin: 0 50%; animation: rvRule 0.6s 0.38s var(--ease-out) both; }
.rv-tags { display: flex; flex-wrap: wrap; gap: 8px; animation: rvUp 0.5s 0.46s var(--ease-out) both; }
.rv-tags span { padding: 7px 12px 6px; border: 1px solid var(--line-2); font: 600 clamp(14px, 1.9vh, 19px) / 1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.rv-stats { display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 3vw, 44px); margin-top: clamp(14px, 2.6vh, 28px); animation: rvUp 0.5s 0.54s var(--ease-out) both; }
.rv-stats dt { font: 600 13px/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.rv-stats dd { font: 700 clamp(18px, 2.4vh, 24px) / 1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; display: flex; gap: 5px; align-items: center; min-height: 14px; }
.pip { width: 26px; height: 9px; background: rgba(255, 255, 255, 0.14); transform: skewX(-18deg); }
.pip.on { background: var(--accent); }
.rv-users { display: flex; flex-wrap: wrap; gap: 6px; max-width: 520px; }
.rv-users img { width: clamp(34px, 5vh, 50px); height: clamp(34px, 5vh, 50px); }

.rv-portrait {
  align-self: end; justify-self: center;
  height: min(97%, 800px); max-width: 108%;
  object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.55));
  animation: rvPortrait 0.75s 0.1s var(--ease-out) both;
}
.rv-weapon { justify-self: center; width: min(82%, 760px); filter: invert(1) drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 50%, transparent)); animation: rvPortrait 0.75s 0.1s var(--ease-out) both; }
.rv-frame { justify-self: center; width: min(88%, 960px); margin-right: clamp(20px, 4vw, 70px); border: 1px solid var(--line-2); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); animation: rvPortrait 0.75s 0.1s var(--ease-out) both; }
.rv-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.reveal.map .rv-bg { background: #0a0c10; }
.rv-blur { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(34px) brightness(0.34) saturate(1.1); }

.rv-mark.raster { filter: none; --mark-o: 0.05; }

@keyframes rvWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rvMark { from { opacity: 0; transform: translateY(-50%) scale(0.86); } to { opacity: var(--mark-o, 0.08); transform: translateY(-50%) scale(1); } }
@keyframes rvUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rvLetter { from { transform: translateY(108%); } to { transform: none; } }
@keyframes rvRule { from { transform: scaleX(0); } to { transform: none; } }
@keyframes rvPortrait { from { opacity: 0; transform: translateX(7%) scale(1.04); } to { opacity: 1; transform: none; } }

/* ---------- verdict stamp ---------- */

.stamp {
  position: absolute; left: 47%; bottom: 13%; z-index: 4;
  padding: 0.12em 0.34em 0.06em;
  border: 0.1em solid currentColor;
  background: rgba(8, 10, 13, 0.82);
  font: 800 clamp(44px, 12cqh, 120px) / 1 var(--display);
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  rotate: -8deg;
}
.stamp.va { color: var(--good); }
.stamp.vb { color: var(--bad); }
.stamp.vn { color: var(--bone); }
.stamp.in { animation: stampIn 0.34s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
@keyframes stampIn { from { opacity: 0; scale: 2.6; } 60% { opacity: 1; } to { opacity: 1; scale: 1; } }

/* ---------- results screen ---------- */

.recap {
  position: absolute; inset: 0; z-index: 12;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(12px, 2.4cqh, 26px);
  padding: clamp(14px, 3cqh, 30px) clamp(16px, 4cqw, 60px) clamp(18px, 4cqh, 40px);
  background: #0a0c10;
}
.recap[hidden] { display: none; }
.recap-head { text-align: center; animation: rvUp 0.45s var(--ease-out) both; }
.recap-score { display: flex; justify-content: center; align-items: baseline; gap: 0.28em; font: 800 clamp(54px, 15cqh, 150px) / 0.86 var(--display); }
.recap-score i { font-style: normal; color: var(--muted); font-size: 0.6em; }
.recap-score.plain { font-size: clamp(30px, 6cqh, 60px); letter-spacing: 0.14em; text-transform: uppercase; }
.recap-labels { display: flex; justify-content: center; gap: 26px; margin-top: 10px; font: 700 clamp(14px, 2.4cqh, 22px) / 1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; }
.recap .good { color: var(--good); }
.recap .bad { color: var(--bad); }
.recap-grid { display: grid; gap: 10px; justify-content: center; align-content: center; min-height: 0; }
.recap-card {
  position: relative; aspect-ratio: 0.72; overflow: hidden;
  background: linear-gradient(180deg, #1c212a, #10131a);
  border-bottom: 4px solid var(--line-2);
  animation: rvUp 0.45s calc(0.12s + var(--i) * 0.05s) var(--ease-out) both;
}
.recap-card.va { border-color: var(--good); }
.recap-card.vb { border-color: var(--bad); }
.recap-card .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.recap-card.weapons .art { inset: 18% 10% 34%; width: 80%; height: 48%; object-fit: contain; filter: invert(1); }
.recap-card .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 8px 9px; background: linear-gradient(180deg, transparent, rgba(6, 7, 9, 0.94) 62%); font: 700 clamp(13px, 12cqw, 26px) / 1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recap-card .v { position: absolute; left: 0; top: 0; padding: 5px 8px 4px; background: var(--bone); font: 800 clamp(11px, 9cqw, 17px) / 1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #0a0c0f; }
.recap-card.va .v { background: var(--good); }
.recap-card.vb .v { background: var(--bad); }
.recap-card { container-type: inline-size; }

/* ---------- frame layouts ---------- */

.hud { grid-area: hud; }
.stage-view { grid-area: stage; }
.action { grid-area: action; }
.tray { grid-area: tray; }
.board { grid-area: board; }

/* a list on screen replaces the picked strip; --bu is the list's size unit, --u the poster reveal's */
body:not([data-board="none"]) .tray { display: none; }
body[data-format="wide"]:not([data-board="none"]) .frame { grid-template: "hud hud" auto "stage board" minmax(0, 1fr) "action board" auto / minmax(0, 1fr) 27%; --bu: 0.27cqw; --u: 0.5cqw; }

body:not([data-format="wide"]) .main { background: #040506; }
body:not([data-format="wide"]) .frame { height: 100%; max-width: 100%; justify-self: center; box-shadow: 0 0 0 1px var(--line-2); }
body:not([data-format="wide"]) .pool-line { display: none; }
body:not([data-format="wide"]) .spin kbd { display: none; }
/* Space or a click on the stage spins, so the button only costs room while recording */
body:not([data-format="wide"]) .app.clean .action { display: none; }

/* ---------- half: a 9:8 block for the top or bottom of a short, face cam in the other half ---------- */

body[data-format="half"] .frame { aspect-ratio: 9 / 8; --card-h: 40cqh; --u: 1cqw; }
body[data-format="half"]:not([data-board="none"]) .frame { grid-template: "hud hud" auto "stage board" minmax(0, 1fr) "action board" auto / minmax(0, 1fr) 38%; --bu: 0.38cqw; --u: 0.62cqw; }
body[data-format="half"] .hud { gap: 1cqh; padding: 3cqh 4cqw 0; }
body[data-format="half"] .headline { font-size: 6.4cqh; max-width: none; }
body[data-format="half"] .hud-meta { font-size: 2.6cqh; }
body[data-format="half"] .reel { padding: 3cqh 0; }
body[data-format="half"] .action { padding: 1cqh 3cqw 2.6cqh; }
body[data-format="half"] .spin { min-width: 0; width: min(100%, 44cqw); height: 8.4cqh; padding: 0; }
body[data-format="half"] .spin-label { font-size: 3.8cqh; }

/* ---------- vertical: a full 9:16 short ---------- */

body[data-format="vertical"] .frame {
  aspect-ratio: 9 / 16;
  grid-template: "hud" auto "tray" auto "stage" minmax(0, 1fr) "action" auto / minmax(0, 1fr);
  --card-h: 30cqh; --gap: 1.5cqw; --u: 1cqw;
}
body[data-format="vertical"]:not([data-board="none"]) .frame { grid-template: "hud" auto "stage" minmax(0, 1fr) "board" auto "action" auto / minmax(0, 1fr); --card-h: 25cqh; --bu: 0.44cqw; }
body[data-format="vertical"] .hud { gap: 1.4cqh; padding: 6.5cqh 6cqw 0; }
body[data-format="vertical"] .headline { font-size: 9.4cqw; max-width: none; }
body[data-format="vertical"] .hud-meta { font-size: 3.5cqw; gap: 1cqh 4cqw; }
body[data-format="vertical"] .tally { gap: 3.5cqw; }
body[data-format="vertical"] .reel { padding: 3.2cqh 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
body[data-format="vertical"][data-bg="green"] .reel { -webkit-mask-image: none; mask-image: none; }

body[data-format="vertical"] .tray { height: auto; min-height: 10.5cqw; margin-top: 1.6cqh; padding: 0 4cqw; border: 0; background: none; justify-content: center; }
body[data-format="vertical"] .tray-label, body[data-format="vertical"] .tray-actions { display: none; }
body[data-format="vertical"] .tray-list { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; overflow: visible; }
body[data-format="vertical"] .tray-list:empty::before { content: none; }
body[data-format="vertical"] .pick { height: 10.5cqw; padding: 0 1.6cqw; gap: 1.4cqw; border-left: 0; background: rgba(8, 10, 13, 0.86); box-shadow: inset 0 -0.9cqw 0 var(--line-2); }
body[data-format="vertical"] .pick.va { box-shadow: inset 0 -0.9cqw 0 var(--good); }
body[data-format="vertical"] .pick.vb { box-shadow: inset 0 -0.9cqw 0 var(--bad); }
body[data-format="vertical"] .pick .n { display: none; }
body[data-format="vertical"] .pick img { width: 7.6cqw; height: 7.6cqw; }
body[data-format="vertical"] .pick .nm { font-size: 3.6cqw; }
body[data-format="vertical"][data-mode="ops"] .pick .nm { display: none; }

body[data-format="vertical"] .action { padding: 2cqh 6cqw 13cqh; }
body[data-format="vertical"]:not([data-board="none"]) .action { padding-top: 1.4cqh; }
body[data-format="vertical"] .spin { min-width: 0; width: 72cqw; height: 13cqw; padding: 0; }
body[data-format="vertical"] .spin-label { font-size: 6.2cqw; }
body[data-format="vertical"] .recap-score { font-size: 24cqw; }
body[data-format="vertical"] .recap-labels { font-size: 3.5cqw; gap: 5cqw; }

/* With no list, the tall reveal runs from under the title and scoreboard to the bottom edge, over the button. */
body[data-format="vertical"][data-board="none"] .stage-view { position: static; }
body[data-format="vertical"][data-board="none"] .reveal, body[data-format="vertical"][data-board="none"] .recap { inset: var(--hud-h, 0px) 0 0 0; }
body[data-format="vertical"][data-board="none"] .recap { padding: 2cqh 5cqw 12cqh; }

/* ---------- poster reveal: the art fills the stage, the name sits over the lower third ---------- */

body[data-reveal="poster"] .reveal { display: block; cursor: pointer; }
body[data-reveal="poster"] .rv-portrait { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; }
body[data-reveal="poster"] .rv-mark { right: -30%; top: 34%; height: 70%; }
body[data-reveal="poster"] .rv-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: calc(var(--u) * 12) calc(var(--u) * 6) calc(var(--u) * 5); background: linear-gradient(180deg, transparent, rgba(8, 10, 13, 0.9) 46%); }
body[data-reveal="poster"] .rv-kicker { font-size: calc(var(--u) * 3.7); gap: calc(var(--u) * 2.2); }
body[data-reveal="poster"] .rv-icon { width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5); }
body[data-reveal="poster"] .rv-name { margin-top: 0.06em; }
body[data-reveal="poster"] .rv-rule, body[data-reveal="poster"] .rv-tags, body[data-reveal="poster"] .reveal.op .rv-stats { display: none; }
body[data-reveal="poster"] .rv-stats { margin-top: calc(var(--u) * 2); }
body[data-reveal="poster"] .rv-stats dt { font-size: calc(var(--u) * 2.8); margin-bottom: calc(var(--u) * 1.4); }
body[data-reveal="poster"] .rv-users { max-width: none; gap: var(--u); }
body[data-reveal="poster"] .rv-users img { width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); }
body[data-reveal="poster"] .rv-weapon { position: absolute; left: 7%; top: 9%; width: 86%; max-height: 44%; object-fit: contain; }
body[data-reveal="poster"] .rv-frame { position: absolute; left: 50%; top: 5%; translate: -50% 0; height: 50%; aspect-ratio: 16 / 9; width: auto; max-width: 88%; margin: 0; }
body[data-reveal="poster"] .rv-frame img { width: 100%; height: 100%; }
body[data-reveal="poster"] .stamp { left: auto; right: calc(var(--u) * 5); bottom: calc(var(--u) * 38); font-size: calc(var(--u) * 11); }
/* the bottom ~12% of a full short is under the app's caption and buttons, so the text sits above it */
body[data-format="vertical"][data-board="none"] .rv-text { padding-bottom: 12cqh; }
body[data-format="vertical"][data-board="none"] .stamp { bottom: 31.5cqh; }

/* ---------- the list: empty slots from the first second, so the viewer waits for it to fill ---------- */

.board {
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(var(--bu) * 3.4);
  min-width: 0; min-height: 0;
  padding: calc(var(--bu) * 5) calc(var(--bu) * 5) calc(var(--bu) * 6);
  background: rgba(8, 10, 13, 0.62);
  border-left: 1px solid var(--line);
}
.board-head { display: flex; justify-content: space-between; align-items: baseline; font: 700 calc(var(--bu) * 5.4) / 1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.board-head b { color: var(--text); letter-spacing: 0.08em; }

.slots { display: grid; grid-template-rows: repeat(var(--n), minmax(0, 1fr)); gap: calc(var(--bu) * 1.7); align-self: center; height: 100%; max-height: calc(var(--n) * var(--bu) * 25); min-height: 0; }
.slot {
  display: flex; align-items: center; gap: calc(var(--bu) * 3);
  min-width: 0; min-height: 0; overflow: hidden;
  padding-right: calc(var(--bu) * 3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--line-2);
}
.slot-n { flex: none; align-self: stretch; display: grid; place-items: center; width: calc(var(--bu) * 15); background: rgba(255, 255, 255, 0.05); font: 800 calc(var(--bu) * 10) / 1 var(--display); color: var(--muted); }
.slot img { flex: none; width: calc(var(--bu) * 12 * var(--s, 1)); height: calc(var(--bu) * 12 * var(--s, 1)); }
.slot-name { flex: 1; min-width: 0; font: 700 calc(var(--bu) * 8 * var(--s, 1)) / 1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-mark { flex: none; font: 800 calc(var(--bu) * 9 * var(--s, 1)) / 1 var(--body); }
.slot.filled { border: 1px solid transparent; background: var(--panel-2); box-shadow: inset calc(var(--bu) * -1.2) 0 0 var(--accent); }
.slot.filled .slot-n { background: var(--bone); color: #0a0c0f; }
.slot.va { box-shadow: inset calc(var(--bu) * -1.2) 0 0 var(--good); }
.slot.vb { box-shadow: inset calc(var(--bu) * -1.2) 0 0 var(--bad); }
.slot.va .slot-n { background: var(--good); }
.slot.vb .slot-n { background: var(--bad); }
.slot.va .slot-mark { color: var(--good); }
.slot.vb .slot-mark { color: var(--bad); }
.slot.in, .tier-ops .in { animation: slotIn 0.5s var(--ease-out) both; }
@keyframes slotIn { from { scale: 1.14; filter: brightness(2.6); } to { scale: 1; filter: brightness(1); } }

.tiers { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: calc(var(--bu) * 1.5); height: 100%; min-height: 0; }
.tier { display: flex; min-height: 0; background: rgba(255, 255, 255, 0.035); }
.tier-l { flex: none; display: grid; place-items: center; width: calc(var(--bu) * 18); background: var(--tc); color: #0a0c0f; font: 800 calc(var(--bu) * 12) / 1 var(--display); }
.tier-ops { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-content: center; gap: calc(var(--bu) * 1.2); padding: calc(var(--bu) * 1.4) calc(var(--bu) * 2); overflow: hidden; }
.tier-ops img { width: calc(var(--bu) * 12); height: calc(var(--bu) * 12); }
.tier-chip { padding: 0.3em 0.5em 0.24em; background: var(--panel-2); font: 700 calc(var(--bu) * 5) / 1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }

/* waiting on a placement: the open spots ask for it */
body.pending .slot.empty, body.pending .tier { cursor: pointer; }
body.pending .slot.empty { border-color: rgba(242, 239, 230, 0.8); animation: slotPulse 0.85s ease-in-out infinite alternate; }
body.pending .slot.empty .slot-n { color: var(--bone); }
body.pending .tier-l { animation: tierPulse 0.85s ease-in-out infinite alternate; }
@keyframes slotPulse { from { background: rgba(255, 255, 255, 0.03); } to { background: rgba(255, 255, 255, 0.13); } }
@keyframes tierPulse { to { filter: brightness(1.3); } }
body[data-bg="green"] .board { background: var(--bg); }

body[data-format="vertical"] .board { gap: 0; padding: 1.2cqh 5cqw 0; background: none; border-left: 0; }
body[data-format="vertical"] .board-head { display: none; }
body[data-format="vertical"] .slots { grid-auto-flow: column; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(var(--rows), calc(var(--bu) * 16)); height: auto; max-height: none; }
body[data-format="vertical"] .board.is-tier { --bu: 0.55cqw; }
body[data-format="vertical"] .tiers { grid-template-rows: repeat(5, calc(var(--bu) * 15)); height: auto; }
body[data-format="vertical"][data-board="tier"] .frame { --card-h: 22cqh; }
body[data-format="vertical"]:not([data-board="none"]) .app.clean .board { margin-bottom: 13cqh; }

body.idle .app.clean, body.idle .app.clean * { cursor: none !important; }
/* notes to the creator stay out of the recorded block: bottom-left corner, in the black margin */
body:not([data-format="wide"]) .toast { left: 16px; bottom: 16px; max-width: 300px; transform: translateY(12px); line-height: 1.25; }
body:not([data-format="wide"]) .toast.show { transform: none; }
body[data-format="vertical"] .slots { --s: 1 !important; }

/* ---------- 5-stack draft mini game ---------- */

body[data-view="draft"] .only-picker, body:not([data-view="draft"]) .only-draft { display: none !important; }
body[data-view="draft"] .pool-line { display: none; }
.stack { display: grid; gap: 12px; }
.keys-inline { display: grid; gap: 7px; }
.keys-inline li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.keys-inline kbd { min-width: 52px; text-align: center; }

/* sizes in here are relative to the game's own stage, so it fits any format */
.draft { --me: var(--atk); --them: var(--def); position: absolute; inset: 0; z-index: 14; container-type: size; overflow: hidden; cursor: pointer; background: radial-gradient(120% 90% at 50% 38%, #181d25 0%, #0c0e12 62%, #08090b 100%); }
.draft[data-side="def"] { --me: var(--def); --them: var(--atk); }
.draft[hidden] { display: none; }
.draft b.atk { color: var(--atk); }
.draft b.def { color: var(--def); }
.df-label { font: 700 2.2cqh / 1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

/* the draft: live win chance, the site and the algorithm's picks across the top, the roll underneath */
.df-draft { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2cqh; padding: 3.4cqh 4cqw 3.2cqh; }
.df-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 3cqw; }
.df-chance { display: grid; gap: 1.2cqh; width: min(100%, 46cqh); }
.df-pctrow { display: flex; align-items: baseline; gap: 1.4cqh; }
.df-big { font: 800 7cqh / 0.8 var(--display); color: var(--me); font-variant-numeric: tabular-nums; }
.df-big small { font-size: 0.5em; }
.df-delta { font: 800 2.6cqh / 1 var(--display); letter-spacing: 0.04em; }
.df-delta.up { color: var(--good); animation: deltaIn 0.5s var(--ease-out) both; }
.df-delta.down { color: var(--bad); animation: deltaIn 0.5s var(--ease-out) both; }
@keyframes deltaIn { from { opacity: 0; transform: translateY(1.4cqh); } to { opacity: 1; transform: none; } }
.df-bar { position: relative; height: 1.3cqh; overflow: hidden; background: color-mix(in srgb, var(--them) 75%, #000); transform: skewX(-18deg); }
.df-bar i { position: absolute; inset: 0 auto 0 0; width: var(--c, 50%); background: var(--me); transition: width 0.7s var(--ease-out); }
.df-bar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #0a0c0f; }
.df-site { display: grid; justify-items: center; gap: 0.9cqh; text-align: center; }
.df-site b { font: 800 3.6cqh / 1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.df-foe { display: grid; justify-items: end; gap: 1.2cqh; }
.df-foe-slots { display: flex; gap: 0.9cqh; }
.df-foe-slots i { display: grid; place-items: center; width: min(7.6cqh, 6cqw); aspect-ratio: 1; border: 1px dashed var(--line-2); background: rgba(255, 255, 255, 0.025); }
.df-foe-slots i.on { border: 0; background: color-mix(in srgb, var(--them) 20%, #10131a); box-shadow: inset 0 -0.5cqh 0 var(--them); }
.df-foe-slots i.in { animation: slotDrop 0.45s var(--ease-out) both; }
.df-foe-slots img { width: 72%; height: 72%; }
@keyframes slotDrop { from { opacity: 0; transform: translateY(-1.6cqh); } to { opacity: 1; transform: none; } }

/* before the first roll */
.df-ready { grid-row: 1 / -1; align-self: center; display: grid; justify-items: center; gap: 2cqh; text-align: center; }
.df-ready b { font: 800 11cqh / 0.9 var(--display); text-transform: uppercase; color: var(--me); }
.df-sides { display: flex; gap: 2cqw; margin: 1cqh 0; }
.df-sides button { min-width: min(30cqw, 34cqh); padding: 1.6cqh 3cqh 1.4cqh; border: 2px solid var(--line-2); background: rgba(255, 255, 255, 0.04); font: 800 min(6cqh, 7cqw) / 1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); transition: background 0.2s, border-color 0.2s, transform 0.15s; }
.df-sides button.atk { --accent: var(--atk); }
.df-sides button.def { --accent: var(--def); }
.df-sides button:hover, .df-sides button.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.df-sides button:active { transform: scale(0.97); }
.df-ready p { margin: 0; max-width: 40ch; font: 500 min(3cqh, 2.6cqw) / 1.35 var(--body); color: #c9ced6; }

/* map and site */
.df-intro { grid-row: 1 / -1; align-self: center; display: grid; justify-items: center; gap: 2.4cqh; text-align: center; }
.df-mapwin { --card-h: 34cqh; position: relative; width: calc(var(--card-h) * 1.34); height: var(--card-h); overflow: hidden; border: 1px solid var(--line); background: #10131a; transition: box-shadow 0.4s; }
.df-mapwin .card { display: block; width: 100%; border: 0; }
.df-mapwin.landed { box-shadow: 0 0 0 2px var(--bone), 0 0 60px -14px var(--bone); }
.df-sitename { display: flex; align-items: center; gap: 1.6cqh; min-height: 7cqh; }
.df-sitename i { padding: 0.3em 0.45em 0.2em; background: var(--line-2); color: var(--text); font: 800 3cqh / 1 var(--display); font-style: normal; }
.df-sitename b { font: 800 6.4cqh / 1 var(--display); text-transform: uppercase; color: var(--muted); }
.df-sitename.landed i { background: var(--bone); color: #0a0c0f; }
.df-sitename.landed b { color: var(--text); animation: siteIn 0.35s var(--ease-out) both; }
@keyframes siteIn { from { letter-spacing: 0.12em; opacity: 0.4; } to { letter-spacing: 0; opacity: 1; } }
.df-brief { display: grid; gap: 1cqh; min-height: 11cqh; }
.df-brief li { font: 700 2.6cqh / 1.1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: #c9ced6; animation: rvUp 0.35s calc(var(--i) * 0.12s) var(--ease-out) both; }
.df-brief li::before { content: "— "; color: var(--me); }

.df-roll { --ch: min(46cqh, 36cqw); display: grid; grid-template-columns: repeat(3, auto); justify-content: center; align-content: center; gap: 3cqw; min-height: 0; }
.df-col { display: grid; justify-items: center; gap: 1.6cqh; width: calc(var(--ch) * 0.66); transition: opacity 0.35s, filter 0.35s; }
.df-key { display: grid; place-items: center; width: 1.7em; height: 1.7em; border: 2px solid var(--line-2); font: 800 4cqh / 1 var(--display); color: var(--muted); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.df-window { --card-h: var(--ch); position: relative; width: 100%; height: var(--ch); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(180deg, #1c212a, #10131a); transition: transform 0.4s var(--ease-out), box-shadow 0.4s; }
.df-window .card { display: block; width: 100%; border: 0; }
.df-strip { will-change: transform; }
.df-blank { height: var(--ch); display: grid; place-items: center; font: 800 calc(var(--ch) * 0.42) / 1 var(--display); color: rgba(255, 255, 255, 0.08); }
.df-cap { margin: 0; text-align: center; font: 700 2.6cqh / 1 var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.df-roll.choose .df-key { border-color: var(--bone); background: var(--bone); color: #0a0c0f; }
.df-roll.choose .df-col:hover .df-window { box-shadow: 0 0 0 2px var(--bone); }
.df-col.kept .df-window { transform: scale(1.04); box-shadow: 0 0 0 3px var(--me), 0 0 60px -10px var(--me); }
.df-col.kept .df-key { border-color: var(--me); background: var(--me); color: #0a0c0f; }
.df-col.dropped { opacity: 0.14; filter: grayscale(1); }
.df-gain { position: absolute; left: 50%; top: 40%; z-index: 4; font: 800 calc(var(--ch) * 0.2) / 1 var(--display); color: var(--good); text-shadow: 0 0.6cqh 3cqh rgba(0, 0, 0, 0.9); animation: gainUp 1.3s var(--ease-out) both; }
.df-gain.down { color: var(--bad); }
.df-gain small { display: block; margin-top: 0.1em; font-size: 0.3em; letter-spacing: 0.2em; text-align: center; text-transform: uppercase; color: var(--text); }
@keyframes gainUp { from { opacity: 0; transform: translate(-50%, 30%); } 22% { opacity: 1; transform: translate(-50%, -10%); } 75% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -50%); } }

/* the match: a tug of war between your colour and theirs, with a face-off in the middle every round */
.df-arena {
  --split: 50%;
  position: relative; height: 100%;
  display: grid;
  grid-template: "board board board" auto "me mid them" minmax(0, 1fr) "odds odds odds" auto / minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.6cqh 1cqw; padding: 3cqh 3cqw 2.6cqh;
}
.df-arena > :not(.df-bg) { position: relative; }
.df-bg, .df-bg i { position: absolute; inset: 0; pointer-events: none; }
.df-bg { background: linear-gradient(270deg, color-mix(in srgb, var(--them) 22%, #0b0d11), color-mix(in srgb, var(--them) 6%, #0b0d11) 70%); }
.df-bg .df-l { background: linear-gradient(90deg, color-mix(in srgb, var(--me) 22%, #0b0d11), color-mix(in srgb, var(--me) 6%, #0b0d11) 70%); clip-path: polygon(0 0, calc(var(--split) + 7cqh) 0, calc(var(--split) - 7cqh) 100%, 0 100%); }
.df-bg .df-edge { left: var(--split); right: auto; width: 0.45cqh; translate: -50% 0; background: var(--bone); transform: skewX(-7.97deg); box-shadow: 0 0 3cqh rgba(242, 239, 230, 0.45); opacity: 0.8; }
.df-arena.done .df-edge { opacity: 0; transition: opacity 0.6s 0.3s; }

.df-board { grid-area: board; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 0.6cqh 3cqw; }
.df-team { display: grid; gap: 1.3cqh; font: 700 2.6cqh / 1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; }
.df-team.me { justify-items: end; color: var(--me); }
.df-team.them { justify-items: start; color: var(--them); }
.df-pips { display: flex; gap: 0.8cqh; }
.df-pips i { width: 4.6cqh; height: 1.2cqh; background: rgba(255, 255, 255, 0.14); transform: skewX(-18deg); }
.df-team.me .df-pips i.on { background: var(--me); }
.df-team.them .df-pips i.on { background: var(--them); }
.df-num { display: flex; align-items: baseline; gap: 0.22em; font: 800 12cqh / 0.8 var(--display); font-variant-numeric: tabular-nums; transition: opacity 0.3s; }
.df-num b { display: inline-block; }
.df-num b.pop { animation: numPop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
.df-num i { font-style: normal; font-size: 0.45em; color: var(--muted); }
@keyframes numPop { from { transform: scale(1.7); text-shadow: 0 0 4cqh currentColor; } to { transform: none; } }
.df-where { grid-column: 1 / -1; justify-self: center; font: 700 2cqh / 1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.df-arena.vs .df-num, .df-arena.vs .df-pips { opacity: 0; }

.df-fighter { --side: var(--me); grid-area: me; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 1.2cqh; }
.df-fighter.them { --side: var(--them); grid-area: them; }
.df-fighter:empty { visibility: hidden; }
.df-fig { position: relative; width: 100%; height: 100%; min-height: 0; }
.df-port { --wide: 150%; position: absolute; top: 0; left: calc((100% - var(--wide)) / 2); width: var(--wide); height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 2cqh 3cqh rgba(0, 0, 0, 0.6)); transition: filter 0.35s, opacity 0.35s; }
.df-fighter.them .df-port { transform: scaleX(-1); }
.df-fighter.me.enter .df-fig { animation: figInL 0.4s var(--ease-out) both; }
.df-fighter.them.enter .df-fig { animation: figInR 0.4s var(--ease-out) both; }
.df-fighter.enter .df-plate { animation: rvUp 0.4s 0.08s var(--ease-out) both; }
.df-fighter.won .df-port { filter: drop-shadow(0 0 2.6cqh color-mix(in srgb, var(--side) 75%, transparent)) brightness(1.08); }
.df-fighter.won .df-fig { animation: figWin 0.5s cubic-bezier(0.2, 1.5, 0.4, 1); }
.df-fighter.lost .df-port { filter: grayscale(1) brightness(0.38); opacity: 0.75; }
.df-fighter.lost .df-fig { animation: figHit 0.36s ease-out; }
.df-fighter.lost .df-plate { opacity: 0.45; }
@keyframes figInL { from { opacity: 0; transform: translateX(-24%); } to { opacity: 1; transform: none; } }
@keyframes figInR { from { opacity: 0; transform: translateX(24%); } to { opacity: 1; transform: none; } }
@keyframes figWin { 0% { transform: none; } 40% { transform: scale(1.06) translateY(-1.5%); } 100% { transform: none; } }
@keyframes figHit { 0%, 100% { transform: none; } 20% { transform: translateX(-2.4cqh) rotate(-1deg); } 45% { transform: translateX(1.8cqh); } 70% { transform: translateX(-0.8cqh); } }
.df-plate { display: flex; align-items: center; gap: 1cqh; max-width: 100%; padding: 0.8cqh 1.6cqh 0.7cqh; background: rgba(8, 10, 13, 0.78); box-shadow: inset 0 -0.5cqh 0 var(--side); font: 800 3.6cqh / 1 var(--display); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; transition: opacity 0.35s; }
.df-plate img { width: 4cqh; height: 4cqh; flex: none; }
.df-plate span { overflow: hidden; text-overflow: ellipsis; }
.df-plate small { padding: 0.35em 0.5em 0.25em; background: var(--side); color: #0a0c0f; font: 800 2cqh / 1 var(--display); letter-spacing: 0.18em; }

.df-mid { grid-area: mid; z-index: 2; align-self: center; display: grid; justify-items: center; gap: 2.2cqh; min-width: 0; text-align: center; transition: opacity 0.16s; }
.df-mid.out { opacity: 0; }
.df-kick { font: 800 3cqh / 1 var(--display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.df-kick.big { font-size: 8cqh; letter-spacing: 0.1em; color: var(--text); animation: kickIn 0.38s var(--ease-out) both; }
.df-kick.tense { color: var(--bad); }
.df-kick.tense.big { animation: kickIn 0.38s var(--ease-out) both, tense 0.39s 0.38s ease-in-out infinite alternate; }
@keyframes kickIn { from { opacity: 0; transform: scale(1.4); } to { opacity: 1; transform: none; } }
@keyframes tense { to { transform: scale(1.05); text-shadow: 0 0 4cqh color-mix(in srgb, var(--bad) 70%, transparent); } }
.df-line { margin: 0; max-width: 20ch; font: 800 min(5.4cqh, 3.3cqw) / 1.04 var(--display); text-transform: uppercase; text-wrap: balance; text-shadow: 0 0.4cqh 2.4cqh rgba(0, 0, 0, 0.8); animation: rvUp 0.32s var(--ease-out) both; }
.df-tag { padding: 0.4em 0.7em 0.32em; font: 800 2.8cqh / 1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: #0a0c0f; animation: stampIn 0.32s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.df-tag.win { background: var(--good); }
.df-tag.loss { background: var(--bad); }

/* the deciding round, played in full */
.df-clock { font: 800 4.4cqh / 1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* the deciding round, live: two line-ups face each other and every play is drawn between them */
.df-arena.live .df-fighter { display: none; }
.df-squad { grid-row: 2; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 1cqh; align-content: center; min-height: 0; }
.df-squad.me { grid-column: 1; animation: squadL 0.45s var(--ease-out) both; }
.df-squad.them { grid-column: 3; animation: squadR 0.45s var(--ease-out) both; }
.df-op { --side: var(--me); position: relative; display: flex; align-items: center; gap: 1.4cqh; min-height: 0; max-height: 12cqh; padding-right: 1.4cqh; background: rgba(8, 10, 13, 0.62); box-shadow: inset 0.5cqh 0 0 var(--side); transition: transform 0.25s var(--ease-out), background 0.25s, opacity 0.35s, filter 0.35s; }
.df-squad.them .df-op { --side: var(--them); flex-direction: row-reverse; padding: 0 0 0 1.4cqh; box-shadow: inset -0.5cqh 0 0 var(--side); }
.df-face { flex: none; align-self: stretch; aspect-ratio: 1; background: #10131a center 12% / cover no-repeat; }
.df-op b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 min(4cqh, 2.5cqw) / 1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.df-squad.them .df-op b { text-align: right; }
.df-badge { flex: none; font: 800 1.9cqh / 1 var(--display); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: #0a0c0f; }
.df-badge:not(:empty) { padding: 0.35em 0.5em 0.25em; background: var(--muted); }
.df-op.act { background: color-mix(in srgb, var(--side) 34%, rgba(8, 10, 13, 0.8)); transform: translateX(1.6cqh) scale(1.03); z-index: 2; }
.df-squad.them .df-op.act { transform: translateX(-1.6cqh) scale(1.03); }
.df-op.hit { animation: opHit 0.35s ease-out; }
.df-op.dead { opacity: 0.32; filter: grayscale(1); transform: none; }
.df-op.dead::after { content: ""; position: absolute; inset: 50% 1cqh auto; height: 0.4cqh; background: var(--bad); }
@keyframes squadL { from { opacity: 0; transform: translateX(-4cqw); } to { opacity: 1; transform: none; } }
@keyframes squadR { from { opacity: 0; transform: translateX(4cqw); } to { opacity: 1; transform: none; } }
@keyframes opHit { 0%, 100% { translate: 0; } 30% { translate: 0.8cqh 0; } 60% { translate: -0.6cqh 0; } }
.df-team small { font: 700 1.9cqh / 1 var(--display); letter-spacing: 0.24em; color: var(--muted); }
.df-op.prep { animation: prep 0.6s ease-out; }
@keyframes prep { 0% { background: color-mix(in srgb, var(--side) 45%, rgba(8, 10, 13, 0.8)); } 100% { background: rgba(8, 10, 13, 0.62); } }
.df-op.dead { animation: died 0.5s ease-out; }
@keyframes died { 0% { background: color-mix(in srgb, var(--bad) 55%, transparent); opacity: 1; filter: none; } 100% { opacity: 0.32; filter: grayscale(1); } }
.df-op.last:not(.dead) { animation: last 0.8s ease-in-out infinite alternate; }
@keyframes last { to { box-shadow: inset 0.5cqh 0 0 var(--side), 0 0 3cqh -0.5cqh var(--side); background: color-mix(in srgb, var(--side) 22%, rgba(8, 10, 13, 0.8)); } }
.df-badge.multi { padding: 0.35em 0.5em 0.25em; background: var(--bone); color: #0a0c0f; animation: stampIn 0.3s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.df-arena.punch { animation: punch 0.22s ease-out; }
@keyframes punch { 0%, 100% { translate: 0 0; } 30% { translate: 0.35cqh -0.25cqh; } 65% { translate: -0.25cqh 0.15cqh; } }
.df-act.count { font-size: min(13cqh, 8cqw); color: var(--text); }
.df-act.wait::before { content: "• • •"; color: var(--muted); animation: blink 0.5s ease-in-out infinite alternate; }
@keyframes blink { to { opacity: 0.25; } }
.df-clutch { padding: 0.25em 0.6em 0.15em; font: 800 4cqh / 1 var(--display); text-transform: uppercase; color: #0a0c0f; background: var(--me); animation: stampIn 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.df-clutch.them { background: var(--them); }
.df-arena.live .df-num { font-size: 10cqh; }
.df-arena > svg.df-beams { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.df-beams path { fill: none; stroke-width: 0.5cqh; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: beamDraw 0.35s var(--ease-out) forwards, beamFade 0.6s 0.95s ease-in forwards; }
.df-beams path.me { stroke: var(--me); }
.df-beams path.them { stroke: var(--them); }
.df-beams path.shot { stroke: var(--bone); stroke-width: 0.35cqh; animation-duration: 0.16s, 0.6s; }
@keyframes beamDraw { to { stroke-dashoffset: 0; } }
@keyframes beamFade { to { opacity: 0; } }
.df-arena.live .df-mid { align-self: stretch; align-content: center; gap: 1.8cqh; }
.df-phases { display: flex; gap: 0.8cqh; }
.df-phases i { padding: 0.45em 0.6em 0.35em; font: 700 1.9cqh / 1 var(--display); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: #5d646e; background: rgba(255, 255, 255, 0.04); transition: color 0.2s, background 0.2s; }
.df-phases i.past { color: var(--muted); }
.df-phases i.on { color: #0a0c0f; background: var(--bone); box-shadow: 0 0 2.4cqh -0.4cqh var(--bone); }
.df-clock.planted { padding: 0.2em 0.5em 0.1em; background: var(--atk); color: #0a0c0f; }
.df-act { min-height: 9cqh; display: grid; place-items: center; font: 800 min(8cqh, 5cqw) / 1 var(--display); text-transform: uppercase; color: var(--text); }
.df-act.me { color: var(--me); }
.df-act.them { color: var(--them); }
.df-act.in { animation: actIn 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.df-act .df-tag { display: inline-block; font-size: 3.6cqh; }
@keyframes actIn { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: none; } }
.df-kf { display: grid; gap: 0.8cqh; min-height: 17cqh; align-content: start; }
.df-kf p { display: flex; align-items: center; gap: 1cqh; margin: 0; padding: 0.6cqh 1.2cqh; background: rgba(8, 10, 13, 0.75); border-left: 0.5cqh solid var(--me); animation: rvUp 0.25s var(--ease-out) both; }
.df-kf p.them { border-left-color: var(--them); }
.df-kf img { width: 3.8cqh; height: 3.8cqh; }
.df-kf i { width: 2.4cqh; height: 0.35cqh; background: var(--bad); }

/* the simulation as a loading screen: the stacks, a counter, a bar and what it is weighing */
.df-arena.loading .df-bg { filter: brightness(0.55) saturate(0.6); transition: filter 0.6s; }
.df-arena.loading::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(242, 239, 230, 0.05) 50%, transparent 100%) 0 0 / 100% 22cqh no-repeat; animation: scan 1.6s linear infinite; }
@keyframes scan { from { background-position: 0 -22cqh; } to { background-position: 0 100cqh; } }
.df-arena.loading .df-board, .df-arena.loading .df-odds { opacity: 0.25; transition: opacity 0.4s; }
.df-load { display: grid; justify-items: center; gap: 1.6cqh; width: min(100%, 120cqh); }
.df-load-teams { display: flex; align-items: center; gap: 3cqw; margin-bottom: 2cqh; }
.df-load-teams > i { font: 800 3cqh / 1 var(--display); font-style: normal; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.df-load-team { display: flex; gap: 0.7cqh; }
.df-load-team span { display: grid; place-items: center; width: min(6.4cqh, 4.4cqw); aspect-ratio: 1; background: color-mix(in srgb, var(--side, var(--me)) 16%, #10131a); box-shadow: inset 0 -0.4cqh 0 var(--side, var(--me)); animation: rvUp 0.4s calc(var(--i) * 0.05s) var(--ease-out) both; }
.df-load-team.them span { --side: var(--them); }
.df-load-team img { width: 72%; height: 72%; }
.df-load .df-count { font: 800 min(15cqh, 11cqw) / 0.9 var(--display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; transition: color 0.4s; }
.df-load .df-count.done { color: var(--bone); text-shadow: 0 0 5cqh rgba(242, 239, 230, 0.35); }
.df-prog { position: relative; width: min(100%, 70cqh); height: 0.8cqh; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.df-prog i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--me), var(--bone) 70%, var(--them)); }
.df-ticker { min-height: 3.4cqh; font: 700 2.8cqh / 1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: #9aa1ab; }
.df-ticker.done { color: var(--good); animation: stampIn 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) both; }

/* the reveal: the number, the combos, the matchups */
.df-reveal { display: grid; justify-items: center; gap: 1.6cqh; width: 100%; }
.df-bigpct { font: 800 min(20cqh, 14cqw) / 0.85 var(--display); color: var(--me); font-variant-numeric: tabular-nums; animation: stampIn 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both; text-shadow: 0 0 6cqh color-mix(in srgb, var(--me) 45%, transparent); }
.df-bigpct small { font-size: 0.45em; }
.df-combos { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqh; margin-top: 1cqh; }
.df-cb { display: flex; align-items: center; gap: 1cqh; padding: 0.8cqh 1.6cqh 0.8cqh 1cqh; background: rgba(8, 10, 13, 0.7); box-shadow: inset 0 -0.45cqh 0 var(--me); animation: rvUp 0.4s calc(0.25s + var(--i) * 0.12s) var(--ease-out) both; }
.df-cb.them { box-shadow: inset 0 -0.45cqh 0 var(--them); }
.df-cb img { width: 4.6cqh; height: 4.6cqh; }
.df-cb span { display: grid; gap: 0.5cqh; margin-left: 0.6cqh; text-align: left; }
.df-cb b { font: 800 2.8cqh / 1 var(--display); letter-spacing: 0.03em; text-transform: uppercase; }
.df-cb small { font: 700 1.8cqh / 1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.df-reveal .df-keys { min-height: 0; margin-top: 1cqh; }
.df-reveal .df-km { animation-delay: calc(0.6s + var(--i) * 0.14s); }

/* a pick that completes a combo */
.df-combo { position: absolute; left: 50%; bottom: 18%; z-index: 4; translate: -50% 0; padding: 0.5em 0.8em 0.4em; background: var(--bone); color: #0a0c0f; font: 800 calc(var(--ch) * 0.075) / 1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; text-align: center; white-space: nowrap; box-shadow: 0 1cqh 4cqh rgba(0, 0, 0, 0.6); animation: stampIn 0.4s 0.15s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.df-combo small { display: block; margin-top: 0.35em; font-size: 0.62em; letter-spacing: 0.12em; }

/* combos on the live board */
.df-op.combo, .df-op.assist { background: color-mix(in srgb, var(--side) 22%, rgba(8, 10, 13, 0.8)); box-shadow: inset 0.5cqh 0 0 var(--side), 0 0 0 0.25cqh color-mix(in srgb, var(--side) 70%, transparent); }
.df-squad.them .df-op.combo, .df-squad.them .df-op.assist { box-shadow: inset -0.5cqh 0 0 var(--side), 0 0 0 0.25cqh color-mix(in srgb, var(--side) 70%, transparent); }
.df-beams path.mate { stroke-width: 0.35cqh; stroke-dasharray: 0.04 0.03; stroke-dashoffset: 0; opacity: 0; animation: mateIn 0.3s ease-out forwards, beamFade 0.6s 1s ease-in forwards; }
@keyframes mateIn { to { opacity: 0.9; } }
.df-act small { display: block; margin-bottom: 0.5cqh; font: 700 2cqh / 1 var(--display); letter-spacing: 0.3em; color: var(--muted); }

.df-odds { grid-area: odds; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; gap: 2cqw; font: 700 2.2cqh / 1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.df-odds .me { justify-self: start; color: var(--me); }
.df-odds .them { justify-self: end; color: var(--them); }
.df-odds b { font: 800 5cqh / 1 var(--display); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.df-odds.rec { animation: rvUp 0.5s 0.9s var(--ease-out) both; }
.df-odds.rec .me, .df-odds.rec .them { color: var(--muted); }
.df-odds.rec b { color: var(--text); font-size: 3.6cqh; margin-left: 0.3em; }
.df-odds.rec .lbl b { margin: 0; }
.df-odds b.hot { color: var(--good); }

/* stacks locked: both line-ups, the simulation counting up, then the matchups that decide it */
.df-arena.vs { grid-template-areas: "board board board" "mid mid mid" "odds odds odds"; }
.df-arena.vs .df-fighter { display: none; }
.df-arena.vs .df-mid { align-self: center; gap: 4cqh; width: 100%; }
.df-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4cqw; width: 100%; }
.df-line-up { display: grid; gap: 1.4cqh; }
.df-line-up.me { justify-items: end; color: var(--me); }
.df-line-up.them { justify-items: start; color: var(--them); }
.df-line-up .df-label { color: inherit; }
.df-icons { display: flex; gap: 0.8cqh; }
.df-icons span { display: grid; place-items: center; width: min(8cqh, 5cqw); aspect-ratio: 1; background: color-mix(in srgb, currentColor 16%, #10131a); box-shadow: inset 0 -0.45cqh 0 currentColor; }
.df-line-up.me .df-icons span { animation: slideL 0.45s calc(var(--i) * 0.05s) var(--ease-out) both; }
.df-line-up.them .df-icons span { animation: slideR 0.45s calc(var(--i) * 0.05s) var(--ease-out) both; }
.df-icons img { width: 72%; height: 72%; }
@keyframes slideL { from { opacity: 0; transform: translateX(-3cqw); } to { opacity: 1; transform: none; } }
@keyframes slideR { from { opacity: 0; transform: translateX(3cqw); } to { opacity: 1; transform: none; } }
.df-simbox { display: grid; justify-items: center; gap: 1cqh; min-width: 24cqh; animation: rvUp 0.4s 0.15s var(--ease-out) both; }
.df-count { font: 800 6cqh / 1 var(--display); font-variant-numeric: tabular-nums; }
.df-simpct { display: flex; align-items: baseline; gap: 0.2em; margin-top: 0.6cqh; font: 800 3.6cqh / 1 var(--display); color: var(--me); }
.df-simpct b { font-size: 2.6em; line-height: 0.8; font-variant-numeric: tabular-nums; }
.df-simpct small { margin-left: 0.5em; font: 700 2cqh / 1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.df-simbox.done .df-count { color: var(--muted); }
.df-keys { display: grid; justify-items: center; gap: 1.2cqh; min-height: 20cqh; }
.df-km { display: grid; grid-template-columns: auto minmax(0, auto) auto auto; align-items: center; gap: 1.4cqh; padding: 0.8cqh 1.6cqh; background: rgba(8, 10, 13, 0.6); border-left: 0.5cqh solid var(--me); animation: rvUp 0.4s calc(0.1s + var(--i) * 0.14s) var(--ease-out) both; }
.df-km.them { border-left-color: var(--them); }
.df-km img { width: 4.4cqh; height: 4.4cqh; }
.df-km span { font: 800 3.2cqh / 1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.df-km b { font: 800 3.2cqh / 1 var(--display); color: var(--me); white-space: nowrap; }
.df-km.them b { color: var(--them); }
.df-km small { margin-left: 0.4em; font: 700 1.8cqh / 1 var(--display); letter-spacing: 0.16em; color: var(--muted); }

/* full time */
.df-outcome { font: 800 min(16cqh, 10cqw) / 0.84 var(--display); text-transform: uppercase; animation: stampIn 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.df-arena.win .df-outcome { color: var(--good); }
.df-arena.loss .df-outcome { color: var(--bad); }
.df-grade { display: flex; align-items: center; gap: 2.4cqh; text-align: left; animation: rvUp 0.45s 0.3s var(--ease-out) both; }
.df-letter { display: grid; place-items: center; width: 15cqh; height: 15cqh; border: 2px dashed var(--line-2); color: transparent; font: 800 12.4cqh / 1 var(--display); }
.df-letter.in { border: 0; background: var(--g); color: #0a0c0f; animation: stampIn 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) both; box-shadow: 0 0 6cqh -1cqh var(--g); }
.df-rating b { display: block; font: 800 9cqh / 0.9 var(--display); font-variant-numeric: tabular-nums; }
.df-rating span { font: 700 2.2cqh / 1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.df-verdict { margin: 0; max-width: 36ch; font: 500 min(3cqh, 2.3cqw) / 1.3 var(--body); color: #c9ced6; animation: rvUp 0.5s 0.6s var(--ease-out) both; }
.df-moment { padding: 0.36em 0.7em 0.26em; border: 0.4cqh solid currentColor; font: 800 4.4cqh / 1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0; rotate: -4deg; }
.df-moment.win { color: var(--good); }
.df-moment.loss { color: var(--bad); }
.df-moment.in { animation: stampIn 0.36s cubic-bezier(0.2, 1.5, 0.4, 1) both; }

/* tall stages (vertical and half): faces side by side on top, the call underneath */
@container (max-aspect-ratio: 6 / 5) {
  .df-draft { padding: 2.4cqh 4cqw 2.4cqh; gap: 1.6cqh; }
  .df-top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "site site" "chance foe"; align-items: end; gap: 1.6cqh 3cqw; }
  .df-site { grid-area: site; }
  .df-chance { grid-area: chance; }
  .df-foe { grid-area: foe; }
  .df-foe-slots i { width: min(6.4cqh, 8cqw); }
  .df-roll { --ch: min(46cqh, 43cqw); gap: 2.4cqw; }
      .df-mapwin { --card-h: min(30cqh, 60cqw); }
  .df-sitename b { font-size: min(5cqh, 6.6cqw); }
  .df-arena { grid-template: "board board" auto "me them" minmax(0, 1fr) "mid mid" minmax(24cqh, auto) "odds odds" auto / minmax(0, 1fr) minmax(0, 1fr); gap: 1.4cqh 2cqw; padding: 2.4cqh 3cqw 2cqh; }
  .df-arena.vs { grid-template-areas: "board board" "mid mid" "mid mid" "odds odds"; }
  .df-num { font-size: 9cqh; }
  .df-team { font-size: min(2.4cqh, 3cqw); }
  .df-pips i { width: min(4.6cqh, 5cqw); }
  .df-mid { align-self: start; gap: 1.6cqh; }
  .df-kick.big { font-size: min(7cqh, 10cqw); }
  .df-line { max-width: 24ch; font-size: min(4.4cqh, 6.4cqw); }
  .df-plate { font-size: min(3.2cqh, 4.4cqw); }
  .df-port { --wide: 130%; }
  .df-squad { gap: 0.8cqh; }
  .df-op { gap: 1cqh; max-height: 8cqh; }
  .df-op b { font-size: min(2.6cqh, 3.4cqw); }
  .df-squad.me { grid-column: 1; }
  .df-squad.them { grid-column: 2; }
  .df-arena.live .df-mid { grid-row: 3; align-self: start; gap: 1.2cqh; }
  .df-act { min-height: 5cqh; font-size: min(5cqh, 7.4cqw); }
  .df-phases i { font-size: min(1.8cqh, 2.4cqw); }
  .df-kf { min-height: 13cqh; }
  .df-vs { grid-template-columns: minmax(0, 1fr); gap: 2.4cqh; }
  .df-line-up, .df-line-up.me, .df-line-up.them { justify-items: center; }
  .df-icons span { width: min(7cqh, 10cqw); }
  .df-km span { font-size: min(2.8cqh, 3.8cqw); }
  .df-outcome { font-size: min(11cqh, 17cqw); }
  .df-letter { width: 11cqh; height: 11cqh; font-size: 9cqh; }
  .df-rating b { font-size: 7cqh; }
  .df-verdict { font-size: min(2.6cqh, 3.8cqw); }
  .df-moment { font-size: 3.4cqh; }
}

/* the stack list beside the stage, with the site's briefing underneath */
.df-body { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: calc(var(--bu) * 3.4); min-height: 0; }
.slot.hot { background: color-mix(in srgb, var(--accent) 24%, var(--panel-2)); }
.df-sitebrief { display: grid; gap: calc(var(--bu) * 1.4); padding-top: calc(var(--bu) * 3); border-top: 1px solid var(--line); }
.df-sitebrief span { font: 700 calc(var(--bu) * 4.2) / 1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.df-sitebrief b { font: 800 calc(var(--bu) * 6.4) / 1 var(--display); text-transform: uppercase; }
.df-sitebrief i { font: 600 calc(var(--bu) * 4.2) / 1.2 var(--display); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; color: #b9bcc6; }
body[data-format="vertical"] .df-sitebrief { display: none; }

/* a short window with a title on top leaves no room for the stat row */
@container (max-height: 780px) {
  body[data-format="wide"] .reveal.op .rv-stats { display: none; }
}

/* ---------- picked tray ---------- */

.tray { display: flex; align-items: center; gap: 16px; height: 74px; padding: 0 20px; border-top: 1px solid var(--line); background: rgba(9, 11, 14, 0.78); }
.tray[hidden] { display: none; }
.tray-label { display: flex; align-items: baseline; gap: 10px; flex: none; }
.tray-label span { font: 700 13px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.tray-label strong { font: 800 30px/1 var(--display); }
.tray-list { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tray-list::-webkit-scrollbar { display: none; }
.tray-list:empty::before { content: "Picks will line up here in order."; color: #5d646e; font-size: 13px; }
.pick {
  flex: none; display: flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 12px 0 10px;
  background: var(--panel-2);
  border-left: 3px solid var(--accent);
  transition: background 0.15s;
}
.pick:hover { background: #20252e; }
.pick.va { box-shadow: inset 0 -3px 0 var(--good); }
.pick.vb { box-shadow: inset 0 -3px 0 var(--bad); }
.pick.new { animation: pickIn 0.5s var(--ease-out) both; }
.pick .n { font: 700 13px/1 var(--display); color: var(--muted); letter-spacing: 0.06em; }
.pick img { width: 28px; height: 28px; }
.pick .nm { font: 700 18px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
@keyframes pickIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tray-actions { display: flex; gap: 6px; flex: none; }

/* ---------- green screen: nothing may be see-through, or it keys out badly ---------- */

body[data-bg="green"] .top, body[data-bg="green"] .tray { background: var(--bg); }
body[data-bg="green"] .hud > * { padding: 9px 14px 8px; background: var(--bg); }
body[data-bg="green"] .reel.landed .card { opacity: 1; filter: grayscale(1) brightness(0.3); }
body[data-bg="green"] .reel.landed .card.win { filter: none; box-shadow: 0 0 0 2px var(--accent); }
body[data-bg="green"] .spin[disabled] { opacity: 1; background: #57554f; }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 110px; z-index: 50;
  transform: translate(-50%, 12px);
  padding: 11px 16px;
  background: var(--bone); color: #0a0c0f;
  font: 700 15px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.25s var(--ease-out);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- clean (recording) view ---------- */

.app.clean { grid-template-columns: minmax(0, 1fr); }
.app.clean .side, .app.clean .top, .app.clean .tray-actions { display: none; }
.app.clean .main { grid-template-rows: minmax(0, 1fr); }
.app.clean .spin kbd { display: none; }

/* ---------- small screens ---------- */

@media (max-width: 1020px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: min(var(--side-w), 88vw); transform: translateX(-100%); transition: transform 0.3s var(--ease-out); box-shadow: 30px 0 80px rgba(0, 0, 0, 0.6); }
  .app.drawer .side { transform: none; }
  .menu { display: inline-flex; }
  .top-actions { display: none; }
  .modes button { padding: 0 10px; font-size: 16px; letter-spacing: 0.1em; }
  .modes button[aria-pressed="true"]::after { left: 10px; right: 10px; }
  .reveal { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; }
  .rv-text { padding: 24px 20px 0; }
  .rv-portrait { height: 100%; max-width: 100%; }
  .rv-weapon, .rv-frame { align-self: center; margin: 0; }
  .tray-actions .ghost:not([data-act="reset"]) { display: none; }
  .spin { height: 64px; }
  .spin-label { font-size: 28px; }
  .spin kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rv-bg, .rv-mark, .rv-kicker, .rv-name .ch, .rv-rule, .rv-tags, .rv-stats, .rv-portrait, .rv-weapon, .rv-frame, .pick.new, .card.win .card-art, .stamp.in, .recap-head, .recap-card { animation-duration: 0.01s; animation-delay: 0s; }
  body.pending .slot.empty, body.pending .tier-l, .slot.in, .tier-ops .in { animation: none; }
  .card { transition-duration: 0.01s; }
}