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

:root {
  --bg-deep: #0c0d1a;
  --bg-mid:  #161930;
  --bg-soft: #232846;
  --ink: #f0eee2;
  --muted: #8a8eaa;
  --good: #6cd97c;
  --bad: #ff5c63;
  --mid: #f0c93f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  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: "Press Start 2P", monospace;
  letter-spacing: 1px;
}

/* 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 trainer
   grid that show off the rarest Pokémon 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: "Press Start 2P", monospace;
  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;
}
.trainer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.section-label {
  font-family: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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;
}
.trainer-level-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 10px;
}
.tl-level {
  font-family: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  font-size: 11px;
}
.cp-section {
  font-family: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace; font-size: 8px; }
.cp-amult { color: var(--mid); font-family: "Press Start 2P", monospace; 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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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; }

/* === Pokédex 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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace; 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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace; font-size: 10px; }
.mh-loss { color: var(--bad);  font-family: "Press Start 2P", monospace; 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: "Press Start 2P", monospace; 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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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);
}
.trainer-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;
}
.trainer-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);
}
.trainer-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 24px var(--accent), 0 0 0 1px rgba(255,255,255,0.2) inset;
}
.trainer-portrait {
  width: 100%;
  height: 130px;
  border-radius: 10px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* Trainer sprite sits in front of a type-tinted spotlight gradient. */
  background-blend-mode: normal;
}
.trainer-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;
}
.trainer-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;
}
.trainer-portrait img {
  height: 115%;          /* over-tall so the figure fills the chip */
  width: auto;
  max-width: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
  position: relative;
  z-index: 3;
  transition: transform 0.4s ease;
  margin-bottom: -8px;   /* anchor the figure to the bottom of the chip */
}
.trainer-card:hover .trainer-portrait img,
.trainer-card.selected .trainer-portrait img {
  transform: scale(1.06) translateY(-2px);
}
.trainer-name {
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  margin-bottom: 6px;
}
.trainer-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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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;
}

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

.trainer-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;
}
.trainer-block.ai {
  cursor: pointer;
  transition: box-shadow 0.18s ease;
}
.trainer-block.ai:hover {
  box-shadow: 0 0 18px rgba(255, 90, 90, 0.4);
}
/* Soft glow on the trainer-block whose turn it is. JS adds `.is-turn`. */
.trainer-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);
}
.trainer-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;
}
.trainer-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));
}
.trainer-avatar[data-ability="brock"]   { background: linear-gradient(140deg, #B6A136, #1a1a0a); }
.trainer-avatar[data-ability="misty"]   { background: linear-gradient(140deg, #6390F0, #0a1430); }
.trainer-avatar[data-ability="pikachu"] { background: linear-gradient(140deg, #F7D02C, #2a2210); }
.trainer-avatar[data-ability="erika"]   { background: linear-gradient(140deg, #7AC74C, #122412); }
.trainer-avatar[data-ability="sabrina"] { background: linear-gradient(140deg, #F95587, #2c0e1c); }
.trainer-avatar[data-ability="lance"]   { background: linear-gradient(140deg, #6F35FC, #0e0828); }
.trainer-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%);
}

.trainer-meta {
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trainer-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: "Press Start 2P", monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  min-width: 56px;
  text-align: right;
}
.trainer-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 trainer 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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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 Pokémon 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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  font-size: 9px;
}
.ap-mult {
  color: var(--mid);
  font-family: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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 trainer
   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: "Press Start 2P", monospace; 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: "Press Start 2P", monospace;
  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; }

  /* Trainer rows tighten but stay horizontal — trainer info left,
     turn banner right; both stay readable. */
  body.in-arena .trainer-row {
    padding: 4px 6px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  body.in-arena .trainer-block {
    padding: 3px 6px 3px 3px;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
  }
  body.in-arena .trainer-avatar { width: 36px; height: 36px; }
  body.in-arena .trainer-meta { min-width: 0; }
  body.in-arena .trainer-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 / trainer 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;
  }
  .trainer-meta { min-width: 100px; }
  .trainer-block { padding: 5px 9px 5px 5px; gap: 7px; }
  .trainer-avatar { width: 42px; height: 42px; }
  .trainer-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; }
  .trainer-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 trainer → ai field → player field →
   bottom trainer → 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 trainer row + turn banner */
  body.in-arena .trainer-row { padding: 4px 8px 0; }
  body.in-arena .trainer-block { padding: 3px 8px 3px 3px; gap: 6px; }
  body.in-arena .trainer-avatar { width: 30px; height: 30px; }
  body.in-arena .trainer-meta { min-width: 80px; }
  body.in-arena .trainer-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 trainer row */
  body.in-arena .action-bar button { padding: 5px 10px; font-size: 9px; }
  body.in-arena .trainer-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; }
  .trainer-grid { gap: 10px; margin-bottom: 12px; }
  .trainer-portrait { height: 70px; margin-bottom: 6px; }
  .trainer-card { padding: 10px; }
  .trainer-name { font-size: 11px; margin-bottom: 4px; }
  .trainer-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 trainer + difficulty grids. */
@media (max-width: 600px) {
  .trainer-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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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: "Press Start 2P", monospace;
  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; }
}

/* --- Pokédex + 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-Pokédex 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; }

/* =====================================================================
 * Portrait iPhone layout (slice: vertical-mode playability)
 *
 * Triggered when the viewport is portrait AND narrow enough to be an
 * iPhone — NOT an iPad, NOT a desktop in a narrow window. The widest
 * iPhone portrait width is 430px (Pro Max); the smallest iPad
 * portrait is 744px (iPad mini). A 500px max-width comfortably
 * catches every iPhone while excluding every iPad. Tablets and
 * desktops keep the regular landscape layout unchanged.
 *
 * The DOM is already top-to-bottom (trainer-top → AI field → player
 * field → trainer-bottom → hand), so this is a sizing + spacing pass
 * — no DOM changes needed.
 *
 * Goals:
 *   - 3-4 cards fit per row in each field without horizontal scroll
 *   - hand becomes a tappable horizontal scroll strip (no fan)
 *   - log + status panels collapse / hide so the board has space
 *   - all touch targets ≥ 44px so kids' fingers don't mis-tap
 * ================================================================= */
@media (orientation: portrait) and (max-width: 500px) {
  /* Tighter overall padding around the arena. */
  body.in-arena { overflow: hidden; }
  #arena { padding: 0; }
  .arena-bg { padding: 0; }

  /* Trainer rows shrink. */
  .trainer-row {
    padding: 6px 8px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .trainer-block {
    gap: 6px;
    padding: 6px 8px;
    border-radius: 10px;
    min-height: 0;
  }
  .trainer-avatar {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px;
  }
  .trainer-avatar img { max-width: 100%; max-height: 100%; }
  .trainer-meta { font-size: 11px; min-width: 0; flex: 1; }
  .trainer-label { font-size: 11px; }

  /* Turn banner — collapse the hint subtitle, keep the headline. */
  .turn-banner { padding: 4px 6px; min-width: 0; flex: 1; text-align: right; }
  .turn-label  { font-size: 9px;  }
  .turn-active { font-size: 12px; }
  .turn-hint   { display: none; }
  .turn-timer  { font-size: 11px; }

  /* Hide opp-hand row + side panels that compete for vertical space. */
  .opp-hand-row { display: none; }
  .combat-log,
  #combat-log,
  .status-panel { display: none; }

  /* Fields — stack vertically (the DOM already does), shrink cards. */
  .field {
    padding: 4px 6px;
    gap: 4px;
    flex-wrap: wrap;
    min-height: 0;
  }
  .field-slot {
    width: 82px;
    height: 116px;
    border-radius: 10px;
  }
  .ai-field .card,
  .player-field .card,
  .field .card {
    width: 82px;
    transform: none;
  }
  .ai-field .card { transform: scale(0.96); }
  .field-slot .card .card-name { font-size: 10px; max-width: 64px; }
  .field-slot .card .cost-gem   { width: 22px; height: 22px; font-size: 11px; }
  .field-slot .card .card-hp    { font-size: 9px; }
  .field-slot .card .type-badge { width: 16px; height: 16px; font-size: 9px; }

  /* Hand — switch from fanned/fixed to an inline horizontal strip
   * pinned to the very bottom. Always-visible, scroll horizontally
   * with finger-friendly snap. */
  .hand {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100vw;
    width: 100vw;
    transform: none;
    padding: 6px 8px 10px;
    gap: 6px;
    overflow-x: auto;
    overflow-y: visible;
    justify-content: flex-start;
    scroll-snap-type: x mandatory;
    background: linear-gradient(to top, rgba(5, 8, 16, 0.92), rgba(5, 8, 16, 0.4));
    backdrop-filter: blur(6px);
    z-index: 50;
  }
  .hand:hover, .hand:focus-within, .hand.lifted { transform: none; }
  .hand .card {
    /* Cancel the fan — each hand card stands upright, snap to position. */
    width: 90px;
    flex: 0 0 90px;
    margin: 0;
    transform: none !important;
    scroll-snap-align: center;
  }
  /* Cancel all the [data-size=N] fan overlap rules — they assume a
   * horizontal-fan layout. The strip version uses gap instead. */
  .hand[data-size="7"]  .card,
  .hand[data-size="8"]  .card,
  .hand[data-size="9"]  .card,
  .hand[data-size="10"] .card,
  .hand[data-size="11"] .card,
  .hand[data-size="12"] .card,
  .hand[data-size="13"] .card,
  .hand[data-size="14"] .card,
  .hand[data-size="15"] .card { margin: 0; }

  /* Reserve room at the bottom of the arena so the fixed hand strip
   * doesn't cover the player trainer-row. */
  #arena { padding-bottom: 150px; }
  .trainer-row.bottom { margin-bottom: 0; padding-bottom: 6px; }

  /* Item bar (Potion / Switch / etc.) — shrink + wrap. */
  .item-bar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px 6px;
  }
  .item-bar .item-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 12px;
  }

  /* Touch-target bumps — anything kids tap to play a turn. */
  .end-turn-btn,
  .start-btn,
  .mode-btn,
  .primary,
  .howto-close {
    min-height: 44px;
    padding: 10px 16px;
  }
  .pdx-x,
  .explore-x,
  .reading-back {
    min-width: 44px;
    min-height: 44px;
  }

  /* Reward/offer modal pulls in for portrait. */
  .reward-overlay .reward-card { max-width: 92vw; padding: 14px; }
  .reward-overlay .reward-picks { gap: 8px; }
  .reward-overlay .reward-pick .card { width: 96px; }
}

/* Even tighter when there's barely any height (landscape phone wedge). */
@media (orientation: portrait) and (max-width: 380px) {
  .field-slot { width: 72px; height: 104px; }
  .field .card, .ai-field .card, .player-field .card { width: 72px; }
  .field-slot .card .card-name { font-size: 9px; max-width: 56px; }
  .hand .card { width: 78px; flex: 0 0 78px; }
}

/* =====================================================================
 * Redeem-code card reveal + confetti (slice: redeem visibility)
 *
 * Fires when a player redeems a code via the main-menu modal. The
 * input dialog content is replaced in-place with a card-reveal panel:
 *   - the granted card rendered big (renderCard output)
 *   - rarity pill + new-quantity line
 *   - a confetti burst behind/in-front of the card
 *
 * Confetti is pure CSS — 60 colored squares with random
 * left-position + drift + rotation, animated from above the viewport
 * down past the bottom edge. The whole layer is removed after 4s so
 * a long-lived overlay doesn't leak DOM.
 * ================================================================= */
.redeem-card-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0;
  perspective: 600px;
}
.redeem-card-slot .card.redeem-reveal-card {
  /* Slight scale-up + entrance animation so the card lands with
   * authority instead of just appearing. */
  animation: redeemRevealIn 0.7s cubic-bezier(0.18, 1.1, 0.4, 1.2);
  transform: scale(1.05);
}
@keyframes redeemRevealIn {
  0%   { transform: scale(0.4) rotate(-12deg); opacity: 0; filter: brightness(2); }
  60%  { transform: scale(1.18) rotate(4deg);  opacity: 1; filter: brightness(1.4); }
  100% { transform: scale(1.05) rotate(0);     opacity: 1; filter: brightness(1); }
}

.redeem-meta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.redeem-meta strong { font-size: 18px; }
.redeem-rarity-pill {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.redeem-rarity-pill.rarity-common    { color: #cbd5e1; border-color: rgba(203,213,225,0.5); }
.redeem-rarity-pill.rarity-uncommon  { color: #6ee7b7; border-color: rgba(110,231,183,0.55); }
.redeem-rarity-pill.rarity-rare      { color: #60a5fa; border-color: rgba(96,165,250,0.6); }
.redeem-rarity-pill.rarity-epic      { color: #c084fc; border-color: rgba(192,132,252,0.65); box-shadow: 0 0 14px rgba(192,132,252,0.35); }
.redeem-rarity-pill.rarity-legendary { color: #fbbf24; border-color: rgba(251,191,36,0.7);  box-shadow: 0 0 18px rgba(251,191,36,0.5); }

/* Confetti layer — pinned to the overlay, falls past the bottom. */
.redeem-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  transform: translateY(-20px) rotate(0deg);
  animation: confettiFall linear forwards;
  will-change: transform;
}
.confetti-piece.big {
  width: 12px;
  height: 18px;
  animation-duration: 2.6s !important;
}
@keyframes confettiFall {
  0%   { transform: translate(0, -40px) rotate(0deg); opacity: 1; }
  10%  { opacity: 1; }
  100% { transform: translate(var(--confetti-drift, 0), 110vh) rotate(var(--confetti-rot, 360deg)); opacity: 0.4; }
}

/* Site credit footer. Pinned to the bottom of the viewport, low-contrast
   so it never competes with arena UI but is always discoverable. */
#site-footer {
  position: fixed;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  pointer-events: auto;
  z-index: 5;
  font-family: "Inter", system-ui, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
#site-footer a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
}
#site-footer a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.8);
}
@media (orientation: portrait) and (max-width: 500px) {
  #site-footer {
    font-size: 9px;
    bottom: 3px;
  }
}