/* ============================================================
   Tadaweb TCG — Stylesheet
   Aesthetic: dark futuristic arena, holographic accents
   ============================================================ */

/* Chakra Petch — bundled locally so it works without internet */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ChakraPetch-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ChakraPetch-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/ChakraPetch-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/ChakraPetch-700.ttf') format('truetype');
}

:root{
  --bg: #00111A;
  --bg-2: #061a26;
  --bg-3: #0c2735;
  --accent: #34d9c3;
  --accent-dim: #1f8a7a;
  --light: #fafafa;
  --muted: rgba(250,250,250,0.55);
  --danger: #ff5c5c;
  --joy: #ff8c2a;
  --tech: #34d9c3;
  --shadow: #6c4fd9;
  --gold: #ffc857;
  --ex-orange: #ff7a18;
  --ir-purple: #b85cff;
  --line: rgba(52,217,195,0.18);
  --card-radius: 12px;
  --shadow-deep: 0 10px 30px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  --glow: 0 0 18px rgba(52,217,195,0.35);
}

*{ box-sizing: border-box; margin:0; padding:0; }
em, i, blockquote, cite, address{ font-style: normal; }
html, body{ height: 100%; }
body{
  font-family: 'Chakra Petch', system-ui, sans-serif;
  background: var(--bg);
  color: var(--light);
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(52,217,195,0.08), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(108,79,217,0.08), transparent 50%),
    linear-gradient(180deg, #00111A 0%, #00080d 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
body::before{
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
  z-index: 1;
}

/* ----------- Top bar ----------- */
.topbar{
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  background: linear-gradient(180deg, rgba(0,17,26,0.95), rgba(0,17,26,0.7));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand{
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 14px;
}
.brand-logo{
  width: 28px; height: 28px;
  background: var(--accent); color: var(--bg);
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  box-shadow: var(--glow);
}
.brand small{ color: var(--muted); font-weight: 400; letter-spacing: 0.16em; }
nav.tabs{ display: flex; gap: 4px; }
nav.tabs button{
  background: transparent; border: 1px solid transparent;
  color: var(--muted); padding: 8px 14px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
nav.tabs button:hover{ color: var(--light); background: rgba(52,217,195,0.06); }
nav.tabs button.active{
  color: var(--accent); background: rgba(52,217,195,0.08);
  border-color: var(--line);
}

/* ----------- Layout ----------- */
.screen{ position: relative; z-index: 2; min-height: calc(100vh - 56px); }
/* Only content screens get padding — not game or full-height screens */
#screen-collection, #screen-builder, #screen-rules{ padding: 32px; }
.screen.hidden{ display: none; }

h1.section-title{
  font-size: 28px; font-weight: 600; letter-spacing: 0.04em;
  margin-bottom: 6px;
}
p.section-sub{ color: var(--muted); margin-bottom: 24px; font-size: 14px; }

/* ============== BUTTONS (shared) ============== */
button.btn, a.btn{
  font-family: inherit;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 13px;
  padding: 14px 22px;
  border: 1px solid var(--accent);
  background: var(--accent); color: var(--bg);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 0;
}
button.btn:hover, a.btn:hover{
  box-shadow: 0 0 28px rgba(52,217,195,0.55);
}
button.btn.ghost, a.btn.ghost{
  background: transparent; color: var(--accent);
}
button.btn.ghost:hover{ background: rgba(52,217,195,0.1); box-shadow: none; }
button.btn:disabled{ opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============== HOME — game-like fullscreen stage ============== */
#screen-home.home-screen{ padding: 0; }

.home-stage{
  position: relative;
  width: 100%;
  height: calc(100vh - 56px);
  min-height: 640px;
  overflow: hidden;
  background: #00060c;
}
.home-stage .space-scene-canvas{ z-index: 0; }
.home-vignette{
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 0%,   rgba(0,0,0,0.35) 0%, transparent 50%);
}

.home-grid{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 48px; align-items: center;
  max-width: 1380px; margin: 0 auto;
  padding: 48px 56px 0;
  height: calc(100% - 50px);
}

/* Eyebrow tag */
.home-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(52,217,195,0.35);
  padding: 6px 14px;
  background: rgba(52,217,195,0.06);
  backdrop-filter: blur(6px);
  margin-bottom: 28px;
  animation: home-fade-up 0.7s cubic-bezier(.2,.7,.2,1) both;
}
.he-dot{
  width: 8px; height: 8px; background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: he-pulse 1.8s ease-in-out infinite;
}
@keyframes he-pulse{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%   { opacity: 0.45; transform: scale(0.7); }
}

/* Title */
.home-title{
  font-size: clamp(58px, 8.5vw, 124px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.home-title .ht-word{
  display: block;
  text-shadow:
    0 0 22px rgba(0,16,28,0.6),
    0 2px 0 rgba(0,0,0,0.4);
}
.ht-word-1{ animation: home-fade-up 0.75s cubic-bezier(.2,.7,.2,1) 0.05s both; }
.ht-word-2{ animation: home-fade-up 0.75s cubic-bezier(.2,.7,.2,1) 0.15s both; }
.ht-word-3{ animation: home-fade-up 0.75s cubic-bezier(.2,.7,.2,1) 0.25s both; }
.ht-accent{
  color: var(--accent);
  text-shadow:
    0 0 18px rgba(52,217,195,0.55),
    0 0 50px rgba(52,217,195,0.35);
}

@keyframes home-fade-up{
  from{ opacity: 0; transform: translateY(20px); }
  to  { opacity: 1; transform: translateY(0); }
}

.home-lede{
  font-size: 17px; color: rgba(250,250,250,0.7);
  max-width: 460px; line-height: 1.55;
  margin-bottom: 36px;
  animation: home-fade-up 0.75s cubic-bezier(.2,.7,.2,1) 0.35s both;
}

/* CTA group */
.home-cta-row{
  display: flex; gap: 28px;
  align-items: stretch;
  margin-bottom: 36px;
  animation: home-fade-up 0.75s cubic-bezier(.2,.7,.2,1) 0.45s both;
}

/* Play button — chunky, glowing */
.home-play-btn{
  position: relative; overflow: hidden;
  font-family: inherit; cursor: pointer;
  font-size: 18px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bg);
  padding: 22px 38px;
  background: linear-gradient(135deg, var(--accent) 0%, #6cf2dc 100%);
  border: none;
  display: inline-flex; align-items: center; gap: 14px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 0 40px rgba(52,217,195,0.45),
    0 12px 32px rgba(0,0,0,0.5);
  transition: transform 0.18s, box-shadow 0.2s;
  animation: hpb-breathe 3.2s ease-in-out infinite;
}
@keyframes hpb-breathe{
  0%,100%{ box-shadow:
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 0 40px rgba(52,217,195,0.45),
    0 12px 32px rgba(0,0,0,0.5); }
  50%   { box-shadow:
    0 0 0 1px rgba(255,255,255,0.25) inset,
    0 0 70px rgba(52,217,195,0.7),
    0 14px 42px rgba(0,0,0,0.55); }
}
.home-play-btn:hover{ box-shadow:
    0 0 0 1px rgba(255,255,255,0.3) inset,
    0 0 80px rgba(52,217,195,0.8),
    0 12px 32px rgba(0,0,0,0.55);
  filter: brightness(1.08);
}
.home-play-btn:active{ filter: brightness(0.95); }
.home-play-btn .hpb-icon{
  font-size: 16px;
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  background: rgba(0,17,26,0.85);
  color: var(--accent);
}
.home-play-btn .hpb-flare{
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.45) 50%, transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
  animation: hpb-flare 4.5s ease-in-out infinite;
}
@keyframes hpb-flare{
  0%   { transform: translateX(-100%); }
  35%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* Secondary links — numbered list */
.home-secondary{
  display: flex; flex-direction: column; gap: 0;
  border-left: 1px solid rgba(52,217,195,0.25);
  padding-left: 24px;
  justify-content: center;
}
.home-link-btn{
  font-family: inherit; background: transparent; border: none;
  color: rgba(250,250,250,0.55);
  display: flex; align-items: baseline; gap: 14px;
  padding: 6px 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.18s, transform 0.18s, gap 0.18s;
  font-size: 14px; letter-spacing: 0.04em;
  font-weight: 500;
}
.home-link-btn .hlb-num{
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  color: rgba(52,217,195,0.6);
  width: 24px;
}
.home-link-btn .hlb-arrow{
  color: var(--accent); opacity: 0; transition: opacity 0.18s, transform 0.18s;
  margin-left: auto;
}
.home-link-btn:hover{ color: var(--light); gap: 18px; }
.home-link-btn:hover .hlb-arrow{ opacity: 1; transform: translateX(4px); }

/* Quick stats */
.home-stats{
  display: flex; gap: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.05);
  animation: home-fade-up 0.75s cubic-bezier(.2,.7,.2,1) 0.55s both;
}
.hs-stat{ display: flex; flex-direction: column; gap: 2px; }
.hs-num{
  font-size: 36px; font-weight: 700; line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.hs-bonus{
  font-size: 14px; font-weight: 700; letter-spacing: 0;
  color: var(--ir-purple);
  margin-left: 6px;
  vertical-align: top;
  position: relative; top: 4px;
}
.hs-label{
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(250,250,250,0.45);
}

/* Right side — hero deck */
.home-right{
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.hero-deck-wrap{
  position: relative;
  width: 100%;
  height: 480px;
  display: grid; place-items: center;
  animation: home-fade-up 0.9s cubic-bezier(.2,.7,.2,1) 0.2s both;
}
.hero-deck-orbit{
  position: absolute;
  width: 460px; height: 460px;
  border: 1px dashed rgba(52,217,195,0.18);
  border-radius: 50%;
  animation: orbit-spin 60s linear infinite;
}
.hero-deck-orbit-2{
  width: 340px; height: 340px;
  border-color: rgba(108,79,217,0.15);
  animation: orbit-spin 38s linear infinite reverse;
}
@keyframes orbit-spin{ to{ transform: rotate(360deg); } }

.hero-deck-glow{
  position: absolute; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(52,217,195,0.25) 0%, transparent 65%);
  filter: blur(20px);
  z-index: -1;
  animation: hero-glow-pulse 4s ease-in-out infinite;
}
@keyframes hero-glow-pulse{
  0%,100%{ opacity: 0.5; transform: scale(0.92); }
  50%   { opacity: 0.9; transform: scale(1.05); }
}

.hero-deck{
  position: relative;
  width: 240px; height: 400px;
  display: grid; place-items: center;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}
.hero-card{
  position: absolute;
  width: 200px; aspect-ratio: 0.62;
  border-radius: 14px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 36px rgba(52,217,195,0.18);
  background-size: cover; background-position: center;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.hero-card[data-i="0"]{
  transform: translate3d(-110px, 30px, -40px) rotate(-14deg);
  animation: hero-float-l 6s ease-in-out infinite;
}
.hero-card[data-i="1"]{
  transform: translate3d(0, -10px, 40px) rotate(0deg) scale(1.06);
  z-index: 2;
  animation: hero-float-c 5s ease-in-out infinite;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.08),
    0 0 60px rgba(52,217,195,0.35);
}
.hero-card[data-i="2"]{
  transform: translate3d(110px, 30px, -40px) rotate(14deg);
  animation: hero-float-r 6.5s ease-in-out infinite 0.5s;
}
@keyframes hero-float-l{
  0%,100%{ transform: translate3d(-110px, 30px, -40px) rotate(-14deg); }
  50%   { transform: translate3d(-118px, 18px, -40px) rotate(-15deg); }
}
@keyframes hero-float-c{
  0%,100%{ transform: translate3d(0, -10px, 40px) rotate(0deg) scale(1.06); }
  50%   { transform: translate3d(0, -22px, 40px) rotate(-1deg) scale(1.06); }
}
@keyframes hero-float-r{
  0%,100%{ transform: translate3d(110px, 30px, -40px) rotate(14deg); }
  50%   { transform: translate3d(118px, 18px, -40px) rotate(15deg); }
}

/* Collection badge under the hero deck */
.collection-badge{
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px;
  background: rgba(0,12,20,0.55);
  border: 1px solid rgba(52,217,195,0.2);
  backdrop-filter: blur(8px);
  max-width: 360px;
  width: 100%;
  animation: home-fade-up 0.75s cubic-bezier(.2,.7,.2,1) 0.5s both;
}
.cb-code{
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--bg); background: var(--accent);
  padding: 8px 10px;
  flex-shrink: 0;
}
.cb-meta{ flex: 1; min-width: 0; }
.cb-name{
  font-size: 14px; font-weight: 600; letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.cb-progress{ display: flex; align-items: center; gap: 10px; }
.cb-progress-bar{
  flex: 1; height: 4px; background: rgba(255,255,255,0.08); overflow: hidden;
}
.cb-progress-fill{
  height: 100%; background: linear-gradient(90deg, var(--accent), #6cf2dc);
  box-shadow: 0 0 10px rgba(52,217,195,0.6);
  transition: width 0.6s cubic-bezier(.2,.7,.2,1);
}
.cb-progress-text{
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  color: rgba(250,250,250,0.7);
  white-space: nowrap;
}

/* Marquee at bottom */
.home-marquee{
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 50px; z-index: 2;
  overflow: hidden;
  border-top: 1px solid rgba(52,217,195,0.12);
  background: linear-gradient(180deg, transparent, rgba(0,6,12,0.6));
  display: flex; align-items: center;
}
.home-marquee-inner{
  display: flex; gap: 64px;
  white-space: nowrap;
  animation: marquee-slide 40s linear infinite;
  font-size: 11px; font-weight: 600; letter-spacing: 0.4em;
  color: rgba(52,217,195,0.35);
}
.home-marquee-inner span{ flex-shrink: 0; }
@keyframes marquee-slide{
  to{ transform: translateX(-50%); }
}

/* ============== PLAY SETUP — game-like ============== */
#screen-play.play-screen{ padding: 0; }

.play-stage{
  position: relative;
  width: 100%;
  height: calc(100vh - 56px);
  min-height: 640px;
  overflow: hidden;
  background: #00060c;
  --stage-tint: transparent;
  --stage-tint-2: transparent;
}
.play-stage .space-scene-canvas{ z-index: 0; }
.play-vignette{
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.5) 0%, transparent 55%);
}
/* Tint layer — picks up the selected deck's primary AND secondary colors.
   Mixed decks get a diagonal gradient between the two. */
.play-tint{
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 110% at 20% 100%, color-mix(in srgb, var(--stage-tint) 42%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 100% 90% at 85% 5%, color-mix(in srgb, var(--stage-tint-2) 30%, transparent) 0%, transparent 55%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--stage-tint) 9%, transparent) 0%,
      color-mix(in srgb, var(--stage-tint-2) 14%, transparent) 100%);
  transition:
    background 0.7s cubic-bezier(.2,.7,.2,1),
    opacity 0.7s;
  opacity: 0;
}
.play-stage.has-tint .play-tint{ opacity: 1; }
.play-inner{
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column;
  max-width: 1400px; margin: 0 auto;
  padding: 32px 48px;
}

.play-header{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 32px; margin-bottom: 24px;
  animation: home-fade-up 0.55s cubic-bezier(.2,.7,.2,1) both;
}
.play-header-left{ flex: 1; min-width: 0; }
.play-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(52,217,195,0.35);
  padding: 5px 12px;
  background: rgba(52,217,195,0.06);
  margin-bottom: 12px;
}
.play-title{
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 700; line-height: 1; letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.play-sub{
  font-size: 14px; color: rgba(250,250,250,0.55);
  letter-spacing: 0.02em;
}

/* VS block in header */
.play-vs-block{
  display: flex; align-items: center; gap: 18px;
  padding: 14px 22px;
  background: rgba(0,12,20,0.55);
  border: 1px solid rgba(52,217,195,0.2);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.vs-side{ display: flex; flex-direction: column; gap: 2px; }
.vs-side-opp{ text-align: right; }
.vs-label{
  font-size: 9px; font-weight: 600; letter-spacing: 0.3em;
  color: rgba(250,250,250,0.5);
  text-transform: uppercase;
}
.vs-deck{
  font-size: 14px; font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
  max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vs-side-opp .vs-deck{ color: rgba(250,250,250,0.7); }
.vs-divider{
  font-size: 12px; font-weight: 700; letter-spacing: 0.3em;
  color: rgba(255,255,255,0.4);
  padding: 0 4px;
}

/* Deck grid — compact, NO leader images */
.play-deck-grid{
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, 1fr);
  gap: 14px;
  overflow-y: auto;
  padding-right: 4px;
  animation: home-fade-up 0.6s cubic-bezier(.2,.7,.2,1) 0.1s both;
}
@media (max-width: 1100px){ .play-deck-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px){ .play-deck-grid{ grid-template-columns: 1fr; } }

.play-deck-grid::-webkit-scrollbar{ width: 6px; }
.play-deck-grid::-webkit-scrollbar-thumb{ background: rgba(52,217,195,0.3); }
.play-deck-grid::-webkit-scrollbar-track{ background: transparent; }

/* Individual deck card — runic, no card art */
.play-deck-card{
  --secondary: var(--primary); /* JS overrides for mixed-type decks */
  position: relative;
  background:
    /* Diagonal blend of primary + secondary (subtle for unselected) */
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary) 14%, transparent) 0%,
      color-mix(in srgb, var(--secondary) 10%, transparent) 60%,
      transparent 100%),
    rgba(0,12,20,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  cursor: pointer;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  transition:
    border-color 0.25s,
    transform 0.18s,
    box-shadow 0.3s,
    background 0.45s cubic-bezier(.2,.8,.3,1);
  overflow: hidden;
}
/* Top-right corner accent — uses secondary color so mixed decks shimmer with both */
.play-deck-card::before{
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--secondary) 22%, transparent) 0%, transparent 55%),
    radial-gradient(circle at bottom left, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 55%);
  opacity: 0.55;
  transition: opacity 0.3s;
}
/* Sweep highlight that fires when the deck becomes selected */
.play-deck-card::after{
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 50%;
  background: linear-gradient(110deg,
    transparent 0%,
    color-mix(in srgb, var(--primary) 35%, transparent) 45%,
    color-mix(in srgb, var(--secondary) 35%, transparent) 55%,
    transparent 100%);
  pointer-events: none;
  opacity: 0;
}
.play-deck-card.selected::after{
  animation: pdc-sweep 0.7s cubic-bezier(.3,.1,.4,1.05) forwards;
}
@keyframes pdc-sweep{
  0%   { transform: translateX(0);    opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(360%); opacity: 0; }
}
.play-deck-card:hover{
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent) inset,
    0 0 32px color-mix(in srgb, var(--primary) 30%, transparent),
    0 0 38px color-mix(in srgb, var(--secondary) 18%, transparent);
}
.play-deck-card:hover::before{ opacity: 0.85; }
.play-deck-card.selected{
  border-color: var(--primary);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--primary) 26%, transparent) 0%,
      color-mix(in srgb, var(--secondary) 22%, transparent) 60%,
      transparent 100%),
    rgba(0,12,20,0.5);
  box-shadow:
    0 0 0 1px var(--primary) inset,
    0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent),
    0 0 48px color-mix(in srgb, var(--primary) 50%, transparent),
    0 0 60px color-mix(in srgb, var(--secondary) 30%, transparent);
  animation: pdc-selected-pulse 2.4s ease-in-out infinite;
}
@keyframes pdc-selected-pulse{
  0%, 100% { box-shadow:
    0 0 0 1px var(--primary) inset,
    0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent),
    0 0 36px color-mix(in srgb, var(--primary) 40%, transparent),
    0 0 50px color-mix(in srgb, var(--secondary) 22%, transparent); }
  50%      { box-shadow:
    0 0 0 1px var(--primary) inset,
    0 0 0 6px color-mix(in srgb, var(--primary) 20%, transparent),
    0 0 60px color-mix(in srgb, var(--primary) 60%, transparent),
    0 0 76px color-mix(in srgb, var(--secondary) 36%, transparent); }
}
.play-deck-card.selected::before{ opacity: 1; }

/* Rune column — big type glyph(s). Mixed decks show TWO glyphs. */
.pdc-rune{
  position: relative;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary) 38%, transparent) 0%, transparent 65%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--secondary) 32%, transparent) 0%, transparent 65%),
    rgba(0,0,0,0.32);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  overflow: hidden;
  transition: border-color 0.3s, background 0.45s;
}
.pdc-rune.mixed{
  border-image: linear-gradient(135deg, var(--primary), var(--secondary)) 1;
}
.pdc-rune-icons{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 0;
}
.pdc-rune-icons img{
  width: 36px; height: 36px;
  filter: drop-shadow(0 0 12px var(--primary));
  opacity: 0.95;
  transition: filter 0.3s, transform 0.3s;
}
.pdc-rune-icons img:nth-child(2){
  margin-left: -10px;
  filter: drop-shadow(0 0 12px var(--secondary));
  transform: scale(0.85);
}
.play-deck-card.selected .pdc-rune-icons img{
  animation: rune-spin 8s linear infinite;
}
.play-deck-card.selected .pdc-rune-icons img:nth-child(2){
  animation: rune-spin-rev 6s linear infinite;
}
@keyframes rune-spin{ to{ transform: rotate(360deg); } }
@keyframes rune-spin-rev{ to{ transform: rotate(-360deg) scale(0.85); } }

/* Top-right tag */
.pdc-tag{
  position: absolute; top: 10px; right: 10px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.22em;
  padding: 3px 8px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(250,250,250,0.6);
  z-index: 3;
}

/* Body */
.pdc-body{
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding-right: 56px; /* leaves room for pdc-tag */
}
.pdc-top{ display: flex; flex-direction: column; gap: 4px; }
.pdc-name{
  font-size: 17px; font-weight: 700; letter-spacing: 0.02em;
  color: var(--light); text-transform: uppercase;
  line-height: 1.1;
  flex: 1; min-width: 0;
}
.pdc-types{ display: flex; gap: 5px; flex-wrap: wrap; }
.pdc-type{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  padding: 3px 7px;
  text-transform: uppercase;
  color: var(--tc);
  background: color-mix(in srgb, var(--tc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent);
}
.pdc-strategy{
  font-size: 11px; color: rgba(250,250,250,0.6);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Composition bar — 3 segments */
.pdc-comp-bar{
  display: flex; height: 5px; gap: 2px;
  background: rgba(0,0,0,0.4);
  margin-top: 2px;
  overflow: hidden;
}
.pdc-seg{ display: block; height: 100%; transition: filter 0.18s; }
.pdc-seg-char{ background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, white 40%)); }
.pdc-seg-tool{ background: var(--gold); }
.pdc-seg-en{   background: rgba(255,255,255,0.5); }

.pdc-comp-legend{
  display: flex; gap: 14px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(250,250,250,0.75);
}
.pdc-comp-legend small{
  font-size: 9px; color: rgba(250,250,250,0.45);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-left: 2px; font-weight: 500;
}
.pdcl{ display: inline-flex; align-items: baseline; gap: 4px; }
.pdcl::before{
  content: ''; width: 6px; height: 6px;
  background: rgba(255,255,255,0.5);
}
.pdcl-char::before{ background: var(--primary); }
.pdcl-tool::before{ background: var(--gold); }
.pdcl-en::before{   background: rgba(255,255,255,0.5); }

/* Detail row — stage counts + energy mix */
.pdc-detail-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pdc-stages, .pdc-energies{
  display: flex; gap: 5px;
}
.pdc-stage, .pdc-energy-chip{
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(250,250,250,0.6);
}
.pdc-stage b, .pdc-energy-chip b{ color: var(--light); font-size: 10px; }
.pdc-stage-ex{ color: var(--ex-orange); border-color: rgba(255,122,24,0.4); }
.pdc-stage-ir{ color: var(--ir-purple); border-color: rgba(184,92,255,0.4); }
.pdc-energy-chip{ color: var(--tc); border-color: color-mix(in srgb, var(--tc) 35%, transparent); }

.pdc-invalid{
  font-size: 10px; color: var(--danger);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.pdc-check{
  position: absolute; top: 6px; left: 6px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--primary);
  color: var(--bg);
  font-weight: 700; font-size: 13px;
  z-index: 3;
  animation: pdc-check-pop 0.3s cubic-bezier(.2,1.5,.4,1) both;
  box-shadow: 0 0 12px var(--primary);
}
@keyframes pdc-check-pop{
  from{ transform: scale(0); }
  to  { transform: scale(1); }
}

/* Play footer */
.play-footer{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(52,217,195,0.15);
  display: flex; justify-content: flex-end;
  animation: home-fade-up 0.6s cubic-bezier(.2,.7,.2,1) 0.2s both;
}
.play-start-btn{
  position: relative; overflow: hidden;
  font-family: inherit; cursor: pointer;
  font-size: 15px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bg);
  padding: 18px 36px;
  background: linear-gradient(135deg, var(--accent), #6cf2dc);
  border: none;
  display: inline-flex; align-items: center; gap: 18px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15) inset,
    0 0 36px rgba(52,217,195,0.45),
    0 10px 28px rgba(0,0,0,0.45);
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
.play-start-btn:not(:disabled):hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.35) inset,
    0 0 80px rgba(52,217,195,0.75),
    0 10px 28px rgba(0,0,0,0.45);
  filter: brightness(1.08);
}
.play-start-btn:disabled{
  filter: grayscale(0.7);
  opacity: 0.55;
  cursor: not-allowed;
  animation: none;
  background: linear-gradient(135deg, rgba(120,140,150,0.6), rgba(80,100,110,0.6));
  box-shadow: none;
}
.play-start-btn .psb-arrow{
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  background: rgba(0,17,26,0.85); color: var(--accent);
  font-size: 13px;
}

/* ============== COLLECTION ============== */
.collection-bar{
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 16px;
}
.coll-set-tag{
  display: inline-flex; align-items: center; gap: 0;
  margin-bottom: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase;
}
.cst-code{
  background: var(--accent); color: var(--bg);
  padding: 4px 10px;
}
.cst-name{
  padding: 4px 12px;
  border: 1px solid rgba(52,217,195,0.35);
  color: var(--accent);
  background: rgba(52,217,195,0.06);
}
.coll-controls{
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.coll-bulk{ display: flex; gap: 6px; }
.coll-bulk .btn{ padding: 6px 12px; font-size: 11px; }
.collection-stats{
  display: flex; gap: 26px; font-size: 13px;
}
.collection-stats span strong{ color: var(--accent); font-weight: 700; font-size: 18px; margin-right: 6px; }
.filter-row{ display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill{
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--line); background: transparent;
  color: var(--muted); cursor: pointer; transition: all 0.15s;
}
.filter-pill:hover{ color: var(--light); }
.filter-pill.active{ background: var(--accent); color: var(--bg); border-color: var(--accent); }

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
  max-width: 1500px;
}
.card-tile{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  aspect-ratio: 0.62;
}
.card-tile img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.25s, transform 0.4s; }
.card-tile:hover{ transform: translateY(-4px); box-shadow: var(--shadow-deep), 0 0 28px rgba(52,217,195,0.35); border-color: var(--accent); }
.card-tile:hover img{ transform: scale(1.04); }
.card-tile.unowned img{ filter: grayscale(1) brightness(0.35); }
.card-tile .owned-badge{
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--bg); color: var(--muted);
  font-size: 12px; border: 1px solid var(--line);
}
.card-tile.owned .owned-badge{ background: var(--accent); color: var(--bg); border-color: var(--accent); }
.card-tile .rarity-stripe{
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px; background: var(--accent);
}
.card-tile[data-rarity=ex] .rarity-stripe{ background: var(--ex-orange); }
.card-tile[data-rarity=ir] .rarity-stripe{ background: linear-gradient(90deg, var(--ir-purple), var(--accent), var(--gold)); }
.card-tile[data-rarity=special] .rarity-stripe{ background: var(--gold); }

/* Card detail modal */
.modal{
  /* z-index sits above .game-board (200) and .game-exit-btn (350) so the
     preview opens on top when you tap the "i" mid-game. */
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,8,12,0.85);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.modal.open{ display: flex; }
.modal-body{
  display: grid; grid-template-columns: auto 1fr; gap: 36px;
  max-width: 880px; padding: 32px;
  position: relative;
}
.modal img{ width: 320px; aspect-ratio: 0.62; object-fit: cover; border-radius: 0; box-shadow: var(--shadow-deep); }
.modal-info h2{ font-size: 28px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 4px; }
.modal-info .french{ color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.modal-info .pill-row{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.modal-info .meta-pill{
  font-size: 11px; padding: 4px 10px;
  background: rgba(52,217,195,0.1); color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.1em;
  border: 1px solid var(--line);
}
.modal-info .meta-pill.ex{ background: rgba(255,122,24,0.12); color: var(--ex-orange); border-color: var(--ex-orange); }
.modal-info .meta-pill.ir{ background: rgba(184,92,255,0.12); color: var(--ir-purple); border-color: var(--ir-purple); }
.modal-info h3{ font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-top: 14px; margin-bottom: 8px; }
.modal-info .attack-row{ padding: 10px 0; border-bottom: 1px solid var(--line); }
.modal-info .attack-row:last-child{ border-bottom: none; }
.modal-info .attack-row .at-head{ display: flex; align-items: center; justify-content: space-between; }
.modal-info .attack-row .at-name{ font-weight: 600; font-size: 16px; }
.modal-info .attack-row .at-dmg{ font-weight: 700; color: var(--accent); font-size: 18px; }
.modal-info .attack-row .at-cost{ display: flex; gap: 4px; margin-top: 4px; }
.modal-info .attack-row .at-effect{ font-size: 13px; color: var(--muted); margin-top: 4px; }
.modal-close{
  position: absolute; top: -10px; right: -10px;
  width: 36px; height: 36px;
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--light); cursor: pointer; font-size: 18px;
  font-family: inherit;
}
.energy-icon{
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 700;
  color: var(--bg);
}
.energy-icon.joy{ background: var(--joy); }
.energy-icon.tech{ background: var(--tech); }
.energy-icon.shadow{ background: var(--shadow); }
.modal-actions{ display: flex; gap: 8px; margin-top: 20px; }

/* ============== DECK BUILDER ============== */
.builder-layout{
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  max-width: 1600px;
}
.builder-left h2, .builder-right h2{
  font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
.builder-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
  gap: 12px; max-height: calc(100vh - 240px); overflow-y: auto;
  padding-right: 10px;
}
.builder-grid::-webkit-scrollbar{ width: 8px; }
.builder-grid::-webkit-scrollbar-thumb{ background: var(--line); }
.builder-card{
  position: relative; aspect-ratio: 0.62;
  border-radius: 10px; overflow: hidden;
  cursor: pointer; border: 1px solid var(--line);
  transition: all 0.2s;
}
.builder-card img{ width:100%; height:100%; object-fit: cover; }
.builder-card:hover{ border-color: var(--accent); transform: translateY(-2px); }
.builder-card .count-badge{
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
  color: var(--accent); font-weight: 700; font-size: 14px;
  padding: 18px 6px 6px; text-align: center;
}
.builder-card.maxed{ opacity: 0.45; cursor: not-allowed; }
.builder-card.maxed::after{
  content: 'MAX'; position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(0,17,26,0.7); color: var(--danger);
  font-weight: 700; font-size: 12px; letter-spacing: 0.2em;
}

.builder-right{
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  padding: 20px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 140px);
}
.builder-deck-meta{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.builder-deck-meta .count{ font-size: 32px; font-weight: 700; color: var(--accent); }
.builder-deck-meta .count.invalid{ color: var(--danger); }
.builder-deck-meta .count small{ font-size: 14px; color: var(--muted); font-weight: 400; }
.deck-list{
  overflow-y: auto;
  flex: 1; padding-right: 4px;
}
.deck-list::-webkit-scrollbar{ width: 6px; }
.deck-list::-webkit-scrollbar-thumb{ background: var(--line); }
.deck-item{
  display: flex; align-items: center; gap: 10px;
  padding: 8px; margin-bottom: 4px;
  background: rgba(0,0,0,0.25);
  cursor: pointer; transition: background 0.15s;
}
.deck-item:hover{ background: rgba(255,92,92,0.12); }
.deck-item img{ width: 28px; height: 40px; object-fit: cover; border-radius: 0; }
.deck-item .di-name{ flex:1; font-size: 13px; }
.deck-item .di-count{ color: var(--accent); font-weight: 700; }
.deck-item .di-remove{ color: var(--danger); opacity: 0; transition: opacity 0.15s; font-size: 12px; }
.deck-item:hover .di-remove{ opacity: 1; }
.builder-bottom{ display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.builder-bottom button{ flex: 1; }
.starter-row{
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin-bottom: 16px;
}
.starter-btn{
  font-family: inherit; padding: 10px;
  background: rgba(52,217,195,0.06); border: 1px solid var(--line);
  color: var(--light); cursor: pointer;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: all 0.15s;
}
.starter-btn:hover{ background: rgba(52,217,195,0.15); border-color: var(--accent); }

/* Builder filters */
.builder-filter-row{
  display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
  align-items: center;
}
.builder-filter-row .search{
  flex: 1; min-width: 160px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--line);
  padding: 8px 12px; color: var(--light);
  font-family: inherit; font-size: 13px;
}
.builder-filter-row .search:focus{ outline: none; border-color: var(--accent); }

/* ============== GAME BOARD ============== */
/* ===================================================================
   SETUP SCREEN
   =================================================================== */
.setup-screen{ display:none; } /* legacy */

.game-board{
  position: fixed; inset: 0; z-index: 200;
  background: url('playmat.svg') center/cover no-repeat, #000d1a;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding-top: 32px;
  padding-bottom: 52px;
}
/* Dark overlay so cards/UI stay readable over the playmat */
.game-board::before{
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: rgba(0,8,20,0.52);
  pointer-events: none;
}
.game-board > *{ position: relative; z-index: 1; }
.game-board.hidden{ display: none; }

/* X exit button */
.game-exit-btn{
  position: fixed; top: 14px; right: 14px; z-index: 350;
  width: 38px; height: 38px;
  background: rgba(0,17,26,0.85); border: 1px solid var(--line);
  color: var(--muted); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  backdrop-filter: blur(8px);
}
.game-exit-btn:hover{
  background: rgba(255,92,92,0.18); border-color: var(--danger); color: var(--danger);
}

/* ===== DECK SETUP MODAL (legacy compat) ===== */
.deck-setup-overlay{
  position: absolute; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,17,26,0.93); backdrop-filter: blur(14px);
}
.deck-setup-overlay.hidden{ display: none; }
.deck-setup-box{
  background: var(--bg); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 0; padding: 34px 38px;
  max-width: 520px; width: 92%; max-height: 80vh; overflow-y: auto;
}
.deck-setup-box h2{ font-size: 24px; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 6px; border-radius: 0; }
.deck-setup-box .section-sub{ margin-bottom: 20px; }

/* ===== TURN ANNOUNCEMENT ===== */
.turn-announcement{
  position: absolute; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,17,26,0);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.turn-announcement.show{
  opacity: 1;
  background: rgba(0,17,26,0.65);
}
.ta-inner{
  text-align: center;
  transform: scale(0.4) translateY(-30px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.2,0.8,0.4,1.2), opacity 0.35s;
}
.turn-announcement.show .ta-inner{
  transform: scale(1) translateY(0);
  opacity: 1;
}
.ta-text{
  font-size: 68px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
  text-shadow: 0 0 50px currentColor, 0 4px 12px rgba(0,0,0,0.9);
}
.ta-text.player{ color: var(--accent); }
.ta-text.opp{ color: #fff; }
.ta-sub{
  font-size: 16px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--muted); margin-top: 14px;
}

/* ===== CARD TOOLTIP ===== */
.card-tooltip{
  position: fixed; z-index: 9000; width: 340px;
  background: rgba(0,17,26,0.97);
  border: 1px solid var(--accent);
  border-radius: 0; overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92) translateY(10px);
  transition: opacity 0.22s, transform 0.22s;
  box-shadow: 0 20px 60px rgba(0,0,0,0.95);
}
.card-tooltip.visible{ opacity: 1; transform: scale(1) translateY(0); }
.card-tooltip img{ width: 100%; display: block; }
.ct-info{ padding: 12px 14px; font-size: 12px; border-top: 1px solid var(--line); }
.ct-name{ font-size: 15px; font-weight: 700; color: var(--light); margin-bottom: 6px; }
.ct-atk-row{ margin-top: 5px; padding-top: 4px; border-top: 1px solid rgba(52,217,195,0.08); }
.ct-atk-header{ display: flex; align-items: center; gap: 4px; }
.ct-atk-name{ color: var(--light); flex: 1; }
.ct-atk-dmg{ color: var(--accent); font-weight: 700; }
.ct-atk-eff{ color: var(--muted); font-size: 10px; margin-top: 2px; }
.ct-ability-row{ color: var(--accent); margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(52,217,195,0.15); font-size: 10px; }

/* ===== ARENA LAYOUT ===== */
.arena{
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  flex: 1; min-height: 0;
  position: relative;
}
/* Oval table shape behind the battlefield */
.arena::before{
  content: '';
  position: absolute;
  inset: 8% 5% 8% 5%;
  border-radius: 50%;
  background: rgba(52,217,195,0.018);
  border: 1px solid rgba(52,217,195,0.05);
  pointer-events: none; z-index: 0;
}

/* ===== SIDES ===== */
.side{
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  gap: 10px;
  padding: 8px 18px;
  align-items: center;
  position: relative; z-index: 1;
}
.opp-side{
  border-bottom: 1px solid rgba(52,217,195,0.12);
  align-items: flex-end; padding-bottom: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 100%);
}
.player-side{
  align-items: flex-start; padding-top: 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.12) 0%, transparent 100%);
}

/* ===== PRIZE ZONE ===== */
.zone-prizes{ display: flex; flex-direction: column; align-items: center; gap: 6px; }
.prize-stack{ position: relative; width: 82px; height: 155px; }
.prize-stack .prize-card{
  position: absolute; width: 82px; aspect-ratio: 0.62;
  background: url('cards/028.webp') center/cover;
  border-radius: 9px; border: 1px solid rgba(52,217,195,0.4);
  box-shadow: 3px 3px 8px rgba(0,0,0,0.55);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.prize-stack .prize-card:nth-child(1){ top: 0;   left: 0;  z-index: 3; }
.prize-stack .prize-card:nth-child(2){ top: 6px; left: 4px; z-index: 2; }
.prize-stack .prize-card:nth-child(3){ top: 12px; left: 8px; z-index: 1; }
.prize-stack .prize-card.taken{
  opacity: 0; transform: translateY(-20px) scale(0.75); pointer-events: none;
}
/* Big readable "prizes remaining" number — shown next to the stack */
.prize-remaining{
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(100% + 10px);
  display: flex; align-items: baseline; gap: 2px;
  font-family: 'Chakra Petch', sans-serif;
  pointer-events: none;
}
.prize-remaining .pr-num{
  font-size: 32px; font-weight: 900;
  color: var(--accent);
  text-shadow:
    -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000,
    0 4px 12px rgba(0,0,0,0.85), 0 0 18px rgba(52,217,195,0.5);
  line-height: 1;
}
.prize-remaining .pr-of{
  font-size: 13px; font-weight: 700; color: rgba(250,250,250,0.55);
  letter-spacing: 0.06em;
}

/* ===== MAIN ZONE — stretch across full available width ===== */
.zone-main{
  display: flex; flex-direction: column;
  align-items: stretch; /* bench fills full width */
  gap: 10px; width: 100%;
}
.opp-side .zone-main{ flex-direction: column; justify-content: flex-end; }
/* Center the active card within the full-width zone-main */
.active-char-stack{ align-self: center; }

/* Bench row — cards spread out across full width */
.bench-row{
  display: flex; gap: 18px;
  justify-content: center;
  align-items: flex-start;
  width: 100%; padding: 6px 12px;
  min-height: 112px;
  transition: background 0.2s, box-shadow 0.2s;
  position: relative;
}
.bench-row.drop-target{
  background: rgba(52,217,195,0.07);
  box-shadow: inset 0 0 0 2px rgba(52,217,195,0.45);
}

/* ===== CHAR-STACK ===== */
.char-stack{
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; position: relative;
}
.char-stack.drop-target .active-slot,
.char-stack.drop-target .bench-slot{
  border-color: rgba(52,217,195,0.5);
  box-shadow: 0 0 16px rgba(52,217,195,0.4);
  transform: scale(1.03);
}
/* Current drag-hover target — larger visual cue */
.char-stack.drag-over .active-slot,
.char-stack.drag-over .bench-slot{
  border-color: var(--accent);
  box-shadow: 0 0 36px rgba(52,217,195,0.9), 0 0 64px rgba(52,217,195,0.3);
  transform: scale(1.1);
  transition: transform 0.12s, box-shadow 0.12s;
}
.char-stack.selected .active-slot,
.char-stack.selected .bench-slot{
  border-color: var(--accent);
  box-shadow: 0 0 30px rgba(52,217,195,0.8);
}

/* Active slot — prominent */
.active-slot{
  position: relative; width: 158px; aspect-ratio: 0.62;
  border-radius: 13px; border: 2px dashed rgba(52,217,195,0.3);
  background: rgba(0,0,0,0.35);
  display: grid; place-items: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  overflow: visible;
}
.active-slot.has-card{ border-style: solid; border-color: rgba(52,217,195,0.38); }
.active-slot.has-card:hover{ border-color: var(--accent); box-shadow: 0 0 22px rgba(52,217,195,0.4); }
.active-slot.empty::before{
  content: 'Active'; color: var(--muted);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
}
.active-slot img{
  width: 100%; height: 100%; object-fit: cover; border-radius: 11px;
  pointer-events: none; user-select: none;
}

/* Bench slot */
.bench-slot{
  position: relative; width: 108px; aspect-ratio: 0.62;
  border-radius: 9px; border: 2px dashed rgba(52,217,195,0.18);
  background: rgba(0,0,0,0.25);
  display: grid; place-items: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.bench-slot.has-card{ border-style: solid; border-color: rgba(52,217,195,0.24); }
.bench-slot.has-card:hover{ border-color: var(--accent); box-shadow: 0 0 14px rgba(52,217,195,0.35); }
.bench-slot img{
  width: 100%; height: 100%; object-fit: cover; border-radius: 7px;
  pointer-events: none; user-select: none;
}

/* ===== ENERGY TRAY — compact icon+count display ===== */
.energy-tray{
  display: flex; justify-content: center; align-items: center;
  min-height: 22px;
  padding: 3px 8px 4px;
  background: rgba(0,0,0,0.58);
  border: 1px solid rgba(52,217,195,0.12); border-top: none;
  border-radius: 0 0 8px 8px;
  margin-top: -4px;
}
.energy-tray:not(:has(.energy-summary)) { display: none !important; }
.energy-tray.active-tray { /* same */ }
.energy-tray.bench-tray  { padding: 2px 5px 3px; border-radius: 0 0 6px 6px; }

.energy-summary{ display: flex; gap: 8px; align-items: center; }
.es-chip{
  display: flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: 900; letter-spacing: 0.02em;
}
.bench-tray .es-chip{ font-size: 11px; }
.es-icon{ width: 14px; height: 14px; flex-shrink: 0; }
.bench-tray .es-icon{ width: 11px; height: 11px; }
.es-joy    { color: var(--joy); }
.es-tech   { color: var(--tech); }
.es-shadow { color: var(--shadow); }

/* HP bar, HP text, energies on slot */
.hp-bar{
  position: absolute; left: 4px; right: 4px; bottom: 5px;
  height: 5px; background: rgba(0,0,0,0.9); overflow: hidden;
  pointer-events: none;
}
.hp-bar > div{
  height: 100%;
  background: linear-gradient(90deg, #44e08c 0%, #ffc857 55%, #ff5c5c 100%);
  transition: width 0.55s ease-out;
}
.hp-text{
  position: absolute; top: 3px; right: 3px;
  background: rgba(0,0,0,0.88); padding: 1px 5px;
  border-radius: 0; font-size: 13px; font-weight: 700; color: var(--light);
  pointer-events: none;
}
.slot-badge{
  position: absolute; bottom: 14px; left: 3px;
  background: rgba(0,0,0,0.88); font-size: 8px; padding: 2px 5px;
  border-radius: 3px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); pointer-events: none;
}
.ex-card .slot-badge{ color: var(--ex-orange); }
.ability-btn{
  position: absolute; top: -9px; right: -9px; z-index: 5;
  background: var(--accent); color: var(--bg);
  border: 2px solid var(--bg);
  font-size: 9px; padding: 2px 7px; font-weight: 700;
  cursor: pointer; letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(52,217,195,0.6);
}
.ability-btn:disabled{ background: var(--muted); cursor: not-allowed; box-shadow: none; }

/* ── Hand / Deck reveal modal ────────────────────────────────────
   Used by effects that show cards (peek hand, scan, top of deck). Renders
   above the game board, displays each card with its image, and supports
   highlighting one card (e.g. the one being discarded). */
.reveal-modal{
  position: fixed; inset: 0; z-index: 420;
  background: rgba(0,8,12,0.86);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center; justify-content: center;
  animation: settings-fade-in 0.2s ease-out;
}
.reveal-modal.open{ display: flex; }
.reveal-panel{
  width: min(940px, 92vw);
  max-height: 88vh; overflow-y: auto;
  padding: 28px 36px 22px;
  background: linear-gradient(180deg, #001923 0%, #001119 100%);
  border: 1px solid rgba(52,217,195,0.35);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.75),
    0 0 60px rgba(52,217,195,0.18);
  text-align: center;
  animation: settings-slide-in 0.32s cubic-bezier(.2,.9,.3,1.2);
}
.reveal-eyebrow{
  font-size: 10px; font-weight: 700; letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
  text-align: left;
  display: inline-block;
}
.reveal-title{
  font-size: 28px; font-weight: 800; letter-spacing: 0.02em;
  margin-top: 6px;
  color: var(--light);
}
.reveal-sub{
  font-size: 13px; color: rgba(250,250,250,0.55);
  margin-bottom: 22px; margin-top: 4px;
}
.reveal-grid{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}
.reveal-card{
  width: 130px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
}
.reveal-card img{
  width: 130px; aspect-ratio: 0.62; object-fit: cover;
  border: 1px solid rgba(52,217,195,0.18);
  box-shadow: 0 8px 18px rgba(0,0,0,0.55);
}
.reveal-card-name{
  font-size: 11px;
  color: rgba(250,250,250,0.72);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.25;
}
/* Highlighted card — the one being discarded by scanShadow */
.reveal-card.highlighted img{
  border-color: var(--danger);
  box-shadow:
    0 0 24px rgba(255,92,92,0.7),
    0 8px 18px rgba(0,0,0,0.6);
  animation: reveal-flash 1s ease-in-out 1;
}
.reveal-card.highlighted::after{
  content: 'DISCARDED';
  font-size: 9px; font-weight: 800; letter-spacing: 0.2em;
  color: #fff;
  background: rgba(180,30,30,0.95);
  border: 1px solid #ff5c5c;
  padding: 3px 8px;
  margin-top: 2px;
}
@keyframes reveal-flash{
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); box-shadow: 0 0 38px rgba(255,92,92,1), 0 8px 18px rgba(0,0,0,0.6); }
}
.reveal-empty{
  padding: 40px;
  color: rgba(250,250,250,0.45);
  font-style: italic;
}

/* ── Silenced / Contaminated state ───────────────────────────────
   When an attack effect says "opponent can't attack next turn", the affected
   slot picks up this class. We make it unmistakable: red pulsing aura,
   diagonal hazard-stripe overlay, and a clear "SILENCED" badge. */
.slot-silenced{
  position: relative;
  animation: silenced-pulse 1.4s ease-in-out infinite;
}
.slot-silenced::before{
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,92,92,0.18) 0 8px,
      rgba(0,0,0,0) 8px 18px);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
.slot-silenced::after{
  content: 'SILENCED';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: 'Chakra Petch', sans-serif;
  font-size: 13px; font-weight: 900; letter-spacing: 0.16em;
  color: #fff;
  background: rgba(180,30,30,0.92);
  border: 1px solid #ff5c5c;
  padding: 4px 10px;
  text-shadow: 0 0 6px rgba(0,0,0,0.7);
  box-shadow: 0 0 14px rgba(255,92,92,0.65);
  pointer-events: none;
  z-index: 3;
}
@keyframes silenced-pulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,92,92,0.55), inset 0 0 0 1px rgba(255,92,92,0.5); }
  50%      { box-shadow: 0 0 28px 0 rgba(255,92,92,0.85), inset 0 0 0 2px rgba(255,92,92,0.85); }
}

/* ===== PILE ZONE (deck + discard) ===== */
.zone-pile{
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.pile{
  position: relative; width: 68px; aspect-ratio: 0.62;
  border-radius: 9px; border: 1px solid var(--line);
  background: rgba(0,0,0,0.4);
  display: grid; place-items: center; overflow: hidden;
}
.pile.face-down{
  background: url('cards/028.webp') center/cover;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.45), 0 0 0 1px rgba(52,217,195,0.2);
}
.pile.discard-pile{
  background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255,92,92,0.06) 5px 10px);
  border-color: rgba(255,92,92,0.2);
}
.pile.discard-pile.has-cards{
  background-image: none; background-size: cover; background-position: center;
  border-color: var(--line);
}
.pile-count{
  position: absolute; bottom: 3px; right: 3px;
  background: rgba(0,0,0,0.92); padding: 1px 5px;
  font-size: 10px; font-weight: 700; color: var(--accent);
}
.pile-label{
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.opp-hand-badge{
  font-size: 10px; color: var(--muted); margin-top: 4px; text-align: center;
}

/* ===== CENTER STRIP ===== */
.center-strip{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
  padding: 10px 20px;
  background: linear-gradient(90deg, transparent, rgba(52,217,195,0.06), transparent);
  border-top: 1px solid rgba(52,217,195,0.12);
  border-bottom: 1px solid rgba(52,217,195,0.12);
}
.cs-info-left{ text-align: left; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cs-buttons{ display: flex; gap: 8px; justify-content: center; align-items: center; }
.cs-buttons button{ font-size: 12px; padding: 9px 16px; border-radius: 0; }
.cs-buttons button:disabled{ opacity: 0.3; cursor: not-allowed; }
.cs-info-right{ text-align: right; }
.turn-banner{
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--accent);
}
.turn-banner.opp-turn{ color: var(--muted); }

/* Prize score in the center strip — "YOU 1 — 0 OPP" */
.cs-score{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Chakra Petch', sans-serif;
  padding: 4px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(52,217,195,0.18);
}
.cs-score .csl{
  font-size: 9px; font-weight: 700; letter-spacing: 0.22em;
  color: rgba(250,250,250,0.5); text-transform: uppercase;
}
.cs-score .csn{
  font-size: 20px; font-weight: 900; color: var(--accent);
  line-height: 1; letter-spacing: -0.02em;
  text-shadow: 0 0 12px rgba(52,217,195,0.5);
}
.cs-score-me .csn{ color: var(--accent); }
.cs-score-opp .csn{ color: #ff9a4a; text-shadow: 0 0 12px rgba(255,154,74,0.5); }
.cs-score-side{ display: inline-flex; align-items: baseline; gap: 6px; }
.cs-score-sep{
  font-size: 14px; font-weight: 700; color: rgba(250,250,250,0.35);
  letter-spacing: 0.1em;
}

/* Chess clocks (Pro mode only) */
.cs-timers{
  display: inline-flex; gap: 8px; align-items: baseline;
  font-family: 'Chakra Petch', sans-serif;
  padding: 4px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(52,217,195,0.18);
  margin-top: 2px;
}
.cs-timers.hidden{ display: none; }
.cs-clock{
  font-size: 18px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(250,250,250,0.45);
  letter-spacing: 0.02em;
  transition: color 0.2s, text-shadow 0.2s;
  min-width: 4ch;
}
.cs-clock.active{
  color: var(--accent);
  text-shadow: 0 0 12px rgba(52,217,195,0.55);
}
.cs-clock.low{ color: #ffc857; }
.cs-clock.low.active{ text-shadow: 0 0 12px rgba(255,200,87,0.6); }
.cs-clock.crit{
  color: var(--danger);
  animation: clock-crit-pulse 0.9s ease-in-out infinite;
}
@keyframes clock-crit-pulse{
  0%, 100%{ text-shadow: 0 0 0 rgba(255,92,92,0); }
  50%     { text-shadow: 0 0 18px rgba(255,92,92,0.85); }
}
.cs-clock-sep{
  font-size: 14px; color: rgba(250,250,250,0.3);
}

/* ── Play screen mode toggle (Normal / Pro) ── */
.play-mode-row{
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 480px;
}
.pmt-label{
  font-size: 10px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent);
}
.pmt-buttons{ display: flex; gap: 8px; }
.pmt-btn{
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  color: rgba(250,250,250,0.65);
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pmt-btn:hover{
  border-color: rgba(52,217,195,0.45);
  background: rgba(52,217,195,0.05);
  color: var(--light);
}
.pmt-btn.active{
  border-color: var(--accent);
  background: rgba(52,217,195,0.12);
  color: var(--light);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 0 22px rgba(52,217,195,0.25);
}
.pmt-name{
  font-size: 14px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pmt-btn.active .pmt-name{ color: var(--accent); }
.pmt-meta{
  font-size: 10px; letter-spacing: 0.08em;
  color: rgba(250,250,250,0.5);
}
.pmt-desc{
  font-size: 11px; line-height: 1.4;
  color: rgba(250,250,250,0.55);
}

/* Builder mode badge */
.builder-mode-row{
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px;
}
.bmr-label{
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(250,250,250,0.45);
}
.bmr-badge{
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.35);
  display: flex; flex-direction: column; gap: 2px;
}
.bmr-normal{ border-color: rgba(52,217,195,0.45); }
.bmr-pro{
  border-color: rgba(184,92,255,0.45);
  background: rgba(184,92,255,0.06);
}
.bmr-name{
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.bmr-pro .bmr-name{ color: var(--ir-purple); }
.bmr-meta{
  font-size: 10px; letter-spacing: 0.06em;
  color: rgba(250,250,250,0.55);
}

/* Empty deck list state on play screen */
.pdl-empty{
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 60px 20px;
  color: rgba(250,250,250,0.55);
}
.pdle-icon{ font-size: 32px; color: rgba(250,250,250,0.25); }
.pdle-text{ font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.pdle-sub{ font-size: 11px; color: rgba(250,250,250,0.4); }

/* Wide prize stack (Pro mode: 6 prizes) — render in a 2x3 grid instead of a single column stack. */
.prize-stack.wide{
  width: 168px; height: 155px;
  display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 4px;
}
.prize-stack.wide .prize-card{
  position: relative; width: 100%; height: auto; aspect-ratio: 0.62;
  top: auto; left: auto;
  /* override the default absolute :nth-child positioning */
  z-index: 1;
}
.prize-stack.wide .prize-card:nth-child(n){ top: auto; left: auto; }
.prize-stack.wide + .prize-remaining,
.prize-stack.wide .prize-remaining{
  position: absolute;
  left: calc(100% + 10px);
}

/* ── Nav gear icon ── */
.nav-gear{
  margin-left: 14px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  color: rgba(250,250,250,0.7);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.nav-gear:hover{
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(52,217,195,0.06);
}
.nav-gear svg{ display: block; }

/* In-game gear, sits next to the exit X */
.game-settings-btn{
  position: absolute; top: 14px; right: 60px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(0,8,14,0.8);
  border: 1px solid var(--line);
  color: rgba(250,250,250,0.75);
  cursor: pointer;
  padding: 0;
  z-index: 50;
  transition: color 0.15s, border-color 0.15s;
}
.game-settings-btn:hover{
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Settings modal ── */
.settings-modal{
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,5,10,0.85);
  display: none;
  align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  animation: settings-fade-in 0.2s ease-out;
}
.settings-modal.open{ display: flex; }
@keyframes settings-fade-in{ from{ opacity: 0; } to{ opacity: 1; } }
.settings-panel{
  position: relative;
  width: min(540px, 92vw);
  max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #001923 0%, #001119 100%);
  border: 1px solid rgba(52,217,195,0.35);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.75),
    0 0 60px rgba(52,217,195,0.15);
  padding: 28px 32px;
  animation: settings-slide-in 0.32s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes settings-slide-in{
  from{ opacity: 0; transform: translateY(20px) scale(0.96); }
  to  { opacity: 1; transform: translateY(0)    scale(1); }
}
.settings-close{
  position: absolute; top: 12px; right: 14px;
  width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--line);
  color: rgba(250,250,250,0.6);
  font-size: 13px; cursor: pointer;
  padding: 0;
}
.settings-close:hover{ color: var(--accent); border-color: var(--accent); }
.settings-header{ margin-bottom: 22px; }
.settings-eyebrow{
  font-size: 10px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--accent);
  border-left: 2px solid var(--accent); padding-left: 8px;
}
.settings-header h2{
  font-size: 28px; font-weight: 700; letter-spacing: 0.02em;
  margin-top: 8px; color: var(--light);
}
.settings-body{ display: flex; flex-direction: column; gap: 22px; }
.setting-row{
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(52,217,195,0.08);
}
.setting-row:last-child{ border-bottom: none; padding-bottom: 0; }
.sr-name{
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--light);
}
.sr-desc{
  font-size: 11px; color: rgba(250,250,250,0.5);
  margin-top: 3px;
  line-height: 1.4;
}
.sr-control{
  display: flex; align-items: center; gap: 10px;
  min-width: 200px;
}
.vol-slider{
  -webkit-appearance: none; appearance: none;
  width: 160px; height: 4px;
  background: rgba(52,217,195,0.18);
  outline: none; cursor: pointer;
}
.vol-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: var(--accent);
  border: 2px solid #001119;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(52,217,195,0.6);
}
.vol-slider::-moz-range-thumb{
  width: 16px; height: 16px;
  background: var(--accent);
  border: 2px solid #001119;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(52,217,195,0.6);
}
.vol-val{
  font-size: 12px; color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 36px; text-align: right;
}
.setting-toggle{
  background: rgba(52,217,195,0.12);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  padding: 3px 8px;
  cursor: pointer;
  font-family: inherit;
}
.setting-toggle.off{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.2);
  color: rgba(250,250,250,0.45);
}
.settings-footer{
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(52,217,195,0.12);
}

/* Section divider inside the settings panel ("Display", etc.) */
.settings-section-divider{
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 -4px;
  color: rgba(250,250,250,0.45);
  font-size: 10px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase;
}
.settings-section-divider::before,
.settings-section-divider::after{
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52,217,195,0.18), transparent);
}

/* ── Bench picker cards (Promote / Retreat) ── */
.picker-grid{
  display: flex; gap: 18px;
  justify-content: center; flex-wrap: wrap;
  margin: 20px 0;
}
.picker-card{
  cursor: pointer;
  width: 152px;
  padding: 8px 10px 10px;
  background: rgba(0,0,0,0.35);
  border: 2px solid var(--line);
  display: flex; flex-direction: column;
  gap: 6px; align-items: stretch;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.2s;
}
.picker-card:hover{
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 0 22px rgba(52,217,195,0.4);
}
.picker-img{
  width: 100%; aspect-ratio: 0.62;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.picker-name{
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--light);
  text-align: center;
  line-height: 1.2;
  min-height: 28px;
  display: flex; align-items: center; justify-content: center;
}
.picker-hp-row{
  display: flex; justify-content: center;
  font-family: 'Chakra Petch', monospace;
}
.picker-hp{
  font-size: 12px;
  color: rgba(250,250,250,0.85);
  letter-spacing: 0.02em;
}
.picker-hp b{ color: var(--accent); font-size: 14px; }
.picker-hp .phm{ color: rgba(250,250,250,0.5); }
.picker-hpbar{
  height: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}
.picker-hpfill{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #44e08c 0%, var(--accent) 100%);
  transition: width 0.3s ease;
}
.picker-energies{
  display: flex; justify-content: center;
  min-height: 22px;
}
.picker-energies .energy-summary{
  display: flex; gap: 4px; padding: 4px 6px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(52,217,195,0.18);
}
.picker-no-energy{
  font-size: 10px; color: rgba(250,250,250,0.4);
  font-style: italic; padding-top: 4px;
  letter-spacing: 0.06em;
}

/* ── Wide-screen layout: bench beside active in a single horizontal row ──
   On screens 1500px+ the bench cards sit horizontally to the RIGHT of the
   active card. Both sides are centered horizontally — the opp side normally
   has `justify-content: flex-end` (correct for column layout) which would
   right-align the row, so we explicitly recenter here.

   The opp bench mirrors the player bench: divider line and "BENCH" label
   sit on the side ADJACENT to the active card (right edge on opp, left edge
   on player), and the highlight gradient mirrors too. */
@media (min-width: 1500px){
  .zone-main{
    flex-direction: row !important;
    align-items: center;
    justify-content: center !important;
    gap: 36px;
    width: 100%;
  }
  .opp-side .zone-main{
    flex-direction: row !important;
    justify-content: center !important;
  }

  /* Cards take more advantage of the space available on wide screens. */
  .active-slot{ width: 200px; }
  .bench-row .bench-slot{ width: 140px; }
  .bench-row .char-stack{ width: 140px; }

  /* Bench: still a horizontal row, but now beside the active. Three slots
     side-by-side, each with its own energy tray under it. Slots are slightly
     smaller than the active so the active stays the focal point. */
  .bench-row{
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
    min-height: auto;
    gap: 16px;
    padding: 26px 22px 10px;
    position: relative;
    /* Player side: divider/label on the LEFT (adjacent to active) */
    border-left: 1px solid rgba(52,217,195,0.22);
    background: linear-gradient(90deg,
      rgba(52,217,195,0.05) 0%,
      rgba(52,217,195,0.0) 35%);
  }
  /* "BENCH" label sits on top of the row, on the edge nearest the active */
  .bench-row::before{
    content: 'BENCH';
    position: absolute;
    top: 5px; left: 22px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.32em;
    color: var(--accent);
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(52,217,195,0.45);
  }

  /* ── Opp side mirror: bench sits to the LEFT of the active in this side,
     so the divider/label move to the RIGHT edge (still adjacent to active),
     and the gradient flips direction. */
  .opp-side .bench-row{
    border-left: none;
    border-right: 1px solid rgba(52,217,195,0.22);
    background: linear-gradient(-90deg,
      rgba(52,217,195,0.05) 0%,
      rgba(52,217,195,0.0) 35%);
  }
  .opp-side .bench-row::before{
    left: auto;
    right: 22px;
  }

  /* Each bench slot is the standard column (slot on top, energy tray below) */
  .bench-row .char-stack{
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .bench-row .energy-tray{
    margin-top: 0;
    min-height: 24px;
    width: 100%;
    padding: 3px 6px;
    border-radius: 0;
  }
}

/* ── Attack button: bigger and centered ── */
.cs-buttons{
  display: flex; gap: 10px; justify-content: center; align-items: center;
  flex-direction: row;
}
.cs-buttons button{ font-size: 12px; padding: 9px 16px; border-radius: 0; }
/* Reorder: Retreat — Attack — End Turn, with Attack center & bigger */
.cs-buttons #btn-retreat{ order: 1; }
.cs-buttons #btn-attack{
  order: 2;
  font-size: 15px;
  font-weight: 800;
  padding: 12px 30px;
  letter-spacing: 0.14em;
  background: linear-gradient(135deg, var(--accent) 0%, #4af0d2 100%);
  color: #00111A;
  border: 1px solid var(--accent);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 0 26px rgba(52,217,195,0.6),
    0 6px 18px rgba(0,0,0,0.4);
}
.cs-buttons #btn-attack:not(:disabled):hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.3) inset,
    0 0 40px rgba(52,217,195,0.85),
    0 8px 20px rgba(0,0,0,0.5);
  filter: brightness(1.08);
}
.cs-buttons #btn-end-turn{ order: 3; }

/* ── Collection set dropdown ── */
.coll-set-row{ margin-bottom: 8px; }
.coll-set-select{
  appearance: none;
  background: rgba(0,8,14,0.7);
  border: 1px solid var(--line);
  color: var(--light);
  padding: 8px 32px 8px 14px;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2334d9c3' d='M0 0 L5 6 L10 0 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.15s, background-color 0.15s;
}
.coll-set-select:hover{ border-color: var(--accent); }
.coll-set-select option{ background: #00111A; color: var(--light); }
.coll-set-select option:disabled{ color: rgba(250,250,250,0.4); font-style: italic; }

/* Coming-soon placeholder card in the collection grid */
.coll-coming-soon{
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center; justify-content: center;
  padding: 70px 40px;
  background: linear-gradient(180deg, rgba(52,217,195,0.04) 0%, rgba(0,0,0,0.2) 100%);
  border: 1px dashed rgba(52,217,195,0.35);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.coll-coming-soon::before{
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 110%, rgba(52,217,195,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.ccs-eyebrow{
  position: relative;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--accent);
}
.ccs-title{
  position: relative;
  font-size: 38px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--light);
  text-shadow: 0 0 28px rgba(52,217,195,0.4);
}
.ccs-sub{
  position: relative;
  font-size: 14px; color: rgba(250,250,250,0.6);
  letter-spacing: 0.08em;
}
.ccs-desc{
  position: relative;
  font-size: 12px; color: rgba(250,250,250,0.5);
  max-width: 480px;
  line-height: 1.5;
  margin-top: 8px;
}
.ccs-tag{
  position: relative;
  margin-top: 18px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent);
  padding: 6px 14px;
  border: 1px solid var(--accent);
  background: rgba(52,217,195,0.06);
  animation: ccs-pulse 2s ease-in-out infinite;
}
@keyframes ccs-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(52,217,195,0); }
  50%     { box-shadow: 0 0 24px 0 rgba(52,217,195,0.4); }
}
.cs-buttons{
  display: flex; gap: 10px; justify-content: center; align-items: center;
  flex-direction: row;
}
.cs-buttons button{ font-size: 12px; padding: 9px 16px; border-radius: 0; }
/* Reorder: Retreat — Attack — End Turn, with Attack center & bigger */
.cs-buttons #btn-retreat{ order: 1; }
.cs-buttons #btn-attack{
  order: 2;
  font-size: 15px;
  font-weight: 800;
  padding: 12px 30px;
  letter-spacing: 0.14em;
  background: linear-gradient(135deg, var(--accent) 0%, #4af0d2 100%);
  color: #00111A;
  border: 1px solid var(--accent);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 0 26px rgba(52,217,195,0.6),
    0 6px 18px rgba(0,0,0,0.4);
}
.cs-buttons #btn-attack:not(:disabled):hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.3) inset,
    0 0 40px rgba(52,217,195,0.85),
    0 8px 20px rgba(0,0,0,0.5);
  filter: brightness(1.08);
}
.cs-buttons #btn-end-turn{ order: 3; }
.action-buttons{ display: flex; gap: 8px; }
.action-buttons button{ font-size: 12px; padding: 9px 16px; border-radius: 0; }
.action-buttons button:disabled{ opacity: 0.3; cursor: not-allowed; }
.hint{ font-size: 11px; color: var(--muted); }
.hint.active{ color: var(--accent); }

/* ===== HAND TRAY ===== */
.hand-tray{
  display: flex; justify-content: center; align-items: flex-end;
  padding: 12px 16px 14px; gap: 0;
  min-height: 132px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35));
  border-top: 1px solid rgba(52,217,195,0.08);
}
.hand-card{
  width: 88px; aspect-ratio: 0.62; margin: 0 -14px;
  border-radius: 8px; cursor: grab;
  box-shadow: 0 4px 14px rgba(0,0,0,0.65);
  transition: transform 0.2s, margin 0.2s, box-shadow 0.2s;
  position: relative; user-select: none; touch-action: none;
}
.hand-card img{
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 8px; pointer-events: none; user-select: none;
}
.hand-card:hover{
  transform: translateY(-30px) scale(1.12); z-index: 10;
  margin: 0 -6px;
  box-shadow: 0 14px 32px rgba(52,217,195,0.5);
}
.hand-card.playable::after{
  content: ''; position: absolute; inset: -3px;
  border: 2px solid var(--accent); border-radius: 10px;
  pointer-events: none; box-shadow: 0 0 14px rgba(52,217,195,0.55);
}
.hand-card.dragging{ opacity: 0.3; transform: none !important; }
.hand-card.disabled{ filter: grayscale(0.55) brightness(0.6); cursor: not-allowed; }

/* ===== ATTACK ANIMATIONS ===== */
/* attacker card jumps toward target */
@keyframes atk-jump{
  0%   { transform: translate(0,0) scale(1) rotate(0deg); filter: brightness(1); }
  30%  { transform: translate(var(--ax),var(--ay)) scale(1.18) rotate(var(--ar)); filter: brightness(1.5); }
  55%  { transform: translate(var(--ax),var(--ay)) scale(1.18) rotate(var(--ar)); filter: brightness(1.4); }
  100% { transform: translate(0,0) scale(1) rotate(0deg); filter: brightness(1); }
}
/* target gets hit */
@keyframes hit-shake{
  0%,100%{ transform: translate(0,0) rotate(0); }
  20%{ transform: translate(-7px,3px) rotate(-2deg); }
  40%{ transform: translate(6px,-3px) rotate(2deg); }
  60%{ transform: translate(-4px,1px) rotate(-1deg); }
  80%{ transform: translate(3px,-1px) rotate(1deg); }
}
@keyframes hit-flash{
  0%{ filter: brightness(1) saturate(1); }
  30%{ filter: brightness(4) saturate(0); }
  70%{ filter: brightness(1.5) hue-rotate(10deg); }
  100%{ filter: brightness(1) saturate(1); }
}
.char-stack.attacking{
  animation: atk-jump 0.72s ease-in-out forwards;
  z-index: 50;
}
.char-stack.hit{
  animation: hit-shake 0.45s ease-in-out;
}
.char-stack.hit .active-slot,
.char-stack.hit .bench-slot{
  animation: hit-flash 0.45s ease-out;
}

/* ===== DRAG GHOST ===== */
.drag-ghost{
  position: fixed; pointer-events: none; z-index: 9999;
  width: 112px; aspect-ratio: 0.62;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 18px 36px rgba(0,0,0,0.85), 0 0 30px rgba(52,217,195,0.55);
  transform: translate(-50%,-50%) rotate(-3deg);
  border: 2px solid var(--accent);
}
.drag-ghost img{ width: 100%; height: 100%; object-fit: cover; }

/* ===== FLY-TO-DISCARD ===== */
.fly-card{
  position: fixed; pointer-events: none; z-index: 9000;
  border-radius: 8px; overflow: hidden;
}
.fly-card img{ width: 100%; height: 100%; object-fit: cover; }

/* ===== DAMAGE POPUP ===== */
@keyframes dmg-rise{
  0%  { opacity: 0; transform: translate(-50%,0) scale(0.3) rotate(-8deg); }
  10% { opacity: 1; transform: translate(-50%,-10px) scale(1.6) rotate(2deg); }
  20% { transform: translate(-50%,-12px) scale(1.45) rotate(-1deg); }
  30% { transform: translate(-50%,-16px) scale(1.5) rotate(0); }
  60% { opacity: 1; transform: translate(-50%,-60px) scale(1.15); }
  100%{ opacity: 0; transform: translate(-50%,-140px) scale(0.95); }
}
.dmg-pop{
  position: fixed; pointer-events: none; z-index: 8500;
  font-size: 84px; font-weight: 900; letter-spacing: -0.03em;
  color: var(--danger);
  text-shadow:
    0 0 0 rgba(0,0,0,0.0),
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000,
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    0 6px 18px rgba(0,0,0,0.85), 0 0 50px rgba(255,92,92,0.7);
  animation: dmg-rise 1.4s cubic-bezier(.2,.8,.3,1) forwards;
  font-family: 'Chakra Petch', sans-serif;
  white-space: nowrap;
}
.dmg-pop.heal{
  color: #44e08c;
  text-shadow:
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000,
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    0 6px 18px rgba(0,0,0,0.85), 0 0 50px rgba(68,224,140,0.7);
}

/* Energy-loss pop — smaller, shows the energy icon being yanked away */
.energy-loss-pop{
  position: fixed; pointer-events: none; z-index: 8500;
  display: flex; align-items: center; gap: 2px;
  transform: translate(-50%, -50%);
  font-family: 'Chakra Petch', sans-serif;
  font-size: 28px; font-weight: 900;
  color: #ff5c5c;
  text-shadow: -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000,
    0 0 16px rgba(255,92,92,0.7);
  animation: energy-loss-rise 1.2s cubic-bezier(.2,.8,.3,1) forwards;
}
.energy-loss-pop .elp-icon{ line-height: 1; }
.energy-loss-pop img{
  filter:
    drop-shadow(0 0 6px rgba(255,92,92,0.7))
    grayscale(0.4);
  opacity: 0.9;
}
@keyframes energy-loss-rise{
  0%   { transform: translate(-50%, -50%)         scale(0.5); opacity: 0; }
  20%  { transform: translate(-50%, -50%)         scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - 60px)) scale(0.8); opacity: 0; }
}

/* Hit shake — slot wiggles when damaged */
@keyframes hit-shake{
  0%, 100% { transform: translate(0, 0); }
  10%      { transform: translate(-6px, 2px) rotate(-1.5deg); }
  20%      { transform: translate(6px, -2px) rotate(1.5deg); }
  30%      { transform: translate(-5px, 1px) rotate(-1deg); }
  40%      { transform: translate(5px, -1px) rotate(1deg); }
  50%      { transform: translate(-3px, 1px); }
  60%      { transform: translate(3px, -1px); }
  70%      { transform: translate(-2px, 0); }
  80%      { transform: translate(1px, 0); }
}
.hit-shake{ animation: hit-shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }

/* Heal glow — gentle green pulse on the slot */
@keyframes heal-glow-anim{
  0%   { box-shadow: 0 0 0 0 rgba(68,224,140,0); }
  40%  { box-shadow: 0 0 36px 10px rgba(68,224,140,0.55); }
  100% { box-shadow: 0 0 0 0 rgba(68,224,140,0); }
}
.heal-glow{ animation: heal-glow-anim 0.7s ease-out both; }

/* Bench / active slot — entering animation when a card first appears */
@keyframes slot-enter-pop{
  0%   { opacity: 0; transform: scale(0.55) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.08) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.active-slot.entering, .bench-slot.entering{
  animation: slot-enter-pop 0.42s cubic-bezier(.2,.9,.3,1.3) both;
}

/* ===== LOG PANEL ===== */
.log-panel{
  position: fixed; right: 10px; top: 74px;
  width: 230px;
  background: rgba(0,17,26,0.92); border: 1px solid var(--line);
  padding: 10px 12px; font-size: 11px;
  backdrop-filter: blur(8px); z-index: 15;
  overflow: hidden;
}
.log-panel h4{
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.log-panel ul{ list-style: none; }
.log-panel li{ padding: 3px 0; border-bottom: 1px solid rgba(52,217,195,0.06); color: var(--muted); }
.log-panel li:last-child{ color: var(--light); }
.log-panel li.action{ color: var(--accent); }
.log-panel li.dmg{ color: var(--danger); }
.log-panel li.log-hidden{ display: none; }
.log-panel li.log-toggle{
  color: var(--accent); cursor: pointer; font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: none; opacity: 0.7; padding: 5px 0 2px;
}
.log-panel li.log-toggle:hover{ opacity: 1; }

/* ===== SHUFFLE ANIM ===== */
@keyframes shuffle-shake{
  0%,100%{ transform: translate(0,0) rotate(0); }
  20%{ transform: translate(-3px,2px) rotate(-2deg); }
  40%{ transform: translate(3px,-2px) rotate(2deg); }
  60%{ transform: translate(-2px,-1px) rotate(-2deg); }
  80%{ transform: translate(2px,1px) rotate(2deg); }
}
.pile.shuffling{ animation: shuffle-shake 0.5s ease-in-out 2; }


/* Toast / floating messages */
.toast-stack{
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast{
  background: rgba(0,17,26,0.95);
  border: 1px solid var(--accent);
  padding: 12px 20px;
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.05em;
  box-shadow: var(--glow);
  animation: toast-in 0.3s ease-out, toast-out 0.3s ease-in 2.5s forwards;
}
@keyframes toast-in{ from{ opacity: 0; transform: translateY(-12px);} to{ opacity:1; transform: translateY(0); } }
@keyframes toast-out{ to{ opacity:0; transform: translateY(-12px); } }

/* Big modal (setup, gameover, attack picker) */
.big-modal{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,5,10,0.88);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.big-modal.open{ display: flex; }
.big-modal-content{
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 0;
  padding: 32px 36px;
  max-width: 820px; width: 96%;
  text-align: center;
  max-height: 90vh; overflow-y: auto;
}
.big-modal-content h2{
  font-size: 28px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.big-modal-content p{ color: var(--muted); margin-bottom: 22px; }

/* ── Tool Confirm modal — shows card art + effect before playing ── */
.tool-confirm{
  text-align: left;
  display: flex; flex-direction: column;
  gap: 18px;
  max-width: 540px;
  margin: 0 auto;
}
.tc-label{
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--accent);
  border-left: 2px solid var(--accent); padding-left: 10px;
}
.tc-layout{
  display: grid; grid-template-columns: 180px 1fr;
  gap: 22px;
  align-items: start;
}
.tc-img{
  width: 180px; aspect-ratio: 0.62; object-fit: cover;
  border-radius: 10px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.7),
    0 0 32px rgba(52,217,195,0.25),
    0 0 0 1px rgba(255,255,255,0.08);
  animation: tc-img-in 0.35s cubic-bezier(.2,.8,.4,1.2) both;
}
@keyframes tc-img-in{
  from{ opacity: 0; transform: translateY(20px) scale(0.92); }
  to  { opacity: 1; transform: translateY(0)    scale(1); }
}
.tc-body{ display: flex; flex-direction: column; gap: 8px; }
.tc-name{
  font-size: 22px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; line-height: 1.1;
}
.tc-french{
  font-size: 12px; color: var(--muted); letter-spacing: 0.04em;
  margin-top: -4px;
}
.tc-divider{
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin: 6px 0 4px;
}
.tc-effect-label{
  font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.tc-effect{
  font-size: 15px; line-height: 1.55;
  color: rgba(250,250,250,0.85);
}
.tc-actions{
  display: flex; gap: 12px; justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tc-actions .btn{ min-width: 140px; }

/* ── Hand card info button — small "i" badge for full preview ── */
.hand-card{ position: relative; }
.hand-info-btn{
  position: absolute; top: 4px; right: 4px;
  width: 20px; height: 20px;
  background: rgba(0,8,14,0.92);
  border: 1px solid rgba(52,217,195,0.4);
  color: var(--accent);
  font-family: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
  z-index: 4;
  pointer-events: auto;
}
.hand-card:hover .hand-info-btn,
.hand-card .hand-info-btn:focus-visible{ opacity: 1; }
.hand-info-btn:hover{ background: var(--accent); color: var(--bg); border-color: var(--accent); }
/* ── Attack Picker ── */
.ap-layout{
  display: grid; grid-template-columns: 140px 1fr; gap: 24px; text-align: left;
}
.ap-left{
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ap-card-img{
  width: 130px; aspect-ratio: 0.62; object-fit: cover;
  border-radius: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
}
.ap-card-energies{
  display: flex; gap: 5px; flex-wrap: wrap; justify-content: center;
}
.ap-card-hp{
  font-size: 11px; color: var(--muted); letter-spacing: 0.08em;
}
.ap-right{
  display: flex; flex-direction: column; gap: 12px;
}
.ap-title{
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--accent);
}
.ap-char-name{
  font-size: 20px; font-weight: 700; color: var(--light); margin-top: -6px;
  line-height: 1.1;
}
.ap-attacks{ display: flex; flex-direction: column; gap: 8px; }

.ap-attack{
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0; padding: 14px 16px;
  cursor: pointer; transition: all 0.15s; text-align: left;
}
.ap-attack.payable:hover{
  background: rgba(52,217,195,0.08); border-color: rgba(52,217,195,0.5);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ap-attack.locked{
  opacity: 0.35; cursor: not-allowed; filter: saturate(0.3);
}
.ap-atk-cost{
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  min-width: 52px;
}
/* Energy type icon in attack cost */
.ap-cost-pip{
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0; flex-shrink: 0;
  border: 1px solid;
}
.ap-cost-pip img{ width: 14px; height: 14px; display: block; }
.ap-cost-pip.joy    { background: rgba(255,140,42,0.2);  border-color: rgba(255,140,42,0.5); }
.ap-cost-pip.tech   { background: rgba(52,217,195,0.15); border-color: rgba(52,217,195,0.45); }
.ap-cost-pip.shadow { background: rgba(108,79,217,0.18); border-color: rgba(108,79,217,0.45); }
.ap-cost-pip.any    { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); }
.ap-cost-free{ font-size: 10px; letter-spacing: 0.1em; color: var(--accent); }

.ap-atk-body{ flex: 1; }
.ap-atk-name{
  font-size: 15px; font-weight: 700; color: var(--light); margin-bottom: 3px;
  font-family: 'Chakra Petch', sans-serif;
}
.ap-atk-effect{
  font-size: 11px; color: var(--muted); line-height: 1.4;
}
.ap-atk-dmg{
  font-size: 38px; font-weight: 900; color: var(--accent);
  letter-spacing: -0.02em; min-width: 50px; text-align: right;
  line-height: 1; font-family: 'Chakra Petch', sans-serif;
}
.ap-atk-dmg.muted{ color: var(--muted); }
.ap-cancel{ width: 100%; margin-top: 6px; }

/* Legacy compat */
.attack-pick{ display:grid; gap:10px; }
.attack-option{ display:flex; align-items:center; justify-content:space-between;
  padding:16px; background:rgba(0,0,0,0.3); border:1px solid var(--line);
  cursor:pointer; transition:all 0.15s; text-align:left; }
.attack-option.disabled{ opacity:0.4; cursor:not-allowed; }
.attack-option:not(.disabled):hover{ border-color:var(--accent); background:rgba(52,217,195,0.08); }
.attack-option .at-name{ font-weight:600; font-size:16px; }
.attack-option .at-meta{ font-size:12px; color:var(--muted); margin-top:4px; }
.attack-option .at-cost{ display:flex; gap:4px; margin-top:6px; }
.attack-option .at-dmg{ font-size:24px; font-weight:700; color:var(--accent); }


/* Card preview on hover (used for opponent hand) */
.opp-hand{
  display: flex; gap: 4px; justify-content: center;
}
.opp-hand .mini-card{
  width: 38px; aspect-ratio: 0.62; border-radius: 4px;
  background: url('cards/028.webp') center/cover;
  border: 1px solid var(--line);
}

/* Setup screen for game */
.setup-deck-list{
  display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;
  margin: 14px 0;
}
.setup-deck-list .deck-option{
  border: 1px solid var(--line); padding: 14px;
  cursor: pointer; text-align: left;
  background: rgba(0,0,0,0.2);
  transition: all 0.2s;
}
.setup-deck-list .deck-option:hover{ border-color: var(--accent); background: rgba(52,217,195,0.06); }
.setup-deck-list .deck-option.selected{ border-color: var(--accent); background: rgba(52,217,195,0.12); }
.setup-deck-list .deck-option h4{ color: var(--accent); margin-bottom: 4px; }
.setup-deck-list .deck-option p{ font-size: 11px; color: var(--muted); margin: 0; }

/* Rules screen */
.rules-content{ max-width: 820px; margin: 0 auto; padding: 20px; line-height: 1.65; }
.rules-content h2{ color: var(--accent); margin-top: 30px; margin-bottom: 12px; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; }
.rules-content h3{ margin-top: 18px; margin-bottom: 8px; font-size: 16px; }
.rules-content p{ margin-bottom: 12px; color: var(--muted); }
.rules-content ul, .rules-content ol{ margin: 8px 0 16px 22px; color: var(--muted); }
.rules-content li{ margin-bottom: 6px; }
.rules-content strong{ color: var(--light); }
.rules-content table{ border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 14px; }
.rules-content th, .rules-content td{
  border: 1px solid var(--line); padding: 8px 12px; text-align: left;
}
.rules-content th{ background: rgba(52,217,195,0.08); color: var(--accent); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.rules-content blockquote{
  border-left: 3px solid var(--accent); padding: 8px 0 8px 16px;
  margin: 14px 0; color: var(--light); background: rgba(52,217,195,0.05);
  border-radius: 0 6px 6px 0;
}

/* ===================================================================
   ANIMATION SYSTEM
   =================================================================== */

/* ── Screen transitions ── */
.screen{
  animation: none;
  transition: opacity 0.25s;
}
.screen.screen-enter{
  animation: screen-in 0.4s cubic-bezier(0.2,0.8,0.4,1) both;
}
.screen.screen-leave{
  animation: screen-out 0.28s ease-in both;
  pointer-events: none;
}
@keyframes screen-in{
  from{ opacity:0; transform: translateY(14px); }
  to  { opacity:1; transform: translateY(0); }
}
@keyframes screen-out{
  from{ opacity:1; transform: translateY(0); }
  to  { opacity:0; transform: translateY(-8px); }
}

/* ── Game board enter / exit ── */
@keyframes game-board-in{
  0%  { opacity:0; clip-path: inset(50% round 20px); }
  40% { opacity:1; }
  100%{ opacity:1; clip-path: inset(0% round 0px); }
}
@keyframes game-board-out{
  0%  { opacity:1; clip-path: inset(0% round 0px); }
  100%{ opacity:0; clip-path: inset(50% round 20px); }
}
.game-board.entering{
  animation: game-board-in 0.55s cubic-bezier(0.2,0.8,0.4,1) both;
}
.game-board.exiting{
  animation: game-board-out 0.4s ease-in both;
  pointer-events: none;
}

/* Setup screen exit when starting battle */
@keyframes setup-exit{
  0%  { opacity:1; transform: scale(1); filter: brightness(1); }
  50% { opacity:1; filter: brightness(2); }
  100%{ opacity:0; transform: scale(1.08); filter: brightness(0); }
}
#screen-play.launching{
  animation: setup-exit 0.55s ease-in both;
  pointer-events: none;
}

/* ── Modal entrance / exit ── */
.big-modal{
  transition: opacity 0.22s;
}
.big-modal.open{
  display: flex;
  animation: modal-bg-in 0.22s ease both;
}
@keyframes modal-bg-in{
  from{ opacity:0; }
  to  { opacity:1; }
}
.big-modal.open .big-modal-content{
  animation: modal-content-in 0.32s cubic-bezier(0.25,0.8,0.3,1.3) both;
}
@keyframes modal-content-in{
  from{ opacity:0; transform: scale(0.82) translateY(28px); }
  to  { opacity:1; transform: scale(1)    translateY(0); }
}
.big-modal.closing .big-modal-content{
  animation: modal-content-out 0.2s ease-in both;
}
@keyframes modal-content-out{
  from{ opacity:1; transform: scale(1) translateY(0); }
  to  { opacity:0; transform: scale(0.88) translateY(12px); }
}

/* ── Nav tab indicator slide ── */
nav.tabs button{
  position: relative;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

/* ── Card fly (hand → field) ── */
.card-fly{
  position:fixed; pointer-events:none; z-index:8000;
  border-radius:10px; overflow:hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.85);
  will-change: transform, opacity;
}
.card-fly img{ width:100%; height:100%; object-fit:cover; }

/* ── Energy attach sparkle ── */
@keyframes energy-attach{
  0%  { transform:translate(0,0) scale(1); opacity:1; }
  60% { transform:translate(var(--ex),var(--ey)) scale(0.6); opacity:0.9; }
  100%{ transform:translate(var(--ex),var(--ey)) scale(0); opacity:0; }
}
.energy-spark{
  position:fixed; z-index:9000; pointer-events:none;
  border-radius:50%;
  animation: energy-attach 0.45s ease-in both;
}

/* ── KO explosion ── */
@keyframes ko-explode{
  0%  { transform:scale(1) rotate(0); filter:brightness(1); opacity:1; }
  30% { transform:scale(1.2) rotate(-5deg); filter:brightness(3) saturate(0); }
  60% { transform:scale(0.8) rotate(8deg); filter:brightness(2) hue-rotate(40deg); opacity:0.7; }
  100%{ transform:scale(0) rotate(-20deg); filter:brightness(0); opacity:0; }
}
.char-stack.ko-explode{
  animation: ko-explode 0.55s ease-in both;
  z-index:60;
}

/* Screen flash (used for KO, game events) */
@keyframes screen-flash{
  0%,100%{ opacity:0; }
  20%    { opacity:1; }
}
.screen-flash-overlay{
  position:fixed; inset:0; z-index:700;
  pointer-events:none;
  animation: screen-flash 0.4s ease-out both;
}

/* ── Win / Loss overlay ── */
@keyframes gameover-in{
  from{ opacity:0; transform:scale(0.7); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes gameover-title{
  0%  { letter-spacing:0.5em; opacity:0; transform:scaleX(1.4); }
  60% { letter-spacing:0.06em; opacity:1; }
  100%{ letter-spacing:0.06em; opacity:1; transform:scaleX(1); }
}
@keyframes confetti-fall{
  0%  { transform:translateY(-20px) rotate(0deg); opacity:1; }
  100%{ transform:translateY(120vh) rotate(720deg); opacity:0; }
}
.gameover-overlay{
  position:fixed; inset:0; z-index:600;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background: rgba(0,8,12,0.9);
  backdrop-filter: blur(10px);
  animation: gameover-in 0.6s cubic-bezier(0.2,0.8,0.4,1.1) both;
  border-radius: 0;
}
.gameover-title{
  font-size:88px; font-weight:900; letter-spacing:0.06em; text-transform:uppercase;
  line-height:1; text-align:center;
  animation: gameover-title 0.7s cubic-bezier(0.2,0.8,0.4,1) 0.15s both;
}
.gameover-title.win { color: var(--accent); text-shadow: 0 0 60px rgba(52,217,195,0.8), 0 0 120px rgba(52,217,195,0.4); }
.gameover-title.lose{ color: var(--danger); text-shadow: 0 0 60px rgba(255,92,92,0.8); }
.gameover-sub{
  font-size:18px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted);
  margin:16px 0 40px; opacity:0;
  animation: screen-in 0.4s ease 0.5s both;
}
.gameover-actions{
  display:flex; gap:14px; opacity:0;
  animation: screen-in 0.4s ease 0.65s both;
}
.confetti-piece{
  position:fixed; pointer-events:none; z-index:601;
  width:8px; height:14px;
  animation: confetti-fall linear both;
}

/* ── Turn announcement enhancement ── */
.turn-announcement.show::before{
  content:'';
  position:absolute; left:0; right:0; top:50%;
  height:1px; background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity:0.3;
  animation: scan-line 1.9s ease-out;
}
@keyframes scan-line{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}

/* ── Hand card deal animation ── */
@keyframes card-deal{
  from{ transform: translateY(80px) scale(0.8) rotate(var(--deal-r)); opacity:0; }
  to  { transform: translateY(0) scale(1) rotate(0); opacity:1; }
}
.hand-card.dealing{
  animation: card-deal 0.4s cubic-bezier(0.2,0.8,0.4,1) both;
  animation-delay: var(--deal-delay);
}

/* ── Slot "pop in" when card placed ── */
@keyframes slot-pop{
  0%  { transform: scale(0.7); opacity:0; }
  70% { transform: scale(1.08); }
  100%{ transform: scale(1); opacity:1; }
}
.active-slot.just-placed,
.bench-slot.just-placed{
  animation: slot-pop 0.4s cubic-bezier(0.2,0.8,0.4,1.2) both;
}

/* ── Prize fly with card flip ── */
.prize-fly{
  position: fixed; pointer-events: none; z-index: 9500;
  perspective: 600px;
}
.prize-fly-inner{
  width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform 0.28s ease-in-out;
  position: relative;
}
.prize-fly-back,
.prize-fly-front{
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 8px; overflow: hidden;
}
.prize-fly-back img,
.prize-fly-front img{ width:100%; height:100%; object-fit:cover; }
.prize-fly-front{ transform: rotateY(180deg); }

/* Prize take animation */
@keyframes prize-take{
  0%  { transform: scale(1) rotate(0); opacity:1; }
  50% { transform: scale(1.15) rotate(5deg); opacity:0.8; }
  100%{ transform: scale(0) rotate(-20deg) translateY(-40px); opacity:0; }
}
.prize-card.being-taken{
  animation: prize-take 0.5s ease-in both;
}

/* Responsive — mobile is rough but works */
@media (max-width: 920px){
  .home-grid{ grid-template-columns: 1fr; gap: 24px; padding: 28px 24px 0; }
  .home-right{ display: none; }
  .home-title{ font-size: 58px; }
  .play-inner{ padding: 24px 20px; }
  .play-header{ flex-direction: column; align-items: stretch; }
  .play-vs-block{ align-self: stretch; }
  .builder-layout{ grid-template-columns: 1fr; }
  nav.tabs{ flex-wrap: wrap; }
  .modal-body{ grid-template-columns: 1fr; }
  .modal img{ width: 80%; margin: 0 auto; }
  .log-panel{ display: none; }
}

/* ===================================================================
   DICE ROLL — 3D canvas dice thrown onto board
   =================================================================== */
#dice-overlay{
  position: absolute; inset: 0; z-index: 500;
  background: rgba(0,6,12,0.78);
  backdrop-filter: blur(5px);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: all;
}
#dice-overlay.show{ opacity: 1; }
#dice-overlay.hide{ opacity: 0; pointer-events: none; }

#dice-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Result panel — centered over dice */
.dice-result-panel{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10;
  background: var(--bg);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 0;
  padding: 26px 38px 28px;
  text-align: center;
  min-width: 300px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  animation: modal-content-in 0.35s cubic-bezier(0.2,0.8,0.4,1.1) both;
}
.dice-result-panel.hidden{ display: none; }

.drp-vals{
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-bottom: 16px;
}
.drp-col{ text-align: center; }
.drp-who{
  font-size: 10px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.drp-num{
  font-size: 62px; font-weight: 900; color: var(--light);
  line-height: 1; letter-spacing: -0.02em;
  transition: color 0.4s, text-shadow 0.4s;
}
.drp-num.win{
  color: var(--accent);
  text-shadow: 0 0 32px rgba(52,217,195,0.65);
}
.drp-num.lose{ color: rgba(255,255,255,0.2); }
.drp-sep{
  font-size: 10px; font-weight: 700; letter-spacing: 0.25em;
  color: rgba(255,255,255,0.15); text-transform: uppercase;
}
.drp-status{
  font-size: 13px; color: var(--muted); margin-bottom: 16px;
  line-height: 1.5; letter-spacing: 0.02em;
}
.drp-btns{
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.drp-btns .btn{
  min-width: 138px; font-size: 12px; padding: 11px 18px;
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* ===================================================================
   ANIMATION SYSTEM
   =================================================================== */

/* ── Screen transitions ── */
.screen{
  animation: none;
  transition: opacity 0.25s;
}
.screen.screen-enter{
  animation: screen-in 0.4s cubic-bezier(0.2,0.8,0.4,1) both;
}
.screen.screen-leave{
  animation: screen-out 0.28s ease-in both;
  pointer-events: none;
}
@keyframes screen-in{
  from{ opacity:0; transform: translateY(14px); }
  to  { opacity:1; transform: translateY(0); }
}
@keyframes screen-out{
  from{ opacity:1; transform: translateY(0); }
  to  { opacity:0; transform: translateY(-8px); }
}

/* ── Game board enter / exit ── */
@keyframes game-board-in{
  0%  { opacity:0; clip-path: inset(50% round 20px); }
  40% { opacity:1; }
  100%{ opacity:1; clip-path: inset(0% round 0px); }
}
@keyframes game-board-out{
  0%  { opacity:1; clip-path: inset(0% round 0px); }
  100%{ opacity:0; clip-path: inset(50% round 20px); }
}
.game-board.entering{
  animation: game-board-in 0.55s cubic-bezier(0.2,0.8,0.4,1) both;
}
.game-board.exiting{
  animation: game-board-out 0.4s ease-in both;
  pointer-events: none;
}

/* Setup screen exit when starting battle */
@keyframes setup-exit{
  0%  { opacity:1; transform: scale(1); filter: brightness(1); }
  50% { opacity:1; filter: brightness(2); }
  100%{ opacity:0; transform: scale(1.08); filter: brightness(0); }
}
#screen-play.launching{
  animation: setup-exit 0.55s ease-in both;
  pointer-events: none;
}

/* ── Modal entrance / exit ── */
.big-modal{
  transition: opacity 0.22s;
}
.big-modal.open{
  display: flex;
  animation: modal-bg-in 0.22s ease both;
}
@keyframes modal-bg-in{
  from{ opacity:0; }
  to  { opacity:1; }
}
.big-modal.open .big-modal-content{
  animation: modal-content-in 0.32s cubic-bezier(0.25,0.8,0.3,1.3) both;
}
@keyframes modal-content-in{
  from{ opacity:0; transform: scale(0.82) translateY(28px); }
  to  { opacity:1; transform: scale(1)    translateY(0); }
}
.big-modal.closing .big-modal-content{
  animation: modal-content-out 0.2s ease-in both;
}
@keyframes modal-content-out{
  from{ opacity:1; transform: scale(1) translateY(0); }
  to  { opacity:0; transform: scale(0.88) translateY(12px); }
}

/* ── Nav tab indicator slide ── */
nav.tabs button{
  position: relative;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

/* ── Card fly (hand → field) ── */
.card-fly{
  position:fixed; pointer-events:none; z-index:8000;
  border-radius:10px; overflow:hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.85);
  will-change: transform, opacity;
}
.card-fly img{ width:100%; height:100%; object-fit:cover; }

/* ── Energy attach sparkle ── */
@keyframes energy-attach{
  0%  { transform:translate(0,0) scale(1); opacity:1; }
  60% { transform:translate(var(--ex),var(--ey)) scale(0.6); opacity:0.9; }
  100%{ transform:translate(var(--ex),var(--ey)) scale(0); opacity:0; }
}
.energy-spark{
  position:fixed; z-index:9000; pointer-events:none;
  border-radius:50%;
  animation: energy-attach 0.45s ease-in both;
}

/* ── KO explosion ── */
@keyframes ko-explode{
  0%  { transform:scale(1) rotate(0); filter:brightness(1); opacity:1; }
  30% { transform:scale(1.2) rotate(-5deg); filter:brightness(3) saturate(0); }
  60% { transform:scale(0.8) rotate(8deg); filter:brightness(2) hue-rotate(40deg); opacity:0.7; }
  100%{ transform:scale(0) rotate(-20deg); filter:brightness(0); opacity:0; }
}
.char-stack.ko-explode{
  animation: ko-explode 0.55s ease-in both;
  z-index:60;
}

/* Screen flash (used for KO, game events) */
@keyframes screen-flash{
  0%,100%{ opacity:0; }
  20%    { opacity:1; }
}
.screen-flash-overlay{
  position:fixed; inset:0; z-index:700;
  pointer-events:none;
  animation: screen-flash 0.4s ease-out both;
}

/* ── Win / Loss overlay ── */
@keyframes gameover-in{
  from{ opacity:0; transform:scale(0.7); }
  to  { opacity:1; transform:scale(1); }
}
@keyframes gameover-title{
  0%  { letter-spacing:0.5em; opacity:0; transform:scaleX(1.4); }
  60% { letter-spacing:0.06em; opacity:1; }
  100%{ letter-spacing:0.06em; opacity:1; transform:scaleX(1); }
}
@keyframes confetti-fall{
  0%  { transform:translateY(-20px) rotate(0deg); opacity:1; }
  100%{ transform:translateY(120vh) rotate(720deg); opacity:0; }
}
.gameover-overlay{
  position:fixed; inset:0; z-index:600;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  background: rgba(0,8,12,0.9);
  backdrop-filter: blur(10px);
  animation: gameover-in 0.6s cubic-bezier(0.2,0.8,0.4,1.1) both;
  border-radius: 0;
}
.gameover-title{
  font-size:88px; font-weight:900; letter-spacing:0.06em; text-transform:uppercase;
  line-height:1; text-align:center;
  animation: gameover-title 0.7s cubic-bezier(0.2,0.8,0.4,1) 0.15s both;
}
.gameover-title.win { color: var(--accent); text-shadow: 0 0 60px rgba(52,217,195,0.8), 0 0 120px rgba(52,217,195,0.4); }
.gameover-title.lose{ color: var(--danger); text-shadow: 0 0 60px rgba(255,92,92,0.8); }
.gameover-sub{
  font-size:18px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted);
  margin:16px 0 40px; opacity:0;
  animation: screen-in 0.4s ease 0.5s both;
}
.gameover-actions{
  display:flex; gap:14px; opacity:0;
  animation: screen-in 0.4s ease 0.65s both;
}
.confetti-piece{
  position:fixed; pointer-events:none; z-index:601;
  width:8px; height:14px;
  animation: confetti-fall linear both;
}

/* ── Turn announcement enhancement ── */
.turn-announcement.show::before{
  content:'';
  position:absolute; left:0; right:0; top:50%;
  height:1px; background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity:0.3;
  animation: scan-line 1.9s ease-out;
}
@keyframes scan-line{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}

/* ── Hand card deal animation ── */
@keyframes card-deal{
  from{ transform: translateY(80px) scale(0.8) rotate(var(--deal-r)); opacity:0; }
  to  { transform: translateY(0) scale(1) rotate(0); opacity:1; }
}
.hand-card.dealing{
  animation: card-deal 0.4s cubic-bezier(0.2,0.8,0.4,1) both;
  animation-delay: var(--deal-delay);
}

/* ── Slot "pop in" when card placed ── */
@keyframes slot-pop{
  0%  { transform: scale(0.7); opacity:0; }
  70% { transform: scale(1.08); }
  100%{ transform: scale(1); opacity:1; }
}
.active-slot.just-placed,
.bench-slot.just-placed{
  animation: slot-pop 0.4s cubic-bezier(0.2,0.8,0.4,1.2) both;
}

/* ── Prize fly with card flip ── */
.prize-fly{
  position: fixed; pointer-events: none; z-index: 9500;
  perspective: 600px;
}
.prize-fly-inner{
  width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform 0.28s ease-in-out;
  position: relative;
}
.prize-fly-back,
.prize-fly-front{
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 8px; overflow: hidden;
}
.prize-fly-back img,
.prize-fly-front img{ width:100%; height:100%; object-fit:cover; }
.prize-fly-front{ transform: rotateY(180deg); }

/* Prize take animation */
@keyframes prize-take{
  0%  { transform: scale(1) rotate(0); opacity:1; }
  50% { transform: scale(1.15) rotate(5deg); opacity:0.8; }
  100%{ transform: scale(0) rotate(-20deg) translateY(-40px); opacity:0; }
}
.prize-card.being-taken{
  animation: prize-take 0.5s ease-in both;
}

/* Responsive — mobile is rough but works */
@media (max-width: 920px){
  .home-grid{ grid-template-columns: 1fr; gap: 24px; padding: 28px 24px 0; }
  .home-right{ display: none; }
  .home-title{ font-size: 58px; }
  .play-inner{ padding: 24px 20px; }
  .play-header{ flex-direction: column; align-items: stretch; }
  .play-vs-block{ align-self: stretch; }
  .builder-layout{ grid-template-columns: 1fr; }
  nav.tabs{ flex-wrap: wrap; }
  .modal-body{ grid-template-columns: 1fr; }
  .modal img{ width: 80%; margin: 0 auto; }
  .log-panel{ display: none; }
}


/* ===================================================================
   PEEK HANDS + OPP HAND + AI BANNER + TOOL REVEAL
   =================================================================== */

/* ── Arena: no hand row (hands now outside arena) ── */
.arena{
  grid-template-rows: 1fr auto 1fr;
}

/* ── Peek wrapper shared ── */
.hand-peek{
  position: fixed; left: 0; right: 0; z-index: 25;
  display: flex; justify-content: center; align-items: flex-start;
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.4, 1);
}

/* ── Opponent hand: face-down cards peek from TOP ── */
.opp-hand-peek{
  top: 0; flex-direction: row; gap: 0; padding: 0 16px;
  /* Show just 28px at top — within the 32px reserved area */
  transform: translateY(calc(-100% + 28px));
  background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 75%, transparent 100%);
}
.opp-hand-peek::after{
  content: 'OPPONENT  ' attr(data-count) ' CARDS';
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-size: 9px; letter-spacing: 0.2em; color: var(--muted);
  text-transform: uppercase; pointer-events: none; transition: opacity 0.3s;
  white-space: nowrap;
}
.opp-hand-peek:hover::after{ opacity: 0; }
.opp-hand-peek:hover{ transform: translateY(0); }

.opp-hand-card{
  width: 80px; aspect-ratio: 0.62; margin: 0 -11px;
  border-radius: 7px; overflow: hidden;
  background: url('cards/028.webp') center/cover;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.7);
  transition: transform 0.2s, margin 0.2s; flex-shrink: 0;
}
.opp-hand-card:hover{ transform: translateY(8px) scale(1.08); margin: 0 -4px; z-index: 1; }
@keyframes opp-card-draw{
  from{ transform: translateX(-30px) scale(0.7); opacity: 0; }
  to  { transform: translateX(0) scale(1); opacity: 1; }
}
.opp-hand-card.new{ animation: opp-card-draw 0.35s cubic-bezier(0.2,0.8,0.4,1) both; }

/* ── Player hand: peeks from BOTTOM — sits in reserved padding area ── */
.player-hand-peek{
  bottom: 0;
  /* At rest: show just 34px (label + card tops barely visible) */
  transform: translateY(calc(100% - 34px));
  background: linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.65) 65%, transparent 100%);
  transition: transform 0.38s cubic-bezier(0.2,0.8,0.4,1), box-shadow 0.38s;
}
.player-hand-peek::before{
  content: 'YOUR HAND';
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  font-size: 9px; letter-spacing: 0.28em; color: var(--muted);
  text-transform: uppercase; pointer-events: none; transition: opacity 0.25s;
  white-space: nowrap;
}
.player-hand-peek:hover::before{ opacity: 0; }
/* Hover: expand fully but never past the game-board top padding */
.player-hand-peek:hover{ transform: translateY(-16px); }

/* Player turn — rise automatically to show top portion of cards */
.player-turn .player-hand-peek{
  transform: translateY(50px);
  box-shadow: none;
}
.player-turn .player-hand-peek::before{
  content: 'YOUR TURN  ·  HOVER TO PLAY';
  color: var(--accent); letter-spacing: 0.2em;
}
.player-turn .player-hand-peek:hover{ transform: translateY(0px); }

.player-hand-peek .hand-tray{
  padding: 10px 16px 12px; background: none; border-top: none; min-height: 118px;
}
.player-hand-peek .hand-card:hover{
  transform: translateY(-28px) scale(1.1);
}

/* Bigger hand cards to match bigger field cards */
.hand-card{ width: 100px; }

/* Collapse hand fully when dragging a card — bench becomes reachable */
.game-board.dragging-card .player-hand-peek{
  transform: translateY(calc(100% - 10px)) !important;
  pointer-events: none !important;
  transition: transform 0.12s ease-in !important;
}
.game-board.dragging-card .player-hand-peek .hand-card{
  pointer-events: none;
}

/* ── AI Action Banner — no emojis, tag style ── */
.ai-action-banner{
  position: fixed; top: 46%; left: 50%;
  transform: translate(-50%, -50%) scale(0.88);
  z-index: 90; background: rgba(0,8,14,0.95);
  border: 1px solid var(--line);
  padding: 10px 20px; display: flex; align-items: center; gap: 10px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
  box-shadow: 0 8px 32px rgba(0,0,0,0.75);
}
.ai-action-banner.visible{
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
.banner-tag{
  font-size: 9px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--accent); background: rgba(52,217,195,0.12);
  border: 1px solid rgba(52,217,195,0.25);
  padding: 3px 7px; text-transform: uppercase; flex-shrink: 0;
}
.banner-text{ font-size: 13px; color: var(--light); letter-spacing: 0.02em; }

/* ── Tool Reveal Overlay ── */
.tool-reveal-overlay{
  position: fixed; inset: 0; z-index: 450;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,8,14,0.78);
  backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.tool-reveal-overlay.visible{ opacity: 1; }
.tool-reveal-overlay.hidden{ display: none; }
.tool-reveal-inner{
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: tool-slam 0.45s cubic-bezier(0.2, 0.8, 0.4, 1.2) both;
}
@keyframes tool-slam{
  from{ transform: scale(0.4) rotate(-8deg); opacity: 0; }
  to  { transform: scale(1) rotate(0deg); opacity: 1; }
}
.tool-reveal-overlay img{
  width: 240px; aspect-ratio: 0.62; object-fit: cover;
  border-radius: 0;
  box-shadow: 0 24px 70px rgba(0,0,0,0.9), 0 0 50px rgba(52,217,195,0.35);
  border: 1px solid rgba(255,255,255,0.25);
}
.tool-reveal-label{
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent); margin-bottom: -6px;
}
.tool-reveal-name{
  font-size: 26px; font-weight: 700; color: var(--light); letter-spacing: 0.03em;
}
.tool-reveal-effect{
  font-size: 15px; color: var(--muted); max-width: 300px; text-align: center;
  line-height: 1.6;
}

/* ===================================================================
   SETUP MODAL — team selection with large cards
   =================================================================== */
.setup-modal-inner{ text-align: center; }
.setup-modal-title{
  font-size: 22px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.setup-modal-sub{
  font-size: 13px; color: var(--muted); margin-bottom: 20px; line-height: 1.5;
}
.setup-modal-sub strong{ color: var(--light); }

/* Slot preview row */
.setup-slots-row{
  display: flex; gap: 24px; justify-content: center; align-items: flex-start;
  margin-bottom: 22px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.setup-slot-zone{ display: flex; flex-direction: column; align-items: center; gap: 8px; }
.setup-slot-label{
  font-size: 10px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--muted);
}
.setup-slot-box{
  width: 78px; aspect-ratio: 0.62;
  border-radius: 10px; border: 2px dashed rgba(52,217,195,0.25);
  background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; transition: border-color 0.2s;
}
.setup-slot-box.filled{ border-color: var(--accent); border-style: solid; }
.setup-slot-box.bench-mini{ width: 58px; border-radius: 7px; }
.setup-slot-img{ width: 100%; height: 100%; object-fit: cover; }
.setup-slot-empty{ font-size: 11px; color: rgba(52,217,195,0.3); }
.setup-bench-row{ display: flex; gap: 6px; }

/* Card grid */
.setup-hand-grid{
  display: flex; gap: 14px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 20px;
}
.setup-card-pick{
  position: relative; cursor: pointer;
  border-radius: 10px; border: 2px solid var(--line);
  padding: 5px; background: rgba(0,0,0,0.35);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.setup-card-pick:hover{
  border-color: rgba(52,217,195,0.6);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.6);
}
.setup-card-pick.is-active{
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(52,217,195,0.45);
}
.setup-card-pick.is-bench{
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(255,200,87,0.3);
}
.setup-card-img{
  width: 130px; aspect-ratio: 0.62; object-fit: cover;
  border-radius: 7px; display: block;
}
.setup-card-badge{
  position: absolute; top: 10px; left: 10px;
  background: var(--accent); color: var(--bg);
  padding: 2px 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
}
.setup-card-pick.is-bench .setup-card-badge{
  background: var(--gold); color: var(--bg);
}
.setup-card-name{
  font-size: 11px; color: var(--muted); letter-spacing: 0.04em;
  max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.setup-modal-actions{
  display: flex; gap: 12px; justify-content: center;
}
.setup-modal-actions .btn{ min-width: 130px; }