/* ============================================================
   RINGSIDE LEGENDS - printed, not rendered.
   Hot light on black. Card = portrait. Cartoonishly serious.
   ============================================================ */
@import url("../assets/fonts/fonts.css");

:root {
  --void: #0B0B0D;
  --tungsten: #FFF4E0;
  --bone: #E8E1D4;
  --rope: #C0302A;
  --royal: #2A1B4A;
  --brass: #C9A227;
  --magenta: #FF2E8A;
  --ink: #17120e;
  --kraft: #8a6a3c;
  --silver: #9aa1a8;
  --cw: 190px;
  --hand-gap: 0.55;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--void); }
body {
  font-family: "Barlow Condensed", system-ui, sans-serif;
  color: var(--bone);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
h1, h2, h3 { font-family: "Anton", "Arial Narrow", sans-serif; font-weight: 400; margin: 0; }
.num { font-family: "Roboto Slab", serif; font-weight: 900; font-variant-numeric: tabular-nums; }
button { font-family: inherit; cursor: pointer; }

/* ---------------- stage ---------------- */
#app { position: fixed; inset: 0; }
#arena {
  position: absolute; inset: 0;
  background: #050506 url("../assets/arena.webp") center/cover no-repeat;
  filter: contrast(1.05) saturate(1.02);
}
#arena::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 18%, rgba(255,244,224,0.10), rgba(0,0,0,0) 42%),
              radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,0.85), rgba(0,0,0,0.1) 60%);
}
#phaser { position: absolute; inset: 0; }
#phaser canvas { display: block; }

/* ---------------- HUD ---------------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

#matchbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 12px 6px;
  font-family: "Barlow Condensed"; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; font-size: 12px;
  color: var(--bone);
  background: linear-gradient(rgba(11,11,13,.82), rgba(11,11,13,0));
}
#matchbar .mb-type { color: var(--brass); }
#matchbar .mb-sep { opacity: .4; }
#pausebtn { position: absolute; right: 8px; top: 8px; }
.mb-btn {
  border: 2px solid #4a4237; background: #14110f; color: var(--bone);
  padding: 4px 10px; font-family: "Barlow Condensed"; font-weight: 700; letter-spacing: .16em;
  font-size: 12px; text-transform: uppercase; border-radius: 3px;
}
.mb-btn:active { transform: translateY(1px); }

/* plaques */
#plaques { position: absolute; top: 34px; left: 0; right: 0; }
.plaque {
  position: absolute; width: 40vw; max-width: 250px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(20,17,15,.92), rgba(11,11,13,.8));
  border: 2px solid #37302a; border-radius: 4px; padding: 6px 8px 7px;
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
}
.plaque.is-active { border-color: var(--brass); box-shadow: 0 0 0 1px rgba(201,162,39,.4), 0 6px 18px rgba(0,0,0,.6); }
.plaque .pl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.plaque .pl-name { font-family: "Anton"; font-size: 14px; letter-spacing: .02em; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plaque .pl-tag { font-size: 10px; letter-spacing: .2em; color: var(--brass); font-weight: 700; }
.plaque .pl-stamina { margin-top: 4px; height: 11px; background: #241f1b; border: 1px solid #000; position: relative; overflow: hidden; }
.plaque .pl-stamina i { position: absolute; inset: 0; right: auto; width: 100%; background: linear-gradient(180deg, #e05a3a, var(--rope)); transition: width .45s cubic-bezier(.2,.8,.2,1); }
.plaque .pl-stamina.low i { animation: pulseLow .7s infinite; }
@keyframes pulseLow { 50% { filter: brightness(1.6); } }
.plaque .pl-num { position: absolute; right: 4px; top: 2px; font-size: 11px; color: var(--tungsten); text-shadow: 0 1px 2px #000; }
.plaque .pl-vit { position: absolute; left: 4px; top: 1px; font-family: "Barlow Condensed"; font-weight: 800; letter-spacing: .2em; font-size: 8px; color: rgba(255,244,224,.72); text-shadow: 0 1px 2px #000; }
.plaque .pl-mom { display: flex; gap: 3px; margin-top: 5px; align-items: center; }
.mpip { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #4a4237; background: #14110f; }
.mpip.on { background: radial-gradient(circle at 35% 32%, #ffe6a0, var(--brass)); border-color: #6b5a1e; }
.plaque .pl-climb { margin-top: 5px; height: 7px; background: #241f1b; border: 1px solid #000; position: relative; }
.plaque .pl-climb i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #f0d67a, var(--brass)); width: 0; transition: width .4s; }
.plaque .pl-label { font-size: 9px; letter-spacing: .22em; color: #9c8f79; }

/* stamina meter: builds on offence, drains when hit */
.plaque .pl-stam { margin-top: 5px; height: 13px; background: #241f1b; border: 1px solid #000; position: relative; overflow: hidden; }
.plaque .pl-stam i { position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(180deg, #6fb7ff, #2f6fd0); transition: width .35s ease; }
.plaque .pl-stam.full { box-shadow: 0 0 0 1px var(--brass), 0 0 10px rgba(201,162,39,.7); }
.plaque .pl-stam.full i { background: linear-gradient(180deg, #ffe9a8, var(--brass)); animation: pulseCharged 1.1s infinite; }
.plaque .pl-stam.gassed i { background: linear-gradient(180deg, #8a4a38, #3a1c14); }
.plaque .pl-stam.gassed { box-shadow: 0 0 0 1px rgba(192,48,42,.7); }
.plaque .pl-stam-tag { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: grid; place-items: center; font-family: "Barlow Condensed"; font-weight: 800; letter-spacing: .2em; font-size: 9px; color: var(--tungsten); text-shadow: 0 1px 2px #000; }
.plaque .pl-stam.full .pl-stam-tag, .plaque .pl-stam.gassed .pl-stam-tag { color: #201a06; }
.plaque .pl-lbl { font-family: "Barlow Condensed"; font-weight: 700; letter-spacing: .22em; font-size: 8px; color: #9c8f79; margin-top: 3px; }
@keyframes pulseCharged { 50% { filter: brightness(1.6); } }

#charg-banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.8);
  z-index: 120; font-family: "Anton"; font-size: clamp(30px, 7vw, 64px); letter-spacing: .1em;
  color: var(--brass); text-shadow: 3px 3px 0 #000, 0 0 26px rgba(201,162,39,.85);
  opacity: 0; pointer-events: none; white-space: nowrap;
}
#charg-banner.gassed { color: var(--rope); text-shadow: 3px 3px 0 #000, 0 0 22px rgba(192,48,42,.8); }
#charg-banner.on { animation: chargePop 1.1s ease-out; }
@keyframes chargePop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  68% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16); }
}

.timerbar { height: 10px; width: 100%; max-width: 360px; margin: 10px auto 0; background: #241f1b; border: 2px solid #000; overflow: hidden; }
.timerbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--rope), #ff7a4a); }

#tale { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); text-align: center; }
#tale .tale-v { font-family: "Barlow Condensed"; font-weight: 800; letter-spacing: .3em; font-size: 11px; color: #b9ad96; text-transform: uppercase; }

/* ---------------- ticker ---------------- */
#ticker {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0; width: min(92vw, 760px);
  top: auto; margin-bottom: calc(var(--hand-h, 210px) + 34px);
  text-align: center; pointer-events: none;
}
#ticker .tk {
  display: inline-block; padding: 4px 14px;
  background: linear-gradient(180deg, rgba(11,11,13,.0), rgba(11,11,13,.72));
  font-family: "Barlow Condensed"; font-weight: 700; letter-spacing: .1em;
  font-size: 15px; color: var(--tungsten); text-shadow: 0 2px 6px #000;
}
#ticker .tk b { color: var(--brass); }

/* ---------------- hand ---------------- */
#handwrap { position: absolute; left: 0; right: 0; bottom: 0; height: var(--hand-h, 210px); }
#hand {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  display: flex; justify-content: center; align-items: flex-end;
}
#hand .slot { position: relative; transition: transform .18s ease; }
#hand .card { --cw: var(--hand-cw, 150px); }
#hand .slot:hover { z-index: 50 !important; }
#hand .slot.is-target .card { outline: 3px solid var(--magenta); outline-offset: 2px; }
#hand .card.is-mini { --cw: 72px; }
#hand .hand-bench {
  position: absolute; left: 4px; bottom: 6px; z-index: 3;
  display: flex; align-items: flex-end; gap: 2px; max-width: 44%;
  padding: 3px 4px 3px 8px; border-left: 3px solid var(--royal);
  background: linear-gradient(90deg, rgba(42,27,74,.6), rgba(11,11,13,0));
  transform: rotate(-7deg); transform-origin: left bottom;
}
#hand .hand-bench .card { opacity: .6; filter: grayscale(.5) brightness(.7); }
#hand .hand-bench .bench-label {
  position: absolute; left: 8px; top: -15px; font-family: "Barlow Condensed"; font-weight: 800;
  letter-spacing: .16em; font-size: 10px; color: var(--brass); text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}
#hand .hand-hidden {
  width: 100%; text-align: center; align-self: center;
  font-family: "Barlow Condensed"; font-weight: 800; letter-spacing: .3em;
  color: #8f8677; text-transform: uppercase; font-size: 13px;
}

#controls { position: absolute; right: 10px; left: auto; transform: none; bottom: calc(var(--hand-h, 210px) - 6px); display: flex; gap: 8px; z-index: 60; }
.ctl {
  border: 2px solid #6b5a1e; background: linear-gradient(180deg, #2a2418, #14110f);
  color: var(--tungsten); font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  font-size: 12px; padding: 6px 12px; border-radius: 3px;
}
.ctl:disabled { opacity: .4; }
.ctl.primary { border-color: var(--rope); background: linear-gradient(180deg, #3a1613, #1b0d0b); }

/* ---------------- prompts / overlays ---------------- */
.overlay { position: absolute; inset: 0; display: none; place-items: center; z-index: 200; }
.overlay.show { display: grid; }
.scrim { position: absolute; inset: 0; background: rgba(11,11,13,.72); backdrop-filter: none; }
.prompt {
  position: relative; width: min(90vw, 420px); text-align: center;
  background: var(--bone); color: var(--ink); border: 4px solid var(--ink);
  box-shadow: 0 18px 50px rgba(0,0,0,.7), inset 0 0 0 2px rgba(201,162,39,.5);
  padding: 18px 18px 20px;
}
.prompt h2 { font-size: 26px; letter-spacing: .02em; text-transform: uppercase; }
.prompt p { font-family: "Barlow Condensed"; font-weight: 600; letter-spacing: .04em; font-size: 15px; margin: 8px 0 14px; }
.prompt .big { font-family: "Roboto Slab"; font-weight: 900; font-size: 34px; color: var(--rope); }
.prompt .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn {
  border: 3px solid var(--ink); background: #f3ecdd; color: var(--ink);
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 14px;
  padding: 10px 16px;
}
.btn.primary { background: var(--rope); color: var(--tungsten); border-color: #4a0f0b; }
.btn.brass { background: linear-gradient(180deg,#e2c765,#b58f1f); color: var(--ink); border-color: #6b5a1e; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; }

/* kick-out metre */
.meter { height: 22px; background: #241f1b; border: 2px solid var(--ink); position: relative; margin: 12px 0; overflow: hidden; }
.meter .zone { position: absolute; top: 0; bottom: 0; left: 62%; width: 16%; background: rgba(46,160,90,.55); }
.meter .needle { position: absolute; top: -2px; bottom: -2px; width: 6px; background: var(--tungsten); box-shadow: 0 0 8px #fff; }
.prompt .hint { font-size: 12px; letter-spacing: .16em; color: #6b6152; text-transform: uppercase; }

/* serious moment */
#serious { position: absolute; inset: 0; pointer-events: none; z-index: 150; opacity: 0;
  background: radial-gradient(120% 120% at 50% 50%, rgba(42,27,74,0), rgba(42,27,74,.85)); transition: opacity .3s; }
#serious.on { opacity: 1; }
#impact-flash { position: absolute; inset: 0; pointer-events: none; z-index: 160; background: var(--tungsten); opacity: 0; }

/* ---------------- screens ---------------- */
#screens { position: absolute; inset: 0; z-index: 300; display: none; overflow: hidden; }
#screens.show { display: block; }
.screen { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; display: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(42,27,74,.55), rgba(11,11,13,.96) 55%), url("../assets/arena.webp") center/cover fixed; }
.screen.show { display: block; }
.screen::before { content: ""; position: fixed; inset: 0; background: rgba(7,7,9,.55); pointer-events: none; }
.screen-inner { position: relative; max-width: 1100px; margin: 0 auto; padding: 22px 16px 120px; }

.poster-title { text-align: center; }
.poster-title .kicker { font-family: "Barlow Condensed"; font-weight: 700; letter-spacing: .5em; font-size: 12px; color: var(--brass); text-transform: uppercase; }
.poster-title h1 {
  font-size: clamp(40px, 12vw, 96px); line-height: .86; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--bone); transform: skewX(-3deg);
  text-shadow: 3px 3px 0 var(--rope), 6px 6px 0 rgba(0,0,0,.6);
  margin: 4px 0 2px;
}
.poster-title .sub { font-family: "Barlow Condensed"; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; font-size: 13px; color: #cbbfa6; }

.menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 22px; }
.menu-card {
  text-align: left; border: 3px solid var(--ink); background: linear-gradient(180deg, #efe7d6, #d9cfb8);
  color: var(--ink); padding: 14px 16px; position: relative; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.menu-card h3 { font-size: 24px; text-transform: uppercase; letter-spacing: .01em; }
.menu-card p { font-family: "Barlow Condensed"; font-weight: 600; font-size: 14px; margin: 4px 0 0; color: #4b4034; letter-spacing: .04em; }
.menu-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--rope); }
.menu-card.c1::after { background: var(--rope); }
.menu-card.c2::after { background: var(--brass); }
.menu-card.c3::after { background: var(--royal); }
.menu-card.c4::after { background: var(--kraft); }
.menu-card:active { transform: translateY(1px); }
.menu-card .badge { position: absolute; top: 10px; right: 12px; font-family: "Roboto Slab"; font-weight: 900; color: var(--rope); }

.back { display: inline-block; margin-bottom: 6px; }
.screen-title { font-size: clamp(26px, 7vw, 44px); text-transform: uppercase; transform: skewX(-3deg); letter-spacing: .01em; }
.screen-sub { font-family: "Barlow Condensed"; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; font-size: 12px; color: #cbbfa6; margin-bottom: 12px; }

/* binder */
.binder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.filterbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.chip { border: 2px solid #4a4237; background: #14110f; color: #cbbfa6; padding: 4px 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; border-radius: 999px; }
.chip.on { border-color: var(--brass); color: var(--tungsten); background: #241d0f; }

/* roster / fighter tiles */
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; }
.fighter-tile { border: 3px solid var(--ink); background: linear-gradient(180deg,#1a1512,#0e0c0a); overflow: hidden; position: relative; box-shadow: 0 10px 26px rgba(0,0,0,.55); }
.fighter-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center 18%; display: block; filter: contrast(1.05); }
.fighter-tile .ft-body { padding: 10px 12px 12px; border-top: 3px solid var(--rope); }
.fighter-tile h3 { font-size: 22px; text-transform: uppercase; }
.fighter-tile .ft-epi { font-family: "Barlow Condensed"; font-weight: 700; color: var(--brass); letter-spacing: .24em; font-size: 11px; text-transform: uppercase; }
.fighter-tile .ft-stats { display: flex; gap: 12px; margin-top: 8px; font-family: "Roboto Slab"; font-weight: 700; font-size: 12px; color: #d8d0be; }
.fighter-tile .ft-stats span b { color: var(--tungsten); font-size: 15px; }
.fighter-tile.sel { border-color: var(--brass); box-shadow: 0 0 0 2px var(--brass), 0 10px 26px rgba(0,0,0,.6); }
.fighter-tile.locked { filter: grayscale(.9) brightness(.6); }
.fighter-tile.own { outline: 3px solid var(--brass); outline-offset: -3px; }

/* circuit */
.circuit-list { display: grid; gap: 12px; margin-top: 14px; }
.circuit { display: flex; gap: 14px; align-items: center; border: 3px solid var(--ink); background: linear-gradient(180deg,#efe7d6,#d9cfb8); color: var(--ink); padding: 12px 14px; box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.circuit .no { font-family: "Roboto Slab"; font-weight: 900; font-size: 34px; color: var(--rope); min-width: 46px; text-align: center; }
.circuit .ci { flex: 1; min-width: 0; }
.circuit h3 { font-size: 20px; text-transform: uppercase; }
.circuit .venue { font-family: "Barlow Condensed"; font-weight: 700; letter-spacing: .2em; font-size: 11px; text-transform: uppercase; color: #6b6152; }
.circuit .blu { font-family: "Barlow Condensed"; font-weight: 600; font-size: 13px; color: #4b4034; margin-top: 3px; }
.circuit .tag { font-family: "Barlow Condensed"; font-weight: 800; letter-spacing: .16em; font-size: 10px; text-transform: uppercase; background: var(--royal); color: var(--tungsten); padding: 2px 7px; border-radius: 2px; }
.circuit.done { opacity: .62; }
.circuit.locked { filter: grayscale(.4); opacity: .55; }

/* setup */
.setup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.mtype { border: 3px solid var(--ink); background: linear-gradient(180deg,#1a1512,#0e0c0a); padding: 12px; color: var(--bone); box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.mtype h3 { font-size: 18px; text-transform: uppercase; letter-spacing: .02em; }
.mtype p { font-family: "Barlow Condensed"; font-weight: 600; font-size: 12px; color: #b9ad96; letter-spacing: .04em; margin: 4px 0 0; }
.mtype.sel { border-color: var(--brass); }
.deck-tools { margin-top: 16px; }

/* results */
.result-panel { max-width: 640px; margin: 0 auto; text-align: center; background: var(--bone); color: var(--ink); border: 5px solid var(--ink); box-shadow: inset 0 0 0 3px rgba(201,162,39,.5), 0 20px 60px rgba(0,0,0,.7); padding: 22px; }
.result-panel h2 { font-size: clamp(30px, 9vw, 56px); text-transform: uppercase; transform: skewX(-3deg); }
.result-panel .won { color: var(--rope); }
.result-panel .lost { color: #4b4034; }
.rewards { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* leaderboard */
.lb { margin-top: 12px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid #2a2520; font-family: "Barlow Condensed"; font-weight: 600; letter-spacing: .04em; }
.lb-row .rk { font-family: "Roboto Slab"; font-weight: 900; color: var(--brass); min-width: 26px; }
.lb-row a, .lb-row .who { color: var(--tungsten); text-decoration: none; }
.lb-row .val { margin-left: auto; font-family: "Roboto Slab"; font-weight: 900; }
.lb-row.mine { background: rgba(201,162,39,.12); }
.guest { color: #8f8677; font-style: italic; }

.hint-line { font-family: "Barlow Condensed"; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 11px; color: var(--brass); }

/* ---------------- card faces ---------------- */
.card {
  position: relative; width: var(--cw); aspect-ratio: 5 / 7;
  border-radius: 9px; overflow: hidden;
  background: #0d0b12;
  box-shadow: 0 10px 22px rgba(0,0,0,.65);
  transform: skewX(0deg);
  will-change: transform;
}
.card-inner { position: absolute; inset: 0; pointer-events: none; }
.card-edge {
  position: absolute; inset: 0; border-radius: 9px; pointer-events: none; z-index: 8;
  box-shadow: inset 0 0 0 3px var(--edge, #1a1614), inset 0 0 0 5px rgba(255,255,255,.06), inset 0 0 22px rgba(0,0,0,.7);
  border: 3px solid var(--edge, #1a1614);
}
.rarity-common   { --edge: #6b5330; --spine: linear-gradient(180deg,#a5824c,#7a5c2f); }
.rarity-uncommon { --edge: #7d858c; --spine: linear-gradient(180deg,#c9ced4,#8f979e); }
.rarity-rare     { --edge: #8a6f1e; --spine: linear-gradient(180deg,#e8cd6b,#b58f1f); }
.rarity-legendary{ --edge: #b58f1f; --spine: linear-gradient(180deg,#2a1f0c,#c9a227 40%,#7a5a1e); }

.card-art { position: absolute; left: 0; right: 0; top: 0; height: 58%; overflow: hidden; background: #050506; }
.card-art img { width: 112%; height: 118%; object-fit: cover; object-position: center 30%; margin-left: -6%; margin-top: -6%; display: block; filter: contrast(1.08) saturate(1.02); }
.card-art-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%); }
.rarity-legendary .card-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,46,138,.0) 40%, rgba(255,46,138,.28) 50%, rgba(255,244,224,.25) 55%, rgba(255,46,138,0) 66%);
  mix-blend-mode: screen;
}
.card-name {
  position: absolute; left: 8%; right: 6%; top: 46.5%; z-index: 6;
  font-family: "Anton"; font-size: calc(var(--cw) * 0.108); line-height: .96;
  text-transform: uppercase; color: var(--tungsten); letter-spacing: -0.01em;
  transform: skewX(-3deg); text-shadow: 0 2px 4px #000, 0 0 1px #000;
  max-height: 2.05em; overflow: hidden;
}
.card-sub { position: absolute; left: 8%; top: 55%; z-index: 6; font-family: "Barlow Condensed"; font-weight: 800; letter-spacing: .2em; font-size: calc(var(--cw) * 0.06); color: var(--brass); text-transform: uppercase; }
.card-cost {
  position: absolute; left: 4%; top: 3.5%; z-index: 7; width: calc(var(--cw) * 0.24); height: calc(var(--cw) * 0.24);
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffe6a0, #b58f1f 70%); color: #201a06;
  font-family: "Roboto Slab"; font-weight: 900; font-size: calc(var(--cw) * 0.15);
  box-shadow: inset 0 0 0 2px #6b5a1e, 0 2px 6px rgba(0,0,0,.6);
  border: 2px solid #3a2f10;
}
.card-dmg {
  position: absolute; right: 4%; top: 3.5%; z-index: 7; min-width: calc(var(--cw) * 0.24); padding: 2px 5px;
  text-align: center; background: linear-gradient(180deg,#e0492f,#8f1d15); color: var(--tungsten);
  font-family: "Roboto Slab"; font-weight: 900; font-size: calc(var(--cw) * 0.135);
  border: 2px solid #4a0f0b; box-shadow: 0 2px 6px rgba(0,0,0,.6); clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}
.card-dmg-none { background: #2a2520; border-color: #4a4237; color: #8f8677; }
.card-kind {
  position: absolute; left: 6%; right: 6%; top: 63.5%; z-index: 6;
  font-family: "Barlow Condensed"; font-weight: 800; letter-spacing: .26em; text-transform: uppercase;
  font-size: calc(var(--cw) * 0.062); color: #cdbf9f;
}
.card-text {
  position: absolute; left: 6%; right: 6%; top: 67.5%; bottom: 11.5%; z-index: 6;
  background: var(--bone); color: var(--ink); border: 2px solid #1a1614; border-radius: 2px;
  padding: 5px 6px; font-family: "Barlow Condensed"; font-weight: 600; letter-spacing: .02em;
  font-size: calc(var(--cw) * 0.072); line-height: 1.18; overflow: hidden;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.06) 0 1px, rgba(0,0,0,0) 1px 15px);
}
.card-strip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 10.5%; z-index: 7;
  background: var(--spine); display: flex; align-items: center; justify-content: center;
  border-top: 2px solid rgba(0,0,0,.6);
}
.card-rarity { font-family: "Barlow Condensed"; font-weight: 800; letter-spacing: .3em; font-size: calc(var(--cw) * 0.055); color: rgba(10,10,10,.78); text-transform: uppercase; }
.rarity-legendary .card-rarity { color: #ffe9a8; text-shadow: 0 1px 2px #000; }
.rarity-uncommon .card-rarity, .rarity-rare .card-rarity { color: #2a2015; }
.rarity-rare .card-rarity { color: #4a3a08; }
.card-foil {
  position: absolute; inset: 0; z-index: 9; opacity: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, rgba(255,46,138,.25) 50%, transparent 62%);
  background-size: 300% 300%; background-position: 120% 0; transition: opacity .2s;
  mix-blend-mode: screen;
}
.card.is-playable { cursor: pointer; }
.card.is-playable:hover .card-foil { opacity: 1; animation: sweep 1.1s ease forwards; }
@keyframes sweep { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.card.is-playable:hover { transform: translateY(-14px) scale(1.05) rotate(0deg) !important; z-index: 99; }
.card.is-disabled { filter: grayscale(.7) brightness(.62); }
.card.is-dimmed { opacity: .5; }
.card.is-mini { --cw: 90px; }
.card-back .card-inner img { width: 100%; height: 100%; object-fit: cover; }

.tinycard { width: 54px; height: 76px; border-radius: 4px; overflow: hidden; position: relative; border: 2px solid var(--edge,#1a1614); background: #0d0b12; }
.tinycard img { width: 100%; height: 100%; object-fit: cover; }
.tinycard-name { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.72); color: var(--tungsten); font-family: "Barlow Condensed"; font-weight: 700; font-size: 8px; text-align: center; letter-spacing: .04em; padding: 1px; line-height: 1.05; text-transform: uppercase; }
.tinycard.rarity-rare { border-color: var(--brass); }
.tinycard.rarity-legendary { border-color: var(--brass); box-shadow: 0 0 8px rgba(201,162,39,.5); }

.deck-strip { display: flex; gap: 4px; flex-wrap: wrap; }

/* responsive: portrait phone */
@media (max-aspect-ratio: 3/4) {
  :root { --hand-h: 216px; --hand-cw: 118px; }
  .plaque { width: 41vw; max-width: 200px; }
  .plaque .pl-name { font-size: 12px; }
  #tale { top: 150px; }
}
@media (min-aspect-ratio: 4/3) {
  :root { --hand-h: 232px; --hand-cw: 146px; }
  .plaque { width: 30vw; max-width: 260px; }
}
@media (max-width: 420px) {
  :root { --hand-cw: 122px; }
}

/* ---------------- home: broadcast world + tonight's card ---------------- */
.screen-home {
  background:
    radial-gradient(58% 40% at 50% 12%, rgba(255,226,170,.34), rgba(255,226,170,.07) 42%, rgba(0,0,0,0) 66%),
    linear-gradient(180deg, rgba(11,11,13,.28) 0%, rgba(11,11,13,.5) 48%, rgba(11,11,13,.9) 100%),
    url("../assets/arena.webp") center/cover fixed;
}
.screen-home::before {
  background: radial-gradient(58% 42% at 50% 12%, rgba(6,6,8,0) 0%, rgba(6,6,8,.26) 46%, rgba(6,6,8,.68) 100%);
}
.home-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.screen-home .screen-inner { z-index: 1; }
.home-fx .flash {
  position: absolute; width: calc(11px * var(--sz,1)); height: calc(11px * var(--sz,1));
  margin: calc(-5.5px * var(--sz,1)) 0 0 calc(-5.5px * var(--sz,1));
  border-radius: 50%; opacity: 0; transform: scale(.4);
  background: radial-gradient(circle, #ffffff 0%, #ffe9c0 28%, rgba(255,220,150,.35) 54%, rgba(255,220,150,0) 72%);
  animation-name: flashpop; animation-iteration-count: infinite; animation-timing-function: ease-out;
}
@keyframes flashpop {
  0%, 93%, 100% { opacity: 0; transform: scale(.4); }
  1% { opacity: .95; transform: scale(1); }
  6% { opacity: .5; transform: scale(1.55); }
  13% { opacity: 0; transform: scale(1.9); }
}
.poster-title h1 { animation: pushin 8s ease-in-out infinite alternate; }
@keyframes pushin {
  from { transform: skewX(-3deg) scale(1); }
  to { transform: skewX(-3deg) scale(1.04); }
}

.tonight { margin: 18px auto 0; max-width: 560px; border: 3px solid var(--ink); background: linear-gradient(180deg, rgba(20,17,15,.9), rgba(11,11,13,.93)); padding: 12px 12px 14px; box-shadow: 0 14px 34px rgba(0,0,0,.6), inset 0 0 0 1px rgba(201,162,39,.18); }
.ton-label { font-family: "Barlow Condensed"; font-weight: 800; letter-spacing: .32em; font-size: 11px; color: var(--brass); text-transform: uppercase; text-align: center; }
.ton-row { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 4vw, 30px); margin: 12px 0 14px; }
.ton-fighter { width: min(168px, 40vw); }
.ton-card {
  position: relative; width: 100%; aspect-ratio: 5 / 7; border-radius: 10px; overflow: hidden;
  background: #0d0b12; border: 3px solid var(--edge, #1a1614);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.07), inset 0 0 26px rgba(0,0,0,.8), 0 16px 34px rgba(0,0,0,.7);
  transform: rotate(-2.4deg);
}
.ton-fighter:nth-child(3) .ton-card { transform: rotate(2.4deg); }
@keyframes cardfloat { from { transform: translateX(-50%) translateY(0) scale(1.04); } to { transform: translateX(-50%) translateY(-7px) scale(1.1); } }
.ton-card-art { position: absolute; inset: 0; overflow: hidden; background: #050506; }
.ton-card-art img { position: absolute; left: 50%; bottom: -3%; width: 158%; height: auto; transform: translateX(-50%); display: block; filter: contrast(1.12) saturate(1.04); animation: cardfloat 7s ease-in-out infinite alternate; }
.ton-fighter:nth-child(3) .ton-card-art img { animation-delay: -3.5s; }
.ton-halftone { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(0,0,0,.6) 1px, rgba(0,0,0,0) 1.5px); background-size: 4px 4px; opacity: .3; mix-blend-mode: multiply; }
.ton-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--spine); box-shadow: 1px 0 0 rgba(0,0,0,.7), inset -1px 0 0 rgba(255,255,255,.18); }
.ton-nums { position: absolute; right: 5px; top: 5px; z-index: 5; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #ffe6a0, #b58f1f 72%); color: #201a06; border: 2px solid #3a2f10; font-family: "Roboto Slab"; font-weight: 900; font-size: 19px; box-shadow: 0 2px 7px rgba(0,0,0,.65); }
.ton-pips { position: absolute; left: 15px; top: 8px; z-index: 5; display: flex; gap: 3px; }
.ton-pips i { width: 8px; height: 8px; border-radius: 50%; background: #14110f; border: 1px solid rgba(255,255,255,.42); }
.ton-pips i.on { background: radial-gradient(circle at 35% 32%, #ffe6a0, var(--brass)); border-color: #6b5a1e; }
.ton-plate { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 22px 8px 8px; text-align: center; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.9) 44%); }
.ton-plate b { display: block; font-family: "Anton"; font-size: clamp(12px, 3.4vw, 16px); color: var(--tungsten); text-transform: uppercase; line-height: 1.02; text-shadow: 0 2px 4px #000; }
.ton-plate i { display: block; font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; letter-spacing: .16em; font-size: 10px; color: var(--brass); text-transform: uppercase; margin-top: 1px; }
.ton-card.is-champ { box-shadow: inset 0 0 0 3px rgba(255,255,255,.09), inset 0 0 30px rgba(0,0,0,.75), 0 16px 34px rgba(0,0,0,.7), 0 0 20px rgba(201,162,39,.5); }
.ton-vs { font-family: "Anton"; font-size: clamp(22px, 7vw, 34px); color: var(--rope); transform: skewX(-6deg); text-shadow: 2px 2px 0 #000; }
.ton-actions { display: flex; gap: 8px; justify-content: center; }
.ton-card.is-starting { cursor: pointer; }
.ton-card.is-starting:hover, .ton-card.is-starting:active { filter: brightness(1.14); }
.ton-hint { text-align: center; font-family: "Barlow Condensed"; font-weight: 700; letter-spacing: .2em; font-size: 10px; color: #9a8f78; text-transform: uppercase; margin-top: 8px; }

@media (max-aspect-ratio: 3 / 4) {
  .screen-home {
    background:
      radial-gradient(78% 30% at 50% 9%, rgba(255,226,170,.42), rgba(255,226,170,.09) 46%, rgba(0,0,0,0) 70%),
      linear-gradient(180deg, rgba(11,11,13,.18) 0%, rgba(11,11,13,.4) 42%, rgba(11,11,13,.88) 100%),
      url("../assets/arena.webp") center top / cover fixed;
  }
  .home-fx .flash { width: calc(15px * var(--sz,1)); height: calc(15px * var(--sz,1)); margin: calc(-7.5px * var(--sz,1)) 0 0 calc(-7.5px * var(--sz,1)); }
}

/* ---------------- setup: your wrestler line ---------------- */
.setup-cardline { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; border: 3px solid var(--ink); background: linear-gradient(180deg,#1a1512,#0e0c0a); padding: 8px 12px; flex-wrap: wrap; }
.sc-you { display: flex; align-items: center; gap: 10px; }
.sc-you img { width: 64px; height: 82px; object-fit: cover; object-position: center 16%; border: 2px solid var(--rope); display: block; }
.sc-cap { display: flex; flex-direction: column; }
.sc-cap span { font-family: "Barlow Condensed"; font-weight: 800; letter-spacing: .24em; font-size: 10px; color: var(--brass); text-transform: uppercase; }
.sc-cap b { font-family: "Anton"; font-size: 20px; color: var(--bone); text-transform: uppercase; letter-spacing: .01em; }
.sc-stats { margin-left: auto; color: #cbbfa6; font-size: 12px; }
button.fighter-tile, button.mtype { padding: 0; font: inherit; cursor: pointer; width: 100%; }
.mtype { background-size: cover; background-position: center 30%; min-height: 124px; display: flex; flex-direction: column; justify-content: flex-end; }
.mtype h3 { text-shadow: 0 2px 6px #000, 0 1px 0 #000; }
.mtype p { text-shadow: 0 1px 4px #000; }
.mtype { padding: 10px 12px; }

/* ---------------- pause banner (keeps the match visible) ---------------- */
#pausebanner {
  position: absolute; left: 50%; top: 44px; transform: translateX(-50%);
  display: none; align-items: center; gap: 10px; z-index: 90;
  background: rgba(11,11,13,.9); border: 2px solid var(--brass); padding: 6px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
}
#pausebanner.on { display: flex; }
#pausebanner b { font-family: "Anton"; font-size: 16px; letter-spacing: .14em; color: var(--tungsten); }

.foe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; }
.foe-grid .fighter-tile img { aspect-ratio: 4 / 3; object-position: center 22%; }

.card:focus { outline: none; }
.card:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }