/* Battle arena layout — opponent up top, player below, hand fanned at bottom. */

:root {
  /* Painted Reliquary — Keith-Parkinson-style box-art palette:
     warm gold/amber on a deep teal-indigo night, parchment ink. */
  --bg-deep: #0e1a24;   /* teal-indigo night */
  --bg-mid:  #162330;
  --bg-soft: #223444;
  --ink:     #f2e7cf;   /* parchment */
  --muted:   #9aa6ad;
  --good:    #6cc08a;
  --bad:     #c0492f;
  --mid:     #e0a463;   /* warm torchlight (semantic "mid"/warning accent) */

  /* Gilt accents */
  --gold:     #c9a24e;  /* aged gold leaf */
  --gold-dim: #8a6f34;  /* tarnished gold (borders) */
  --amber:    #e0a463;  /* warm torchlight */

  /* Typography — Cinzel for display/titles (the fantasy signature); Inter
     for body so the dense, Inter-tuned arena layout stays intact. */
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-body:    "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 800px at 50% -10%, #1c3242 0%, transparent 60%),
    var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
  /* The menu page scrolls vertically on short viewports (landscape phones,
     small laptops). The arena uses position:fixed so it locks the viewport
     itself — see body.in-arena below. */
}
body.in-arena {
  overflow: hidden;
}

.hidden { display: none !important; }

h1, h2, h3,
.game-title, .turn-label, .turn-active, .log-title, .menu-tagline {
  font-family: var(--font-display);
  letter-spacing: 1px;
}

/* Gilt title treatment — engraved gold leaf on the night palette. */
.game-title {
  color: var(--gold);
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 22px rgba(201, 162, 78, 0.35);
}
.menu-tagline { color: var(--amber); }

/* Landing hero — painted banner behind the title. */
.menu-hero {
  position: relative;
  margin: 0 0 20px;
  max-width: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  border-radius: 16px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(14, 26, 36, 0.25) 0%, rgba(14, 26, 36, 0.45) 50%, rgba(14, 26, 36, 0.92) 100%),
    url("https://gmlhnbpbqjlkahvnoxjl.supabase.co/storage/v1/object/public/creatures/hero/banner.webp") center 28% / cover no-repeat;
  border: 1px solid var(--gold-dim);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), inset 0 0 70px rgba(0, 0, 0, 0.45);
}
@media (max-width: 600px) {
  .menu-hero { min-height: 200px; padding: 24px 16px; }
}
.menu-subtitle {
  font-family: var(--font-display);
  color: var(--amber);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 13px;
  margin: 2px 0 6px;
}

/* QR + user counter from slop-computer baseline — tuck them out of the way */
.qr-code, .user-counter {
  display: none;
}

/* === Menu — Epic landing === */
#menu {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px 40px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(120, 60, 220, 0.32), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(60, 180, 220, 0.26), transparent 50%),
    radial-gradient(ellipse at 50% 110%, rgba(247, 208, 44, 0.18), transparent 60%),
    linear-gradient(135deg, #0c0d1a, #1c1538);
  animation: bgDrift 18s ease-in-out infinite alternate;
}

/* Floating particle field behind everything. Six rising motes on a slow
   loop. Pure CSS, ~free GPU. */
#menu::before {
  content: "";
  position: absolute;
  inset: -20px;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 78%, rgba(255, 220, 100, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 22%, rgba(180, 220, 255, 0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 52% 64%, rgba(255, 180, 240, 0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 30%, rgba(150, 255, 220, 0.45) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 78%, rgba(255, 220, 100, 0.45) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 88%, rgba(200, 180, 255, 0.4) 0 2px, transparent 3px);
  background-size: 100% 100%;
  animation: motesRise 22s linear infinite;
  opacity: 0.8;
}
@keyframes motesRise {
  0%   { transform: translateY(0); opacity: 0.85; }
  50%  { transform: translateY(-30px); opacity: 1; }
  100% { transform: translateY(-60px); opacity: 0.8; }
}

/* A second slower drifting layer for parallax depth. */
#menu::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 40%, rgba(255,255,255,0.05) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 56%, rgba(255,255,255,0.04) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 22%, rgba(255,255,255,0.04) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 80%, rgba(255,255,255,0.04) 0 1px, transparent 2px);
  background-size: 100% 100%;
  animation: motesRise 36s linear infinite reverse;
  opacity: 0.6;
}
@keyframes bgDrift {
  0%   { background-position: 0% 0%, 100% 100%, 0 0; }
  100% { background-position: 30% 40%, 70% 60%, 0 0; }
}
.menu-stage {
  max-width: 920px;
  width: 92%;
  text-align: center;
}
.game-title {
  font-size: 56px;
  letter-spacing: 4px;
  margin: 0 0 12px;
  background: linear-gradient(90deg, #f7d02c, #ee8130, #f95587, #6390F0, #f7d02c);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 200, 80, 0.35));
  animation: titleShimmer 6s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
@keyframes titleShimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.menu-stage { position: relative; z-index: 1; }

/* Featured legendary hero strip — three rotating panels above the champion
   grid that show off the rarest creature in the dex. */
.feature-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 8px auto 22px;
  max-width: 720px;
}
.feature-card {
  position: relative;
  background: rgba(20, 23, 44, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  overflow: hidden;
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, transparent, rgba(247, 208, 44, 0.18), transparent);
  pointer-events: none;
  z-index: 0;
}
.feature-art {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  position: relative;
  z-index: 1;
  animation: bobUp 3s ease-in-out infinite alternate;
}
@keyframes bobUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
.feature-body {
  text-align: left;
  position: relative;
  z-index: 1;
}
.feature-name {
  font-family: var(--font-display);
  font-size: 11px;
  color: #f7d02c;
  margin-bottom: 3px;
}
.feature-ability {
  font-size: 11px;
  color: var(--ink);
  margin-bottom: 2px;
}
.feature-desc {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.4;
}
.menu-tagline {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 32px;
  line-height: 1.7;
}
.champion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.section-label {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 2px;
  margin: 6px 0 10px;
}
.difficulty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.diff-card {
  background: var(--bg-mid);
  border: 2px solid transparent;
  color: var(--ink);
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.16s ease;
}
.diff-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.diff-card.selected {
  border-color: #f7d02c;
  box-shadow: 0 0 14px rgba(247, 208, 44, 0.4);
}
.diff-label {
  font-family: var(--font-display);
  font-size: 11px;
  margin-bottom: 6px;
}
.diff-bio {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}

/* === Theme-of-the-week banner === */
.theme-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--theme, #888) 28%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--theme, #888) 50%, transparent);
  border-radius: 12px;
  padding: 10px 16px;
  margin: 12px auto 14px;
  max-width: 580px;
  text-align: left;
}
.theme-pill {
  background: var(--theme, #888);
  color: #fff;
  font-family: var(--font-display);
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}
.theme-text { font-size: 12px; color: var(--ink); }
.theme-text strong {
  color: var(--theme, #888);
  text-transform: capitalize;
  filter: brightness(1.3);
}

/* === Daily quests panel === */
.quests-panel {
  background: rgba(20, 23, 44, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 16px 12px;
  margin: 0 auto 22px;
  max-width: 560px;
}
.quests-title {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.quests-list { display: flex; flex-direction: column; gap: 6px; }
.quest-row {
  display: grid;
  grid-template-columns: 1fr 80px 50px auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  font-size: 12px;
}
.quest-row.ready {
  background: rgba(247, 208, 44, 0.14);
  border: 1px solid rgba(247, 208, 44, 0.35);
}
.quest-row.claimed { opacity: 0.55; }
.quest-label { font-weight: 600; color: var(--ink); }
.quest-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.quest-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6cd97c, #4eb159);
  transition: width 0.4s ease;
}
.quest-row.ready .quest-bar-fill { background: linear-gradient(90deg, #f7d02c, #ee8130); }
.quest-prog {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--muted);
  text-align: right;
}
.quest-status {
  font-size: 11px;
  color: var(--muted);
}
.quest-claim {
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  border: none;
  padding: 5px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.quest-claim:hover { filter: brightness(1.05); }

/* === Daily streak banner === */
.streak-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(20, 23, 44, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 16px;
  margin: 18px auto 22px;
  max-width: 520px;
}
.streak-banner.ready {
  background: linear-gradient(90deg, rgba(247, 208, 44, 0.22), rgba(238, 129, 48, 0.22));
  border-color: rgba(247, 208, 44, 0.45);
  box-shadow: 0 0 24px rgba(247, 208, 44, 0.25);
}
.streak-flame { font-size: 26px; }
.streak-text { flex: 1; text-align: left; }
.streak-current {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--ink);
  margin-bottom: 4px;
}
.streak-sub { font-size: 11.5px; color: var(--muted); }
.streak-claim {
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  font-family: var(--font-display);
  font-size: 10px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}
.streak-claim:hover { filter: brightness(1.05); }
.streak-longest {
  font-size: 11px;
  color: var(--muted);
}

/* === Account panel === */
.account-panel {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(20, 23, 44, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  color: var(--ink);
}
.account-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.account-greeting {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.account-id strong {
  font-size: 13px;
}
.champion-level-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 10px;
}
.tl-level {
  font-family: var(--font-display);
  font-size: 9px;
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
}
.tl-bar {
  display: inline-block;
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  min-width: 70px;
  max-width: 110px;
}
.tl-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  transition: width 0.4s ease;
}
.tl-xp { color: var(--muted); font-size: 9.5px; }
.account-sub {
  color: var(--muted);
  font-size: 10.5px;
}
.account-actions {
  display: flex;
  gap: 6px;
}
.account-actions button {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.14s ease;
}
.account-actions button:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}
.account-actions button.primary {
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  border-color: transparent;
  font-weight: 700;
}

/* === Card hover preview === */
.card-preview {
  position: fixed;
  z-index: 4500;
  display: grid;
  grid-template-columns: 220px 240px;
  gap: 12px;
  background: rgba(20, 23, 44, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: cpFadeIn 0.18s ease;
}
@keyframes cpFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.preview-card { width: 220px !important; }
.card-preview-info {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}
.cp-title {
  font-family: var(--font-display);
  font-size: 13px;
  margin-bottom: 4px;
}
.cp-meta { color: var(--muted); font-size: 10.5px; margin-bottom: 6px; }
.cp-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 11px;
}
.cp-section {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 8px 0 4px;
  text-transform: uppercase;
}
.cp-ability {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 6px;
  align-items: center;
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  font-size: 11px;
  margin-bottom: 4px;
}
.cp-aname { font-weight: 700; }
.cp-acost { color: #f7d02c; font-family: var(--font-display); font-size: 8px; }
.cp-amult { color: var(--mid); font-family: var(--font-display); font-size: 8px; }
.cp-astatus { background: #735797; color: #fff; padding: 2px 5px; border-radius: 4px; font-size: 8px; }
.cp-adesc { grid-column: 1 / -1; color: var(--muted); font-size: 10.5px; margin-top: 2px; }
.cp-flavor { color: var(--muted); font-size: 11px; font-style: italic; line-height: 1.5; }

/* === Champion picker === */
.champ-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 9, 18, 0.85);
  z-index: 3000;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
}
.champ-card {
  width: 92vw;
  max-width: 760px;
  background: linear-gradient(180deg, #181b35, #0c0d1a);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 22px 26px;
  color: var(--ink);
  text-align: center;
}
.champ-title {
  font-family: var(--font-display);
  font-size: 16px;
  background: linear-gradient(90deg, #f7d02c, #ee8130, #f95587);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 8px;
}
.champ-sub { color: var(--muted); font-size: 12px; margin-bottom: 18px; }
.champ-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.champ-row {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 14px;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
  text-align: left;
  transition: all 0.18s ease;
}
.champ-row:hover {
  background: rgba(247, 208, 44, 0.1);
  border-color: rgba(247, 208, 44, 0.45);
  transform: translateY(-2px);
}
.champ-art {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}
.champ-name {
  font-family: var(--font-display);
  font-size: 12px;
  margin-bottom: 3px;
}
.champ-titletag { color: #f7d02c; font-size: 11px; margin-bottom: 4px; }
.champ-bio { font-size: 11.5px; color: var(--muted); }
.champ-go {
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  font-family: var(--font-display);
  font-size: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 700;
}
.champ-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--muted);
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
}
.champ-loading, .champ-err { color: var(--muted); padding: 22px; }

/* === Bestiary completion overlay === */
.pdx-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 9, 18, 0.86);
  z-index: 2500;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
}
.pdx-overlay.hidden { display: none; }
.pdx-card {
  width: 94vw;
  max-width: 1300px;
  height: 92vh;
  background: linear-gradient(180deg, #181b35, #0c0d1a);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 18px 22px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.pdx-header {
  display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.pdx-title {
  font-family: var(--font-display);
  font-size: 16px;
  background: linear-gradient(90deg, #f7d02c, #ee8130, #f95587);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pdx-summary { margin-left: auto; text-align: right; }
.pdx-pct {
  font-family: var(--font-display);
  font-size: 18px;
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pdx-count { font-size: 11px; color: var(--muted); }
.pdx-x {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 14px;
}
.pdx-genbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.pdx-gen { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.pdx-gen-label { font-family: var(--font-display); font-size: 9px; color: var(--muted); white-space: nowrap; }
.pdx-gen-bar {
  flex: 1; height: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.pdx-gen-fill {
  height: 100%;
  background: linear-gradient(90deg, #6cd97c, #4eb159);
  transition: width 0.4s ease;
}
.pdx-gen-count { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.pdx-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  padding-right: 8px;
}
.pdx-cell {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 6px 4px 4px;
  text-align: center;
  font-size: 10px;
}
.pdx-cell.locked img { filter: brightness(0) opacity(0.35); }
.pdx-cell.locked .pdx-name { color: rgba(255, 255, 255, 0.25); }
.pdx-cell.owned { border-color: rgba(108, 217, 124, 0.35); }
.pdx-cell.owned.legendary { border-color: rgba(247, 208, 44, 0.7); box-shadow: 0 0 14px rgba(247, 208, 44, 0.25); }
.pdx-cell.owned.mythical  { border-color: rgba(247, 105, 220, 0.55); box-shadow: 0 0 14px rgba(247, 105, 220, 0.25); }
.pdx-cell img { width: 64px; height: 64px; object-fit: contain; }
.pdx-id {
  font-family: var(--font-display);
  font-size: 7px;
  color: var(--muted);
  margin-bottom: 2px;
  letter-spacing: 1px;
}
.pdx-name {
  font-size: 10px;
  margin-top: 2px;
  text-transform: capitalize;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pdx-qty {
  position: absolute;
  bottom: 4px;
  right: 6px;
  background: var(--bg-mid);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 7px;
  padding: 1px 4px;
  border-radius: 4px;
}
.pdx-shiny {
  position: absolute;
  top: 4px;
  right: 6px;
  background: linear-gradient(140deg, #f7d02c, #ee8130);
  color: #1a0a00;
  font-family: var(--font-display);
  font-size: 7px;
  padding: 1px 4px;
  border-radius: 4px;
}
.pdx-loading, .pdx-err {
  color: var(--muted);
  padding: 28px;
  text-align: center;
}

/* === Mulligan modal === */
.mulligan-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 9, 18, 0.85);
  z-index: 3300;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
}
.mulligan-card {
  background: linear-gradient(180deg, #181b35, #0c0d1a);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 22px 26px;
  max-width: 1100px;
  width: 92vw;
  color: var(--ink);
  text-align: center;
}
.mulligan-title {
  font-family: var(--font-display);
  font-size: 18px;
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
}
.mulligan-sub {
  color: var(--muted);
  font-size: 12.5px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.mulligan-hand {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.mulligan-pick {
  position: relative;
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.mulligan-pick:hover { transform: translateY(-6px); }
.mulligan-pick.selected { filter: grayscale(0.6) brightness(0.7); }
.mulligan-x {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bad);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.mulligan-pick.selected .mulligan-x { opacity: 1; }
.mulligan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mulligan-count {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--muted);
}
.mulligan-confirm {
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  cursor: pointer;
}

/* Spectator hand placeholder */
.spectator-handcount {
  color: var(--muted);
  background: rgba(20, 23, 44, 0.7);
  padding: 10px 16px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
}

/* === How-to-play overlay === */
.howto-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 9, 18, 0.86);
  z-index: 3400;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  padding: 24px;
}
.howto-card {
  background: linear-gradient(180deg, #181b35 0%, #0c0d1a 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 26px 30px;
  max-width: 580px;
  color: var(--ink);
  max-height: 90vh;
  overflow-y: auto;
}
.howto-card h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 18px;
  background: linear-gradient(90deg, #f7d02c, #ee8130, #f95587);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.howto-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 14px;
  line-height: 1.55;
  font-size: 13px;
}
.howto-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f7d02c, #ee8130);
  color: #1a0a00;
  font-weight: 800;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 12px;
}
.howto-step strong { color: #f7d02c; }
.howto-step em { color: #a98ff3; font-style: normal; }
.howto-close {
  display: block;
  margin: 18px auto 0;
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  border: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  cursor: pointer;
}

/* === Achievements + Match-history overlays === */
.ach-overlay, .mh-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 9, 18, 0.84);
  z-index: 2450;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
}
.ach-overlay.hidden, .mh-overlay.hidden { display: none; }
.ach-card, .mh-card {
  width: 92vw;
  max-width: 720px;
  background: linear-gradient(180deg, #181b35 0%, #0c0d1a 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 18px 20px;
  color: var(--ink);
}
.ach-header, .mh-header {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 12px; margin-bottom: 12px;
}
.ach-title, .mh-title {
  font-family: var(--font-display);
  font-size: 13px;
  background: linear-gradient(90deg, #f7d02c, #f95587);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ach-sub { color: var(--muted); font-size: 11px; margin-left: auto; }
.ach-x, .mh-x {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.12);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
}
.ach-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  align-items: center;
}
.ach-row.unlocked {
  background: rgba(247, 208, 44, 0.08);
  border-color: rgba(247, 208, 44, 0.25);
}
.ach-row.locked { opacity: 0.65; }
.ach-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 24px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
}
.ach-row.unlocked .ach-icon {
  background: linear-gradient(140deg, #f7d02c, #ee8130);
  filter: drop-shadow(0 0 6px rgba(247, 208, 44, 0.4));
}
.ach-name { font-weight: 700; font-size: 13px; margin-bottom: 1px; }
.ach-desc { color: var(--muted); font-size: 11px; margin-bottom: 6px; }
.ach-bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.ach-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--good), #4eb159);
  transition: width 0.4s ease;
}
.ach-row.unlocked .ach-bar-fill {
  background: linear-gradient(90deg, #f7d02c, #ee8130);
}
.ach-prog {
  font-family: var(--font-display);
  font-size: 8px;
  color: var(--muted);
  margin-top: 4px;
}
.ach-loading, .ach-err, .mh-loading, .mh-err, .mh-empty {
  text-align: center;
  color: var(--muted);
  padding: 28px;
}

.mh-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.mh-row {
  display: grid;
  grid-template-columns: 60px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  font-size: 12px;
}
.mh-row:hover { background: rgba(255,255,255,0.06); }
.mh-win  { color: var(--good); font-family: var(--font-display); font-size: 10px; }
.mh-loss { color: var(--bad);  font-family: var(--font-display); font-size: 10px; }
.mh-pending { color: var(--muted); }
.mh-opp { font-weight: 600; }
.mh-meta, .mh-when { color: var(--muted); font-size: 11px; }
.mh-when { font-family: var(--font-display); font-size: 9px; }

/* === Achievement toast === */
.ach-toast {
  position: fixed;
  right: 18px;
  bottom: 24px;
  z-index: 4000;
  display: flex;
  gap: 12px;
  background: linear-gradient(135deg, #f7d02c, #ee8130);
  color: #1a0a00;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  font-family: "Inter", system-ui, sans-serif;
  width: 320px;
  transform: translateX(120%);
  transition: transform 0.4s cubic-bezier(0.2,0.9,0.3,1.4);
}
.ach-toast.show { transform: translateX(0); }
.ach-toast-icon { font-size: 28px; }
.ach-toast-title {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1.5px;
  opacity: 0.7;
}
.ach-toast-name { font-weight: 800; font-size: 14px; margin: 2px 0; }
.ach-toast-desc { font-size: 11px; opacity: 0.85; }

/* === Auth modal (register / sign in) === */
.auth-modal {
  position: fixed; inset: 0;
  background: rgba(8, 9, 18, 0.78);
  z-index: 3100;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
}
.auth-card {
  background: var(--bg-mid);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 22px 26px;
  min-width: 320px;
  max-width: 92vw;
  color: var(--ink);
}
.auth-title {
  font-family: var(--font-display);
  font-size: 13px;
  margin-bottom: 14px;
}
.auth-input {
  width: 100%;
  background: #0c0d1a;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  margin-bottom: 8px;
}
.auth-input:focus { border-color: #f7d02c; }
.auth-help { font-size: 11px; color: var(--muted); margin-bottom: 8px; line-height: 1.5; }
.auth-err { color: var(--bad); font-size: 11px; margin-bottom: 8px; }
.auth-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 6px;
}
.auth-row button {
  background: var(--bg-mid);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.auth-row button.primary {
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  border-color: transparent;
  font-weight: 700;
}
.auth-row button:disabled { opacity: 0.5; cursor: not-allowed; }

/* === Leaderboard overlay === */
.lb-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 9, 18, 0.86);
  z-index: 2400;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
}
.lb-overlay.hidden { display: none; }
.lb-card {
  width: 92vw;
  max-width: 820px;
  background: linear-gradient(180deg, #181b35 0%, #0c0d1a 100%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 18px 22px;
  color: var(--ink);
}
.lb-loading, .lb-error, .lb-empty {
  padding: 24px;
  text-align: center;
  color: var(--muted);
}
.lb-error button {
  display: block;
  margin: 14px auto 0;
  padding: 6px 14px;
  background: var(--bg-mid);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  cursor: pointer;
}
.lb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.lb-title {
  font-family: var(--font-display);
  font-size: 14px;
  background: linear-gradient(90deg, #f7d02c, #ee8130, #f95587);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lb-x {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(255,255,255,0.12);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}
.lb-mystats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  background: rgba(247, 208, 44, 0.08);
  border: 1px solid rgba(247, 208, 44, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.lb-mystat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lb-mystat span { color: var(--muted); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; }
.lb-mystat strong { font-size: 13px; }
.lb-anon { color: var(--muted); font-size: 11px; padding: 6px 4px 12px; }
.lb-table {
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  overflow: hidden;
}
.lb-row {
  display: grid;
  grid-template-columns: 48px 1fr 56px 60px 60px 64px 60px;
  align-items: center;
  padding: 8px 14px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.lb-level-chip {
  display: inline-block;
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  font-family: var(--font-display);
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 700;
}
.lb-row.lb-head {
  background: rgba(255,255,255,0.04);
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1px;
}
.lb-row.is-me {
  background: rgba(247, 208, 44, 0.12);
  border-left: 3px solid #f7d02c;
  font-weight: 700;
}
.lb-rank {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--mid);
}
.lb-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-cell {
  text-align: right;
  color: var(--ink);
}
.champion-card {
  background: var(--bg-mid);
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 18px;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
}
.champion-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px var(--accent);
}
.champion-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 24px var(--accent), 0 0 0 1px rgba(255,255,255,0.2) inset;
}
.champion-portrait {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--bg-deep);
}
.champion-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 80%, var(--accent, #888) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45));
  z-index: 1;
}
.champion-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.12), transparent 65%);
  pointer-events: none;
  z-index: 2;
}
.champion-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* full painted portrait fills the chip */
  object-position: center 18%; /* favour the face / upper body */
  z-index: 3;
  transition: transform 0.5s ease;
}
.champion-card:hover .champion-portrait img,
.champion-card.selected .champion-portrait img {
  transform: scale(1.06) translateY(-2px);
}
.champion-name {
  font-family: var(--font-display);
  font-size: 13px;
  margin-bottom: 6px;
}
.champion-bio {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.start-btn {
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  border: none;
  padding: 12px 28px;
  font-family: var(--font-display);
  font-size: 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.16s ease;
  box-shadow: 0 6px 18px rgba(238, 129, 48, 0.4);
}
.start-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(238, 129, 48, 0.55);
}
.start-btn:disabled {
  background: #2a2e44;
  color: #5a5d72;
  cursor: not-allowed;
  box-shadow: none;
}

.play-modes {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.mode-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  transition: all 0.15s ease;
}
.mode-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}
.mode-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* === Matchmaking modal === */
.mm-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 10, 24, 0.78);
  z-index: 3000;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
}
.mm-card {
  background: var(--bg-mid);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 28px 36px;
  min-width: 380px;
  text-align: center;
  color: var(--ink);
}
.mm-title {
  font-family: var(--font-display);
  font-size: 14px;
  margin-bottom: 18px;
}
.mm-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 14px;
  line-height: 1.6;
}
.mm-code {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 8px;
  color: #f7d02c;
  padding: 12px 18px;
  background: #0c0d1a;
  border-radius: 10px;
  user-select: all;
}
.mm-qr {
  margin: 14px auto;
  background: #fff;
  padding: 6px;
  border-radius: 8px;
  display: inline-block;
  line-height: 0;
}
.mm-share {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.mm-copy {
  background: var(--bg-mid);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}
.mm-copy:hover { background: rgba(255, 255, 255, 0.1); }
.mm-spinner {
  width: 44px; height: 44px;
  margin: 16px auto;
  border: 4px solid #2a2e44;
  border-top-color: #f7d02c;
  border-radius: 50%;
  animation: mmSpin 0.9s linear infinite;
}
@keyframes mmSpin { to { transform: rotate(360deg); } }
.mm-cancel {
  margin-top: 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink);
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
}
.mm-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
}
.mm-or { color: var(--muted); font-size: 11px; }
.mm-action {
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}
.mm-join {
  display: flex;
  gap: 6px;
}
.mm-join input {
  flex: 1;
  background: #0c0d1a;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
}

/* === Arena === */
#arena {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
}
.arena-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(80, 30, 140, 0.45), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(20, 100, 180, 0.4), transparent 55%),
    linear-gradient(180deg, #0c0d1a 0%, #181b35 50%, #0c0d1a 100%);
  z-index: 0;
  animation: bgDrift 20s ease-in-out infinite alternate;
}
.arena-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 60px,
    rgba(255, 255, 255, 0.015) 60px,
    rgba(255, 255, 255, 0.015) 61px
  );
  pointer-events: none;
}

.champion-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  gap: 16px;
}
.champion-row.bottom {
  padding: 8px 24px 4px;
}

.champion-block {
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(20, 23, 44, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 8px 14px 8px 8px;
  backdrop-filter: blur(6px);
  cursor: default;
}
.champion-block.ai {
  cursor: pointer;
  transition: box-shadow 0.18s ease;
}
.champion-block.ai:hover {
  box-shadow: 0 0 18px rgba(255, 90, 90, 0.4);
}
/* Soft glow on the champion-block whose turn it is. JS adds `.is-turn`. */
.champion-block.is-turn {
  border-color: rgba(247, 208, 44, 0.6);
  box-shadow: 0 0 22px rgba(247, 208, 44, 0.25);
  background: rgba(247, 208, 44, 0.08);
}
.champion-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(140deg, #444, #111);
  border: 2px solid #fff3;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.champion-avatar img {
  width: 130%;
  height: auto;
  position: relative;
  z-index: 1;
  margin-bottom: -10px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}
.champion-avatar[data-ability="brock"]   { background: linear-gradient(140deg, #B6A136, #1a1a0a); }
.champion-avatar[data-ability="misty"]   { background: linear-gradient(140deg, #6390F0, #0a1430); }
.champion-avatar[data-ability="pikachu"] { background: linear-gradient(140deg, #F7D02C, #2a2210); }
.champion-avatar[data-ability="erika"]   { background: linear-gradient(140deg, #7AC74C, #122412); }
.champion-avatar[data-ability="sabrina"] { background: linear-gradient(140deg, #F95587, #2c0e1c); }
.champion-avatar[data-ability="lance"]   { background: linear-gradient(140deg, #6F35FC, #0e0828); }
.champion-avatar::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.3), transparent 70%);
}

.champion-meta {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.champion-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.hp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
@keyframes hpDamageFlash {
  0%, 100% { background: #0c0d1a; box-shadow: none; }
  20%, 60% { background: #ff5c63; box-shadow: 0 0 14px rgba(255, 92, 99, 0.7); }
}
.hp-bar.damaged { animation: hpDamageFlash 0.6s ease; }
.hp-bar {
  flex: 1;
  height: 10px;
  background: #0c0d1a;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.hp-fill {
  height: 100%;
  transition: width 0.5s ease;
  background: linear-gradient(90deg, var(--good), #4eb159);
}
.hp-bar.tone-mid .hp-fill { background: linear-gradient(90deg, var(--mid), #d6a824); }
.hp-bar.tone-bad .hp-fill { background: linear-gradient(90deg, var(--bad), #c33d44); }
.hp-text {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.5px;
  min-width: 56px;
  text-align: right;
}
.champion-resources {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}
.energy-pill {
  background: rgba(247, 208, 44, 0.18);
  color: #f7d02c;
  padding: 1px 8px;
  border-radius: 8px;
  font-weight: 700;
}

/* Item bar — small icon row inside the player's champion block. */
.item-bar {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.item-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  color: var(--ink);
  font-family: inherit;
}
.item-btn:hover:not(.disabled) {
  background: rgba(247, 208, 44, 0.18);
  border-color: rgba(247, 208, 44, 0.6);
  transform: translateY(-1px);
}
.item-btn.active {
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  border-color: transparent;
  animation: itemPulse 1s ease-in-out infinite;
}
@keyframes itemPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247, 208, 44, 0.6); }
  50%      { box-shadow: 0 0 12px 2px rgba(247, 208, 44, 0.7); }
}
.item-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.item-icon { font-size: 16px; line-height: 1; }

/* Active type-combo tags */
.combo-tags {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.combo-tag {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 6px;
  border-radius: 5px;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.item-uses {
  font-family: var(--font-display);
  font-size: 8px;
  color: var(--muted);
}
.item-btn.active .item-uses { color: #1a0a00; }

.energy-pips {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.ep-pip {
  display: inline-block;
  width: 14px;
  height: 14px;
  text-align: center;
  font-size: 10px;
  line-height: 14px;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.ep-pip.lit {
  background: radial-gradient(circle at 30% 30%, #fff7c2, #f7d02c);
  color: #5a4404;
  box-shadow: 0 0 6px rgba(247, 208, 44, 0.6);
}
@keyframes pipPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); }
}
.ep-pip.lit.refill { animation: pipPop 0.35s ease-out; }
.ep-pip.dim {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.18);
}

.turn-banner {
  text-align: center;
  background: rgba(20, 23, 44, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 18px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}
.turn-label { font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.turn-active { font-size: 11px; }
.turn-timer {
  font-family: var(--font-display);
  font-size: 14px;
  margin-top: 4px;
  color: var(--good);
  letter-spacing: 1px;
}
.turn-timer.urgent { color: var(--mid); }
.turn-timer.crit-time {
  color: var(--bad);
  animation: timerPulse 0.7s ease-in-out infinite;
}
@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

.field {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
}
.ai-field { perspective: 800px; }
.ai-field .card { transform: scale(0.92); }
.field-slot {
  width: 160px;
  height: 218px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.15s ease;
  overflow: visible; /* Guardian shield + sleep pill extend off the top */
}
.field { overflow: visible; }
.field-slot .card { overflow: visible; }
.field-slot.ai { border-color: rgba(255, 90, 90, 0.15); }
.field-slot.player { border-color: rgba(90, 220, 130, 0.15); }
.slot-empty {
  color: rgba(255, 255, 255, 0.18);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 2px;
}

/* When the player has an attacker selected, glow the enemy slots */
.field-slot:hover { background: rgba(255, 255, 255, 0.04); }

.hand {
  position: fixed;
  bottom: 0;
  left: 50%;
  /* Peek-and-lift: at rest the hand sits low so the top ~40% of cards is
     visible above the viewport bottom — your own field stays unobstructed.
     Hover anywhere on the hand to lift it into full view. Mobile media
     queries override this with an inline-flow layout. */
  transform: translateX(-50%) translateY(45%);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1.15);
  display: flex;
  gap: 6px;
  padding: 24px 24px 12px;
  z-index: 4;
  pointer-events: auto;
  max-width: min(70vw, 900px);
  justify-content: center;
}
.hand:hover,
.hand:focus-within,
.hand.lifted {
  transform: translateX(-50%) translateY(0);
}
.hand .card {
  transform:
    translate(var(--fan-x, 0), var(--fan-y, 0))
    rotate(var(--fan-rot, 0));
  margin: 0 -22px;
}
/* Tighter overlap + shrinking as the hand grows. The data attribute is
   set by JS. Past ~13 cards the cards also scale down so they don't run
   off the bottom of the viewport. */
.hand[data-size="7"] .card { margin: 0 -40px; }
.hand[data-size="8"] .card { margin: 0 -52px; }
.hand[data-size="9"] .card { margin: 0 -62px; }
.hand[data-size="10"] .card,
.hand[data-size="11"] .card,
.hand[data-size="12"] .card { margin: 0 -72px; }
.hand[data-size="13"] .card,
.hand[data-size="14"] .card,
.hand[data-size="15"] .card { margin: 0 -56px; transform-origin: bottom center; transform: scale(0.85) translate(var(--fan-x, 0), var(--fan-y, 0)) rotate(var(--fan-rot, 0)); }
.hand[data-size="16"] .card,
.hand[data-size="17"] .card,
.hand[data-size="18"] .card,
.hand[data-size="19"] .card,
.hand[data-size="20"] .card { margin: 0 -52px; transform-origin: bottom center; transform: scale(0.72) translate(var(--fan-x, 0), var(--fan-y, 0)) rotate(var(--fan-rot, 0)); }
.hand .card:hover {
  transform:
    translate(var(--fan-x, 0), calc(var(--fan-y, 0) - 24px))
    rotate(0deg);
  z-index: 10;
}

/* Visual hint: cards that are playable AND it's your turn pulse softly so
   the player sees what they can act on. The default-on selector matches the
   `.can-act` class added by JS. */
@keyframes canActPulse {
  0%,100% { box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 0 0 var(--type-1); }
  50%     { box-shadow: 0 6px 14px rgba(0,0,0,0.4), 0 0 18px 4px var(--type-1); }
}
.card.can-act {
  animation: canActPulse 1.6s ease-in-out infinite;
}

/* Player-action banner: a subtle line under the turn banner cueing the
   player to act ("Tap a card to summon" / "Tap one of your creature to
   attack" / "Click End Turn to pass"). */
.turn-banner .turn-hint {
  font-size: 9.5px;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--mid);
  letter-spacing: 0.5px;
  margin-top: 4px;
  font-weight: 500;
  min-height: 14px;
}

.action-bar {
  display: flex;
  gap: 10px;
  /* Always reachable above the fanned hand, even when there are 16 cards
     fighting for the bottom of the screen. */
  position: fixed;
  right: 18px;
  bottom: 14px;
  z-index: 50;
}
.action-bar button {
  background: var(--bg-mid);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-size: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.action-bar button:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.action-bar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#end-turn-btn:not(:disabled) {
  background: linear-gradient(90deg, #6390F0, #4a6fc4);
  border-color: transparent;
}
#concede-btn { color: var(--bad); }

.log-panel {
  position: fixed;
  top: 80px;
  right: 12px;
  width: 260px;
  max-height: 50vh;
  overflow-y: auto;
  background: rgba(12, 13, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  z-index: 3;
  backdrop-filter: blur(4px);
}
.log-title {
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: 1.5px;
}
.log-line {
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  line-height: 1.45;
}
.log-line.tone-turn   { color: #f7d02c; font-weight: 600; }
.log-line.tone-summon { color: #6cd97c; }
.log-line.tone-attack { color: #ff8a4a; }
.log-line.tone-ko     { color: #ff5c63; font-weight: 700; }
.log-line.tone-status { color: #c285ff; }
.log-line.tone-win    { color: #f7d02c; font-weight: 700; }
.log-line.tone-warn   { color: #ff5c63; }

/* Ability popover — shown when the player has an attacker selected. */
.ability-popover {
  position: fixed;
  z-index: 50;
  width: 280px;
  background: rgba(20, 23, 44, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--ink);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
.ap-title {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ap-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--ink);
  padding: 7px 9px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  font-family: inherit;
  transition: all 0.14s ease;
}
.ap-row:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}
.ap-row.selected {
  background: rgba(247, 208, 44, 0.18);
  border-color: rgba(247, 208, 44, 0.6);
  box-shadow: 0 0 14px rgba(247, 208, 44, 0.3) inset;
}
.ap-row.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ap-name {
  font-weight: 700;
  white-space: nowrap;
}
.ap-cost {
  background: rgba(247, 208, 44, 0.18);
  color: #f7d02c;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 9px;
}
.ap-mult {
  color: var(--mid);
  font-family: var(--font-display);
  font-size: 9px;
}
.ap-status {
  background: #735797;
  color: #fff;
  padding: 2px 5px;
  border-radius: 5px;
  font-size: 9px;
}
.ap-desc {
  grid-column: 1 / -1;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Damage preview shown when hovering an enemy slot with an attacker selected. */
.dmg-preview {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  z-index: 30;
}
.dmg-preview.tone-super { color: #f7d02c; border: 1px solid #f7d02c; }
.dmg-preview.tone-weak  { color: #6390F0; }
.dmg-preview.tone-miss  { color: #888; }
.dmg-preview .dmg-num { display: block; }
.dmg-preview .dmg-verdict {
  display: block;
  font-size: 8px;
  color: var(--muted);
  font-family: "Inter", system-ui, sans-serif;
  margin-top: 2px;
  letter-spacing: 0.5px;
}
.dmg-preview .dmg-ko {
  display: block;
  font-size: 9px;
  margin-top: 2px;
  color: #ef476f;
  text-shadow: 0 0 6px #ef476f99;
  font-weight: 900;
  letter-spacing: 1.5px;
}
/* Sticky previews (shown for every enemy slot on attacker selection) are
   slightly more compact and stay put without hover. */
.dmg-preview.sticky {
  top: -28px;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid rgba(255,255,255,0.18);
  animation: dmg-preview-pop 0.18s ease-out;
}
@keyframes dmg-preview-pop {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.field-slot.hover-target {
  background: rgba(255, 209, 102, 0.12);
  box-shadow: 0 0 16px rgba(255, 209, 102, 0.35) inset;
}
.field-slot { position: relative; }

/* Damage shake — applied briefly to a hit card via JS. */
@keyframes dmgShake {
  0%,100% { transform: translate(0,0) rotate(0); }
  20% { transform: translate(-4px,2px) rotate(-1.5deg); }
  40% { transform: translate(4px,-2px) rotate(1.5deg); }
  60% { transform: translate(-3px,1px) rotate(-1deg); }
  80% { transform: translate(2px,-1px) rotate(1deg); }
}
.card.dmg-shake { animation: dmgShake 0.4s ease; }

/* === Reward modal === */
.reward-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 10, 24, 0.84);
  z-index: 3200;
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
}
.reward-card {
  background: var(--bg-mid);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 26px 30px 22px;
  max-width: 760px;
  text-align: center;
}
.reward-title {
  font-family: var(--font-display);
  font-size: 16px;
  background: linear-gradient(90deg, #f7d02c, #ee8130, #f95587);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.reward-sub { color: var(--muted); font-size: 12px; margin-bottom: 22px; }
.reward-picks {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 18px;
}
.reward-pick {
  position: relative;
  cursor: pointer;
  transition: transform 0.18s ease;
  /* Pack-opening flight: cards arrive staggered, scaling up + rotating
     in from a small offset so the reveal feels animated. */
  animation: pickReveal 0.65s cubic-bezier(0.2, 0.9, 0.3, 1.4) backwards;
  animation-delay: var(--pick-delay, 0ms);
}
.reward-pick:hover { transform: translateY(-8px); }
@keyframes pickReveal {
  0%   { transform: translateY(40px) scale(0.4) rotate(-15deg); opacity: 0; }
  60%  { transform: translateY(-8px) scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: translateY(0)    scale(1)    rotate(0); }
}

.reward-sparkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: -1;
}
.reward-sparkle span {
  position: absolute;
  font-size: 18px;
  color: #f7d02c;
  text-shadow: 0 0 6px #f7d02c, 0 0 14px #ee8130;
  opacity: 0;
  animation: sparkleFly 1.2s ease-out forwards;
  animation-delay: calc(var(--pick-delay, 0ms) + var(--i, 0ms));
}
.reward-sparkle span:nth-child(1) { top:  -8px; left: -10%; --i: 200ms; }
.reward-sparkle span:nth-child(2) { top:  30%; left: -16%; --i: 320ms; }
.reward-sparkle span:nth-child(3) { top:  70%; left: -8%;  --i: 440ms; }
.reward-sparkle span:nth-child(4) { top:  30%; right:-16%; --i: 380ms; }
.reward-sparkle span:nth-child(5) { top:  -4px; right: -10%; --i: 240ms; }
@keyframes sparkleFly {
  0%   { opacity: 0;   transform: scale(0.2) translate(0,0); }
  35%  { opacity: 1;   transform: scale(1.4) translate(0,-6px); }
  100% { opacity: 0;   transform: scale(0.6) translate(0,-30px); }
}
.reward-pick.chosen .card {
  box-shadow: 0 0 22px #f7d02c, 0 0 50px #f7d02c;
}
.reward-tier {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-mid);
  border: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
}
.reward-tier.tier-1 { color: #7AC74C; }
.reward-tier.tier-2 { color: #6390F0; }
.reward-tier.tier-3 { color: #F7D02C; }
.reward-tier.tier-4 { color: #A33EA1; }
.reward-tier.tier-5 { color: #EE8130; }
.reward-skip {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--muted);
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
}

/* === FX overlay === */
.fx-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}
.damage-float {
  position: fixed;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 18px;
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,0.8), 0 2px 0 rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 1001;
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
  opacity: 1;
}
.damage-float.kind-super { color: #f7d02c; font-size: 28px; }
.damage-float.kind-weak  { color: #6390F0; font-size: 14px; }
.damage-float.kind-crit  {
  color: #fff;
  font-size: 34px;
  text-shadow: 0 0 8px #f7d02c, 0 0 16px #ee8130, 0 2px 0 rgba(0,0,0,0.6);
}
.damage-float.rise {
  transform: translate(-50%, -160%);
  opacity: 0;
}

/* "Your turn" overlay banner — pops big when control flips to the player. */
.your-turn-banner {
  position: fixed;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-family: var(--font-display);
  font-size: 38px;
  letter-spacing: 6px;
  color: transparent;
  background: linear-gradient(90deg, #f7d02c, #ee8130, #f95587);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 24px rgba(247, 208, 44, 0.45);
  pointer-events: none;
  z-index: 2200;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  white-space: nowrap;
}
.your-turn-banner.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.verdict {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-family: var(--font-display);
  font-size: 26px;
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  background: rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 1002;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.verdict.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.verdict.tone-super { color: #f7d02c; text-shadow: 0 0 14px #f7d02c; }
.verdict.tone-weak  { color: #6390F0; }
.verdict.tone-miss  { color: #888; }

.game-over {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: grid;
  place-items: center;
  z-index: 2000;
  backdrop-filter: blur(8px);
}
.game-over-card {
  background: var(--bg-mid);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 30px 40px;
  text-align: center;
  min-width: 320px;
}
.game-over-card h2 {
  margin: 0 0 12px;
  font-size: 28px;
}
.game-over-card.win h2 {
  background: linear-gradient(90deg, #f7d02c, #ee8130, #f95587);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.game-over-card.loss h2 {
  color: var(--bad);
  font-size: 44px;
  letter-spacing: 8px;
  text-shadow: 0 0 18px rgba(239, 68, 68, 0.65), 0 0 36px rgba(239, 68, 68, 0.45);
  animation: defeat-slam 0.6s cubic-bezier(0.2, 1.4, 0.5, 1) both;
}
.game-over-card.draw h2 {
  background: linear-gradient(90deg, #9ca3af, #d1d5db, #9ca3af);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 36px;
  letter-spacing: 6px;
  text-shadow: 0 0 14px rgba(209, 213, 219, 0.35);
}
.game-over-card.draw {
  border-color: rgba(156, 163, 175, 0.45);
}
.game-over-card.loss {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 0 60px rgba(239, 68, 68, 0.35), 0 20px 60px rgba(0,0,0,0.6);
  animation: defeat-shake 0.55s ease-out both;
}
@keyframes defeat-slam {
  0%   { transform: scale(2.4) rotate(-6deg); opacity: 0; filter: blur(10px); }
  60%  { transform: scale(0.94) rotate(0); opacity: 1; filter: blur(0); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes defeat-shake {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-8px, 6px); }
  30%  { transform: translate(7px, -5px); }
  45%  { transform: translate(-5px, 4px); }
  60%  { transform: translate(4px, -3px); }
  100% { transform: translate(0, 0); }
}

/* Full-screen red vignette pulse — fires every time the player's champion
   takes damage so it's impossible to miss "you're under attack." Held
   on the <body> for the duration of the animation. Reduced-motion users
   get a static dim instead of the pulse. */
.player-hit-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1500;
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(239, 68, 68, 0.0) 55%, rgba(239, 68, 68, 0.55) 100%);
  opacity: 0;
  animation: hit-vignette-pulse 0.55s ease-out both;
}
.player-hit-vignette.heavy {
  animation: hit-vignette-heavy 0.85s ease-out both;
}
@keyframes hit-vignette-pulse {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes hit-vignette-heavy {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  60%  { opacity: 0.65; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .player-hit-vignette { animation: none; opacity: 0.6; transition: opacity 0.3s; }
}
.go-sub {
  color: var(--muted);
  margin-bottom: 18px;
}
.go-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  margin-bottom: 4px;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 16px;
  border-radius: 10px;
}
.go-stat {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
}
.go-stat span { color: var(--muted); }
.go-stat strong { color: var(--ink); font-family: var(--font-display); font-size: 10px; }
.game-over-card button {
  margin-top: 20px;
  padding: 12px 22px;
  background: linear-gradient(90deg, #f7d02c, #ee8130);
  color: #1a0a00;
  border: none;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  cursor: pointer;
}

#mute-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 50;
  background: rgba(20, 23, 44, 0.8);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--ink);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
}

/* Portrait-mode prompt is only useful in-arena — the menu now scrolls so
   portrait phones can use it. */
.landscape-prompt { display: none; }
body.in-arena .landscape-prompt {
  display: none;
}
/* Portrait phones used to see a full-screen "Rotate your phone" prompt.
   Phase 1 ships a real portrait layout instead — see the rules in the
   `(max-width: 600px)` block below. The prompt is permanently hidden
   now; the landscape-prompt element in index.html stays as a no-op so
   we don't have to ship an HTML change. */

/* ============================================================
   Phase 1 — Portrait-playable arena
   When the viewport is narrow (typical phone in portrait), shrink the
   field cards + tighten chrome so the full game loop fits on screen
   without horizontal scroll or "rotate your phone" prompts.
   ============================================================ */
@media (max-width: 600px) {
  body.in-arena .landscape-prompt { display: none !important; }

  /* Field cards shrink so 5 slots fit on a 360-410px wide viewport. */
  body.in-arena .field-slot {
    width: 62px;
    height: 90px;
  }
  body.in-arena .field-slot .card { width: 62px; }
  body.in-arena .field {
    padding: 2px 6px;
    gap: 4px;
    min-height: 96px;
  }
  /* Card chrome shrinks proportionally so name + HP stay legible. */
  body.in-arena .field-slot .card .card-name { font-size: 9px; max-width: 50px; }
  body.in-arena .field-slot .card .card-hp,
  body.in-arena .field-slot .card .card-attack { font-size: 9px; }
  body.in-arena .field-slot .card .cost-gem {
    width: 16px; height: 16px; font-size: 9px;
  }
  body.in-arena .field-slot .card .type-badge {
    width: 12px; height: 12px; font-size: 8px;
  }
  body.in-arena .field-slot .card .card-rarity { font-size: 7px; padding: 1px 3px; }
  body.in-arena .field-slot .card-guardian {
    width: 26px; height: 26px; top: -16px; font-size: 14px;
  }
  body.in-arena .field-slot .card-art img {
    object-fit: contain; width: 100%; height: 100%;
  }
  body.in-arena .field-slot .card.summoning::after { font-size: 7px; top: -18px; padding: 2px 6px; }

  /* Champion rows tighten but stay horizontal — champion info left,
     turn banner right; both stay readable. */
  body.in-arena .champion-row {
    padding: 4px 6px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  body.in-arena .champion-block {
    padding: 3px 6px 3px 3px;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
  }
  body.in-arena .champion-avatar { width: 36px; height: 36px; }
  body.in-arena .champion-meta { min-width: 0; }
  body.in-arena .champion-label {
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
  }
  body.in-arena .hp-text { font-size: 8px; min-width: 36px; }
  body.in-arena .hp-bar { height: 7px; }
  body.in-arena .turn-banner { padding: 3px 8px; min-width: 80px; }
  body.in-arena .turn-label { font-size: 7px; margin-bottom: 1px; }
  body.in-arena .turn-active { font-size: 9px; }
  body.in-arena .turn-banner .turn-hint {
    font-size: 8px; min-height: 8px; margin-top: 1px;
    max-width: 110px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body.in-arena .energy-pips { gap: 2px; }
  body.in-arena .ep-pip { width: 9px; height: 9px; font-size: 7px; line-height: 9px; }
  body.in-arena .turn-timer { font-size: 9px; }

  /* Opponent's face-down hand stays visible but compact. */
  body.in-arena .opp-hand-row { padding: 2px 4px; gap: 2px; }
  body.in-arena .opp-card-back { width: 22px; height: 30px; flex-basis: 22px; }

  /* Combat log fits inline as a tiny strip instead of side panel. */
  body.in-arena .log-panel {
    width: 100%;
    max-height: 60px;
    font-size: 8px;
    padding: 4px 6px;
    position: static;
    margin: 0 auto;
    border-radius: 0;
  }

  /* Action bar gets thumb-sized buttons stacked horizontally. */
  body.in-arena .action-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
  }
  body.in-arena .action-bar button {
    padding: 8px 10px;
    font-size: 10px;
    min-height: 38px;
    flex: 1 1 0;
  }
  body.in-arena .hand-toggle { padding: 8px 10px; font-size: 10px; min-height: 38px; }

  /* Hand fan: in portrait the hand stays inline at the bottom rather
     than its peek-and-lift overlay. The fan-y offset is dropped so
     cards align flat. */
  body.in-arena .hand {
    position: static;
    transform: none;
    bottom: auto;
    left: auto;
    padding: 4px;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  body.in-arena .hand .card {
    width: 70px;
    flex: 0 0 70px;
    transform: rotate(var(--fan-rot, 0));
    margin: 0 -14px;
  }
  body.in-arena .hand[data-size="6"] .card,
  body.in-arena .hand[data-size="7"] .card { margin: 0 -22px; }
  body.in-arena .hand[data-size="8"] .card,
  body.in-arena .hand[data-size="9"] .card { margin: 0 -28px; }
  body.in-arena .hand[data-size="10"] .card { margin: 0 -32px; }
  body.in-arena .hand .card:hover {
    transform: rotate(0) translateY(-4px);
  }
  body.in-arena .hand.lifted::before {
    display: none; /* no veil in portrait — hand is already inline */
  }
}

/* Legacy landscape-only prompt rule kept inert so any cached CSS that
   selected it still has somewhere to land. */
@media (max-width: 900px) and (orientation: portrait) and (max-height: 100px) {
  /* deliberately unreachable */
}

/* Tighten for mobile landscape — applies to arena and menu both. */
@media (max-width: 900px) {
  /* Bigger field cards on mobile — the previous 90px width made stats
     illegible.  Bumped to 108px so the HP/ATK numbers and types read
     across the board. */
  .card { width: 108px; }
  .card .card-name { font-size: 11px; max-width: 78px; }
  .card-hp { font-size: 11px; }
  .card-attack { font-size: 11px; }
  .cost-gem { width: 24px; height: 24px; font-size: 12px; }
  .field-slot { width: 108px; height: 156px; }
  .hand .card { margin: 0 -40px; }
  /* Thumb-friendly action bar — bigger End Turn so it can't be missed. */
  .action-bar button {
    padding: 11px 18px;
    font-size: 13px;
    min-height: 44px; /* iOS recommended touch target */
  }
  /* Type badges + status icons need to be readable, not pixel-perfect. */
  .type-badge { width: 18px; height: 18px; font-size: 10px; }
  .status-icon { font-size: 18px; }
  /* Boss HP / champion HP bar — beefier so it reads across the arena. */
  .hp-bar { height: 10px; }
  .hp-text { font-size: 11px; min-width: 56px; }
  .log-panel {
    width: 160px;
    font-size: 9px;
    max-height: 32vh;
    top: 56px;
    padding: 6px 8px;
  }
  .champion-meta { min-width: 100px; }
  .champion-block { padding: 5px 9px 5px 5px; gap: 7px; }
  .champion-avatar { width: 42px; height: 42px; }
  .champion-label { font-size: 10px; }
  .hp-text { font-size: 8px; min-width: 42px; }
  .ep-pip { width: 11px; height: 11px; font-size: 8px; line-height: 11px; }
  .turn-banner { padding: 5px 10px; }
  .turn-label { font-size: 8px; margin-bottom: 2px; }
  .turn-active { font-size: 9px; }
  .turn-banner .turn-hint { font-size: 9px; min-height: 11px; }
  .field { padding: 4px 6px; gap: 6px; }
  .champion-row { padding: 6px 8px; gap: 8px; }
  .game-title { font-size: 26px; }

  /* Account panel: stack vertically and shrink so it doesn't dominate. */
  .account-panel {
    top: 8px;
    left: 8px;
    right: 8px;
    padding: 6px 10px;
    gap: 8px;
  }
  .account-actions { flex-wrap: wrap; }
  .account-actions button {
    padding: 4px 8px;
    font-size: 10px;
  }
}

/* Very short landscape (iPhone in landscape ≈ 390 tall): aggressively
   compact the arena. Hide the combat log to leave more room for cards;
   it's accessible via a tap toggle if needed. */
/* Short landscape arena (e.g. iPhone landscape ~390px tall). Strategy:
   keep the normal vertical flow (top champion → ai field → player field →
   bottom champion → hand) but make everything compact enough to fit. The
   hand and field cards sit below each other, never overlapping. */
@media (max-height: 480px) {
  /* Hide chrome that would crowd the viewport. */
  body.in-arena .account-panel { display: none; }
  body.in-arena .log-panel { display: none; }
  body.in-arena #mute-toggle { width: 28px; height: 28px; font-size: 12px; top: 4px; right: 4px; }

  /* Top champion row + turn banner */
  body.in-arena .champion-row { padding: 4px 8px 0; }
  body.in-arena .champion-block { padding: 3px 8px 3px 3px; gap: 6px; }
  body.in-arena .champion-avatar { width: 30px; height: 30px; }
  body.in-arena .champion-meta { min-width: 80px; }
  body.in-arena .champion-label { font-size: 9px; }
  body.in-arena .hp-text { font-size: 8px; min-width: 38px; }
  body.in-arena .hp-bar { height: 6px; }
  body.in-arena .turn-banner { padding: 3px 8px; }
  body.in-arena .turn-label { font-size: 7px; margin-bottom: 1px; }
  body.in-arena .turn-active { font-size: 9px; }
  body.in-arena .turn-banner .turn-hint { font-size: 8px; min-height: 9px; margin-top: 1px; }
  body.in-arena .ep-pip { width: 10px; height: 10px; font-size: 7px; line-height: 10px; }

  /* Field rows — flex:0 so they don't grab all height; hand needs room below */
  body.in-arena .field {
    padding: 1px 4px;
    gap: 3px;
    flex: 0 0 auto;
  }
  body.in-arena .field-slot { height: 96px; width: 66px; }
  body.in-arena .field-slot .card { width: 66px; }

  /* Hand goes back into the column flow on mobile so it can't overlap the
     player field. The desktop version uses position:fixed for the fan
     effect, but on tiny viewports that always overflows something. */
  body.in-arena .hand {
    position: static;
    transform: none;
    bottom: auto;
    left: auto;
    padding: 2px 4px 4px;
    max-width: 100%;
    align-self: center;
    flex-shrink: 0;
  }
  body.in-arena .hand .card {
    width: 60px;
    margin: 0 -16px;
    transform: rotate(var(--fan-rot, 0));   /* drop the y-fan so cards align */
  }
  body.in-arena .hand .card:hover {
    transform: rotate(0) translateY(-6px);
  }
  body.in-arena .hand[data-size="7"] .card  { margin: 0 -22px; }
  body.in-arena .hand[data-size="8"] .card  { margin: 0 -28px; }
  body.in-arena .hand[data-size="9"] .card,
  body.in-arena .hand[data-size="10"] .card,
  body.in-arena .hand[data-size="11"] .card,
  body.in-arena .hand[data-size="12"] .card { margin: 0 -34px; }

  /* Slot label "empty" gets tiny */
  body.in-arena .slot-empty { font-size: 7px; }

  /* Compact action bar inline with bottom champion row */
  body.in-arena .action-bar button { padding: 5px 10px; font-size: 9px; }
  body.in-arena .champion-row.bottom { padding: 0 6px; }
}

/* Short height (landscape phones): tighten the menu vertically. */
@media (max-height: 560px) {
  #menu { padding: 70px 16px 20px; }
  .game-title { font-size: 22px; margin-bottom: 6px; }
  .menu-tagline { font-size: 10px; margin-bottom: 12px; }
  .champion-grid { gap: 10px; margin-bottom: 12px; }
  .champion-portrait { height: 150px; margin-bottom: 6px; }
  .champion-card { padding: 10px; }
  .champion-name { font-size: 11px; margin-bottom: 4px; }
  .champion-bio { font-size: 10px; line-height: 1.3; }
  .difficulty-grid { gap: 8px; margin-bottom: 16px; }
  .diff-card { padding: 8px 10px; }
  .diff-bio { font-size: 10px; }
  .section-label { margin: 2px 0 6px; }
  .play-modes { gap: 6px; }
  .mode-btn { padding: 6px 12px; font-size: 10px; }
  .start-btn { padding: 9px 18px; font-size: 11px; }
}

/* Very narrow / portrait phones: stack the champion + difficulty grids. */
@media (max-width: 600px) {
  .champion-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .difficulty-grid { grid-template-columns: 1fr; gap: 8px; }
  .play-modes { flex-direction: column; align-items: stretch; }
  .game-title { font-size: 22px; }
  .menu-stage { width: 100%; }
}

/* ============================================================
   Wave 21: VS cinematic + rival taunt bubbles
   ============================================================ */
.vs-cinematic {
  position: fixed; inset: 0; z-index: 999;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.85), rgba(0,0,0,1));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center; justify-items: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s;
}
.vs-cinematic.show { opacity: 1; }
.vs-cinematic.fade-out { opacity: 0; transition: opacity 0.4s; }
.vs-half {
  position: relative;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.vs-half.right {
  background: linear-gradient(225deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%);
  transform: translateX(120%);
}
.vs-cinematic.show .vs-half { transform: translateX(0); }
.vs-half::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 35%, transparent) 0%, transparent 55%);
  pointer-events: none;
  animation: vs-pulse 1.5s ease-in-out infinite;
}
@keyframes vs-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.vs-portrait {
  width: clamp(140px, 22vw, 240px);
  height: clamp(140px, 22vw, 240px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1), rgba(0,0,0,0.4));
  border: 4px solid var(--accent);
  box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 80%, transparent);
  display: grid; place-items: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.vs-portrait img {
  width: 80%; height: 80%; object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  image-rendering: pixelated;
}
.vs-name {
  font-size: clamp(20px, 3.2vw, 36px);
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
  text-shadow: 0 0 14px var(--accent), 0 0 26px var(--accent), 2px 2px 0 #000;
  z-index: 1;
  text-transform: uppercase;
}
.vs-sub {
  font-size: 12px; letter-spacing: 4px;
  opacity: 0.75; color: var(--accent);
  z-index: 1;
  text-transform: uppercase;
}
.vs-logo {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.3) rotate(-12deg);
  font-size: clamp(90px, 14vw, 180px);
  font-weight: 900;
  background: linear-gradient(135deg, #ffd166, #ef476f, #ffd166);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 0 40px rgba(255,255,255,0.7);
  font-style: italic;
  z-index: 2;
  opacity: 0;
}
.vs-cinematic.show .vs-logo {
  animation: vs-logo-slam 1.6s 0.4s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes vs-logo-slam {
  0%   { transform: translate(-50%, -50%) scale(0.2) rotate(-25deg); opacity: 0; }
  35%  { transform: translate(-50%, -50%) scale(1.3) rotate(8deg);   opacity: 1; }
  55%  { transform: translate(-50%, -50%) scale(0.95) rotate(-3deg); }
  70%  { transform: translate(-50%, -50%) scale(1.05) rotate(2deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

.rival-bubble {
  position: fixed;
  background: linear-gradient(140deg, #2a1f4a, #1a1538);
  border: 1.5px solid #ff8a8a;
  color: #ffd9d9;
  padding: 8px 14px;
  border-radius: 14px;
  font-size: 13px; font-weight: 600;
  font-style: italic;
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 16px rgba(255,138,138,0.3);
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 30;
  pointer-events: none;
}
.rival-bubble::before {
  content: ""; position: absolute;
  top: -7px; left: 50%; transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ff8a8a;
}
.rival-bubble.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   Wave 21b: animated game-over counters, MVP row, badges
   ============================================================ */
.go-stat strong { font-variant-numeric: tabular-nums; }
.go-vs { font-style: italic; opacity: 0.45; margin: 0 4px; font-weight: 400; font-size: 0.85em; }
.go-stat-mvp {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(255,209,102,0.15), rgba(255,180,0,0.05));
  border: 1px solid rgba(255,209,102,0.4);
  border-radius: 10px;
  padding: 10px 14px !important;
}
.go-stat-mvp::before {
  content: "★";
  font-size: 22px; color: #ffd166;
  text-shadow: 0 0 12px #ffd166;
}
.mvp-name {
  color: #ffd166;
  text-shadow: 0 0 8px rgba(255,209,102,0.5);
}

.go-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin: 14px 0 18px;
}
.go-badge {
  position: relative;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.4));
  border: 1.5px solid var(--badge-color, #fff);
  box-shadow: 0 0 16px color-mix(in srgb, var(--badge-color, #fff) 30%, transparent);
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  animation: badge-pop 0.6s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}
.go-badge:nth-child(1) { animation-delay: 0.2s; }
.go-badge:nth-child(2) { animation-delay: 0.5s; }
.go-badge:nth-child(3) { animation-delay: 0.8s; }
.go-badge:nth-child(4) { animation-delay: 1.1s; }
@keyframes badge-pop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.9); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.go-badge-label {
  font-size: 11px; font-weight: 900; letter-spacing: 2px;
  color: var(--badge-color, #fff);
  text-shadow: 0 0 8px var(--badge-color, #fff);
}
.go-badge-desc { font-size: 11px; opacity: 0.7; margin-top: 2px; }

.go-badge-perfect     { --badge-color: #ffd166; }
.go-badge-untouchable { --badge-color: #06d6a0; }
.go-badge-lightning   { --badge-color: #ffd166; }
.go-badge-endurance   { --badge-color: #118ab2; }
.go-badge-crit-chain  { --badge-color: #ef476f; }
.go-badge-rampage     { --badge-color: #ff8a3d; }
.go-badge-valiant     { --badge-color: #b388ff; }
.go-badge-punisher    { --badge-color: #ff6b6b; }

/* PERFECT VICTORY gets a special rainbow shimmer because it's the most
   prestigious. */
.go-badge-perfect {
  background: linear-gradient(120deg, rgba(255,209,102,0.2), rgba(239,71,111,0.2), rgba(6,214,160,0.2), rgba(255,209,102,0.2));
  background-size: 300% 100%;
  animation: badge-pop 0.6s 0.2s forwards cubic-bezier(0.34, 1.56, 0.64, 1),
             perfect-shimmer 4s linear 1s infinite;
}
@keyframes perfect-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ============================================================
   Wave 22: Opponent's hand (face-down card-backs)
   ============================================================ */
.opp-hand-row {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 4px 12px 8px;
  margin: -4px auto 4px;
  flex-wrap: nowrap;
  overflow: visible;
  perspective: 800px;
  z-index: 2;
  pointer-events: none;
}
.opp-card-back {
  width: 36px;
  height: 50px;
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 50% 50%, #1a2540 0 12px, transparent 13px),
    linear-gradient(135deg, #ef476f 0% 50%, #fff 50% 53%, #1a2540 53% 100%);
  border: 1.5px solid #2a3658;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    0 3px 6px rgba(0,0,0,0.45);
  flex: 0 0 36px;
  transform-style: preserve-3d;
  transform: translateY(0) rotate(0deg);
  animation: oppCardBob 3.4s ease-in-out infinite;
  will-change: transform;
  position: relative;
}
/* Center crest — a small white ring (Pokéball center) is drawn by the
   layered radial-gradients above. We layer a subtle sheen on top for a hint
   of motion. */
.opp-card-back::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: oppCardSheen 5s linear infinite;
  pointer-events: none;
}
@keyframes oppCardBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}
@keyframes oppCardSheen {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
/* Slightly fan the row so it reads like a held hand. */
.opp-hand-row .opp-card-back:nth-child(odd)  { transform: translateY(-1px) rotate(-3deg); }
.opp-hand-row .opp-card-back:nth-child(even) { transform: translateY(1px)  rotate(3deg); }
.opp-hand-empty {
  font-size: 12px; opacity: 0.55;
  font-family: var(--font-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px;
}
/* On small screens, shrink the backs so 10+ cards still fit on one row. */
@media (max-width: 600px) {
  .opp-card-back { width: 24px; height: 34px; flex-basis: 24px; }
  .opp-hand-row { gap: 2px; padding: 2px 8px; }
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .opp-card-back { animation: none; }
  .opp-card-back::after { animation: none; }
}

/* ============================================================
   Wave 23: Hand-lift toggle button (mobile-friendly)
   ============================================================ */
.hand-toggle {
  background: linear-gradient(135deg, #1e2545, #2a3565);
  color: #d4e0ff;
  border: 1.5px solid rgba(140, 180, 255, 0.45);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 0 12px rgba(140,180,255,0.25);
  white-space: nowrap;
}
.hand-toggle:hover { background: linear-gradient(135deg, #2a3565, #3a4585); }
.hand-toggle:active { transform: translateY(1px); }
/* Auto-lowered: user pref is "lifted" but we suppressed it because no card
   is affordable right now. Subtle dim + tooltip explains. */
.hand-toggle.auto-lowered {
  opacity: 0.6;
  filter: saturate(0.6);
  border-style: dashed;
}
.hand-toggle.is-lifted {
  background: linear-gradient(135deg, #2d4a6a, #1a3550);
  border-color: rgba(180, 220, 255, 0.7);
  box-shadow: 0 0 18px rgba(180, 220, 255, 0.45);
}
/* On touch devices the toggle is essential — make it bigger and more
   prominent. */
@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  .hand-toggle {
    padding: 11px 16px;
    font-size: 13px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.5), 0 0 18px rgba(140,180,255,0.35);
  }
}
/* When the hand is lifted, also give it a darker veil behind so the cards
   read against any battlefield. */
.hand.lifted::before {
  content: "";
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 320px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: -1;
}
/* Tap-to-peek: on touch devices we let users tap a single card to lift JUST
   that card (without committing to playing it) so they can read abilities.
   The card stays lifted until they tap elsewhere or tap it again. Pure CSS
   via :focus-visible + custom .peeked class set by JS click handler. */
.hand .card.peeked {
  transform:
    translate(var(--fan-x, 0), calc(var(--fan-y, 0) - 70px))
    rotate(0deg) scale(1.18) !important;
  z-index: 20 !important;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.7),
    0 0 40px var(--type-1, #888);
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.3),
              box-shadow 0.22s ease;
}
.hand .card.peeked::after {
  content: "tap again to play";
  position: absolute;
  bottom: -22px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: var(--font-display);
  letter-spacing: 1px;
  color: #ffd166;
  text-shadow: 0 0 8px #ffd166aa;
  white-space: nowrap;
  background: rgba(0,0,0,0.7);
  padding: 4px 10px;
  border-radius: 8px;
  pointer-events: none;
}

/* ============================================================
   Phase 1 — first-win celebration
   ============================================================ */
.first-win-banner {
  position: fixed;
  top: 24%; left: 50%;
  transform: translate(-50%, -20px) scale(0.85);
  background: linear-gradient(135deg, #ffd166, #ef476f, #06d6a0);
  background-size: 200% 100%;
  animation: fwb-shimmer 2.4s linear infinite;
  color: #06061a;
  padding: 24px 36px;
  border-radius: 16px;
  text-align: center;
  z-index: 260;
  opacity: 0;
  transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    0 0 60px rgba(255,209,102,0.6),
    0 0 120px rgba(239,71,111,0.4);
  pointer-events: none;
}
.first-win-banner.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.fwb-tag {
  font-size: 11px;
  letter-spacing: 5px;
  font-weight: 900;
  font-family: var(--font-display);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.fwb-msg {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 900;
  letter-spacing: 1px;
}
@keyframes fwb-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.confetti-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 255;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px; height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes confetti-fall {
  0%   { opacity: 0; transform: translateY(-10vh) rotate(0deg); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(110vh) rotate(720deg); }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-piece { animation: none; opacity: 0; }
  .first-win-banner { animation: none; }
}

/* ============================================================
   Modal scroll-lock (Wave 28)
   When any overlay is open, the body stops scrolling so the user's
   scroll wheel / touch-drag drives the modal content instead of the
   background.  scrollbar-gutter keeps the layout from jumping when
   the body scrollbar is hidden.
   ============================================================ */
html { scrollbar-gutter: stable; }
body:has(.share-overlay),
body:has(.leaderboard-overlay),
body:has(.game-over),
body:has(.champ-overlay),
body:has(.mh-overlay),
body:has(.ach-overlay),
body:has(.howto-overlay),
body:has(.mulligan-overlay),
body:has(.cb-overlay),
body:has(.pdx-overlay),
body:has(#story-stage),
body:has(#trade-stage),
body:has(#puzzle-stage),
body:has(.story-gameover),
body:has(.cb-preset-menu),
body.modal-open {
  overflow: hidden;
}
/* Prevent touch scroll-chaining on iOS Safari (< 16.4 doesn't honor
   body{overflow:hidden} alone for touch-drag scrolls). */
html { overscroll-behavior: none; }
/* JS fallback: any future overlay that pre-dates the :has() list can
   opt in via document.body.classList.add("modal-open"). */

/* ============================================================
   Crit-Timing Micro-game (Wave 30c)
   ============================================================ */
.critbar-overlay {
  position: fixed; inset: 0;
  z-index: 300;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s;
}
.critbar-overlay.show { opacity: 1; }
.critbar-overlay.hit  .critbar-zone { background: linear-gradient(90deg, var(--theme), #fff7c2, var(--theme)); animation: critbar-hit-flash 0.3s ease-out; }
.critbar-overlay.near .critbar-zone { background: rgba(255,209,102,0.4); }
.critbar-overlay.miss .critbar-zone { background: rgba(255,255,255,0.1); }
@keyframes critbar-hit-flash {
  0%, 100% { box-shadow: 0 0 0 0 var(--theme); }
  50%      { box-shadow: 0 0 32px 8px var(--theme); }
}
.critbar-card {
  background: linear-gradient(160deg, #15192a, #06061a);
  border: 1.5px solid var(--theme, #ffd166);
  border-radius: 14px;
  padding: 20px 24px;
  text-align: center;
  box-shadow: 0 14px 50px rgba(0,0,0,0.6), 0 0 30px color-mix(in srgb, var(--theme) 30%, transparent);
  width: min(380px, 92vw);
}
.critbar-hint {
  font-family: var(--font-display);
  letter-spacing: 3px;
  font-size: 11px;
  color: var(--theme);
  text-shadow: 0 0 8px var(--theme);
  margin-bottom: 12px;
}
.critbar-track {
  position: relative;
  height: 28px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}
.critbar-zone {
  position: absolute;
  top: 0; bottom: 0;
  left: 39%; right: 39%;          /* 22% wide centered sweet spot */
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--theme) 60%, transparent), transparent);
  border-left: 1px solid var(--theme);
  border-right: 1px solid var(--theme);
}
.critbar-indicator {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 4px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 12px #fff, 0 0 24px var(--theme);
  left: 0;
  transform: translateX(-50%);
  will-change: left;
}
.critbar-sub {
  font-size: 11px;
  opacity: 0.65;
  margin-top: 10px;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .critbar-overlay { display: none; }
}

/* Highlight share overlay (Wave 31 — Phase 2) */
.highlight-overlay {
  position: fixed; inset: 0; z-index: 320;
  background: rgba(0,0,0,0.78);
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
}
.highlight-card {
  background: linear-gradient(160deg, #15192a, #06061a);
  border: 1.5px solid rgba(255,209,102,0.5);
  border-radius: 16px;
  padding: 24px;
  max-width: 480px;
  width: 92vw;
  text-align: center;
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
}
.highlight-card .hc-close {
  position: absolute; top: 12px; right: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff; width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 14px;
}
.highlight-card h2 {
  margin: 0 0 14px;
  background: linear-gradient(135deg, #ffd166, #ef476f);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.highlight-card .hc-img {
  width: 100%; height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 24px rgba(255,209,102,0.18);
}
.highlight-card .hc-actions {
  display: flex; gap: 10px; margin-top: 14px;
  justify-content: center;
}
.highlight-card .hc-actions a,
.highlight-card .hc-actions button {
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18);
  text-decoration: none;
}
.highlight-card .hc-actions .primary {
  background: linear-gradient(135deg, #ffd166, #ef476f);
  color: #1a0518; border-color: #ffd166;
  box-shadow: 0 4px 18px rgba(255,209,102,0.35);
}
.highlight-card .hc-actions .ghost {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* Game-over CTA row — Share + Play again side-by-side */
.game-over-cta-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}
.game-over-cta-row #share-highlight-btn {
  background: linear-gradient(135deg, #2a3a5a, #1a2540);
  color: #d4e0ff;
  border: 1px solid rgba(140, 180, 255, 0.45);
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.game-over-cta-row #share-highlight-btn:hover {
  box-shadow: 0 0 18px rgba(140,180,255,0.4);
}

/* Highlight share — format toggle (Post 4:5 / TikTok 9:16) */
.hc-format-toggle {
  display: flex;
  gap: 6px;
  margin: 8px 0 12px;
  justify-content: center;
}
.hc-format {
  flex: 1 1 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  color: #d4e0ff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.hc-format.active {
  background: linear-gradient(135deg, #ffd166, #ef476f);
  color: #1a0518;
  border-color: #ffd166;
  box-shadow: 0 0 14px rgba(255,209,102,0.4);
}
.hc-img-wrap { position: relative; min-height: 200px; }
.hc-loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-style: italic;
}

/* ============================================================
   Win-streak milestone banner (Wave 31)
   ============================================================ */
.streak-banner {
  position: fixed;
  top: 28%; left: 50%;
  transform: translate(-50%, -16px) scale(0.85);
  padding: 24px 36px;
  border-radius: 16px;
  text-align: center;
  z-index: 260;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-weight: 900;
}
.streak-banner.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.sb-tag {
  font-family: var(--font-display);
  letter-spacing: 4px;
  font-size: 14px;
  margin-bottom: 8px;
}
.sb-msg {
  font-size: clamp(22px, 4vw, 38px);
  letter-spacing: 2px;
}
.streak-banner.intensity-fire {
  background: linear-gradient(135deg, #ff8a3d, #ef476f);
  color: #fff;
  box-shadow: 0 0 40px rgba(255, 138, 61, 0.55), 0 0 80px rgba(239, 71, 111, 0.35);
}
.streak-banner.intensity-blazing {
  background: linear-gradient(135deg, #ffd166, #ef476f, #ff8a3d);
  background-size: 200% 100%;
  animation: streak-shimmer 1.6s linear infinite;
  color: #fff;
  box-shadow: 0 0 50px rgba(255, 209, 102, 0.65), 0 0 100px rgba(239, 71, 111, 0.4);
}
.streak-banner.intensity-legendary {
  background: linear-gradient(135deg, #ffd166, #ef476f, #06d6a0, #118ab2, #b388ff, #ffd166);
  background-size: 400% 100%;
  animation: streak-shimmer 2.4s linear infinite;
  color: #fff;
  box-shadow:
    0 0 60px rgba(255, 209, 102, 0.7),
    0 0 120px rgba(179, 136, 255, 0.5),
    inset 0 0 0 2px rgba(255, 255, 255, 0.3);
}
@keyframes streak-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}
.streak-particles {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 255;
  overflow: hidden;
}
.streak-particles span {
  position: absolute;
  top: -20px;
  width: 12px; height: 12px;
  border-radius: 50%;
  opacity: 0;
  animation-name: streak-particle-fall;
  animation-timing-function: cubic-bezier(0.3, 0.65, 0.5, 1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes streak-particle-fall {
  0%   { opacity: 0; transform: translateY(-10vh) scale(0.5); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(110vh) scale(1) rotate(720deg); }
}
@media (prefers-reduced-motion: reduce) {
  .streak-banner { animation: none; }
  .streak-particles span { animation: none; opacity: 0; }
}

/* --- Bestiary + Deck search rows ---------------------------------- */
.pdx-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 4px;
}
.pdx-search {
  flex: 1;
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  outline: none;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.pdx-search:focus {
  border-color: #60a5fa;
  background: rgba(255, 255, 255, 0.12);
}
.pdx-search::placeholder { opacity: 0.55; }
.pdx-search-count {
  font-size: 12px;
  opacity: 0.7;
  min-width: 80px;
  text-align: right;
}
.pdx-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px;
  opacity: 0.7;
  font-style: italic;
}

/* Deck-builder deck-list search */
.cb-deck-search {
  width: 100%;
  margin: 6px 0 8px;
  padding: 8px 12px;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  outline: none;
}
.cb-deck-search:focus { border-color: #60a5fa; background: rgba(255, 255, 255, 0.12); }
.cb-deck-search::placeholder { opacity: 0.55; }

/* --- Spell card staging UX -------------------------------------- */

/* Selected spell card in hand — pulses with a soft glow so the kid
 * sees "this card is waiting for a target". */
.card.spell-staged {
  outline: 3px solid #fbbf24;
  outline-offset: -3px;
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.65),
              inset 0 0 12px rgba(251, 191, 36, 0.35);
  animation: spellStagedPulse 1.1s ease-in-out infinite;
  z-index: 5;
}
@keyframes spellStagedPulse {
  0%, 100% { transform: translateY(-4px) scale(1.02); }
  50%      { transform: translateY(-7px) scale(1.05); }
}

/* Valid target slots glow when a spell is staged — gold ring with a
 * gentle outward pulse. Only the correct side (enemy vs own) lights up. */
.field-slot.spell-target {
  position: relative;
}
.field-slot.spell-target::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 70%);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.85),
              inset 0 0 20px rgba(251, 191, 36, 0.25);
  animation: spellTargetRing 1.1s ease-in-out infinite;
}
@keyframes spellTargetRing {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* --- Explore overlay (browse-the-Bestiary reference) --------------- */
.explore-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.92);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 14px;
  overflow: hidden;
}
.explore-overlay.hidden { display: none; }
.explore-card {
  width: 100%;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #111a2e 0%, #050912 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  color: #f5f6fb;
  overflow: hidden;
  font-family: "Inter", "Open Sans", system-ui, -apple-system, sans-serif;
}
.explore-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.explore-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.explore-subtitle {
  flex: 1;
  font-size: 13px;
  opacity: 0.7;
}
.explore-x {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: inherit;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 16px;
}
.explore-x:hover { background: rgba(255, 255, 255, 0.18); }

.explore-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.explore-search {
  flex: 1;
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  outline: none;
}
.explore-search:focus {
  border-color: #60a5fa;
  background: rgba(255, 255, 255, 0.12);
}
.explore-search::placeholder { opacity: 0.55; }
.explore-count {
  font-size: 12px;
  opacity: 0.7;
  min-width: 80px;
  text-align: right;
}

.explore-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  min-height: 0;
}
@media (max-width: 760px) {
  .explore-body { grid-template-columns: 1fr; }
  .explore-detail { display: none; }
  .explore-body.detail-open .explore-grid { display: none; }
  .explore-body.detail-open .explore-detail { display: block; }
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  padding: 14px 16px;
  overflow-y: auto;
  align-content: start;
}
.explore-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  opacity: 0.7;
  font-style: italic;
}

.explore-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--type-1, #475569) 30%, #0a0f1c 70%) 0%,
    color-mix(in srgb, var(--type-1, #475569) 10%, #05080f 90%) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.1s ease;
  font: inherit;
}
.explore-cell:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.25); }
.explore-cell.selected {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.55);
}
.explore-cell.legendary { border-color: rgba(251, 191, 36, 0.6); }
.explore-cell.mythical  { border-color: rgba(192, 132, 252, 0.65); }
.explore-cell-id {
  font-size: 10px;
  opacity: 0.7;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.explore-cell-sprite {
  width: 70px;
  height: 70px;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
.explore-cell-name {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explore-cell-types {
  display: flex;
  gap: 3px;
  margin-top: 2px;
}
.explore-type-pill {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

/* Detail panel */
.explore-detail {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--type-1, #475569) 18%, #0a1224 82%) 0%,
    color-mix(in srgb, var(--type-1, #475569) 5%, #050a16 95%) 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  overflow-y: auto;
  padding: 18px 20px;
}
.explore-detail-hint {
  text-align: center;
  opacity: 0.55;
  padding: 60px 20px;
  font-style: italic;
}
.explore-detail-inner { display: flex; flex-direction: column; gap: 14px; }
.explore-detail-art {
  position: relative;
  display: flex;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--type-1, #475569) 40%, transparent) 0%,
    transparent 70%);
  padding: 14px 0;
  border-radius: 14px;
}
.explore-detail-art img {
  width: 180px;
  height: 180px;
  object-fit: contain;
}
.explore-detail-flag {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
}
.explore-detail-flag.legendary { color: #fbbf24; text-shadow: 0 0 6px rgba(251, 191, 36, 0.65); }
.explore-detail-flag.mythical  { color: #c084fc; text-shadow: 0 0 6px rgba(192, 132, 252, 0.7); }

.explore-detail-id {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0.65;
}
.explore-detail-name {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
}
.explore-detail-types { display: flex; gap: 5px; }
.explore-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  opacity: 0.75;
}
.explore-detail-meta span {
  background: rgba(0, 0, 0, 0.35);
  padding: 3px 9px;
  border-radius: 999px;
}

.explore-detail-section { display: flex; flex-direction: column; gap: 6px; }
.explore-detail-section h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0;
  display: flex;
  justify-content: space-between;
}
.explore-bst-total { opacity: 0.6; font-weight: 700; letter-spacing: 0.5px; }
.explore-cardstats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  font-size: 13px;
}
.explore-cardstats > div {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.explore-cardstats strong { font-size: 17px; font-weight: 800; display: block; }

.explore-stat {
  display: grid;
  grid-template-columns: 70px 30px 1fr;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.explore-stat-label { opacity: 0.75; }
.explore-stat-val { font-weight: 700; text-align: right; }
.explore-stat-bar {
  height: 7px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.explore-stat-fill {
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--type-1, #6ee7b7) 70%, #6ee7b7), #60a5fa);
  border-radius: 999px;
}

.explore-abilities { display: flex; flex-wrap: wrap; gap: 5px; }
.explore-ability-pill {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-transform: capitalize;
}

.explore-flavor {
  font-size: 13px;
  line-height: 1.5;
  font-style: italic;
  opacity: 0.85;
  margin: 0;
}

.explore-loading, .explore-error {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 16px;
  opacity: 0.8;
}
.explore-error { color: #fca5a5; }

/* ===== Fantasy skin (Painted Reliquary) — cohesive gilt/parchment overrides ===== */
.section-label {
  color: var(--gold);
  font-family: var(--font-display);
  letter-spacing: 3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::before, .section-label::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.champion-card, .difficulty-card, .feature-card {
  background: linear-gradient(160deg, var(--bg-soft), var(--bg-mid));
  border: 1px solid var(--gold-dim);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(201, 162, 78, 0.12);
}
.champion-card.selected, .difficulty-card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(201, 162, 78, 0.45), inset 0 0 0 1px rgba(201, 162, 78, 0.4);
}
.champion-name { color: var(--gold); }
.champion-portrait {
  border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6);
}
.start-btn {
  background: linear-gradient(180deg, #e8c879, var(--gold) 55%, #9c7b2f);
  color: #221603;
  border: 1px solid #f3e4b0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
}
.start-btn:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-2px); }
.play-modes button {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold-dim);
  border-radius: 10px;
  font-family: var(--font-display);
  letter-spacing: 1px;
  transition: all 0.16s ease;
}
.play-modes button:hover { background: rgba(201, 162, 78, 0.12); border-color: var(--gold); }

/* ===== Booster-pack reveal (reward modal) ===== */
.reward-flip {
  position: relative;
  width: 160px;
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.25);
}
.reward-pick.revealed .reward-flip { transform: rotateY(180deg); }
.reward-back, .reward-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
}
.reward-front { transform: rotateY(180deg); }
.reward-front .card { width: 100%; }
.reward-front .card:hover { transform: none; }
.reward-back {
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(201, 162, 78, 0.25), transparent 60%),
    linear-gradient(160deg, #1b2a38, #0e1a24);
  border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 0 4px rgba(201, 162, 78, 0.12), 0 8px 20px rgba(0, 0, 0, 0.5);
}
.reward-back .rb-crest { font-size: 44px; color: var(--gold); text-shadow: 0 0 18px rgba(201, 162, 78, 0.5); }
.reward-back .rb-word { font-family: var(--font-display); letter-spacing: 4px; color: var(--amber); font-size: 13px; }
.reward-pick .reward-tier { opacity: 0; transition: opacity 0.3s ease 0.25s; }
.reward-pick.revealed .reward-tier { opacity: 1; }
.reward-pick.big-pull .reward-flip {
  box-shadow: 0 0 30px 6px rgba(247, 208, 44, 0.75), 0 0 64px 14px rgba(238, 129, 48, 0.4);
}
.reward-overlay.flash::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(247, 208, 44, 0.35), transparent 70%);
  animation: rewardFlash 0.6s ease forwards;
}
@keyframes rewardFlash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

.pdx-gen.complete .pdx-gen-label { color: var(--gold); font-weight: 700; }
.pdx-gen.complete .pdx-gen-fill { background: linear-gradient(90deg, var(--gold), #f3e4b0); }