/* ============================================================
   Blackjack FC v2 — AAA neon stylesheet.
   Type system : Chakra Petch (display) / Inter (UI) / JetBrains Mono (data)
   Palette     : near-black base · cyan chrome · lime data ·
                 position colours GK amber / DEF blue / MID green / ATT red
   ============================================================ */

:root {
  --bg0: #000;
  --bg1: #000;
  --panel: #000;
  --panel2: #000;
  --panel3: #000;
  --line: #1b1b23;
  --line2: #262630;
  --text: #f4f6f9;
  --text2: #b9c0cc;
  --muted: #686f7c;

  --cyan: #25d9e0;
  --lime: #c8f135;
  --gold: #f3b62c;
  --red: #ff4258;
  --amber: #ffa53d;
  --violet: #8655f6;

  --p-gk: #f3b62c;
  --p-def: #25d9e0;
  --p-mid: #35e07c;
  --p-att: #ff4d6b;

  --disp: "Chakra Petch", "Segoe UI", sans-serif;
  --disp2: "Archivo Black", "Chakra Petch", sans-serif;
  --ui: "Inter", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Consolas", monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
html { background: #000; }

body {
  font-family: var(--ui);
  background: var(--bg0);
  color: var(--text);
  padding: clamp(8px, 1.4vw, 18px);
  -webkit-font-smoothing: antialiased;
}

/* ============ app frame ============ */

#app {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  min-height: calc(100vh - 2 * clamp(8px, 1.4vw, 18px));
  display: flex;
  flex-direction: column;
  background: var(--bg1);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(14px, 2vw, 26px);
  overflow: hidden;
}

#app::before { content: none; }

#app.draft-frame {
  min-height: 0;
}

#app.team-sheet-frame {
  min-height: 0;
}

.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.screen.draft-screen {
  flex: 0 0 auto;
  min-height: auto;
  gap: 4px;
}

.draft-screen .topbar {
  padding-bottom: 4px;
  margin-bottom: 0;
}

.draft-screen .top-progress {
  flex: 0 0 auto;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

::selection { background: rgba(41,217,255,.3); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }

/* ============ type helpers ============ */

.cyan { color: var(--cyan); }
.lime { color: var(--lime); }
.red { color: var(--red); }
.amber { color: var(--amber); }
.dim { color: var(--muted) !important; }

/* ============ top bar ============ */

.topbar {
  display: flex; align-items: center; gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.brand {
  font-family: var(--disp);
  font-weight: 700; font-style: italic;
  font-size: 1.3rem; letter-spacing: .5px;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(41,217,255,.55);
  white-space: nowrap;
}
.brand b { color: var(--lime); text-shadow: 0 0 18px rgba(200,241,53,.55); }

.phase-block {
  display: flex; flex-direction: column; gap: 2px;
  white-space: nowrap;
}
.phase-block span { font-family: var(--disp); font-size: .52rem; letter-spacing: 2.5px; color: var(--muted); font-weight: 700; }
.phase-block b { font-family: var(--disp); font-weight: 700; font-size: .85rem; letter-spacing: 2px; color: var(--text); }

.top-sub {
  font-family: var(--disp); font-size: .62rem; letter-spacing: 2px;
  color: var(--muted); font-weight: 700;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.top-progress {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.tp-now { font-family: var(--disp); font-size: .62rem; letter-spacing: 2px; color: var(--cyan); font-weight: 700; white-space: nowrap; }
.tp-now i { font-style: normal; color: var(--muted); }
.tp-state { font-family: var(--disp); font-size: .56rem; letter-spacing: 2.5px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.tp-segs { display: flex; gap: 4px; flex: 1; min-width: 0; }
.tp-segs .pdot { flex: 1; height: 5px; border-radius: 2px; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.budget-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #000;
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 7px 16px;
}
.budget-chip span { font-size: .5rem; letter-spacing: 2.5px; color: var(--muted); font-weight: 700; }
.budget-chip b { font-family: var(--mono); font-weight: 800; font-size: 1.15rem; color: var(--cyan); line-height: 1; }
.budget-chip.gold b { color: var(--gold); }
.budget-chip.coins b { color: var(--lime); }

.icon-btn {
  background: var(--text); border: 0; color: #0a0a0d;
  border-radius: 6px; width: 36px; height: 36px; cursor: pointer;
  font-size: .85rem; font-weight: 700; transition: all .15s;
}
.icon-btn:hover { background: var(--red); color: #fff; }

/* ============ stage layouts ============ */

.stage {
  display: grid;
  gap: 16px;
  flex: 1;
  min-height: 0;
  align-items: start;
}
.stage.draft { grid-template-columns: 264px minmax(0, 1fr) 312px; }
.stage.prematch { grid-template-columns: 1fr; }
.stage.packdraft {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
}

.stage.packdraft > .side-col {
  width: 100%;
  min-width: 0;
}

.stage.packdraft .deck-panel {
  width: 100%;
}
.stage.single { grid-template-columns: 1fr; }

.stage.prematch {
  align-items: stretch;
}

.stage.prematch > .centre,
.stage.prematch .opp-card {
  height: 100%;
}

@media (max-width: 1020px) {
  .stage.draft, .stage.prematch, .stage.packdraft { grid-template-columns: 1fr; }
  .stage.prematch > .centre,
  .stage.prematch .opp-card { height: auto; }
}

.side-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.centre { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.centre.vcenter { justify-content: center; align-self: stretch; }
.centre.narrow { max-width: 600px; margin: 0 auto; width: 100%; }

/* ============ panels ============ */

.panel {
  background: linear-gradient(170deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
}

.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--disp);
  font-size: .66rem; letter-spacing: 3.5px; color: var(--muted);
  font-weight: 700; margin-bottom: 12px;
}
.panel-head .accent { color: var(--cyan); font-family: var(--mono); letter-spacing: .5px; font-size: .68rem; }
.panel-head .cyan { color: var(--cyan); }

/* ============ shoe panel ============ */

.dchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; }
.dchip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--panel3);
  border: 1px solid var(--line2);
  border-radius: 7px;
  padding: 5px 2px;
  font-family: var(--mono);
  transition: opacity .3s;
}
.dchip b { font-size: .82rem; font-weight: 800; color: var(--text); }
.dchip span { font-size: .58rem; color: var(--muted); font-weight: 700; }
.dchip.star b { color: var(--gold); }
.dchip.ace b { color: var(--violet); }
.dchip.gone { opacity: .18; }

/* ============ position badges ============ */

.pos-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--disp); font-weight: 700;
  font-size: .6rem; letter-spacing: 1.5px;
  padding: 3px 8px; border-radius: 5px;
  border: 1px solid; line-height: 1;
}
.pos-badge.sm { font-size: .54rem; padding: 2px 6px; }
.pos-badge.xl { font-size: .8rem; padding: 6px 14px; border-radius: 7px; border-width: 1.5px; }

.p-GK  { color: #1d1502; border-color: var(--p-gk);  background: var(--p-gk); }
.p-DEF { color: #02181a; border-color: var(--p-def); background: var(--p-def); }
.p-MID { color: #03190c; border-color: var(--p-mid); background: var(--p-mid); }
.p-ATT { color: #21050a; border-color: var(--p-att); background: var(--p-att); }

.p-GK-t { color: var(--p-gk); } .p-DEF-t { color: var(--p-def); }
.p-MID-t { color: var(--p-mid); } .p-ATT-t { color: var(--p-att); }

/* ============ centre: pool head ============ */

.pool-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pool-title {
  font-family: var(--disp2);
  font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  letter-spacing: .5px; white-space: nowrap;
  color: #fff;
  text-transform: uppercase;
}
.pool-meta { display: flex; gap: 8px; }
.pm {
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 7px;
  font-family: var(--disp); font-size: .6rem; letter-spacing: 2px; font-weight: 700;
  color: var(--muted); padding: 7px 12px; white-space: nowrap;
}
.pm b { color: var(--lime); font-family: var(--mono); font-size: .78rem; letter-spacing: 0; margin-left: 5px; }

.turn-hint {
  align-self: center;
  font-family: var(--disp); font-size: .62rem; font-weight: 700; letter-spacing: 3px;
  color: var(--cyan);
  padding: 8px 22px;
  border: 1px solid rgba(41,217,255,.4);
  border-radius: 999px;
  background: rgba(41,217,255,.05);
  box-shadow: 0 0 16px rgba(41,217,255,.12), inset 0 0 14px rgba(41,217,255,.05);
  animation: hintGlow 2.2s ease-in-out infinite;
}
@keyframes hintGlow {
  0%,100% { box-shadow: 0 0 14px rgba(41,217,255,.1), inset 0 0 12px rgba(41,217,255,.04); }
  50% { box-shadow: 0 0 24px rgba(41,217,255,.28), inset 0 0 18px rgba(41,217,255,.08); }
}

/* ============ big pending card ============ */

.bigcard {
  position: relative;
  align-self: center;
  width: min(440px, 100%);
  background: linear-gradient(168deg, var(--panel3) 0%, var(--panel) 64%);
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  overflow: hidden;
  animation: dealIn .34s cubic-bezier(.2,.8,.3,1.1);
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
@keyframes dealIn {
  from { opacity: 0; transform: translateY(-18px) rotate(-.6deg) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* rarity accent: top edge + tint */
.bigcard::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
}
.bigcard.r-legend::before { background: var(--gold); box-shadow: 0 0 18px var(--gold); }
.bigcard.r-pro::before    { background: var(--lime); box-shadow: 0 0 18px var(--lime); }
.bigcard.r-semi::before, .bigcard.r-amateur::before { background: var(--line2); box-shadow: none; }

.bigcard.danger { border-color: rgba(255,61,94,.6); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 26px rgba(255,61,94,.18); }
.bigcard.marquee { border-color: rgba(255,194,51,.55); box-shadow: 0 18px 40px rgba(0,0,0,.5), 0 0 26px rgba(255,194,51,.2); }

.bc-banner {
  position: absolute; top: 14px; right: -34px; z-index: 3;
  transform: rotate(38deg);
  font-family: var(--disp); font-size: .58rem; font-weight: 700; letter-spacing: 2.5px;
  padding: 5px 40px;
  background: var(--cyan); color: #02191f;
}
.r-legend .bc-banner { background: var(--gold); color: #211400; }
.r-pro .bc-banner { background: var(--lime); color: #161e00; }
.r-semi .bc-banner, .r-amateur .bc-banner { background: var(--line2); color: var(--text2); }

.bc-visual {
  position: relative;
  height: 168px;
  background:
    linear-gradient(120deg, transparent 38%, rgba(41,217,255,.05) 38.5%, transparent 39.5%),
    linear-gradient(120deg, transparent 46%, rgba(41,217,255,.04) 46.5%, transparent 47.5%),
    repeating-linear-gradient(90deg, transparent 0 43px, rgba(255,255,255,.018) 43px 44px),
    radial-gradient(340px 150px at 30% 100%, rgba(41,217,255,.1), transparent 70%);
  display: flex;
  align-items: flex-end;
  padding: 0 20px 14px;
}
.r-legend .bc-visual { background:
  repeating-linear-gradient(90deg, transparent 0 43px, rgba(255,255,255,.018) 43px 44px),
  radial-gradient(340px 150px at 30% 100%, rgba(255,194,51,.12), transparent 70%); }

.bc-watermark {
  position: absolute; right: 6px; top: -26px;
  font-family: var(--mono); font-weight: 800;
  font-size: 9.5rem; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(237,244,251,.07);
  pointer-events: none;
  user-select: none;
}

.bc-id { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bc-name {
  font-family: var(--disp); font-style: italic; font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  letter-spacing: .5px; line-height: 1;
  text-shadow: 0 4px 18px rgba(0,0,0,.8);
}

.bc-stats {
  display: flex; gap: 8px;
  padding: 14px 18px 0;
}
.bcs {
  flex: 1;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 4px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.bcs b { font-family: var(--mono); font-weight: 800; font-size: 1.15rem; color: var(--lime); line-height: 1; }
.bcs span { font-family: var(--disp); font-size: .52rem; letter-spacing: 2px; color: var(--muted); font-weight: 700; }

.bc-traits { padding: 12px 18px 0; }
.bigcard > .bc-traits:last-child, .bigcard > .bc-stats:last-child { padding-bottom: 16px; }
.bigcard > *:last-child { margin-bottom: 16px; }

.bc-warn {
  margin: 12px 18px 0;
  text-align: center;
  background: rgba(255,61,94,.1);
  border: 1px solid rgba(255,61,94,.45);
  color: #ff93a6;
  border-radius: var(--r-sm);
  padding: 8px;
  font-family: var(--disp); font-size: .62rem; letter-spacing: 2.5px; font-weight: 700;
}

.bigcard.skeleton {
  height: 240px;
  display: flex; align-items: center; justify-content: center;
  border-style: dashed;
  color: var(--muted);
  font-family: var(--disp); letter-spacing: 4px; font-size: .7rem; font-weight: 700;
}

/* trait chips */
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-family: var(--disp); font-size: .56rem; font-weight: 700; letter-spacing: 1.5px;
  padding: 4px 9px; border-radius: 5px; cursor: help;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line2); color: var(--text2);
}
.chip.good  { border-color: rgba(200,241,53,.45); color: var(--lime); background: rgba(200,241,53,.05); }
.chip.risky { border-color: rgba(255,61,94,.45); color: #ff8fa2; background: rgba(255,61,94,.05); }

/* ============ buttons ============ */

.actions { display: flex; gap: 10px; justify-content: center; }

.btn {
  font-family: var(--disp);
  border: none; border-radius: 10px; cursor: pointer;
  font-weight: 700; letter-spacing: 2.5px; color: var(--text);
  transition: transform .12s, filter .15s, box-shadow .2s;
  font-size: .78rem;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .28; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.btn.neon {
  background: var(--panel2);
  padding: 12px 24px; min-width: 170px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.btn.neon small { font-family: var(--ui); font-size: .56rem; letter-spacing: 1.5px; color: var(--muted); font-weight: 600; }
.btn.neon.red  { border: 1px solid rgba(255,61,94,.65); color: var(--red); }
.btn.neon.red:hover:not(:disabled)  { box-shadow: 0 6px 22px rgba(255,61,94,.25); background: rgba(255,61,94,.06); }
.btn.neon.gold { border: 1px solid rgba(255,194,51,.65); color: var(--gold); }
.btn.neon.gold:hover:not(:disabled) { box-shadow: 0 6px 22px rgba(255,194,51,.25); background: rgba(255,194,51,.06); }

.btn.ghost {
  background: none; border: 1px solid var(--line2); color: var(--text2);
  padding: 11px 26px;
}
.btn.ghost:hover { border-color: var(--cyan); color: var(--cyan); }

/* primary CTA — flat solid */
.btn.cta {
  position: relative; overflow: hidden;
  width: 100%;
  padding: 15px 20px;
  font-size: .88rem; letter-spacing: 4px;
  color: #02181a;
  background: var(--cyan);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.btn.cta::after {
  content: "";
  position: absolute; top: 0; bottom: 0; width: 46%;
  left: -60%; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transition: left .45s ease;
}
.btn.cta:hover::after { left: 120%; }
.btn.cta:hover:not(:disabled) { box-shadow: 0 12px 36px rgba(41,217,255,.32), 0 4px 14px rgba(200,241,53,.25); }

/* ============ MY SQUAD panel ============ */

.squad-panel { display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
.squad-panel > .panel-head { margin-bottom: 0; }

.lock-dots { display: flex; gap: 5px; }
.ld { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); transition: all .25s; }
.ld.on { background: var(--lime); box-shadow: 0 0 8px var(--lime); }

.tiles { display: flex; gap: 8px; }
.tile {
  flex: 1;
  background: var(--panel3);
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.tile-label { font-family: var(--disp); font-size: .54rem; letter-spacing: 2.5px; color: var(--muted); font-weight: 700; }
.tile-val { font-family: var(--mono); font-weight: 800; font-size: 1.45rem; line-height: 1; }
.tile-val small { font-size: .7rem; color: var(--muted); font-weight: 700; }
.tile-val.lime { color: var(--lime); text-shadow: 0 0 14px rgba(200,241,53,.3); }
.tile-val.cyan { color: var(--cyan); text-shadow: 0 0 14px rgba(41,217,255,.3); }
.tile-val.red { color: var(--red); text-shadow: 0 0 14px rgba(255,61,94,.3); }

/* pitch */
.pitch {
  position: relative;
  flex: 1;
  background: linear-gradient(180deg, #0a1410 0%, #081009 100%);
  border: 1px solid #15291d;
  border-radius: var(--r-md);
  padding: 16px 12px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  min-height: 380px;
  overflow: hidden;
}
.pitch-lines {
  position: absolute; inset: 10px;
  border: 1px solid rgba(53,224,124,.12);
  border-radius: 8px;
  pointer-events: none;
}
.pitch-lines::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid rgba(53,224,124,.12);
}
.pitch-lines::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(53,224,124,.12);
  border-radius: 50%;
}

.prow { position: relative; display: flex; gap: 10px; justify-content: center; z-index: 1; }

.slot {
  width: 124px; min-height: 86px;
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-align: center; position: relative;
  font-family: inherit;
  transition: all .16s;
}
.prow.two .slot { width: 116px; }

/* empty (no pending card) — quiet */
.slot.empty {
  border: 1px dashed var(--line2);
  background: rgba(255,255,255,.012);
}
.slot.empty .slot-name { color: var(--muted); opacity: .7; }

/* open (pending card waiting) */
.slot.open { cursor: pointer; border: 1px dashed; background: rgba(255,255,255,.015); }
.slot.open .plus {
  font-family: var(--mono); font-weight: 500; font-size: 1.25rem; line-height: 1; opacity: .9;
}
.slot.open.natural {
  border-color: var(--lime); color: var(--lime);
  background: rgba(200,241,53,.05);
  box-shadow: 0 0 18px rgba(200,241,53,.14), inset 0 0 18px rgba(200,241,53,.04);
  animation: natPulse 2s ease-in-out infinite;
}
@keyframes natPulse {
  0%,100% { box-shadow: 0 0 14px rgba(200,241,53,.12), inset 0 0 14px rgba(200,241,53,.03); }
  50% { box-shadow: 0 0 24px rgba(200,241,53,.26), inset 0 0 20px rgba(200,241,53,.07); }
}
.slot.open.natural:hover { background: rgba(200,241,53,.12); transform: translateY(-2px); }

.slot.open.flexfit { border-color: rgba(41,217,255,.55); color: var(--cyan); }
.slot.open.flexfit:hover { background: rgba(41,217,255,.08); transform: translateY(-2px); box-shadow: 0 0 16px rgba(41,217,255,.18); }

.slot.open.oop { border-color: var(--line2); color: var(--muted); }
.slot.open.oop:hover { border-color: var(--amber); color: var(--amber); background: rgba(255,165,61,.05); transform: translateY(-2px); }
.slot.open.oop .slot-sub { color: var(--amber); opacity: .75; }

.slot.open.busts { border-color: rgba(255,61,94,.6); color: var(--red); }
.slot.open.busts:hover { background: rgba(255,61,94,.08); box-shadow: 0 0 16px rgba(255,61,94,.25); transform: translateY(-2px); }

.slot-name { font-family: var(--disp); font-size: .62rem; font-weight: 700; letter-spacing: 2.5px; }
.slot-sub { font-family: var(--mono); font-size: .56rem; font-weight: 700; letter-spacing: .5px; opacity: .85; }

/* filled slots */
.slot.filled {
  background: linear-gradient(165deg, var(--panel3), var(--panel));
  border: 1px solid var(--line2);
  align-items: flex-start;
  padding: 9px 11px;
  justify-content: flex-start;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  animation: slotFill .3s cubic-bezier(.2,.8,.3,1.15);
}
@keyframes slotFill {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}
.slot.filled::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 10px 0 0 10px;
  background: var(--cyan);
}
.slot.filled.fit-nat::before  { background: var(--lime); box-shadow: 0 0 10px rgba(200,241,53,.5); }
.slot.filled.fit-flex::before { background: var(--cyan); }
.slot.filled.fit-oop::before  { background: var(--amber); }
.slot.filled.marquee { border-color: rgba(255,194,51,.5); }
.slot.filled.r-legend .fs-val { color: var(--gold); }

.slot-corner {
  position: absolute; top: 7px; right: 9px;
  font-family: var(--disp); font-size: .5rem; letter-spacing: 2px;
  color: var(--muted); font-weight: 700;
}
.fs-row { display: flex; align-items: center; gap: 7px; }
.fs-val {
  font-family: var(--mono); font-weight: 800; font-size: 1.5rem;
  color: var(--lime); line-height: 1;
}
.fs-val i { font-style: normal; font-size: .85rem; color: var(--gold); }
.fs-name { font-family: var(--ui); font-size: .66rem; font-weight: 700; letter-spacing: .3px; text-align: left; margin-top: 2px; }
.oop-flag {
  font-family: var(--disp); font-size: .48rem; letter-spacing: 1.5px;
  color: var(--amber); font-weight: 700; margin-top: 1px;
}

.fill-note {
  text-align: center;
  font-family: var(--disp); font-size: .64rem; letter-spacing: 3px; font-weight: 700;
  color: var(--muted);
  border: 1px dashed var(--line2);
  border-radius: var(--r-sm);
  padding: 12px;
}

/* ============ pack draft ============ */

.pack-progress { display: flex; gap: 5px; justify-content: center; }
.pdot {
  width: 18px; height: 4px; border-radius: 2px;
  background: var(--line2); transition: all .25s;
}
.pdot.done { background: var(--lime); box-shadow: 0 0 8px rgba(200,241,53,.4); }
.pdot.now { background: var(--cyan); box-shadow: 0 0 10px rgba(41,217,255,.55); }

.pack-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 10px;
}
@media (max-width: 900px) { .pack-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pack-option {
  --reveal-step: 0s;
  --content-delay: .22s;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
  height: 100%;
}

.pack-option.reveal-legend {
  --content-delay: .68s;
}

.pack-option > .pack-card {
  flex: 0 0 380px;
  height: 380px;
}

.pack-card {
  --flare-rgb: 37,217,224;
  --flare-delay: .04s;
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-radius: 10px;
  padding: 16px 14px 14px;
  min-height: 380px;
  height: 100%;
  width: 100%;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  animation: dealIn .55s cubic-bezier(.2,.8,.3,1.08) backwards;
  animation-delay: var(--reveal-step);
}
.pack-row .pack-option:nth-child(2) { --reveal-step: .14s; }
.pack-row .pack-option:nth-child(3) { --reveal-step: .28s; }
.pack-row .pack-option:nth-child(4) { --reveal-step: .42s; }
.pack-row .pack-option:nth-child(5) { --reveal-step: .56s; }

.pack-card .pk-reveal {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-width: 0;
  gap: 10px;
  height: 100%;
  opacity: 0;
  transform: translateY(7px) scale(.985);
  animation: packContentIn .42s cubic-bezier(.22,.75,.25,1) forwards;
  animation-delay: calc(var(--reveal-step) + var(--content-delay));
}

.pack-card::after {
  content: "";
  position: absolute;
  inset: -34% -20%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: scale(.78);
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 50%, rgba(var(--flare-rgb), .42) 0%, rgba(var(--flare-rgb), .16) 34%, rgba(var(--flare-rgb), 0) 74%);
  animation: packFlare .84s ease-out forwards;
  animation-delay: calc(var(--reveal-step) + var(--flare-delay));
}

.pack-card.reveal-common { --flare-rgb: 37,217,224; }
.pack-card.reveal-rare {
  --flare-rgb: 41,217,255;
}
.pack-card.reveal-epic {
  --flare-rgb: 131,71,255;
}
.pack-card.reveal-legend {
  --flare-rgb: 255,194,51;
  --content-delay: .68s;
  --flare-delay: .16s;
  animation-name: dealIn, legendRevealGlow;
  animation-duration: .55s, 1.2s;
  animation-timing-function: cubic-bezier(.2,.8,.3,1.08), ease-out;
  animation-fill-mode: backwards, both;
  animation-delay: var(--reveal-step), calc(var(--reveal-step) + .42s);
}

.pack-card.reveal-legend::after {
  animation-duration: 1.3s;
  background: radial-gradient(circle at 50% 50%, rgba(255,194,51,.72) 0%, rgba(255,194,51,.32) 36%, rgba(255,194,51,0) 76%);
}

.pack-card.reveal-static {
  animation: none;
}

.pack-card.reveal-static::after {
  display: none;
}

.pack-card.reveal-static .pk-reveal {
  opacity: 1;
  transform: none;
  animation: none;
}

@keyframes packContentIn {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes packFlare {
  0% { opacity: 0; transform: scale(.72); }
  32% { opacity: .95; transform: scale(1.03); }
  62% { opacity: .36; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes legendRevealGlow {
  0%, 100% { border-color: var(--line2); box-shadow: none; }
  35% {
    border-color: rgba(243,182,44,.95);
    box-shadow: 0 0 0 1px rgba(243,182,44,.28), 0 0 34px rgba(243,182,44,.55);
  }
  68% {
    border-color: rgba(243,182,44,.7);
    box-shadow: 0 0 0 1px rgba(243,182,44,.16), 0 0 22px rgba(243,182,44,.32);
  }
}

.pack-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--line2);
}
.pack-card.r-legend::before { background: var(--gold); }
.pack-card.r-epic::before   { background: var(--violet); }
.pack-card.r-rare::before   { background: var(--cyan); }

.pk-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pk-banner {
  font-family: var(--disp); font-size: .52rem; letter-spacing: 2.5px; font-weight: 700;
  color: var(--muted);
}
.pack-card.r-legend .pk-banner { color: var(--gold); }
.pack-card.r-epic .pk-banner { color: var(--violet); }
.pack-card.r-rare .pk-banner { color: var(--cyan); }

.pk-val {
  font-family: var(--disp2);
  font-size: clamp(2.4rem, 4.4vw, 3.2rem); line-height: 1;
  color: #fff;
  margin-top: 8px;
}

.pk-name {
  font-family: var(--disp2); font-size: .88rem; letter-spacing: .5px;
  color: #fff; height: 2.4em; min-height: 2.4em; line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pk-traits {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: left;
}
.pk-traits-label {
  padding: 6px 9px;
  background: #000;
  border-bottom: 1px solid var(--line);
  font-family: var(--disp);
  font-size: .45rem;
  letter-spacing: 2px;
  color: var(--muted);
  font-weight: 700;
}
.pk-trait-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 9px;
}
.pk-trait-row + .pk-trait-row {
  border-top: 1px solid var(--line);
}
.pk-trait-row b {
  font-family: var(--disp);
  font-size: .57rem;
  letter-spacing: 1.2px;
  color: var(--cyan);
}
.pk-trait-row small {
  font-family: var(--ui);
  font-size: .61rem;
  line-height: 1.3;
  color: var(--text2);
}
.pk-trait-row.trait-risky b { color: var(--red); }
.pk-traits.is-empty { opacity: .5; }
.pk-traits.is-empty .pk-trait-row b { color: var(--muted); }

.pack-mobile-nav {
  display: none;
}

.pick-btn {
  font-family: var(--disp);
  border: 1px solid rgba(244,246,249,.7);
  background: none;
  color: var(--text);
  border-radius: 6px;
  padding: 11px;
  font-weight: 700; letter-spacing: 2px; font-size: .62rem;
  cursor: pointer;
  transition: all .15s;
  margin-top: 0;
}
.pack-card.r-rare .pick-btn { background: var(--cyan); border-color: var(--cyan); color: #02181a; }
.pack-card.r-epic .pick-btn { background: var(--violet); border-color: var(--violet); color: #fff; }
.pack-card.r-legend .pick-btn { background: var(--gold); border-color: var(--gold); color: #1d1502; }
.pick-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.15);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.pick-btn:disabled { opacity: .35; cursor: not-allowed; }

.deck-panel { display: flex; flex-direction: column; gap: 12px; align-self: stretch; height: 500px; min-height: 500px; }
.deck-panel > .panel-head { margin-bottom: 0; }

.deck-pos-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.dpt {
  background: #000;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.dpt span { font-family: var(--disp); font-size: .5rem; letter-spacing: 1.5px; font-weight: 700; }
.dpt b { font-family: var(--mono); font-weight: 800; font-size: 1rem; color: var(--text); }

.deck-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  border: 1px dashed var(--line2);
  border-radius: 8px;
  min-height: 200px;
}
.de-plus {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1.1rem;
}
.deck-empty b { font-family: var(--disp); font-size: .62rem; letter-spacing: 2.5px; color: var(--muted); font-weight: 700; }
.deck-empty small { font-family: var(--disp); font-size: .48rem; letter-spacing: 2px; color: var(--line2); font-weight: 700; }

.deck-roster {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.dr-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center; gap: 8px;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
}
.dr-row b { font-family: var(--mono); font-weight: 800; font-size: .78rem; color: var(--text); }
.dr-row span { font-family: var(--disp); font-size: .58rem; letter-spacing: .8px; font-weight: 700; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-row.dc-rare b { color: var(--cyan); }
.dr-row.dc-epic b { color: #c4a8ff; }
.dr-row.dc-legend b { color: var(--gold); }

.squad-status {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.squad-status span { font-family: var(--disp); font-size: .54rem; letter-spacing: 2.5px; color: var(--muted); font-weight: 700; }
.squad-status b { font-family: var(--mono); font-weight: 800; font-size: .8rem; color: var(--text); }

@media (max-width: 600px) {
  body {
    padding: 4px;
    overflow-x: hidden;
  }

  #app {
    width: 100%;
    min-width: 0;
    padding: 12px;
    border-radius: 10px;
  }

  .draft-screen .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .draft-screen .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    font-size: 1rem;
  }

  .draft-screen .phase-block {
    grid-column: 1;
    grid-row: 2;
  }

  .draft-screen .phase-block b {
    font-size: .7rem;
    letter-spacing: 1.4px;
  }

  .draft-screen .topbar-right {
    grid-column: 2;
    grid-row: 1 / 3;
    margin-left: 0;
    gap: 5px;
  }

  .draft-screen .budget-chip {
    padding: 6px 8px;
  }

  .draft-screen .budget-chip.gold {
    display: none;
  }

  .draft-screen .icon-btn {
    width: 32px;
    height: 32px;
  }

  .draft-screen .top-progress {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
  }

  .draft-screen .tp-state {
    display: none;
  }

  .draft-screen .pool-head {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .draft-screen .pool-title {
    min-width: 0;
    font-size: 1.45rem;
  }

  .draft-screen .pm {
    padding: 7px 9px;
    letter-spacing: 1.4px;
  }

  .pack-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pack-option {
    gap: 6px;
  }

  .pack-card {
    min-height: 0;
    height: auto;
    padding: 10px;
    text-align: left;
  }

  .pack-option > .pack-card {
    flex-basis: auto;
    height: auto;
  }

  .pack-card .pk-reveal {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 108px;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px 10px;
    height: auto;
  }

  .pk-head {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .pk-val {
    grid-column: 1;
    grid-row: 2 / 4;
    margin-top: 0;
    font-size: 2rem;
    text-align: center;
  }

  .pk-name {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    min-height: 0;
    font-size: .78rem;
    text-align: left;
    -webkit-line-clamp: 1;
  }

  .pk-traits {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    margin-top: 0;
  }

  .pk-trait-row b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pk-trait-row small {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .pick-btn {
    grid-column: 3;
    grid-row: 2 / 4;
    align-self: stretch;
    min-height: 58px;
    padding: 8px;
    letter-spacing: 1.4px;
    font-size: .56rem;
  }

  .deck-panel {
    height: auto;
    min-height: 0;
  }

  .deck-roster { max-height: 220px; }

  .deck-empty {
    min-height: 130px;
  }

}

.pos-counts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pc { display: flex; align-items: center; gap: 5px; }
.pc b { font-family: var(--mono); font-size: .72rem; color: var(--text2); }
.pc.zero b { color: var(--red); }

.deckchips { display: flex; flex-wrap: wrap; gap: 5px; }
.deckchip {
  font-family: var(--mono); font-weight: 800; font-size: .78rem;
  min-width: 28px; text-align: center;
  background: var(--panel3); border: 1px solid var(--line2); border-radius: 6px;
  padding: 4px 6px; color: var(--text2);
}
.deckchip.dc-rare   { color: var(--cyan);  border-color: rgba(41,217,255,.4); }
.deckchip.dc-epic   { color: #b491ff;      border-color: rgba(131,71,255,.45); }
.deckchip.dc-legend { color: var(--gold);  border-color: rgba(255,194,51,.5); box-shadow: 0 0 10px rgba(255,194,51,.18); }

.pk-warning {
  margin-top: 10px;
  font-family: var(--disp); font-size: .56rem; letter-spacing: 1.5px; font-weight: 700;
  color: var(--amber);
}

/* ============ tactics ============ */

.tactic-list { display: flex; flex-direction: column; gap: 7px; }
.tactic-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(131,71,255,.04);
  border: 1px solid rgba(131,71,255,.25);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
.tactic-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tactic-info b { font-family: var(--disp); font-size: .62rem; letter-spacing: 1.5px; color: #b491ff; }
.tactic-info span { color: var(--muted); font-size: .64rem; line-height: 1.35; }

.btn.mini {
  padding: 7px 14px; font-size: .58rem; letter-spacing: 2px;
  border: 1px solid rgba(131,71,255,.55); color: #b491ff; background: none;
  border-radius: 7px;
}
.btn.mini:hover:not(:disabled) { background: rgba(131,71,255,.12); box-shadow: 0 0 12px rgba(131,71,255,.25); }

.buff-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.buff-chip {
  font-family: var(--mono); font-weight: 700; font-size: .6rem;
  color: var(--lime);
  background: rgba(200,241,53,.06);
  border: 1px solid rgba(200,241,53,.35);
  border-radius: 5px; padding: 3px 8px;
}

/* ============ bracket ============ */

.bracket { display: flex; gap: 8px; }
.bk {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  overflow: hidden;
}
.bk-round { font-family: var(--disp); font-size: .56rem; letter-spacing: 2px; font-weight: 700; color: var(--muted); }
.bk-opp { font-family: var(--mono); font-size: .62rem; font-weight: 700; color: var(--text2); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.bk.won  { border-color: rgba(200,241,53,.4); }
.bk.won .bk-round { color: var(--lime); }
.bk.lost { border-color: rgba(255,61,94,.4); }
.bk.lost .bk-round { color: var(--red); }
.bk.now {
  border-color: rgba(41,217,255,.6);
  background: linear-gradient(170deg, rgba(41,217,255,.07), var(--panel));
  box-shadow: 0 0 16px rgba(41,217,255,.12);
}
.bk.now .bk-round { color: var(--cyan); }
.bk.todo .bk-opp { color: var(--muted); }

/* ============ pre-match ============ */

.opp-card {
  text-align: center;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 4vw, 42px) clamp(18px, 3vw, 34px);
}
.opp-round {
  font-family: var(--disp); color: var(--cyan);
  letter-spacing: 5px; font-size: .72rem; font-weight: 700;
}
.opp-name {
  font-family: var(--disp); font-style: italic; font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  letter-spacing: 1px; line-height: 1.05;
  text-shadow: 0 0 34px rgba(41,217,255,.25);
}
.opp-profile-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 180px));
  justify-content: center;
  gap: 8px;
}
.opp-profile-metrics span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  font-family: var(--disp);
  font-size: .5rem;
  letter-spacing: 1.8px;
  color: var(--muted);
  font-weight: 700;
  background: var(--panel3);
  border: 1px solid var(--line2);
  border-radius: 6px;
}
.opp-profile-metrics b {
  font-family: var(--mono);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text);
}
.opp-profile-metrics span:first-child b { color: var(--lime); }
.opp-profile-metrics span:last-child b { color: var(--cyan); }
.opp-str { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.opp-str-label { font-family: var(--disp); font-size: .58rem; letter-spacing: 3px; color: var(--muted); font-weight: 700; }
.opp-str-num {
  font-family: var(--mono); font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: var(--red); text-shadow: 0 0 22px rgba(255,61,94,.45);
}
.opp-str-bar {
  width: min(300px, 70%); height: 5px;
  background: var(--panel3); border-radius: 3px; overflow: hidden;
}
.opp-str-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--red));
  border-radius: 3px;
}
.opp-hint { color: var(--muted); font-size: .68rem; letter-spacing: .4px; }

.meta-strip {
  display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
  font-family: var(--disp); font-size: .6rem; letter-spacing: 2.5px;
  color: var(--muted); font-weight: 700;
}
.meta-strip b { color: var(--lime); font-family: var(--mono); font-size: .85rem; margin-left: 7px; letter-spacing: 0; }
.meta-strip b.amber { color: var(--amber); }
.meta-strip.panel { padding: 12px; }
.meta-strip.slim { gap: 26px; }

.opp-card .btn.cta { max-width: 380px; margin: 4px auto 0; }

/* ============ locked / vs ============ */

.vs-strip {
  display: flex; align-items: center; justify-content: center; gap: 30px;
  padding: clamp(18px, 3vw, 30px);
}
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vs-side b {
  font-family: var(--mono); font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1;
}
.vs-side b.lime { text-shadow: 0 0 26px rgba(200,241,53,.4); }
.vs-side b.red { text-shadow: 0 0 26px rgba(255,61,94,.4); }
.vs-side span {
  font-family: var(--disp); font-size: .56rem; color: var(--muted);
  letter-spacing: 2.5px; font-weight: 700; max-width: 180px; text-align: center;
}
.vs-mid { font-family: var(--disp); font-style: italic; font-weight: 700; color: var(--muted); }

.verdict {
  text-align: center;
  font-family: var(--disp); font-size: .72rem; letter-spacing: 3px;
  color: var(--muted); font-weight: 700;
}
.verdict b { margin-left: 6px; }
.verdict.v-lime b { color: var(--lime); text-shadow: 0 0 14px rgba(200,241,53,.4); }
.verdict.v-cyan b { color: var(--cyan); }
.verdict.v-amber b { color: var(--amber); }
.verdict.v-red b { color: var(--red); text-shadow: 0 0 14px rgba(255,61,94,.4); }

.centre .btn.cta { max-width: 380px; align-self: center; }

/* ============ result ============ */

.result-head {
  font-family: var(--disp); font-style: italic; font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: 4px; text-align: center;
}
.result-head.lime { color: var(--lime); text-shadow: 0 0 38px rgba(200,241,53,.45); }
.result-head.red { color: var(--red); text-shadow: 0 0 38px rgba(255,61,94,.45); animation: shake .4s; }
@keyframes shake {
  0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); }
}

.scoreline {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  width: 100%; padding: clamp(16px, 3vw, 26px);
}
.scoreline .score {
  font-family: var(--mono); font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1;
}
.scoreline .score i { font-style: normal; color: var(--muted); padding: 0 2px; }
.scoreline .team {
  font-family: var(--disp); color: var(--muted); font-size: .64rem;
  letter-spacing: 2.5px; font-weight: 700; max-width: 190px;
}
.pens { font-family: var(--disp); color: var(--amber); font-size: .72rem; letter-spacing: 3px; font-weight: 700; text-align: center; }

.events { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.ev { color: var(--text2); font-size: .74rem; font-family: var(--mono); }

/* ============ v5: matchup clarity ============ */

.matchup-mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  width: min(720px, 100%);
  margin: 2px auto;
}
.matchup-mini span {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px;
  background: var(--panel3); border: 1px solid var(--line2); border-radius: 7px;
  font-family: var(--disp); font-size: .48rem; letter-spacing: 1.5px; color: var(--muted); font-weight: 700;
}
.matchup-mini b { font-family: var(--mono); font-size: .9rem; color: var(--text); letter-spacing: 0; }

.matchup-vs { justify-content: space-between; }
.matchup-side {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.matchup-side span {
  font-family: var(--disp); font-size: .55rem; letter-spacing: 2.5px; color: var(--muted); font-weight: 700;
  margin-bottom: 4px;
}
.matchup-side b { font-family: var(--mono); font-size: 1.2rem; color: var(--text2); }
.match-warnings { display: flex; flex-direction: column; gap: 5px; }
.match-warnings span {
  padding: 8px 12px; text-align: center;
  border: 1px solid rgba(255,165,61,.35); border-radius: 7px;
  background: rgba(255,165,61,.05); color: var(--amber);
  font-family: var(--disp); font-size: .58rem; letter-spacing: 1.5px; font-weight: 700;
}

.coin-breakdown, .performance-notes { width: 100%; }
.coin-total {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--line2);
}
.coin-total span { font-family: var(--disp); font-size: .62rem; letter-spacing: 2.5px; color: var(--muted); font-weight: 700; }
.coin-total b { font-family: var(--mono); font-size: 1.7rem; color: var(--lime); }
.coin-lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 18px; padding-top: 12px; }
.coin-lines span {
  display: flex; justify-content: space-between;
  font-size: .7rem; color: var(--text2);
}
.coin-lines b { color: var(--gold); font-family: var(--mono); }
.coin-breakdown.final-reward {
  border-color: rgba(255, 207, 90, .55);
  box-shadow: 0 0 24px rgba(255, 207, 90, .08);
}
.coin-breakdown.final-reward .coin-total span,
.coin-lines .final-bonus,
.coin-lines .final-bonus b { color: var(--gold); }
.performance-notes .panel-head { margin-bottom: 8px; }
.performance-note {
  padding: 7px 0; border-top: 1px solid var(--line);
  color: var(--text2); font-size: .7rem; line-height: 1.4;
}

/* ============ v5: shop ============ */

.shop-screen { overflow: visible; }
.shop-main { display: flex; flex-direction: column; gap: 14px; padding-bottom: 76px; }
.shop-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.shop-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: linear-gradient(170deg, var(--panel2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.shop-section-head {
  display: flex; justify-content: space-between; align-items: end; gap: 12px;
  margin-bottom: 12px;
}
.shop-section-head > div { display: flex; flex-direction: column; gap: 3px; }
.shop-section-head span, .shop-section-head small {
  font-family: var(--disp); font-size: .5rem; letter-spacing: 2px; color: var(--muted); font-weight: 700;
}
.shop-section-head h2 {
  font-family: var(--disp2); font-size: 1.15rem; letter-spacing: .5px; color: var(--text);
}
.shop-player-row {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 10px;
}
.shop-player { min-width: 0; height: 100%; }
.shop-player .pack-card { min-height: 320px; height: 100%; }
.shop-player .pk-val { font-size: 2.5rem; }
.shop-item-row {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 10px;
}
.shop-card {
  min-height: 180px;
  height: 100%;
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px;
  background: #000;
  border: 1px solid var(--line2);
  border-radius: 9px;
  position: relative; overflow: hidden;
}
.shop-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--cyan);
}
.shop-card.shop-consumable::before { background: var(--lime); }
.shop-card.shop-staff::before { background: var(--gold); }
.shop-kicker {
  font-family: var(--disp); font-size: .48rem; letter-spacing: 2px; color: var(--cyan); font-weight: 700;
}
.shop-card h3 { font-family: var(--disp); font-size: .9rem; letter-spacing: .5px; }
.shop-card p { color: var(--text2); font-size: .68rem; line-height: 1.45; }
.shop-buy {
  width: 100%; margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(37,217,224,.5); border-radius: 6px;
  background: rgba(37,217,224,.08); color: var(--cyan);
  font-family: var(--disp); font-size: .56rem; letter-spacing: 1.5px; font-weight: 700;
  cursor: pointer;
}
.shop-buy b { color: var(--lime); font-family: var(--mono); font-size: .58rem; letter-spacing: 0; }
.shop-buy:hover:not(:disabled) { background: rgba(37,217,224,.15); transform: translateY(-1px); }
.shop-buy:disabled { opacity: .28; cursor: not-allowed; }
.shop-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.shop-split .staff-section .shop-item-row { grid-template-columns: 1fr; }
.shop-primary .shop-section { height: 100%; }
.shop-primary .shop-section-head { min-height: 38px; }
.shop-primary .packs-section .shop-item-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shop-primary .packs-section .shop-card { min-height: 226px; }
.shop-split .shop-section { height: 100%; }
.shop-split .shop-section-head { min-height: 38px; }
.shop-empty {
  min-height: 110px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line2); border-radius: 8px;
  font-family: var(--disp); font-size: .58rem; letter-spacing: 2px; color: var(--muted); font-weight: 700;
}
.shop-footer {
  position: absolute; z-index: 12; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: auto minmax(260px, 380px); justify-content: end; gap: 10px;
  padding: 12px clamp(14px, 2vw, 26px);
  background: #000; border-top: 1px solid var(--line2);
  backdrop-filter: blur(12px);
}
.shop-footer .btn.cta { max-width: none; }

.shop-modal-backdrop {
  position: fixed; z-index: 100; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
}
.shop-modal { position: relative; width: min(900px, 100%); max-height: 90vh; overflow-y: auto; padding: 20px; }
.shop-modal.compact { width: min(560px, 100%); }
.modal-close {
  position: absolute; right: 12px; top: 12px;
  width: 32px; height: 32px; border: 0; border-radius: 6px;
  background: var(--text); color: var(--bg0); font-size: 1.1rem; cursor: pointer;
}
.modal-head { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.modal-head span, .incoming-player > span, .replacement-list > span {
  font-family: var(--disp); font-size: .52rem; letter-spacing: 2px; color: var(--cyan); font-weight: 700;
}
.modal-head h2 { font-family: var(--disp2); font-size: 1.35rem; }
.replace-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; }
.incoming-player { display: flex; flex-direction: column; gap: 8px; }
.incoming-player .pack-card { min-height: 300px; }
.replacement-list { display: flex; flex-direction: column; gap: 6px; }
.replace-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line2); border-radius: 7px;
  background: var(--panel3); color: var(--text); text-align: left; cursor: pointer;
}
.replace-row:hover { border-color: var(--cyan); background: rgba(37,217,224,.06); }
.replace-row > b { font-family: var(--mono); font-size: 1rem; color: var(--text); }
.replace-row.dc-rare > b { color: var(--cyan); }
.replace-row.dc-epic > b { color: #b491ff; }
.replace-row.dc-legend > b { color: var(--gold); }
.replace-row > span { display: flex; flex-direction: column; gap: 2px; font-family: var(--disp); font-size: .62rem; font-weight: 700; }
.replace-row small { color: var(--muted); font-family: var(--mono); font-size: .52rem; font-weight: 500; }
.no-targets { padding: 30px; text-align: center; color: var(--muted); font-family: var(--disp); letter-spacing: 2px; }
.pack-replace { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 900px) {
  .shop-primary { grid-template-columns: 1fr; }
  .shop-player-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-split { grid-template-columns: 1fr; }
  .shop-split .staff-section .shop-item-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .topbar { gap: 8px; }
  .topbar .budget-chip { padding: 6px 8px; }
  .topbar .budget-chip:not(.coins) { display: none; }
  .topbar .phase-block b { font-size: .68rem; letter-spacing: 1.2px; }
  .matchup-mini { grid-template-columns: repeat(2, 1fr); }
  .matchup-mini span:last-child { grid-column: 1 / -1; }
  .coin-lines { grid-template-columns: 1fr; }
  .shop-main { padding-bottom: 120px; }
  .shop-primary { display: flex; flex-direction: column; }
  .shop-section { padding: 12px; }
  .shop-section-head { align-items: start; }
  .shop-section-head small { display: none; }
  .shop-player-row, .shop-item-row, .shop-split .staff-section .shop-item-row {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 5px;
  }
  .shop-player, .shop-card { flex: 0 0 82%; scroll-snap-align: start; }
  .shop-player .pack-card { min-height: 320px; text-align: center; }
  .shop-player .pack-card .pk-reveal { display: flex; }
  .shop-player .pk-name { text-align: center; min-height: 2.4em; }
  .shop-player .pk-val { font-size: 2.5rem; }
  .shop-player .pk-traits { margin-top: auto; }
  .shop-player .shop-buy { min-height: 0; }
  .shop-footer {
    position: fixed;
    grid-template-columns: 1fr;
    padding: 10px 12px;
  }
  .shop-footer .btn { width: 100%; }
  .shop-footer .btn.ghost { padding: 9px; }
  .replace-layout { grid-template-columns: 1fr; }
  .incoming-player .pack-card { min-height: 230px; }
  .shop-modal { padding: 16px; }
}

/* ============ menu ============ */

.menu { justify-content: center; align-items: center; gap: clamp(18px, 3vh, 34px); padding: 20px 0; }

.hero { position: relative; text-align: center; padding: clamp(10px, 4vh, 40px) 0 0; }
.hero-glow {
  position: absolute; left: 50%; top: 40%;
  width: 540px; height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(41,217,255,.14), transparent);
  pointer-events: none;
}
.logo {
  position: relative;
  font-family: var(--disp); font-style: italic; font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  letter-spacing: 2px; line-height: 1;
  color: var(--cyan);
  text-shadow: 0 0 44px rgba(41,217,255,.5);
}
.logo b { color: var(--lime); text-shadow: 0 0 44px rgba(200,241,53,.5); }
.tagline {
  position: relative;
  color: var(--muted); font-family: var(--disp);
  font-size: .68rem; letter-spacing: 4px; font-weight: 700;
  margin-top: 14px;
}

.start-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: min(520px, 100%);
}

.start-form input {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line2);
  color: var(--cyan);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  text-align: center;
  font-family: var(--mono); font-size: .68rem; letter-spacing: 1px; font-weight: 700;
  text-transform: uppercase;
  transition: border-color .15s, box-shadow .15s;
}
.start-form input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 16px rgba(41,217,255,.15); }
.start-form input::placeholder { color: var(--muted); font-weight: 600; }

.rules-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; width: min(880px, 100%);
}
@media (max-width: 760px) { .rules-grid { grid-template-columns: 1fr; } }
.rule {
  background: rgba(255,255,255,.012);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  display: flex; flex-direction: column; gap: 4px;
}
.rule b { font-family: var(--disp); font-size: .6rem; letter-spacing: 2.5px; color: var(--cyan); font-weight: 700; }
.rule span { color: var(--muted); font-size: .68rem; line-height: 1.45; }

.menu-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(440px, 100%); }
/* ============ end screens ============ */

.centre.end { gap: 18px; align-items: center; text-align: center; }

.champ-badge {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--gold);
  background: radial-gradient(closest-side, rgba(255,194,51,.16), transparent);
  box-shadow: 0 0 44px rgba(255,194,51,.35), inset 0 0 26px rgba(255,194,51,.15);
}
.champ-badge span {
  font-size: 2.6rem; color: var(--gold);
  text-shadow: 0 0 22px rgba(255,194,51,.7);
}
.champ-badge.out {
  border-color: var(--red);
  background: radial-gradient(closest-side, rgba(255,61,94,.14), transparent);
  box-shadow: 0 0 44px rgba(255,61,94,.3), inset 0 0 26px rgba(255,61,94,.12);
}
.champ-badge.out span { color: var(--red); text-shadow: 0 0 22px rgba(255,61,94,.7); }

.done-title {
  font-family: var(--disp); font-style: italic; font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 3rem); letter-spacing: 6px;
}
.done-title.gold-glow { color: var(--gold); text-shadow: 0 0 48px rgba(255,194,51,.55); }
.done-title.red { color: var(--red); text-shadow: 0 0 38px rgba(255,61,94,.4); }

.end-sub { color: var(--muted); font-family: var(--disp); font-size: .64rem; letter-spacing: 2.5px; font-weight: 700; }

.fixtures { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.fixture {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 16px;
  font-size: .76rem;
}
.f-out {
  font-family: var(--mono); font-weight: 800; font-size: .9rem;
  min-width: 20px;
}
.fixture.win .f-out { color: var(--lime); }
.fixture.loss .f-out { color: var(--red); }
.f-score { font-family: var(--mono); font-weight: 700; min-width: 102px; text-align: left; }
.f-opp { font-family: var(--disp); color: var(--muted); font-size: .6rem; letter-spacing: 1.5px; font-weight: 700; }

.centre.end .btn.cta { max-width: 380px; }

/* ============ v4: legend flare ============ */

.legend-flare {
  border-color: rgba(255,194,51,.6) !important;
  box-shadow: 0 0 22px rgba(255,194,51,.22), inset 0 0 22px rgba(255,194,51,.05);
}
.roster-card.legend-flare {
  animation: legendGlow 2s ease-in-out infinite;
}
@keyframes legendGlow {
  0%,100% { box-shadow: 0 0 16px rgba(255,194,51,.18), inset 0 0 16px rgba(255,194,51,.04); }
  50% { box-shadow: 0 0 32px rgba(255,194,51,.4), inset 0 0 26px rgba(255,194,51,.09); }
}

.gold-glow { color: var(--gold); text-shadow: 0 0 28px rgba(255,194,51,.5); }

/* ============ v4: fitness & form ============ */

.fitbar {
  width: 100%; height: 5px;
  background: var(--panel3);
  border-radius: 3px; overflow: hidden;
  margin-top: 6px;
}
.fitbar i { display: block; height: 100%; border-radius: 3px; transition: width .3s; }
.fitbar.fit-hi i  { background: var(--lime); box-shadow: 0 0 8px rgba(200,241,53,.4); }
.fitbar.fit-mid i { background: var(--amber); }
.fitbar.fit-lo i  { background: var(--red); box-shadow: 0 0 8px rgba(255,61,94,.4); }

.form {
  font-family: var(--mono); font-weight: 800; font-size: .62rem;
  margin-left: auto;
}
.form.up { color: var(--lime); text-shadow: 0 0 8px rgba(200,241,53,.4); }
.form.down { color: var(--red); text-shadow: 0 0 8px rgba(255,61,94,.4); }
.form.flat { color: var(--muted); opacity: .5; }

.loss-tag {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--mono);
  font-size: .46em;
  font-weight: 800;
  color: var(--red);
  letter-spacing: 0;
  line-height: 1;
  vertical-align: middle;
  text-shadow: 0 0 8px rgba(255,61,94,.35);
}

.pm b .loss-tag { font-size: .72em; margin-left: 5px; }
.tile-val .loss-tag { font-size: .5em; margin-left: 6px; }
.rc-rating .loss-tag { font-size: .48em; margin-left: 5px; }
.fs-val .loss-tag { font-size: .45em; margin-left: 5px; }
.vs-side b .loss-tag { font-size: .42em; margin-left: 8px; }

/* ============ squad selector ============ */

.stage.team-sheet {
  grid-template-columns: minmax(280px, 330px) minmax(390px, 1fr) minmax(230px, 270px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "roster pitch summary"
    "roster pitch traits"
    "roster pitch confirm";
  align-items: stretch;
  gap: 12px;
  flex: 0 0 auto;
  height: clamp(590px, calc(100vh - 200px), 680px);
}

.team-roster {
  grid-area: roster;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 14px;
  background:
    linear-gradient(90deg, rgba(41,217,255,.035), transparent 52%),
    linear-gradient(170deg, var(--panel2), var(--panel));
}

.team-roster-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.team-roster .pool-title {
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  white-space: normal;
  line-height: .95;
}

.team-roster .roster-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 104px;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: 0 5px 2px 0;
}

.selected-player-detail {
  flex: 0 0 154px;
  min-height: 154px;
  margin-top: 10px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid var(--line2);
  border-radius: 3px;
  background: rgba(255,255,255,.018);
  scrollbar-gutter: stable;
}

.player-detail-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}

.player-detail-empty b,
.player-detail-head span,
.matchup-summary-label {
  font-family: var(--disp);
  font-size: .46rem;
  letter-spacing: 1.8px;
  color: var(--muted);
  font-weight: 700;
}

.player-detail-empty span {
  max-width: 220px;
  font-family: var(--mono);
  font-size: .44rem;
  line-height: 1.45;
  color: #484e59;
}

.player-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.player-detail-head h3 {
  margin-top: 2px;
  font-family: var(--disp);
  font-size: .67rem;
  line-height: 1.15;
  color: var(--text);
}

.player-detail-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

.player-detail-rating > b {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--lime);
}

.player-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.player-detail-stats > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 6px;
  font-family: var(--disp);
  font-size: .4rem;
  letter-spacing: 1px;
  color: var(--muted);
  background: var(--panel3);
  border: 1px solid var(--line);
}

.player-detail-stats b {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: 0;
  color: var(--text);
}

.player-detail-traits {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 7px;
}

.player-detail-trait {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 7px;
  border-left: 2px solid var(--cyan);
}

.player-detail-trait.trait-risky { border-left-color: var(--red); }
.player-detail-trait.trait-neutral { border-left-color: var(--muted); }
.player-detail-trait b { font-family: var(--disp); font-size: .48rem; letter-spacing: 1px; color: var(--cyan); }
.player-detail-trait.trait-risky b { color: var(--red); }
.player-detail-trait span { font-size: .5rem; line-height: 1.3; color: var(--text2); }
.player-detail-no-trait { font-family: var(--disp); font-size: .45rem; letter-spacing: 1.4px; color: var(--muted); }

.team-pitch-panel {
  grid-area: pitch;
  min-width: 0;
  min-height: 0;
  padding: 14px;
  background:
    radial-gradient(440px 250px at 50% 50%, rgba(53,224,124,.055), transparent 72%),
    linear-gradient(170deg, var(--panel2), var(--panel));
}

.team-pitch {
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-content: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 28px 18px;
  gap: 16px;
}

.team-pitch .prow {
  align-items: center;
  gap: 16px;
}

.team-pitch .slot,
.team-pitch .prow.two .slot {
  width: 136px;
  min-height: 74px;
  height: 74px;
  padding: 9px 11px;
  border-radius: 4px;
}

.team-pitch .slot-corner { top: 6px; right: 7px; font-size: .42rem; }
.team-pitch .fs-val { font-size: 1.4rem; }
.team-pitch .fs-name { font-size: .64rem; line-height: 1.15; }
.team-pitch .pos-badge.sm { font-size: .42rem; padding: 2px 5px; }
.team-pitch .oop-flag { font-size: .4rem; }
.team-pitch .plus { font-size: 1rem; }
.team-pitch .slot-name { font-size: .52rem; }
.team-pitch .slot-sub { font-size: .46rem; }

.team-summary {
  grid-area: summary;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.team-summary > .panel-head {
  margin-bottom: 0;
}

.matchup-summary-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sheet-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.sheet-metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 8px 7px;
  background: var(--panel3);
  border: 1px solid var(--line2);
  border-radius: 3px;
}

.sheet-metric > span {
  font-family: var(--disp);
  font-size: .4rem;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 700;
}

.sheet-metric > b {
  font-family: var(--mono);
  font-size: 1.12rem;
  line-height: 1;
  color: var(--text);
}

.sheet-metric > b.lime { color: var(--lime); }
.sheet-metric > b.cyan { color: var(--cyan); }
.sheet-metric > b.red { color: var(--red); }
.sheet-metric > b small { font-size: .5rem; color: var(--muted); }
.mobile-lock-dots { display: none; }

.opponent-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.opponent-metrics span,
.win-chance-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 8px;
  font-family: var(--disp);
  font-size: .42rem;
  letter-spacing: 1px;
  color: var(--muted);
  font-weight: 700;
  background: var(--panel3);
  border: 1px solid var(--line2);
}

.opponent-metrics b,
.win-chance-summary b {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: 0;
  color: var(--text);
}

.win-chance-summary b { font-size: 1.05rem; }
.win-chance-summary b.lime { color: var(--lime); }
.win-chance-summary b.red { color: var(--red); }

.selection-callout {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--line2);
  border-radius: 3px;
  background: rgba(255,255,255,.018);
}

.selection-callout.active {
  border-color: rgba(41,217,255,.55);
  background: rgba(41,217,255,.07);
  box-shadow: 0 0 18px rgba(41,217,255,.14);
}

.selection-callout span {
  font-family: var(--disp);
  font-size: .48rem;
  letter-spacing: 2px;
  color: var(--muted);
  font-weight: 700;
}

.selection-callout b {
  font-family: var(--disp);
  font-size: .72rem;
  letter-spacing: .4px;
  color: var(--text);
}

.selection-callout small {
  font-family: var(--mono);
  font-size: .5rem;
  line-height: 1.35;
  color: var(--text2);
}

.selection-callout.active span { color: var(--cyan); }

.team-traits {
  grid-area: traits;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
}

.team-traits > .panel-head { margin-bottom: 9px; }

.active-traits-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 3px;
}

.active-trait {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(37,217,224,.24);
  border-radius: 3px;
  background: rgba(37,217,224,.035);
}

.active-trait.trait-risky {
  border-color: rgba(255,66,88,.3);
  background: rgba(255,66,88,.035);
}

.active-trait.trait-neutral {
  border-color: rgba(185,192,204,.18);
  background: rgba(185,192,204,.025);
}

.active-trait-icon {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--lime);
  text-align: center;
}

.active-trait.trait-risky .active-trait-icon { color: var(--red); }
.active-trait.trait-neutral .active-trait-icon { color: var(--muted); }

.active-trait > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.active-trait b {
  font-family: var(--disp);
  font-size: .54rem;
  letter-spacing: 1px;
  color: var(--lime);
}

.active-trait.trait-risky b { color: var(--red); }
.active-trait.trait-neutral b { color: var(--text2); }

.active-trait small {
  font-family: var(--ui);
  font-size: .52rem;
  line-height: 1.3;
  color: var(--muted);
}

.active-trait-count {
  align-self: start;
  font-family: var(--mono);
  font-size: .52rem;
  color: var(--text2);
}

.active-traits-empty {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 10px;
  border: 1px dashed var(--line2);
  text-align: center;
}

.active-traits-empty b {
  font-family: var(--disp);
  font-size: .56rem;
  letter-spacing: 1.5px;
  color: var(--muted);
}

.active-traits-empty span {
  font-family: var(--mono);
  font-size: .48rem;
  line-height: 1.4;
  color: #484e59;
}

.team-confirm {
  grid-area: confirm;
  padding: 0;
}

.team-confirm .btn {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: .72rem;
  letter-spacing: 3px;
}

.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 9px;
}

.roster-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: linear-gradient(168deg, var(--panel3), var(--panel) 70%);
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  padding: 11px 11px 10px;
  cursor: pointer;
  transition: all .15s;
  overflow: hidden;
}

.team-roster .roster-card {
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 9px;
  border-radius: 3px;
  border-top: 3px solid var(--line2);
  background: linear-gradient(168deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}

.team-roster .roster-card::before { display: none; }
.team-roster .roster-card.r-rare { border-top-color: var(--cyan); }
.team-roster .roster-card.r-epic { border-top-color: var(--violet); }
.team-roster .roster-card.r-legend { border-top-color: var(--gold); }
.team-roster .rc-rating { font-size: 1.25rem; }
.team-roster .rc-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.team-roster .rc-name {
  min-height: 1.1em;
  overflow: hidden;
  font-size: .6rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-roster .rc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.team-roster .rc-meta span:not(.pos-badge):not(.form) { font-family: var(--mono); font-size: .46rem; color: var(--muted); font-weight: 800; }
.team-roster .rc-slot {
  align-self: stretch;
  margin-top: auto;
  padding: 4px 6px;
  border: 1px solid rgba(92,107,125,.28);
  border-radius: 3px;
  font-size: .42rem;
  line-height: 1;
  letter-spacing: 1.2px;
  text-align: center;
}
.team-roster .rc-slot.active { border-color: rgba(41,217,255,.55); background: rgba(41,217,255,.09); }
.team-roster .form { margin-left: 0; font-size: .46rem; }
.team-roster .pos-badge.sm { padding: 2px 5px; font-size: .4rem; }
.team-roster .fitbar { width: 100%; height: 2px; margin-top: 0; }

.roster-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--line2);
}
.roster-card.r-rare::before { background: var(--cyan); }
.roster-card.r-epic::before { background: var(--violet); }
.roster-card.r-legend::before { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.roster-card:hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 14px rgba(41,217,255,.12); }
.team-roster .roster-card:hover { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 8px 20px rgba(0,0,0,.35), 0 0 18px rgba(41,217,255,.12); }
.roster-card.assigned {
  border-color: rgba(92,107,125,.5);
  background: linear-gradient(168deg, rgba(92,107,125,.08), var(--panel) 70%);
}
.team-roster .roster-card.assigned { background: linear-gradient(90deg, rgba(92,107,125,.06), rgba(255,255,255,.006)); }
.roster-card.assigned:not(.selected) {
  opacity: .68;
  filter: grayscale(.25) saturate(.8);
}
.roster-card.assigned:not(.selected):hover { opacity: .9; }
.roster-card.selected {
  opacity: 1;
  filter: none;
  border-color: var(--cyan);
  background: linear-gradient(168deg, rgba(41,217,255,.14), rgba(16,20,27,.98) 72%);
  box-shadow: 0 0 0 1px rgba(41,217,255,.18), 0 0 24px rgba(41,217,255,.2);
  transform: translateY(-2px);
}
.team-roster .roster-card.selected {
  border-color: var(--cyan);
  background: linear-gradient(90deg, rgba(41,217,255,.15), rgba(41,217,255,.035));
  box-shadow: 0 0 0 1px rgba(41,217,255,.16), 0 0 20px rgba(41,217,255,.16);
}
.roster-card.selected::after {
  content: "SELECTED";
  position: absolute;
  right: 8px;
  bottom: 7px;
  font-family: var(--disp);
  font-size: .46rem;
  letter-spacing: 1.8px;
  color: var(--cyan);
  font-weight: 700;
}
.team-roster .roster-card.selected::after { display: none; }
.roster-card.dragging {
  opacity: .72;
  transform: scale(.96);
  border-color: var(--lime);
  box-shadow: 0 0 22px rgba(200,241,53,.2);
}

.rc-top { display: flex; align-items: center; gap: 7px; }
.rc-rating { font-family: var(--mono); font-weight: 800; font-size: 1.35rem; line-height: 1; color: var(--lime); }
.roster-card.r-legend .rc-rating { color: var(--gold); }
.roster-card.r-epic .rc-rating { color: #b491ff; }
.rc-name { font-family: var(--disp); font-weight: 700; font-size: .7rem; letter-spacing: .3px; color: var(--text); }
.rc-slot {
  margin-top: 2px;
  font-family: var(--disp);
  font-size: .56rem;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--muted);
}
.rc-slot.active { color: var(--cyan); }

.slot.drop-hot {
  border-color: var(--lime) !important;
  color: var(--lime) !important;
  background: rgba(200,241,53,.10) !important;
  box-shadow: 0 0 20px rgba(200,241,53,.24), inset 0 0 16px rgba(200,241,53,.06) !important;
}

.slot { color: var(--text); }
.slot.open.hot {
  cursor: pointer;
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(41,217,255,.06);
  box-shadow: 0 0 18px rgba(41,217,255,.16), inset 0 0 18px rgba(41,217,255,.04);
  animation: hintGlow 2s ease-in-out infinite;
}
.slot.open { cursor: pointer; border: 1px dashed var(--line2); color: var(--muted); background: rgba(255,255,255,.015); }
.slot.open:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }
.slot.open.hot.natural { border-color: var(--lime); color: var(--lime); background: rgba(200,241,53,.06); }
.slot.open.hot.flexfit { border-color: var(--cyan); color: var(--cyan); background: rgba(41,217,255,.06); }
.slot.open.hot.oop { border-color: var(--amber); color: var(--amber); background: rgba(255,165,61,.06); }
.slot.filled { cursor: pointer; color: var(--text); }
.slot.filled .fs-name { color: var(--text); }
.slot.filled:hover { border-color: var(--red); }

@media (max-width: 1100px) {
  .stage.team-sheet {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "summary"
      "pitch"
      "roster"
      "traits"
      "confirm";
    height: auto;
  }

  .team-pitch-panel { height: 460px; }
  .team-roster .roster-grid {
    flex: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 108px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .team-traits { max-height: 310px; }
  .selected-player-detail { flex-basis: auto; }
}

@media (max-width: 620px) {
  body {
    padding: 0;
    overflow-x: hidden;
  }

  #app {
    width: 100%;
    height: 100dvh;
    min-height: 100vh;
    padding: 10px;
    border-width: 0;
    border-radius: 0;
  }

  .team-sheet-screen {
    min-height: 0;
    gap: 8px;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .team-sheet-screen .topbar {
    min-height: 42px;
    padding: 2px 2px 9px;
    gap: 8px;
  }

  .team-sheet-screen .brand {
    font-size: 1.05rem;
  }

  .team-sheet-screen .phase-block,
  .team-sheet-screen .top-sub,
  .team-sheet-screen .budget-chip {
    display: none;
  }

  .team-sheet-screen .topbar-right {
    margin-left: auto;
  }

  .team-sheet-screen .icon-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    color: var(--cyan);
  }

  .stage.team-sheet {
    grid-template-areas:
      "summary"
      "pitch"
      "roster"
      "traits"
      "confirm";
    grid-template-rows: auto 306px auto auto minmax(54px, 1fr);
    align-content: start;
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
  }

  .team-summary {
    padding: 5px 6px 7px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
  }

  .team-summary > .panel-head,
  .team-summary .selection-callout {
    display: none;
  }

  .sheet-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .sheet-metric {
    padding: 2px;
    border: 0;
    background: transparent;
  }

  .sheet-metric > span {
    font-size: .42rem;
    letter-spacing: 1.1px;
  }

  .sheet-metric > b {
    font-size: 1.35rem;
  }

  .target-metric {
    display: flex;
  }

  .target-metric > b {
    color: var(--lime);
  }

  .chemistry-metric {
    position: relative;
  }

  .mobile-lock-dots {
    display: flex;
    position: absolute;
    right: 1px;
    bottom: 5px;
    gap: 3px;
  }

  .mobile-lock-dots .ld {
    width: 6px;
    height: 6px;
  }

  .team-pitch-panel {
    height: 306px;
    padding: 0 4px;
    border-width: 0;
    border-radius: 0;
    background: transparent;
  }

  .team-pitch {
    padding: 10px;
    gap: 5px;
    border-radius: 0;
  }

  .team-pitch .prow {
    gap: 8px;
  }

  .team-pitch .slot,
  .team-pitch .prow.two .slot {
    width: 116px;
    min-height: 60px;
    height: 60px;
    padding: 7px 8px;
  }

  .team-pitch .fs-val { font-size: 1.15rem; }
  .team-pitch .fs-name { max-width: 100%; font-size: .52rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .team-pitch .slot-corner { top: 5px; right: 5px; font-size: .36rem; }
  .team-pitch .pos-badge.sm { font-size: .34rem; padding: 2px 4px; }
  .team-pitch .oop-flag { max-width: 100%; font-size: .34rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .team-pitch .slot-name { font-size: .44rem; }
  .team-pitch .slot-sub { font-size: .38rem; }

  .team-roster {
    padding: 7px 0 6px;
    border-width: 1px 0 0;
    border-radius: 0;
    background: transparent;
  }

  .team-roster-head {
    align-items: center;
    margin: 0 6px 5px;
  }

  .team-roster .pool-title {
    font-size: 1rem;
  }

  .team-roster .roster-grid {
    display: flex;
    gap: 7px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 8px 3px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-gutter: auto;
  }

  .team-roster .roster-card {
    flex: 0 0 clamp(108px, 30vw, 126px);
    width: clamp(108px, 30vw, 126px);
    height: 110px;
    scroll-snap-align: start;
  }

  .team-roster .rc-rating { font-size: 1.18rem; }
  .team-roster .rc-name { font-size: .52rem; }
  .team-roster .rc-meta span:not(.pos-badge):not(.form) { font-size: .4rem; }

  .selected-player-detail {
    min-height: 130px;
    margin: 6px 8px 0;
    padding: 8px;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .team-traits {
    display: flex;
    max-height: none;
    padding: 7px 0 6px;
    border-width: 1px 0 0;
    border-radius: 0;
    background: transparent;
  }

  .team-traits > .panel-head {
    margin: 0 6px 6px;
  }

  .active-traits-list {
    flex-direction: row;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 8px 3px;
    scroll-snap-type: x proximity;
  }

  .active-trait {
    flex: 0 0 min(250px, 72vw);
    min-height: 66px;
    scroll-snap-align: start;
  }

  .active-traits-empty {
    flex: 1 0 calc(100% - 16px);
    min-height: 58px;
    margin: 0 8px;
    padding: 10px;
  }

  .team-confirm {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    align-items: flex-end;
    padding: 6px 4px 2px;
    background: linear-gradient(180deg, rgba(10,10,13,0), var(--bg1) 28%);
  }

  .team-confirm .btn {
    min-height: 46px;
    font-size: .7rem;
  }
}

@media (max-width: 620px) and (max-height: 780px) {
  #app {
    height: auto;
  }

  .stage.team-sheet {
    grid-template-rows: auto 306px auto auto auto;
    flex: 0 0 auto;
  }

  .team-confirm {
    align-items: stretch;
  }
}

/* ============ v4: reward pack ============ */

.pack-card.picked {
  border-color: var(--lime);
  box-shadow: 0 0 20px rgba(200,241,53,.2);
  transform: translateY(-3px);
}

.reward-swap-zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reward-swap-zone:empty {
  display: none;
}

.swap-row {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
}
.swap-chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--panel2);
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  color: var(--text2);
  padding: 7px 10px;
  cursor: pointer;
  font-family: var(--ui);
  transition: all .15s;
}
.swap-chip b { font-family: var(--mono); font-weight: 800; font-size: .82rem; color: var(--lime); }
.swap-chip span { font-family: var(--disp); font-size: .58rem; letter-spacing: 1px; font-weight: 700; }
.swap-chip:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); box-shadow: 0 0 14px rgba(255,61,94,.18); }
.swap-chip.dc-legend b { color: var(--gold); }
.swap-chip.dc-epic b { color: #b491ff; }

.event-note {
  display: flex; align-items: center; gap: 14px;
  border-radius: var(--r-sm);
  padding: 10px 16px;
  font-family: var(--disp);
}
.event-note b { font-size: .66rem; letter-spacing: 2.5px; }
.event-note span { font-size: .62rem; letter-spacing: 1px; color: var(--text2); font-weight: 600; }
.event-note.good { border: 1px solid rgba(200,241,53,.4); background: rgba(200,241,53,.05); }
.event-note.good b { color: var(--lime); }
.event-note.bad { border: 1px solid rgba(255,61,94,.4); background: rgba(255,61,94,.05); }
.event-note.bad b { color: var(--red); }

/* ============ v4: run over ============ */

.centre.runover { max-width: 640px; margin: 0 auto; width: 100%; gap: 14px; }
.centre.runover .panel { width: 100%; text-align: left; }

.cab-row {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  min-height: 44px; align-items: center;
}
.cab-trophy {
  font-size: 1.9rem;
  filter: drop-shadow(0 0 12px rgba(255,194,51,.5));
  animation: dealIn .35s cubic-bezier(.2,.8,.3,1.1) backwards;
}
.cab-row .cab-trophy:nth-child(2) { animation-delay: .07s; }
.cab-row .cab-trophy:nth-child(3) { animation-delay: .14s; }
.cab-row .cab-trophy:nth-child(4) { animation-delay: .21s; }
.cab-row .cab-trophy:nth-child(5) { animation-delay: .28s; }

.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px; width: 100%;
}
@media (max-width: 640px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-grid .tile-val { font-size: 1.2rem; }
.stat-grid .tile-val.gold-glow { color: var(--gold); }

.scorer-list { display: flex; flex-direction: column; gap: 6px; }
.scorer-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.015);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 12px;
}
.sc-rank { font-family: var(--mono); font-weight: 800; font-size: .72rem; color: var(--muted); min-width: 16px; }
.sc-name { font-size: .76rem; font-weight: 600; flex: 1; }
.sc-goals { font-family: var(--mono); font-weight: 800; color: var(--lime); }

.final-deck { justify-content: center; }

/* ============ shared responsive screen redesign ============ */

#app.play-frame {
  min-height: 0;
}

.prematch-screen,
.locked-screen,
.result-screen,
.reward-screen,
.runover-screen {
  flex: 0 0 auto;
  min-height: auto;
}

.prematch-screen .panel,
.locked-screen .panel,
.result-screen .panel,
.reward-screen .panel,
.runover-screen .panel,
.prematch-screen .bk,
.result-screen .bk {
  border-radius: 3px;
}

.prematch-screen .stage.prematch {
  min-height: 500px;
}

.prematch-screen .opp-card {
  justify-content: center;
}

.locked-screen .stage.single {
  min-height: 520px;
}

.result-screen .stage.single {
  min-height: 520px;
}

.locked-lineup {
  width: 100%;
  padding: 12px;
}

.locked-lineup > .panel-head {
  margin-bottom: 9px;
}

.locked-five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.locked-player {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--line2);
  border-top: 2px solid var(--line2);
  border-radius: 3px;
  background: rgba(255,255,255,.018);
}

.locked-player.r-rare { border-top-color: var(--cyan); }
.locked-player.r-epic { border-top-color: var(--violet); }
.locked-player.r-legend { border-top-color: var(--gold); }

.locked-player > span {
  font-family: var(--disp);
  font-size: .42rem;
  letter-spacing: 1.4px;
  color: var(--muted);
  font-weight: 700;
}

.locked-player > b {
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  color: var(--lime);
}

.locked-player.r-epic > b { color: #b491ff; }
.locked-player.r-legend > b { color: var(--gold); }

.locked-player > small {
  overflow: hidden;
  font-family: var(--disp);
  font-size: .46rem;
  line-height: 1.15;
  color: var(--text2);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opponent-lineup {
  width: 100%;
  padding: 12px;
}

.opponent-lineup .opp-mini-pitch-wrapper {
  margin-bottom: 8px;
}

.opponent-lineup > .panel-head { margin-bottom: 9px; }

.reward-screen .stage.packdraft {
  align-items: stretch;
}

.reward-screen .reward-deck,
.reward-screen .deck-panel {
  height: 100%;
}

@media (max-width: 620px) {
  #app.menu-frame,
  #app.play-frame:not(.team-sheet-frame) {
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  #app.menu-frame {
    padding: 10px;
  }

  .menu {
    justify-content: flex-start;
    gap: 14px;
    padding: 8px 0 16px;
  }

  .menu .hero {
    width: 100%;
    padding: 10px 0 2px;
  }

  .menu .hero-glow {
    top: 45%;
    width: 360px;
    height: 130px;
  }

  .menu .logo {
    font-size: clamp(2rem, 11vw, 2.7rem);
  }

  .menu .tagline {
    margin-top: 9px;
    padding: 0 12px;
    font-size: .5rem;
    line-height: 1.55;
    letter-spacing: 1.8px;
  }

  .menu .start-form {
    grid-template-columns: 1fr;
  }

  .menu .rules-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }

  .menu .rule {
    min-height: 104px;
    padding: 9px;
    border-radius: 3px;
  }

  .menu .rule b {
    font-size: .52rem;
    letter-spacing: 1.6px;
  }

  .menu .rule span {
    font-size: .61rem;
    line-height: 1.38;
  }

  .menu .menu-foot {
    gap: 8px;
  }

  .prematch-screen,
  .locked-screen,
  .result-screen,
  .reward-screen,
  .runover-screen {
    gap: 8px;
  }

  .prematch-screen,
  .locked-screen,
  .result-screen,
  .reward-screen {
    min-height: calc(100dvh - 20px);
  }

  .prematch-screen .topbar,
  .locked-screen .topbar,
  .result-screen .topbar,
  .reward-screen .topbar {
    min-height: 42px;
    padding: 2px 2px 9px;
    gap: 8px;
  }

  .prematch-screen .brand,
  .locked-screen .brand,
  .result-screen .brand,
  .reward-screen .brand {
    font-size: 1.05rem;
  }

  .prematch-screen .phase-block,
  .prematch-screen .top-sub,
  .prematch-screen .budget-chip,
  .locked-screen .phase-block,
  .locked-screen .top-sub,
  .locked-screen .budget-chip,
  .result-screen .phase-block,
  .result-screen .top-sub,
  .result-screen .budget-chip,
  .reward-screen .phase-block,
  .reward-screen .top-sub,
  .reward-screen .budget-chip {
    display: none;
  }

  .prematch-screen .topbar-right,
  .locked-screen .topbar-right,
  .result-screen .topbar-right,
  .reward-screen .topbar-right {
    margin-left: auto;
  }

  .prematch-screen .icon-btn,
  .locked-screen .icon-btn,
  .result-screen .icon-btn,
  .reward-screen .icon-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    color: var(--cyan);
  }

  .prematch-screen .bracket,
  .result-screen .bracket {
    gap: 4px;
  }

  .prematch-screen .bk,
  .result-screen .bk {
    min-width: 0;
    padding: 6px 7px;
  }

  .prematch-screen .bk-round,
  .result-screen .bk-round {
    font-size: .45rem;
    letter-spacing: 1.3px;
  }

  .prematch-screen .bk-opp,
  .result-screen .bk-opp {
    font-size: .48rem;
  }

  .prematch-screen .stage.prematch {
    grid-template-rows: auto minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
  }

  .prematch-screen .opp-card {
    gap: 10px;
    padding: 18px 14px;
  }

  .prematch-screen .opp-round {
    font-size: .58rem;
    letter-spacing: 3px;
  }

  .prematch-screen .opp-name {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }

  .prematch-screen .opp-str-num {
    font-size: 2.25rem;
  }

  .prematch-screen .opp-hint {
    font-size: .62rem;
    line-height: 1.45;
  }

  .locked-screen .stage.single,
  .result-screen .stage.single {
    flex: 1 1 auto;
    min-height: 0;
  }

  .locked-screen .centre.vcenter,
  .result-screen .centre.vcenter {
    min-height: 100%;
    justify-content: flex-start;
  }

  .locked-screen .centre.vcenter {
    gap: 10px;
    padding-top: 18px;
  }

  .locked-screen .vs-strip {
    gap: 18px;
    padding: 16px 10px;
  }

  .locked-screen .vs-side b {
    font-size: 2rem;
  }

  .locked-screen .verdict {
    font-size: .6rem;
    letter-spacing: 2px;
  }

  .locked-screen .meta-strip {
    gap: 18px;
  }

  .locked-lineup {
    padding: 9px;
  }

  .opponent-lineup {
    padding: 9px;
  }

  .locked-five {
    gap: 4px;
  }

  .locked-player {
    padding: 6px 5px;
  }

  .locked-player > span {
    font-size: .36rem;
    letter-spacing: .9px;
  }

  .locked-player > b {
    font-size: .9rem;
  }

  .locked-player > small {
    font-size: .38rem;
  }

  .locked-screen .actions {
    width: 100%;
    margin-top: auto;
  }

  .locked-screen .actions .btn.ghost {
    flex: 0 0 106px;
    padding: 11px 12px;
  }

  .locked-screen .actions .btn.cta {
    flex: 1;
  }

  .result-screen .centre.vcenter {
    gap: 12px;
    padding-top: 42px;
  }

  .result-screen .result-head {
    font-size: 2rem;
  }

  .result-screen .scoreline {
    gap: 14px;
    padding: 17px 10px;
  }

  .result-screen .scoreline .score {
    font-size: 2.45rem;
  }

  .result-screen .scoreline .team {
    min-width: 0;
    font-size: .52rem;
    letter-spacing: 1.7px;
  }

  .result-screen .events {
    max-height: 190px;
    overflow-y: auto;
  }

  .result-screen #advance-btn {
    margin-top: auto;
  }

  .reward-screen .stage.packdraft {
    grid-template-columns: minmax(0, 1fr);
    flex: 1 1 auto;
    gap: 8px;
  }

  .reward-screen .stage.packdraft > .centre {
    min-height: 100%;
  }

  .reward-screen .reward-deck {
    display: none;
  }

  .reward-screen .pool-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .reward-screen .pool-title {
    font-size: 1.45rem;
  }

  .reward-screen .pool-meta,
  .reward-screen .pm {
    width: 100%;
    min-width: 0;
  }

  .reward-screen .pm {
    overflow: hidden;
    padding: 7px 9px;
    font-size: .52rem;
    letter-spacing: 1.3px;
    text-align: center;
    text-overflow: ellipsis;
  }

  .draft-screen .pack-row,
  .reward-screen .pack-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0 22px 7px 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }

  .draft-screen .pack-option,
  .reward-screen .pack-option {
    flex: 0 0 min(296px, 80vw);
    width: min(296px, 80vw);
    scroll-snap-align: start;
  }

  .draft-screen .pack-card,
  .reward-screen .pack-card {
    min-height: 278px;
    padding: 14px 13px 13px;
    text-align: center;
  }

  .draft-screen .pack-card .pk-reveal,
  .reward-screen .pack-card .pk-reveal {
    flex-direction: column;
    display: flex;
    align-items: stretch;
    gap: 9px;
    height: 100%;
  }

  .draft-screen .pk-head,
  .reward-screen .pk-head {
    display: flex;
  }

  .draft-screen .pk-val,
  .reward-screen .pk-val {
    margin-top: 7px;
    font-size: 2.8rem;
    text-align: center;
  }

  .draft-screen .pk-name,
  .reward-screen .pk-name {
    height: 2.4em;
    min-height: 2.4em;
    font-size: .86rem;
    text-align: center;
    -webkit-line-clamp: 2;
  }

  .draft-screen .pk-traits,
  .reward-screen .pk-traits {
    min-width: 0;
    margin-top: auto;
  }

  .draft-screen .pk-trait-row,
  .reward-screen .pk-trait-row {
    min-height: 32px;
    justify-content: center;
  }

  .draft-screen .pk-trait-row small,
  .reward-screen .pk-trait-row small {
    display: none;
  }

  .draft-screen .pick-btn,
  .reward-screen .pick-btn {
    align-self: auto;
    min-height: 42px;
    padding: 10px;
    font-size: .58rem;
  }

  .pack-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
    font-family: var(--disp);
    font-size: .46rem;
    letter-spacing: 1.4px;
    color: var(--muted);
    font-weight: 700;
  }

  .pack-mobile-nav b {
    color: var(--cyan);
    font-family: var(--mono);
    font-size: .48rem;
    letter-spacing: .5px;
  }

  .reward-screen .event-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding: 9px 11px;
  }

  .reward-screen .actions {
    margin-top: auto;
    padding-bottom: 8px;
  }

  .draft-screen {
    min-height: calc(100dvh - 20px);
    gap: 8px;
  }

  .draft-screen .topbar {
    grid-template-rows: auto auto;
    min-height: 68px;
    padding-bottom: 9px;
  }

  .draft-screen .phase-block,
  .draft-screen .budget-chip {
    display: none;
  }

  .draft-screen .topbar-right {
    grid-row: 1;
  }

  .draft-screen .top-progress {
    grid-row: 2;
  }

  .draft-screen .stage.packdraft {
    grid-template-rows: auto auto;
    align-content: space-between;
    flex: 1 1 auto;
    gap: 16px;
  }

  .draft-screen .side-col {
    margin-top: auto;
  }

  .draft-screen .deck-panel {
    gap: 8px;
    min-height: 0;
    padding: 11px;
    border-radius: 3px;
  }

  .draft-screen .deck-pos-tiles {
    gap: 5px;
  }

  .draft-screen .dpt {
    padding: 6px 4px;
    border-radius: 3px;
  }

  .draft-screen .deck-empty {
    flex: 0 0 auto;
    flex-direction: row;
    min-height: 52px;
    gap: 9px;
    border-radius: 3px;
  }

  .draft-screen .deck-empty .de-plus {
    width: 26px;
    height: 26px;
  }

  .draft-screen .deck-empty small {
    display: none;
  }

  .draft-screen .deck-roster {
    flex: 0 0 auto;
    flex-direction: column;
    gap: 5px;
    max-height: min(280px, 36dvh);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 3px;
  }

  .draft-screen .dr-row {
    flex: 0 0 auto;
    width: 100%;
    border-radius: 3px;
  }

  .draft-screen .squad-status {
    padding-top: 8px;
  }

  .runover-screen .stage.single {
    min-height: 0;
  }

  .runover-screen .centre.runover {
    gap: 12px;
    justify-content: flex-start;
  }

  .runover-screen .champ-badge {
    width: 80px;
    height: 80px;
  }

  .runover-screen .champ-badge span {
    font-size: 2rem;
  }

  .runover-screen .done-title {
    font-size: 2rem;
  }
}

@media (max-width: 620px) {
  .draft-screen {
    min-height: auto;
  }

  .draft-screen .topbar {
    grid-template-rows: auto auto auto;
    min-height: 0;
  }

  .draft-screen .phase-block,
  .draft-screen .budget-chip {
    display: flex;
  }

  .draft-screen .budget-chip.gold {
    display: none;
  }

  .draft-screen .topbar-right {
    grid-row: 1 / 3;
  }

  .draft-screen .top-progress {
    grid-row: 3;
  }

  .draft-screen .stage.packdraft {
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    flex: 0 0 auto;
    gap: 16px;
  }

  .draft-screen .pack-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .draft-screen .pack-option {
    width: 100%;
    min-width: 0;
    gap: 6px;
  }

  .draft-screen .pack-card {
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    padding: 10px;
    text-align: left;
  }

  .draft-screen .pack-card .pk-reveal {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 108px;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px 10px;
    height: auto;
  }

  .draft-screen .pk-head {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .draft-screen .pk-val {
    grid-column: 1;
    grid-row: 2 / 4;
    margin-top: 0;
    font-size: 2rem;
    text-align: center;
  }

  .draft-screen .pk-name {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    min-height: 0;
    font-size: .78rem;
    text-align: left;
    -webkit-line-clamp: 1;
  }

  .draft-screen .pk-traits {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    margin-top: 0;
  }

  .draft-screen .pk-trait-row {
    min-height: 28px;
    padding: 6px 8px;
  }

  .draft-screen .pick-btn {
    grid-column: 3;
    grid-row: 2 / 4;
    align-self: stretch;
    min-height: 58px;
    padding: 8px;
    font-size: .56rem;
    letter-spacing: 1.4px;
  }

  .draft-screen .pack-mobile-nav {
    display: none;
  }

  .draft-screen .side-col {
    margin-top: 0;
  }
}

@media (max-width: 620px) {
  #app.play-frame .topbar {
    display: flex;
    min-height: 42px;
    padding: 2px 2px 9px;
    gap: 8px;
  }

  #app.play-frame .topbar .brand {
    font-size: 1.05rem;
  }

  #app.play-frame .topbar .phase-block,
  #app.play-frame .topbar .top-sub,
  #app.play-frame .topbar .budget-chip {
    display: none;
  }

  #app.play-frame .topbar-right {
    margin-left: auto;
  }

  #app.play-frame .icon-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    color: var(--cyan);
  }

  .draft-screen .draft-progress {
    flex: 0 0 auto;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }
}

/* ============ UX audit refinements ============ */

.carousel-cue {
  display: none;
}

.more-rules {
  width: min(880px, 100%);
}

.more-rules summary {
  width: max-content;
  margin: 0 auto;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  font-family: var(--disp);
  font-size: .56rem;
  letter-spacing: 2px;
  color: var(--cyan);
  font-weight: 700;
}

.more-rules summary::-webkit-details-marker { display: none; }
.more-rules summary::after { content: " +"; color: var(--lime); }
.more-rules[open] summary::after { content: " -"; }
.more-rules .rules-grid { margin-top: 8px; }

.shop-actions {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(300px, 380px);
  justify-content: center;
  gap: 10px;
  padding: 0 0 4px;
}

.shop-main {
  padding-bottom: 0;
}

.shop-actions .btn {
  width: 100%;
  min-height: 48px;
}

.shop-actions .btn.cta {
  max-width: none;
}

.replace-row.selected {
  border-color: var(--lime);
  background: rgba(200,241,53,.08);
  box-shadow: 0 0 0 1px rgba(200,241,53,.12);
}

.transfer-confirm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line2);
}

.shop-modal .modal-head {
  padding-right: 44px;
}

.transfer-confirm > span,
.incoming-compact > span {
  font-family: var(--disp);
  font-size: .5rem;
  letter-spacing: 2px;
  color: var(--lime);
  font-weight: 700;
}

.transfer-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.transfer-summary > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line2);
  background: var(--panel3);
}

.transfer-summary small {
  font-family: var(--disp);
  font-size: .45rem;
  letter-spacing: 1.4px;
  color: var(--muted);
}

.transfer-summary b {
  overflow: hidden;
  font-family: var(--disp);
  font-size: .62rem;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transfer-summary em {
  font-family: var(--mono);
  font-size: .5rem;
  color: var(--cyan);
  font-style: normal;
}

.transfer-summary > i {
  color: var(--muted);
  font-style: normal;
}

.confirm-transfer,
.pack-confirm .btn {
  max-width: none !important;
}

.pack-replace-sticky {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.incoming-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.incoming-compact b {
  overflow: hidden;
  font-family: var(--disp);
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-replace .turn-hint {
  flex: 0 0 auto;
}

.final-squad-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.final-squad-player {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255,255,255,.015);
}

.final-squad-player > b {
  font-family: var(--mono);
  color: var(--text);
}

.final-squad-player.dc-rare > b { color: var(--cyan); }
.final-squad-player.dc-epic > b { color: #b491ff; }
.final-squad-player.dc-legend > b { color: var(--gold); }

.final-squad-player > span:not(.pos-badge) {
  overflow: hidden;
  font-family: var(--disp);
  font-size: .54rem;
  color: var(--text2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1101px) {
  #app.play-frame {
    min-height: calc(100vh - 2 * clamp(8px, 1.4vw, 18px));
  }

  #app.play-frame > .screen {
    flex: 1 1 auto;
  }

  .draft-screen .stage.packdraft {
    flex: 1 1 auto;
  }

  .draft-screen .deck-panel {
    height: 500px;
    min-height: 500px;
    max-height: 500px;
    align-self: start;
  }

  .reward-screen .stage.packdraft {
    flex: 1 1 auto;
    min-height: 0;
  }

  .reward-screen .reward-deck,
  .reward-screen .deck-panel {
    height: 100%;
    min-height: 0;
    align-self: stretch;
  }

  .team-roster .roster-grid {
    grid-auto-rows: 88px;
  }

  .selected-player-detail:has(.player-detail-empty) {
    flex-basis: 74px;
    min-height: 74px;
  }
}

@media (min-width: 621px) and (max-width: 1020px) {
  .draft-screen .deck-panel {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 360px;
  }

  .draft-screen .deck-roster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    max-height: 210px;
  }
}

@media (pointer: coarse) {
  button,
  input,
  [role="button"] {
    min-height: 44px;
  }

  .icon-btn,
  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 620px) {
  #app.play-frame .icon-btn,
  .modal-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .shop-buy {
    min-height: 44px;
  }

  .shop-player .shop-buy {
    min-height: 44px;
  }

  .menu .essential-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu .more-rules .rules-grid {
    grid-template-columns: 1fr;
  }

  .menu .more-rules .rule {
    min-height: 0;
  }

  .draft-screen .stage.packdraft {
    display: grid;
    grid-template-rows: auto auto;
    gap: 10px;
  }

  .draft-screen .side-col {
    display: flex;
    grid-row: 1;
    margin-top: 0;
  }

  .draft-screen .centre {
    grid-row: 2;
  }

  .draft-screen .deck-panel {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: min(290px, 38dvh);
    padding: 10px;
  }

  .draft-screen .deck-roster {
    max-height: min(150px, 20dvh);
  }

  .team-sheet-screen,
  #app.team-sheet-frame {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .stage.team-sheet {
    display: grid;
    grid-template-rows: auto 306px auto auto auto;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .team-roster {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .team-roster .roster-grid {
    flex: none;
  }

  .selected-player-detail {
    flex: none;
    min-height: 112px;
    height: auto;
  }

  .team-traits {
    min-height: 88px;
  }

  .team-confirm {
    position: static;
    padding: 4px 4px max(8px, env(safe-area-inset-bottom));
    background: none;
  }

  .locked-screen .centre.vcenter {
    min-height: 0;
  }

  .locked-screen .locked-five {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
  }

  .locked-screen .locked-player {
    flex: 0 0 104px;
    min-height: 62px;
    scroll-snap-align: start;
  }

  .locked-screen .locked-player > small {
    font-size: .48rem;
  }

  .locked-lineup::after,
  .opponent-lineup::after {
    content: "SWIPE TO VIEW ALL FIVE";
    display: block;
    margin-top: 4px;
    font-family: var(--disp);
    font-size: .42rem;
    letter-spacing: 1.2px;
    color: var(--muted);
    text-align: right;
  }

  .locked-screen .actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    margin-top: 0;
    padding: 8px 0 max(2px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, transparent, var(--bg1) 30%);
  }

  .result-screen .centre.vcenter {
    min-height: 0;
    padding-top: 18px;
  }

  .result-screen .events {
    max-height: none;
    overflow: visible;
  }

  .result-screen #advance-btn {
    margin-top: 8px;
  }

  .shop-main {
    gap: 10px;
    padding-bottom: 0;
  }

  .shop-primary,
  .shop-split {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .shop-section {
    padding: 10px;
  }

  .shop-section-head {
    min-height: 0 !important;
    margin-bottom: 9px;
  }

  .shop-section-head h2 {
    font-size: 1rem;
  }

  .shop-player-row,
  .shop-item-row,
  .shop-split .staff-section .shop-item-row,
  .shop-primary .packs-section .shop-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 8px;
    overflow: visible;
    padding: 0;
  }

  .shop-player,
  .shop-card {
    width: auto;
    min-width: 0;
    height: 100%;
    min-height: 0;
    flex: none;
  }

  .shop-player .pack-card {
    min-height: 0;
    height: auto;
    padding: 10px;
    text-align: left;
  }

  .shop-player .pack-card .pk-reveal {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 112px;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 5px 10px;
    height: auto;
  }

  .shop-player .pk-head {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .shop-player .pk-val {
    grid-column: 1;
    grid-row: 2 / 4;
    margin: 0;
    font-size: 2rem;
    text-align: center;
  }

  .shop-player .pk-name {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    height: auto;
    font-size: .78rem;
    text-align: left;
    -webkit-line-clamp: 1;
  }

  .shop-player .pk-traits {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
    margin: 0;
  }

  .shop-player .pk-trait-row {
    min-height: 28px;
    padding: 6px 8px;
  }

  .shop-player .shop-buy {
    grid-column: 3;
    grid-row: 2 / 4;
    align-self: stretch;
    min-height: 58px;
  }

  .shop-card,
  .shop-primary .packs-section .shop-card {
    min-height: 164px;
    padding: 11px;
  }

  .shop-card h3 {
    font-size: .74rem;
  }

  .shop-card p {
    font-size: .61rem;
  }

  .shop-buy {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 7px 5px;
    text-align: center;
  }

  .staff-section .shop-item-row,
  .shop-split .staff-section .shop-item-row {
    grid-template-columns: 1fr;
  }

  .staff-section .shop-card {
    min-height: 142px;
  }

  .shop-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 2px 2px max(10px, env(safe-area-inset-bottom));
  }

  .shop-actions .btn {
    width: min(100%, 360px);
    min-height: 50px;
    margin-inline: auto;
  }

  .shop-modal {
    max-height: calc(100dvh - 36px);
  }

  .transfer-confirm {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-inline: -16px;
    padding: 12px 16px max(8px, env(safe-area-inset-bottom));
    background: #000;
    backdrop-filter: blur(12px);
  }

  .transfer-summary {
    gap: 6px;
  }

  .transfer-summary > div {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 7px;
  }

  .transfer-summary b {
    font-size: .54rem;
  }

  .reward-screen {
    min-height: 0;
  }

  .reward-screen .stage.packdraft {
    display: block;
  }

  .reward-screen .pack-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
    padding: 0;
    overflow: visible;
  }

  .reward-screen .pack-option {
    width: 100%;
    min-width: 0;
  }

  .reward-screen .pack-card {
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    padding: 10px;
    text-align: left;
  }

  .reward-screen .pack-card .pk-reveal {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 112px;
    grid-template-rows: auto auto auto;
    align-items: center;
    gap: 5px 10px;
    height: auto;
  }

  .reward-screen .pk-head {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .reward-screen .pk-val {
    grid-column: 1;
    grid-row: 2 / 4;
    margin: 0;
    font-size: 2rem;
  }

  .reward-screen .pk-name {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    height: auto;
    text-align: left;
    -webkit-line-clamp: 1;
  }

  .reward-screen .pk-traits {
    grid-column: 2;
    grid-row: 3;
    margin: 0;
  }

  .reward-screen .pk-trait-row {
    min-height: 28px;
    padding: 6px 8px;
  }

  .reward-screen .pick-btn {
    grid-column: 3;
    grid-row: 2 / 4;
    min-height: 58px;
  }

  .reward-screen .pack-mobile-nav {
    display: none;
  }

  .pack-replace {
    margin-top: 10px;
    padding: 10px;
  }

  .pack-replace-sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    align-items: stretch;
    flex-direction: column;
    padding: 8px;
    background: #000;
  }

  .pack-replace .turn-hint {
    width: 100%;
    padding: 7px;
    text-align: center;
  }

  .pack-confirm {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-inline: -10px;
    padding: 12px 10px max(8px, env(safe-area-inset-bottom));
    background: #000;
  }

  .final-squad-list {
    grid-template-columns: 1fr;
  }
}

/* Card trait descriptions are disclosed on demand. */
.pk-trait-row[data-trait-toggle] {
  cursor: help;
}

.pk-trait-row[data-trait-toggle] small {
  display: none;
  margin-top: 2px;
  white-space: normal;
}

.pk-trait-row[data-trait-toggle].is-open small {
  display: block;
}

.pk-trait-row[data-trait-toggle]:focus-visible {
  outline: 1px solid var(--cyan);
  outline-offset: -2px;
}

.trait-popover {
  position: fixed;
  z-index: 1000;
  width: min(280px, calc(100vw - 24px));
  padding: 10px 12px;
  background: #000;
  border: 1px solid var(--cyan);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
  color: var(--text);
  font-family: var(--ui);
  font-size: .72rem;
  line-height: 1.4;
  pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
  .pk-trait-row[data-trait-toggle].is-open small {
    display: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .pk-trait-row[data-trait-toggle]:hover small,
  .pk-trait-row[data-trait-toggle]:focus-visible small {
    display: block;
  }
}

/* ============================================================
   v6: Mobile slot-first UX — bottom sheets, picker, slot menu,
   auto build, opponent mini-pitch
   ============================================================ */

/* ---------- Auto Build button ---------- */

.auto-build-btn {
  font-family: var(--disp);
  font-size: .52rem;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--lime);
  background: rgba(200,241,53,.08);
  border: 1px solid rgba(200,241,53,.4);
  border-radius: 5px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.auto-build-btn:hover {
  background: rgba(200,241,53,.16);
  border-color: var(--lime);
  box-shadow: 0 0 14px rgba(200,241,53,.2);
  transform: translateY(-1px);
}

/* ---------- Slot active pick highlight ---------- */

.slot.slot-active-pick {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  animation: slotPickPulse 1.4s ease-in-out infinite;
}
@keyframes slotPickPulse {
  0%,100% { outline-color: var(--cyan); }
  50% { outline-color: var(--lime); }
}

/* ---------- Bottom sheet (player picker) ---------- */

.bottom-sheet-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  animation: bsFadeIn .22s ease-out;
}
@keyframes bsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bottom-sheet {
  position: relative;
  width: min(560px, 100%);
  max-height: 72vh;
  background: linear-gradient(180deg, #12141a 0%, #0a0b0f 100%);
  border: 1px solid var(--line2);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: 0 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  animation: bsSlideUp .28s cubic-bezier(.2,.8,.3,1.05);
  overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
}
@keyframes bsSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--line2);
  margin: 10px auto 14px;
  flex-shrink: 0;
}

.bottom-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.bottom-sheet-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bs-slot-label {
  font-family: var(--disp);
  font-size: .48rem;
  letter-spacing: 2.5px;
  font-weight: 700;
}

.bottom-sheet-head h2 {
  font-family: var(--disp2);
  font-size: 1.15rem;
  letter-spacing: .4px;
  color: var(--text);
}

.bs-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line2);
  border-radius: 7px;
  background: var(--panel2);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bs-close:hover {
  border-color: var(--red);
  color: var(--red);
}

.bs-current {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--line);
  border-radius: 6px;
  flex-shrink: 0;
}
.bs-current span {
  font-family: var(--disp);
  font-size: .42rem;
  letter-spacing: 2px;
  color: var(--muted);
  font-weight: 700;
}
.bs-current b {
  font-family: var(--mono);
  font-size: .64rem;
  color: var(--text2);
}

.bs-section-label {
  font-family: var(--disp);
  font-size: .46rem;
  letter-spacing: 2.5px;
  color: var(--muted);
  font-weight: 700;
  padding: 6px 0 4px;
  flex-shrink: 0;
}

.bs-players {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding-bottom: 8px;
  scrollbar-gutter: stable;
}

/* ---------- Player picker row ---------- */

.bs-player-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: var(--panel3);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .12s;
  flex-shrink: 0;
  min-height: 58px;
}
.bs-player-row:hover,
.bs-player-row:focus-visible {
  border-color: var(--cyan);
  background: rgba(41,217,255,.06);
  transform: translateX(3px);
}
.bs-player-row.already-in {
  opacity: .55;
  border-style: dashed;
}
.bs-player-row.already-in:hover {
  opacity: .8;
}
.bs-player-row.r-rare { border-top: 3px solid var(--cyan); }
.bs-player-row.r-epic { border-top: 3px solid var(--violet); }
.bs-player-row.r-legend { border-top: 3px solid var(--gold); box-shadow: 0 0 10px rgba(255,194,51,.08); }

.bs-pr-rating {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--lime);
  text-align: center;
}
.bs-player-row.r-legend .bs-pr-rating { color: var(--gold); }
.bs-player-row.r-epic .bs-pr-rating { color: #b491ff; }

.bs-pr-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.bs-pr-name {
  font-family: var(--disp);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .3px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bs-pr-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .46rem;
}
.bs-pr-meta span:not(.pos-badge):not(.form) {
  font-family: var(--mono);
  color: var(--muted);
  font-weight: 700;
}

.bs-pr-chem {
  font-family: var(--mono);
  font-size: .48rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.bs-pr-chem.good { color: var(--lime); }
.bs-pr-chem.bad { color: var(--amber); }

.bs-pr-slot-tag {
  font-family: var(--disp);
  font-size: .4rem;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--muted);
  padding: 3px 6px;
  border: 1px solid var(--line2);
  border-radius: 3px;
  white-space: nowrap;
}

/* Trait entries in player picker row & slot menu */
.bs-pr-traits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.bs-pr-trait {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 7px;
  border-left: 2px solid var(--cyan);
}
.bs-pr-trait.trait-risky { border-left-color: var(--red); }
.bs-pr-trait.trait-neutral { border-left-color: var(--muted); }

.bs-pr-trait b {
  font-family: var(--disp);
  font-size: .52rem;
  letter-spacing: 1px;
  color: var(--cyan);
}
.bs-pr-trait.trait-risky b { color: var(--red); }
.bs-pr-trait.trait-neutral b { color: var(--text2); }

.bs-pr-trait span {
  font-size: .56rem;
  line-height: 1.3;
  color: var(--text2);
}

/* ---------- Slot context menu ---------- */

.slot-menu-sheet {
  max-height: none;
  height: auto;
  padding-bottom: 24px;
}

.slot-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 12px;
  flex-wrap: wrap;
}
.slot-menu-head span:first-child {
  font-family: var(--disp);
  font-size: .56rem;
  letter-spacing: 2px;
  font-weight: 700;
}
.slot-menu-head b {
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--text);
}

.slot-menu-traits {
  padding: 0 0 14px;
}

.slot-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slot-menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid var(--line2);
  border-radius: 9px;
  background: var(--panel3);
  color: var(--text);
  font-family: var(--disp);
  font-size: .68rem;
  letter-spacing: 1.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
}
.slot-menu-btn span {
  font-size: 1rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.slot-menu-btn:hover {
  transform: translateX(3px);
}
.slot-menu-btn.change-btn:hover {
  border-color: var(--cyan);
  background: rgba(41,217,255,.08);
  color: var(--cyan);
}
.slot-menu-btn.remove-btn:hover {
  border-color: var(--red);
  background: rgba(255,66,88,.08);
  color: var(--red);
}
.slot-menu-btn.cancel-btn {
  color: var(--muted);
}
.slot-menu-btn.cancel-btn:hover {
  border-color: var(--line2);
  background: rgba(255,255,255,.03);
}

/* ---------- Opponent mini pitch ---------- */

.opp-lineup-preview {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.opp-lineup-preview summary {
  font-family: var(--disp);
  font-size: .46rem;
  letter-spacing: 2px;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  user-select: none;
}
.opp-lineup-preview summary:hover {
  color: var(--cyan);
}

.opp-mini-pitch-wrapper {
  margin-top: 8px;
}

.opp-mini-pitch {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #0a1410, #081009);
  border: 1px solid #15291d;
  border-radius: 6px;
}

.omp-row {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.omp-slot {
  width: 100%;
  min-height: 32px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 6px;
}
.omp-slot.empty {
  border: 1px dashed var(--line2);
  background: rgba(255,255,255,.012);
}
.omp-slot.filled {
  background: linear-gradient(165deg, var(--panel3), var(--panel));
  border: 1px solid var(--line2);
  max-width: 70px;
}
.omp-slot.r-legend { border-color: rgba(255,194,51,.4); }
.omp-slot.r-epic { border-color: rgba(131,71,255,.3); }

.omp-pos {
  font-family: var(--disp);
  font-size: .34rem;
  letter-spacing: 1.5px;
  color: var(--muted);
  font-weight: 700;
}

.omp-slot b {
  font-family: var(--mono);
  font-weight: 800;
  font-size: .72rem;
  color: var(--lime);
}

.omp-slot small {
  font-family: var(--disp);
  font-size: .42rem;
  letter-spacing: .2px;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- Mobile team sheet refinements ---------- */

@media (max-width: 1100px) {
  .bottom-sheet {
    max-height: 65vh;
    border-radius: 14px 14px 0 0;
  }
  .bs-player-row {
    min-height: 52px;
    padding: 8px 10px;
  }
}

@media (max-width: 620px) {
  .bottom-sheet {
    max-height: 60vh;
    border-radius: 12px 12px 0 0;
    padding: 0 12px 16px;
  }
  .bottom-sheet-head h2 {
    font-size: 1rem;
  }
  .bs-player-row {
    min-height: 48px;
    padding: 8px 9px;
    gap: 6px;
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
  }
  .bs-pr-rating {
    font-size: .9rem;
  }
  .bs-pr-name {
    font-size: .56rem;
  }
  .bs-pr-slot-tag {
    font-size: .36rem;
    padding: 2px 4px;
  }

  .slot-menu-sheet {
    padding-bottom: 20px;
  }
  .slot-menu-btn {
    padding: 11px 13px;
    font-size: .62rem;
  }

  .opp-mini-pitch {
    padding: 6px 8px;
  }
  .omp-slot {
    min-height: 26px;
    padding: 3px 5px;
  }
  .omp-slot b {
    font-size: .62rem;
  }
  .omp-slot small {
    font-size: .38rem;
  }
}

/* ============================================================
   UI layout fixes
   ============================================================ */

.phase-block {
  min-width: 0;
}

.screen-title {
  overflow: hidden;
  margin: 0;
  color: var(--text);
  font-family: var(--disp);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deck-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin-top: auto;
}

.deck-footer .pk-warning {
  min-width: 0;
  margin-top: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.deck-footer .squad-status {
  flex: 0 0 auto;
  min-width: 0;
}

.deck-footer .squad-status b {
  flex: 0 0 auto;
  white-space: nowrap;
}

.selected-player-detail {
  flex-basis: 176px;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
}

@media (min-width: 1101px) {
  .selected-player-detail:has(.player-detail-empty) {
    flex-basis: 116px;
    min-height: 116px;
  }
}

.match-preview-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.match-preview-stat {
  min-width: 0;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line2);
  border-radius: 3px;
  background: var(--panel3);
}

.match-preview-stat > span {
  color: var(--muted);
  font-family: var(--disp);
  font-size: .46rem;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.match-preview-stat > b {
  color: var(--text);
  font-family: var(--mono);
  font-size: 1.35rem;
  line-height: 1;
}

.match-preview-stat > b small {
  color: var(--muted);
  font-size: .55rem;
}

.match-preview-stat > small {
  overflow: hidden;
  color: var(--text2);
  font-family: var(--disp);
  font-size: .38rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.win-chance-metric {
  border-color: rgba(200,241,53,.35);
  background: rgba(200,241,53,.05);
}

.win-chance-metric > b {
  font-size: 1.42rem;
  font-weight: 800;
}

.team-mini-pitch-wrapper {
  display: none;
}

/* Rarity belongs on the top edge; red is reserved for position errors. */
.team-pitch .slot.filled::before {
  inset: 0 0 auto 0;
  width: auto;
  height: 3px;
  border-radius: 4px 4px 0 0;
  background: var(--line2);
  box-shadow: none;
}

.team-pitch .slot.filled.r-rare::before {
  background: var(--cyan);
}

.team-pitch .slot.filled.r-epic::before {
  background: var(--violet);
}

.team-pitch .slot.filled.r-legend::before {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(243,182,44,.5);
}

.team-pitch .slot.filled:not(.fit-oop):hover {
  border-color: var(--cyan);
}

.team-pitch .slot.filled.fit-oop,
.team-pitch .slot.filled.fit-oop:hover {
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(255,66,88,.14), 0 0 18px rgba(255,66,88,.12);
}

.team-pitch .oop-flag {
  color: var(--red);
}

.omp-slot.fit-oop {
  border-color: var(--red);
}

.omp-oop {
  color: var(--red);
  font-family: var(--disp);
  font-size: .28rem;
  font-weight: 700;
  letter-spacing: .8px;
}

.confirm-backdrop {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(8px);
}

.confirm-dialog {
  width: min(440px, 100%);
  padding: 24px;
  border-color: rgba(255,66,88,.45);
  box-shadow: 0 24px 70px rgba(0,0,0,.7), 0 0 28px rgba(255,66,88,.12);
  text-align: center;
}

.confirm-kicker {
  color: var(--red);
  font-family: var(--disp);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: 2.5px;
}

.confirm-dialog h2 {
  margin-top: 8px;
  font-family: var(--disp2);
  font-size: 1.35rem;
}

.confirm-dialog p {
  margin-top: 10px;
  color: var(--text2);
  font-size: .72rem;
  line-height: 1.5;
}

.confirm-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.btn.danger {
  padding: 11px 18px;
  border: 1px solid var(--red);
  background: var(--red);
  color: #fff;
}

.btn.danger:hover {
  box-shadow: 0 8px 24px rgba(255,66,88,.28);
}

@media (max-width: 620px) {
  html,
  body,
  #app,
  .screen,
  .stage {
    max-width: 100%;
  }

  #app.play-frame .topbar {
    align-items: center;
    min-width: 0;
  }

  #app.play-frame .topbar .phase-block {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
  }

  #app.play-frame .topbar .phase-block > span {
    display: none;
  }

  #app.play-frame .screen-title {
    font-size: .72rem;
    letter-spacing: 1.2px;
    white-space: normal;
  }

  #app.play-frame .topbar-right {
    flex: 0 0 auto;
  }

  .draft-screen .deck-panel {
    max-height: none;
  }

  .draft-screen .deck-roster {
    max-height: min(150px, 20dvh);
  }

  .draft-screen .pk-warning {
    font-size: .5rem;
    letter-spacing: 1px;
  }

  .selected-player-detail {
    min-height: 148px;
    padding: 12px;
  }

  .match-preview-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 8px;
  }

  .match-preview-stat {
    min-height: 62px;
    justify-content: center;
    padding: 7px 5px;
  }

  .match-preview-stat > span {
    font-size: .38rem;
    letter-spacing: .8px;
  }

  .match-preview-stat > b {
    font-size: 1.12rem;
  }

  .match-preview-stat.win-chance-metric > b {
    font-size: 1.45rem;
  }

  .locked-lineup .team-mini-pitch-wrapper {
    display: block;
  }

  .locked-screen .locked-lineup .locked-five,
  .locked-screen .opponent-lineup .opp-list {
    display: none;
  }

  .locked-lineup::after,
  .opponent-lineup::after {
    content: none;
  }

  .locked-screen .opp-mini-pitch {
    gap: 5px;
    padding: 10px 12px;
  }

  .locked-screen .omp-slot {
    min-height: 38px;
    max-width: 88px;
  }

  .confirm-dialog {
    padding: 20px 16px;
  }

  .confirm-actions {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   v7: refined sports dashboard theme
   ============================================================ */

:root {
  --bg0: #0b1119;
  --bg1: #101823;
  --panel: #141e2a;
  --panel2: #182432;
  --panel3: #1d2a39;
  --line: #283748;
  --line2: #3a4b5f;
  --text: #f4f7fa;
  --text2: #c8d2dd;
  --muted: #91a0b2;

  --cyan: #69b9d6;
  --lime: #a6cf78;
  --gold: #d8ae63;
  --red: #df7280;
  --amber: #dfa65f;
  --violet: #a18acb;

  --p-gk: #d8ae63;
  --p-def: #6db7d1;
  --p-mid: #71bd91;
  --p-att: #df7280;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-sm: 0 8px 22px rgba(2, 8, 15, .18);
  --shadow-md: 0 18px 48px rgba(2, 8, 15, .28);
}

html {
  background: var(--bg0);
}

body {
  background:
    radial-gradient(900px 520px at 50% -180px, rgba(105, 185, 214, .08), transparent 68%),
    var(--bg0);
  color: var(--text);
  line-height: 1.45;
}

#app {
  background: linear-gradient(155deg, rgba(20, 30, 42, .98), rgba(13, 21, 31, .99));
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}

.screen {
  gap: 18px;
}

::selection {
  background: rgba(105, 185, 214, .32);
}

::-webkit-scrollbar-thumb {
  background: #42546a;
}

.brand,
.logo {
  color: var(--text);
  text-shadow: none;
}

.brand b,
.logo b {
  color: var(--cyan);
  text-shadow: none;
}

.hero-glow {
  background: radial-gradient(closest-side, rgba(105, 185, 214, .12), transparent);
}

.topbar {
  gap: 18px;
  padding-bottom: 16px;
  border-bottom-color: var(--line);
}

.phase-block span,
.top-sub,
.tp-state,
.budget-chip span {
  color: var(--muted);
}

.phase-block span {
  font-size: .58rem;
  letter-spacing: 2px;
}

.phase-block b,
.screen-title {
  color: var(--text);
}

.top-sub {
  font-size: .68rem;
  line-height: 1.35;
}

.budget-chip {
  min-width: 72px;
  background: var(--panel2);
  border-color: var(--line);
  border-radius: var(--r-sm);
  padding: 8px 13px;
}

.budget-chip b {
  color: var(--text);
}

.budget-chip.coins b {
  color: var(--lime);
}

.budget-chip.gold b {
  color: var(--gold);
}

.icon-btn {
  background: var(--panel3);
  border: 1px solid var(--line2);
  color: var(--text2);
  border-radius: var(--r-sm);
}

.icon-btn:hover {
  background: rgba(223, 114, 128, .14);
  border-color: var(--red);
  color: #ffdfe3;
}

.panel,
.prematch-screen .panel,
.locked-screen .panel,
.result-screen .panel,
.reward-screen .panel,
.runover-screen .panel {
  background: linear-gradient(165deg, rgba(27, 39, 53, .98), rgba(20, 30, 42, .98));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.panel-head {
  margin-bottom: 14px;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: 2.2px;
}

.panel-head .accent,
.panel-head .cyan {
  color: var(--cyan);
}

.pool-title {
  color: var(--text);
  font-style: normal;
  letter-spacing: -.3px;
}

.pm,
.tile,
.sheet-metric,
.opponent-metrics span,
.win-chance-summary,
.match-preview-stat {
  background: rgba(255, 255, 255, .035);
  border-color: var(--line);
  border-radius: var(--r-sm);
}

.pm {
  color: var(--text2);
  font-size: .64rem;
}

.pm b {
  color: var(--text);
}

.dim {
  color: var(--muted) !important;
}

.turn-hint {
  color: var(--cyan);
  background: rgba(105, 185, 214, .08);
  border-color: rgba(105, 185, 214, .38);
  box-shadow: none;
  animation: none;
}

.btn {
  min-height: 42px;
  border-radius: 9px;
  font-size: .76rem;
  letter-spacing: 1.8px;
  transition: transform .12s, background-color .15s, border-color .15s, color .15s;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn:disabled,
.pick-btn:disabled,
.shop-buy:disabled {
  opacity: 1;
  background: #243140;
  border-color: #324256;
  color: #718096;
  box-shadow: none;
  cursor: not-allowed;
}

.btn:focus-visible,
.pick-btn:focus-visible,
.shop-buy:focus-visible,
.roster-card:focus-visible,
.slot:focus-visible {
  outline: 2px solid #9bd0e3;
  outline-offset: 2px;
}

.btn.cta {
  color: #0c1821;
  background: #78bfd7;
  box-shadow: 0 8px 20px rgba(2, 8, 15, .22);
}

.btn.cta::after {
  display: none;
}

.btn.cta:hover:not(:disabled) {
  background: #8ac9df;
  box-shadow: 0 10px 24px rgba(2, 8, 15, .3);
}

.btn.cta:disabled {
  background: #263444;
  border: 1px solid #34465a;
  color: #718096;
  box-shadow: none;
}

.btn.ghost,
.btn.neon {
  background: var(--panel3);
  border: 1px solid var(--line2);
  color: var(--text2);
}

.btn.ghost:hover,
.btn.neon:hover:not(:disabled) {
  background: #223244;
  border-color: #6e879f;
  color: var(--text);
  box-shadow: none;
}

.btn.neon.red,
.btn.neon.gold {
  color: var(--text);
}

.btn.neon small {
  color: var(--muted);
  font-size: .62rem;
}

.auto-build-btn {
  color: var(--text2);
  background: var(--panel3);
  border-color: var(--line2);
  border-radius: var(--r-sm);
}

.auto-build-btn:hover {
  color: var(--text);
  background: #223244;
  border-color: var(--cyan);
  box-shadow: none;
  transform: translateY(-1px);
}

.pos-badge {
  border: 0;
  border-radius: 999px;
  letter-spacing: 1px;
}

.p-GK {
  color: #2b210e;
}

.p-DEF {
  color: #10252d;
}

.p-MID {
  color: #10271b;
}

.p-ATT {
  color: #32141a;
}

.pack-card {
  background: linear-gradient(165deg, #202d3d, #17212e 72%);
  border-color: var(--line2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.pack-card::after {
  opacity: .45;
  mix-blend-mode: normal;
}

.pack-card::before {
  height: 4px;
  background: #56667a;
}

.pack-card.r-rare::before {
  background: var(--cyan);
}

.pack-card.r-epic::before {
  background: var(--violet);
}

.pack-card.r-legend::before {
  background: var(--gold);
}

.pack-card.reveal-legend,
.legend-flare {
  box-shadow: 0 10px 30px rgba(2, 8, 15, .3);
}

.pk-banner {
  padding: 4px 7px;
  color: var(--text2);
  background: rgba(255, 255, 255, .045);
  border-radius: 999px;
  font-size: .58rem;
  letter-spacing: 1.4px;
}

.pack-card.r-rare .pk-banner {
  color: #b8e0ee;
  background: rgba(105, 185, 214, .12);
}

.pack-card.r-epic .pk-banner {
  color: #d5c8ed;
  background: rgba(161, 138, 203, .13);
}

.pack-card.r-legend .pk-banner {
  color: #f0d59f;
  background: rgba(216, 174, 99, .13);
}

.pk-val {
  color: var(--text);
}

.pack-card.r-epic .pk-val {
  color: #ded5ef;
}

.pack-card.r-legend .pk-val {
  color: #f0d59f;
}

.pk-name {
  color: var(--text);
}

.pk-traits {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.pk-traits-label {
  padding: 8px 2px 5px;
  background: transparent;
  border-bottom: 0;
  color: var(--muted);
  font-size: .55rem;
}

.pk-trait-row {
  padding: 8px 2px;
}

.pk-trait-row + .pk-trait-row {
  border-top-color: var(--line);
}

.pk-trait-row b {
  color: var(--text);
  font-size: .65rem;
}

.pk-trait-row small {
  color: var(--text2);
  font-size: .7rem;
  line-height: 1.45;
}

.pk-trait-row.trait-risky b {
  color: #f0a1ab;
}

.pk-traits.is-empty {
  opacity: .78;
}

.pick-btn,
.shop-buy {
  min-height: 42px;
  background: #243446;
  border-color: #52677e;
  color: var(--text);
  border-radius: 9px;
}

.pack-card.r-rare .pick-btn,
.pack-card.r-epic .pick-btn,
.pack-card.r-legend .pick-btn {
  color: var(--text);
  background: #2a3b4e;
  border-color: #60778f;
}

.pick-btn:hover:not(:disabled),
.shop-buy:hover:not(:disabled) {
  background: #32485d;
  border-color: #7c96ae;
  filter: none;
  box-shadow: none;
}

.pick-btn:disabled,
.shop-buy:disabled {
  background: #263444;
  border-color: #34465a;
  color: #718096;
}

.dpt,
.dr-row,
.shop-card {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
}

.dpt,
.dr-row {
  border-radius: var(--r-sm);
}

.dpt span {
  font-size: .58rem;
}

.dr-row span {
  color: var(--text2);
  font-size: .64rem;
}

.shop-card {
  border-radius: var(--r-md);
}

.shop-card::before {
  height: 4px;
  background: var(--cyan);
}

.shop-kicker,
.shop-section-head span,
.shop-section-head small {
  font-size: .58rem;
  color: var(--muted);
}

.shop-card p {
  color: var(--text2);
  font-size: .76rem;
  line-height: 1.55;
}

.shop-section {
  background: rgba(255, 255, 255, .018);
  border-color: var(--line);
  border-radius: var(--r-md);
}

.shop-footer,
.transfer-confirm,
.pack-replace-sticky,
.pack-confirm {
  background: rgba(16, 24, 35, .96);
}

.trait-popover {
  background: var(--panel3);
  border-color: var(--line2);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  color: var(--text2);
  font-size: .76rem;
}

.rule {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  border-radius: var(--r-md);
  padding: 15px;
}

.rule b {
  color: var(--text);
  font-size: .65rem;
  letter-spacing: 1.7px;
}

.rule span {
  color: var(--text2);
  font-size: .76rem;
  line-height: 1.55;
}

.tagline,
.end-sub,
.opp-hint,
.performance-note,
.event-note span {
  color: var(--text2);
}

.start-form input {
  min-height: 46px;
  background: var(--panel2);
  border-color: var(--line2);
  color: var(--text);
  border-radius: 9px;
  font-size: .74rem;
}

.start-form input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(105, 185, 214, .12);
}

.start-form input::placeholder {
  color: var(--muted);
}

.pitch,
.opp-mini-pitch {
  background:
    linear-gradient(rgba(101, 157, 124, .055), rgba(101, 157, 124, .035)),
    #10231d;
  border-color: #2d4b3e;
}

.pitch-lines,
.pitch-lines::before,
.pitch-lines::after {
  border-color: rgba(151, 194, 170, .19);
}

.pitch-lines::before {
  border-top-color: rgba(151, 194, 170, .19);
}

.slot.empty,
.slot.open {
  background: rgba(255, 255, 255, .035);
  border-color: #536478;
}

.slot.open,
.slot.open.hot,
.slot.open.hot.natural,
.slot.open.hot.flexfit,
.slot.open.hot.oop {
  box-shadow: none;
  animation: none;
}

.slot.open:hover,
.slot.open.hot,
.slot.open.hot.flexfit {
  color: #a9d4e3;
  border-color: var(--cyan);
  background: rgba(105, 185, 214, .1);
}

.slot.open.hot.natural {
  color: #c8e7a5;
  border-color: var(--lime);
  background: rgba(166, 207, 120, .1);
}

.slot.open.hot.oop {
  color: #f1c488;
  border-color: var(--amber);
  background: rgba(223, 166, 95, .1);
}

.team-roster,
.team-pitch-panel {
  background: linear-gradient(165deg, rgba(27, 39, 53, .98), rgba(20, 30, 42, .98));
}

.team-roster .roster-card {
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-top: 4px solid #56667a;
  border-radius: var(--r-sm);
}

.team-roster .roster-card.assigned {
  background: rgba(105, 185, 214, .045);
}

.roster-card.assigned:not(.selected) {
  opacity: .82;
  filter: none;
}

.team-roster .roster-card:hover {
  border-color: #6a7e93;
  box-shadow: 0 8px 18px rgba(2, 8, 15, .2);
}

.team-roster .roster-card.selected {
  border-color: var(--cyan);
  background: rgba(105, 185, 214, .11);
  box-shadow: 0 0 0 2px rgba(105, 185, 214, .13);
}

.team-roster .rc-rating {
  color: var(--text);
}

.team-roster .roster-card.r-epic .rc-rating {
  color: #d6caea;
}

.team-roster .roster-card.r-legend .rc-rating {
  color: #efd49d;
}

.team-roster .rc-name {
  color: var(--text);
  font-size: .66rem;
}

.team-roster .rc-meta span:not(.pos-badge):not(.form) {
  color: var(--text2);
  font-size: .52rem;
}

.team-roster .rc-slot {
  color: var(--muted);
  border-color: var(--line);
  border-radius: 5px;
  font-size: .48rem;
}

.team-roster .rc-slot.active {
  color: #b8e0ee;
  border-color: rgba(105, 185, 214, .5);
  background: rgba(105, 185, 214, .1);
}

.fitbar {
  height: 4px;
  background: #293849;
}

.fitbar.fit-hi i,
.fitbar.fit-lo i {
  box-shadow: none;
}

.form.up,
.form.down,
.loss-tag,
.tile-val.lime,
.tile-val.cyan,
.tile-val.red,
.gold-glow,
.result-head.lime,
.result-head.red,
.done-title.gold-glow,
.done-title.red {
  text-shadow: none;
}

.ld.on {
  box-shadow: none;
}

.slot.slot-active-pick {
  animation: none;
}

.selected-player-detail {
  background: rgba(255, 255, 255, .025);
  border-color: var(--line);
  border-radius: var(--r-sm);
}

.player-detail-empty b,
.player-detail-head span,
.matchup-summary-label {
  color: var(--muted);
  font-size: .54rem;
}

.player-detail-empty span {
  color: var(--muted);
  font-size: .54rem;
}

.player-detail-head h3 {
  font-size: .76rem;
}

.player-detail-rating > b {
  color: var(--text);
}

.player-detail-stats > span {
  color: var(--muted);
  background: rgba(255, 255, 255, .035);
  border-color: var(--line);
  border-radius: 6px;
  font-size: .5rem;
}

.player-detail-stats b {
  font-size: .72rem;
}

.player-detail-trait {
  gap: 5px;
  padding: 7px 8px;
  border: 0;
  border-left: 3px solid var(--cyan);
  border-radius: 0 6px 6px 0;
  background: rgba(105, 185, 214, .05);
}

.player-detail-trait.trait-risky {
  border-left-color: var(--red);
  background: rgba(223, 114, 128, .05);
}

.player-detail-trait > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.player-detail-trait > div > b {
  color: var(--text);
  font-size: .58rem;
}

.player-detail-trait > span {
  color: var(--text2);
  font-size: .62rem;
  line-height: 1.45;
}

.player-trait-effects,
.active-trait-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.trait-effect {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255, 255, 255, .035);
  white-space: nowrap;
}

.trait-effect small {
  color: var(--muted);
  font-family: var(--disp);
  font-size: .4rem;
  font-weight: 700;
  letter-spacing: .7px;
}

.trait-effect b {
  color: var(--text);
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: 0;
}

.sheet-metric > span,
.opponent-metrics span,
.win-chance-summary {
  color: var(--muted);
  font-size: .5rem;
}

.sheet-metric > b.lime,
.sheet-metric > b.cyan,
.win-chance-summary b.lime {
  color: var(--text);
}

.selection-callout {
  background: rgba(255, 255, 255, .025);
  border-color: var(--line);
  border-radius: var(--r-sm);
}

.selection-callout.active {
  border-color: rgba(105, 185, 214, .5);
  background: rgba(105, 185, 214, .08);
  box-shadow: none;
}

.selection-callout span {
  font-size: .54rem;
}

.selection-callout b {
  font-size: .78rem;
}

.selection-callout small {
  color: var(--text2);
  font-size: .56rem;
}

.team-traits {
  gap: 10px;
}

.team-traits > .panel-head {
  margin-bottom: 0;
}

.trait-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.trait-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
  padding: 7px 8px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.trait-total span {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--disp);
  font-size: .43rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-overflow: ellipsis;
}

.trait-total b {
  color: var(--text);
  font-family: var(--mono);
  font-size: .7rem;
}

.trait-total.warning b {
  color: #f1c488;
}

.trait-total.negative b {
  color: #f0a1ab;
}

.trait-rating-impact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  background: rgba(166, 207, 120, .075);
  border: 1px solid rgba(166, 207, 120, .28);
  border-radius: 8px;
}

.trait-rating-impact > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.trait-rating-impact span,
.trait-source-label {
  color: var(--muted);
  font-family: var(--disp);
  font-size: .46rem;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.trait-rating-impact small {
  color: var(--text2);
  font-family: var(--mono);
  font-size: .5rem;
}

.trait-rating-impact > b {
  color: #cbe7aa;
  font-family: var(--mono);
  font-size: 1.15rem;
}

.trait-stack-note {
  padding: 6px 8px;
  color: var(--muted);
  background: rgba(223, 166, 95, .07);
  border-left: 3px solid var(--amber);
  font-family: var(--disp);
  font-size: .44rem;
  letter-spacing: .8px;
}

.trait-stack-note b {
  color: #f1c488;
}

.trait-source-label {
  margin-top: 1px;
}

.active-traits-list {
  gap: 6px;
}

.active-trait {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 9px;
  background: rgba(255, 255, 255, .025);
  border-color: var(--line);
  border-radius: var(--r-sm);
}

.active-trait.trait-risky,
.active-trait.trait-neutral {
  background: rgba(255, 255, 255, .025);
  border-color: var(--line);
}

.active-trait-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--text);
  background: #253648;
  border-radius: 7px;
  font-size: .8rem;
}

.active-trait.trait-risky .active-trait-icon {
  color: #ffdfe3;
  background: rgba(223, 114, 128, .15);
}

.active-trait > div {
  gap: 5px;
}

.active-trait-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.active-trait b,
.active-trait.trait-risky b,
.active-trait.trait-neutral b {
  color: var(--text);
  font-size: .62rem;
}

.active-trait-count {
  color: var(--muted);
  font-size: .54rem;
}

.active-trait small {
  color: var(--text2);
  font-size: .58rem;
  line-height: 1.4;
}

.active-traits-empty {
  border-color: var(--line2);
  border-radius: var(--r-sm);
}

.active-traits-empty b {
  color: var(--text2);
  font-size: .62rem;
}

.active-traits-empty span {
  color: var(--muted);
  font-size: .56rem;
}

.bottom-sheet {
  background: linear-gradient(180deg, #1b2837, #111a25);
  border-color: var(--line2);
  box-shadow: 0 -12px 36px rgba(2, 8, 15, .42);
}

.bottom-sheet-backdrop,
.shop-modal-backdrop,
.confirm-backdrop {
  background: rgba(5, 10, 16, .76);
}

.bs-player-row,
.slot-menu-btn,
.bs-current {
  background: rgba(255, 255, 255, .035);
  border-color: var(--line);
}

.bs-player-row:hover,
.bs-player-row:focus-visible {
  border-color: var(--cyan);
  background: rgba(105, 185, 214, .09);
}

.bs-pr-name {
  font-size: .66rem;
}

.bs-pr-meta span:not(.pos-badge):not(.form),
.bs-pr-chem,
.bs-pr-trait span {
  color: var(--text2);
  font-size: .58rem;
}

.bs-pr-trait b {
  color: var(--text);
  font-size: .58rem;
}

.locked-player,
.omp-slot.filled,
.replace-row,
.scorer-row,
.fixture {
  background: rgba(255, 255, 255, .03);
  border-color: var(--line);
  border-radius: var(--r-sm);
}

.locked-player > small,
.omp-slot small,
.replace-row small {
  color: var(--text2);
}

.result-head,
.done-title {
  color: var(--text);
}

.champ-badge,
.champ-badge.out,
.legend-flare,
.roster-card.legend-flare {
  box-shadow: none;
  animation: none;
}

@media (min-width: 1101px) {
  .stage.team-sheet {
    height: clamp(680px, calc(100vh - 120px), 740px);
  }

  .team-traits {
    gap: 6px;
    padding: 10px;
  }

  .trait-total {
    padding: 5px 7px;
  }

  .trait-rating-impact {
    padding: 6px 8px;
  }

  .active-trait {
    padding: 7px;
  }

  .active-trait-icon {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 1100px) {
  #app {
    border-radius: 0;
  }

  .stage.team-sheet {
    gap: 12px;
  }

  .team-traits {
    max-height: none;
  }

  .active-traits-list {
    max-height: 260px;
  }
}

@media (max-width: 620px) {
  body {
    background: var(--bg0);
  }

  #app,
  #app.menu-frame,
  #app.play-frame:not(.team-sheet-frame) {
    background: var(--bg1);
    border: 0;
    box-shadow: none;
  }

  .screen {
    gap: 10px;
  }

  #app.play-frame .topbar,
  .team-sheet-screen .topbar {
    padding: 7px 3px 11px;
  }

  .panel,
  .prematch-screen .panel,
  .locked-screen .panel,
  .result-screen .panel,
  .reward-screen .panel,
  .runover-screen .panel {
    border-radius: 10px;
  }

  .tagline {
    font-size: .6rem;
    line-height: 1.6;
  }

  .menu .rule {
    min-height: 118px;
    padding: 12px;
    border-radius: 10px;
  }

  .menu .rule b {
    font-size: .61rem;
  }

  .menu .rule span {
    font-size: .7rem;
    line-height: 1.5;
  }

  .draft-screen .pack-card,
  .reward-screen .pack-card {
    border-radius: 10px;
  }

  .draft-screen .pk-banner,
  .reward-screen .pk-banner {
    font-size: .55rem;
  }

  .draft-screen .pk-name,
  .reward-screen .pk-name {
    font-size: .82rem;
  }

  .draft-screen .pk-trait-row b,
  .reward-screen .pk-trait-row b {
    font-size: .6rem;
  }

  .draft-screen .pick-btn,
  .reward-screen .pick-btn {
    font-size: .62rem;
  }

  .team-summary {
    padding: 8px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--line);
    border-radius: 10px;
  }

  .sheet-metric {
    padding: 5px 6px;
  }

  .sheet-metric > span {
    font-size: .48rem;
  }

  .team-pitch-panel {
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
  }

  .team-pitch {
    border-radius: 8px;
  }

  .team-pitch .fs-name {
    font-size: .6rem;
  }

  .team-pitch .slot-corner {
    font-size: .42rem;
  }

  .team-pitch .pos-badge.sm,
  .team-pitch .oop-flag {
    font-size: .4rem;
  }

  .team-pitch .slot-name {
    font-size: .5rem;
  }

  .team-pitch .slot-sub {
    font-size: .44rem;
  }

  .team-roster,
  .team-traits {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
  }

  .team-roster-head,
  .team-traits > .panel-head {
    margin-inline: 0;
  }

  .team-roster .roster-grid {
    padding-inline: 0;
  }

  .team-roster .roster-card {
    flex-basis: clamp(122px, 35vw, 142px);
    width: clamp(122px, 35vw, 142px);
    height: 122px;
    padding: 10px;
  }

  .team-roster .rc-name {
    font-size: .61rem;
  }

  .team-roster .rc-meta span:not(.pos-badge):not(.form) {
    font-size: .48rem;
  }

  .selected-player-detail {
    margin-inline: 0;
    min-height: 142px;
    padding: 10px;
  }

  .player-detail-trait > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .trait-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trait-total {
    min-height: 42px;
  }

  .trait-total span {
    font-size: .47rem;
  }

  .trait-total b {
    font-size: .76rem;
  }

  .trait-rating-impact span,
  .trait-source-label {
    font-size: .5rem;
  }

  .trait-rating-impact small {
    font-size: .54rem;
  }

  .active-traits-list {
    flex-direction: column;
    max-height: none;
    overflow: visible;
    padding: 0;
  }

  .active-trait {
    flex: none;
    width: 100%;
    min-height: 78px;
  }

  .active-trait b {
    font-size: .66rem;
  }

  .active-trait small {
    font-size: .62rem;
  }

  .trait-effect small {
    font-size: .43rem;
  }

  .trait-effect b {
    font-size: .56rem;
  }

  .team-confirm {
    padding: 12px 0 max(4px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(16, 24, 35, 0), var(--bg1) 30%);
  }

  .bottom-sheet-head h2 {
    font-size: 1.08rem;
  }

  .bs-pr-name {
    font-size: .62rem;
  }

  .bs-pr-meta span:not(.pos-badge):not(.form),
  .bs-pr-chem,
  .bs-pr-trait span {
    font-size: .54rem;
  }

  .match-preview-stat > span,
  .locked-player > span,
  .omp-pos {
    font-size: .46rem;
  }

  .match-preview-stat > small,
  .locked-player > small,
  .omp-slot small {
    font-size: .48rem;
  }
}

/* ============================================================
   v8: neutral graphite theme and compact rarity markers
   ============================================================ */

:root {
  --bg0: #111315;
  --bg1: #17191c;
  --panel: #1c1f23;
  --panel2: #22262b;
  --panel3: #292e34;
  --line: #353a41;
  --line2: #4a515b;
  --text: #f3f4f5;
  --text2: #cbd0d5;
  --muted: #939aa3;

  --cyan: #bcc2c9;
  --lime: #a8c884;
  --gold: #c9a96e;
  --red: #d77b86;
  --amber: #d0a36a;
  --violet: #9c89b4;

  --p-gk: #c9a96e;
  --p-def: #9ca9b2;
  --p-mid: #79aa8a;
  --p-att: #d77b86;
}

html,
body {
  background: var(--bg0);
}

body {
  background:
    radial-gradient(900px 520px at 50% -180px, rgba(255, 255, 255, .045), transparent 68%),
    var(--bg0);
}

#app,
#app.menu-frame,
#app.play-frame:not(.team-sheet-frame) {
  background: linear-gradient(155deg, #1b1e22, #151719);
}

.panel,
.prematch-screen .panel,
.locked-screen .panel,
.result-screen .panel,
.reward-screen .panel,
.runover-screen .panel,
.team-roster,
.team-pitch-panel {
  background: linear-gradient(165deg, #24282d, #1c1f23);
}

.budget-chip,
.icon-btn,
.btn.ghost,
.btn.neon,
.auto-build-btn,
.bottom-sheet {
  background: var(--panel2);
}

.btn.cta {
  color: #181a1d;
  background: #d2d5d8;
}

.btn.cta:hover:not(:disabled) {
  background: #e0e2e4;
}

.btn.ghost:hover,
.btn.neon:hover:not(:disabled),
.auto-build-btn:hover {
  color: var(--text);
  background: #30343a;
  border-color: #747b84;
}

.turn-hint,
.selection-callout.active,
.slot.open.hot,
.slot.open.hot.flexfit,
.bs-player-row:hover,
.bs-player-row:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, .065);
  border-color: #777e87;
  box-shadow: none;
}

.start-form input:focus {
  border-color: #858c95;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .08);
}

.team-roster .roster-card.assigned {
  background: rgba(255, 255, 255, .045);
}

.team-roster .roster-card.selected {
  border-color: #8b929b;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .07);
}

.team-roster .rc-slot.active {
  color: var(--text);
  border-color: #737a83;
  background: rgba(255, 255, 255, .06);
}

.player-detail-trait {
  border-left-color: #8f969e;
  background: rgba(255, 255, 255, .035);
}

.player-detail-trait.trait-risky {
  border-left-color: var(--red);
  background: rgba(215, 123, 134, .05);
}

.selection-callout.active span {
  color: var(--text2);
}

.active-trait-icon {
  background: #343941;
}

.trait-popover {
  border-color: var(--line2);
}

/* Rarity is shown with a compact corner pip, not a full-width stripe. */
.r-common,
.dc-common {
  --rarity-mark: #666d76;
}

.r-rare,
.dc-rare {
  --rarity-mark: #aeb5bd;
}

.r-epic,
.dc-epic {
  --rarity-mark: #9c89b4;
}

.r-legend,
.dc-legend {
  --rarity-mark: #c9a96e;
}

.bigcard::before,
.pack-card::before {
  display: none;
}

.pack-card {
  background: linear-gradient(165deg, #2a2e34, #202328 72%);
  border-color: var(--line2);
}

.pack-card.r-common {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .025), transparent 48%),
    linear-gradient(165deg, #2a2e34, #202328 72%);
}

.pack-card.r-rare {
  background:
    linear-gradient(155deg, rgba(174, 181, 189, .12), transparent 52%),
    linear-gradient(165deg, #2b3036, #21252a 72%);
  border-color: rgba(174, 181, 189, .55);
}

.pack-card.r-epic {
  background:
    linear-gradient(155deg, rgba(156, 137, 180, .18), transparent 54%),
    linear-gradient(165deg, #2d2a33, #222027 72%);
  border-color: rgba(156, 137, 180, .65);
}

.pack-card.r-legend {
  background:
    linear-gradient(155deg, rgba(201, 169, 110, .2), transparent 56%),
    linear-gradient(165deg, #302c25, #24211d 72%);
  border-color: rgba(201, 169, 110, .72);
}

.pack-card .pk-banner {
  color: var(--text2);
  background: rgba(255, 255, 255, .055);
  border: 1px solid var(--line);
}

.pack-card .pk-head > .pk-banner,
.pack-card .pk-head > .pos-badge.sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 68px;
  min-height: 24px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .55rem;
  line-height: 1;
  letter-spacing: 1.2px;
  text-align: center;
}

.pack-card.r-rare .pk-banner {
  color: #f0f2f4;
  background: rgba(174, 181, 189, .16);
  border-color: rgba(174, 181, 189, .55);
}

.pack-card.r-epic .pk-banner {
  color: #eadff5;
  background: rgba(156, 137, 180, .2);
  border-color: rgba(156, 137, 180, .62);
}

.pack-card.r-legend .pk-banner {
  color: #f3dfb8;
  background: rgba(201, 169, 110, .2);
  border-color: rgba(201, 169, 110, .68);
}

@keyframes legendRevealGlow {
  0%, 100% {
    border-color: rgba(201, 169, 110, .72);
    box-shadow: 0 10px 30px rgba(2, 8, 15, .3);
  }
  40% {
    border-color: rgba(226, 201, 150, .95);
    box-shadow: 0 0 0 1px rgba(201, 169, 110, .2), 0 12px 34px rgba(2, 8, 15, .38);
  }
}

.pk-val {
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: -.06em;
}

.pick-btn,
.shop-buy,
.pack-card.r-rare .pick-btn,
.pack-card.r-epic .pick-btn,
.pack-card.r-legend .pick-btn {
  color: var(--text);
  background: #30343a;
  border-color: #5b626b;
}

.pick-btn:hover:not(:disabled),
.shop-buy:hover:not(:disabled) {
  background: #3a3f45;
  border-color: #777e87;
}

.roster-card,
.team-roster .roster-card,
.slot.filled,
.bs-player-row,
.locked-player,
.omp-slot.filled {
  --rarity-mark: #666d76;
  position: relative;
}

.roster-card.r-rare,
.team-roster .roster-card.r-rare,
.slot.filled.r-rare,
.bs-player-row.r-rare,
.locked-player.r-rare,
.omp-slot.filled.r-rare {
  --rarity-mark: #aeb5bd;
}

.roster-card.r-epic,
.team-roster .roster-card.r-epic,
.slot.filled.r-epic,
.bs-player-row.r-epic,
.locked-player.r-epic,
.omp-slot.filled.r-epic {
  --rarity-mark: #9c89b4;
}

.roster-card.r-legend,
.team-roster .roster-card.r-legend,
.slot.filled.r-legend,
.bs-player-row.r-legend,
.locked-player.r-legend,
.omp-slot.filled.r-legend {
  --rarity-mark: #c9a96e;
}

.roster-card::before,
.team-roster .roster-card::before,
.slot.filled::before,
.team-pitch .slot.filled::before {
  content: "";
  display: block;
  position: absolute;
  inset: 8px 8px auto auto;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 2px;
  background: var(--rarity-mark);
  box-shadow: none;
}

.team-roster .roster-card {
  border: 1px solid var(--line);
}

.team-roster .roster-card.r-rare,
.team-roster .roster-card.r-epic,
.team-roster .roster-card.r-legend {
  border-top-color: var(--line);
}

.bs-player-row {
  border: 1px solid var(--line);
  padding-right: 22px;
}

.bs-player-row.r-rare,
.bs-player-row.r-epic,
.bs-player-row.r-legend {
  border-top: 1px solid var(--line);
  box-shadow: none;
}

.bs-player-row::before,
.locked-player::after,
.omp-slot.filled::after {
  content: "";
  position: absolute;
  inset: 8px 8px auto auto;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--rarity-mark);
  box-shadow: none;
}

.locked-player {
  border: 1px solid var(--line);
}

.locked-player.r-rare,
.locked-player.r-epic,
.locked-player.r-legend {
  border-top-color: var(--line);
}

.omp-slot.filled {
  border-color: var(--line);
}

.omp-slot.filled.r-epic,
.omp-slot.filled.r-legend {
  border-color: var(--line);
}

.slot.filled .fs-val,
.roster-card .rc-rating,
.bs-pr-rating,
.locked-player > b,
.omp-slot b {
  color: var(--text);
}

.slot.filled.r-epic .fs-val,
.roster-card.r-epic .rc-rating,
.bs-player-row.r-epic .bs-pr-rating,
.locked-player.r-epic > b {
  color: #cbbdde;
}

.slot.filled.r-legend .fs-val,
.roster-card.r-legend .rc-rating,
.bs-player-row.r-legend .bs-pr-rating,
.locked-player.r-legend > b {
  color: #e2c996;
}

.slot.filled::before,
.team-pitch .slot.filled::before {
  inset: auto 8px 8px auto;
}

.pack-card {
  --flare-rgb: 174,181,189;
}

.pack-card.reveal-common,
.pack-card.reveal-rare {
  --flare-rgb: 174,181,189;
}

.pack-card.reveal-epic {
  --flare-rgb: 156,137,180;
}

.pack-card.reveal-legend {
  --flare-rgb: 201,169,110;
}

.hero-glow {
  background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent);
}

.bk.now {
  border-color: #666d76;
  background: linear-gradient(170deg, rgba(255, 255, 255, .055), var(--panel));
  box-shadow: none;
}

.shop-card::before {
  inset: 13px 13px auto auto;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #8e959e;
}

.shop-card.shop-consumable::before {
  background: var(--lime);
}

.shop-card.shop-staff::before {
  background: var(--gold);
}

@media (max-width: 620px) {
  #app,
  #app.menu-frame,
  #app.play-frame:not(.team-sheet-frame) {
    background: var(--bg1);
  }

  .team-summary,
  .team-roster,
  .team-traits,
  .team-pitch-panel {
    background: var(--panel);
  }

  .roster-card::before,
  .team-roster .roster-card::before,
  .slot.filled::before,
  .team-pitch .slot.filled::before,
  .bs-player-row::before,
  .locked-player::after,
  .omp-slot.filled::after {
    width: 6px;
    height: 6px;
  }
}

/* ============================================================
   v9: premium football personality pass
   Keeps the v7/v8 layout refinements, restores hierarchy, colour,
   player-card reward, and broadcast-style match emphasis.
   ============================================================ */

:root {
  --bg0: #07100d;
  --bg1: #0b1517;
  --panel: #111b21;
  --panel2: #17252c;
  --panel3: #1d2c34;
  --line: #2b3d46;
  --line2: #425864;
  --text: #f7faf7;
  --text2: #c9d4d0;
  --muted: #84948f;

  --cyan: #35c7e8;
  --lime: #b8f05f;
  --gold: #f1c45b;
  --red: #f06473;
  --amber: #f2a84b;
  --violet: #a979ff;

  --p-gk: #f1c45b;
  --p-def: #35c7e8;
  --p-mid: #50d989;
  --p-att: #f06473;

  --broadcast-blue: #15465a;
  --pitch-a: #10281f;
  --pitch-b: #0b1d18;
  --shadow-sm: 0 10px 24px rgba(0, 0, 0, .22);
  --shadow-md: 0 20px 54px rgba(0, 0, 0, .34);
}

html,
body {
  background: var(--bg0);
}

body {
  background:
    radial-gradient(880px 520px at 15% -140px, rgba(53, 199, 232, .13), transparent 70%),
    radial-gradient(760px 480px at 88% -180px, rgba(184, 240, 95, .08), transparent 68%),
    linear-gradient(180deg, #07100d, #091215 54%, #070c0d);
}

#app,
#app.menu-frame,
#app.play-frame:not(.team-sheet-frame) {
  background:
    linear-gradient(120deg, rgba(53, 199, 232, .035), transparent 38%),
    linear-gradient(160deg, #102027, #0a1316 74%);
  border-color: rgba(88, 119, 130, .55);
  box-shadow: var(--shadow-md);
}

.panel,
.prematch-screen .panel,
.locked-screen .panel,
.result-screen .panel,
.reward-screen .panel,
.runover-screen .panel,
.team-roster,
.team-pitch-panel,
.shop-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 42%),
    linear-gradient(165deg, var(--panel2), var(--panel));
  border-color: rgba(79, 109, 120, .78);
  box-shadow: var(--shadow-sm);
}

.panel-head {
  color: #a8b7b2;
  letter-spacing: 2.5px;
}

.panel-head .accent,
.panel-head .cyan,
.shop-kicker,
.more-rules summary {
  color: var(--cyan);
}

.brand {
  color: var(--text);
  text-shadow: 0 3px 18px rgba(0, 0, 0, .35);
}

.brand b,
.logo b {
  color: var(--lime);
}

.logo {
  color: var(--text);
  text-shadow: 0 16px 42px rgba(0, 0, 0, .35);
}

.hero-glow {
  background:
    radial-gradient(closest-side, rgba(53, 199, 232, .16), transparent 70%),
    radial-gradient(closest-side at 70% 55%, rgba(184, 240, 95, .1), transparent 70%);
}

.budget-chip {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)),
    #142128;
  border-color: rgba(78, 108, 120, .9);
}

.budget-chip b {
  color: var(--text);
}

.budget-chip.coins {
  border-color: rgba(184, 240, 95, .45);
}

.budget-chip.coins b,
.coin-total b,
.sc-goals {
  color: var(--lime);
}

.budget-chip.gold b,
.gold-glow,
.done-title.gold-glow {
  color: var(--gold);
}

.btn,
.pick-btn,
.shop-buy,
.auto-build-btn {
  border-radius: 8px;
}

.btn.cta {
  color: #061310;
  background:
    linear-gradient(180deg, #d9ff78, #93df41 54%, #68b92e);
  border: 1px solid rgba(222, 255, 128, .55);
  box-shadow: 0 10px 0 rgba(0, 0, 0, .18), 0 18px 34px rgba(87, 184, 52, .18);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .28);
}

.btn.cta:hover:not(:disabled) {
  background:
    linear-gradient(180deg, #ecff9b, #a5ed4d 54%, #76c936);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .18), 0 22px 42px rgba(104, 201, 54, .24);
}

.btn.cta:active:not(:disabled),
.pick-btn:active:not(:disabled),
.shop-buy:active:not(:disabled) {
  transform: translateY(1px);
}

.btn.ghost,
.btn.neon,
.auto-build-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
  border-color: rgba(92, 121, 132, .85);
  color: var(--text2);
}

.btn.ghost:hover,
.btn.neon:hover:not(:disabled),
.auto-build-btn:hover {
  background: rgba(53, 199, 232, .08);
  border-color: rgba(53, 199, 232, .72);
  color: #ddf8ff;
}

.btn.neon.red,
.btn.danger {
  border-color: rgba(240, 100, 115, .75);
  background: rgba(240, 100, 115, .12);
  color: #ffd8dd;
}

.btn.neon.red:hover:not(:disabled),
.btn.danger:hover {
  background: rgba(240, 100, 115, .2);
  box-shadow: 0 12px 28px rgba(240, 100, 115, .18);
}

.pick-btn,
.shop-buy,
.pack-card.r-rare .pick-btn,
.pack-card.r-epic .pick-btn,
.pack-card.r-legend .pick-btn {
  color: #061310;
  background: linear-gradient(180deg, #b7eefb, #35c7e8);
  border: 1px solid rgba(147, 231, 250, .68);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
}

.pick-btn:hover:not(:disabled),
.shop-buy:hover:not(:disabled) {
  background: linear-gradient(180deg, #d6f8ff, #4fd2ef);
  border-color: rgba(213, 248, 255, .86);
  box-shadow: 0 12px 24px rgba(53, 199, 232, .18);
}

.shop-buy b {
  color: #092016;
}

.pack-card.r-legend .pick-btn {
  background: linear-gradient(180deg, #ffe49c, #f1c45b 58%, #c58d2f);
  border-color: rgba(255, 229, 162, .8);
}

.pack-card.r-epic .pick-btn {
  color: #fff;
  background: linear-gradient(180deg, #b79aff, #8053e8);
  border-color: rgba(190, 162, 255, .8);
}

.btn:disabled,
.pick-btn:disabled,
.shop-buy:disabled {
  background: #243139;
  border-color: #34464f;
  color: #71817d;
  box-shadow: none;
  text-shadow: none;
}

.pos-badge {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.p-GK { color: #201602; }
.p-DEF { color: #031b22; }
.p-MID { color: #031a0d; }
.p-ATT { color: #2a060c; }

.pool-title,
.opp-name,
.result-head,
.done-title {
  color: var(--text);
  font-style: italic;
  letter-spacing: .3px;
}

.pm,
.tile,
.dpt,
.dr-row,
.shop-card,
.sheet-metric,
.opponent-metrics span,
.win-chance-summary,
.match-preview-stat,
.locked-player,
.omp-slot.filled,
.replace-row,
.scorer-row,
.fixture {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border-color: rgba(73, 100, 110, .78);
}

.tile-val,
.sheet-metric > b,
.match-preview-stat > b,
.opp-profile-metrics b {
  color: var(--text);
  font-size: 1.24rem;
}

.tile-val.lime,
.sheet-metric > b.lime,
.match-preview-stat > b.lime,
.opp-profile-metrics span:first-child b {
  color: var(--lime);
}

.tile-val.cyan,
.sheet-metric > b.cyan,
.match-preview-stat > b.cyan,
.opp-profile-metrics span:last-child b {
  color: var(--cyan);
}

.tile-val.red,
.sheet-metric > b.red,
.match-preview-stat > b.red {
  color: var(--red);
}

.sheet-metric.chemistry-metric,
.win-chance-summary,
.match-preview-stat.win-chance-metric {
  background:
    linear-gradient(135deg, rgba(184, 240, 95, .13), rgba(53, 199, 232, .06)),
    rgba(255, 255, 255, .028);
  border-color: rgba(184, 240, 95, .43);
}

.sheet-metric.chemistry-metric > b,
.win-chance-summary b.lime,
.win-chance-summary b.red,
.match-preview-stat.win-chance-metric > b {
  color: var(--lime);
}

.win-chance-summary {
  min-height: 62px;
  padding: 12px 14px;
  border-left: 4px solid var(--lime);
}

.win-chance-summary span {
  color: #dce9e2;
  font-size: .58rem;
}

.win-chance-summary b {
  font-size: 1.6rem;
}

.match-preview-stats {
  gap: 10px;
}

.match-preview-stat {
  min-height: 88px;
}

.match-preview-stat.win-chance-metric {
  order: -1;
  grid-column: 1 / -1;
  min-height: 96px;
  background:
    linear-gradient(115deg, rgba(184, 240, 95, .18), rgba(53, 199, 232, .08) 55%, rgba(241, 196, 91, .09)),
    #142229;
}

.match-preview-stat.win-chance-metric > span {
  color: #dce9e2;
}

.match-preview-stat.win-chance-metric > b {
  font-size: clamp(2.15rem, 5vw, 3rem);
  letter-spacing: -.04em;
}

.match-preview-stat.win-chance-metric > small {
  color: var(--gold);
}

.opp-card {
  background:
    linear-gradient(140deg, rgba(53, 199, 232, .08), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 48%),
    linear-gradient(165deg, #172831, #101a20);
}

.opp-round,
.bk.now .bk-round,
.verdict.v-cyan b {
  color: var(--cyan);
}

.opp-name {
  text-shadow: 0 12px 34px rgba(0, 0, 0, .45);
}

.matchup-mini span {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(73, 100, 110, .78);
}

.matchup-mini span:last-child {
  border-color: rgba(184, 240, 95, .42);
  background: rgba(184, 240, 95, .08);
}

.pack-card {
  --rarity-mark: #5b6870;
  background:
    radial-gradient(220px 160px at 50% -30px, rgba(255, 255, 255, .08), transparent 70%),
    linear-gradient(165deg, #263642, #17232b 74%);
  border: 1px solid rgba(76, 101, 111, .86);
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
}

.pack-card::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto 0;
  width: auto;
  height: 4px;
  border-radius: 10px 10px 0 0;
  background: var(--rarity-mark);
}

.pack-card.r-common {
  --rarity-mark: #7f8b8a;
}

.pack-card.r-rare {
  --rarity-mark: var(--cyan);
  background:
    radial-gradient(240px 170px at 50% -34px, rgba(53, 199, 232, .22), transparent 72%),
    linear-gradient(165deg, #24404b, #17252c 74%);
  border-color: rgba(53, 199, 232, .55);
}

.pack-card.r-epic {
  --rarity-mark: var(--violet);
  background:
    radial-gradient(260px 185px at 50% -36px, rgba(169, 121, 255, .28), transparent 72%),
    linear-gradient(165deg, #302646, #1d2030 74%);
  border-color: rgba(169, 121, 255, .66);
}

.pack-card.r-legend {
  --rarity-mark: var(--gold);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .08), transparent 32%, rgba(241, 196, 91, .08) 64%, transparent),
    radial-gradient(280px 205px at 50% -40px, rgba(241, 196, 91, .38), transparent 72%),
    linear-gradient(165deg, #41341c, #1e241f 76%);
  border-color: rgba(241, 196, 91, .82);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34), 0 0 0 1px rgba(241, 196, 91, .18);
}

.pack-card .pk-head > .pk-banner,
.pack-card .pk-head > .pos-badge.sm {
  flex: 0 1 auto;
  max-width: none;
}

.pk-banner {
  color: var(--text2);
  background: rgba(5, 14, 17, .48);
  border: 1px solid rgba(255, 255, 255, .1);
}

.pack-card.r-rare .pk-banner {
  color: #d9f8ff;
  background: rgba(53, 199, 232, .15);
  border-color: rgba(53, 199, 232, .45);
}

.pack-card.r-epic .pk-banner {
  color: #eee5ff;
  background: rgba(169, 121, 255, .17);
  border-color: rgba(169, 121, 255, .5);
}

.pack-card.r-legend .pk-banner {
  color: #fff2ca;
  background: rgba(241, 196, 91, .18);
  border-color: rgba(241, 196, 91, .58);
}

.pk-val {
  color: var(--text);
  font-family: var(--disp2);
  font-size: clamp(2.8rem, 5vw, 3.65rem);
  letter-spacing: 0;
  text-shadow: 0 8px 22px rgba(0, 0, 0, .44);
}

.pack-card.r-rare .pk-val {
  color: #d9f8ff;
}

.pack-card.r-epic .pk-val {
  color: #eee5ff;
}

.pack-card.r-legend .pk-val {
  color: #fff2ca;
}

.pk-name {
  color: var(--text);
  font-size: .94rem;
}

.pk-traits {
  border-top-color: rgba(255, 255, 255, .09);
}

.pk-trait-row b {
  color: #d9f8ff;
}

.pk-trait-row.trait-risky b {
  color: #ffc2c9;
}

.legend-flare,
.roster-card.legend-flare,
.pack-card.reveal-legend {
  box-shadow: 0 18px 40px rgba(0, 0, 0, .32), 0 0 0 1px rgba(241, 196, 91, .2);
}

@keyframes legendRevealGlow {
  0%, 100% {
    border-color: rgba(241, 196, 91, .82);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .32), 0 0 0 1px rgba(241, 196, 91, .18);
  }
  42% {
    border-color: rgba(255, 236, 175, .98);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .38), 0 0 30px rgba(241, 196, 91, .32);
  }
}

.roster-card,
.team-roster .roster-card,
.slot.filled,
.bs-player-row,
.locked-player,
.omp-slot.filled,
.final-squad-player {
  --rarity-mark: #7f8b8a;
}

.roster-card.r-rare,
.team-roster .roster-card.r-rare,
.slot.filled.r-rare,
.bs-player-row.r-rare,
.locked-player.r-rare,
.omp-slot.filled.r-rare,
.final-squad-player.dc-rare {
  --rarity-mark: var(--cyan);
}

.roster-card.r-epic,
.team-roster .roster-card.r-epic,
.slot.filled.r-epic,
.bs-player-row.r-epic,
.locked-player.r-epic,
.omp-slot.filled.r-epic,
.final-squad-player.dc-epic {
  --rarity-mark: var(--violet);
}

.roster-card.r-legend,
.team-roster .roster-card.r-legend,
.slot.filled.r-legend,
.bs-player-row.r-legend,
.locked-player.r-legend,
.omp-slot.filled.r-legend,
.final-squad-player.dc-legend {
  --rarity-mark: var(--gold);
}

.team-roster .roster-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .045), transparent 48%),
    rgba(255, 255, 255, .035);
  border-color: rgba(76, 101, 111, .78);
}

.team-roster .roster-card::before,
.roster-card::before,
.slot.filled::before,
.team-pitch .slot.filled::before,
.bs-player-row::before,
.locked-player::after,
.omp-slot.filled::after {
  background: var(--rarity-mark);
  box-shadow: 0 0 12px rgba(241, 196, 91, .18);
}

.team-roster .roster-card.r-legend {
  border-color: rgba(241, 196, 91, .58);
  background:
    linear-gradient(135deg, rgba(241, 196, 91, .13), transparent 52%),
    rgba(255, 255, 255, .04);
}

.team-roster .rc-rating,
.rc-rating,
.slot.filled .fs-val,
.bs-pr-rating,
.locked-player > b,
.omp-slot b,
.final-squad-player > b {
  color: var(--text);
  font-weight: 800;
}

.team-roster .roster-card.r-rare .rc-rating,
.roster-card.r-rare .rc-rating,
.slot.filled.r-rare .fs-val,
.bs-player-row.r-rare .bs-pr-rating,
.locked-player.r-rare > b,
.final-squad-player.dc-rare > b {
  color: #b9f0ff;
}

.team-roster .roster-card.r-epic .rc-rating,
.roster-card.r-epic .rc-rating,
.slot.filled.r-epic .fs-val,
.bs-player-row.r-epic .bs-pr-rating,
.locked-player.r-epic > b,
.final-squad-player.dc-epic > b {
  color: #dbcaff;
}

.team-roster .roster-card.r-legend .rc-rating,
.roster-card.r-legend .rc-rating,
.slot.filled.r-legend .fs-val,
.bs-player-row.r-legend .bs-pr-rating,
.locked-player.r-legend > b,
.final-squad-player.dc-legend > b {
  color: #ffe4a1;
}

.team-roster .roster-card.selected {
  border-color: rgba(53, 199, 232, .76);
  background:
    linear-gradient(135deg, rgba(53, 199, 232, .16), transparent 55%),
    rgba(255, 255, 255, .04);
  box-shadow: 0 0 0 2px rgba(53, 199, 232, .13), 0 14px 28px rgba(0, 0, 0, .22);
}

.pitch,
.team-pitch,
.opp-mini-pitch {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 72px),
    linear-gradient(90deg, rgba(255, 255, 255, .025), transparent 18%, rgba(255, 255, 255, .018) 50%, transparent 82%, rgba(255, 255, 255, .025)),
    linear-gradient(180deg, var(--pitch-a), var(--pitch-b));
  border-color: rgba(76, 132, 100, .58);
}

.pitch-lines,
.pitch-lines::before,
.pitch-lines::after {
  border-color: rgba(153, 230, 178, .24);
}

.pitch-lines::before {
  border-top-color: rgba(153, 230, 178, .24);
}

.slot.empty,
.slot.open {
  background: rgba(7, 18, 17, .54);
  border-color: rgba(136, 164, 156, .5);
}

.slot.open:hover,
.slot.open.hot,
.slot.open.hot.flexfit {
  color: #d9f8ff;
  border-color: var(--cyan);
  background: rgba(53, 199, 232, .11);
}

.slot.open.hot.natural,
.slot.drop-hot {
  color: #e4ffbb !important;
  border-color: var(--lime) !important;
  background: rgba(184, 240, 95, .12) !important;
}

.slot.open.hot.oop {
  color: #ffd194;
  border-color: var(--amber);
  background: rgba(242, 168, 75, .12);
}

.slot.filled {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .045), transparent 54%),
    linear-gradient(165deg, #1d2c34, #101a20);
  border-color: rgba(76, 101, 111, .86);
}

.team-pitch .slot.filled.fit-oop,
.team-pitch .slot.filled.fit-oop:hover {
  border-color: rgba(240, 100, 115, .78);
}

.fitbar.fit-hi i,
.form.up,
.trait-rating-impact > b {
  color: var(--lime);
}

.fitbar.fit-hi i {
  background: var(--lime);
}

.fitbar.fit-mid i {
  background: var(--amber);
}

.fitbar.fit-lo i,
.form.down,
.loss-tag {
  background: var(--red);
  color: var(--red);
}

.form.down,
.loss-tag {
  background: transparent;
}

.trait-total,
.trait-rating-impact,
.active-trait,
.selected-player-detail,
.selection-callout,
.player-detail-stats > span,
.bs-player-row,
.slot-menu-btn,
.bs-current {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(73, 100, 110, .78);
}

.trait-rating-impact {
  background:
    linear-gradient(135deg, rgba(184, 240, 95, .13), transparent),
    rgba(255, 255, 255, .035);
  border-color: rgba(184, 240, 95, .38);
}

.active-trait-icon {
  background: rgba(53, 199, 232, .13);
  color: #d9f8ff;
}

.active-trait.trait-risky .active-trait-icon {
  background: rgba(240, 100, 115, .14);
}

.shop-card {
  background:
    linear-gradient(140deg, rgba(53, 199, 232, .07), transparent 52%),
    rgba(255, 255, 255, .032);
}

.shop-card::before {
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(53, 199, 232, .28);
}

.shop-card.shop-consumable::before {
  background: var(--lime);
}

.shop-card.shop-staff::before {
  background: var(--gold);
}

.shop-section-head h2,
.shop-card h3 {
  color: var(--text);
}

.bracket .bk {
  background: rgba(255, 255, 255, .025);
}

.bk.won {
  border-color: rgba(184, 240, 95, .45);
}

.bk.won .bk-round {
  color: var(--lime);
}

.bk.lost {
  border-color: rgba(240, 100, 115, .48);
}

.bk.lost .bk-round {
  color: var(--red);
}

.bk.now {
  border-color: rgba(53, 199, 232, .62);
  background:
    linear-gradient(135deg, rgba(53, 199, 232, .11), transparent),
    rgba(255, 255, 255, .028);
}

.result-head.lime {
  color: var(--lime);
}

.result-head.red,
.done-title.red {
  color: var(--red);
}

.champ-badge {
  background: radial-gradient(closest-side, rgba(241, 196, 91, .2), transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

.bottom-sheet {
  background:
    linear-gradient(180deg, rgba(53, 199, 232, .06), transparent 34%),
    linear-gradient(180deg, #1a2b34, #0f191f);
}

.trait-popover,
.shop-modal {
  background: var(--panel2);
}

@media (max-width: 620px) {
  body {
    background: var(--bg0);
  }

  #app,
  #app.menu-frame,
  #app.play-frame:not(.team-sheet-frame) {
    background: var(--bg1);
    box-shadow: none;
  }

  .match-preview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .match-preview-stat.win-chance-metric {
    grid-column: 1 / -1;
    min-height: 84px;
  }

  .win-chance-summary {
    min-height: 54px;
    padding: 9px 10px;
  }

  .win-chance-summary b {
    font-size: 1.42rem;
  }

  .draft-screen .pk-val,
  .reward-screen .pk-val,
  .shop-player .pk-val {
    font-size: 2.15rem;
  }

  .draft-screen .pack-card,
  .reward-screen .pack-card,
  .shop-player .pack-card {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, .05), transparent 52%),
      linear-gradient(165deg, #263642, #17232b 74%);
  }

  .draft-screen .pack-card.r-rare,
  .reward-screen .pack-card.r-rare,
  .shop-player .pack-card.r-rare {
    background:
      linear-gradient(135deg, rgba(53, 199, 232, .16), transparent 54%),
      linear-gradient(165deg, #24404b, #17252c 74%);
  }

  .draft-screen .pack-card.r-epic,
  .reward-screen .pack-card.r-epic,
  .shop-player .pack-card.r-epic {
    background:
      linear-gradient(135deg, rgba(169, 121, 255, .2), transparent 56%),
      linear-gradient(165deg, #302646, #1d2030 74%);
  }

  .draft-screen .pack-card.r-legend,
  .reward-screen .pack-card.r-legend,
  .shop-player .pack-card.r-legend {
    background:
      linear-gradient(135deg, rgba(241, 196, 91, .18), transparent 56%),
      linear-gradient(165deg, #41341c, #1e241f 76%);
  }
}

/* ============================================================
   v10: broadcast finish refinement
   Removes asymmetric card-edge treatments and reduces gloss.
   ============================================================ */

:root {
  --bg0: #08100f;
  --bg1: #0c1517;
  --panel: #111b20;
  --panel2: #17242a;
  --panel3: #1d2a31;
  --line: #31434b;
  --line2: #465b65;
  --text: #f4f8f5;
  --text2: #c6d1cd;
  --muted: #879691;

  --cyan: #48b6d0;
  --lime: #a6d76b;
  --gold: #d8b35c;
  --red: #d86b79;
  --amber: #d89a52;
  --violet: #9674d6;

  --p-gk: #d8b35c;
  --p-def: #48b6d0;
  --p-mid: #63bf82;
  --p-att: #d86b79;
}

body {
  background:
    radial-gradient(880px 520px at 20% -150px, rgba(72, 182, 208, .09), transparent 70%),
    radial-gradient(760px 480px at 90% -180px, rgba(166, 215, 107, .055), transparent 68%),
    linear-gradient(180deg, #08100f, #0a1214 56%, #080d0e);
}

#app,
#app.menu-frame,
#app.play-frame:not(.team-sheet-frame) {
  background:
    linear-gradient(160deg, #102026, #0a1316 74%);
}

.panel,
.prematch-screen .panel,
.locked-screen .panel,
.result-screen .panel,
.reward-screen .panel,
.runover-screen .panel,
.team-roster,
.team-pitch-panel,
.shop-section {
  background: linear-gradient(165deg, #17242a, #111b20);
  border-width: 1px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}

.brand,
.logo,
.opp-name,
.pk-val {
  text-shadow: none;
}

.hero-glow {
  background: radial-gradient(closest-side, rgba(72, 182, 208, .1), transparent 70%);
}

.budget-chip,
.pm,
.tile,
.dpt,
.dr-row,
.shop-card,
.sheet-metric,
.opponent-metrics span,
.win-chance-summary,
.match-preview-stat,
.locked-player,
.omp-slot.filled,
.replace-row,
.scorer-row,
.fixture,
.trait-total,
.trait-rating-impact,
.active-trait,
.selected-player-detail,
.selection-callout,
.player-detail-stats > span,
.bs-player-row,
.slot-menu-btn,
.bs-current {
  background: rgba(255, 255, 255, .035);
  border-width: 1px;
  border-color: rgba(78, 104, 114, .74);
  box-shadow: none;
}

.btn.cta {
  color: #071211;
  background: #a8d96c;
  border: 1px solid rgba(166, 215, 107, .78);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .24);
  text-shadow: none;
}

.btn.cta:hover:not(:disabled) {
  background: #b6e477;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .26);
}

.btn.ghost,
.btn.neon,
.auto-build-btn,
.pick-btn,
.shop-buy,
.pack-card.r-rare .pick-btn,
.pack-card.r-epic .pick-btn,
.pack-card.r-legend .pick-btn {
  background: #22323a;
  border: 1px solid rgba(91, 119, 130, .86);
  box-shadow: none;
  text-shadow: none;
}

.btn.ghost,
.btn.neon,
.auto-build-btn {
  color: var(--text2);
}

.pick-btn,
.shop-buy,
.pack-card.r-rare .pick-btn,
.pack-card.r-epic .pick-btn,
.pack-card.r-legend .pick-btn {
  color: var(--text);
}

.btn.ghost:hover,
.btn.neon:hover:not(:disabled),
.auto-build-btn:hover,
.pick-btn:hover:not(:disabled),
.shop-buy:hover:not(:disabled) {
  background: #2a3b44;
  border-color: rgba(111, 145, 156, .9);
  color: var(--text);
  box-shadow: none;
}

.shop-buy b {
  color: var(--lime);
}

.btn.neon.red,
.btn.danger {
  background: rgba(216, 107, 121, .12);
  border-color: rgba(216, 107, 121, .72);
  color: #f4c4ca;
}

.btn.neon.red:hover:not(:disabled),
.btn.danger:hover {
  background: rgba(216, 107, 121, .17);
  box-shadow: none;
}

.pos-badge {
  box-shadow: none;
}

.sheet-metric.chemistry-metric,
.win-chance-summary,
.match-preview-stat.win-chance-metric {
  background: rgba(166, 215, 107, .075);
  border-color: rgba(166, 215, 107, .34);
}

.win-chance-summary {
  border-left-width: 1px;
  position: relative;
}

.win-chance-summary::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--lime);
}

.match-preview-stat.win-chance-metric {
  background:
    linear-gradient(135deg, rgba(166, 215, 107, .12), rgba(72, 182, 208, .045)),
    #142229;
}

.pack-card {
  --rarity-mark: #6f7d7b;
  background: linear-gradient(165deg, #26343c, #17232a 74%);
  border: 1px solid rgba(78, 104, 114, .86);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

.pack-card::before {
  inset: 12px 12px auto auto;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--rarity-mark);
}

.bigcard {
  border-width: 1px;
}

.bigcard::before {
  inset: 12px 12px auto auto;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--cyan);
  box-shadow: none;
}

.bigcard.r-legend::before,
.bigcard.r-pro::before,
.bigcard.r-semi::before,
.bigcard.r-amateur::before {
  box-shadow: none;
}

.pack-card::after {
  display: none;
}

.pack-card.r-common {
  --rarity-mark: #6f7d7b;
}

.pack-card.r-rare {
  --rarity-mark: var(--cyan);
  background: linear-gradient(165deg, #223942, #17242a 74%);
  border-color: rgba(72, 182, 208, .48);
}

.pack-card.r-epic {
  --rarity-mark: var(--violet);
  background: linear-gradient(165deg, #2b263b, #1c202e 74%);
  border-color: rgba(150, 116, 214, .52);
}

.pack-card.r-legend {
  --rarity-mark: var(--gold);
  background: linear-gradient(165deg, #342c1d, #1d241f 76%);
  border-color: rgba(216, 179, 92, .62);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
}

.pack-card .pk-head > .pk-banner,
.pack-card .pk-head > .pos-badge.sm,
.pk-banner {
  background: rgba(6, 14, 17, .5);
  border-width: 1px;
  box-shadow: none;
}

.pack-card.r-rare .pk-banner {
  color: #cdebf2;
  background: rgba(72, 182, 208, .11);
}

.pack-card.r-epic .pk-banner {
  color: #ded3f2;
  background: rgba(150, 116, 214, .13);
}

.pack-card.r-legend .pk-banner {
  color: #ead49c;
  background: rgba(216, 179, 92, .14);
}

.pack-card.r-rare .pk-val {
  color: #cdebf2;
}

.pack-card.r-epic .pk-val {
  color: #ded3f2;
}

.pack-card.r-legend .pk-val {
  color: #ead49c;
}

.legend-flare,
.roster-card.legend-flare,
.pack-card.reveal-legend {
  box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
}

@keyframes legendRevealGlow {
  0%, 100% {
    border-color: rgba(216, 179, 92, .62);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
  }
  42% {
    border-color: rgba(232, 203, 139, .9);
    box-shadow: 0 18px 38px rgba(0, 0, 0, .34);
  }
}

.team-roster .roster-card,
.roster-card,
.slot.filled,
.bs-player-row,
.locked-player,
.omp-slot.filled,
.final-squad-player {
  border-width: 1px;
  box-shadow: none;
}

.team-roster .roster-card::before,
.roster-card::before,
.slot.filled::before,
.team-pitch .slot.filled::before,
.bs-player-row::before,
.locked-player::after,
.omp-slot.filled::after,
.shop-card::before {
  box-shadow: none;
}

.team-roster .roster-card.r-rare .rc-rating,
.roster-card.r-rare .rc-rating,
.slot.filled.r-rare .fs-val,
.bs-player-row.r-rare .bs-pr-rating,
.locked-player.r-rare > b,
.final-squad-player.dc-rare > b {
  color: #cdebf2;
}

.team-roster .roster-card.r-epic .rc-rating,
.roster-card.r-epic .rc-rating,
.slot.filled.r-epic .fs-val,
.bs-player-row.r-epic .bs-pr-rating,
.locked-player.r-epic > b,
.final-squad-player.dc-epic > b {
  color: #ded3f2;
}

.team-roster .roster-card.r-legend .rc-rating,
.roster-card.r-legend .rc-rating,
.slot.filled.r-legend .fs-val,
.bs-player-row.r-legend .bs-pr-rating,
.locked-player.r-legend > b,
.final-squad-player.dc-legend > b {
  color: #ead49c;
}

.team-roster .roster-card.selected {
  border-color: rgba(72, 182, 208, .68);
  background: rgba(72, 182, 208, .09);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
}

.pitch,
.team-pitch,
.opp-mini-pitch {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, #10261f, #0b1c18);
}

.slot.filled {
  background: linear-gradient(165deg, #1d2a31, #10191e);
}

.player-detail-trait,
.bs-pr-trait,
.trait-stack-note {
  border-left-width: 0;
  border: 1px solid rgba(78, 104, 114, .68);
  border-radius: 6px;
}

.player-detail-trait.trait-risky,
.bs-pr-trait.trait-risky {
  border-color: rgba(216, 107, 121, .5);
}

.slot.open.hot.natural,
.slot.drop-hot {
  color: #dcedc6 !important;
  border-color: rgba(166, 215, 107, .74) !important;
  background: rgba(166, 215, 107, .09) !important;
}

.slot.open:hover,
.slot.open.hot,
.slot.open.hot.flexfit {
  color: #cdebf2;
  border-color: rgba(72, 182, 208, .74);
  background: rgba(72, 182, 208, .08);
}

.slot.open.hot.oop {
  color: #edc894;
  border-color: rgba(216, 154, 82, .72);
  background: rgba(216, 154, 82, .09);
}

.fitbar.fit-hi i {
  background: var(--lime);
}

.fitbar.fit-mid i {
  background: var(--amber);
}

.fitbar.fit-lo i {
  background: var(--red);
}

.shop-card {
  background: rgba(255, 255, 255, .035);
}

.bottom-sheet {
  background: linear-gradient(180deg, #192930, #10191e);
  box-shadow: 0 -14px 32px rgba(0, 0, 0, .38);
}

.champ-badge {
  background: rgba(216, 179, 92, .12);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}

@media (max-width: 620px) {
  .draft-screen .pack-card,
  .reward-screen .pack-card,
  .shop-player .pack-card {
    background: linear-gradient(165deg, #26343c, #17232a 74%);
  }

  .draft-screen .pack-card.r-rare,
  .reward-screen .pack-card.r-rare,
  .shop-player .pack-card.r-rare {
    background: linear-gradient(165deg, #223942, #17242a 74%);
  }

  .draft-screen .pack-card.r-epic,
  .reward-screen .pack-card.r-epic,
  .shop-player .pack-card.r-epic {
    background: linear-gradient(165deg, #2b263b, #1c202e 74%);
  }

  .draft-screen .pack-card.r-legend,
  .reward-screen .pack-card.r-legend,
  .shop-player .pack-card.r-legend {
    background: linear-gradient(165deg, #342c1d, #1d241f 76%);
  }
}

/* ============================================================
   v11: card header clarity
   Card colour already communicates rarity; keep position pills clear.
   ============================================================ */

.pack-card::before,
.bigcard::before {
  display: none;
}

.pack-card {
  --rarity-mark: transparent;
}

.pack-card .pk-head {
  align-items: center;
}

.pack-card .pk-head > .pos-badge.sm {
  flex: 0 0 auto;
  min-width: 42px;
  max-width: none;
  min-height: 24px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .18);
  font-weight: 800;
}

.pack-card .pk-head > .pos-badge.sm.p-GK {
  background: var(--p-gk);
  color: #1d1502;
}

.pack-card .pk-head > .pos-badge.sm.p-DEF {
  background: var(--p-def);
  color: #03171d;
}

.pack-card .pk-head > .pos-badge.sm.p-MID {
  background: var(--p-mid);
  color: #03180d;
}

.pack-card .pk-head > .pos-badge.sm.p-ATT {
  background: var(--p-att);
  color: #24070c;
}

.pack-card .pk-head > .pk-banner {
  flex: 0 1 auto;
  min-height: 24px;
  padding: 5px 9px;
}

/* ============================================================
   v12: remove redundant header markers
   Rarity is carried by the card surface; position is plain metadata.
   ============================================================ */

.win-chance-summary::before {
  content: none;
}

.pack-card .pk-head {
  justify-content: space-between;
}

.pack-card .pk-head > .pos-badge.sm,
.pack-card .pk-head > .pos-badge.sm.p-GK,
.pack-card .pk-head > .pos-badge.sm.p-DEF,
.pack-card .pk-head > .pos-badge.sm.p-MID,
.pack-card .pk-head > .pos-badge.sm.p-ATT {
  order: -1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text2);
  box-shadow: none;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.pack-card .pk-head > .pk-banner {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .6rem;
}

.pack-card.r-rare .pk-banner,
.pack-card.r-epic .pk-banner,
.pack-card.r-legend .pk-banner {
  background: transparent;
  border: 0;
}

/* ============================================================
   v13: card header alignment and mobile lock-dot flow
   ============================================================ */

.pack-card .pk-head {
  align-items: baseline;
  min-height: 16px;
  line-height: 1;
}

.pack-card .pk-head > .pos-badge.sm,
.pack-card .pk-head > .pos-badge.sm.p-GK,
.pack-card .pk-head > .pos-badge.sm.p-DEF,
.pack-card .pk-head > .pos-badge.sm.p-MID,
.pack-card .pk-head > .pos-badge.sm.p-ATT,
.pack-card .pk-head > .pk-banner {
  display: block;
  height: auto;
  min-height: 0;
  line-height: 1;
}

.pack-card .pk-head > .pos-badge.sm,
.pack-card .pk-head > .pos-badge.sm.p-GK,
.pack-card .pk-head > .pos-badge.sm.p-DEF,
.pack-card .pk-head > .pos-badge.sm.p-MID,
.pack-card .pk-head > .pos-badge.sm.p-ATT {
  font-size: .64rem;
}

.pack-card .pk-head > .pk-banner {
  font-size: .64rem;
}

@media (max-width: 620px) {
  .draft-screen .pack-card .pk-head,
  .reward-screen .pack-card .pk-head,
  .shop-player .pack-card .pk-head {
    align-items: baseline;
    min-height: 16px;
  }

  .chemistry-metric {
    overflow: visible;
  }

  .mobile-lock-dots {
    position: static;
    display: flex;
    align-self: flex-end;
    gap: 3px;
    margin-top: 4px;
    padding-right: 1px;
  }

  .mobile-lock-dots .ld {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
  }
}

/* ============================================================
   v14: sharper matchup stat blocks
   Echoes the compact YOUR DECK tiles for team and opponent stats.
   ============================================================ */

.match-preview-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border-radius: 3px;
}

.match-preview-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(88, 113, 122, .86);
  border-radius: 2px;
  background: rgba(5, 12, 14, .28);
}

.your-preview-group {
  grid-column: span 3;
}

.opponent-preview-group {
  grid-column: span 2;
}

.match-preview-group-label,
.matchup-summary-label {
  color: var(--text2);
  font-family: var(--disp);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.match-preview-group-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.opponent-preview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.match-preview-stat,
.sheet-metric,
.opponent-metrics span {
  min-height: 66px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 9px 7px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid rgba(90, 116, 126, .88);
  text-align: center;
}

.match-preview-stat > span,
.sheet-metric > span,
.opponent-metrics span {
  color: var(--muted);
  font-family: var(--disp);
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: 1.25px;
}

.match-preview-stat > b,
.sheet-metric > b,
.opponent-metrics b {
  font-size: 1.26rem;
  font-weight: 800;
}

.match-preview-stat.win-chance-metric {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  min-height: 66px;
  padding: 11px 14px;
  border-radius: 2px;
  text-align: left;
  background: rgba(255, 255, 255, .028);
  border-color: rgba(90, 116, 126, .88);
}

.match-preview-stat.win-chance-metric > b {
  justify-self: start;
  color: var(--chance-color);
  font-size: clamp(2rem, 4.4vw, 2.7rem);
}

.match-preview-stat.win-chance-metric > small {
  justify-self: end;
  color: var(--chance-color);
  font-family: var(--disp);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  white-space: nowrap;
}

.team-summary .matchup-summary-group {
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(88, 113, 122, .86);
  border-radius: 2px;
  background: rgba(5, 12, 14, .28);
}

.team-summary .sheet-metrics,
.team-summary .opponent-metrics {
  gap: 7px;
}

.team-summary .sheet-metric {
  border-radius: 2px;
}

.team-summary .chemistry-metric {
  background: rgba(166, 215, 107, .055);
  border-color: rgba(166, 215, 107, .3);
}

.chance-green {
  --chance-color: var(--lime);
}

.chance-orange {
  --chance-color: var(--amber);
}

.chance-red {
  --chance-color: var(--red);
}

.win-chance-summary.chance-green,
.win-chance-summary.chance-orange,
.win-chance-summary.chance-red {
  background: rgba(255, 255, 255, .028);
}

.win-chance-summary.chance-green,
.match-preview-stat.win-chance-metric.chance-green {
  border-color: rgba(166, 215, 107, .48);
}

.win-chance-summary.chance-orange,
.match-preview-stat.win-chance-metric.chance-orange {
  border-color: rgba(216, 154, 82, .52);
}

.win-chance-summary.chance-red,
.match-preview-stat.win-chance-metric.chance-red {
  border-color: rgba(216, 107, 121, .54);
}

.win-chance-summary b.chance-green,
.win-chance-summary b.chance-orange,
.win-chance-summary b.chance-red,
.match-preview-stat.win-chance-metric > b.chance-green,
.match-preview-stat.win-chance-metric > b.chance-orange,
.match-preview-stat.win-chance-metric > b.chance-red {
  color: var(--chance-color);
}

@media (max-width: 620px) {
  .match-preview-stats {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  .your-preview-group,
  .opponent-preview-group {
    grid-column: 1;
  }

  .match-preview-group {
    padding: 8px;
  }

  .match-preview-group-grid,
  .opponent-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .your-preview-group .match-preview-stat:last-child {
    grid-column: 1 / -1;
  }

  .match-preview-stat {
    min-height: 58px;
  }

  .team-summary .matchup-summary-group {
    padding: 7px;
  }

  .team-summary .sheet-metrics {
    gap: 5px;
  }

  .team-summary .sheet-metric {
    min-height: 56px;
    padding: 7px 5px;
  }
}