/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0b0e17;
  --surface: #151a2e;
  --surface2: #1c2240;
  --border: #2a3158;
  --accent: #f5c518;
  --hero: #3b82f6;
  --enemy: #ef4444;
  --text: #e2e8f0;
  --text-dim: #94a3b8;
  --win: #22c55e;
  --lose: #ef4444;
  --draw: #a855f7;
  --card-w: 80px;
  --card-h: 112px;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;       /* fallback for older browsers */
  height: 100dvh;      /* visible viewport on mobile (excludes URL bar) */
  display: flex;
  justify-content: center;
  overflow: hidden;
  /* Lock down text selection across the app — prevents accidental highlights
     on card stats, names, traits, and menu text during play. Form inputs
     opt back in below so players can still edit credentials and names. */
  user-select: none;
  -webkit-user-select: none;
}

/* Re-enable text selection for the 4 text inputs across the app:
   play.html  → #new-save-name, #auth-email, #auth-password
   game.html  → #name-edit-input
   Range sliders match this selector too but it's a no-op for them. */
input, textarea {
  user-select: text;
  -webkit-user-select: text;
}

.hidden { display: none !important; }

/* ── Level intro overlay ─────────────────────────── */
#intro-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 474px;
  height: 894px;
  transform: translate(-50%, -50%) scale(var(--canvas-scale, 1));
  transform-origin: center center;
  background:
    linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)),
    url("CARD%20ASSETS%20V2/Game_Background_V2.png") center/cover no-repeat;
  overflow: hidden;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  font-family: 'Barlow Condensed', sans-serif;
}

#intro-overlay.hidden { display: none !important; }

.intro-stage {
  position: relative;
  width: 440px;
  height: 440px;
}

.intro-card-wrap {
  position: absolute;
  top: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              top 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease-out,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Scene 1 — player centered, enemy off-screen right */
#intro-overlay.scene-1 .intro-player-wrap {
  left: 50%;
  top: 60px;
  transform: translateX(-50%);
}

#intro-overlay.scene-1 .intro-enemy-wrap {
  left: 100%;
  top: 60px;
  opacity: 0;
  transform: translateX(20px);
}

/* Scene 2 — player slides left, enemy slides in right (and slightly lower) */
#intro-overlay.scene-2 .intro-player-wrap {
  left: calc(50% - 120px);
  top: 40px;
  transform: translateX(-50%);
}

#intro-overlay.scene-2 .intro-enemy-wrap {
  left: calc(50% + 120px);
  top: 80px;
  opacity: 1;
  transform: translateX(-50%);
}

.intro-card {
  --card-w: 220px;
  --card-h: 308px;
  width: 220px;
  height: 308px;
  position: relative;
}

.intro-bubble {
  background: #fff;
  color: #000;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 1.3;
  margin-bottom: 18px;
  max-width: 220px;
  text-align: center;
  position: relative;
  box-shadow: none;
  border: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.intro-bubble.visible {
  opacity: 1;
  animation: intro-bubble-float 3.9s ease-in-out infinite;
}

@keyframes intro-bubble-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.intro-bubble::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

/* Individually shaking characters — used for Rot enemy speech */
.intro-bubble .shake-char {
  display: inline-block;
  animation: rot-shake 0.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes rot-shake {
  0%, 100% { transform: translate(0, 0)        rotate(0deg); }
  20%      { transform: translate(0.5px, -1px) rotate(-1deg); }
  40%      { transform: translate(-1px, 0.5px) rotate(1deg); }
  60%      { transform: translate(0.5px, 1px)  rotate(-0.5deg); }
  80%      { transform: translate(-0.5px, -0.5px) rotate(0.5deg); }
}

.intro-tap-hint {
  position: absolute;
  bottom: 52px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  pointer-events: none;
  animation: intro-hint-pulse 1.8s ease-in-out infinite;
  opacity: 1;
  transition: opacity 0.25s ease-out;
}

#intro-overlay.typing .intro-tap-hint {
  opacity: 0;
}

@keyframes intro-hint-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* Early-access notice — shown once per page load on the home screen */
#early-access-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  font-family: 'Barlow Condensed', 'Segoe UI', system-ui, sans-serif;
}

#early-access-dialog.hidden { display: none !important; }

#early-access-box {
  background: #000;
  border: 2px solid #000;
  border-radius: 12px;
  padding: 28px 32px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8);
}

#early-access-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 4px;
  margin: 0 0 14px;
  color: #39ff14;
  text-transform: uppercase;
}

#early-access-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 22px;
}

#early-access-ok {
  background: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT@2x.png") center/contain no-repeat;
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  padding: 14px 56px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}

#early-access-ok:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Loading screen — shown after save select while assets preload */
#loading-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 10000;
  color: var(--text);
  font-family: 'Courier New', monospace;
}

#loading-screen.hidden { display: none !important; }

#loading-text {
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: lowercase;
  opacity: 0.85;
}

#loading-bar {
  font-size: 22px;
  letter-spacing: 1px;
  margin: 0;
  white-space: pre;
}

.loading-bar-filled { color: #39ff14; }
.loading-bar-empty  { color: #6b7280; }

/* ── Home Menu ──────────────────────────────────── */
/* ── Save Slot Screen (Landing) ───────────────────────── */
#save-screen {
  width: 100%;
  max-width: 500px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

#save-title {
  display: block;
  width: 320px;
  max-width: 80%;
  height: auto;
  margin: 0 auto 4px;
  filter: drop-shadow(0 0 40px rgba(239, 68, 68, 0.5));
  opacity: 0;
  animation: fadeInDown 0.6s ease-out forwards;
}

#save-subtitle {
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 48px;
  opacity: 0;
  animation: fadeInDown 0.4s ease-out 0.3s forwards;
}

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

@keyframes slotSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

#save-slots {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 400px;
}

#save-dfz-logo {
  display: block;
  width: 64px;
  height: auto;
  margin: 32px auto 0;
  opacity: 0.7;
}

.save-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, opacity 0.2s;
  opacity: 0;
  transform: translateY(20px);
}

.save-slot.slot-visible {
  opacity: 1;
  transform: translateY(0);
}

.save-slot.slot-enter {
  animation: slotSlideIn 0.4s ease-out;
}

.save-slot.empty.slot-visible {
  opacity: 0.7;
}

.save-slot:hover {
  border-color: #39ff14;
  transform: translateY(-2px);
}

.save-slot.empty {
  border-style: dashed;
}

.save-slot.empty:hover {
  opacity: 1;
}

.save-slot-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.save-slot-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dim);
}

.save-slot-detail {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.save-slot-empty {
  color: var(--text-dim);
  font-style: italic;
}

.save-slot-delete {
  background: none;
  border: 2px solid var(--border);
  color: var(--text-dim);
  font-size: 16px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}

.save-slot-delete:hover {
  border-color: var(--lose);
  color: var(--lose);
}

/* ── Save Slot Dialogs ───────────────────────────────── */
#new-save-dialog, #delete-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

#new-save-content, #delete-content {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  max-width: 360px;
  width: 90%;
}

#new-save-content h2, #delete-content h2 {
  font-size: 20px;
  color: #39ff14;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

#delete-content p {
  color: var(--text-dim);
  margin-bottom: 24px;
}

#new-save-name {
  width: 100%;
  padding: 10px 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  margin-bottom: 20px;
  outline: none;
  text-align: center;
}

#new-save-name:focus {
  border-color: #39ff14;
}

#new-save-buttons, #delete-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

#new-save-buttons .menu-btn, #delete-buttons .menu-btn {
  width: auto;
  min-width: 100px;
  padding: 10px 24px;
  font-size: 14px;
}

/* ── Home Menu ────────────────────────────────────── */
#menu-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  background: var(--bg);
  overflow: hidden;
}

#menu-canvas {
  --card-w: 110px;
  --card-h: 154px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 474px;
  height: 894px;
  transform: translate(-50%, -50%) scale(var(--canvas-scale, 1));
  transform-origin: center center;
  display: flex;
  flex-direction: column;
  background: url("CARD%20ASSETS%20V2/HOME%20SCREEN%20BACKGROUND@2x.png") center/cover no-repeat;
}

#menu-title {
  font-size: 48px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--accent);
  text-shadow: 0 0 40px rgba(245, 197, 24, 0.3);
  margin-bottom: 4px;
}

#menu-subtitle {
  font-size: 14px;
  color: var(--text-dim);
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 48px;
}

#menu-buttons {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
}

#menu-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
  gap: 12px;
}

#menu-level-progress {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 180px;
  margin-top: 20px;
  cursor: pointer;
  transition: opacity 0.15s;
}

#menu-level-progress:hover { opacity: 0.85; }

#menu-level-track {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  overflow: hidden;
}

#menu-level-fill {
  height: 100%;
  width: 0%;
  background: #39ff14;
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.6);
  transition: width 0.4s ease-out;
}

#menu-level-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.menu-pill {
  background: transparent;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 0;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  font-family: 'Barlow Condensed', sans-serif;
  transition: filter 0.15s, opacity 0.15s;
}

#player-name-btn.menu-pill {
  cursor: pointer;
}
#player-name-btn.menu-pill:hover {
  opacity: 0.85;
}

#credits-display.menu-pill {
  cursor: pointer;
  color: #888;
  transition: color 0.15s, opacity 0.15s;
}

#credits-display.menu-pill:hover {
  color: #fff;
  opacity: 0.95;
}

#menu-middle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Auto-rotating deck carousel on the home menu */
#menu-deck-carousel {
  position: relative;
  width: 220px;
  height: 308px;
  perspective: 1000px;
  pointer-events: none;
}

/* Slot — handles the fan-in / fan-out wave */
.menu-carousel-slot {
  position: absolute;
  inset: 0;
  width: 220px;
  height: 308px;
  pointer-events: none;
  transform-origin: 50% 110%;
}

.menu-carousel-slot.menu-carousel-enter {
  animation: menu-card-fan-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.menu-carousel-slot.menu-carousel-exit {
  animation: menu-card-fan-out 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes menu-card-fan-in {
  0%   { opacity: 0; transform: translateX(60px) translateY(20px) rotate(18deg) scale(0.92); }
  100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
}

@keyframes menu-card-fan-out {
  0%   { opacity: 1; transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translateX(-60px) translateY(20px) rotate(-18deg) scale(0.92); }
}

/* Tilt — slow breathing rotation while centered, drives the specular shine */
@property --shine-angle {
  syntax: '<angle>';
  initial-value: 135deg;
  inherits: true;
}

.menu-carousel-tilt {
  width: 100%;
  height: 100%;
  position: relative;
  --shine-angle: 60deg;
  animation: menu-card-breathe 8s ease-in-out infinite;
  transform-style: preserve-3d;
}

.menu-carousel-card {
  --card-w: 220px;
  --card-h: 308px;
  width: 100%;
  height: 100%;
  position: relative;
}

@keyframes menu-card-breathe {
  0%, 100% { transform: rotateY(-9deg) rotateX(5deg);  --shine-angle: 30deg;  }
  50%      { transform: rotateY(9deg)  rotateX(-5deg); --shine-angle: 230deg; }
}

/* Specular highlight layer — same mask trick as the inspect view, but driven
   by the breathing animation instead of the cursor */
.menu-carousel-specular {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("CARD%20ASSETS%20V2/Card_Specular_Highlights@2x.png") center/cover no-repeat;
  -webkit-mask: linear-gradient(
    var(--shine-angle, 135deg),
    transparent 30%,
    #fff 50%,
    transparent 70%
  );
          mask: linear-gradient(
    var(--shine-angle, 135deg),
    transparent 30%,
    #fff 50%,
    transparent 70%
  );
  z-index: 10;
}

#menu-bottom-row {
  display: flex;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
  justify-content: center;
  margin-bottom: 10px;
}

.menu-btn-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.menu-btn-label {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

#menu-bottom-row .menu-btn {
  flex: 0 0 auto;
  width: 75px;
  padding: 18px 8px;
  font-size: 16px;
  letter-spacing: 1px;
}

#menu-bottom-row .menu-btn.stone-square {
  width: 75px;
  padding: 0;
}

/* Stone-square buttons: PNG button base + icon overlay (icons are sized 1:1
   with the button art so a single contain background covers both) */
.menu-btn.stone-square {
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-size: contain, contain !important;
  background-position: center, center !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  aspect-ratio: 1 / 1;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}

.menu-btn.stone-square:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.menu-btn.stone-square:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

#deck-builder-btn.stone-square {
  background-image:
    url("CARD%20ASSETS%20V2/DECK%20ICON@2x.png"),
    url("CARD%20ASSETS%20V2/BUTTON_STONE_SQUARE@2x.png");
}

#play-btn.stone-square {
  background-image:
    url("CARD%20ASSETS%20V2/PLAY%20ICON@2x.png"),
    url("CARD%20ASSETS%20V2/BUTTON_STONE_SQUARE@2x.png");
}

#menu-options-btn.stone-square {
  background-image:
    url("CARD%20ASSETS%20V2/OPTIONS%20ICON@2x.png"),
    url("CARD%20ASSETS%20V2/BUTTON_STONE_SQUARE@2x.png");
}

/* Gold NEW badge — used above the DECK button + on unseen deck-builder cards. */
.new-badge {
  display: inline-block;
  background: linear-gradient(180deg, #ffe27a 0%, #f5c518 55%, #b88500 100%);
  color: #2a1d00;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  line-height: 1;
  pointer-events: none;
  animation: new-badge-pulse 1.6s ease-in-out infinite;
}
.new-badge.hidden { display: none; }
@keyframes new-badge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Position the DECK button badge above the icon. */
.menu-btn-cell {
  position: relative;
}
#deck-new-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

/* Position the deck-builder card badge top-right (where the lock used to sit). */
.db-new-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 6;
}

#shop-btn.stone-square {
  background-image:
    url("CARD%20ASSETS%20V2/SHOP%20ICON.png"),
    url("CARD%20ASSETS%20V2/BUTTON_STONE_SQUARE@2x.png");
}

#play-btn.stone-square:disabled {
  filter: grayscale(0.7) brightness(0.6);
  cursor: not-allowed;
  transform: none;
}

.menu-btn {
  background: var(--surface2);
  color: var(--text);
  border: 2px solid var(--border);
  padding: 14px 48px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.2s;
  width: 260px;
}

.menu-btn:hover {
  transform: translateY(-2px);
  border-color: var(--text-dim);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.menu-btn.primary {
  background: #39ff14;
  color: #000;
  border-color: #39ff14;
}

.menu-btn.primary:hover {
  box-shadow: 0 4px 24px rgba(57, 255, 20, 0.4);
  border-color: #39ff14;
}

#play-btn {
  background: #39ff14;
  border-color: #39ff14;
}

#play-btn:hover {
  box-shadow: 0 4px 24px rgba(57, 255, 20, 0.4);
  border-color: #39ff14;
}

.menu-btn.primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#menu-options-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
#menu-options-panel.hidden { display: none; }

/* Stone-long buttons inside the options panels */
#menu-options-panel .menu-btn,
#menu-options-panel #menu-exit-btn,
#pause-options-panel .pause-btn {
  background: url("CARD%20ASSETS%20V2/BUTTON_STONE_LONG@2x.png") center/contain no-repeat;
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  padding: 14px 28px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
  width: auto;
  min-width: 220px;
  align-self: center;
}

#menu-options-panel .menu-btn:hover,
#menu-options-panel #menu-exit-btn:hover,
#pause-options-panel .pause-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: none;
}
.menu-options-title {
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 4px;
}

/* ── Deck Builder ───────────────────────────────── */
#deckbuilder-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  background: var(--bg);
  overflow: hidden;
}

#db-canvas {
  --card-w: 110px;
  --card-h: 154px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 474px;
  height: 894px;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%) scale(var(--canvas-scale, 1));
  transform-origin: center center;
}

#db-canvas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: url("CARD%20ASSETS%20V2/BLACK_GRADIENT_HEADER_V2.png") top center / 100% auto no-repeat;
  height: 200px;
  pointer-events: none;
  z-index: 0;
}

#db-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: transparent;
  border-bottom: none;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

#db-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
}

#db-count {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.icon-btn {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px 16px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: 1px;
}

.icon-btn:hover { border-color: var(--text-dim); }

#db-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.db-action-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 30px;
  height: 30px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s;
}
.db-action-btn:hover {
  border-color: var(--text-dim);
}

/* Save / counter button uses stone-short, swaps to green when deck is full */
#db-save-btn.icon-btn {
  background: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT@2x.png") center/contain no-repeat;
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  padding: 10px 28px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}

#db-save-btn.icon-btn:disabled {
  opacity: 1;
  filter: brightness(0.85);
  cursor: default;
}

#db-save-btn.icon-btn:not(:disabled):hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  border-color: transparent;
}

#db-save-btn.icon-btn.db-save-ready {
  background-image: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT_GREEN@2x.png");
  color: #fff;
}

#db-save-btn.icon-btn.db-save-ready:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Deck builder confirm dialogs (back without saving, clear deck) */
#db-back-confirm,
#db-clear-confirm,
#db-warning {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(3px);
}

#db-back-confirm.hidden,
#db-clear-confirm.hidden,
#db-warning.hidden { display: none; }

#db-back-confirm-box,
#db-clear-confirm-box,
#db-warning-box {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px;
  text-align: center;
  max-width: 360px;
}

#db-back-confirm-msg,
#db-clear-confirm-msg,
#db-warning-msg {
  color: var(--text);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.5;
  margin: 0 0 20px;
}

#db-back-confirm-buttons,
#db-clear-confirm-buttons,
#db-warning-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

#db-back-confirm-buttons .menu-btn,
#db-clear-confirm-buttons .menu-btn,
#db-warning-buttons .menu-btn {
  flex: 1;
  min-width: 110px;
  padding: 10px 16px;
  font-size: 13px;
}

#db-pool {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-content: start;
  justify-items: stretch;
  box-sizing: border-box;
}

#db-pool::-webkit-scrollbar { width: 4px; }
#db-pool::-webkit-scrollbar-track { background: var(--bg); }
#db-pool::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

#db-deck {
  height: 180px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 8px;
  box-sizing: border-box;
  flex-shrink: 0;
}

#db-deck-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

#db-deck-cards {
  display: grid;
  grid-template-columns: repeat(4, 110px);
  gap: 4px;
  justify-content: center;
}

.db-deck-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  text-transform: uppercase;
}

.db-deck-chip.empty {
  cursor: default;
  background: var(--bg);
  opacity: 0.5;
}

.db-deck-chip:not(.empty):hover { border-color: var(--enemy); }
.db-deck-chip .chip-icon { font-size: 14px; }
.db-deck-chip .chip-power { color: #39ff14; font-weight: 800; }

/* Pool card in deck builder — V2 layered */
.db-card {
  --card-w: 100cqi;
  --card-h: calc(100cqi * 1.4);
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 5 / 7;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.3s ease-out, filter 0.2s, box-shadow 0.2s;
  will-change: transform;
  user-select: none;
  position: relative;
}

.db-card:hover {
  filter: brightness(1.1);
}

.db-card.selected {
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.6), 0 0 0 2px #39ff14;
  border-radius: 9% 5.5% 5.5% 5.5%;
}

.db-card.deck-full-flash {
  animation: deck-full-red 0.4s ease-out;
}

@keyframes deck-full-red {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.8), 0 0 0 2px var(--enemy); }
}

.db-toggle-btn {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 5;
}
.db-toggle-btn.toggle-deck-full-flash {
  animation: toggle-btn-red 0.4s ease-out;
}

@keyframes toggle-btn-red {
  0%, 100% {
    background: rgba(0, 0, 0, 0.75);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow: none;
  }
  50% {
    background: var(--enemy);
    border-color: var(--enemy);
    color: #fff;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
  }
}

.db-toggle-btn:hover {
  border-color: #fff;
  background: rgba(0, 0, 0, 0.9);
}
.db-card.selected .db-toggle-btn {
  background: #39ff14;
  color: #000;
  border-color: #39ff14;
}

/* ── Level Select ────────────────────────────────── */
#level-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  background: var(--bg);
  overflow: hidden;
}

#lvl-canvas {
  --card-w: 110px;
  --card-h: 154px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 474px;
  height: 894px;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%) scale(var(--canvas-scale, 1));
  transform-origin: center center;
  background: url("CARD%20ASSETS%20V2/HOME%20SCREEN%20BACKGROUND@2x.png") center/cover no-repeat;
}

#lvl-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
  flex-shrink: 0;
}

#lvl-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
}

#lvl-spacer {
  width: 60px; /* balance the BACK button */
}

#lvl-grid {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-content: start;
  box-sizing: border-box;
}

#lvl-grid::-webkit-scrollbar { width: 4px; }
#lvl-grid::-webkit-scrollbar-track { background: var(--bg); }
#lvl-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.lvl-tier-header {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-align: center;
  padding: 10px 0 2px;
}
.lvl-tier-header.locked { opacity: 1; }

.lvl-tier-row {
  display: grid;
  grid-template-columns: repeat(4, 110px);
  gap: 6px;
  margin-bottom: 4px;
  justify-content: center;
}
.lvl-tier-row.locked { opacity: 1; }

.lvl-card {
  width: var(--card-w);
  height: var(--card-h);
  box-sizing: border-box;
  border-radius: 10px;
  border: 2px solid var(--border);
  background-color: var(--surface2);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 4px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.2s, box-shadow 0.2s;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.lvl-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
  z-index: 0;
}

.lvl-card > * {
  position: relative;
  z-index: 1;
}

.lvl-completed-check {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 16px;
  z-index: 2;
}

.lvl-card:hover {
  transform: translateY(-4px);
  border-color: var(--faction-color, var(--hero));
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

.lvl-card.completed {
  border-color: var(--faction-color, var(--hero));
  opacity: 0.85;
}

.lvl-card.locked {
  opacity: 1;
  cursor: default;
  border-color: transparent;
  background-color: transparent;
}

.lvl-card.locked::before {
  display: none;
}
.lvl-card.locked:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

.lvl-faction-badge {
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1.5px;
  margin-bottom: 2px;
}

.lvl-icon {
  font-size: 22px;
  margin-bottom: 2px;
}

.lvl-name {
  font-size: 7px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.lvl-id {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  -webkit-text-stroke: 1.5px #000;
  paint-order: stroke fill;
  pointer-events: none;
  z-index: 1;
}

/* ── Level Detail Overlay ────────────────────────── */
#level-detail {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  backdrop-filter: blur(4px);
  animation: detail-fade-in 0.2s ease;
}

#level-detail.hidden { display: none; }

#level-detail-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 80%;
  max-width: 480px;
}

#level-detail-content {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#ld-art {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: var(--surface2);
  position: relative;
}

#ld-art-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  padding: 0 16px;
}

#ld-name {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 4px;
  margin: 0 0 4px;
  color: #fff;
  text-transform: uppercase;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
}

#ld-id {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #fff;
  -webkit-text-stroke: 1.5px #000;
  paint-order: stroke fill;
}

#ld-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 24px 24px;
  color: #fff;
  text-align: center;
}

#ld-threat {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#ld-scene-intro {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  max-width: 280px;
}

#ld-scene-intro:empty { display: none; }

#ld-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

/* Level-detail buttons — stone-short (BACK) and stone-short-green (FIGHT) */
#ld-back-btn,
#ld-fight-btn {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  border-radius: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}

#ld-back-btn {
  background-image: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT@2x.png");
  font-size: 14px;
  padding: 12px 32px;
}

#ld-fight-btn {
  background-image: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT_GREEN@2x.png");
  font-size: 16px;
  padding: 12px 44px;
}

#ld-back-btn:hover,
#ld-fight-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ── Top Bar ─────────────────────────────────────── */
#game {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  background: var(--bg);
  overflow: hidden;
}

#game-canvas {
  --card-w: 110px;
  --card-h: 154px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 474px;
  height: 894px;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%) scale(var(--canvas-scale, 1));
  transform-origin: center center;
  background: url("CARD%20ASSETS%20V2/Game_Background_V2.png") center/cover no-repeat;
}

#top-bar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: transparent;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
}

#turn-tracker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 6px;
  pointer-events: none;
}

#turn-tracker .turn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #000;
  box-shadow: none;
  transition: background 0.25s, box-shadow 0.25s;
}

#turn-tracker .turn-dot.active {
  background: #39ff14;
  box-shadow:
    0 0 0 1px rgba(57, 255, 20, 0.4),
    0 0 6px rgba(57, 255, 20, 0.9),
    0 0 12px rgba(57, 255, 20, 0.6);
  animation: turn-dot-bump 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes turn-dot-bump {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.7); }
  100% { transform: scale(1); }
}

/* Current turn dot — slow gentle pulse to mark "we are here". */
#turn-tracker .turn-dot.current {
  animation: turn-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes turn-dot-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.35); }
}

#options-btn {
  font-size: 14px;
  background: #000;
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  order: 1;
  margin-left: auto;
}

#level-name-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: #000;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  cursor: default;
}

.energy-display {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT_GREEN@2x.png") center/contain no-repeat;
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 22px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  cursor: default;
}

#end-turn-btn {
  background: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT@2x.png") center/contain no-repeat;
  background-color: transparent;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 8px 22px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  transition: filter 0.15s, transform 0.15s;
}

#end-turn-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

#end-turn-btn:active { transform: translateY(0); }

#end-turn-btn.waiting {
  filter: grayscale(0.6) brightness(0.7);
  cursor: default;
  pointer-events: none;
}

/* When timer hits the warning threshold (≤5s), swap the ready button to the
   red stone variant and pulse it once as a visual nudge to hurry up. */
#turn-timer.warning #end-turn-btn {
  background-image: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT_RED.png");
  animation: ready-btn-warning-bump 350ms ease;
}
@keyframes ready-btn-warning-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ── Board Grid ─────────────────────────────────── */
#board {
  width: 474px;
  height: 684px;
  display: grid;
  grid-template-columns: repeat(4, 110px);
  grid-template-rows: 154px 154px 28px 154px 154px;
  gap: 6px;
  padding: 8px;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
}

/* Location score headers */
.loc-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: none;
  transition: opacity 0.3s;
}

/* Lane control state — uses dedicated button art */
.loc-header.lane-held,
.loc-header.lane-lost,
.loc-header.lane-open {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border: none;
  box-shadow: none;
}
.loc-header.lane-held { background-image: url("CARD%20ASSETS%20V2/HELD@2x.png"); }
.loc-header.lane-lost { background-image: url("CARD%20ASSETS%20V2/LOST@2x.png"); }
.loc-header.lane-open { background-image: url("CARD%20ASSETS%20V2/OPEN@2x.png"); }

/* Phase art (REVEAL / FIGHT) — same chrome treatment */
.loc-header.lane-phase-reveal,
.loc-header.lane-phase-fight {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border: none;
  box-shadow: none;
}
.loc-header.lane-phase-reveal,
.loc-header.lane-phase-fight {
  animation: lane-phase-fade-in 0.4s ease-out;
}
.loc-header.lane-phase-reveal { background-image: url("CARD%20ASSETS%20V2/REVEAL@2x.png"); }
.loc-header.lane-phase-fight  { background-image: url("CARD%20ASSETS%20V2/FIGHT@2x.png"); }

@keyframes lane-phase-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Staggered post-battle intro for the lane state buttons (HELD/LOST/OPEN) */
.loc-header.lane-state-intro {
  animation: lane-state-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.loc-header[data-index="0"].lane-state-intro { animation-delay: 0ms; }
.loc-header[data-index="1"].lane-state-intro { animation-delay: 500ms; }
.loc-header[data-index="2"].lane-state-intro { animation-delay: 1000ms; }
.loc-header[data-index="3"].lane-state-intro { animation-delay: 1500ms; }

@keyframes lane-state-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* Hide the text labels — the button art carries the wording */
.loc-header.lane-held .lane-state,
.loc-header.lane-lost .lane-state,
.loc-header.lane-open .lane-state,
.loc-header.lane-phase-reveal .phase-label,
.loc-header.lane-phase-fight .phase-label {
  display: none;
}

.phase-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-transform: uppercase;
}
/* ── Card Slots ─────────────────────────────────── */
.card-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: transparent;
  position: relative;
  min-height: 0;
}

.card-slot:has(.card) {
  border-color: transparent;
  background: transparent;
}

/* unrevealed locations */
.card-slot.unrevealed {
  opacity: 0.2;
  pointer-events: none;
}
.loc-header.unrevealed {
  opacity: 0.2;
}

/* drop target highlight */
.hero-slot.drag-over {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--hero);
  border-style: solid;
}

.hero-slot.drag-over-invalid {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--enemy);
  border-style: solid;
}

/* ── Cards ───────────────────────────────────────── */
.card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 10px;
  border: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: default;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  user-select: none;
}

.card .card-power {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card .card-name {
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  padding: 0 4px;
  line-height: 1.2;
  text-transform: uppercase;
}

.card .card-traits {
  font-size: 10.5px;
  color: var(--text-dim);
  text-align: center;
  padding: 0 3px;
  margin-top: 1px;
  line-height: 1.2;
}

.card .card-icon {
  font-size: 28px;
  margin-bottom: 2px;
}


.card.has-art .card-name {
  position: absolute;
  top: 4px;
  left: 5px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  text-align: left;
}

.card.has-art .card-traits {
  position: absolute;
  bottom: 4px;
  left: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-shadow: none;
}

.card.has-art .trait-pill {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
}

/* Inspect view V2 card */
#cd-card {
  --card-w: 100cqi;
  --card-h: calc(100cqi * 1.4);
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 5 / 7;
  margin: 0 auto 18px;
  position: relative;
}

#cd-card-art {
  position: absolute;
  inset: 0;
}

#cd-card-art .cd-card-v2 {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Specular highlight — Card_Specular_Highlights image revealed by a moving gradient mask */
#cd-specular {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("CARD%20ASSETS%20V2/Card_Specular_Highlights@2x.png") center/cover no-repeat;
  -webkit-mask: linear-gradient(
    var(--shine-angle, 135deg),
    transparent 30%,
    #fff 50%,
    transparent 70%
  );
          mask: linear-gradient(
    var(--shine-angle, 135deg),
    transparent 30%,
    #fff 50%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease-out;
  z-index: 10;
}

#card-detail-content.tilting #cd-specular {
  opacity: 1;
}

/* Hero cards */
.card.hero-card {
  background: linear-gradient(135deg, #1e3a5f, #1a2744);
  border-color: var(--hero);
}
.card.hero-card .card-power { background: var(--hero); color: #fff; }

/* Enemy cards */
.card.enemy-card {
  background: linear-gradient(135deg, #5f1e1e, #441a1a);
  border-color: var(--enemy);
}
.card.enemy-card .card-power { background: var(--enemy); color: #fff; }

/* Hand cards */
.card.hand-card {
  cursor: grab;
  background: linear-gradient(135deg, #1e3a5f, #1a2744);
  border-color: var(--hero);
  width: 100%;
  height: auto;
  aspect-ratio: 2.5 / 3.5;
}
.card.hand-card .card-power { background: var(--hero); color: #fff; }

.card.hand-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
  z-index: 10;
}

.card.hand-card.hand-drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(245, 197, 24, 0.3);
  transform: scale(1.05);
}

.card.hand-card.unplayable {
  cursor: grab;
}

.card.hand-card.unplayable .v2-stat {
  color: #ff4444;
}

.card.hand-card.unplayable:hover {
  transform: translateY(-4px);
}

.card.hand-card.dragging {
  opacity: 0;
}

/* Custom fully-opaque drag clone that follows the cursor */
.drag-clone {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: 1;
  transition: none;
  margin: 0;
  transform-origin: center center;
  animation: drag-clone-pickup 0.18s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes drag-clone-pickup {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

.hand-slot {
  width: 100%;
  aspect-ratio: 2.5 / 3.5;
  position: relative;
}

.hand-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("CARD%20ASSETS%20V2/EMPTY%20HAND%20SLOT@2x.png") center/contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

.hand-slot > .card.hand-card {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  z-index: 1;
}

/* Hand slide-out / slide-in (1-2-3-4 cadence on Ready / new turn) */
#hand-cards.slid-out .hand-slot > .card.hand-card {
  transform: translateY(50px);
}

#hand-cards.sliding-out .hand-slot:nth-child(1) > .card.hand-card { animation: hand-slide-down 0.5s cubic-bezier(0.4, 0, 0.2, 1)   0ms forwards; }
#hand-cards.sliding-out .hand-slot:nth-child(2) > .card.hand-card { animation: hand-slide-down 0.5s cubic-bezier(0.4, 0, 0.2, 1) 100ms forwards; }
#hand-cards.sliding-out .hand-slot:nth-child(3) > .card.hand-card { animation: hand-slide-down 0.5s cubic-bezier(0.4, 0, 0.2, 1) 200ms forwards; }
#hand-cards.sliding-out .hand-slot:nth-child(4) > .card.hand-card { animation: hand-slide-down 0.5s cubic-bezier(0.4, 0, 0.2, 1) 300ms forwards; }

#hand-cards.sliding-in .hand-slot:nth-child(1) > .card.hand-card { animation: hand-slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1)   0ms both; }
#hand-cards.sliding-in .hand-slot:nth-child(2) > .card.hand-card { animation: hand-slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 100ms both; }
#hand-cards.sliding-in .hand-slot:nth-child(3) > .card.hand-card { animation: hand-slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 200ms both; }
#hand-cards.sliding-in .hand-slot:nth-child(4) > .card.hand-card { animation: hand-slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }

@keyframes hand-slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(50px); }
}

@keyframes hand-slide-up {
  from { transform: translateY(50px); }
  to   { transform: translateY(0); }
}

/* Played card on board — fill the slot */
.card.played {
  width: 100%;
  height: 100%;
}

.card.played .card-power { width: 20px; height: 20px; font-size: 11px; top: -4px; right: -4px; }
.card.played .card-icon { font-size: 24px; }
.card.played .card-name { font-size: 9px; }
.card.played .card-traits { font-size: 9px; }

/* power boosted */
.card .card-power.boosted {
  background: var(--win);
}

/* power damaged */
.card .card-power.damaged {
  background: #f59e0b;
}

/* pulse animation only on change */
.card .card-power.power-changed {
  animation: pulse-boost 0.4s ease;
}

/* card dead (0 power) */
.card .card-power.dead {
  background: #6b7280;
}

.card:has(.card-power.dead) {
  opacity: 0.45;
  filter: grayscale(0.6);
}

/* ── V2 Layered Card ─────────────────────────────────── */
.card-v2 {
  background: transparent !important;
  border: none !important;
  border-radius: 9% 5.5% 5.5% 5.5%;
  box-shadow: 0 0 0 2px #000, 0 4px 10px rgba(0, 0, 0, 0.45);
  overflow: visible;
}

.card-v2 .v2-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

.card-v2 .v2-stat {
  position: absolute;
  top: 3.5%;
  right: 9%;
  color: #fff;
  font-weight: 900;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: calc(var(--card-w) * 0.156);
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.card-v2 .v2-name {
  position: absolute;
  bottom: 10.95%;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: calc(var(--card-w) * 0.085);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
  z-index: 2;
}

.card-v2 .v2-traits {
  position: absolute;
  bottom: 4.5%;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 300;
  font-size: calc(var(--card-w) * 0.0465);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
  z-index: 2;
}

.card-v2 .v2-traits span + span { margin-left: 8px; }

.card-v2 .v2-stat.power-changed {
  animation: pulse-boost 0.4s ease;
}

/* death overlay: shown only on dead cards */
.card-v2 .v2-death { display: none; }
.card-v2.v2-dead .v2-death { display: block; }

/* swap to the death frame when the card is in dead state */
.card-v2 .v2-frame-death { display: none; }
.card-v2.v2-dead .v2-frame-default { display: none; }
.card-v2.v2-dead .v2-frame-death { display: block; }

/* face-down: hide all V2 content except the face-down image */
.card-v2 .v2-facedown { display: none; }

.card-v2.face-down .v2-layer:not(.v2-facedown),
.card-v2.face-down .v2-name,
.card-v2.face-down .v2-traits,
.card-v2.face-down .v2-stat {
  display: none;
}
.card-v2.face-down .v2-facedown { display: block; }
.card-v2.face-down { background: transparent !important; border: none !important; }
.card-v2.face-down::after { display: none; }

@keyframes pulse-boost {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* card enter animation */
.card.card-enter {
  animation: card-pop 0.35s ease;
}

@keyframes card-pop {
  0% { opacity: 0; transform: scale(0.5) translateY(20px); }
  60% { transform: scale(1.1) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.card.hand-deal {
  animation: hand-deal-in 0.35s ease-out;
}

@keyframes hand-deal-in {
  0%   { opacity: 0; transform: translateY(80px) rotate(8deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* ── Turn Timer ──────────────────────────────────── */
#turn-timer {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
}

#turn-timer.hidden { display: none; }

/* Fade the timer + energy + ready button in when the play window opens.
   Triggers each time the element re-enters layout (i.e. .hidden removed). */
#turn-timer:not(.hidden) { animation: turn-timer-fade-in 400ms ease both; }
@keyframes turn-timer-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Turn-start text overlay — fades in, holds, fades out across its 2s lifetime. */
.turn-gif-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  animation: turn-gif-fade 2000ms ease both;
}
.turn-gif-overlay img {
  max-width: 80%;
  max-height: 60%;
  pointer-events: none;
  transform: translateY(-70px);
}
@keyframes turn-gif-fade {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

#board.timer-active .loc-header { display: none; }

/* Pin every grid child to an explicit row so auto-placement can't reflow
   when row 3's contents (loc-headers, timer) toggle display. */
.enemy-slot.back-slot  { grid-row: 1; }
.enemy-slot.front-slot { grid-row: 2; }
.loc-header            { grid-row: 3; }
.hero-slot.front-slot  { grid-row: 4; }
.hero-slot.back-slot   { grid-row: 5; }
.card-slot[data-location="0"] { grid-column: 1; }
.card-slot[data-location="1"] { grid-column: 2; }
.card-slot[data-location="2"] { grid-column: 3; }
.card-slot[data-location="3"] { grid-column: 4; }
.loc-header[data-index="0"] { grid-column: 1; }
.loc-header[data-index="1"] { grid-column: 2; }
.loc-header[data-index="2"] { grid-column: 3; }
.loc-header[data-index="3"] { grid-column: 4; }

#turn-timer #energy-btn,
#turn-timer #end-turn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin-top: -4px;
  /* Asymmetric padding shifts the flex-centered text up 2px while keeping the
     padding-box (and so the centered background image) the same total height. */
  padding: 7px 22px 9px;
}
#turn-timer #energy-btn { grid-column: 1; }
#turn-timer #end-turn-btn { grid-column: 4; }

.timer-middle {
  grid-column: 2 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  margin-top: -3px;
}

.turn-timer-bar {
  flex: 1;
  height: 9px;
  position: relative;
  overflow: hidden;
  border: 1px solid #000;
  border-radius: 2px;
}

.turn-timer-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000;
  transition: transform 0.1s linear;
  will-change: transform;
}

.turn-timer-bar-left .turn-timer-fill { transform-origin: right center; }
.turn-timer-bar-right .turn-timer-fill { transform-origin: left center; }

#turn-timer-value {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
  min-width: 28px;
  text-align: center;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transform: translateY(-1px);
}

#turn-timer.warning #turn-timer-value { color: #ff4444; }
#turn-timer.warning .turn-timer-fill { background: #ff4444; }
#turn-timer.warning .timer-middle { border-color: #ff4444; }

/* ── Hand ────────────────────────────────────────── */
#hand {
  height: 170px;
  padding: 8px;
  background: transparent;
  box-sizing: border-box;
  flex-shrink: 0;
}

#hand-cards {
  display: grid;
  grid-template-columns: repeat(4, 110px);
  gap: 6px;
  justify-content: center;
}

/* ── Game Over ───────────────────────────────────── */
#game-over {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
}

#game-over.hidden { display: none; }

#game-over-content {
  text-align: center;
  padding: 40px 60px;
  background: transparent;
  border: none;
  border-radius: 0;
}

#game-over-title {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 8px;
  text-transform: uppercase;
}

#game-over-title.win { color: var(--win); }
#game-over-title.lose { color: var(--lose); }
#game-over-title.draw { color: var(--draw); }

#game-over-title.win img,
#game-over-title.lose img {
  display: block;
  margin: 0 auto;
  max-width: min(420px, 80vw);
  height: auto;
  /* Organic idle motion — three independent animations on the individual
     transform properties (scale, rotate, translate) so they compose instead
     of overriding each other. Different loop times = organic feel. */
  animation:
    go-breathe 3.7s ease-in-out infinite,
    go-tilt    5.1s ease-in-out infinite,
    go-float   4.3s ease-in-out infinite;
}
@keyframes go-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.04; }
}
@keyframes go-tilt {
  0%, 100% { rotate: -2deg; }
  50%      { rotate: 2deg; }
}
@keyframes go-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

#game-over-detail {
  color: var(--text-dim);
  margin-bottom: 24px;
  font-size: 14px;
}

#game-over-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

#play-again-btn, #main-menu-btn {
  background: url("CARD%20ASSETS%20V2/BUTTON_STONE_LONG@2x.png") center/contain no-repeat;
  background-color: transparent;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 14px 38px;
  min-width: 180px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  transition: filter 0.15s, transform 0.15s;
}
#play-again-btn:hover, #main-menu-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
#play-again-btn:active, #main-menu-btn:active { transform: translateY(0); }


/* ── Card Highlight ──────────────────────────────── */
.card.card-highlight {
  box-shadow: 0 0 14px rgba(245, 197, 24, 0.5);
  border: 1px solid var(--accent) !important;
}

/* ── Trait Flash (active fill behind the trait icon + card bump) ─────────── */
.card-v2 .v2-trait-active { display: none; }

.card-v2.v2-trait-flash-l .v2-trait-active-l,
.card-v2.v2-trait-flash-r .v2-trait-active-r {
  display: block;
  opacity: 0;
  animation: v2-trait-active-pulse 1.1s ease-out forwards;
}

.card-v2.v2-trait-flash-l,
.card-v2.v2-trait-flash-r {
  animation: v2-trait-card-bump 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
  z-index: 5;
}

@keyframes v2-trait-active-pulse {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes v2-trait-card-bump {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.08); }
  75%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Lane dimming during reveal/battle ───────────── */
.lane-dimmed {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.card-slot:not(.lane-dimmed),
.loc-header:not(.lane-dimmed) {
  transition: opacity 0.3s ease;
}

/* ── Face-down Card ──────────────────────────────── */
.card.face-down {
  background: linear-gradient(135deg, #2a1a3e, #1a1230) !important;
  border-color: #4a3568 !important;
}

.card.face-down .card-icon,
.card.face-down .card-name,
.card.face-down .card-traits,
.card.face-down .card-power {
  visibility: hidden;
}

.card.face-down::after {
  content: "?";
  position: absolute;
  font-size: 28px;
  font-weight: 900;
  color: #6b5a8a;
}

/* card flip animation */
.card.card-flip {
  animation: card-flip-anim 0.4s ease;
}

@keyframes card-flip-anim {
  0% { transform: scaleX(1); }
  50% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* combat bump — quick jab per damage tick */
.card.clash-bump-up {
  animation: bump-up 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.card.clash-bump-down {
  animation: bump-down 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bump-up {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-20px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes bump-down {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(20px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}

/* ── Pause Menu Overlay ──────────────────────────── */
#pause-menu {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 95;
  backdrop-filter: blur(4px);
  animation: detail-fade-in 0.2s ease;
}

#pause-menu.hidden { display: none; }

#pause-menu-content,
#pause-options-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 220px;
}

#pause-options-panel.hidden { display: none; }

.pause-btn {
  background: url("CARD%20ASSETS%20V2/BUTTON_STONE_LONG@2x.png") center/contain no-repeat;
  background-color: transparent;
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 14px 28px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  min-width: 220px;
  transition: filter 0.15s, transform 0.15s;
}

.pause-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

#pause-options-title {
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 4px;
}

.options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
}

.option-toggle {
  background: var(--surface2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 4px 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: default;
}

/* ── Volume Sliders ─────────────────────────────── */
.vol-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 6px;
  margin: 0 10px;
  border-radius: 3px;
  background: var(--surface2);
  outline: none;
  cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #39ff14;
  border: 2px solid var(--text, #fff);
  cursor: pointer;
}
.vol-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #39ff14;
  border: 2px solid var(--text, #fff);
  cursor: pointer;
}
.vol-value {
  min-width: 28px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

/* ── Card Detail Overlay ─────────────────────────── */
#card-detail {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  backdrop-filter: blur(4px);
  animation: detail-fade-in 0.2s ease;
}

#card-detail.hidden { display: none; }

/* Mirrored turn timer inside inspect overlay — shown only while a turn timer is running */
#cd-timer {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  padding: 8px 18px;
  border-radius: 999px;
  display: none;
  z-index: 100;
  pointer-events: none;
}

body.timer-running #cd-timer { display: block; }
#cd-timer.warning {
  color: #ff4444;
  border-color: rgba(255, 68, 68, 0.6);
}

@keyframes detail-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

#card-detail-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(320px, 85vw);
}

#card-detail-content {
  position: relative;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  transition: transform 0.3s ease-out;
  will-change: transform;
}


#cd-traits-list {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: calc(6% + 59px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  z-index: 4;
  pointer-events: none;
}

.cd-trait {
  background: rgba(0, 0, 0, 0.78);
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  backdrop-filter: blur(2px);
}

.cd-trait-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 1px;
  letter-spacing: 1px;
  text-shadow: none;
}

.cd-trait-timing {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
  text-shadow: none;
}

.cd-trait-desc {
  font-size: 11px;
  color: #fff;
  line-height: 1.35;
  text-shadow: none;
}

#cd-buttons-row {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

/* Card inspect buttons — peek (stone-square), art (stone-long), close (stone-short) */
#cd-peek-btn,
#cd-art-btn,
#cd-close {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  border-radius: 0;
  height: 56px;
  padding: 0 28px;
  cursor: pointer;
  color: #fff;
  line-height: 1;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s, transform 0.15s;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

#cd-peek-btn:hover,
#cd-art-btn:hover,
#cd-close:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

#cd-peek-btn {
  background-image: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT@2x.png");
  font-size: 22px;
}

#cd-art-btn {
  background-image: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT@2x.png");
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#cd-art-btn.hidden { display: none; }

#cd-art-label {
  white-space: nowrap;
}

#cd-deck-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s;
  line-height: 1;
  color: var(--text);
}
#cd-deck-btn:hover { border-color: var(--text-dim); }
#cd-deck-btn.in-deck { color: var(--enemy); }
#cd-deck-btn.deck-full-flash {
  animation: deck-full-red 0.4s ease-out;
}

#cd-close {
  background-image: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT@2x.png");
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#card-detail-content.peeking #cd-traits-list {
  visibility: hidden;
}

/* XP bar fill colors matching card tiers (still used by post-match recap) */
.cd-xp-fill.card-lvl-bronze, .xp-recap-xp-fill.card-lvl-bronze { background: #cd7f32; }
.cd-xp-fill.card-lvl-silver, .xp-recap-xp-fill.card-lvl-silver { background: #c0c0c0; }
.cd-xp-fill.card-lvl-gold, .xp-recap-xp-fill.card-lvl-gold { background: #ffd700; }
.cd-xp-fill.card-lvl-holo, .xp-recap-xp-fill.card-lvl-holo { background: linear-gradient(90deg, #e0aaff, #aaffe0, #aae0ff); }
.cd-xp-fill.card-lvl-max, .xp-recap-xp-fill.card-lvl-max { background: linear-gradient(90deg, #ffd700, #ffec80, #ffd700); }

/* ── XP Recap Carousel ──────────────────────────── */
#xp-recap {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(6px);
  animation: detail-fade-in 0.3s ease;
}

#xp-recap.hidden { display: none; }

#xp-recap-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}

.xp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface2);
  transition: background 0.3s, transform 0.3s;
}

.xp-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

.xp-dot.done {
  background: var(--text-dim);
}

#xp-recap-card {
  width: 280px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

#xp-recap-card.xp-recap-slide-out {
  transform: translateX(-120%);
  opacity: 0;
}

#xp-recap-card.xp-recap-slide-in {
  animation: xp-slide-in 0.3s ease-out;
}

@keyframes xp-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.xp-recap-detail {
  position: relative;
  text-align: center;
  padding: 28px 24px 20px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.xp-recap-detail.has-art {
  background-size: cover;
  background-position: center;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 160px;
}

.xp-recap-detail.has-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
  pointer-events: none;
}

.xp-recap-detail.has-art > * {
  position: relative;
  z-index: 1;
}

.xp-recap-icon {
  font-size: 48px;
  margin-bottom: 4px;
}

.xp-recap-name {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.xp-recap-power {
  position: absolute;
  top: 12px;
  right: 16px;
  background: var(--accent);
  color: #000;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  z-index: 2;
}

.xp-recap-traits {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.xp-recap-detail.has-art .xp-recap-traits {
  color: rgba(255,255,255,0.7);
}

.xp-recap-delta {
  font-size: 18px;
  font-weight: 800;
  color: #4caf50;
  margin-bottom: 12px;
  text-shadow: 0 0 10px rgba(76,175,80,0.4);
}

.xp-recap-xp-section {
  padding: 0 4px;
}

.xp-recap-xp-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.xp-recap-lvl {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 1px;
}

.xp-recap-detail.has-art .xp-recap-lvl {
  color: #fff;
}

.xp-recap-xp-vals {
  font-size: 10px;
  color: var(--text-dim);
}

.xp-recap-detail.has-art .xp-recap-xp-vals {
  color: rgba(255,255,255,0.7);
}

.xp-recap-xp-track {
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}

.xp-recap-detail.has-art .xp-recap-xp-track {
  background: rgba(255,255,255,0.15);
}

.xp-recap-xp-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.8s ease-out;
}

.xp-level-up-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 28px;
  font-weight: 900;
  color: #ffd700;
  text-shadow: 0 0 20px rgba(255,215,0,0.6), 0 0 40px rgba(255,215,0,0.3);
  letter-spacing: 3px;
  z-index: 10;
  animation: level-up-pop 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes level-up-pop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  60% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.xp-recap-player-slide {
  background: var(--surface);
}

.xp-recap-player-icon {
  font-size: 56px;
  margin-bottom: 8px;
}

.xp-recap-unlock {
  font-size: 12px;
  font-weight: 700;
  color: #4caf50;
  margin-top: 8px;
  letter-spacing: 0.5px;
  text-align: center;
  animation: recap-unlock-fade 0.4s ease-out forwards;
}

@keyframes recap-unlock-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

#xp-recap-hint {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 1px;
  min-height: 18px;
}

#xp-recap-skip-all {
  margin-top: 10px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--text-dim);
  padding: 6px 24px;
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: inherit;
}

#xp-recap-skip-all:hover {
  color: var(--text);
  border-color: var(--text);
}

#xp-recap-continue {
  margin-top: 16px;
  background: var(--accent);
  color: #000;
  border: none;
  padding: 8px 32px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#xp-recap-continue:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245, 197, 24, 0.3);
}

#xp-recap-continue.hidden { display: none; }

/* ── Profile Screen ──────────────────────────────── */
#profile-screen {
  width: 100%;
  max-width: 500px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ── Patch Notes ─────────────────────────────────── */
#patch-notes-screen {
  width: 100%;
  max-width: 500px;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

#pn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

#pn-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #39ff14;
}

#pn-spacer { width: 48px; }

#pn-content {
  padding: 20px 22px 60px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.pn-entry {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pn-version-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pn-version {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff;
  text-transform: uppercase;
}

.pn-date {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.pn-list {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: disc;
  color: var(--text);
}

.pn-list li {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 6px;
}

.pn-list li::marker {
  color: #39ff14;
}

/* Grouped patch notes — subheadings inside a single version entry. */
.pn-group {
  margin-top: 6px;
}
.pn-group + .pn-group {
  margin-top: 14px;
}
.pn-group-title {
  margin: 0 0 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #39ff14;
}

#prof-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

#prof-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #39ff14;
}

#prof-spacer { width: 48px; }

#prof-content {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#prof-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

#prof-name {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
}

#prof-edit-name-btn {
  font-size: 18px;
  padding: 4px 8px;
  color: var(--text-dim);
}

#prof-rank {
  font-size: 14px;
  color: #39ff14;
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
}

#prof-level-row {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

#prof-xp-bar {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.prof-xp-track {
  width: 100%;
  height: 12px;
  background: var(--surface2);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.prof-xp-fill {
  height: 100%;
  background: #39ff14;
  border-radius: 6px;
  transition: width 0.5s ease-out;
}

#prof-xp-values {
  font-size: 13px;
  color: var(--text-dim);
}

.prof-section {
  width: 100%;
  max-width: 360px;
  margin-top: 8px;
}

.prof-section-title {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.prof-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 14px;
  color: var(--text);
}

#prof-prestige-btn {
  margin-top: 16px;
  background: url("CARD%20ASSETS%20V2/BUTTON_STONE_LONG@2x.png") center/contain no-repeat;
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  padding: 14px 28px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
  width: auto;
  min-width: 220px;
  align-self: center;
}

#prof-prestige-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: none;
}

.prof-unlock-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* ── Name Edit Dialog ────────────────────────────── */
#name-edit-dialog, #prestige-dialog, #level-up-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

#name-edit-content, #prestige-content, #level-up-content {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  max-width: 360px;
  width: 90%;
}

#name-edit-content h2, #prestige-content h2, #level-up-content h1 {
  font-size: 20px;
  color: #39ff14;
  margin-bottom: 16px;
  letter-spacing: 2px;
}

#prestige-content p, #level-up-content p {
  color: var(--text-dim);
  margin-bottom: 20px;
  font-size: 14px;
}

#level-up-content h1 {
  font-size: 28px;
  color: var(--win);
}

#level-up-content p {
  color: var(--accent);
  font-weight: 600;
}

#name-edit-input {
  width: 100%;
  padding: 10px 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
  margin-bottom: 20px;
  outline: none;
  text-align: center;
}

#name-edit-input:focus {
  border-color: #39ff14;
}

#name-edit-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

#name-edit-buttons .menu-btn {
  width: auto;
  min-width: 100px;
  padding: 10px 24px;
  font-size: 14px;
}

/* ── Locked Cards (Deck Builder) ─────────────────── */
.db-card.card-locked {
  opacity: 0.4;
  filter: grayscale(0.7);
  cursor: default;
}

.db-card.card-locked:hover {
  filter: grayscale(0.7);
  transform: none;
}

.db-lock-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

/* ── Card Detail Unlock Banner ───────────────────── */
#cd-unlock-banner {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 1px;
  text-align: center;
  margin-top: 8px;
}

/* ── Level Detail XP Reward ──────────────────────── */
.ld-xp-reward {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 8px;
  letter-spacing: 1px;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 480px) {
  :root { --card-w: 64px; --card-h: 90px; }
  .loc-header .lane-state { font-size: 11px; letter-spacing: 1px; }
  #end-turn-btn { font-size: 12px; }
  #menu-title { font-size: 36px; }
  .menu-btn { width: 220px; padding: 12px 32px; font-size: 14px; }
}

/* ── Campaign Select ──────────────────────────────────── */
#campaign-select-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  background: var(--bg);
  overflow: hidden;
}

#campaign-select-screen.hidden { display: none; }

#csel-canvas {
  --card-w: 110px;
  --card-h: 154px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 474px;
  height: 894px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%) scale(var(--canvas-scale, 1));
  transform-origin: center center;
  background: url("CARD%20ASSETS%20V2/HOME%20SCREEN%20BACKGROUND@2x.png") center/cover no-repeat;
}

#csel-header {
  height: 60px;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
}

/* Stone-short buttons (campaign select BACK, deck builder BACK + DELETE, level select BACK) */
#csel-back-btn.icon-btn,
#db-back-btn.icon-btn,
#db-clear-btn.icon-btn,
#lvl-back-btn.icon-btn {
  background: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT@2x.png") center/contain no-repeat;
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  padding: 10px 28px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}

#csel-back-btn.icon-btn:hover,
#db-back-btn.icon-btn:hover,
#db-clear-btn.icon-btn:hover,
#lvl-back-btn.icon-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  border-color: transparent;
}

/* DELETE uses the red stone variant */
#db-clear-btn.icon-btn {
  background-image: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT_RED.png");
}

/* Card area — portrait art card (5:7, matches in-game card ratio) */
#csel-card-area {
  width: 380px;
  height: 380px;
  margin-top: 36px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.csel-card {
  width: 100%;
  height: 100%;
}

.csel-card-art {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
}

.csel-card-bg {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.csel-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("CARD%20ASSETS%20V2/STORY_IMAGE_FRAME@2x.png") no-repeat center;
  background-size: 100% 100%;
  pointer-events: none;
}

.csel-card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(6% + 1px);
  text-align: center;
  color: #000;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
}

/* Below-card text info */
#csel-info {
  width: 380px;
  text-align: center;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

#csel-label {
  display: none;
}

#csel-campaign-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1.1;
  text-transform: uppercase;
}

#csel-campaign-desc-text {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-top: 4px;
  padding: 0 5px;
}

#csel-completion {
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-top: 4px;
}

/* Nav row: ‹  SELECT  › */
#csel-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  margin-bottom: 40px;
  width: 380px;
  flex-shrink: 0;
}

#csel-select-btn {
  flex: 1;
  background: url("CARD%20ASSETS%20V2/BUTTON_STONE_LONG@2x.png") center/contain no-repeat;
  background-color: transparent;
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  padding: 14px 32px;
  border-radius: 0;
  width: auto;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}

#csel-select-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

#csel-select-btn:disabled {
  filter: grayscale(0.5) brightness(0.7);
  cursor: default;
  font-size: 14px;
  transform: none;
}

.csel-arrow-btn {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border: none;
  background: url("CARD%20ASSETS%20V2/BUTTON_UI_ARROW@2x.png") center/contain no-repeat;
  background-color: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  transition: filter 0.15s;
  padding: 0;
  animation: arrow-breathe 2.4s ease-in-out infinite;
}

#csel-prev-btn.csel-arrow-btn {
  animation-name: arrow-breathe-prev;
}

.csel-arrow-btn:disabled {
  opacity: 0.25;
  cursor: default;
  animation-play-state: paused;
}

.csel-arrow-btn:not(:disabled):hover {
  filter: brightness(1.1);
  animation-play-state: paused;
}

/* Both arrows drift toward the centre and back out together */
@keyframes arrow-breathe {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-4px); }
}

@keyframes arrow-breathe-prev {
  0%, 100% { transform: scaleX(-1) translateX(0); }
  50%      { transform: scaleX(-1) translateX(-4px); }
}

/* Dots — centered in the header */
#csel-dots {
  display: flex;
  gap: 8px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Scale dots within this screen only */
#csel-dots .xp-dot {
  width: 10px;
  height: 10px;
}

/* Slide animations */
@keyframes csel-in-right {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes csel-in-left {
  from { transform: translateX(-110%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.csel-slide-in-right { animation: csel-in-right 0.3s ease-out; }
.csel-slide-in-left  { animation: csel-in-left  0.3s ease-out; }


/* ── Tutorial overlay components ─────────────────────────────────── */
.tutorial-bubble {
  position: fixed;
  background: rgba(255, 255, 255, 0.96);
  color: #111;
  padding: 8px 14px;
  border-radius: 14px;
  max-width: 240px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.5px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 0 0 2px #000;
  z-index: 9000;
  pointer-events: none;
  animation: tutorial-bubble-float 3.6s ease-in-out infinite;
}
.tutorial-bubble.instructional {
  background: #fff;
  font-weight: 700;
}
@keyframes tutorial-bubble-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Pulsing white glow on the target slot/card the tutorial wants the player to touch. */
.tutorial-glow {
  position: relative;
  animation: tutorial-glow-pulse 1.4s ease-in-out infinite;
  z-index: 5;
}
@keyframes tutorial-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0.55),
      0 0 20px 6px rgba(255, 255, 255, 0.65),
      0 0 0 2px rgba(255, 255, 255, 0.9);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.0),
      0 0 36px 18px rgba(255, 255, 255, 0.85),
      0 0 0 2px rgba(255, 255, 255, 1);
  }
}

/* During tutorial play, hide the countdown bars (timer is paced by bubbles). */
#turn-timer.tutorial-mode .turn-timer-bar {
  visibility: hidden;
}

/* KO popup — dramatic bump over a dying card. */
.ko-popup {
  position: absolute;
  left: 50%;
  top: -10%;
  width: 110%;
  pointer-events: none;
  z-index: 200;
  transform-origin: center center;
  animation: ko-pop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}
@keyframes ko-pop {
  0%   { opacity: 0; transform: translateX(-5%) translateY(40px) scale(0.2) rotate(-18deg); }
  18%  { opacity: 1; transform: translateX(-5%) translateY(-20px) scale(1.5) rotate(8deg); }
  35%  { opacity: 1; transform: translateX(-5%) translateY(-30px) scale(1.15) rotate(-4deg); }
  50%  { opacity: 1; transform: translateX(-5%) translateY(-32px) scale(1.0) rotate(0deg); }
  80%  { opacity: 1; transform: translateX(-5%) translateY(-32px) scale(1.0) rotate(0deg); }
  100% { opacity: 0; transform: translateX(-5%) translateY(-60px) scale(0.9) rotate(0deg); }
}

/* REVIVE popup — mirror of KO with a softer, uplifting motion (no angry
   rotate shake). Same timing + scale beats so the two callouts feel
   like siblings. */
.revive-popup {
  position: absolute;
  left: 50%;
  top: -10%;
  width: 110%;
  pointer-events: none;
  z-index: 200;
  transform-origin: center center;
  animation: revive-pop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}
@keyframes revive-pop {
  0%   { opacity: 0; transform: translateX(-5%) translateY(40px) scale(0.2); }
  18%  { opacity: 1; transform: translateX(-5%) translateY(-20px) scale(1.5); }
  35%  { opacity: 1; transform: translateX(-5%) translateY(-30px) scale(1.15); }
  50%  { opacity: 1; transform: translateX(-5%) translateY(-32px) scale(1.0); }
  80%  { opacity: 1; transform: translateX(-5%) translateY(-32px) scale(1.0); }
  100% { opacity: 0; transform: translateX(-5%) translateY(-60px) scale(0.9); }
}

/* Skip-tutorials button on the tutorial level select screen */
.tutorial-skip-wrap {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

/* Tutorial-complete CTA on the BOOT CAMP screen (all 4 levels done) */
.tutorial-complete-wrap {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.tutorial-complete-msg {
  color: var(--text, #fff);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
}
#tutorial-complete-go {
  font-size: 18px;
  padding: 14px 48px;
}
#tutorial-skip-btn {
  font-size: 12px;
  padding: 10px 22px;
  opacity: 0.7;
}
#tutorial-skip-btn:hover { opacity: 1; }

/* Skip-tutorials confirmation dialog */
#tutorial-skip-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(3px);
}
.tutorial-skip-box {
  background: var(--surface, #1a1a1a);
  border: 2px solid var(--border, #fff);
  border-radius: 12px;
  padding: 28px 32px;
  text-align: center;
  max-width: 360px;
}
.tutorial-skip-msg {
  color: var(--text, #fff);
  font-size: 14px;
  letter-spacing: 0.5px;
  line-height: 1.5;
  margin: 0 0 22px;
}
.tutorial-skip-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.tutorial-skip-buttons .menu-btn {
  flex: 1;
  min-width: 110px;
  padding: 10px 16px;
  font-size: 13px;
}

/* Quick shake on the board when the player tries the wrong tutorial action. */
.tutorial-shake {
  animation: tutorial-shake-anim 0.35s ease;
}
@keyframes tutorial-shake-anim {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4px, 0); }
  40%  { transform: translate(4px, 0); }
  60%  { transform: translate(-3px, 0); }
  80%  { transform: translate(3px, 0); }
  100% { transform: translate(0, 0); }
}

/* ── Shop Screen ──────────────────────────────────────────── */
#shop-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    url("CARD%20ASSETS%20V2/SHOP_BACKGROUND.png") center/cover no-repeat,
    #000;
  z-index: 50;
  overflow: hidden;
}
#shop-screen.hidden { display: none; }

#shop-header {
  display: grid;
  grid-template-columns: 80px 1fr 110px;
  align-items: center;
  padding: 14px 16px;
  gap: 8px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.75), rgba(0,0,0,0));
}

#shop-back-btn {
  font-size: 12px;
  padding: 6px 12px;
  background: #000;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 1px;
  justify-self: start;
}

#shop-title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  letter-spacing: 3px;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px  1px 0 #000, 1px  1px 0 #000;
}

#shop-timer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  line-height: 1;
}
#shop-timer-label {
  font-size: 9px;
  color: #ccc;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
#shop-timer-value {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px  1px 0 #000, 1px  1px 0 #000;
}

#shop-cards {
  margin-top: auto;
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 16px;
  max-width: 460px;
  width: 100%;
  align-self: center;
}

.shop-card-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.shop-card-cell .card-v2 {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 220 / 308;
}

.shop-buy-btn {
  width: 100%;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT_GREEN@2x.png") center/contain no-repeat;
  background-color: transparent;
  border: none;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.shop-buy-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.shop-buy-btn:active { transform: translateY(0); }
.shop-buy-btn.owned {
  background-image: url("CARD%20ASSETS%20V2/BUTTON_STONE_SHORT@2x.png");
  filter: grayscale(0.5) brightness(0.7);
  cursor: default;
  pointer-events: none;
}