/* BENHERO — ink-and-signal comic noir.
   Night city in deep navy ink; newsprint paper; one loud signal yellow.
   Display: Bangers. UI/body: Archivo (variable width). Icons: bespoke SVG. */

:root {
  --ink: #0b0f1c;
  --ink-2: #070a14;
  --night: #131a30;
  --night-2: #1a2342;
  --line: #2a3358;
  --line-soft: #222b4c;
  --paper: #f4ecd9;
  --paper-2: #e9dfc4;
  --paper-edge: #d8cbaa;
  --ink-on-paper: #241f16;
  --marquee: #ffc53d;
  --marquee-deep: #e8a417;
  --danger: #e5484d;
  --ok: #4cc38a;
  --steel: #8fa3e8;
  --dim: #97a2c4;
  --dimmer: #5a668f;
  --p0: #e5484d; --p1: #3b82f6; --p2: #f5a623;
  --p3: #30a46c; --p4: #a855f7; --p5: #0ea5a4;
  --font-display: 'Bangers', 'Arial Black', sans-serif;
  --font-ui: 'Archivo', system-ui, sans-serif;
  --halftone: radial-gradient(circle, rgba(0, 0, 0, 0.22) 1px, transparent 1.6px);
  --shadow-pop: 3px 4px 0 rgba(4, 6, 12, 0.65);
  /* newsprint fiber — tiled SVG turbulence, multiplied over paper surfaces */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* Paper + printed surfaces share one material: fiber grain overlaid via
   ::after so nothing reads as a flat digital fill. */
.ticker-box, .win-paper, .splash-card, .pow-strip { position: relative; }
.ticker-box::after, .win-paper::after, .splash-card::after, .pow-strip::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
  border-radius: inherit;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* The canvas behind everything (rubber-band overscroll, Safari chrome
   tinting) is night ink — never a white flash. Scroll chains stop here. */
html {
  background: var(--ink-2);
  overscroll-behavior: none;
}
body { overscroll-behavior: none; }
/* While the game screen is live the DOCUMENT never scrolls — panning the
   board is the only camera. (Cover/manual/picker keep normal page scroll.) */
body.app-locked {
  position: fixed;
  inset: 0;
  overflow: hidden;
  width: 100%;
}
body {
  margin: 0;
  font-family: var(--font-ui);
  color: #e8ecf8;
  /* night air: signal glow + sparse Ben-Day dot field, no engineering grids */
  background:
    radial-gradient(1100px 700px at 50% 28%, rgba(255, 197, 61, 0.06), transparent 60%),
    radial-gradient(circle, rgba(143, 163, 232, 0.07) 1.2px, transparent 2px) 0 0 / 56px 56px,
    radial-gradient(circle, rgba(143, 163, 232, 0.045) 1px, transparent 1.8px) 28px 28px / 56px 56px,
    linear-gradient(180deg, var(--ink) 0%, #0d1226 55%, #101731 100%);
}
button { font: inherit; cursor: pointer; }
input { font: inherit; }
.hidden { display: none !important; }

:focus-visible { outline: 3px solid var(--marquee); outline-offset: 2px; border-radius: 4px; }

/* ---------- icons ---------- */
.ico {
  width: 1em; height: 1em;
  vertical-align: -0.14em;
  fill: currentColor;
  flex: none;
}

.statchip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.78rem; font-weight: 800;
  color: var(--dim);
}
.statchip .ico { font-size: 0.9em; }
.statchip b { color: #cdd6f4; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.82rem;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -5px 0 rgba(4, 6, 12, 0.22), var(--shadow-pop);
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
  position: relative;
  overflow: hidden;
}
.btn::after {
  /* halftone shading along the bottom lip — printed, not flat */
  content: '';
  position: absolute; left: 8px; right: 8px; bottom: 2px; height: 8px;
  background: radial-gradient(circle, rgba(4, 6, 12, 0.35) 1px, transparent 1.5px) 0 0 / 5px 5px;
  border-radius: 99px;
  opacity: 0.5;
  pointer-events: none;
}
.btn .ico { font-size: 1.05em; }
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.34), inset 0 -5px 0 rgba(4, 6, 12, 0.22), 4px 6px 0 rgba(4, 6, 12, 0.65);
  filter: brightness(1.07);
}
.btn:active:not(:disabled) {
  transform: translateY(2px) scale(0.98);
  box-shadow: inset 0 3px 4px rgba(4, 6, 12, 0.35), 1px 2px 0 rgba(4, 6, 12, 0.65);
}
.btn:disabled { opacity: 0.32; cursor: not-allowed; box-shadow: none; }
.btn:disabled::after { display: none; }
.btn-gold {
  background: linear-gradient(180deg, #ffd76b, var(--marquee) 55%, var(--marquee-deep));
  color: #241a00;
}
.btn-hero {
  background: linear-gradient(180deg, #ff6a6e, var(--danger) 55%, #c22c31);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.btn-plain { background: linear-gradient(180deg, #232d52, var(--night-2)); color: #cdd6f4; border-color: var(--line); }
.btn-big { font-size: 1.15rem; padding: 15px 36px; border-radius: 14px; }
.btn-small { padding: 5px 12px; font-size: 0.72rem; }
.btn-nudge { animation: nudge 1.1s ease-in-out infinite; border-color: var(--marquee); color: #ffe9b3; }
@keyframes nudge { 50% { box-shadow: 0 0 0 6px rgba(255, 197, 61, 0.22), var(--shadow-pop); } }

/* ================= SETUP ================= */
.screen { min-height: 100vh; min-height: 100dvh; }
.masthead { text-align: center; position: relative; }
.mast-kicker {
  font-weight: 900; font-size: 0.78rem; letter-spacing: 0.42em;
  color: var(--marquee); opacity: 0.92;
}
.mast-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 8.5rem);
  margin: 6px 0 0;
  line-height: 0.95;
  color: var(--marquee);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 5px 6px 0 var(--danger), 9px 11px 0 rgba(0, 0, 0, 0.6);
  letter-spacing: 0.03em;
  transform: rotate(-1.2deg);
}
.mast-title--setup { font-size: clamp(3rem, 9vw, 5.4rem); }
.mast-sub { margin-top: 16px; color: var(--dim); font-size: 1.05rem; }
.mast-sub b { color: var(--marquee); }

/* ================= LANDING: the cover of Issue #1 ================= */
.landing {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 30px 16px 120px;
}
.cover-rays {
  position: absolute; left: 50%; top: 42%;
  width: 190vmax; height: 190vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 197, 61, 0.06) 0deg 4deg, transparent 4deg 13deg);
  border-radius: 50%;
  mask-image: radial-gradient(circle, #000 0%, transparent 58%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 58%);
  animation: rays-spin 70s linear infinite, cover-in 1.4s ease backwards;
  pointer-events: none;
}
.cover-stars {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle, rgba(244, 236, 217, 0.9) 1.1px, transparent 1.8px) 7vw 12vh / 340px 260px,
    radial-gradient(circle, rgba(143, 163, 232, 0.7) 0.9px, transparent 1.5px) 60vw 6vh / 280px 300px,
    radial-gradient(circle, rgba(244, 236, 217, 0.5) 0.8px, transparent 1.4px) 30vw 30vh / 420px 340px;
  animation: star-twinkle 4.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes star-twinkle { from { opacity: 0.5; } to { opacity: 1; } }
.cover-beacon {
  position: absolute; top: 9%; right: 11%;
  width: 88px; height: 88px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: rgba(255, 232, 170, 0.75);
  font-size: 2.4rem;
  background: radial-gradient(circle, rgba(255, 232, 170, 0.2), rgba(255, 232, 170, 0.05) 55%, transparent 72%);
  box-shadow: 0 0 44px rgba(255, 232, 170, 0.25);
  animation: beacon-breathe 3.2s ease-in-out infinite, cover-in 1.2s 0.9s ease backwards;
  pointer-events: none;
}
@keyframes beacon-breathe { 50% { transform: scale(1.08); box-shadow: 0 0 60px rgba(255, 232, 170, 0.4); } }
.cover-corner {
  position: absolute; z-index: 3;
  font-weight: 900;
  pointer-events: none;
  animation: cover-in 0.8s 1.35s ease backwards;
}
.cover-price {
  top: 18px; left: 18px;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, #fbf5e6, var(--paper));
  color: var(--ink-on-paper);
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  padding: 6px 10px 5px;
  transform: rotate(-3deg);
  box-shadow: 2.5px 3px 0 rgba(4, 6, 12, 0.55);
}
.cover-price b { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; }
.cover-price span { font-size: 0.42rem; letter-spacing: 0.22em; opacity: 0.7; }
.cover-code {
  top: 22px; right: 18px;
  font-size: 0.44rem; letter-spacing: 0.16em; line-height: 1.6;
  text-align: center;
  color: var(--dim);
  border: 1.5px solid var(--line);
  border-radius: 5px;
  padding: 5px 8px;
  transform: rotate(2deg);
}

.cover-stack {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  max-width: 660px;
}
.cover-kicker {
  font-weight: 900; font-size: 0.8rem; letter-spacing: 0.44em;
  color: var(--marquee);
  animation: cover-drop 0.5s 0.15s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}
.cover-title {
  font-family: var(--font-display);
  font-size: clamp(4.6rem, 15vw, 9.5rem);
  margin: 8px 0 0;
  line-height: 0.92;
  color: var(--marquee);
  -webkit-text-stroke: 3.5px var(--ink);
  text-shadow: 6px 7px 0 var(--danger), 11px 13px 0 rgba(4, 6, 12, 0.6);
  letter-spacing: 0.03em;
  transform: rotate(-1.4deg);
  animation: title-slam 0.55s 0.35s cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
}
@keyframes title-slam {
  0% { transform: rotate(-8deg) scale(2.6); opacity: 0; }
  60% { transform: rotate(-1.4deg) scale(0.96); opacity: 1; }
  100% { transform: rotate(-1.4deg) scale(1); }
}
.cover-issue {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-top: 16px;
  background: linear-gradient(180deg, #fbf5e6, var(--paper));
  color: var(--ink-on-paper);
  font-weight: 900; font-size: 0.68rem; letter-spacing: 0.2em;
  border: 2.5px solid var(--ink);
  border-radius: 4px;
  padding: 5px 14px;
  transform: rotate(-1.6deg);
  box-shadow: 2.5px 3px 0 rgba(4, 6, 12, 0.55);
  animation: cover-drop 0.5s 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}
.cover-issue i { font-style: normal; color: var(--danger); }
.cover-tag {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.6vw, 1.9rem);
  letter-spacing: 0.06em;
  color: var(--paper);
  text-shadow: 2.5px 2.5px 0 rgba(4, 6, 12, 0.65);
  animation: cover-drop 0.5s 0.85s ease backwards;
}
.cover-sub {
  margin: 8px 0 0;
  max-width: 430px;
  color: var(--dim);
  font-size: 0.95rem; line-height: 1.55;
  animation: cover-drop 0.5s 0.95s ease backwards;
}
.cover-lineup { display: flex; gap: 11px; margin-top: 26px; }
.cover-hero {
  width: 52px; height: 62px;
  border-radius: 11px;
  animation: hero-pop 0.45s calc(1.05s + var(--i) * 90ms) cubic-bezier(0.2, 1.7, 0.4, 1) backwards;
}
.cover-hero:nth-child(odd) { transform: rotate(-2.5deg); }
.cover-hero:nth-child(even) { transform: rotate(2deg); }
@keyframes hero-pop { from { transform: translateY(34px) scale(0.4); opacity: 0; } }
.cover-ctas {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  margin-top: 30px;
  animation: cover-drop 0.55s 1.55s ease backwards;
}
.cover-ctas .btn { text-decoration: none; }
@keyframes cover-drop { from { opacity: 0; transform: translateY(-18px); } }
@keyframes cover-in { from { opacity: 0; } }
.cover-skyline {
  position: absolute; left: 0; right: 0; bottom: 0; height: 170px;
  pointer-events: none;
  animation: skyline-rise 0.9s 0.5s cubic-bezier(0.25, 1.1, 0.4, 1) backwards;
}
@keyframes skyline-rise { from { transform: translateY(100%); } }
.cover-skyline svg { position: absolute; bottom: 0; width: 100%; height: 100%; fill: #0a0e1d; }
.btn-continue .continue-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.btn-continue .continue-label em {
  font-style: normal;
  font-size: 0.52rem; font-weight: 900; letter-spacing: 0.18em;
  opacity: 0.8;
}
.cover-credit {
  position: absolute; left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 2;
  text-align: center;
  font-size: 0.52rem; font-weight: 800; letter-spacing: 0.22em;
  color: rgba(140, 152, 190, 0.42);
}
.cover-skyline::before, .cover-skyline::after {
  content: '';
  position: absolute; bottom: 0;
  width: 110px; height: 640px;
  background: linear-gradient(to top, rgba(255, 232, 170, 0.14), transparent 76%);
  clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0);
  transform-origin: 50% 100%;
}
.cover-skyline::before { left: 12%; animation: beam-sweep 12s ease-in-out infinite alternate; }
.cover-skyline::after { right: 16%; animation: beam-sweep 14s ease-in-out infinite alternate-reverse; }

/* ================= LEARN: the field manual ================= */
.learn {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  overflow: hidden;
  padding: 26px 14px 60px;
}
.manual { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.manual-back { display: inline-flex; text-decoration: none; margin-bottom: 14px; }
.setup-back { position: absolute; top: 18px; left: 18px; z-index: 3; text-decoration: none; }
.manual-paper {
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.06) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, #fbf5e6, var(--paper) 30%, var(--paper-2));
  color: var(--ink-on-paper);
  border: 3.5px solid var(--ink);
  border-radius: 10px;
  padding: 26px clamp(18px, 5vw, 44px) 34px;
  box-shadow: 0 0 0 3px var(--marquee), 12px 14px 0 rgba(4, 6, 12, 0.5);
  transform: rotate(-0.4deg);
}
.manual-mast { display: flex; align-items: center; gap: 14px; }
.manual-rule { flex: 1; height: 3px; background: var(--ink-on-paper); }
.manual-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.6vw, 2.2rem);
  letter-spacing: 0.1em;
  text-align: center;
}
.manual-dateline {
  text-align: center;
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.26em;
  border-top: 1.5px solid var(--ink-on-paper);
  border-bottom: 1.5px solid var(--ink-on-paper);
  padding: 4px 0; margin: 8px 0 20px;
}
.manual-memo {
  font-size: 0.95rem; line-height: 1.65;
  background: rgba(255, 255, 255, 0.45);
  border: 2px solid rgba(36, 31, 22, 0.3);
  border-left: 6px solid var(--marquee-deep);
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.manual-memo b { display: block; letter-spacing: 0.06em; margin-bottom: 6px; }
.gold { color: #8a5b00; }
.manual-section {
  display: flex; gap: 16px;
  padding: 16px 0;
  border-top: 1.5px dashed rgba(36, 31, 22, 0.3);
}
.msec-num {
  flex: none;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #241a00;
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  transform: rotate(-4deg);
  box-shadow: 2px 2.5px 0 rgba(4, 6, 12, 0.45);
}
.msec-body h3 {
  margin: 2px 0 8px;
  font-family: var(--font-display);
  font-size: 1.35rem; letter-spacing: 0.09em;
}
.msec-body p { margin: 0 0 8px; font-size: 0.92rem; line-height: 1.65; }
.mstat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--st) 60%, #241f16);
  border: 1.5px solid color-mix(in srgb, var(--st) 70%, #241f16);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.mstat .ico { color: color-mix(in srgb, var(--st) 75%, #241f16); }
.mkind {
  font-size: 0.66rem; font-weight: 900; letter-spacing: 0.12em;
  color: #fff;
  background: var(--kc);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 1.5px 7px;
  white-space: nowrap;
}
.manual-kinds { line-height: 2 !important; }
.manual-scoop {
  background: repeating-linear-gradient(-55deg, rgba(255, 197, 61, 0.18) 0 12px, rgba(255, 197, 61, 0.05) 12px 24px);
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 0.9rem; line-height: 1.6;
  transform: rotate(-0.4deg);
  box-shadow: 2.5px 3px 0 rgba(4, 6, 12, 0.35);
}
.manual-cta {
  text-align: center;
  border-top: 3px solid var(--ink-on-paper);
  margin-top: 20px; padding-top: 20px;
}
.manual-cta p { font-style: italic; margin: 0 0 14px; }
.manual-cta .btn { text-decoration: none; }

@media (max-width: 640px) {
  .cover-beacon { display: none; }
  .cover-lineup { gap: 7px; }
  .cover-hero { width: 42px; height: 50px; }
  .cover-ctas { flex-direction: column; width: 100%; max-width: 320px; }
  .cover-ctas .btn { justify-content: center; }
  .manual-section { gap: 11px; }
  .msec-num { width: 36px; height: 36px; font-size: 1.2rem; }
}

/* ---------- the character picker ---------- */
.picker-screen {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 54px 14px 60px;
}
.picker-mast { position: relative; z-index: 2; margin-bottom: 18px; }
.picker { position: relative; z-index: 2; width: min(1080px, 100%); display: flex; flex-direction: column; align-items: center; }

/* --- the bench: player slots --- */
.slot-bench {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 14px;
}
.slot {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 118px;
  background: linear-gradient(180deg, var(--night), #10162c);
  border: 2.5px solid var(--ink);
  outline: 1.5px solid var(--line-soft);
  border-radius: 13px;
  padding: 12px 10px 10px;
  cursor: pointer;
  transition: outline-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: 3px 4px 0 rgba(4, 6, 12, 0.5);
}
.slot:hover { transform: translateY(-2px); }
.slot-active {
  outline-color: var(--pc);
  box-shadow: 0 0 0 2px var(--pc), 0 0 22px color-mix(in srgb, var(--pc) 55%, transparent), 3px 4px 0 rgba(4, 6, 12, 0.5);
}
.slot-picking {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  font-family: var(--font-display);
  font-size: 0.66rem; letter-spacing: 0.14em;
  background: var(--pc); color: #fff;
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 1px 9px;
  text-shadow: 1px 1px 0 rgba(4, 6, 12, 0.5);
  animation: nudge 1.2s ease-in-out infinite;
  white-space: nowrap;
}
.slot-frame {
  position: relative; /* contain generated .asset-layer art */
  width: 64px; height: 74px;
  border-radius: 11px;
  border: 2.5px solid var(--ink);
  box-shadow: 0 0 0 1.5px var(--pc, var(--line));
  overflow: hidden;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.slot-frame .portrait-art { width: 100%; height: 100%; }
.slot-empty {
  font-family: var(--font-display);
  font-size: 2rem; color: var(--dimmer);
}
.slot-name {
  width: 100%;
  background: var(--ink); color: #e8ecf8;
  border: 1.5px solid var(--line); border-radius: 7px;
  padding: 4px 7px;
  font-size: 0.78rem; font-weight: 700;
  text-align: center;
}
.slot-name:focus { border-color: var(--pc); outline: none; }
.slot-arch {
  font-size: 0.52rem; font-weight: 900; letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--pc, #5a668f) 62%, #fff);
  text-transform: uppercase;
}
.slot-remove {
  position: absolute; top: 4px; right: 6px;
  background: none; border: none;
  color: var(--dimmer); font-size: 0.85rem;
  padding: 3px 5px;
}
.slot-remove:hover { color: var(--danger); }
.slot-add { border-style: dashed; outline: none; background: rgba(11, 15, 28, 0.4); }
.slot-add .slot-frame { border-style: dashed; box-shadow: none; background: transparent; }
.slot-add:hover .slot-empty { color: var(--marquee); }
.slot-add .slot-arch { color: var(--dimmer); }

.picker-status {
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.28em;
  color: var(--dim);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(4, 6, 12, 0.8);
  margin-bottom: 18px;
}
.picker-status b { color: var(--pc, var(--marquee)); }

/* --- the casting wall: hero cards --- */
.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 18px;
  width: 100%;
  margin-bottom: 26px;
}
.hcard {
  position: relative;
  border: none; background: none; padding: 0;
  text-align: left;
  cursor: pointer;
  filter: drop-shadow(4px 6px 0 rgba(4, 6, 12, 0.5));
  transition: transform 0.16s ease, filter 0.16s ease;
  font: inherit; color: inherit;
}
.hcard:hover:not(.hcard-locked) {
  transform: translateY(-6px) rotate(-0.6deg);
  filter: drop-shadow(4px 10px 0 rgba(4, 6, 12, 0.45)) drop-shadow(0 0 20px color-mix(in srgb, var(--hc) 60%, transparent));
  z-index: 2;
}
.hcard-inner {
  display: flex; flex-direction: column;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: inset 0 0 0 4px var(--hc, var(--line)), inset 0 0 0 5.5px rgba(4, 6, 12, 0.85);
}
.hcard-art {
  position: relative; /* contain generated .asset-layer art to the window */
  height: 150px;
  margin: 5.5px 5.5px 0;
  border-radius: 9px 9px 0 0;
  overflow: hidden;
  background: var(--ink);
}
.hcard-art .portrait-art { width: 100%; height: 100%; }
.hcard-art--locked {
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--dimmer);
  background: repeating-linear-gradient(-45deg, #131a30 0 16px, #10162c 16px 32px);
}
.hcard-body {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0 5.5px;
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.06) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, #f0e7d2, var(--paper) 45%, var(--paper-2));
  color: var(--ink-on-paper);
  padding: 9px 11px 8px;
}
.hcard-name {
  font-family: var(--font-display);
  font-size: 1.35rem; letter-spacing: 0.05em; line-height: 1;
}
.hcard-arch {
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.24em;
  color: color-mix(in srgb, var(--hc) 55%, #241f16);
  text-transform: uppercase;
}
.hcard-tag {
  margin-top: 5px;
  font-size: 0.7rem; font-style: italic;
  color: rgba(36, 31, 22, 0.7);
  line-height: 1.35;
  min-height: 2.7em;
}
.hcard-stats {
  display: flex;
  height: 36px;
  margin: 0 5.5px 5.5px;
  border-top: 2.5px solid var(--ink);
  border-radius: 0 0 9px 9px;
  overflow: hidden;
}
.hcard-picked .hcard-inner { box-shadow: inset 0 0 0 4px var(--hc), inset 0 0 0 5.5px rgba(4, 6, 12, 0.85), 0 0 0 2.5px var(--marquee); }
.hcard-picks {
  position: absolute; top: -9px; right: 10px;
  display: flex; gap: 5px;
}
.hcard-picks i {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--pc);
  border: 2px solid var(--ink);
  box-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.5);
}
.hcard-locked { cursor: not-allowed; opacity: 0.75; }
.hcard-locked .hcard-body { filter: saturate(0.3); }
.hcard-soon {
  position: absolute; top: 42%; left: -6%; right: -6%;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1rem; letter-spacing: 0.22em;
  color: var(--ink);
  background: repeating-linear-gradient(-55deg, var(--marquee) 0 13px, var(--ink) 13px 26px);
  -webkit-text-stroke: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 4px 0;
  transform: rotate(-6deg);
  text-shadow: 0 0 6px var(--marquee), 0 0 6px var(--marquee), 0 0 6px var(--marquee);
  box-shadow: 0 3px 10px rgba(4, 6, 12, 0.5);
}
.picker-start { min-width: 280px; justify-content: center; }
.picker-start:disabled { filter: saturate(0.4); }

@media (max-width: 640px) {
  .picker-screen { padding-top: 64px; }
  .picker-mast .mast-kicker { font-size: 0.6rem; letter-spacing: 0.28em; }
  .slot { width: 96px; padding: 10px 7px 8px; }
  .slot-frame { width: 52px; height: 60px; }
  .hero-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hcard-art { height: 116px; }
  .hcard-name { font-size: 1.1rem; }
  .hcard-tag { font-size: 0.62rem; min-height: 3.3em; }
  .hcard-stats { height: 30px; }
  .picker-start { width: 100%; }
}

/* ================= GAME ================= */
/* dvh = the VISIBLE viewport on mobile: the dock always clears the browser
   toolbar instead of hiding behind it, and resizes live as the bar collapses */
#game-screen { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.gamebar {
  display: flex; align-items: center; gap: 18px;
  /* standalone/notch devices: ride below the status bar, not under it */
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  background: linear-gradient(180deg, #182040, var(--night));
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  flex: none;
  position: relative;
  z-index: 12;
}
.gamebar-logo {
  font-family: var(--font-display);
  font-size: 1.75rem; color: var(--marquee);
  -webkit-text-stroke: 1px var(--ink);
  text-shadow: 2px 2px 0 rgba(229, 72, 77, 0.8);
  letter-spacing: 0.05em;
  transform: rotate(-1deg);
}
.turnbar { display: flex; align-items: center; justify-content: center; gap: 16px; flex: 1; min-width: 0; }
.btn-news { display: none; position: relative; }
.news-fresh::after {
  content: '';
  position: absolute; top: -2px; right: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger);
  border: 1.5px solid var(--ink);
  animation: news-dot 1.6s ease-in-out infinite;
}
@keyframes news-dot { 50% { transform: scale(1.35); opacity: 0.7; } }
.turnbar-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 88%, #fff), var(--pc));
  color: #fff;
  border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 4px 16px 4px 8px; font-weight: 900; letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow: 2px 3px 0 rgba(4, 6, 12, 0.5);
}
.turnbar-emblem {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(4, 6, 12, 0.35);
  font-size: 0.85rem;
}
.turnbar-speed { display: flex; gap: 3px; }
.pip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); border: 1.5px solid var(--line);
  color: var(--dimmer); font-size: 0.7rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.pip-on {
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  border-color: var(--ink); color: #241a00;
  box-shadow: 0 0 8px rgba(255, 197, 61, 0.5);
}
.turnbar-round { color: var(--dimmer); font-weight: 900; font-size: 0.72rem; letter-spacing: 0.24em; }

.game-layout { display: flex; flex: 1; min-height: 0; }
.sidebar {
  width: 306px; flex: none;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px;
  background: rgba(7, 10, 20, 0.72);
  border-right: 1px solid var(--line-soft);
  overflow-y: auto;
  z-index: 11;
}
.board-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; overflow: hidden; }

/* ---------- players panel: hand-cut dossier cards ---------- */
/* The dossiers wear the LINEUP language vertically: full-bleed portrait
   panels stacked with diagonal ink seams, the acting player glowing. */
.players { display: flex; flex-direction: column; gap: 0; padding-top: 12px; }
.player {
  position: relative;
  overflow: hidden;
  background: linear-gradient(122deg, color-mix(in srgb, var(--pc) 22%, #131a33), var(--night) 46%, #0e1428);
  border: 2.5px solid var(--ink);
  padding: 12px 12px 11px;
  /* diagonal seams: bottom edge dives right; the next panel tucks under */
  clip-path: polygon(0 0, 100% 10px, 100% 100%, 0 calc(100% - 10px));
  margin-top: -7px;
}
.player:first-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 10px)); margin-top: 0; border-radius: 11px 11px 0 0; }
.player:last-child { clip-path: polygon(0 0, 100% 10px, 100% 100%, 0 100%); border-radius: 0 0 11px 11px; }
.player:first-child:last-child { clip-path: none; border-radius: 11px; }
/* the portrait IS the panel (stacking context keeps the img under the text) */
.pl-art { position: absolute; inset: 0; z-index: 0; }
.pl-art .portrait-photo, .pl-art .portrait-art { width: 100%; height: 100%; }
.pl-art .asset-layer { object-position: 82% 12%; }
.player:not(.player-active) .pl-art { filter: saturate(0.5) brightness(0.55); }
.pl-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(15, 20, 40, 0.94) 0%, rgba(15, 20, 40, 0.88) 46%, rgba(15, 20, 40, 0.28) 100%),
    linear-gradient(0deg, rgba(7, 10, 20, 0.72) 0%, transparent 42%);
}
.player-active .pl-shade {
  background:
    linear-gradient(90deg, rgba(15, 20, 40, 0.92) 0%, rgba(15, 20, 40, 0.8) 42%, rgba(15, 20, 40, 0.12) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--pc) 26%, transparent) 0%, transparent 52%);
}
.pl-glow {
  position: absolute; inset: 0; z-index: 1;
  box-shadow:
    inset 0 0 0 2.5px color-mix(in srgb, var(--pc) 80%, transparent),
    inset 4px 0 0 var(--pc),
    inset 0 0 30px color-mix(in srgb, var(--pc) 32%, transparent);
  animation: lu-breathe 2s ease-in-out infinite;
  pointer-events: none;
}
.player > * { position: relative; z-index: 2; }
/* the composited layers must STAY absolute (the generic lift above would
   otherwise drag them into flow) */
.player > .pl-art { position: absolute; inset: 0; z-index: 0; }
.player > .pl-shade, .player > .pl-glow { position: absolute; inset: 0; z-index: 1; }
.player > .lu-sweep { position: absolute; top: -4%; bottom: -4%; z-index: 1; }
.player-active .pl-art .asset-layer { animation: ken-burns 16s ease-in-out infinite alternate; }
.player-active {
  box-shadow: none;
}
.onduty {
  position: absolute; top: 4px; right: 8px; z-index: 3;
  font-family: var(--font-display);
  font-size: 0.72rem; letter-spacing: 0.12em;
  background: var(--pc); color: #fff;
  padding: 2px 10px 1px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  transform: rotate(2.5deg);
  text-shadow: 1px 1px 0 rgba(4, 6, 12, 0.5);
  box-shadow: 1.5px 2px 0 rgba(4, 6, 12, 0.55);
}
/* --- dossier head: breakout portrait · ribbon name · hanging score burst --- */
.portrait {
  position: relative;
  display: block; flex: none;
  border-radius: 10px;
  border: 2.5px solid var(--ink);
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px var(--pc, var(--line)), 2px 3px 0 rgba(4, 6, 12, 0.5);
}
.portrait-art { display: block; width: 100%; height: 100%; }
/* photo-only portraits: the span is the frame, the art covers it edge to
   edge; the player color shows only as the loading backdrop */
.portrait-photo {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  background: var(--pc, var(--night));
}
.asset-layer {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pcard-head { display: flex; align-items: flex-start; gap: 11px; padding-right: 40px; }
.pcard-head .portrait {
  width: 58px; height: 70px;
  margin: -22px 0 0 -2px; /* the hero doesn't fit in the file photo */
  transform: rotate(-3deg);
  z-index: 2;
}
.pcard-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.pcard-name {
  display: inline-block;
  align-self: flex-start;
  max-width: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 88%, #fff), var(--pc) 60%, color-mix(in srgb, var(--pc) 75%, #000));
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 1px 12px 2px 9px;
  transform: skewX(-9deg) rotate(-0.6deg);
  box-shadow: 2px 2.5px 0 rgba(4, 6, 12, 0.55);
}
.pcard-name i {
  display: block;
  transform: skewX(9deg);
  font-style: normal;
  font-family: var(--font-display);
  font-size: 1.12rem; letter-spacing: 0.06em; line-height: 1.15;
  color: #fff;
  text-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player-arch {
  color: color-mix(in srgb, var(--pc) 62%, #fff);
  font-size: 0.58rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.22em;
  padding-left: 2px;
}
.pcard-score {
  position: absolute; top: -14px; right: -10px; z-index: 3;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(6deg);
}
.score-burst {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--marquee);
  filter: drop-shadow(2px 2.5px 0 rgba(4, 6, 12, 0.55));
}
.pcard-score b {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.35rem; line-height: 1;
  color: #241a00;
}
.score-lead .score-burst { animation: score-glow 1.8s ease-in-out infinite; }
@keyframes score-glow { 50% { filter: drop-shadow(2px 2.5px 0 rgba(4, 6, 12, 0.55)) drop-shadow(0 0 7px rgba(255, 197, 61, 0.8)); } }
/* active card: ON DUTY replaces the burst's corner — burst slides left */
.player-active .pcard-score { right: -6px; top: -16px; }
.player-active .onduty { top: auto; bottom: 15px; right: 10px; transform: rotate(-2deg); } /* clear of the seam clip */
.fame {
  position: relative; display: block;
  height: 8px; border-radius: 99px; margin-top: 4px;
  background: var(--ink); border: 1px solid var(--line); overflow: hidden;
}
.fame-fill {
  display: block; height: 100%;
  background:
    repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0.22) 0 4px, transparent 4px 9px),
    linear-gradient(90deg, var(--pc), var(--marquee));
  transition: width 0.55s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.fame-tick {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: rgba(7, 10, 20, 0.75);
}
.tick-hit { background: rgba(255, 255, 255, 0.5); }

/* stat plates — angled fighting-game readouts, one identity color per stat */
.pcard-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 12px; padding: 0 3px; }
/* the manifested power line: name up front, the rule in plain words */
.pl-power {
  display: flex; align-items: center; gap: 7px;
  margin-top: 9px;
  padding: 6px 9px;
  background: rgba(7, 10, 20, 0.55);
  border: 1.5px solid var(--marquee);
  border-radius: 5px;
  transform: skewX(-4deg);
}
.pl-power .ico { width: 13px; height: 13px; flex: none; color: var(--marquee); filter: drop-shadow(0 0 5px rgba(255, 197, 61, 0.5)); }
.pl-power b {
  font-size: 0.58rem; font-weight: 900; letter-spacing: 0.14em;
  color: var(--marquee);
  white-space: nowrap; flex: none;
}
.pl-power span {
  font-size: 0.6rem; line-height: 1.25;
  color: var(--dim);
  overflow: hidden;
}
.splate {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: linear-gradient(180deg, rgba(4, 6, 12, 0.65), rgba(4, 6, 12, 0.4));
  border: 1.5px solid color-mix(in srgb, var(--st) 48%, var(--ink));
  border-bottom-width: 3.5px;
  border-radius: 7px;
  padding: 5px 0 4px;
  color: var(--st);
  transform: skewX(-8deg);
}
.splate > * { transform: skewX(8deg); }
.splate .ico { font-size: 0.82rem; filter: drop-shadow(0 1px 0 rgba(4, 6, 12, 0.6)); }
.splate b { color: #eef1fb; font-size: 0.98rem; font-weight: 900; line-height: 1; }
.splate .stat-boosted { color: var(--marquee); }
.carried {
  display: flex; align-items: center; gap: 6px;
  margin: 9px 2px 0;
  padding: 5px 9px;
  font-size: 0.76rem; font-weight: 700; color: #ffe4a1;
  background: rgba(255, 197, 61, 0.09);
  border: 1.5px dashed rgba(255, 197, 61, 0.5);
  border-radius: 3px;
  transform: rotate(-0.8deg);
}
.carried .ico { color: var(--marquee); }
.carried-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carried-star { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--marquee); font-weight: 900; }
.carried-none {
  color: var(--dimmer); background: transparent;
  border-color: var(--line-soft); font-style: italic; font-weight: 600;
}
.carried-none .ico { color: var(--dimmer); }
.player-voided { animation: shake 0.5s ease; }
.voided-stamp {
  position: absolute; right: 8px; bottom: 34px;
  font-family: var(--font-display);
  color: var(--danger); border: 2.5px solid var(--danger);
  padding: 1px 9px; border-radius: 5px;
  transform: rotate(-9deg); font-size: 1.05rem; letter-spacing: 0.08em;
  background: rgba(11, 15, 28, 0.9);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  animation: stamp-slam 0.28s cubic-bezier(0.2, 1.8, 0.4, 1);
}
@keyframes shake { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
@keyframes stamp-slam { from { transform: rotate(-9deg) scale(2.4); opacity: 0; } }

/* ---------- ticker ---------- */
.ticker-box {
  flex: 1; min-height: 130px;
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.07) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink-on-paper);
  border: 2.5px solid var(--ink); border-radius: 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.ticker { overflow-y: auto; }

/* ===== THE DAILY CAPE: a comic front page =====
   Masthead, dateline, a lead story with kicker + staff photo, then the
   CITY WIRE briefs — the historic log of everything that happened. */
.cape-front { padding: 7px 11px 10px; }
.cape-topline {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.5rem; font-weight: 900; letter-spacing: 0.16em;
  color: rgba(36, 31, 22, 0.65);
  border-bottom: 1px solid rgba(36, 31, 22, 0.45);
  padding-bottom: 3px;
}
.cape-price {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 15px;
  border: 1.2px solid rgba(36, 31, 22, 0.6);
  border-radius: 999px;
  font-size: 0.52rem;
  transform: rotate(-4deg);
}
.cape-mast {
  font-family: var(--font-display);
  text-align: center;
  font-size: 1.95rem; letter-spacing: 0.05em;
  color: var(--ink-on-paper);
  padding: 3px 0 1px;
  line-height: 1;
  text-shadow: 1.5px 1.5px 0 rgba(36, 31, 22, 0.18);
}
.cape-dateline {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.52rem; font-weight: 900; letter-spacing: 0.13em;
  color: rgba(36, 31, 22, 0.75);
  border-top: 1px solid rgba(36, 31, 22, 0.5);
  border-bottom: 3px double rgba(36, 31, 22, 0.6);
  padding: 3px 0;
  margin-bottom: 8px;
  white-space: nowrap;
}
.cape-dateline .ico { font-size: 0.5rem; flex: none; }

/* --- the lead story --- */
.cape-lead { position: relative; padding-bottom: 8px; }
.lead-topline { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.lead-kicker {
  display: inline-block;
  font-size: 0.66rem; font-weight: 900; letter-spacing: 0.14em;
  color: var(--paper);
  background: var(--ink-on-paper);
  border-radius: 3px;
  padding: 2px 8px 2.5px;
  transform: skewX(-8deg) rotate(-1deg);
  animation: kicker-stamp 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.hl-gold .lead-kicker { background: var(--marquee-deep); color: #241a00; }
.hl-bad .lead-kicker { background: var(--danger); }
.hl-hot .lead-kicker { background: var(--danger); }
.lead-round {
  font-size: 0.58rem; font-weight: 900; letter-spacing: 0.14em;
  color: rgba(36, 31, 22, 0.55);
}
@keyframes kicker-stamp {
  0% { transform: skewX(-8deg) rotate(-8deg) scale(2); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: skewX(-8deg) rotate(-1deg) scale(1); }
}
.lead-photo {
  float: right;
  width: 62px;
  margin: 2px 0 4px 8px;
  text-align: center;
}
.lead-photo .lead-rays,
.lead-photo .lead-subject { position: absolute; }
.lead-photo::before {
  content: '';
  display: block;
  padding-top: 82%;
}
.lead-photo {
  position: relative;
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.16) 1px, transparent 1.4px) 0 0 / 4px 4px,
    linear-gradient(180deg, #efe6cf, #e2d5b6);
  border: 2px solid var(--ink-on-paper);
  box-shadow: 2px 2px 0 rgba(36, 31, 22, 0.35);
  transform: rotate(2deg);
}
.lead-photo .lead-rays {
  left: 50%; top: 42%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  color: rgba(36, 31, 22, 0.18);
  animation: rays-spin 24s linear infinite;
}
.lead-photo .lead-subject {
  left: 50%; top: 42%;
  width: 22px; height: 22px;
  transform: translate(-50%, -50%);
  color: var(--ink-on-paper);
}
.lead-photo i {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 0.4rem; font-style: normal; font-weight: 900; letter-spacing: 0.14em;
  color: rgba(36, 31, 22, 0.6);
  background: rgba(251, 245, 230, 0.85);
  border-top: 1px solid rgba(36, 31, 22, 0.35);
  padding: 1px 0;
}
.lead-head {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 1.52rem; line-height: 1.02; letter-spacing: 0.03em;
  color: var(--ink-on-paper);
  animation: lead-in 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.hl-gold .lead-head { color: #7a4d00; }
.hl-bad .lead-head { color: #a01e23; }
@keyframes lead-in { from { transform: translateY(6px) scale(1.05); opacity: 0; } }
.lead-byline {
  clear: none;
  font-size: 0.55rem; font-weight: 900; letter-spacing: 0.12em;
  color: rgba(36, 31, 22, 0.55);
}

/* --- the city wire: everything that came before --- */
.cape-section {
  display: flex; align-items: center; gap: 8px;
  clear: both;
  font-size: 0.55rem; font-weight: 900; letter-spacing: 0.22em;
  color: rgba(36, 31, 22, 0.6);
  margin: 4px 0 5px;
}
.cape-section::before, .cape-section::after {
  content: '';
  flex: 1;
  border-top: 1px solid rgba(36, 31, 22, 0.45);
}
.cape-section span { flex: none; }
.brief {
  margin: 0;
  font-weight: 700; font-size: 0.79rem; line-height: 1.42;
  color: rgba(36, 31, 22, 0.88);
  padding: 5px 0;
  border-bottom: 1px dotted rgba(36, 31, 22, 0.35);
  break-inside: avoid;
}
.brief:last-child { border-bottom: 0; }
.brief-stamp {
  display: inline-block;
  font-size: 0.58rem; font-weight: 900; letter-spacing: 0.08em;
  border: 1.2px solid rgba(36, 31, 22, 0.55);
  border-radius: 3px;
  padding: 0 3px;
  margin-right: 6px;
  vertical-align: 1px;
  opacity: 0.75;
  transform: rotate(-3deg);
}
.brief.hl-gold { color: #7a4d00; }
.brief.hl-gold .brief-stamp { border-color: #7a4d00; }
.brief.hl-bad { color: #a01e23; }
.brief.hl-bad .brief-stamp { border-color: #a01e23; }

.cape-foot {
  clear: both;
  margin-top: 8px;
  padding-top: 5px;
  border-top: 3px double rgba(36, 31, 22, 0.5);
  font-size: 0.5rem; font-weight: 900; letter-spacing: 0.1em;
  font-style: italic;
  color: rgba(36, 31, 22, 0.55);
  text-align: center;
}

/* the news sheet gets true newspaper columns where there's width */
.sheet-paper .cape-front { padding: 4px 16px 14px; }
.sheet-paper .cape-mast { font-size: 2.7rem; }
.sheet-paper .lead-head { font-size: 2rem; }
.sheet-paper .lead-photo { width: 88px; }
.sheet-paper .brief { font-size: 0.85rem; }
.sheet-paper .lead-kicker { font-size: 0.74rem; }
@media (min-width: 460px) {
  .sheet-paper .cape-briefs {
    columns: 2;
    column-gap: 16px;
    column-rule: 1px dotted rgba(36, 31, 22, 0.4);
  }
}

/* ---------- board viewport & environment ---------- */
.board-viewport {
  position: relative; flex: 1; overflow: hidden;
  cursor: grab; touch-action: none;
  z-index: 2;
}
.board-viewport.grabbing { cursor: grabbing; }
.board-viewport::after {
  /* vignette keeps focus at center */
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(4, 6, 12, 0.55) 100%);
}
.board-backdrop {
  /* generated city backdrop image (assets/manifest.js) — the very back layer */
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center bottom;
  pointer-events: none;
}
.skyline {
  position: absolute; inset: auto 0 0 0; height: 150px;
  pointer-events: none; z-index: 0; /* scenery stays behind the table */
  opacity: 0.9;
}
.skyline svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }
.skyline::before, .skyline::after {
  /* civic searchlights sweeping the night sky */
  content: '';
  position: absolute; bottom: 8px;
  width: 90px; height: 520px;
  background: linear-gradient(to top, rgba(255, 232, 170, 0.13), transparent 78%);
  clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0);
  transform-origin: 50% 100%;
}
.skyline::before { left: 16%; animation: beam-sweep 11s ease-in-out infinite alternate; }
.skyline::after { right: 20%; animation: beam-sweep 13s ease-in-out infinite alternate-reverse; }
@keyframes beam-sweep { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }
.skyline-far { fill: #10162c; height: 88% !important; opacity: 0.85; }
.skyline-near { fill: #0a0e1d; }
.world {
  position: absolute; transform-origin: 0 0;
  z-index: 2; /* the table itself always covers the scenery layers */
  /* city blocks pan WITH the board — the table feels physical */
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 197, 61, 0.05), transparent 34%),
    repeating-linear-gradient(0deg, transparent 0 101px, rgba(143, 163, 232, 0.05) 101px 102.5px),
    repeating-linear-gradient(90deg, transparent 0 101px, rgba(143, 163, 232, 0.05) 101px 102.5px);
}
.streets { position: absolute; inset: 0; }
.street {
  stroke: #39456f; stroke-width: 3.5; stroke-dasharray: 2 11;
  stroke-linecap: round;
}
.street-dead { stroke: #1d2440; }
.street-hot {
  stroke: var(--marquee); stroke-width: 4;
  animation: street-flow 0.9s linear infinite;
  filter: drop-shadow(0 0 4px rgba(255, 197, 61, 0.6));
}
@keyframes street-flow { to { stroke-dashoffset: -13; } }
.street-new {
  /* a fresh dispatch's street: the dotted line crawls out just before the
     card slams in (--dd set per card by the reveal cascade) */
  opacity: 0;
  animation: street-in 0.55s ease-out both;
  animation-delay: var(--dd, 400ms);
}
@keyframes street-in {
  0% { opacity: 0; stroke-dashoffset: 52; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
.cards-layer, .pawns-layer { position: absolute; inset: 0; }
.pawns-layer { pointer-events: none; }

/* ---------- town hall: the civic plaza tile ---------- */
.town-hall {
  position: absolute; transform: translate(-50%, -50%);
  width: 224px; height: 196px;
}
.th-tile {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 16px;
  border: 3px solid var(--ink);
  overflow: visible;
  background: var(--ink);
  box-shadow:
    inset 0 0 0 4px var(--marquee),
    inset 0 0 0 5.5px rgba(4, 6, 12, 0.85),
    0 0 34px rgba(255, 197, 61, 0.28),
    5px 7px 0 rgba(4, 6, 12, 0.55);
}
.th-scene {
  display: block;
  width: calc(100% - 11px); height: calc(100% - 11px);
  margin: 5.5px;
  border-radius: 11px;
}
.th-rays {
  position: absolute; inset: -44px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 197, 61, 0.09) 0deg 7deg, transparent 7deg 24deg);
  mask-image: radial-gradient(circle, transparent 42%, #000 56%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle, transparent 42%, #000 56%, transparent 74%);
  animation: rays-spin 30s linear infinite;
  pointer-events: none;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }

/* theatrical marquee, bulbs blinking in alternation */
.th-marquee {
  position: absolute; left: 50%; bottom: -16px;
  transform: translateX(-50%) rotate(-1.2deg);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: linear-gradient(180deg, #ffd76b, var(--marquee) 60%, var(--marquee-deep));
  border: 3px solid var(--ink);
  border-radius: 10px;
  padding: 7px 22px 8px;
  box-shadow: 3px 4px 0 rgba(4, 6, 12, 0.55);
  white-space: nowrap;
}
.th-marquee b {
  font-family: var(--font-display);
  font-size: 1.32rem; letter-spacing: 0.09em; line-height: 1;
  color: #241a00;
  text-shadow: 1.5px 1.5px 0 rgba(255, 255, 255, 0.35);
}
.th-sub {
  font-size: 0.55rem; font-weight: 900; letter-spacing: 0.26em;
  color: rgba(36, 26, 0, 0.75);
}
.th-bulbs, .th-bulbs::after {
  content: '';
  position: absolute; inset: 2.5px;
  border-radius: 7px;
  padding: 3.5px;
  background: radial-gradient(circle, #fff9e6 1.5px, transparent 2.1px) 1px 1px / 11px 11px;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: bulb-blink 1.1s steps(1) infinite;
  pointer-events: none;
}
.th-bulbs::after {
  inset: 0;
  background-position: 6.5px 6.5px;
  animation-delay: 0.55s;
}
@keyframes bulb-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }

.th-beam { transform-origin: 50% 100%; animation: th-sway 9s ease-in-out infinite alternate; }
.th-beam--alt { animation: th-sway-r 11s ease-in-out infinite alternate; }
@keyframes th-sway { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
@keyframes th-sway-r { from { transform: rotate(5deg); } to { transform: rotate(-6deg); } }
.th-flag { transform-origin: 111px 12px; animation: flag-wave 3.4s ease-in-out infinite alternate; }
@keyframes flag-wave { from { transform: skewY(-3deg); } to { transform: skewY(4deg); } }
.th-door { animation: door-glow 2.6s ease-in-out infinite; }
@keyframes door-glow { 50% { opacity: 0.72; } }

.th-waiting .th-tile { animation: th-beacon 1.6s ease-in-out infinite; }
@keyframes th-beacon {
  50% {
    box-shadow:
      inset 0 0 0 4px var(--marquee),
      inset 0 0 0 5.5px rgba(4, 6, 12, 0.85),
      0 0 56px rgba(255, 197, 61, 0.55),
      5px 7px 0 rgba(4, 6, 12, 0.55);
  }
}
.town-hall.legal::after { border-radius: 22px; inset: -8px; }

/* ---------- pawns: the player's avatar token ---------- */
/* The hero plate: a rhombus token cut from the same cloth as the event
   cards. (left, top) is the ground point under the pedestal bar; the plate
   rises above it, the nameplate hangs below. Every effect speaks square. */
.pawn {
  --skew: -6deg;
  position: absolute;
  width: 62px;
  margin: -80px 0 0 -31px;
  transition: left 0.45s cubic-bezier(0.3, 1.1, 0.4, 1), top 0.45s cubic-bezier(0.3, 1.1, 0.4, 1);
  z-index: 5;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pawn-inner {
  position: relative;
  width: 62px; height: 84px;
  transform: scale(var(--famescale, 1));
  transform-origin: 50% 92%;
}
.pawn-active { z-index: 6; }
.pawn-active .pawn-inner { animation: tok-bounce 1.5s ease-in-out infinite; }
@keyframes tok-bounce { 50% { transform: scale(var(--famescale, 1)) translateY(-4px); } }

/* squash-stretch hop on real travel (paired with the motion trail) */
.pawn-hop .pawn-inner { animation: tok-hop 0.5s cubic-bezier(0.3, 1.2, 0.5, 1); }
@keyframes tok-hop {
  0% { transform: scale(var(--famescale, 1)) scaleY(0.82) scaleX(1.12); }
  45% { transform: scale(var(--famescale, 1)) translateY(-11px) scaleY(1.1) scaleX(0.94); }
  75% { transform: scale(var(--famescale, 1)) scaleY(0.92) scaleX(1.06); }
  100% { transform: scale(var(--famescale, 1)); }
}

.tok { position: absolute; inset: 0; }

/* --- the frame: skewed plate, ink border, hard black knockout slab --- */
.tok-frame {
  position: absolute; left: 4px; top: 2px;
  width: 54px; height: 70px;
  transform: skewX(var(--skew));
  border: 2.5px solid var(--ink);
  border-radius: 7px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--pc), 5px 6px 0 var(--ink);
  z-index: 1;
}
.fame-0 .tok-frame { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 45%, #232c4d), 5px 6px 0 var(--ink); }
.fame-1 .tok-frame {
  box-shadow: 0 0 0 2px var(--pc), 5px 6px 0 var(--ink),
    0 0 14px color-mix(in srgb, var(--pc) 65%, transparent);
}
.fame-3 .tok-frame, .fame-4 .tok-frame {
  outline: 2px solid rgba(255, 197, 61, 0.55);
  outline-offset: 3px;
}
.fame-4 .tok-frame {
  box-shadow: 0 0 0 2px #ffd76b, 5px 6px 0 var(--ink), 0 0 18px rgba(255, 197, 61, 0.55);
}
.tok-portrait { display: block; position: absolute; inset: 0; overflow: hidden; }
/* crop below the shoulders: the bust fills the plate and the portrait's own
   emblem disc stays out of frame (the corner chip already carries it) */
.tok-portrait .portrait-art { display: block; width: 100%; height: 128%; }
.tok-portrait .asset-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* marching ants: the gold press-cut border, fame 2+ */
.frame-ants {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.frame-ants rect {
  fill: none;
  stroke: #ffd76b; stroke-width: 2;
  stroke-dasharray: 7 5;
  filter: drop-shadow(0 0 2px rgba(255, 197, 61, 0.7));
  animation: ants 5s linear infinite;
}
@keyframes ants { to { stroke-dashoffset: -48; } }

/* hero emblem chip, riveted to the plate corner */
.tok-emblem {
  position: absolute; left: 3px; bottom: 3px;
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: var(--pc);
  color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  font-size: 0.58rem;
  box-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.6);
}

/* carrying glint sweeps the plate */
.tok-shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.38) 48%, transparent 62%) -80% 0 / 250% 100% no-repeat;
  pointer-events: none;
}
.pawn-carrying .tok-shine { animation: tok-glint 2.2s ease-in-out infinite; }
@keyframes tok-glint { 45%, 100% { background-position: 180% 0; } }

/* --- pedestal bar: fame gems socketed in a skewed base slab --- */
.tok-base {
  position: absolute; left: 9px; bottom: 0;
  width: 44px; height: 9px;
  transform: skewX(var(--skew));
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 55%, var(--ink)), var(--ink));
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 3px 3px 0 rgba(4, 6, 12, 0.65);
}
.tok-base i {
  width: 4.5px; height: 4.5px;
  border-radius: 1.5px;
  background: #131a33;
  box-shadow: inset 0 1px 1px rgba(4, 6, 12, 0.8);
}
.tok-base i.gem-lit {
  background: #ffd76b;
  box-shadow: 0 0 5px rgba(255, 197, 61, 0.9);
  animation: gem-twinkle 2.8s ease-in-out infinite;
}
.tok-base i.gem-lit:nth-child(2) { animation-delay: 0.7s; }
.tok-base i.gem-lit:nth-child(3) { animation-delay: 1.4s; }
.tok-base i.gem-lit:nth-child(4) { animation-delay: 2.1s; }
@keyframes gem-twinkle { 50% { opacity: 0.5; } }

/* --- fame FX layer, behind the plate: all square --- */
.tok-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* fame 3+: diamond sparks at the plate corners */
.fx-corners i {
  position: absolute;
  width: 7px; height: 7px;
  background: #ffd76b;
  border: 1.5px solid var(--ink);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 4px rgba(255, 197, 61, 0.9));
  animation: spark-blink 2.4s ease-in-out infinite;
}
.fx-corners i:nth-child(1) { top: -4px; left: 2px; }
.fx-corners i:nth-child(2) { top: -4px; right: 4px; animation-delay: 0.6s; }
.fx-corners i:nth-child(3) { bottom: 12px; left: -4px; animation-delay: 1.2s; }
.fx-corners i:nth-child(4) { bottom: 12px; right: 0; animation-delay: 1.8s; }
@keyframes spark-blink {
  0%, 100% { transform: rotate(45deg) scale(0.7); opacity: 0.4; }
  50% { transform: rotate(45deg) scale(1.15); opacity: 1; }
}

/* fame 4: counter-spinning ray diamonds — a square starburst */
.fx-diamonds, .fx-diamonds::after {
  position: absolute;
  background: repeating-conic-gradient(from 0deg, rgba(255, 197, 61, 0.2) 0deg 9deg, transparent 9deg 30deg);
}
.fx-diamonds {
  left: 50%; top: 37px;
  width: 88px; height: 88px;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: diamond-spin 16s linear infinite;
  opacity: 0.9;
}
.fx-diamonds::after {
  content: '';
  inset: 12px;
  animation: diamond-spin-r 11s linear infinite;
}
@keyframes diamond-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes diamond-spin-r { to { transform: rotate(-360deg); } }

/* fame 4: the crown tab, stamped on the plate's top edge */
.tok-crown {
  position: absolute; top: -8px; left: 50%;
  margin-left: -11px;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 14px;
  transform: skewX(var(--skew)) rotate(-3deg);
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  color: #241a00;
  border: 2px solid var(--ink);
  border-radius: 3px;
  font-size: 0.56rem;
  box-shadow: 2px 2px 0 rgba(4, 6, 12, 0.6), 0 0 10px rgba(255, 197, 61, 0.7);
  animation: crown-float 2s ease-in-out infinite;
}
@keyframes crown-float { 50% { transform: skewX(var(--skew)) rotate(2deg) translateY(-2px); } }

/* your-move ring: a skewed selection frame around the active plate */
.pawn-ring {
  position: absolute; left: 50%; top: 38px;
  width: 72px; height: 88px;
  transform: translate(-50%, -50%) skewX(var(--skew));
  border: 2.5px solid var(--pc);
  border-radius: 11px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 12px color-mix(in srgb, var(--pc) 80%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--pc) 45%, transparent);
}
.pawn-active .pawn-ring { opacity: 1; animation: ring-pulse 1.5s ease-in-out infinite; }
@keyframes ring-pulse {
  50% { transform: translate(-50%, -50%) skewX(var(--skew)) scale(1.07); opacity: 0.5; }
}

/* --- carried loot: a gold satchel tag at the plate's shoulder --- */
.pawn-carry {
  position: absolute; top: -4px; right: -8px;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 5px;
  transform: skewX(var(--skew)) rotate(4deg);
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  color: #241a00;
  border: 2px solid var(--ink);
  font-size: 0.68rem;
  box-shadow: 2px 2px 0 rgba(4, 6, 12, 0.6), 0 0 10px rgba(255, 197, 61, 0.7);
  animation: carry-bob 1.8s ease-in-out infinite;
}
@keyframes carry-bob {
  50% { transform: skewX(var(--skew)) rotate(-4deg) translateY(-3px); }
}

/* --- gear-amped stats: lit square chips racked at the plate's side --- */
.pawn-amps {
  position: absolute; top: 14px; left: -12px;
  z-index: 2;
  display: flex; flex-direction: column; gap: 3px;
}
.pawn-amps i {
  display: flex; align-items: center; justify-content: center;
  width: 15px; height: 15px;
  border-radius: 4px;
  transform: skewX(var(--skew));
  background: var(--ink);
  border: 1.5px solid var(--st);
  color: var(--st);
  font-size: 0.5rem;
  box-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.6), 0 0 7px color-mix(in srgb, var(--st) 70%, transparent);
  animation: amp-surge 1.4s ease-in-out infinite;
}
.pawn-amps i:nth-child(2) { animation-delay: 0.35s; }
.pawn-amps i:nth-child(3) { animation-delay: 0.7s; }
@keyframes amp-surge {
  50% { box-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.6), 0 0 13px var(--st); transform: skewX(var(--skew)) scale(1.1); }
}

/* --- alignment skins: the good and the bad ---
   Applied via .align-hero / .align-villain on the pawn root AND on .sd-tok
   in the showdown/flip ceremonies — selectors stay ancestor-generic. */
.align-hero .tok-frame {
  box-shadow: 0 0 0 2px #ffd76b, 5px 6px 0 var(--ink), 0 0 16px rgba(255, 215, 107, 0.6);
  outline: 2px solid rgba(255, 244, 214, 0.75);
  outline-offset: 3px;
}
.align-hero .tok-portrait::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 246, 218, 0.3), rgba(126, 180, 255, 0.18));
  pointer-events: none;
}
.align-hero .frame-ants rect { stroke: #fff3c9; }
.align-hero .tok::before {
  /* a column of radiant energy rising behind the plate */
  content: '';
  position: absolute; left: 50%; top: -12px; bottom: 8px;
  width: 34px;
  transform: translateX(-50%) skewX(var(--skew, -6deg));
  background: linear-gradient(0deg, transparent 20%, rgba(255, 226, 150, 0.34) 70%, rgba(255, 246, 214, 0.55));
  filter: blur(3px);
  z-index: 0;
  pointer-events: none;
  animation: power-column 2.2s ease-in-out infinite;
}
@keyframes power-column { 50% { opacity: 0.55; transform: translateX(-50%) skewX(var(--skew, -6deg)) scaleY(1.08); } }
.align-hero .tok::after {
  /* energy motes streaming upward off the plate */
  content: '';
  position: absolute; left: 50%; top: 66px;
  width: 4px; height: 4px;
  border-radius: 1px;
  background: #ffe9ad;
  box-shadow: -16px 6px 0 -0.5px #ffd76b, 15px 2px 0 -1px #fff3c9, -7px -4px 0 -1.5px #ffd76b, 9px 9px 0 -0.5px #ffe9ad;
  z-index: 2;
  pointer-events: none;
  animation: power-motes 2s linear infinite;
}
@keyframes power-motes {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-58px) rotate(24deg); opacity: 0; }
}

.align-villain .tok-frame {
  background: #08040f;
  box-shadow: 0 0 0 2px #e5484d, 5px 6px 0 #05070f, 0 0 16px rgba(168, 85, 247, 0.6);
  outline: 2px solid rgba(168, 85, 247, 0.5);
  outline-offset: 3px;
}
.align-villain .tok-portrait::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46, 8, 46, 0.5), rgba(12, 2, 20, 0.4));
  pointer-events: none;
}
.align-villain .frame-ants rect { stroke: #c084fc; }
.align-villain .tok::before {
  /* a jagged menace aura tearing out from behind the plate */
  content: '';
  position: absolute; left: 50%; top: 34px;
  width: 82px; height: 96px;
  transform: translate(-50%, -50%) skewX(var(--skew, -6deg));
  background: radial-gradient(closest-side, rgba(168, 85, 247, 0.5), rgba(76, 29, 149, 0.22) 60%, transparent);
  clip-path: polygon(50% 0, 60% 16%, 78% 6%, 76% 24%, 100% 22%, 86% 40%, 100% 52%, 82% 58%, 92% 78%, 72% 72%, 72% 94%, 56% 82%, 48% 100%, 40% 82%, 22% 94%, 26% 72%, 4% 78%, 16% 56%, 0 48%, 16% 38%, 2% 20%, 24% 24%, 22% 6%, 40% 14%);
  z-index: 0;
  pointer-events: none;
  animation: menace-aura 1.7s ease-in-out infinite;
}
@keyframes menace-aura {
  50% { transform: translate(-50%, -50%) skewX(var(--skew, -6deg)) scale(1.09) rotate(2deg); opacity: 0.75; }
}
.align-villain .tok::after {
  /* crimson arc-lightning flickering off the frame's shoulder */
  content: '';
  position: absolute; top: -7px; right: 6px;
  width: 15px; height: 17px;
  background: #ff5c61;
  clip-path: polygon(64% 0, 30% 44%, 56% 44%, 12% 100%, 44% 52%, 20% 52%);
  filter: drop-shadow(0 0 4px rgba(229, 72, 77, 0.9));
  z-index: 2;
  pointer-events: none;
  animation: arc-flicker 1.3s steps(2) infinite;
}
@keyframes arc-flicker {
  0%, 40% { opacity: 1; transform: none; }
  50%, 70% { opacity: 0; }
  80% { opacity: 1; transform: scaleX(-1) translateX(3px); }
}
.align-villain .pawn-ring { border-color: #a855f7; }

/* --- nameplate: the "this is me" tag under the pedestal --- */
.pawn-plate {
  position: absolute; top: calc(87px + var(--plate-y, 0px)); left: 50%;
  transform: translateX(-50%) skewX(var(--skew));
  z-index: 2;
  display: flex; align-items: center; gap: 4px;
  max-width: 112px;
  background: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--pc) 75%, #000);
  border-radius: 4px;
  padding: 1.5px 8px 2px;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(4, 6, 12, 0.55);
}
.pawn-plate > b, .pawn-plate > em { transform: skewX(calc(-1 * var(--skew))); }
.pawn-plate b {
  font-size: 0.54rem; font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase; color: #eef1fb;
  overflow: hidden; text-overflow: ellipsis; max-width: 74px;
}
.pawn-plate em {
  font-style: normal; display: inline-flex; align-items: center; gap: 1px;
  font-size: 0.56rem; font-weight: 900; color: var(--marquee);
}
.pawn-plate em .ico { font-size: 0.5rem; }
.plate-meter {
  position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.plate-meter span { display: block; height: 100%; background: var(--marquee); border-radius: 2px; }
.pawn-active .pawn-plate {
  border-color: var(--pc);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 60%, transparent);
}

/* --- motion trail: swoosh + afterimages --- */
.pawn-trail {
  position: absolute;
  height: 5px; margin-top: -2.5px;
  transform-origin: 0 50%;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent 5%, color-mix(in srgb, var(--pc) 80%, #fff));
  pointer-events: none;
  z-index: 4;
  animation: trail-sweep 0.5s ease-out forwards;
}
@keyframes trail-sweep {
  0% { transform: rotate(var(--ang)) scaleX(0); opacity: 0.9; }
  55% { transform: rotate(var(--ang)) scaleX(1); opacity: 0.75; }
  100% { transform: rotate(var(--ang)) scaleX(1); opacity: 0; }
}
.pawn-ghost {
  position: absolute;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pc) 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--pc) 60%, transparent);
  filter: blur(1px);
  pointer-events: none;
  z-index: 4;
  animation: ghost-chase 0.45s ease-out both;
}
@keyframes ghost-chase {
  0% { transform: translate(0, 0) scale(0.85); opacity: 0.5; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.4); opacity: 0; }
}

/* --- hover / tap mini-HUD --- */
.pawn-tip {
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 158px;
  background: linear-gradient(180deg, #1b2447, var(--night));
  border: 2.5px solid var(--ink);
  outline: 1.5px solid var(--pc);
  border-radius: 11px;
  padding: 8px 10px 9px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 30;
  box-shadow: 0 10px 26px rgba(4, 6, 12, 0.6);
}
.pawn-tip::after {
  content: '';
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--ink);
}
.pawn:hover .pawn-tip, .pawn.tip-open .pawn-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tip-name { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.tip-name b { font-family: var(--font-display); font-size: 0.98rem; letter-spacing: 0.05em; color: #fff; }
.tip-name span { font-size: 0.54rem; font-weight: 900; letter-spacing: 0.16em; color: color-mix(in srgb, var(--pc) 62%, #fff); text-transform: uppercase; }
.tip-name em {
  margin-left: auto; font-style: normal;
  display: inline-flex; align-items: center; gap: 2px;
  font-weight: 900; font-size: 0.8rem; color: var(--marquee);
}
.tip-rank {
  display: flex; align-items: center; gap: 7px;
  margin-top: 6px;
}
.rank-label {
  font-size: 0.52rem; font-weight: 900; letter-spacing: 0.14em;
  color: var(--marquee);
  background: rgba(255, 197, 61, 0.12);
  border: 1px solid rgba(255, 197, 61, 0.45);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.rank-meter {
  flex: 1; height: 5px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.rank-meter span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--pc), var(--marquee));
  border-radius: 4px;
}
.rank-goal { font-size: 0.58rem; font-weight: 900; color: var(--dim); white-space: nowrap; }
.tip-stats { display: flex; gap: 9px; margin-top: 7px; }
.tip-stats .statchip.chip-amped b { color: #7ef0a2; }
.tip-stats .statchip u {
  text-decoration: none; font-size: 0.56rem; font-weight: 900; color: #7ef0a2;
  margin-left: 1px;
}
.tip-carry {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed rgba(255, 197, 61, 0.4);
  font-size: 0.68rem; font-weight: 700; color: #ffe4a1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 190px;
}

/* ---------- ambient scene light ---------- */
.ambient {
  position: absolute; inset: 0;
  background-color: transparent;
  opacity: 0.16;
  mix-blend-mode: screen;
  mask-image: radial-gradient(85% 70% at 50% 100%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(85% 70% at 50% 100%, #000, transparent 72%);
  transition: background-color 0.9s ease;
  pointer-events: none;
  z-index: 0;
}

/* ---------- dock: the stage ---------- */
.dock {
  flex: none;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 22px;
  /* keep the action buttons clear of the home indicator */
  padding: 14px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #1b2447, var(--night) 60%, #10162c);
  border-top: 3px solid var(--ink);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--pc, transparent) 80%, transparent), 0 -6px 22px rgba(0, 0, 0, 0.45);
  min-height: 146px;
  position: relative;
  z-index: 10;
}
.dock::before {
  /* crime-scene tape strung across the top of the dispatch desk */
  content: '';
  position: absolute; top: -7px; left: -6px; right: -6px; height: 13px;
  background: repeating-linear-gradient(-55deg, var(--marquee) 0 13px, var(--ink) 13px 26px);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-0.4deg);
  box-shadow: 0 3px 8px rgba(4, 6, 12, 0.5);
  pointer-events: none;
  z-index: 2;
}
.dock::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  mix-blend-mode: overlay;
  opacity: 0.22;
  pointer-events: none;
}
.dock > * { position: relative; z-index: 1; }
.dock > .stage-wrap { grid-column: 1; z-index: 3; } /* the field photo clips OVER the caution tape */
.dock > .dock-scene { grid-column: 2; }
.dock > .dock-actions { grid-column: 3; }
.dock-tab, .dockstage { display: none; } /* small screens only */
.stage-art {
  position: relative;
  flex: none;
  width: 258px; height: 126px;
  border: 3px solid var(--ink);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--sc, var(--line)), 5px 6px 0 rgba(4, 6, 12, 0.55);
  transform: rotate(-2deg);
  margin: -26px 0 -2px 2px; /* the field photo pokes up over the board */
  background: var(--ink);
  z-index: 3;
}
.stage-art::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
.stage-kicker {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 4px 9px 5px;
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.22em;
  color: var(--paper);
  background: linear-gradient(180deg, rgba(4, 6, 12, 0.85), rgba(4, 6, 12, 0));
  text-shadow: 0 1px 2px rgba(4, 6, 12, 0.8);
}
.stage-onscene {
  position: absolute; right: 5px; bottom: 5px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.52rem; font-weight: 900; letter-spacing: 0.14em;
  color: #fff;
  background: var(--pc, var(--night-2));
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2.5px 8px 2.5px 6px;
  box-shadow: 1.5px 2px 0 rgba(4, 6, 12, 0.55);
  text-shadow: 0 1px 1px rgba(4, 6, 12, 0.5);
}
.stage-onscene .ico { font-size: 0.72rem; }
.stage-cut { animation: stage-cut 0.42s cubic-bezier(0.25, 1, 0.4, 1); }
@keyframes stage-cut {
  0% { transform: rotate(-0.7deg) translateY(14px); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: rotate(-0.7deg) translateY(0); }
}
.dock-scene { flex: 1; min-width: 0; }
.dock-title {
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content; max-width: 100%;
  font-weight: 900; font-size: 1rem;
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.07) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, #fbf5e6, var(--paper));
  color: var(--ink-on-paper);
  border: 2.5px solid var(--ink);
  border-radius: 3px;
  padding: 3px 13px 4px;
  transform: rotate(-0.7deg);
  box-shadow: 2.5px 3px 0 rgba(4, 6, 12, 0.5);
  margin-bottom: 5px;
}
.dock-title-plain { color: var(--ink-on-paper); }
.dock-title .dock-star { color: #8a5b00; }
.dock-place-ico { font-size: 1.2em; }
.dock-star { display: inline-flex; align-items: center; gap: 2px; color: var(--marquee); }
.dock-star .ico { font-size: 0.85em; }
.dock-flavor { color: var(--dim); font-size: 0.85rem; font-style: italic; margin: 2px 0 7px; }
.dock-reqs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dock-req {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.74rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 3px 10px; border-radius: 999px; border: 2px solid;
  background: rgba(4, 6, 12, 0.4);
}
.req-ok { color: var(--ok); border-color: var(--ok); }
.req-no { color: #ff8589; border-color: var(--danger); }
.dock-verdict { font-size: 0.78rem; font-weight: 800; color: var(--dim); margin-top: 7px; }
.dock-verdict.ok { color: var(--ok); }
.dock-verdict.no { color: #ff8589; }
/* action rail — the big contextual slab leads, support row rides beneath */
.dock-actions {
  display: flex; flex-direction: column; gap: 9px;
  flex: none; align-self: center;
  width: min(390px, 34vw);
}
.dock-subactions { display: flex; gap: 9px; align-items: stretch; }
.dock-subactions .btn { flex: 1; min-width: 0; justify-content: center; }
.dock-subactions .btn-gearbag { flex: none; }
.dock-actions .btn {
  white-space: nowrap;
  border-radius: 8px;
  border-width: 3px;
  min-height: 44px;
  transform: skewX(-8deg);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -5px 0 rgba(4, 6, 12, 0.22), 4px 4px 0 rgba(4, 6, 12, 0.6);
}
.dock-actions .btn > * { transform: skewX(8deg); }
.dock-actions .btn:hover:not(:disabled) { transform: skewX(-8deg) translateY(-2px); }
.dock-actions .btn:active:not(:disabled) { transform: skewX(-8deg) translateY(2px) scale(0.98); }
.dock-actions .btn .ico { font-size: 1.2em; }
.dock-actions .act-primary {
  width: 100%;
  min-height: 54px;
  justify-content: center;
  font-size: 0.92rem;
}
.dock-actions .act-primary:not(:disabled) { animation: slab-ready 1.6s ease-in-out infinite; }
@keyframes slab-ready { 50% { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -5px 0 rgba(4, 6, 12, 0.22), 4px 4px 0 rgba(4, 6, 12, 0.6), 0 0 14px rgba(229, 72, 77, 0.55); } }
.btn-gearbag { border-radius: 8px; padding: 10px 16px; }
.btn-cost {
  display: inline-flex; align-items: center; gap: 1px;
  font-size: 0.62rem; font-weight: 900;
  background: rgba(4, 6, 12, 0.28);
  border-radius: 999px;
  padding: 2px 7px 2px 5px;
  margin-left: 2px;
}
.btn-cost .ico { font-size: 0.9em; }

/* The mobile SCENE STAGE — a full-bleed cinematic banner above the buttons.
   Scene art edge to edge, title on the left, the checks filling the right,
   verdict riding the bottom edge. Fold-away tab on the caution tape. */
.dock-tab {
  position: absolute;
  top: -19px; right: 14px;
  z-index: 4;
  place-items: center; /* display comes from the small-screen blocks */
  width: 46px; height: 21px;
  padding: 0;
  background: linear-gradient(180deg, #1b2447, var(--night));
  border: 2px solid var(--ink);
  border-bottom: none;
  border-radius: 9px 9px 0 0;
  color: var(--dim);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dock-tab .ico { width: 12px; height: 12px; transform: rotate(90deg); transition: transform 0.25s ease; }
.dock-collapsed .dock-tab .ico { transform: rotate(-90deg); }

.dockstage {
  position: relative;
  height: 92px;
  overflow: hidden;
  /* full-bleed window: no card chrome — the dock's edges are its frame,
     the caution tape strings across the glass */
  border-bottom: 2.5px solid var(--ink);
}
.ds-art { position: absolute; inset: 0; z-index: 0; }
.ds-art svg, .ds-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* the window is alive: same slow drift as the lineup spotlight */
  animation: ken-burns 18s ease-in-out infinite alternate;
}
.ds-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(7, 10, 20, 0.9) 0%, rgba(7, 10, 20, 0.72) 44%, rgba(7, 10, 20, 0.16) 100%),
    linear-gradient(0deg, rgba(7, 10, 20, 0.85) 0%, transparent 52%),
    linear-gradient(90deg, color-mix(in srgb, var(--sc, #5a668f) 30%, transparent), transparent 55%);
}
.ds-main {
  position: absolute; top: 6px; left: 12px; right: 118px; bottom: 24px;
  z-index: 2;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: none; border: 0; padding: 0;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}
.ds-kicker {
  font-size: 0.5rem; font-weight: 900; letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--sc, #8fa3e8) 65%, #fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 1px 1px 0 rgba(4, 6, 12, 0.8);
}
.ds-title {
  font-family: var(--font-display);
  font-size: 1.18rem; letter-spacing: 0.04em; line-height: 1.05;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(4, 6, 12, 0.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-title .dock-star { margin-left: 4px; }
/* the checks own the right side — no dead space */
.ds-checks {
  position: absolute; top: 8px; right: 10px; bottom: 26px;
  z-index: 2;
  display: flex; align-items: center; gap: 5px;
}
.ds-seg {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 34px; height: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--st) 36%, #10162c), color-mix(in srgb, var(--st) 14%, #0a0e1d));
  border: 2px solid var(--ink);
  border-radius: 8px;
  color: var(--st);
  transform: skewX(-6deg);
}
.ds-seg > * { transform: skewX(6deg); }
.ds-seg .ico { width: 11px; height: 11px; }
.ds-seg b {
  font-family: var(--font-display);
  font-size: 1.1rem; line-height: 1;
  color: #fff;
  text-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.7);
}
.ds-no { filter: saturate(0.35) brightness(0.75); }
.ds-no b { color: var(--danger); }
.ds-ok { box-shadow: 0 0 10px color-mix(in srgb, var(--st) 40%, transparent); }
.ds-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display);
  font-size: 0.86rem; letter-spacing: 0.08em;
  color: #fff;
  background: rgba(7, 10, 20, 0.72);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 5px 10px;
  transform: skewX(-6deg);
  text-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.7);
}
.ds-chip > * { transform: skewX(6deg); }
.ds-chip .ico { width: 12px; height: 12px; }
.ds-chip--gold { color: var(--marquee); }
.ds-chip--dim { color: var(--dim); }
.ds-chip--hero { color: var(--marquee); background: rgba(60, 44, 6, 0.8); }
.ds-chip--villain { color: #e9d5ff; background: rgba(46, 16, 84, 0.82); }
/* the verdict ribbon along the bottom edge */
.ds-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 3px 12px 4px;
  background: rgba(7, 10, 20, 0.82);
  border-top: 1.5px solid rgba(42, 51, 88, 0.8);
}
.ds-info .dock-verdict {
  margin-top: 0;
  font-size: 0.7rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dock-collapsed .dockstage { display: none !important; }

/* ---------- mobile strip: the roster rail ---------- */
.mobile-strip {
  display: none;
  padding: 0;
  background: rgba(7, 10, 20, 0.78);
  border-bottom: 2px solid var(--ink);
  z-index: 11;
}
.players-strip {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* clipped chips fade out instead of cutting hard at the edge */
  mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent);
}
.players-strip::-webkit-scrollbar { display: none; }
/* ================= THE LINEUP =================
   The small-screen top band, done like a fighter select: full-height
   edge-to-edge portrait panels, diagonal ink seams, the acting player
   holding the majority of the band in their own glow. The spotlight
   SLIDES across on the turn handoff (flex-grow transition). */
.lineup {
  height: 82px;
  align-items: stretch; /* panels are absolute-composited; they must fill */
  padding: 0;
  gap: 0;
  background: var(--ink);
  mask-image: none;
  -webkit-mask-image: none;
  overflow: hidden;
}
.lu-panel {
  position: relative;
  display: block;
  height: 100%;
  flex: 1 1 0;
  min-width: 54px;
  overflow: hidden;
  /* diagonal seam: every panel is the same parallelogram; negative margin
     tucks it behind its neighbor leaving a slim ink seam */
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  margin-left: -13px;
  transition: flex-grow 0.5s cubic-bezier(0.3, 1, 0.3, 1);
}
.lu-panel:first-child { margin-left: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.lu-panel:last-child { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); }
.lu-panel:first-child:last-child { clip-path: none; }
.lu-active { flex-grow: 3.4; min-width: 235px; }
.lineup-2 .lu-active { flex-grow: 1.9; }
.lineup-3 .lu-active { flex-grow: 2.6; }

/* the portrait IS the panel. z-index 0 forms a stacking context so the
   photo's own asset-layer z-index stays INSIDE it, under shade and text. */
.lu-art { position: absolute; inset: 0; z-index: 0; }
.lu-shade, .lu-glow { z-index: 1; }
.lu-body, .lu-busytag, .lu-signal { z-index: 2; }
.lu-art .portrait-photo, .lu-art .portrait-art { width: 100%; height: 100%; }
.lu-art .asset-layer { object-position: 50% 18%; }
.lu-panel:not(.lu-active) .lu-art { filter: saturate(0.55) brightness(0.72); }
/* legibility wash: player color breathes in from the left, ink from below */
.lu-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 10, 20, 0.18) 0%, transparent 34%, rgba(7, 10, 20, 0.88) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--pc) 42%, transparent) 0%, transparent 46%);
}
.lu-active .lu-shade {
  background:
    linear-gradient(90deg, rgba(7, 10, 20, 0.9) 0%, rgba(7, 10, 20, 0.62) 34%, rgba(7, 10, 20, 0.05) 78%),
    linear-gradient(0deg, color-mix(in srgb, var(--pc) 30%, transparent) 0%, transparent 55%);
}
/* the spotlight: breathing rim light in the player's color */
.lu-glow {
  position: absolute; inset: 0;
  box-shadow:
    inset 0 3px 0 var(--pc),
    inset 0 0 0 2px color-mix(in srgb, var(--pc) 75%, transparent),
    inset 0 0 30px color-mix(in srgb, var(--pc) 38%, transparent);
  animation: lu-breathe 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lu-breathe { 50% { box-shadow:
  inset 0 3px 0 var(--pc),
  inset 0 0 0 2px color-mix(in srgb, var(--pc) 45%, transparent),
  inset 0 0 14px color-mix(in srgb, var(--pc) 20%, transparent); } }

/* --- panel content --- */
.lu-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 4px 14px 6px 26px;
  min-width: 0;
}
.lu-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lu-name b {
  font-family: var(--font-display);
  font-size: 1.35rem; letter-spacing: 0.05em; line-height: 1;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(4, 6, 12, 0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lu-pips { display: flex; gap: 3px; }
.lu-pip {
  display: grid; place-items: center;
  width: 17px; height: 15px;
  border-radius: 3px;
  background: rgba(7, 10, 20, 0.72);
  border: 1.5px solid var(--line-soft);
  color: var(--dimmer);
  transform: skewX(-8deg);
}
.lu-pip .ico { width: 9px; height: 9px; transform: skewX(8deg); }
.lu-pip-on {
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 0 0 8px rgba(255, 197, 61, 0.6);
}
/* the alignment-surge bolt: earned by wearing a side's colors */
.lu-pip-surge { border-color: var(--marquee); }
.lu-pip-surge.lu-pip-on { animation: chip-glint 1.6s ease-in-out infinite; }
.lu-stats { display: flex; align-items: center; gap: 10px; }
.lu-stat {
  display: inline-flex; align-items: center; gap: 3px;
  font-style: normal;
  color: var(--st, var(--dim));
  filter: drop-shadow(1px 1px 0 rgba(4, 6, 12, 0.8));
}
.lu-stat .ico { width: 12px; height: 12px; }
.lu-stat b {
  font-family: var(--font-display);
  font-size: 1.18rem; line-height: 1;
  color: #fff;
  text-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.8);
}
.lu-stat--score { color: var(--marquee); }
.lu-stat--score b { color: var(--marquee); }
.lu-stat--bag { color: var(--dim); }
.lu-stat--carry { color: var(--marquee); animation: chip-glint 1.6s ease-in-out infinite; }
.lu-amped b { color: var(--marquee); }
@keyframes chip-glint { 50% { opacity: 0.35; } }

/* idle panels: name riding the bottom edge, score in the corner */
.lu-body--idle { justify-content: flex-end; padding: 0 10px 5px 22px; gap: 1px; }
.lu-tag b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem; letter-spacing: 0.06em; line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lu-score {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 900; font-size: 0.78rem;
  color: var(--marquee);
  text-shadow: 1px 1px 0 rgba(4, 6, 12, 0.8);
}
.lu-score .ico { width: 9px; height: 9px; }
.lu-carry { display: inline-flex; margin-left: 4px; animation: chip-glint 1.6s ease-in-out infinite; }
.lu-carry .ico { width: 10px; height: 10px; }
/* the manifested power: named on the spotlight panel, a glyph on idle ones */
.lu-power {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px;
  font-style: normal; font-size: 0.54rem; font-weight: 900; letter-spacing: 0.1em;
  color: var(--marquee);
  background: rgba(7, 10, 20, 0.72);
  border: 1.5px solid var(--marquee);
  border-radius: 3px;
  padding: 1.5px 7px;
  transform: skewX(-8deg);
  min-width: 0;
}
.lu-power b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lu-power .ico { width: 10px; height: 10px; flex: none; transform: skewX(8deg); }
.lu-pglyph { display: inline-flex; margin-left: 4px; color: var(--marquee); }
.lu-pglyph .ico { width: 10px; height: 10px; filter: drop-shadow(0 0 4px rgba(255, 197, 61, 0.6)); }
/* 4+ player tables: idle names would be truncated confetti — the painted
   faces and scores carry it (tap opens the full roster) */
.lineup-4 .lu-panel:not(.lu-active) .lu-tag,
.lineup-5 .lu-panel:not(.lu-active) .lu-tag,
.lineup-6 .lu-panel:not(.lu-active) .lu-tag { display: none; }

/* the slow drift: the acting player's art is alive */
.lu-active .lu-art .asset-layer { animation: ken-burns 16s ease-in-out infinite alternate; }
@keyframes ken-burns {
  0% { transform: scale(1.03) translate(0, 0); }
  100% { transform: scale(1.16) translate(-3.5%, 4%); }
}

/* the handoff sweep: a halftone speed-line band tears across the incoming
   spotlight once (shared by the mobile lineup and the desktop dossiers) */
.lu-sweep {
  position: absolute; top: -4%; bottom: -4%; left: 0;
  width: 58%;
  z-index: 2;
  transform: skewX(-16deg);
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.55) 1px, transparent 1.7px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 3px, transparent 3px 14px),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--pc) 75%, #fff) 52%, transparent);
  background-size: 6px 6px, 100% 100%, 100% 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: lu-sweep 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes lu-sweep {
  from { left: -70%; opacity: 1; }
  to { left: 135%; opacity: 0; }
}

/* presence riding the panels */
.lu-busytag {
  position: absolute; top: 5px; right: 16px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px 3px;
  background: linear-gradient(180deg, #fbf5e6, var(--paper));
  color: var(--ink-on-paper);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  animation: busy-bob 1.6s ease-in-out infinite;
}
.lu-busytag .ico { width: 10px; height: 10px; color: #9a7414; }
.lu-busytag .busy-dots b { font-size: 0.72rem; }
.lu-signal {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: repeating-linear-gradient(-45deg, rgba(229, 72, 77, 0.14) 0 8px, rgba(7, 10, 20, 0.72) 8px 16px);
  color: var(--danger);
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.16em;
}
.lu-signal .ico { width: 11px; height: 11px; animation: signal-blink 1s steps(2) infinite; }

/* ---------- bottom sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: 75; }
.sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(7, 10, 20, 0.64);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fade-in 0.2s ease;
}
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 78dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* clear the home indicator */
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #182040, var(--night));
  border-top: 3px solid var(--ink);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -14px 44px rgba(4, 6, 12, 0.6), inset 0 1px 0 var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  animation: sheet-up 0.32s cubic-bezier(0.25, 1.1, 0.4, 1);
}
.sheet-paper {
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.07) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, #fbf5e6, var(--paper) 40%, var(--paper-2));
  color: var(--ink-on-paper);
  box-shadow: 0 -14px 44px rgba(4, 6, 12, 0.6);
}
.sheet-handle {
  flex: none;
  width: 46px; height: 5px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.28);
  margin: 10px auto 4px;
  cursor: pointer;
}
.sheet-paper .sheet-handle { background: rgba(36, 31, 22, 0.32); }
.sheet-title {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.35rem; letter-spacing: 0.12em;
  text-align: center;
  padding: 2px 0 10px;
  cursor: pointer;
}
.sheet-body { overflow-y: auto; padding: 2px 14px 18px; }
.sheet-body.players { display: flex; flex-direction: column; gap: 15px; padding-top: 28px; }
.sheet-panel { max-width: 680px; margin: 0 auto; }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* ---------- gear drawer: the HAND ---------- */
#sheet-gear .sheet-panel {
  background: transparent;
  border: 0; box-shadow: none;
  max-width: none; max-height: 100dvh;
  border-radius: 0;
  overflow: visible;
}
#sheet-gear .sheet-title {
  color: var(--paper);
  text-shadow: 2.5px 2.5px 0 rgba(4, 6, 12, 0.7);
  padding-top: 8px;
}
.hand-body {
  overflow: visible;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  padding: 0 10px calc(18px + env(safe-area-inset-bottom));
}
.gear-notice {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #ff6a6e, var(--danger));
  color: #fff; font-weight: 800; font-size: 0.82rem;
  border: 2px solid var(--ink); border-radius: 10px;
  padding: 9px 13px;
  box-shadow: var(--shadow-pop);
  animation: nudge 1.1s ease-in-out infinite;
}
.gear-empty {
  text-align: center; padding: 30px 10px 44px;
  color: var(--dim); font-style: italic; font-size: 0.9rem;
  text-shadow: 0 1px 3px rgba(4, 6, 12, 0.8);
}
.hand-hint {
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.22em;
  color: var(--dim);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(4, 6, 12, 0.8);
}

/* --- the gear card itself: same collectible anatomy, kind-colored --- */
.gcard {
  position: relative;
  width: 152px; height: 208px;
  border-radius: 13px;
  perspective: 620px;
  filter: drop-shadow(4px 6px 0 rgba(4, 6, 12, 0.55));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gcard-inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 13px;
  border: 2.5px solid var(--ink);
  overflow: hidden;
  background: var(--ink);
  box-shadow: inset 0 0 0 4px var(--kc), inset 0 0 0 5.5px rgba(4, 6, 12, 0.85);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.16s ease;
}
.gcard-art {
  position: absolute; top: 5.5px; left: 5.5px; right: 5.5px;
  height: 44%;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.14) 1.4px, transparent 2px) 0 0 / 11px 11px,
    radial-gradient(120% 100% at 50% 30%, color-mix(in srgb, var(--kc) 80%, #fff) 0%, var(--kc) 45%, color-mix(in srgb, var(--kc) 60%, #000) 100%);
  display: flex; align-items: center; justify-content: center;
}
.gcard-rays {
  position: absolute;
  width: 84px; height: 84px;
  color: rgba(4, 6, 12, 0.3);
  animation: rays-spin 24s linear infinite;
}
.gcard-glyph {
  position: relative;
  font-size: 2.9rem; color: #fff;
  filter: drop-shadow(2.5px 3px 0 rgba(4, 6, 12, 0.45));
}
.gcard-art .asset-layer { z-index: 1; }
.gcard-art::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(180deg, transparent, rgba(240, 231, 210, 0.5) 72%, #f0e7d2);
  z-index: 2;
}
.gcard-body {
  position: absolute; left: 5.5px; right: 5.5px; bottom: 5.5px;
  top: calc(44% - 1px);
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.06) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, #f0e7d2, var(--paper) 40%, var(--paper-2));
  color: var(--ink-on-paper);
  border-radius: 0 0 8px 8px;
  padding: 7px 9px 8px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 1;
}
.gcard-name {
  font-weight: 900; font-stretch: 82%;
  font-size: 0.86rem; line-height: 1.05;
  text-transform: uppercase;
}
.gcard-effect { font-size: 0.68rem; font-weight: 800; line-height: 1.25; }
.gcard-flavor {
  margin-top: auto;
  font-size: 0.62rem; font-style: italic;
  color: rgba(36, 31, 22, 0.65);
  line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.gcard-kind {
  position: absolute; top: -8px; left: 10px; z-index: 3;
  font-size: 0.5rem; font-weight: 900; letter-spacing: 0.18em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--kc) 85%, #fff), var(--kc));
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 2.5px 8px 2px;
  transform: rotate(-2deg);
  text-shadow: 0 1px 1px rgba(4, 6, 12, 0.5);
  box-shadow: 1.5px 2px 0 rgba(4, 6, 12, 0.55);
  white-space: nowrap;
}
.gcard-ribbon {
  /* diagonal banner across the art — never covers the card text */
  position: absolute; top: 16%; left: -8%; right: -8%; z-index: 3;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.92rem; letter-spacing: 0.16em;
  color: #fff;
  background: rgba(10, 14, 29, 0.72);
  border-top: 1.5px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.35);
  padding: 2px 0 1px;
  transform: rotate(-7deg);
  text-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.6);
}
.gcard-ribbon--live {
  font-size: 0.66rem;
  background: rgba(10, 14, 29, 0.78);
  color: var(--marquee);
}
.gcard-actions {
  position: absolute; left: 50%; bottom: -16px; z-index: 5;
  transform: translateX(-50%);
  display: flex; gap: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.gcard:hover .gcard-actions, .gcard.sel .gcard-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(-4px);
}
.gcard-actions .btn { white-space: nowrap; }
.gcard-actions .btn-cost { font-size: 0.56rem; padding: 1px 5px 1px 3px; margin-left: 1px; }

/* --- fan layout: satchel cards arc up from the bottom --- */
.hand-fan {
  position: relative;
  width: 100%;
  height: 264px;
  margin-top: 4px;
}
.hand-fan .gcard {
  position: absolute;
  left: 50%; bottom: 24px;
  margin-left: -76px;
  transform: translateX(var(--tx, 0)) translateY(var(--ty, 0)) rotate(var(--rot, 0deg));
  transform-origin: 50% 120%;
  transition: transform 0.22s cubic-bezier(0.3, 1.2, 0.4, 1), filter 0.2s ease, z-index 0s;
}
.hand-fan .gcard:hover, .hand-fan .gcard.sel {
  transform: translateX(var(--tx, 0)) translateY(-46px) rotate(0deg) scale(1.12);
  z-index: 9;
  filter: drop-shadow(4px 10px 0 rgba(4, 6, 12, 0.5)) drop-shadow(0 0 18px color-mix(in srgb, var(--kc) 65%, transparent));
}
/* deal-in: cards rise from the deck as the tray opens */
.sheet:not(.hidden) .hand-fan .gcard-inner {
  animation: deal-in 0.4s cubic-bezier(0.25, 1.2, 0.4, 1) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes deal-in {
  from { transform: translateY(190px) rotate(6deg); opacity: 0; }
}

/* --- the table: worn / live / armed as mini cards --- */
.hand-table {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  min-height: 0;
}
.table-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zone-label {
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.24em;
  color: var(--dim);
  text-shadow: 0 1px 3px rgba(4, 6, 12, 0.8);
}
.zone-cards { display: flex; gap: 10px; }
.gcard--worn, .gcard--live, .gcard--armed {
  width: 104px; height: 142px;
}
.gcard--worn .gcard-glyph, .gcard--live .gcard-glyph, .gcard--armed .gcard-glyph { font-size: 2rem; }
.gcard--worn .gcard-name, .gcard--live .gcard-name, .gcard--armed .gcard-name { font-size: 0.66rem; }
.gcard--worn .gcard-effect, .gcard--live .gcard-effect, .gcard--armed .gcard-effect { font-size: 0.54rem; }
.gcard--worn .gcard-flavor, .gcard--live .gcard-flavor, .gcard--armed .gcard-flavor { display: none; }
.gcard--worn .gcard-kind, .gcard--live .gcard-kind, .gcard--armed .gcard-kind { font-size: 0.44rem; padding: 2px 6px 1.5px; }
.gcard--worn:hover, .gcard--worn.sel { filter: drop-shadow(4px 6px 0 rgba(4, 6, 12, 0.55)) drop-shadow(0 0 14px color-mix(in srgb, var(--kc) 60%, transparent)); }

@media (max-width: 700px) {
  .gcard { width: 128px; height: 178px; }
  .hand-fan { height: 226px; }
  .hand-fan .gcard { margin-left: -64px; }
  .gcard-name { font-size: 0.74rem; }
  .gcard-effect { font-size: 0.6rem; }
  .gcard--worn, .gcard--live, .gcard--armed { width: 92px; height: 128px; }
  .hand-table { gap: 12px; }
}

/* dock gear button */
.btn-gearbag { position: relative; }
.gear-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px;
  border-radius: 999px;
  background: var(--marquee); color: #241a00;
  border: 1.5px solid var(--ink);
  font-size: 0.68rem; font-weight: 900;
  padding: 0 4px;
}
.btn-alarm {
  animation: nudge 0.9s ease-in-out infinite;
  border-color: var(--danger);
  color: #ffb3b5;
}
.btn-alarm .gear-count { background: var(--danger); color: #fff; }

/* public gear on player panels */
.gear-badges {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 7px;
}
.gbadge {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--kc) 24%, var(--ink));
  border: 1.5px solid var(--kc);
  color: #fff; font-size: 0.72rem;
}
.gbadge i {
  position: absolute; right: -4px; bottom: -4px;
  font-style: normal; font-size: 0.5rem; font-weight: 900;
  background: var(--ink); color: var(--marquee);
  border: 1px solid var(--kc);
  border-radius: 99px;
  min-width: 12px; height: 12px;
  display: flex; align-items: center; justify-content: center;
}
.gear-secrets {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  font-size: 0.68rem; font-weight: 800;
  color: var(--dimmer);
}
/* boosted stats read gold */
.stat-boosted { color: var(--marquee); text-shadow: 0 0 8px rgba(255, 197, 61, 0.45); }
.req-geared { box-shadow: 0 0 8px rgba(255, 197, 61, 0.35); }

/* scout target highlight */
.scout-target { cursor: pointer; }
.scout-target::after {
  content: '';
  position: absolute; inset: -6px;
  border: 3px dashed var(--steel);
  border-radius: 14px;
  animation: scout-pulse 1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scout-pulse { 50% { box-shadow: 0 0 16px rgba(143, 163, 232, 0.7); opacity: 0.55; } }

/* ---------- the EXTRA! — redemption front page ---------- */
.extra {
  position: fixed; inset: 0; z-index: 66;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  animation: fade-in 0.12s ease;
}
.extra-rays {
  position: absolute; inset: -30%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 197, 61, 0.12) 0deg 3.5deg, transparent 3.5deg 11deg);
  mask-image: radial-gradient(circle, #000 4%, transparent 56%);
  -webkit-mask-image: radial-gradient(circle, #000 4%, transparent 56%);
  animation: rays-spin 42s linear infinite;
  pointer-events: none;
}
.extra-paper {
  position: relative;
  width: min(400px, 90vw);
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.07) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, #fbf5e6, var(--paper) 35%, var(--paper-2));
  color: var(--ink-on-paper);
  border: 3.5px solid var(--ink);
  border-radius: 8px;
  padding: 12px 18px 16px;
  transform: rotate(-1.6deg);
  box-shadow: 0 0 0 3px var(--marquee), 12px 14px 0 rgba(4, 6, 12, 0.55);
  animation: extra-slam 0.42s cubic-bezier(0.2, 1.5, 0.4, 1);
  text-align: center;
}
@keyframes extra-slam { from { transform: rotate(6deg) scale(1.7); opacity: 0; } }
.extra-out { animation: extra-gone 0.35s ease forwards; }
@keyframes extra-gone { to { opacity: 0; transform: scale(0.94) translateY(18px); } }
.extra-mast {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 1.15rem; letter-spacing: 0.12em;
  border-bottom: 2.5px solid var(--ink-on-paper);
  padding-bottom: 6px; margin-bottom: 10px;
}
.extra-mast i {
  font-style: normal;
  font-size: 0.72rem; letter-spacing: 0.2em;
  color: var(--danger);
  transform: rotate(-3deg);
}
.extra-mast i:last-child { transform: rotate(3deg); }
.extra-photo {
  position: relative;
  height: 130px;
  border: 3px solid var(--ink);
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--ink);
}
.extra-photo .scene { filter: brightness(1.1) saturate(1.05); }
.extra-hero {
  position: absolute; left: 9px; bottom: 8px;
  width: 52px; height: 62px;
  border-radius: 9px;
  transform: rotate(-4deg);
  border-width: 2.5px;
}
.extra-bounty {
  position: absolute; right: 4px; top: 4px;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(8deg);
  filter: drop-shadow(2px 2.5px 0 rgba(4, 6, 12, 0.55));
  animation: bounty-pop 0.45s 0.25s cubic-bezier(0.2, 1.8, 0.4, 1) backwards;
}
@keyframes bounty-pop { from { transform: rotate(8deg) scale(0); } }
.extra-bounty-burst { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--marquee); }
.extra-bounty b {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #241a00;
}
.extra-headline {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5.4vw, 2.2rem);
  line-height: 0.98; letter-spacing: 0.02em;
  margin-bottom: 7px;
}
.extra-sub {
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.06em;
  border-top: 1.5px solid rgba(36, 31, 22, 0.4);
  border-bottom: 1.5px solid rgba(36, 31, 22, 0.4);
  padding: 4px 0;
  margin-bottom: 8px;
}
.extra-quip {
  font-size: 0.78rem; font-style: italic;
  color: rgba(36, 31, 22, 0.75);
  line-height: 1.4;
}

/* ---------- card inspector: pick it up off the table ---------- */
.inspect { position: fixed; z-index: 64; }
.inspect--modal {
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  animation: fade-in 0.12s ease;
}
.inspect-backdrop {
  position: absolute; inset: 0;
  background: rgba(7, 10, 20, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.inspect--docked {
  top: 50%; right: 22px;
  transform: translateY(-56%);
  pointer-events: none;
  animation: inspect-dock 0.22s cubic-bezier(0.25, 1.2, 0.4, 1);
}
@keyframes inspect-dock { from { opacity: 0; transform: translateY(-56%) translateX(24px) rotate(2deg); } }
.icard {
  position: relative;
  width: min(300px, 82vw);
  filter: drop-shadow(7px 10px 0 rgba(4, 6, 12, 0.55));
}
.inspect--modal .icard { animation: icard-lift 0.32s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes icard-lift { from { transform: translateY(60px) scale(0.7) rotate(3deg); opacity: 0; } }
.icard-inner {
  position: relative;
  border-radius: 18px;
  border: 3px solid var(--ink);
  overflow: hidden;
  background: var(--ink);
  box-shadow: inset 0 0 0 5px var(--tier, var(--line)), inset 0 0 0 7px rgba(4, 6, 12, 0.85);
}
.icard .card-tier-tag { top: -10px; left: 14px; font-size: 0.62rem; padding: 3px 11px 2.5px; }
.icard-bounty { right: -15px; top: -15px; width: 58px; height: 58px; }
.icard-bounty b { font-size: 1.45rem; }
.icard-art {
  height: 168px;
  margin: 7px 7px 0;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: var(--ink);
  position: relative;
}
.icard-art::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 32%;
  background: linear-gradient(180deg, transparent, rgba(240, 231, 210, 0.5) 72%, #f0e7d2);
}
.icard-body {
  margin: 0 7px 7px;
  border-radius: 0 0 12px 12px;
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.06) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, #f0e7d2, var(--paper) 40%, var(--paper-2));
  color: var(--ink-on-paper);
  padding: 12px 14px 13px;
}
.icard-title {
  font-weight: 900; font-stretch: 82%;
  font-size: 1.22rem; line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.icard-flavor {
  font-size: 0.82rem; font-style: italic;
  color: rgba(36, 31, 22, 0.7);
  margin-bottom: 11px;
}
.icard-checks { display: flex; flex-direction: column; gap: 6px; }
.icheck {
  display: flex; align-items: center; gap: 9px;
  border: 2px solid color-mix(in srgb, var(--st) 55%, var(--ink));
  border-left-width: 6px;
  border-radius: 8px;
  padding: 6px 11px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--st) 14%, transparent), transparent 60%);
}
.icheck .ico { color: var(--st); font-size: 1.05rem; }
.icheck-label { font-size: 0.68rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.icheck b { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; margin-left: auto; }
.icheck em {
  font-style: normal; font-size: 0.66rem; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
}
.icheck-ok em { background: rgba(48, 164, 108, 0.18); color: #1c7a4c; }
.icheck-no em { background: rgba(229, 72, 77, 0.16); color: #b3262b; }
.icheck-no { opacity: 0.92; }
.icheck-no b { color: #b3262b; }
.inspect-status {
  margin-top: 10px;
  font-size: 0.74rem; font-weight: 800;
  color: rgba(36, 31, 22, 0.65);
  border-top: 1.5px dashed rgba(36, 31, 22, 0.35);
  padding-top: 8px;
}
.inspect-hint {
  position: relative;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.24em;
  color: var(--dim);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(4, 6, 12, 0.8);
}
.icard-back {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 300px;
  padding: 22px;
  text-align: center;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.14) 1.5px, transparent 2px) 0 0 / 12px 12px,
    radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--tier) 88%, #fff) 0%, var(--tier) 45%, color-mix(in srgb, var(--tier) 55%, #000) 100%);
  color: #fff;
}
.icard-back-burst { position: absolute; width: 130px; height: 130px; color: rgba(4, 6, 12, 0.3); top: 52px; }
.icard-back-q { position: relative; font-family: var(--font-display); font-size: 4rem; text-shadow: 3px 3px 0 rgba(4, 6, 12, 0.45); }
.icard-back-tier { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.2em; text-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.4); }
.icard-back-pips { display: flex; gap: 4px; font-size: 0.8rem; opacity: 0.85; }
.icard-back p { font-size: 0.8rem; font-weight: 700; opacity: 0.9; max-width: 220px; line-height: 1.45; margin: 8px 0 0; }

@media (max-width: 700px) {
  .inspect--docked { display: none; } /* hover doesn't exist on touch */
  .icard-art { height: 140px; }
}

/* ---------- salvage / scout report ---------- */
.salvage {
  position: fixed; left: 50%; bottom: max(150px, 22vh);
  transform: translateX(-50%);
  z-index: 68;
  cursor: pointer;
  animation: salvage-in 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.salvage-card {
  width: min(340px, 88vw);
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.07) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, #fbf5e6, var(--paper) 40%, var(--paper-2));
  color: var(--ink-on-paper);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 0 0 2.5px var(--kc, var(--marquee)), 7px 9px 0 rgba(4, 6, 12, 0.55);
  padding: 10px 14px 12px;
  transform: rotate(-1.5deg);
}
.salvage-kicker {
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.26em;
  color: var(--kc, #8a5b00);
  margin-bottom: 6px;
}
.salvage-main { display: flex; align-items: center; gap: 11px; }
/* multi-card hauls: each claim tag pops in on its own beat */
.salvage-haul .salvage-main {
  padding-top: 8px;
  border-top: 1.5px dashed var(--line-soft);
  margin-top: 8px;
  animation: haul-pop 0.4s calc(var(--i, 0) * 0.45s) cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}
.salvage-haul .salvage-main:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
@keyframes haul-pop { from { opacity: 0; transform: translateY(10px) scale(0.92); } }
.salvage-ico {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 11px;
  background: var(--kc); color: #fff;
  border: 2px solid var(--ink);
  font-size: 1.4rem;
  box-shadow: inset 0 -4px 0 rgba(4, 6, 12, 0.3);
}
.salvage-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.salvage-info b { font-size: 0.98rem; }
.salvage-info span { font-size: 0.76rem; font-weight: 700; opacity: 0.8; }
.salvage-out { animation: salvage-out 0.35s ease forwards; }
@keyframes salvage-in { from { transform: translateX(-50%) translateY(60px) rotate(2deg); opacity: 0; } }
@keyframes salvage-out { to { transform: translateX(-50%) translateY(24px); opacity: 0; } }
.scout-card .scout-scene {
  height: 74px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
.scout-star { color: #8a5b00; }
.scout-reqs { display: inline-flex; gap: 6px; margin-top: 3px; }
.scout-reqs .statchip { color: var(--ink-on-paper); }
.scout-reqs .statchip b { color: var(--ink-on-paper); }

/* ---------- fx layer ---------- */
.fx-canvas {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 20;
}
.float-text {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 1.9rem; letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 21;
  animation: float-up 1.35s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
  -webkit-text-stroke: 1.5px var(--ink);
}
.float-gold { color: var(--marquee); text-shadow: 3px 3px 0 rgba(4, 6, 12, 0.6); font-size: 2.4rem; }
.float-claim { color: #fff; text-shadow: 3px 3px 0 var(--danger); }
@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  32% { transform: translate(-50%, -70%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(0.95); }
}

.banner {
  position: absolute; top: 16%; left: -4%; right: -4%;
  z-index: 22;
  pointer-events: none;
  transform: rotate(-2deg);
  animation: banner-in 0.4s cubic-bezier(0.2, 1.3, 0.35, 1);
}
.banner-inner {
  display: flex; align-items: baseline; justify-content: center; gap: 14px;
  padding: 10px 40px 12px;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 8px 30px rgba(4, 6, 12, 0.55);
}
.banner-gold .banner-inner {
  background:
    var(--halftone) 0 0 / 6px 6px,
    linear-gradient(180deg, #ffd76b, var(--marquee));
  color: #241a00;
}
.banner-bad .banner-inner {
  background:
    var(--halftone) 0 0 / 6px 6px,
    linear-gradient(180deg, #ff6a6e, var(--danger));
  color: #fff;
}
.banner-ink .banner-inner {
  background:
    var(--halftone) 0 0 / 6px 6px,
    linear-gradient(180deg, #2a3459, var(--night-2));
  color: var(--steel);
}
.banner-kicker {
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.3em;
  opacity: 0.85;
}
.banner-title {
  font-family: var(--font-display);
  font-size: 1.7rem; letter-spacing: 0.06em;
  text-shadow: 2px 2px 0 rgba(4, 6, 12, 0.25);
}
.banner-out { animation: banner-out 0.38s ease forwards; }
@keyframes banner-in { from { transform: translateX(-105%) rotate(-2deg); } }
@keyframes banner-out { to { transform: translateX(105%) rotate(-2deg); opacity: 0.4; } }

/* ---------- toasts ---------- */
#toasts {
  position: fixed; bottom: 122px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 50; pointer-events: none;
}
.toast {
  background: linear-gradient(180deg, #ff6a6e, var(--danger));
  color: #fff;
  border: 2.5px solid var(--ink); border-radius: 10px;
  padding: 8px 20px; font-weight: 800;
  box-shadow: var(--shadow-pop);
  animation: toast-in 0.22s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes toast-in { from { transform: translateY(14px) scale(0.9); opacity: 0; } }

/* ---------- the POW moment ---------- */
.pow {
  position: fixed; inset: 0; z-index: 65;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  animation: fade-in 0.1s ease;
}
.pow-burst {
  position: absolute;
  width: min(62vmin, 480px); height: min(62vmin, 480px);
  animation: pow-in 0.34s cubic-bezier(0.2, 1.7, 0.4, 1);
}
.pow-burst svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--pc);
  fill: currentColor;
  z-index: 2;
  filter: drop-shadow(8px 10px 0 rgba(4, 6, 12, 0.55));
}
.pow-burst .pow-burst-back {
  color: #fff;
  z-index: 1;
  transform: rotate(17deg) scale(1.13);
  filter: none;
  opacity: 0.95;
}
.pow-word {
  position: absolute; z-index: 3;
  font-family: var(--font-display);
  font-size: clamp(4rem, 17vmin, 8.5rem);
  color: #fff;
  -webkit-text-stroke: 3.5px var(--ink);
  text-shadow: 0.05em 0.07em 0 var(--ink);
  letter-spacing: 0.05em;
  transform: rotate(-6deg);
  animation: pow-word 0.4s cubic-bezier(0.2, 1.8, 0.4, 1);
}
.pow-strip {
  position: absolute; z-index: 4;
  top: calc(50% + min(24vmin, 190px));
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: linear-gradient(180deg, #fbf5e6, var(--paper));
  border: 3px solid var(--ink);
  border-radius: 6px;
  padding: 9px 26px 10px;
  transform: rotate(-2deg);
  box-shadow: 5px 6px 0 rgba(4, 6, 12, 0.55);
  animation: pow-strip-in 0.35s 0.12s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}
.pow-title {
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--ink-on-paper); font-size: 1rem;
}
.pow-carry {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.66rem; font-weight: 900; letter-spacing: 0.22em;
  color: #8a5b00;
}
.pow-out { animation: pow-out 0.32s ease forwards; }
@keyframes pow-in { from { transform: scale(0.15) rotate(-40deg); opacity: 0; } }
@keyframes pow-word {
  0% { transform: rotate(-6deg) scale(3.4); opacity: 0; }
  55% { transform: rotate(-6deg) scale(0.9); opacity: 1; }
  100% { transform: rotate(-6deg) scale(1); }
}
@keyframes pow-strip-in { from { transform: rotate(-2deg) translateY(26px); opacity: 0; } }
@keyframes pow-out { to { opacity: 0; transform: scale(1.07); } }

.shake { animation: shake-hit 0.4s cubic-bezier(0.3, 0.9, 0.4, 1); }
@keyframes shake-hit {
  12% { transform: translate(-7px, 4px) rotate(-0.4deg); }
  32% { transform: translate(6px, -5px) rotate(0.35deg); }
  52% { transform: translate(-4px, 2px) rotate(-0.2deg); }
  72% { transform: translate(2px, -1px); }
}

/* ---------- turn splash ---------- */
.splash {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 10, 20, 0.62);
  animation: fade-in 0.15s ease;
  overflow: hidden;
}
.splash-lines {
  position: absolute; inset: -40%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.07) 0deg 2.2deg, transparent 2.2deg 9deg);
  mask-image: radial-gradient(circle, transparent 18%, #000 46%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle, transparent 18%, #000 46%, transparent 74%);
  animation: rays-spin 40s linear infinite;
}
.splash-card {
  position: relative;
  background:
    var(--halftone) 0 0 / 7px 7px,
    linear-gradient(180deg, color-mix(in srgb, var(--pc) 92%, #fff), var(--pc) 60%, color-mix(in srgb, var(--pc) 78%, #000));
  color: #fff;
  border: 4px solid var(--ink); border-radius: 20px;
  padding: 26px 60px 30px; text-align: center;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 12px 14px 0 rgba(4, 6, 12, 0.6);
  transform: rotate(-2deg);
  animation: splash-pop 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.splash-kicker {
  font-size: 0.66rem; font-weight: 900; letter-spacing: 0.32em;
  opacity: 0.85; margin-bottom: 8px;
}
.splash-portrait {
  width: 92px; height: 104px;
  margin: 0 auto 10px;
  border-radius: 16px;
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 4px 5px 0 rgba(4, 6, 12, 0.5);
}
.splash-name {
  font-family: var(--font-display); font-size: 3rem;
  letter-spacing: 0.05em; -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 4px 4px 0 rgba(4, 6, 12, 0.4);
  line-height: 1;
}
.splash-sub { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em; opacity: 0.92; margin-top: 8px; font-weight: 800; }
@keyframes splash-pop { from { transform: rotate(-2deg) scale(0.55); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- win screen ---------- */
.winscreen {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 10, 20, 0.9);
  animation: fade-in 0.3s ease;
  overflow: hidden;
  padding: 20px;
}
.win-rays {
  position: absolute; inset: -30%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 197, 61, 0.09) 0deg 4deg, transparent 4deg 13deg);
  mask-image: radial-gradient(circle, #000 8%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 62%);
  animation: rays-spin 55s linear infinite;
}
.win-paper {
  position: relative;
  width: min(560px, 100%);
  max-height: 92vh; overflow-y: auto;
  text-align: center;
  background:
    var(--halftone) 0 0 / 5px 5px,
    linear-gradient(180deg, #fbf5e6, var(--paper) 30%, var(--paper-2));
  color: var(--ink-on-paper);
  border: 4px solid var(--ink); border-radius: 8px;
  padding: 26px 34px 32px;
  box-shadow: 16px 18px 0 rgba(4, 6, 12, 0.55);
  transform: rotate(-1deg);
  animation: splash-pop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.win-mast { display: flex; align-items: center; gap: 14px; }
.win-mast-rule { flex: 1; height: 3px; background: var(--ink-on-paper); }
.win-mast-title {
  font-family: var(--font-display);
  font-size: 1.9rem; letter-spacing: 0.12em;
}
.win-dateline {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.28em;
  border-top: 1.5px solid var(--ink-on-paper);
  border-bottom: 1.5px solid var(--ink-on-paper);
  padding: 4px 0; margin: 8px 0 16px;
}
.win-headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 0.95; letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.win-photo {
  position: relative;
  width: 148px; height: 148px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
}
.win-photo-burst {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--pc);
  animation: rays-spin 30s linear infinite;
}
.win-portrait {
  position: relative;
  width: 96px; height: 108px;
  border-radius: 16px;
  border-width: 3.5px;
}
.win-caption { font-style: italic; font-size: 0.85rem; opacity: 0.8; margin-bottom: 20px; }
.win-standings { display: flex; flex-direction: column; gap: 7px; margin-bottom: 26px; }
.standing {
  display: flex; align-items: center; gap: 12px;
  font-weight: 800; padding: 7px 14px;
  border: 2px solid rgba(36, 31, 22, 0.25);
  border-left: 6px solid var(--pc);
  background: rgba(255, 255, 255, 0.4);
  border-radius: 8px;
}
.standing-first { border-color: var(--ink); background: rgba(255, 197, 61, 0.28); }
.standing-rank { font-family: var(--font-display); font-size: 1.3rem; width: 20px; }
.standing-emblem { display: inline-flex; color: var(--pc); }
.standing-name { flex: 1; text-align: left; }
.standing-score { display: inline-flex; align-items: center; gap: 3px; color: #8a5b00; font-weight: 900; }

/* ================= FACTIONS & SHOWDOWNS ================= */

/* faction badges on chips, dossiers, and the turn bar */
.fbadge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px;
  margin-left: 5px;
  border-radius: 4px;
  font-size: 0.62rem;
  border: 1.5px solid var(--ink);
  vertical-align: -2px;
}
.fbadge-hero { color: #241a00; background: linear-gradient(180deg, #ffe9ad, var(--marquee)); box-shadow: 0 0 7px rgba(255, 215, 107, 0.6); }
.fbadge-villain { color: #f3e8ff; background: linear-gradient(180deg, #7c3aed, #4c1d95); box-shadow: 0 0 7px rgba(168, 85, 247, 0.6); }
.arch-faction { font-style: normal; letter-spacing: 0.12em; }
.arch-hero { color: var(--marquee); }
.arch-villain { color: #c084fc; }
.player.align-hero { box-shadow: inset 3px 0 0 var(--marquee), var(--shadow-pop); }
.player.align-villain { box-shadow: inset 3px 0 0 #a855f7, var(--shadow-pop); }

/* fight buttons in the dock rail */
.dock-fights { display: flex; gap: 8px; flex-wrap: wrap; }
.dock-fights .btn-fight {
  flex: 1; min-width: 0;
  justify-content: center;
  background: linear-gradient(180deg, #3d1420, #22101c);
  border-color: var(--danger);
  color: #ffd9db;
  white-space: nowrap; overflow: hidden;
}
.dock-fights .btn-fight:hover:not(:disabled) {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -5px 0 rgba(4, 6, 12, 0.22), 4px 4px 0 rgba(4, 6, 12, 0.6), 0 0 14px rgba(229, 72, 77, 0.6);
}

/* --- THE SHOWDOWN: an anime split-screen cut-in ---
   Two full-height colored panels slam in from opposite sides along a
   diagonal seam, a giant VS stamps into the center, and the phase tray
   slides up from the bottom. The stage persists for the whole battle. */
.showdown { position: fixed; inset: 0; z-index: 90; overflow: hidden; background: var(--ink); }

/* the two halves, cut on the diagonal */
.sdx-half {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle, rgba(4, 6, 12, 0.22) 1.2px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(160deg, color-mix(in srgb, var(--pc) 80%, #fff) -30%, var(--pc) 34%, color-mix(in srgb, var(--pc) 42%, #05070f) 100%);
}
.sdx-a { clip-path: polygon(0 0, 59% 0, 43% 100%, 0 100%); animation: sdx-slam-l 0.42s cubic-bezier(0.2, 1.1, 0.35, 1) both; }
.sdx-d { clip-path: polygon(59% 0, 100% 0, 100% 100%, 43% 100%); animation: sdx-slam-r 0.42s cubic-bezier(0.2, 1.1, 0.35, 1) both; }
@keyframes sdx-slam-l { from { transform: translateX(-101%); } }
@keyframes sdx-slam-r { from { transform: translateX(101%); } }
.sdx-half.align-hero {
  background:
    radial-gradient(circle, rgba(255, 244, 214, 0.16) 1.2px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(160deg, #fff3c9 -40%, color-mix(in srgb, var(--pc) 72%, #ffd76b) 30%, color-mix(in srgb, var(--pc) 45%, #1a2c66) 100%);
}
.sdx-half.align-villain {
  background:
    radial-gradient(circle, rgba(168, 85, 247, 0.2) 1.2px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(160deg, #7c3aed -30%, color-mix(in srgb, var(--pc) 55%, #3b0764) 36%, #0a0412 100%);
}

/* streaking speed lines, always racing toward the seam. The loop translates
   by EXACTLY one pattern period along the 115deg gradient direction
   (34px x (sin115, cos65) = 30.8px, 14.4px) so the restart is invisible. */
.sdx-speed {
  position: absolute; inset: -30%;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.13) 0 3px, transparent 3px 34px);
  animation: sdx-speed 0.9s linear infinite;
  mix-blend-mode: overlay;
}
.sdx-d .sdx-speed { animation-direction: reverse; }
@keyframes sdx-speed { to { transform: translate(30.8px, 14.4px); } }

/* the figures: a tilted, ink-framed field-photo panel with the billing
   pinned beneath — each clearly inside its own half, clear of the seam */
.sdx-figure {
  /* vertically centered in the space above the tray so tall viewports
     don't strand the fighters in the bottom corners */
  position: absolute; top: calc(50% - 7vh);
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 13px;
  z-index: 1;
}
.sdx-a .sdx-figure { left: 6%; align-items: flex-start; text-align: left; }
.sdx-d .sdx-figure { right: 6%; align-items: flex-end; text-align: right; }
.sdx-bust {
  position: relative;
  width: min(30vw, 44vh, 400px); height: min(30vw, 44vh, 400px);
  border: 4px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--pc) 70%, #fff), 7px 9px 0 rgba(4, 6, 12, 0.55);
  animation: sdx-bust-in 0.5s 0.18s cubic-bezier(0.2, 1.2, 0.35, 1) both;
}
.sdx-bust::after {
  /* newsprint grain over the field photo */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(4, 6, 12, 0.16) 1px, transparent 1.4px) 0 0 / 5px 5px;
  pointer-events: none;
}
.sdx-a .sdx-bust { transform: rotate(-2.4deg); }
.sdx-d .sdx-bust { transform: rotate(2.4deg) scaleX(-1); }
@keyframes sdx-bust-in { from { opacity: 0; translate: 0 40px; } }
.sdx-bust .portrait-art { width: 100%; height: 100%; }
.sdx-bust .asset-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* the billing: name in giant display italic, role, live boost counter */
.sdx-id {
  display: flex; flex-direction: column; gap: 4px;
  animation: sdx-bust-in 0.5s 0.3s cubic-bezier(0.2, 1.2, 0.35, 1) both;
}
.sdx-a .sdx-id { align-items: flex-start; }
.sdx-d .sdx-id { align-items: flex-end; }
.sdx-role {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.28em;
  color: #fff;
  background: var(--ink);
  padding: 3.5px 11px;
  border-radius: 4px;
  transform: skewX(-8deg);
  box-shadow: 2px 2.5px 0 rgba(4, 6, 12, 0.5);
}
.sdx-role .ico { font-size: 0.85rem; }
.sdx-role-hero { color: var(--marquee); box-shadow: 0 0 12px rgba(255, 215, 107, 0.5); }
.sdx-role-villain { color: #c084fc; box-shadow: 0 0 12px rgba(168, 85, 247, 0.5); }
.sdx-name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6.5vmin, 3.6rem);
  line-height: 1; letter-spacing: 0.04em;
  color: #fff;
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 3px 4px 0 rgba(4, 6, 12, 0.65);
  transform: skewX(-6deg);
  max-width: 38vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the manifested power riding under the fighter's name — combat-public info */
.sdx-power {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.2em;
  color: var(--marquee);
  background: rgba(7, 10, 20, 0.8);
  border: 1.5px solid var(--marquee);
  padding: 3.5px 10px;
  border-radius: 4px;
  transform: skewX(-8deg);
  text-shadow: 0 0 8px rgba(255, 197, 61, 0.4);
  width: fit-content;
}
.sdx-power .ico { width: 12px; height: 12px; }
.sdx-meta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 900; color: #fff;
  background: rgba(4, 6, 12, 0.55);
  border-radius: 999px;
  padding: 3px 11px;
}
.sdx-meta .ico { color: var(--marquee); font-size: 0.8em; }
.sdx-meta u { text-decoration: none; color: var(--marquee); }
.sdx-meta i { font-style: normal; font-size: 0.58rem; letter-spacing: 0.12em; opacity: 0.85; }

/* the seam: an ink band straddling the panel boundary (59% top -> 43%
   bottom) with the hot gold blade inside it. Both are CENTERED on the
   boundary line with generous overlap into each panel, so no raw panel
   edge can peek out at any viewport ratio or subpixel rounding. */
.sdx-slash {
  position: absolute; inset: 0;
  clip-path: polygon(57.1% 0, 60.9% 0, 44.9% 100%, 41.1% 100%);
  background: linear-gradient(180deg, #1a2038, var(--ink) 55%, #05070f);
  filter: drop-shadow(0 0 16px rgba(255, 197, 61, 0.55));
  animation: sdx-slash 0.34s 0.3s cubic-bezier(0.6, 0, 0.2, 1) both;
  pointer-events: none;
  z-index: 2; /* the blade cuts OVER the figures */
}
.sdx-slash::after {
  /* the blade itself */
  content: '';
  position: absolute; inset: 0;
  clip-path: polygon(58% 0, 60% 0, 44% 100%, 42% 100%);
  background: linear-gradient(180deg, #fff 0%, var(--marquee) 40%, var(--danger) 100%);
}
@keyframes sdx-slash { from { transform: translateY(-102%); } }

/* the VS stamp + spinning burst — pinned ON the seam (boundary x at 36%
   height = 59 - 16 x 0.36 = 53.2%) */
.sdx-vs {
  position: absolute; left: 53.2%; top: 36%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
  z-index: 3;
  animation: sdx-vs-stamp 0.4s 0.42s cubic-bezier(0.25, 1.6, 0.4, 1) both;
}
@keyframes sdx-vs-stamp {
  0% { transform: translate(-50%, -50%) scale(3.4) rotate(-18deg); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
.sdx-vs b {
  font-family: var(--font-display);
  font-size: clamp(4.4rem, 15vmin, 8rem);
  line-height: 0.9;
  color: var(--marquee);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 5px 6px 0 var(--danger), 9px 11px 0 rgba(4, 6, 12, 0.6);
  transform: rotate(-6deg) skewX(-4deg);
}
/* dead-center behind the VS glyph. Centering uses the individual
   `translate` property and the spin the individual `rotate` property:
   translate composes OUTSIDE rotate, so the burst spins in place. (Putting
   translate(-50%,-50%) inside `transform` makes rotate spin the centering
   vector too — the burst ORBITS the letters instead of sitting behind them,
   which was the drift Eric saw.) */
.sdx-vs-rays {
  position: absolute; left: 50%; top: 50%;
  width: clamp(200px, 46vmin, 360px); height: clamp(200px, 46vmin, 360px);
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 197, 61, 0.4) 0deg 8deg, transparent 8deg 26deg);
  mask-image: radial-gradient(circle, #000 0%, transparent 66%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 66%);
  animation: sdx-rays-spin 16s linear infinite;
  z-index: -1;
}
@keyframes sdx-rays-spin { to { rotate: 1turn; } }
/* the chosen-stat chip hangs below the stamp WITHOUT reshaping the flex
   column (so the burst stays centered on the letters when it appears) */
.sdx-duel {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  white-space: nowrap;
}
.sdx-duel-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  border: 2px solid var(--st);
  border-radius: 999px;
  padding: 4px 13px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--st) 65%, transparent);
  animation: punch-in 0.35s cubic-bezier(0.25, 1.6, 0.4, 1) both;
}
.sdx-duel-chip .ico { color: var(--st); }
@keyframes punch-in {
  0% { scale: 2.6; rotate: -10deg; opacity: 0; }
  60% { opacity: 1; }
  100% { scale: 1; rotate: 0deg; opacity: 1; }
}

/* the top ribbon */
.sdx-ribbon {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%) skewX(-8deg) rotate(-1deg);
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.6vmin, 1.3rem); letter-spacing: 0.16em;
  color: #241a00;
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  padding: 5px 20px 6px;
  box-shadow: 3px 4px 0 rgba(4, 6, 12, 0.6);
  white-space: nowrap;
  animation: sdx-ribbon 0.4s 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  z-index: 3;
}
@keyframes sdx-ribbon { from { transform: translateX(-50%) translateY(-70px) skewX(-8deg); opacity: 0; } }
.sdx-ribbon .ico { font-size: 0.85em; }

/* the phase tray: slides up from the bottom */
.sdx-tray {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(720px, 100vw);
  background: linear-gradient(180deg, #1b2447, var(--night) 60%, #10162c);
  border: 3px solid var(--ink);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 40px rgba(4, 6, 12, 0.65), inset 0 3px 0 color-mix(in srgb, var(--pc, transparent) 70%, transparent);
  padding: 20px 18px calc(16px + env(safe-area-inset-bottom));
  text-align: center;
  animation: sdx-tray 0.45s 0.7s cubic-bezier(0.2, 1.2, 0.4, 1) both;
  z-index: 4;
}
.sdx-tray::before {
  /* crime-scene tape strung across the desk, same as the dock */
  content: '';
  position: absolute; top: -8px; left: -8px; right: -8px; height: 13px;
  background: repeating-linear-gradient(-55deg, var(--marquee) 0 13px, var(--ink) 13px 26px);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-0.5deg);
  box-shadow: 0 3px 8px rgba(4, 6, 12, 0.5);
  pointer-events: none;
}
.sdx-tray::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  mix-blend-mode: overlay;
  opacity: 0.22;
  border-radius: 18px 18px 0 0;
  pointer-events: none;
}
.sdx-tray > * { position: relative; z-index: 1; }
@keyframes sdx-tray { from { transform: translateX(-50%) translateY(110%); } }

/* the callout: a paper name chip + a shouted command, like the dock's desk */
.sdx-callout {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sdx-callout-name {
  font-family: var(--font-display);
  font-size: 1.02rem; letter-spacing: 0.05em;
  background:
    radial-gradient(circle, rgba(36, 31, 22, 0.07) 1px, transparent 1.4px) 0 0 / 5px 5px,
    linear-gradient(180deg, #fbf5e6, var(--paper));
  color: var(--ink-on-paper);
  border: 2.5px solid var(--ink);
  border-radius: 3px;
  padding: 2px 13px 3px;
  transform: rotate(-1.4deg);
  box-shadow: 2.5px 3px 0 rgba(4, 6, 12, 0.5), inset 0 0 0 1.5px color-mix(in srgb, var(--pc) 45%, transparent);
}
.sdx-callout-cmd {
  font-family: var(--font-display);
  font-size: 1.35rem; letter-spacing: 0.07em;
  color: var(--marquee);
  -webkit-text-stroke: 1px var(--ink);
  text-shadow: 2.5px 2.5px 0 rgba(229, 72, 77, 0.85), 4px 5px 0 rgba(4, 6, 12, 0.5);
  transform: rotate(-0.6deg);
}
.sdx-callout-tag {
  font-size: 0.54rem; font-weight: 900; letter-spacing: 0.16em;
  color: var(--dim);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 2.5px 9px;
}

/* weapon choice: three POWER PLATES — separate skewed slabs that deal in
   like cards, each carrying the full matchup (your number vs theirs when
   the opponent's file is public) and calling its verdict. */
.sdx-statbar {
  display: flex; justify-content: center; align-items: stretch; gap: 14px;
  padding: 12px 4px 6px;
}
.sdx-seg {
  position: relative;
  flex: 1; max-width: 196px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 15px 8px 13px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  transform: skewX(-6deg) rotate(calc((var(--i, 1) - 1) * 1.2deg - 1.2deg));
  background:
    radial-gradient(circle, rgba(4, 6, 12, 0.25) 1px, transparent 1.4px) 0 0 / 6px 6px,
    linear-gradient(180deg, color-mix(in srgb, var(--st) 62%, #10162c), color-mix(in srgb, var(--st) 26%, #0a0e1d) 85%);
  color: var(--st);
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(4, 6, 12, 0.6), inset 0 2px 0 color-mix(in srgb, var(--st) 45%, transparent);
  transition: transform 0.15s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.15s ease, filter 0.15s ease;
  animation: seg-in 0.4s calc(0.75s + var(--i, 0) * 90ms) cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes seg-in { from { opacity: 0; transform: skewX(-6deg) translateY(46px) scale(0.7); } }
.sdx-seg > * { transform: skewX(6deg); }
.seg-ico {
  color: var(--st);
  font-size: 1.2rem;
  filter: drop-shadow(0 1.5px 0 rgba(4, 6, 12, 0.6)) drop-shadow(0 0 6px color-mix(in srgb, var(--st) 70%, transparent));
}
.seg-duel { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.seg-duel b {
  font-family: var(--font-display);
  font-size: 2.7rem; line-height: 0.95;
  color: #fff;
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 2.5px 3px 0 rgba(4, 6, 12, 0.65);
}
.seg-duel em {
  font-style: normal;
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
}
.seg-duel u {
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  -webkit-text-stroke: 1px var(--ink);
  text-shadow: 1.5px 2px 0 rgba(4, 6, 12, 0.6);
}
.seg-name {
  font-size: 0.55rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1.5px 0 rgba(4, 6, 12, 0.7);
  opacity: 0.9;
}
/* the verdict tab pinned to the plate's shoulder */
.seg-tag {
  position: absolute; top: -11px; right: -7px;
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.5rem; font-weight: 900; letter-spacing: 0.12em;
  color: var(--dim);
  background: var(--ink);
  border: 2px solid var(--line);
  border-radius: 5px;
  padding: 2px 7px;
  transform: skewX(6deg) rotate(3deg);
  white-space: nowrap;
}
.seg-tag .ico { width: 9px; height: 9px; }
.seg-tag--win {
  color: var(--ink);
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  border-color: var(--ink);
  box-shadow: 0 0 12px rgba(255, 197, 61, 0.55), 2px 2px 0 rgba(4, 6, 12, 0.5);
}
/* winnable duels glow like the answer; dead ends dim but stay playable */
.sdx-seg.seg-win { box-shadow: 0 6px 0 rgba(4, 6, 12, 0.6), 0 0 0 2.5px var(--marquee), 0 0 22px rgba(255, 197, 61, 0.3); }
.sdx-seg.seg-no { filter: saturate(0.55) brightness(0.82); }
.sdx-seg:hover, .sdx-seg.sdx-picked {
  transform: skewX(-6deg) rotate(calc((var(--i, 1) - 1) * 1.2deg - 1.2deg)) translateY(-9px) scale(1.07);
  box-shadow: 0 16px 0 -5px var(--ink), 0 0 26px color-mix(in srgb, var(--st) 85%, transparent);
  filter: brightness(1.18);
  z-index: 1;
}
.sdx-seg.seg-win:hover, .sdx-seg.seg-win.sdx-picked {
  box-shadow: 0 16px 0 -5px var(--ink), 0 0 0 2.5px var(--marquee), 0 0 30px rgba(255, 197, 61, 0.55);
}
.sdx-hint { font-size: 0.62rem; font-style: italic; color: var(--dim); margin-top: 12px; }

/* boost cards: pocket gear slabs in their kind's ink */
.sdx-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 14px; }
.sdx-card {
  display: inline-flex; align-items: center; gap: 9px;
  background:
    radial-gradient(circle, rgba(4, 6, 12, 0.25) 1px, transparent 1.4px) 0 0 / 6px 6px,
    linear-gradient(180deg, color-mix(in srgb, var(--kc) 34%, #10162c), color-mix(in srgb, var(--kc) 14%, #0a0e1d));
  border: 2.5px solid var(--ink);
  outline: 2px solid var(--kc);
  border-radius: 10px;
  transform: skewX(-6deg);
  padding: 10px 15px;
  color: #fff; font-weight: 800; font-size: 0.76rem;
  cursor: pointer;
  box-shadow: 3px 4px 0 rgba(4, 6, 12, 0.55);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.sdx-card > * { transform: skewX(6deg); }
.sdx-card:hover { transform: skewX(-6deg) translateY(-4px); box-shadow: 3px 6px 0 rgba(4, 6, 12, 0.55), 0 0 16px color-mix(in srgb, var(--kc) 65%, transparent); }
.sdx-card-ico {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--kc);
  color: #fff;
  border: 2px solid var(--ink);
  font-size: 0.8rem;
}
.sdx-card i {
  font-style: normal; font-weight: 900;
  font-family: var(--font-display);
  font-size: 0.95rem; letter-spacing: 0.04em;
  color: var(--marquee);
  text-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.6);
}
.sdx-ready { width: 100%; justify-content: center; font-size: 0.92rem; min-height: 52px; }

/* the hot-seat blackout gate */
.sdx-gate {
  position: absolute; inset: 0;
  z-index: 6;
  display: flex; flex-direction: column; justify-content: center;
  background: rgba(3, 4, 9, 0.96);
  animation: fade-in 0.25s ease;
}
.sdx-gate[hidden] { display: none; }
.sdxg-stripe {
  position: absolute; left: -4%; right: -4%; height: 16px;
  background: repeating-linear-gradient(-55deg, var(--marquee) 0 15px, var(--ink) 15px 30px);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.sdxg-stripe--top { top: 12%; transform: rotate(-2deg); }
.sdxg-stripe--bottom { bottom: 12%; transform: rotate(2deg); }
.sdxg-body { text-align: center; padding: 0 18px; }
.sdxg-kicker { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.28em; color: var(--danger); margin-bottom: 8px; }
.sdxg-name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vmin, 5.4rem);
  line-height: 1;
  color: var(--pc, #fff);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 4px 5px 0 rgba(4, 6, 12, 0.8);
  transform: skewX(-4deg);
  margin-bottom: 8px;
}
.sdxg-sub { font-size: 0.82rem; font-weight: 700; color: var(--dim); margin-bottom: 18px; }
.sdxg-sub b { color: var(--st, #fff); }
.sdxg-body .sd-unlock { max-width: 360px; margin: 0 auto; justify-content: center; }

/* --- the verdict: a knockout banner cut-in --- */
.sdx-result { position: fixed; inset: 0; z-index: 95; overflow: hidden; pointer-events: auto; }
.sdxr-flash {
  position: absolute; inset: 0;
  background: #fff;
  animation: sdxr-flash 0.5s ease-out both;
  pointer-events: none;
}
@keyframes sdxr-flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
.sdxr-band {
  position: absolute; left: -4%; right: -4%; top: 50%;
  transform: translateY(-50%) rotate(-3deg);
  min-height: clamp(170px, 30vmin, 240px);
  display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 30px);
  background:
    radial-gradient(circle, rgba(4, 6, 12, 0.2) 1.2px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(105deg, color-mix(in srgb, var(--pc) 85%, #fff) -20%, var(--pc) 40%, color-mix(in srgb, var(--pc) 45%, #05070f));
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 0 60px rgba(4, 6, 12, 0.8);
  animation: sdxr-band 0.5s cubic-bezier(0.2, 1.15, 0.3, 1) both;
  padding: 16px 4vw;
}
@keyframes sdxr-band { from { transform: translateY(-50%) translateX(-115%) rotate(-3deg); } }
.sdx-result.align-villain .sdxr-band {
  background:
    radial-gradient(circle, rgba(168, 85, 247, 0.22) 1.2px, transparent 1.6px) 0 0 / 9px 9px,
    linear-gradient(105deg, #7c3aed -20%, color-mix(in srgb, var(--pc) 50%, #3b0764) 42%, #0a0412);
}
.sdxr-speed {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 3px, transparent 3px 40px);
  /* horizontal pattern: one 40px period per loop = seamless restart */
  animation: sdxr-speed 0.8s linear infinite;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes sdxr-speed { to { transform: translateX(40px); } }
.sdxr-bust {
  position: relative;
  width: clamp(110px, 22vmin, 170px); height: clamp(110px, 22vmin, 170px);
  flex: none;
  filter: drop-shadow(5px 6px 0 rgba(4, 6, 12, 0.55));
  animation: punch-in 0.45s 0.28s cubic-bezier(0.25, 1.5, 0.4, 1) both;
}
.sdxr-bust .portrait-art { width: 100%; height: 100%; border: 4px solid var(--ink); border-radius: 14px; }
.sdxr-bust .asset-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.sdxr-text { display: flex; flex-direction: column; gap: 4px; text-align: left; min-width: 0; }
.sdxr-kicker { font-size: 0.64rem; font-weight: 900; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 2px rgba(4, 6, 12, 0.6); }
.sdxr-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7.5vmin, 4rem);
  line-height: 0.95;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 4px 5px 0 rgba(4, 6, 12, 0.6);
  transform: skewX(-4deg);
  animation: punch-in 0.4s 0.4s cubic-bezier(0.25, 1.5, 0.4, 1) both;
}
.sdxr-score {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--font-display);
}
.sdxr-score i {
  font-style: normal;
  font-size: clamp(1.5rem, 5vmin, 2.4rem);
  color: var(--marquee);
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 2.5px 3px 0 rgba(4, 6, 12, 0.6);
}
.sdxr-score i:first-child { animation: punch-in 0.35s 0.6s cubic-bezier(0.25, 1.6, 0.4, 1) both; }
.sdxr-score i:last-child { animation: punch-in 0.35s 0.78s cubic-bezier(0.25, 1.6, 0.4, 1) both; }
.sdxr-score em { font-style: normal; color: rgba(255, 255, 255, 0.7); align-self: center; font-size: 1.2rem; }
.sdxr-sub {
  font-size: 0.68rem; font-weight: 900; letter-spacing: 0.14em;
  color: #fff;
  background: rgba(4, 6, 12, 0.55);
  border-radius: 999px;
  padding: 4px 13px;
  width: fit-content;
  animation: sdx-bust-in 0.4s 0.95s ease both;
}

/* small screens: the classic diagonal — challenger high-left, rival
   low-right, mirroring the seam; the VS holds the center */
@media (max-width: 700px) {
  .sdx-bust { width: min(50vw, 230px); height: min(50vw, 230px); }
  .sdx-figure { transform: none; }
  .sdx-a .sdx-figure { top: max(56px, 8%); bottom: auto; left: 4%; }
  .sdx-d .sdx-figure { top: auto; bottom: 33%; right: 4%; }
  .sdx-name { font-size: clamp(1.5rem, 8vw, 2.2rem); max-width: 82vw; }
  .sdx-vs { top: 44%; left: 52%; } /* the seam's x at 44% height */
  .sdx-callout-cmd { font-size: 1.15rem; }
  .sdx-statbar { gap: 8px; }
  .sdx-seg { padding: 12px 5px 10px; }
  .seg-duel b { font-size: 2.1rem; }
  .seg-duel u { font-size: 1.2rem; }
  .seg-tag { right: -3px; }
  .sdxr-band { gap: 10px; padding: 14px 5vw; }
  .sdxr-bust { width: 92px; height: 92px; }
  .sdxr-text { max-width: 62vw; }
  .sdxr-title { font-size: clamp(1.5rem, 8vw, 2.4rem); }
  .sdxr-kicker { font-size: 0.54rem; letter-spacing: 0.2em; }
  .sdxr-sub { font-size: 0.58rem; }
}

/* --- the transformation splash --- */
.sd-tok { position: relative; width: 62px; height: 84px; margin: 0 auto; flex: none; }
.faction-splash .fsplash-rays {
  position: absolute; left: 50%; top: 50%;
  width: 160vmax; height: 160vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, var(--fray, rgba(255, 197, 61, 0.14)) 0deg 7deg, transparent 7deg 24deg);
  animation: rays-spin 26s linear infinite;
  pointer-events: none;
}
.faction-hero { --fray: rgba(255, 215, 107, 0.16); }
.faction-villain { --fray: rgba(168, 85, 247, 0.15); }
.faction-neutral { --fray: rgba(140, 150, 180, 0.1); }
.faction-villain .splash-card { background: linear-gradient(180deg, #1a0b26, #0c0614); }
.fsplash-card .sd-tok { margin: 10px auto 8px; }

/* the power surge readout: every stat jumping, old bolt new, in plain sight */
.fsplash-surge {
  margin: 14px -6px 0;
  padding: 10px 12px 11px;
  background: rgba(7, 10, 20, 0.55);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  display: grid; gap: 7px; justify-items: center;
  animation: surge-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.55s backwards;
}
.fsplash-surge-tag {
  font-family: var(--font-display);
  font-size: 0.92rem; letter-spacing: 0.22em;
  color: var(--marquee);
  text-shadow: 0 0 12px rgba(255, 197, 61, 0.5), 1.5px 1.5px 0 rgba(4, 6, 12, 0.8);
}
.fsplash-surge-stats { display: flex; gap: 14px; align-items: center; }
.fsurge-stat {
  display: inline-flex; align-items: center; gap: 4px;
  font-style: normal;
  color: var(--st, var(--dim));
}
.fsurge-stat .ico { width: 13px; height: 13px; }
.fsurge-stat u {
  text-decoration: line-through;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--dimmer);
}
.fsurge-stat em {
  font-style: normal; line-height: 0;
  color: var(--marquee);
}
.fsurge-stat em .ico { width: 9px; height: 9px; }
.fsurge-stat b {
  font-family: var(--font-display);
  font-size: 1.35rem; line-height: 1;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 197, 61, 0.45), 1.5px 1.5px 0 rgba(4, 6, 12, 0.8);
}
.fsplash-surge--fade .fsplash-surge-tag { color: var(--dim); text-shadow: none; }
.fsplash-surge--fade .fsplash-surge-stats {
  font-family: var(--font-display);
  font-size: 0.8rem; letter-spacing: 0.14em;
  color: var(--dimmer);
}
@keyframes surge-pop {
  from { transform: scale(0.7); opacity: 0; }
}

/* the second beat: a superpower manifests, wearing this side's name */
.fsplash-power {
  margin: 0 -6px;
  padding: 12px 12px 13px;
  background: rgba(255, 197, 61, 0.1);
  border-bottom: 2px solid var(--ink);
  display: grid; gap: 4px; justify-items: center;
  animation: surge-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 1.35s backwards;
}
.fsplash-power-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.26em;
  color: var(--dim);
}
.fsplash-power-kicker .ico { width: 9px; height: 9px; color: var(--marquee); }
.fsplash-power-name {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 1.6rem; line-height: 1;
  color: var(--marquee);
  text-shadow: 0 0 14px rgba(255, 197, 61, 0.55), 2px 2px 0 rgba(4, 6, 12, 0.8);
  transform: skewX(-4deg);
}
.fsplash-power-name .ico { width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(255, 197, 61, 0.6)); }
.fsplash-power-epithet {
  font-size: 0.66rem; font-style: italic;
  color: var(--dim);
  letter-spacing: 0.04em;
}
.fsplash-power-desc {
  font-size: 0.68rem; font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 0 rgba(4, 6, 12, 0.7);
}

/* ---------- responsive ---------- */
@media (max-width: 1360px) and (min-width: 901px) {
  /* four dock actions need the tighter cut below wide desktop */
  .dock-actions { gap: 8px; }
  .dock-actions .btn { padding: 10px 12px; font-size: 0.72rem; }
  .btn-cost { font-size: 0.58rem; padding: 2px 6px 2px 4px; }
}

@media (max-width: 1120px) and (min-width: 901px) {
  /* tablets landscape: tighter sidebar, same layout */
  .sidebar { width: 262px; }
  .player-stats { gap: 8px; }
  .dock { gap: 12px; }
  .btn { padding: 10px 13px; font-size: 0.76rem; }
}

/* ============ SMALL SCREENS: the board IS the screen ============
   Sidebar disappears; the roster rail takes one slim strip; the dock becomes
   a mission ticket + a full-width primary slab with END TURN big beneath. */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .mobile-strip { display: flex; }
  .game-layout { flex-direction: column; }

  .gamebar { padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 6px; gap: 10px; }
  /* Small screens: the marquee below stars the acting player (name, speed,
     stats), so the top bar slims to ROUND + utility buttons. No logo —
     you know what game you're playing. */
  .gamebar-logo { display: none; }
  .turnbar-chip, .turnbar-speed { display: none; }
  .turnbar { gap: 9px; justify-content: flex-start; }
  .turnbar-round {
    display: block;
    color: var(--dim);
    background: var(--ink);
    border: 1.5px solid var(--line-soft);
    border-radius: 7px;
    padding: 5px 10px;
  }
  .btn-news { display: inline-flex; }
  #btn-news, #btn-recenter {
    flex: none;
    padding: 8px 10px;
    min-width: 42px;
    justify-content: center;
  }
  #btn-recenter .rc-label { display: none; } /* icon says it */

  /* --- dock: ticket + verdict + stacked slabs, nothing clipped --- */
  .dock {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    min-height: 0;
  }
  .stage-wrap, .dock-scene { display: none; } /* the stage banner carries it */
  .dock-tab { display: grid; }
  .dockstage { display: block; margin: -12px -12px 0; }
  .dock::before { z-index: 2; } /* the tape lies OVER the scene window */
  .stage-cut { animation-name: stage-cut-flat; }

  .dock-actions { width: 100%; gap: 8px; }
  .dock-actions .btn, .dock-actions .btn:hover:not(:disabled) { transform: skewX(-6deg); }
  .dock-actions .btn > * { transform: skewX(6deg); }
  .dock-actions .act-primary { min-height: 56px; font-size: 0.94rem; }
  .dock-subactions { gap: 8px; }
  .dock-subactions .is-secondary { display: none; } /* one contextual big action */
  .dock-subactions .btn { min-height: 50px; font-size: 0.8rem; padding: 10px 8px; }
  .dock-subactions .btn-gearbag { flex: none; padding: 10px 15px; }
  .dock-actions .btn-cost { display: none; } /* the verdict line states the cost */

  .banner { top: 12%; }
  .banner-title { font-size: 1.15rem; }
  .banner-inner { padding: 8px 20px 9px; gap: 9px; }
  .banner-kicker { display: none; }
  .splash-card { padding: 20px 36px 24px; }
  .splash-name { font-size: 2.3rem; }
  .win-paper { padding: 20px 20px 24px; }
  .pow-strip { max-width: 92vw; padding: 8px 16px 9px; }
  .pow-title { font-size: 0.88rem; }
  #toasts { bottom: auto; top: 120px; width: 92vw; }
  .toast { font-size: 0.82rem; text-align: center; }
}
@keyframes stage-cut-flat {
  0% { transform: translateY(14px); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: translateY(0); }
}

/* Landscape phones: the dock docks to the right so the board keeps the width */
@media (max-width: 1000px) and (max-height: 500px) {
  .sidebar { display: none; }
  .mobile-strip { display: flex; padding: 0; }

  .board-wrap { flex-direction: row; }
  .dock {
    display: flex; flex-direction: column; align-items: stretch;
    width: 300px; min-height: 0;
    gap: 8px; padding: 10px 12px;
    border-top: 0; border-left: 3px solid var(--ink);
    overflow-y: auto;
    box-shadow: -6px 0 22px rgba(0, 0, 0, 0.45);
  }
  .stage-wrap, .dock-scene { display: none; }
  .dock-tab { display: grid; top: auto; bottom: 14px; left: -19px; right: auto; transform: rotate(-90deg); }
  .dockstage { display: block; margin: -10px -12px 0; }
  .dock-actions { width: 100%; gap: 8px; }
  .dock-actions .act-primary { min-height: 48px; }
  .dock-subactions .is-secondary { display: none; }
  .dock-subactions .btn { min-height: 44px; }
  .dock-actions .btn-cost { display: none; }
  #toasts { bottom: 20px; }
}



/* ============================================================
   ONLINE MULTIPLAYER — the wire room, the lobby, presence
   ============================================================ */

/* cover CTAs with a two-line label (shared with CONTINUE) */
.cover-ctas .continue-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.cover-ctas .continue-label em {
  font-style: normal;
  font-size: 0.52rem; font-weight: 900; letter-spacing: 0.18em;
  opacity: 0.8;
}

/* --- the wire room: three doors into the city --- */
.wire-sub {
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.3em;
  color: var(--dim);
  margin-top: 6px;
}
.wire {
  position: relative; z-index: 2;
  width: min(980px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.wire-name {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  margin-top: 6px;
}
.wire-name-tag {
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.3em;
  color: var(--marquee);
  text-shadow: 0 1px 3px rgba(4, 6, 12, 0.8);
}
.wire-name input {
  width: 250px;
  background: var(--ink); color: #e8ecf8;
  border: 2.5px solid var(--line); border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--font-ui);
  font-size: 1rem; font-weight: 800; letter-spacing: 0.08em;
  text-align: center; text-transform: uppercase;
  box-shadow: var(--shadow-pop);
}
.wire-name input:focus { border-color: var(--marquee); outline: none; }
.wire-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}
.wire-door {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 20px 18px 18px;
  background: linear-gradient(180deg, var(--night), #10162c);
  border: 2.5px solid var(--ink);
  outline: 1.5px solid var(--line-soft);
  border-radius: 15px;
  box-shadow: 4px 5px 0 rgba(4, 6, 12, 0.55);
  color: #e8ecf8;
  text-align: left;
  font-family: var(--font-ui);
  overflow: hidden;
  transition: transform 0.16s ease, outline-color 0.16s ease, box-shadow 0.16s ease;
}
.wire-door::before {
  /* halftone corner — printed, not flat */
  content: '';
  position: absolute; top: -22px; right: -22px;
  width: 110px; height: 110px;
  background-image: var(--halftone);
  background-size: 7px 7px;
  transform: rotate(12deg);
  opacity: 0.35;
  pointer-events: none;
}
button.wire-door { cursor: pointer; }
button.wire-door:hover, .wire-door:focus-within {
  transform: translateY(-3px);
  outline-color: var(--marquee);
  box-shadow: 0 0 0 2px var(--marquee), 0 0 26px rgba(255, 197, 61, 0.25), 4px 5px 0 rgba(4, 6, 12, 0.55);
}
.door-ico {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--ink);
  border: 2.5px solid var(--line);
  border-radius: 10px;
  box-shadow: 2px 3px 0 rgba(4, 6, 12, 0.5);
}
.door-ico .ico { width: 22px; height: 22px; color: var(--marquee); }
.wire-door--join .door-ico .ico { color: var(--steel); }
.wire-door--create .door-ico .ico { color: var(--p4); }
.door-title {
  font-family: var(--font-display);
  font-size: 1.5rem; letter-spacing: 0.05em;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(4, 6, 12, 0.6);
}
.door-sub { font-size: 0.76rem; color: var(--dim); line-height: 1.45; min-height: 2.3em; }
.door-go {
  margin-top: auto;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.24em;
  color: var(--marquee);
}
.door-flash {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.08) 50%, transparent 58%);
  background-size: 250% 100%;
  animation: door-sheen 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes door-sheen { 0%, 60% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.join-row { display: flex; gap: 9px; width: 100%; margin-top: auto; }
.join-row input {
  flex: 1; min-width: 0;
  background: var(--ink); color: var(--marquee);
  border: 2.5px solid var(--line); border-radius: 9px;
  padding: 8px 10px;
  font-family: var(--font-display);
  font-size: 1.3rem; letter-spacing: 0.34em; text-align: center; text-transform: uppercase;
}
.join-row input:focus { border-color: var(--steel); outline: none; }
.vis-row { display: flex; gap: 8px; margin-top: auto; }
.vis-chip {
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.2em;
  color: var(--dim);
  background: var(--ink);
  border: 2px solid var(--line); border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.vis-chip.vis-on {
  color: var(--ink);
  background: var(--marquee);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 rgba(4, 6, 12, 0.55);
}

/* ============================================================
   THE CASTING WALL — the online lobby as a character select.
   Three fixed zones, no scrolling to know the table: the rail
   (everyone's live pick, in the game's own lineup language),
   the spotlight (your cape writ large), the roster wall.
   ============================================================ */

.cast-screen {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  background:
    var(--halftone) 0 0 / 7px 7px,
    radial-gradient(120% 90% at 50% -10%, var(--night-2), var(--ink-2) 70%);
}

/* --- top bar: the room ticket --- */
.cast-bar {
  flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px;
  background: rgba(7, 10, 20, 0.6);
  border-bottom: 2.5px solid var(--ink);
}
.cast-leave { flex: none; }
.cast-room { display: flex; align-items: center; gap: 10px; margin: 0 auto; }
.cast-room-label {
  font-family: var(--font-display);
  font-size: 0.86rem; letter-spacing: 0.2em;
  color: var(--dim);
}
.cast-code {
  font-family: var(--font-display);
  font-size: 1.3rem; letter-spacing: 0.18em; line-height: 1;
  color: var(--ink);
  background: var(--marquee);
  border: 3px solid var(--ink);
  border-radius: 9px;
  padding: 3px 14px 5px;
  box-shadow: 3px 3px 0 rgba(4, 6, 12, 0.6);
  transform: rotate(-1.4deg);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.cast-code:hover { transform: rotate(-1.4deg) scale(1.05); }
.cast-vis {
  flex: none;
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.22em;
  color: var(--dim);
}

/* --- the table rail: the pre-game LINEUP --- */
.cast-rail {
  flex: none;
  display: flex; align-items: stretch;
  height: 96px;
  background: var(--ink);
  border-bottom: 2.5px solid var(--ink);
  overflow: hidden;
}
.cs-seat {
  position: relative;
  flex: 1 1 0; min-width: 0;
  margin-left: -13px;
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  background:
    linear-gradient(200deg, color-mix(in srgb, var(--pc) 26%, var(--night)) 0%, var(--ink-2) 78%);
  overflow: hidden;
  transition: flex-grow 0.45s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.cs-seat:first-child { margin-left: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.cs-seat:last-child { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); }
.cs-you { flex-grow: 1.7; }
.cs-art { position: absolute; inset: 0; z-index: 0; }
.cs-art .portrait-photo, .cs-art .asset-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-art img { object-fit: cover; object-position: 50% 18%; }
.cs-picked .cs-art img { animation: ken-burns 18s ease-in-out infinite alternate; }
.cs-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(7, 10, 20, 0.15) 0%, rgba(7, 10, 20, 0.82) 78%);
}
.cs-glow {
  position: absolute; inset: 0; z-index: 2;
  box-shadow:
    inset 0 3px 0 var(--pc),
    inset 0 0 0 2px color-mix(in srgb, var(--pc) 75%, transparent),
    inset 0 0 30px color-mix(in srgb, var(--pc) 38%, transparent);
  animation: lu-breathe 2s ease-in-out infinite;
  pointer-events: none;
}
.cs-tags { position: absolute; top: 6px; left: 22px; z-index: 3; display: flex; gap: 5px; }
.cs-tag {
  font-family: var(--font-display);
  font-size: 0.56rem; letter-spacing: 0.12em; font-style: normal;
  color: #fff;
  background: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 3px;
  padding: 1px 6px 2px;
  transform: skewX(-8deg);
}
.cs-tag--you { color: var(--ink); background: var(--marquee); border-color: var(--ink); }
.cs-body {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 6px 16px 8px 26px;
  min-width: 0;
}
.cs-name {
  font-family: var(--font-display);
  font-size: 1.04rem; letter-spacing: 0.05em; line-height: 1;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(4, 6, 12, 0.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-status {
  font-size: 0.55rem; font-weight: 900; letter-spacing: 0.16em;
  color: color-mix(in srgb, var(--hc, var(--pc)) 80%, #fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-status--waiting { color: var(--dim); animation: chip-glint 1.5s ease-in-out infinite; }
.cs-pips { display: flex; gap: 4px; margin-top: 3px; }
.cs-pips .check-seg {
  flex: none;
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 0.62rem; font-weight: 900;
  color: var(--st);
  background: rgba(7, 10, 20, 0.72);
  border: 1.5px solid color-mix(in srgb, var(--st) 45%, var(--ink));
  border-radius: 3px;
  padding: 0 4px;
  transform: skewX(-8deg);
}
.cs-pips .check-seg .ico { width: 9px; height: 9px; }
.cs-pips .check-seg b { color: #fff; }
.cs-open { opacity: 0.5; }
.cs-open .cs-body { justify-content: center; }
.cs-name--open { color: var(--dimmer); font-size: 0.86rem; letter-spacing: 0.14em; }
.cs-open .cs-status { color: var(--dimmer); }
.cs-lost { filter: saturate(0.3); }
.cs-lost .cs-status { color: var(--danger); animation: signal-blink 1s steps(2) infinite; }

/* hot-seat extras: names edit in place, seats add and drop */
.cs-seat[data-slot] { cursor: pointer; }
.cs-name-input {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.02rem; letter-spacing: 0.05em; line-height: 1.15;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(4, 6, 12, 0.75);
  background: transparent;
  border: none; border-bottom: 2px dashed transparent;
  padding: 0; margin: 0;
  min-width: 0;
}
.cs-name-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.cs-name-input:hover { border-bottom-color: color-mix(in srgb, var(--pc) 55%, transparent); }
.cs-name-input:focus { outline: none; border-bottom-color: var(--pc); }
.cs-remove {
  position: absolute; top: 5px; right: 18px; z-index: 4;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  font-size: 0.66rem; font-weight: 900; line-height: 1;
  color: var(--dim);
  background: rgba(7, 10, 20, 0.75);
  border: 1.5px solid var(--line-soft);
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cs-remove:hover { color: var(--danger); border-color: var(--danger); }
.cs-add {
  background: transparent;
  border: none;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s ease;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pc) 35%, transparent);
}
.cs-add:hover { opacity: 1; }
.cs-add .cs-body { justify-content: center; align-items: flex-start; }
.cs-add .cs-name--open { color: var(--pc); }

/* --- the stage: spotlight + wall --- */
.cast-stage {
  flex: 1;
  display: grid; grid-template-columns: minmax(340px, 41%) 1fr;
  min-height: 0;
}

.cast-spot { position: relative; min-height: 0; border-right: 2.5px solid var(--ink); overflow: hidden; }
.spot-inner { position: absolute; inset: 0; overflow: hidden; }
.spot-rays {
  position: absolute; left: 62%; top: 55%;
  width: 180vmax; height: 180vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--hc) 10%, transparent) 0deg 7deg, transparent 7deg 26deg);
  animation: rays-spin 40s linear infinite;
  pointer-events: none;
}
.spot-art {
  position: absolute; right: -6%; bottom: -4%; z-index: 1;
  width: min(62%, 380px); aspect-ratio: 3 / 4;
  filter: drop-shadow(0 0 34px color-mix(in srgb, var(--hc) 45%, transparent)) drop-shadow(6px 8px 0 rgba(4, 6, 12, 0.5));
  animation: spot-slam 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
}
.spot-art .portrait-photo, .spot-art .asset-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.spot-art img { object-fit: cover; object-position: 50% 12%; border-radius: 14px; border: 3px solid var(--ink); }
@keyframes spot-slam { from { transform: scale(1.25) translateX(6%); opacity: 0; } }
.spot-body {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
  padding: 22px 30% 22px 26px;
  min-width: 0;
}
.spot-kicker {
  font-size: 0.58rem; font-weight: 900; letter-spacing: 0.26em;
  color: var(--marquee);
}
.spot-inner--preview .spot-kicker { color: var(--dim); }
.spot-name {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.2vw, 3.6rem); line-height: 0.95; letter-spacing: 0.03em;
  color: #fff;
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 4px 5px 0 rgba(4, 6, 12, 0.65), 0 0 30px color-mix(in srgb, var(--hc) 40%, transparent);
  transform: skewX(-5deg);
}
.spot-arch {
  display: inline-flex; align-items: center; gap: 7px;
  width: fit-content;
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.18em;
  color: var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--hc) 88%, #fff), var(--hc));
  border: 2px solid var(--ink);
  border-radius: 5px;
  padding: 2px 11px 3px;
  transform: skewX(-8deg);
  box-shadow: 2.5px 3px 0 rgba(4, 6, 12, 0.55);
}
.spot-arch .ico { width: 13px; height: 13px; }
.spot-tagline {
  font-size: 0.76rem; font-style: italic; line-height: 1.45;
  color: var(--dim);
  max-width: 34ch;
}
.spot-stats { display: grid; gap: 7px; margin-top: 6px; }
.spot-stat { display: flex; align-items: center; gap: 9px; }
.spot-stat-ico { width: 15px; height: 15px; flex: none; color: var(--st); filter: drop-shadow(1px 1px 0 rgba(4, 6, 12, 0.7)); }
.spot-stat-name {
  width: 96px; flex: none;
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.18em;
  color: var(--dim);
}
.spot-stat-blocks { display: flex; gap: 4px; flex: none; }
.spot-stat-blocks i {
  width: 26px; height: 13px;
  background: rgba(7, 10, 20, 0.7);
  border: 1.5px solid var(--line-soft);
  border-radius: 3px;
  transform: skewX(-10deg);
}
.spot-stat-blocks i.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--st) 80%, #fff), var(--st));
  border-color: var(--ink);
  box-shadow: 0 0 9px color-mix(in srgb, var(--st) 55%, transparent);
}
.spot-stat-val {
  font-family: var(--font-display);
  font-size: 1.25rem; line-height: 1;
  color: #fff;
  text-shadow: 1.5px 1.5px 0 rgba(4, 6, 12, 0.8);
  min-width: 18px; text-align: center;
}
.spot-stat .forge-step { width: 30px; height: 26px; flex: none; }
/* fitting mode: the tailor needs elbow room — the bust steps aside */
.spot-inner:has(.forge-step) .spot-art { width: min(44%, 260px); right: -8%; opacity: 0.92; }
.spot-inner:has(.forge-step) .spot-body { padding-right: 26%; }
.spot-meter {
  display: flex; align-items: center; gap: 10px;
  width: fit-content;
  padding: 6px 12px;
  background: rgba(7, 10, 20, 0.65);
  border: 2px dashed color-mix(in srgb, var(--marquee) 55%, var(--ink));
  border-radius: 8px;
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.16em;
  color: var(--marquee);
}
.spot-meter--due { border-color: var(--marquee); animation: chip-glint 1.6s ease-in-out infinite; }
.spot-meter-pips { display: flex; gap: 3px; }
.spot-meter-pips i {
  width: 9px; height: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid var(--line-soft);
  border-radius: 2px;
  transform: rotate(45deg) scale(0.82);
}
.spot-meter-pips i.on { background: var(--marquee); border-color: var(--ink); }
.spot-inner--preview .spot-art { filter: saturate(0.75) drop-shadow(6px 8px 0 rgba(4, 6, 12, 0.5)); }
.spot-inner--empty { display: grid; place-items: center; text-align: center; }
.spot-inner--empty > * { position: relative; z-index: 2; }
.spot-q {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: clamp(9rem, 24vw, 15rem);
  color: color-mix(in srgb, var(--hc) 14%, transparent);
  -webkit-text-stroke: 2px color-mix(in srgb, var(--hc) 30%, transparent);
  transform: rotate(-6deg);
}
.spot-name--empty { font-size: clamp(2rem, 3.6vw, 3rem); margin: 6px 0; }
.spot-inner--empty .spot-tagline { margin: 0 auto; }

/* --- the roster wall --- */
.cast-wall {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0; min-width: 0;
  padding: 14px 18px 16px;
}
.cast-wall-kicker {
  flex: none;
  font-size: 0.58rem; font-weight: 900; letter-spacing: 0.26em;
  color: var(--dimmer);
}
.cast-roster {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
  gap: 12px;
  overflow: auto;
}
.cs-tile {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  background:
    linear-gradient(195deg, color-mix(in srgb, var(--hc) 16%, var(--night)) 0%, var(--ink-2) 82%);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow-pop), inset 0 0 0 1.5px color-mix(in srgb, var(--hc) 30%, transparent);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.cs-tile:hover {
  transform: translateY(-4px) rotate(-0.5deg);
  box-shadow: 4px 7px 0 rgba(4, 6, 12, 0.65), 0 0 22px color-mix(in srgb, var(--hc) 35%, transparent);
}
.cs-tile:active { transform: translateY(-1px) scale(0.99); }
.cs-tile-art { position: relative; z-index: 0; flex: 1; min-height: 64px; overflow: hidden; }
.cs-tile-art .portrait-photo, .cs-tile-art .asset-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.cs-tile-art img { object-fit: cover; object-position: 50% 14%; transition: transform 0.4s ease; }
.cs-tile:hover .cs-tile-art img { transform: scale(1.07); }
.cs-tile-art::after {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(180deg, transparent 46%, rgba(7, 10, 20, 0.78) 96%);
}
.cs-tile-plate { flex: none; padding: 0 10px 2px; text-align: left; margin-top: -20px; position: relative; z-index: 3; }
.cs-tile-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem; letter-spacing: 0.05em; line-height: 1;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(4, 6, 12, 0.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-tile-arch {
  display: block;
  font-size: 0.52rem; font-weight: 900; letter-spacing: 0.18em;
  color: color-mix(in srgb, var(--hc) 85%, #fff);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-tile-stats { flex: none; display: flex; gap: 4px; padding: 5px 10px 9px; }
.cs-tile-stats .check-seg {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  font-size: 0.62rem; font-weight: 900;
  color: var(--st);
  background: rgba(7, 10, 20, 0.7);
  border: 1.5px solid color-mix(in srgb, var(--st) 40%, var(--ink));
  border-radius: 3px;
  padding: 1px 0 2px;
  transform: skewX(-8deg);
}
.cs-tile-stats .check-seg .ico { width: 9px; height: 9px; }
.cs-tile-stats .check-seg b { color: #fff; }
.cs-tile--mine {
  border-color: var(--marquee);
  box-shadow: 4px 5px 0 rgba(4, 6, 12, 0.6), 0 0 26px rgba(255, 197, 61, 0.35), inset 0 0 0 1.5px rgba(255, 197, 61, 0.5);
}
.cs-tile-claim {
  position: absolute; top: 8px; left: -6px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display);
  font-size: 0.62rem; letter-spacing: 0.14em;
  color: var(--ink);
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 1px 8px 2px;
  transform: rotate(-3deg);
  box-shadow: 2px 2.5px 0 rgba(4, 6, 12, 0.55);
}
.cs-tile-claim .ico { width: 10px; height: 10px; }
.cs-tile-picks { position: absolute; top: 7px; right: 7px; z-index: 2; display: flex; gap: 4px; }
.cs-tile-picks i {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  font-size: 0.6rem; font-weight: 900; font-style: normal;
  color: #fff;
  background: var(--pc);
  border: 2px solid var(--ink);
  border-radius: 5px;
  transform: rotate(4deg);
  box-shadow: 1.5px 2px 0 rgba(4, 6, 12, 0.5);
}
/* THE ORIGINAL: the tailor's banner spans the wall's full width */
.cs-tile--forge {
  grid-column: 1 / -1;
  flex-direction: row; align-items: stretch;
  min-height: 66px; max-height: 84px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--hc) 60%, var(--ink));
}
.cs-tile--forge.cs-tile--mine { border-color: var(--marquee); border-style: solid; }
.cs-tile--forge .cs-tile-art { flex: 0 0 110px; min-height: 0; }
.cs-tile--forge .cs-tile-art::after { background: linear-gradient(90deg, transparent 30%, var(--ink-2) 99%); }
.cs-tile--forge .cs-tile-plate { margin: auto 0; padding: 0 4px; }
.cs-tile--forge .cs-tile-stats { margin: auto 10px auto auto; padding: 0; align-items: center; max-width: 220px; flex: 1; }

/* --- the footer: verdicts + the start slab --- */
.cast-foot {
  flex: none;
  display: flex; align-items: center; gap: 16px;
  padding: 11px 18px calc(11px + env(safe-area-inset-bottom));
  background: rgba(7, 10, 20, 0.6);
  border-top: 2.5px solid var(--ink);
}
.cast-status {
  flex: 1; min-width: 0;
  font-size: 0.66rem; font-weight: 900; letter-spacing: 0.14em; line-height: 1.5;
  color: var(--dim);
}
.cast-status b { color: var(--pc, var(--marquee)); }
.cast-start { flex: none; }

/* --- responsive: the wall goes pocket-size --- */
@media (max-width: 1120px) {
  .cast-stage { grid-template-columns: minmax(300px, 44%) 1fr; }
  .spot-body { padding-right: 34%; }
}
@media (max-width: 900px) {
  .cast-bar { padding: 8px 10px; gap: 8px; }
  .cast-vis { display: none; }
  .cast-rail { height: 78px; }
  .cs-body { padding: 4px 10px 6px 20px; }
  .cs-name { font-size: 0.85rem; }
  .cs-pips { display: none; }
  .cs-tags { left: 16px; }
  .cs-seat:not(.cs-you) .cs-status { font-size: 0.48rem; }
  /* stage stacks: spotlight banner on top, roster carousel beneath */
  .cast-stage { grid-template-columns: 1fr; grid-template-rows: minmax(200px, 34%) 1fr; }
  /* the tailor's room needs the extra rows for its steppers */
  .cast-stage:has(.forge-step) { grid-template-rows: minmax(258px, 44%) 1fr; }
  .spot-body { overflow-y: auto; }
  .cast-spot { border-right: none; border-bottom: 2.5px solid var(--ink); }
  .spot-body { padding: 14px 42% 14px 16px; gap: 6px; justify-content: center; }
  .spot-name { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .spot-tagline { display: none; }
  .spot-stats { gap: 5px; }
  .spot-stat-name { display: none; }
  .spot-stat-blocks i { width: 18px; height: 11px; }
  .spot-art { width: min(46%, 230px); right: -4%; bottom: -3%; }
  .cast-wall { padding: 10px 12px 12px; }
  .cast-roster {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: minmax(150px, 44vw);
    grid-template-rows: 1fr;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .cs-tile { scroll-snap-align: start; }
  .cs-tile--forge {
    grid-column: auto;
    flex-direction: column;
    min-height: 0; max-height: none;
  }
  .cs-tile--forge .cs-tile-art { flex: 1; }
  .cs-tile--forge .cs-tile-plate { margin-top: -20px; padding: 0 10px 2px; }
  .cs-tile--forge .cs-tile-stats { margin: 0; padding: 5px 10px 9px; max-width: none; }
  .cast-foot { flex-wrap: wrap; gap: 8px; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); }
  .cast-status { flex: 1 1 100%; text-align: center; font-size: 0.56rem; }
  .cast-start { flex: 1; justify-content: center; }
}
@media (max-width: 900px) and (max-height: 750px) {
  .cast-rail { height: 64px; }
  .cast-stage { grid-template-rows: minmax(170px, 32%) 1fr; }
}

/* --- identity & presence --- */
.you-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.62rem; letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--marquee);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 0 6px 1px;
  margin-left: 7px;
  transform: rotate(-2deg);
  vertical-align: middle;
}
.chip-lost, .player-lost { filter: saturate(0.35); }
.chip-out, .player-out { opacity: 0.45; filter: grayscale(0.9); }
.chip-signal .ico { width: 11px; height: 11px; color: var(--danger); animation: signal-blink 1s steps(2) infinite; }
@keyframes signal-blink { 50% { opacity: 0.15; } }
.signal-lost {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
  padding: 7px 10px;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.18em;
  color: var(--danger);
  background:
    repeating-linear-gradient(-45deg, rgba(229, 72, 77, 0.12) 0 8px, transparent 8px 16px),
    rgba(11, 15, 28, 0.75);
  border: 2px dashed color-mix(in srgb, var(--danger) 55%, var(--ink));
  border-radius: 9px;
}
.signal-lost .ico { width: 12px; height: 12px; animation: signal-blink 1s steps(2) infinite; }
.btn-remove-cape { margin-left: auto; color: var(--danger); }
.btn-forfeit { margin-top: 8px; width: 100%; justify-content: center; color: var(--dim); }
.out-stamp { background: var(--night-2); color: var(--dim); }

/* the connection strip over the board */
.net-banner {
  position: absolute; top: 66px; left: 50%;
  transform: translateX(-50%) rotate(-0.6deg);
  z-index: 60;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em;
  color: #ffe9ea;
  background:
    repeating-linear-gradient(-45deg, rgba(229, 72, 77, 0.16) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #2a1220, #1c0d18);
  border: 2.5px solid var(--danger);
  border-radius: 11px;
  box-shadow: 3px 4px 0 rgba(4, 6, 12, 0.65), 0 0 24px rgba(229, 72, 77, 0.25);
  animation: banner-drop 0.35s ease backwards;
}
@keyframes banner-drop { from { transform: translateX(-50%) translateY(-14px) rotate(-0.6deg); opacity: 0; } }
.net-banner b { color: var(--danger); letter-spacing: 0.2em; }
.netb-dot {
  width: 10px; height: 10px;
  background: var(--danger);
  border: 2px solid var(--ink);
  border-radius: 3px;
  transform: rotate(45deg);
  animation: signal-blink 1s steps(2) infinite;
}
.netb-remove { color: #ffd7d9; border-color: var(--danger); }

/* --- spectating: the dock stands down --- */
.dock-waiting { display: flex; align-items: center; gap: 9px; letter-spacing: 0.12em; }
.wait-dot {
  width: 9px; height: 9px; flex: none;
  background: var(--pc, var(--marquee));
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  transform: rotate(45deg);
  animation: wait-pulse 1.1s ease-in-out infinite;
}
@keyframes wait-pulse { 50% { transform: rotate(45deg) scale(0.55); opacity: 0.5; } }
.dock-spectating .btn[disabled] { opacity: 0.42; }

/* showdown: the opponent is choosing */
.sdx-waiting-cmd .wait-dots b {
  display: inline-block;
  animation: wait-dots 1.2s ease-in-out infinite;
}
.sdx-waiting-cmd .wait-dots b:nth-child(2) { animation-delay: 0.15s; }
.sdx-waiting-cmd .wait-dots b:nth-child(3) { animation-delay: 0.3s; }
@keyframes wait-dots { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* your-turn splash gets an extra kick online */
.splash-yours .splash-card { animation-duration: 0.45s; }
.splash-yours .splash-kicker { color: var(--marquee); }

@media (max-width: 860px) {
  .wire-doors { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .door-sub { min-height: 0; }
}
@media (max-width: 640px) {
  .wire-name input { width: min(280px, 82vw); }
  .net-banner { top: 108px; width: max-content; max-width: 94vw; flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   CUSTOM CAPES — the tailor's bench (point-buy builder)
   ============================================================ */

/* stat readout pinned under every claimed seat — the lobby metagame */
.slot-stats {
  display: flex;
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 7px;
  overflow: hidden;
  margin-top: 2px;
}
.slot-stats .check-seg { gap: 3px; padding: 2.5px 0; }
.slot-stats .check-seg .ico { width: 9px; height: 9px; }
.slot-stats .check-seg b { font-size: 0.82rem; text-shadow: 1px 1px 0 rgba(4, 6, 12, 0.6); }

/* the forge card: hcard anatomy, unfolds into the allocator when claimed */
.hcard-forge { cursor: pointer; }
.hcard-forge .hcard-art { position: relative; }
.hcard-forge .hcard-art::after {
  /* tailor's chalk marks — this cape is still being cut */
  content: '';
  position: absolute; inset: 6px;
  border: 2px dashed rgba(255, 255, 255, 0.35);
  border-radius: 7px;
  pointer-events: none;
}
.forge-cta {
  display: block;
  margin: 0 5.5px 5.5px;
  padding: 6px 0 7px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.86rem; letter-spacing: 0.2em;
  color: var(--ink);
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  border-top: 2.5px solid var(--ink);
  border-radius: 0 0 9px 9px;
}
.forge-open { cursor: default; }
.forge-open:hover { transform: none; }

/* the allocator bench */
.forge-bench {
  display: flex; flex-direction: column; gap: 5px;
  margin: 0 5.5px 5.5px;
  padding: 8px 9px 9px;
  background: linear-gradient(180deg, #10162c, var(--ink));
  border-top: 2.5px solid var(--ink);
  border-radius: 0 0 9px 9px;
}
.forge-meter {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--line-soft);
}
.forge-pips { display: flex; gap: 3px; flex: 1; }
.forge-pips i {
  flex: 1; height: 8px; max-width: 14px;
  background: var(--night-2);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  transform: skewX(-12deg);
}
.forge-pips i.pip-spent {
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  box-shadow: 0 0 6px rgba(255, 197, 61, 0.45);
}
.forge-left {
  font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.12em;
  color: var(--ok);
  white-space: nowrap;
}
.forge-meter--due .forge-left { color: var(--marquee); animation: nudge 1.2s ease-in-out infinite; }
.forge-row {
  display: flex; align-items: center; gap: 7px;
}
.forge-row-ico { width: 13px; height: 13px; color: var(--st); flex: none; }
.forge-row-name {
  flex: 1;
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--st) 70%, #fff);
}
.forge-step {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.15rem; line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, var(--night-2), var(--night));
  border: 2px solid var(--ink);
  outline: 1.5px solid var(--line-soft);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.12s ease, outline-color 0.12s ease;
}
.forge-step:hover:not(:disabled) { transform: translateY(-1.5px); outline-color: var(--st); }
.forge-step:active:not(:disabled) { transform: translateY(1px); }
.forge-step:disabled { opacity: 0.28; cursor: default; }
.forge-val {
  width: 26px; flex: none;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1;
  color: #fff;
  text-shadow: 2px 2px 0 rgba(4, 6, 12, 0.6), 0 0 12px color-mix(in srgb, var(--st) 55%, transparent);
}

/* ---------- live table activity: "in the satchel" ---------- */
/* the bubble over a rival's board token */
.pawn-busy {
  position: absolute;
  top: -46px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  z-index: 6;
  display: flex; align-items: center; gap: 4px;
  padding: 3.5px 9px 4px;
  background: linear-gradient(180deg, #fbf5e6, var(--paper));
  color: var(--ink-on-paper);
  border: 2px solid var(--ink);
  border-radius: 9px;
  box-shadow: 2px 3px 0 rgba(4, 6, 12, 0.55);
  pointer-events: none;
  animation: busy-bob 1.6s ease-in-out infinite;
}
.pawn-busy::after {
  /* thought-bubble tail: a small square diamond under the chip */
  content: '';
  position: absolute; bottom: -7px; left: 50%;
  width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--paper);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.pawn-busy .ico { width: 13px; height: 13px; color: #9a7414; }
.busy-dots { display: inline-flex; font-style: normal; }
.busy-dots b {
  font-family: var(--font-display);
  font-size: 0.9rem; line-height: 0.6;
  animation: wait-dots 1.2s ease-in-out infinite;
}
.busy-dots b:nth-child(2) { animation-delay: 0.15s; }
.busy-dots b:nth-child(3) { animation-delay: 0.3s; }
@keyframes busy-bob { 50% { transform: translateX(-50%) rotate(-4deg) translateY(-4px); } }

/* the dossier strip */
.pcard-busy {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.18em;
  color: var(--marquee);
  background: rgba(255, 197, 61, 0.08);
  border: 2px dashed color-mix(in srgb, var(--marquee) 45%, var(--ink));
  border-radius: 9px;
}
.pcard-busy .ico { width: 12px; height: 12px; }
.pcard-busy .busy-dots b { color: var(--marquee); }

/* the mobile roster chip: pulse while they rummage */
.chip-busy { animation: chip-rummage 1.4s ease-in-out infinite; }
@keyframes chip-rummage {
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--marquee) 55%, transparent); }
}

/* ---------- focus mode toggle ---------- */
.btn-focus.focus-on {
  color: var(--ink);
  background: linear-gradient(180deg, #ffd76b, var(--marquee));
  border-color: var(--ink);
  box-shadow: 2px 2px 0 rgba(4, 6, 12, 0.55), 0 0 14px rgba(255, 197, 61, 0.35);
}
.btn-focus.focus-on .ico { animation: focus-blink 2.4s ease-in-out infinite; }
@keyframes focus-blink { 50% { opacity: 0.55; } }

/* ---------- touch ergonomics ---------- */
@media (pointer: coarse) {
  button, .hero-pick, .lu-panel { touch-action: manipulation; }
  .btn { min-height: 48px; }
  .forge-step { width: 38px; height: 38px; }
  .btn-small { min-height: 40px; }
  .hero-pick { min-height: 40px; padding: 8px 15px 8px 11px; }
  .pip { width: 22px; height: 22px; }
  .roster-remove { padding: 10px 12px; }
}

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