/* ============================================================
   CARDBORNE — STYLES
   Arcane Codex aesthetic: deep navy + gold, Cinzel display
   ============================================================ */

:root {
  --bg-0: #0a0814;
  --bg-1: #14102a;
  --bg-2: #1f1a3d;
  --gold-hot: #f0c849;
  --gold-soft: #d4a857;
  --gold-dim: #9a7838;            /* v0.3.2 — lifted from #7a5d2e for WCAG (3.5:1 on bg-2) */
  --ink: #e8e2d4;
  --ink-dim: #9a917e;
  --warn: #d4a857;                /* v0.3.2 — new token (was hardcoded in ui.js) */
  --danger: #e8623b;
  --good: #5fb878;
  --shadow: rgba(0,0,0,0.5);
  /* v0.3.2 — semantic ink tokens that retire repeated magic hexes */
  --parchment-ink: #1a1428;       /* dark text for light-fill badges */
  --parchment-warm: #d4c8a8;      /* elegiac sub-text */
  --ember-deep: #a83a1f;          /* burn badge fill */
  --shadow-lift: #8a76b3;         /* lifted shadow-type for high-contrast surfaces */
  --rare-c: #bcbcbc;
  --rare-u: #5fb878;
  --rare-r: #4ea3d9;
  --rare-e: #b873d6;
  --rare-l: #f0c849;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  /* iPad Safari fix: 100vh includes the URL bar, so the layout extends
     below the visible area. 100dvh tracks the actually-visible viewport. */
  height: 100vh;
  height: 100dvh;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* respect iPad home indicator + notch */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  box-sizing: border-box;
}

body {
  background:
    radial-gradient(ellipse at top, rgba(31,26,61,0.6), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(20,16,42,0.8), transparent 70%),
    var(--bg-0);
  background-attachment: fixed;
}

button {
  font-family: inherit; color: inherit;
  background: transparent; border: none; cursor: pointer;
  font-size: inherit;
}

/* ============================================================
   APP LAYOUT
   ============================================================ */
#app {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  position: relative;
  /* let middle row shrink */
  min-height: 0;
}

/* HUD top bar
   v1.1 — 4-column layout to accommodate the persistent shard tray
   between the title and the biome/crystals meta. */
#hud {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(31,26,61,0.95), rgba(20,16,42,0.85));
  border-bottom: 1px solid var(--gold-dim);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  position: relative;
  z-index: 5;
}

/* v1.1 — Persistent shard tray. 5 small shard icons, dim until earned,
   bright + glowing once owned. Lives in the HUD between title and meta
   so progress toward the Voidgate is always visible. */
.hud-shards {
  display: flex;
  gap: 5px;
  align-items: center;
}
.hud-shard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-dim);
  opacity: 0.32;
  filter: grayscale(0.6);
  transition: all 0.4s ease;
}
.hud-shard.earned {
  color: var(--shard-color, var(--gold-hot));
  opacity: 1;
  filter: none;
  text-shadow: 0 0 8px var(--shard-color, var(--gold-hot));
  animation: shard-pulse 3.2s ease-in-out infinite;
}
@keyframes shard-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@media (max-width: 500px) {
  .hud-shard { width: 12px; height: 12px; font-size: 11px; }
  .hud-shards { gap: 3px; }
}
#hud::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hot), transparent);
  opacity: 0.5;
}

.hud-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 0.25em;
  color: var(--gold-hot);
  font-weight: 600;
  text-shadow: 0 0 12px rgba(240,200,73,0.4);
}

.hud-meta {
  display: flex; gap: 16px; align-items: center;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
}
.hud-meta .biome { color: var(--gold-soft); }
.hud-meta .crystals { color: var(--gold-hot); }
.hud-meta .crystals::before { content: '◆ '; }

/* PARTY ROW */
#hudParty {
  display: flex; gap: 6px;
  padding: 6px 14px;
  background: rgba(10,8,20,0.85);
  border-bottom: 1px solid var(--gold-dim);
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  max-height: 56px;
}
.party-slot {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  background: rgba(31,26,61,0.6);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  min-width: 140px;
  font-size: 12px;
}
.party-slot.fainted { opacity: 0.4; }
.party-slot.statused { box-shadow: 0 0 0 1px var(--danger); }
.party-glyph { font-size: 20px; line-height: 1; }
.party-info { flex: 1; min-width: 0; }
.party-name {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.05em;
  font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.party-lvl { color: var(--ink-dim); font-size: 10px; }

/* HP / XP BARS */
.hp-bar {
  height: 6px;
  background: rgba(0,0,0,0.5);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.hp-bar.large { height: 8px; }
.hp-fill {
  height: 100%;
  background: var(--good);
  transition: width 0.4s ease;
  border-radius: 2px;
  box-shadow: 0 0 6px currentColor;
}
.hp-text {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  text-align: right;
  margin-top: 2px;
}
.xp-bar {
  height: 3px;
  background: rgba(0,0,0,0.4);
  margin-top: 4px;
  border-radius: 1px;
  overflow: hidden;
}
.xp-fill {
  height: 100%;
  background: var(--gold-hot);
  transition: width 0.6s ease;
}

/* ============================================================
   WORLD
   ============================================================ */
#worldWrap {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-0);
  padding: 8px;
  overflow: hidden;
  position: relative;
  /* CRITICAL: let this row shrink so the d-pad below stays in view */
  min-height: 0;
  min-width: 0;
}
#worldCanvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
  border: 1px solid var(--gold-dim);
  box-shadow:
    0 0 0 1px var(--bg-2),
    0 0 40px rgba(240,200,73,0.15),
    inset 0 0 60px rgba(0,0,0,0.4);
  cursor: pointer;
  /* defensive max — sizeCanvas() also constrains, but this is the safety net */
  max-width: 100%;
  max-height: 100%;
}

/* ============================================================
   BOTTOM CONTROL BAR
   ============================================================ */
#controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(0deg, rgba(31,26,61,0.95), rgba(20,16,42,0.85));
  border-top: 1px solid var(--gold-dim);
  position: relative;
  z-index: 4;
  flex-shrink: 0;
  /* Don't get hidden behind iPad home indicator */
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* D-pad */
#dpad {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 3px;
}
#dpad button {
  background: rgba(31,26,61,0.8);
  border: 1px solid var(--gold-dim);
  color: var(--gold-soft);
  font-size: 22px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.1s;
  touch-action: manipulation;
}
#dpad button:active {
  background: var(--gold-hot);
  color: var(--bg-0);
}
#dpad .empty { visibility: hidden; }

/* Menu buttons */
#menuBtns {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
}
.btn-menu {
  padding: 8px 14px;
  background: rgba(31,26,61,0.8);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  color: var(--gold-soft);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  transition: all 0.15s;
  text-transform: uppercase;
}
.btn-menu:hover {
  background: rgba(240,200,73,0.15);
  color: var(--gold-hot);
  border-color: var(--gold-hot);
}
.btn-menu:active { transform: scale(0.96); }

/* ============================================================
   GENERAL ACTION BUTTONS
   ============================================================ */
.btn-action {
  padding: 8px 16px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--gold-soft);
  border-radius: 3px;
  color: var(--gold-hot);
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-action:hover {
  background: linear-gradient(180deg, var(--gold-dim), var(--bg-2));
  color: var(--ink);
  box-shadow: 0 0 12px rgba(240,200,73,0.3);
}

/* ============================================================
   BATTLE
   ============================================================ */
#battleScreen {
  position: fixed; inset: 0;
  display: none;
  z-index: 50;
  background: var(--bg-0);
  flex-direction: column;
}
#battleScreen.active { display: flex; }

.battle-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, var(--bg2, #1f1a3d), var(--bg-0));
  opacity: 0.4;
  z-index: 0;
}
.battle-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(240,200,73,0.6), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(240,200,73,0.5), transparent),
    radial-gradient(2px 2px at 80% 20%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 90% 50%, rgba(240,200,73,0.4), transparent);
  opacity: 0.7;
  animation: stars 12s linear infinite;
}
@keyframes stars { from { background-position: 0 0; } to { background-position: 100px 100px; } }

.battle-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 24px;
  position: relative; z-index: 2;
}
.combatant { display: flex; }
.combatant.enemy { justify-content: flex-end; }
.combatant.player { justify-content: flex-start; align-items: flex-end; margin-top: 40px; }

/* CREATURE CARDS */
.creature-card {
  background: linear-gradient(180deg, rgba(31,26,61,0.95), rgba(20,16,42,0.95));
  border: 2px solid var(--type-color, var(--gold-dim));
  border-radius: 6px;
  padding: 14px 18px;
  min-width: 220px;
  max-width: 320px;
  position: relative;
  box-shadow: 0 6px 20px var(--shadow), 0 0 24px var(--rarity-glow, transparent);
}
.creature-card.rarity-common { box-shadow: 0 6px 20px var(--shadow), 0 0 16px rgba(188,188,188,0.3); }
.creature-card.rarity-uncommon { box-shadow: 0 6px 20px var(--shadow), 0 0 20px rgba(95,184,120,0.4); }
.creature-card.rarity-rare { box-shadow: 0 6px 20px var(--shadow), 0 0 24px rgba(78,163,217,0.5); }
.creature-card.rarity-epic { box-shadow: 0 6px 20px var(--shadow), 0 0 28px rgba(184,115,214,0.6); }
.creature-card.rarity-legendary {
  box-shadow: 0 6px 20px var(--shadow), 0 0 32px rgba(240,200,73,0.7);
  animation: legendary-pulse 2.5s ease-in-out infinite;
}
@keyframes legendary-pulse {
  0%,100% { box-shadow: 0 6px 20px var(--shadow), 0 0 28px rgba(240,200,73,0.6); }
  50% { box-shadow: 0 6px 20px var(--shadow), 0 0 44px rgba(240,200,73,0.95); }
}

.creature-glyph {
  font-size: 56px;
  line-height: 1;
  text-align: center;
  margin-bottom: 6px;
  text-shadow: 0 0 18px currentColor;
}
.creature-name {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  letter-spacing: 0.12em;
  color: var(--gold-hot);
  text-align: center;
  margin-bottom: 4px;
}
.creature-meta {
  font-size: 12px;
  color: var(--ink-dim);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.type-pill {
  display: inline-block;
  padding: 1px 8px;
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: 4px;
}

.status-badge {
  position: absolute;
  top: -8px; right: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
/* v0.3.2 — every badge now passes WCAG AA. Background luminance was
   the failure mode for burn / freeze / confuse; darkened backgrounds for
   confuse/burn and dark-ink swap for freeze fix it without breaking voice. */
.status-burn { background: var(--ember-deep); color: var(--ink); }
.status-freeze { background: #4ea3d9; color: #0e1a26; }
.status-paralyze { background: #f0c849; color: var(--parchment-ink); }
.status-poison { background: #c8d24c; color: var(--parchment-ink); }
.status-sleep { background: #5a4a73; color: var(--ink); }
.status-confuse { background: #6e3a8a; color: var(--ink); }

/* BATTLE LOG */
.battle-log {
  flex: 1;
  margin: 0 24px;
  padding: 10px 14px;
  background: rgba(10,8,20,0.85);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  overflow-y: auto;
  font-size: 14px;
  position: relative;
  z-index: 2;
  min-height: 80px;
  max-height: 140px;
}
.log-line {
  padding: 2px 0;
  border-bottom: 1px solid rgba(122,93,46,0.2);
  animation: log-in 0.3s ease;
}
.log-line:last-child { border-bottom: none; color: var(--gold-hot); }
@keyframes log-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* BATTLE ACTIONS */
.battle-actions {
  padding: 14px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative; z-index: 2;
  background: linear-gradient(0deg, rgba(10,8,20,0.95), transparent);
}
/* v0.3.3 — move grid auto-fits to handle 1-6 moves gracefully across
   phone portrait (2 cols), tablet (3 cols), desktop (4-6 cols). */
.action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
@media (max-width: 420px) {
  .action-grid { grid-template-columns: repeat(2, 1fr); }
  .action-grid .btn-move { min-height: 48px; }
}
.btn-move {
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(31,26,61,0.95), rgba(20,16,42,0.95));
  border: 1px solid var(--mt);
  border-radius: 4px;
  color: var(--ink);
  font-family: 'Cinzel', serif;
  text-align: left;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.btn-move::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--mt);
}
.btn-move:hover {
  background: linear-gradient(180deg, var(--mt), rgba(20,16,42,0.95));
  box-shadow: 0 0 16px var(--mt);
}
.move-name { display: block; font-size: 13px; letter-spacing: 0.1em; }
.move-meta { display: block; font-size: 10px; color: var(--ink-dim); letter-spacing: 0.08em; text-transform: uppercase; }

/* v0.3.2 — "type-lens" chip on each move button showing matchup vs the
   current opponent. Hidden when neutral. Universal numerals for the eye,
   lore words for the aria-label. */
.move-eff {
  position: absolute;
  top: 4px;
  right: 6px;
  z-index: 1;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 1px 6px 2px;
  border-radius: 3px;
  background: rgba(10,8,20,0.85);
  pointer-events: none;
}
.move-eff.eff-super  { color: #b8e7a8; border: 1px solid #6ec078; box-shadow: 0 0 8px rgba(110,192,120,0.45); }
.move-eff.eff-resist { color: var(--ink-dim); border: 1px solid var(--gold-dim); }
.move-eff.eff-null   { color: #f5b7a3; border: 1px solid var(--danger); }

.action-secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* ============================================================
   MENU OVERLAYS
   ============================================================ */
#menuStack { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
.menu-overlay {
  position: absolute; inset: 0;
  background: rgba(10,8,20,0.85);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.2s;
  backdrop-filter: blur(4px);
}
.menu-overlay.active { opacity: 1; }
.menu-panel {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--gold-soft);
  border-radius: 6px;
  max-width: 600px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(240,200,73,0.2), 0 8px 32px rgba(0,0,0,0.6);
  transform: translateY(10px);
  transition: transform 0.2s;
}
.menu-overlay.active .menu-panel { transform: none; }
.menu-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 0.2em;
  color: var(--gold-hot);
  padding: 14px 20px;
  border-bottom: 1px solid var(--gold-dim);
  text-transform: uppercase;
}
.menu-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}
.menu-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--gold-dim);
  display: flex; justify-content: flex-end;
}

/* ============================================================
   CREATURE GRIDS
   ============================================================ */
.grid-creatures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.creature-tile {
  background: linear-gradient(180deg, rgba(31,26,61,0.8), rgba(20,16,42,0.95));
  border: 1px solid var(--type-color, var(--gold-dim));
  border-radius: 4px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--ink);
}
.creature-tile.rarity-uncommon { box-shadow: inset 0 0 12px rgba(95,184,120,0.2); }
.creature-tile.rarity-rare { box-shadow: inset 0 0 12px rgba(78,163,217,0.25); }
.creature-tile.rarity-epic { box-shadow: inset 0 0 12px rgba(184,115,214,0.3); }
.creature-tile.rarity-legendary {
  box-shadow: inset 0 0 16px rgba(240,200,73,0.35);
  border-color: var(--gold-hot);
}
.creature-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.tile-glyph { font-size: 28px; color: var(--type-color); }
.tile-name { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.05em; margin-top: 4px; }
.tile-meta { font-size: 11px; color: var(--ink-dim); margin: 2px 0 6px; }

/* v1.1 — Codex (Bestiary) tiles.
   Three reveal states stacked into the same grid-creatures layout.
   Owned tiles inherit the existing .rarity-* and --type-color treatment;
   seen/missing tiles dim and silhouette-ize the glyph. */
.codex-header { margin-bottom: 14px; }
.codex-stats {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.codex-stats b { color: var(--gold-hot); }
.codex-bar {
  margin-top: 8px;
  height: 6px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  overflow: hidden;
}
.codex-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-hot));
  transition: width 0.6s ease;
  box-shadow: 0 0 8px var(--gold-hot);
}
.codex-tile {
  background: linear-gradient(180deg, rgba(31,26,61,0.7), rgba(20,16,42,0.95));
  border: 1px solid var(--type-color, var(--gold-dim));
  border-radius: 4px;
  padding: 10px 8px;
  text-align: center;
  color: var(--ink);
}
.codex-tile.owned .tile-glyph { color: var(--type-color); text-shadow: 0 0 8px currentColor; font-size: 28px; }
.codex-tile.owned.rarity-uncommon  { box-shadow: inset 0 0 10px rgba(95,184,120,0.2); }
.codex-tile.owned.rarity-rare      { box-shadow: inset 0 0 12px rgba(78,163,217,0.25); }
.codex-tile.owned.rarity-epic      { box-shadow: inset 0 0 14px rgba(184,115,214,0.3); }
.codex-tile.owned.rarity-legendary { box-shadow: inset 0 0 18px rgba(240,200,73,0.35); border-color: var(--gold-hot); }
.codex-tile.seen {
  opacity: 0.85;
  border-color: var(--gold-dim);
  background: linear-gradient(180deg, rgba(20,16,42,0.6), rgba(10,8,20,0.9));
}
.codex-tile.seen .tile-glyph.silhouette,
.codex-tile.missing .tile-glyph.silhouette {
  font-size: 28px;
  color: transparent;
  text-shadow:
    0 0 0 var(--type-color, #5a5060),
    0 0 12px rgba(0,0,0,0.6);
  filter: blur(0.5px);
}
.codex-tile.missing {
  opacity: 0.55;
  border-color: rgba(122,93,46,0.45);
  background: rgba(10,8,20,0.6);
}
.codex-tile.missing .tile-glyph.silhouette {
  color: rgba(154,145,126,0.6);
  text-shadow: none;
  filter: none;
}
.codex-tile .tile-name { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 0.05em; margin-top: 4px; }
.codex-tile .tile-meta { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }

/* COLLECTION TABS */
.collection-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
.tab {
  padding: 6px 14px;
  background: rgba(20,16,42,0.6);
  border: 1px solid var(--gold-dim);
  color: var(--ink-dim);
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  border-radius: 3px;
  text-transform: uppercase;
}
.tab.active {
  background: var(--gold-dim);
  color: var(--gold-hot);
  border-color: var(--gold-hot);
}

/* DETAIL VIEW */
.detail { text-align: center; }
.detail-glyph { font-size: 80px; margin: 10px 0; text-shadow: 0 0 24px currentColor; }
.detail-meta { font-size: 14px; line-height: 1.7; color: var(--ink); margin-bottom: 16px; }
.detail-meta b { color: var(--gold-hot); }
.evolve-hint { color: var(--gold-soft); font-style: italic; font-size: 13px; }
.section-label {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin: 12px 0 6px;
  text-align: left;
}
.detail-moves { text-align: left; margin: 0 auto 16px; }
.move-row {
  padding: 6px 10px;
  border-left: 3px solid var(--gold-dim);
  margin-bottom: 4px;
  background: rgba(10,8,20,0.4);
  font-size: 13px;
}
.move-row-meta { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.05em; }
.detail-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }

/* SHOP */
.shop-blurb { text-align: center; font-size: 15px; margin-bottom: 16px; }
.shop-blurb b { color: var(--gold-hot); }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.pack-card {
  padding: 18px 12px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 2px solid var(--gold-soft);
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.pack-card:hover {
  border-color: var(--gold-hot);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(240,200,73,0.3);
}
.pack-name { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 0.15em; color: var(--gold-hot); }
.pack-meta { font-size: 12px; color: var(--ink-dim); margin: 4px 0; }
.pack-cost { font-family: 'Cinzel', serif; color: var(--gold-hot); font-size: 18px; margin-top: 6px; }
.shop-actions { display: flex; justify-content: center; }

/* PACK REVEAL */
.pack-reveal {
  position: fixed; inset: 0;
  background: radial-gradient(circle, var(--bg-2) 0%, var(--bg-0) 70%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}
.pack-reveal.active { opacity: 1; }
.pack-stage {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  perspective: 1000px;
}
.reveal-card {
  width: 140px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.reveal-card.flipped { transform: rotateY(180deg); }
.reveal-back, .reveal-front {
  position: absolute; inset: 0;
  border-radius: 8px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  text-align: center;
}
.reveal-back {
  background: linear-gradient(135deg, var(--bg-2), var(--bg-1));
  border: 2px solid var(--gold-soft);
  font-size: 60px;
  color: var(--gold-hot);
  text-shadow: 0 0 30px var(--gold-hot);
}
.reveal-front {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 2px solid var(--type-color);
  transform: rotateY(180deg);
  box-shadow: 0 0 30px var(--rarity-glow);
}
.reveal-rarity {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--type-color);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.reveal-glyph { font-size: 60px; color: var(--type-color); text-shadow: 0 0 18px currentColor; }
.reveal-name { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 0.1em; color: var(--gold-hot); margin-top: 8px; }
.reveal-meta { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }

/* QUEST */
.quest-current { margin-bottom: 16px; }
.quest-stage {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--gold-hot);
  margin-bottom: 6px;
}
.quest-desc { font-size: 14px; color: var(--ink); line-height: 1.6; }

.shards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
@media (max-width: 500px) {
  .shards-grid { grid-template-columns: repeat(2, 1fr); }
}
.shard {
  background: rgba(10,8,20,0.6);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 10px 6px;
  text-align: center;
  opacity: 0.4;
}
.shard.owned {
  opacity: 1;
  border-color: var(--shard-color);
  box-shadow: 0 0 16px var(--shard-color);
}
.shard-icon { font-size: 28px; color: var(--shard-color); }
.shard-name { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.08em; margin: 2px 0; }
.shard-biome { font-size: 10px; color: var(--ink-dim); }

/* v1.0 — Mini-map travel screen.
   Eleven biomes positioned on a parchment-tinted relief map. Each node
   is a small button styled by its current relationship to the player
   (current / walk / paid / locked / visited / unknown). */
.biome-map {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(78,163,217,0.10), transparent 40%),
    radial-gradient(ellipse at 65% 30%, rgba(168,155,212,0.10), transparent 40%),
    radial-gradient(ellipse at 60% 80%, rgba(95,184,120,0.10), transparent 40%),
    linear-gradient(180deg, rgba(31,26,61,0.6), rgba(10,8,20,0.85));
  border: 1px solid var(--gold-dim);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 32px rgba(0,0,0,0.5);
}
.map-node {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 84px;
  padding: 5px 8px 4px;
  background: linear-gradient(180deg, var(--biome-color, var(--bg-2)), rgba(10,8,20,0.92));
  border: 1.5px solid var(--gold-dim);
  border-radius: 4px;
  color: var(--ink);
  font-family: 'Cinzel', serif;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.map-node:hover {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: var(--gold-hot);
  box-shadow: 0 0 12px rgba(240,200,73,0.4);
}
.map-node-name {
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 1.15;
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.map-node-status {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-top: 2px;
}
.map-node.mode-current   { border-color: var(--gold-hot); box-shadow: 0 0 18px var(--gold-hot); }
.map-node.mode-current .map-node-status { color: var(--gold-hot); }
.map-node.mode-paid      { border-color: var(--good); box-shadow: 0 0 10px var(--good); }
.map-node.mode-paid .map-node-status { color: var(--good); }
.map-node.mode-walk      { border-color: var(--gold-soft); }
.map-node.mode-walk .map-node-status { color: var(--gold-soft); }
.map-node.mode-locked    { opacity: 0.55; cursor: not-allowed; }
.map-node.mode-locked .map-node-status { color: var(--danger); }
.map-node.mode-locked:hover { transform: translate(-50%, -50%); box-shadow: none; }
.map-node.mode-visited   { opacity: 0.65; }
.map-node.mode-unknown   { opacity: 0.4; }

/* Mobile portrait — shrink node text */
@media (max-width: 500px) {
  .map-node { min-width: 64px; padding: 4px 6px 3px; }
  .map-node-name   { font-size: 9px; letter-spacing: 0.04em; }
  .map-node-status { font-size: 7px; letter-spacing: 0.12em; }
}

/* TRAVEL (legacy text grid, kept for safety) */
.travel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.travel-card {
  background: linear-gradient(180deg, var(--bg), var(--ac));
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--ink);
}
.travel-card:hover { transform: translateY(-2px); border-color: var(--gold-hot); }
.travel-card.locked { opacity: 0.5; cursor: not-allowed; }
.travel-name { font-family: 'Cinzel', serif; font-size: 14px; letter-spacing: 0.12em; color: var(--gold-hot); }
.travel-status { font-size: 11px; color: var(--ink-dim); margin-top: 4px; letter-spacing: 0.15em; text-transform: uppercase; }

/* TRADE */
.trade-export, .trade-import { display: flex; flex-direction: column; gap: 12px; }
.code-box {
  width: 100%;
  min-height: 80px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  background: rgba(10,8,20,0.8);
  color: var(--gold-hot);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  padding: 10px;
  resize: vertical;
  letter-spacing: 0.05em;
  word-break: break-all;
}

/* ============================================================
   v0.3.3 — INKBINDER VERSE LIST
   The Inkbinder's binding screen shows available verses as rows
   with a type-coloured left stripe, name + meta, and crystal cost
   on the right. Mirrors the .btn-move treatment but row-shaped.
   ============================================================ */
.verse-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.verse-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 10px 18px;
  background: linear-gradient(180deg, rgba(31,26,61,0.85), rgba(20,16,42,0.95));
  border: 1px solid var(--mt, var(--gold-dim));
  border-radius: 4px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.verse-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--mt);
}
.verse-row:hover {
  transform: translateX(2px);
  box-shadow: 0 0 12px var(--mt);
}
.verse-row.unaffordable {
  opacity: 0.45;
  cursor: not-allowed;
}
.verse-row.unaffordable:hover { transform: none; box-shadow: none; }
.verse-info { flex: 1; min-width: 0; }
.verse-name {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--gold-hot);
}
.verse-meta {
  font-size: 11px;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 2px;
}
.verse-cost {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--gold-hot);
  flex-shrink: 0;
}

/* SETTINGS */
.settings { display: flex; flex-direction: column; gap: 12px; }
.set-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(10,8,20,0.4);
  border: 1px solid var(--gold-dim);
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.set-row input { transform: scale(1.3); accent-color: var(--gold-hot); }
.set-credits {
  margin-top: 12px;
  padding: 10px;
  text-align: center;
  color: var(--ink-dim);
  font-size: 12px;
  font-style: italic;
  border-top: 1px solid var(--gold-dim);
}

.empty {
  text-align: center;
  color: var(--ink-dim);
  font-style: italic;
  padding: 40px 20px;
}

/* ============================================================
   DIALOG
   ============================================================ */
#dialog {
  position: fixed; inset: auto 0 0 0;
  display: none;
  padding: 20px;
  z-index: 60;
  pointer-events: none;
}
#dialog.active { display: block; pointer-events: auto; }
.dlg-box {
  max-width: 700px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--gold-soft);
  border-radius: 6px;
  padding: 18px 22px;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.6), 0 0 24px rgba(240,200,73,0.2);
  animation: dlg-up 0.3s ease;
}
@keyframes dlg-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.dlg-speaker {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  letter-spacing: 0.18em;
  color: var(--gold-hot);
  margin-bottom: 10px;
}
.dlg-glyph { font-size: 22px; margin-right: 6px; }
.dlg-text { font-size: 16px; line-height: 1.6; margin-bottom: 12px; }
.dlg-controls { display: flex; gap: 8px; justify-content: flex-end; }

/* ============================================================
   TOAST
   ============================================================ */
#toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(10,8,20,0.95);
  border: 1px solid var(--gold-soft);
  color: var(--gold-hot);
  font-family: 'Cinzel', serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 10px 22px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 90;
  white-space: nowrap;
}
#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   EVOLUTION FLASH
   ============================================================ */
.evolution-flash {
  position: fixed; inset: 0;
  background: radial-gradient(circle, rgba(240,200,73,0.3), rgba(10,8,20,0.9));
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.evolution-flash.show { opacity: 1; }
.ev-content {
  display: flex; align-items: center; gap: 24px;
  font-family: 'Cinzel', serif;
  font-size: 28px;
  letter-spacing: 0.2em;
  color: var(--gold-hot);
  text-shadow: 0 0 30px var(--gold-hot);
}
.ev-arrow { font-size: 36px; animation: arrow-spin 1.5s linear infinite; }
@keyframes arrow-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.ev-old { opacity: 0.6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .hud-title { font-size: 14px; letter-spacing: 0.18em; }
  .hud-meta { font-size: 11px; gap: 10px; }
  .battle-stage { padding: 10px; gap: 8px; }
  .creature-card { padding: 10px 12px; min-width: 0; }
  .creature-glyph { font-size: 42px; }
  .creature-name { font-size: 14px; }
  .battle-actions { padding: 10px; }
  .btn-menu { padding: 6px 10px; font-size: 11px; letter-spacing: 0.1em; }
  #dpad { grid-template-columns: repeat(3, 32px); grid-template-rows: repeat(3, 32px); }
  .reveal-card { width: 110px; height: 160px; }
  .reveal-glyph { font-size: 44px; }
}

@media (max-width: 400px) {
  #controls { padding: 6px 8px; gap: 4px; }
  .btn-menu { padding: 6px 8px; font-size: 10px; }
  .menu-body { padding: 12px; }
  .battle-log { margin: 0 10px; max-height: 90px; font-size: 12px; }
}

/* Hide d-pad on devices that have a *fine* pointer (real mouse/trackpad) AND a wide
   viewport — this protects iPad Pro from incorrectly hiding the d-pad just because
   iPadOS reports hover support. 900px > iPad portrait (834px) so iPads stay safe. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  #dpad { display: none; }
}

/* ============================================================
   v0.3 — Detailed creature portraits, attack animations,
   victory/defeat overlays
   ============================================================ */

/* ---------- CREATURE PORTRAIT (battle cards) ---------- */
.creature-portrait {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.creature-aura {
  position: absolute;
  inset: 0;
  border: 2px solid var(--type-color);
  border-radius: 50%;
  opacity: 0.55;
  box-shadow: 0 0 24px var(--type-color), inset 0 0 18px var(--type-color);
  animation: aura-rotate 8s linear infinite;
  border-style: dashed;
  pointer-events: none;
}
.creature-aura.inner {
  inset: 14px;
  border-style: dotted;
  opacity: 0.4;
  animation: aura-rotate 5s linear infinite reverse;
  box-shadow: none;
}
@keyframes aura-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.creature-silhouette {
  position: absolute;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 35% 35%,
    color-mix(in srgb, var(--type-color) 80%, white 20%),
    var(--type-color) 60%,
    color-mix(in srgb, var(--type-color) 60%, #000 40%) 100%);
  filter: drop-shadow(0 0 14px var(--type-color));
  animation: silhouette-pulse 3.5s ease-in-out infinite;
}
@keyframes silhouette-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Type-specific clip-paths — every type gets a distinct silhouette */
.creature-silhouette.type-ember {
  clip-path: polygon(50% 0%, 62% 25%, 80% 18%, 72% 42%, 92% 58%, 70% 65%, 80% 92%, 50% 78%, 20% 92%, 30% 65%, 8% 58%, 28% 42%, 20% 18%, 38% 25%);
}
.creature-silhouette.type-aqua {
  clip-path: polygon(50% 0%, 100% 38%, 88% 62%, 100% 88%, 60% 78%, 50% 100%, 40% 78%, 0% 88%, 12% 62%, 0% 38%);
}
.creature-silhouette.type-verdant {
  clip-path: polygon(50% 0%, 75% 12%, 90% 32%, 95% 60%, 80% 85%, 50% 95%, 20% 85%, 5% 60%, 10% 32%, 25% 12%);
}
.creature-silhouette.type-tempest {
  clip-path: polygon(40% 0%, 70% 0%, 55% 35%, 85% 35%, 45% 100%, 60% 55%, 25% 55%);
}
.creature-silhouette.type-stone {
  clip-path: polygon(25% 5%, 75% 5%, 95% 50%, 75% 95%, 25% 95%, 5% 50%);
}
.creature-silhouette.type-frost {
  clip-path: polygon(50% 0%, 58% 30%, 90% 12%, 75% 45%, 100% 50%, 75% 55%, 90% 88%, 58% 70%, 50% 100%, 42% 70%, 10% 88%, 25% 55%, 0% 50%, 25% 45%, 10% 12%, 42% 30%);
}
.creature-silhouette.type-shadow {
  clip-path: polygon(50% 0%, 90% 25%, 80% 50%, 90% 75%, 50% 100%, 75% 60%, 75% 40%);
}
.creature-silhouette.type-radiant {
  clip-path: polygon(50% 0%, 60% 20%, 85% 8%, 75% 32%, 100% 28%, 80% 50%, 100% 72%, 75% 68%, 85% 92%, 60% 80%, 50% 100%, 40% 80%, 15% 92%, 25% 68%, 0% 72%, 20% 50%, 0% 28%, 25% 32%, 15% 8%, 40% 20%);
}
.creature-silhouette.type-toxin {
  clip-path: polygon(50% 0%, 65% 25%, 90% 35%, 85% 65%, 70% 88%, 50% 100%, 30% 88%, 15% 65%, 10% 35%, 35% 25%);
}
.creature-silhouette.type-spectral {
  clip-path: polygon(20% 15%, 35% 0%, 65% 0%, 80% 15%, 90% 50%, 95% 88%, 78% 78%, 65% 92%, 50% 80%, 35% 92%, 22% 78%, 5% 88%, 10% 50%);
}

.creature-glyph {
  position: relative;
  z-index: 2;
  font-family: 'Cinzel', serif;
  font-size: 36px;
  color: #fff;
  text-shadow: 0 0 12px rgba(0,0,0,0.7), 0 0 24px var(--type-color);
  pointer-events: none;
}

/* hit-overlay sits on top for tinted flashes */
.hit-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.hit-overlay.flash {
  animation: hit-flash 0.5s ease-out;
}
@keyframes hit-flash {
  0%   { opacity: 0.95; transform: scale(0.85); }
  100% { opacity: 0;    transform: scale(1.3); }
}

/* ---------- ATTACK ANIMATIONS ---------- */
.creature-card.lunge-up    { animation: lunge-up    0.38s ease; }
.creature-card.lunge-down  { animation: lunge-down  0.38s ease; }
@keyframes lunge-up {
  0%, 100% { transform: none; }
  40%      { transform: translateY(-22px) scale(1.05); }
}
@keyframes lunge-down {
  0%, 100% { transform: none; }
  40%      { transform: translateY(22px) scale(1.05); }
}

.creature-card.hit-shake { animation: hit-shake 0.38s ease; }
@keyframes hit-shake {
  0%, 100% { transform: none; }
  10%      { transform: translate(-5px, 2px) rotate(-1deg); }
  25%      { transform: translate(5px, -3px) rotate(1deg); }
  45%      { transform: translate(-4px, 3px) rotate(-0.5deg); }
  65%      { transform: translate(4px, -2px) rotate(0.5deg); }
  85%      { transform: translate(-2px, 1px); }
}

.hit-particle {
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  animation: particle-burst 0.6s ease-out forwards;
}
@keyframes particle-burst {
  0%   { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; }
}

.heal-particle {
  position: absolute;
  bottom: 30%;
  width: 5px; height: 12px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f0c849, transparent);
  pointer-events: none;
  z-index: 3;
  animation: heal-rise 0.9s ease-out forwards;
  box-shadow: 0 0 8px #f0c849;
}
@keyframes heal-rise {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

.creature-card.heal-pulse {
  animation: heal-pulse 0.7s ease;
}
@keyframes heal-pulse {
  0%, 100% { box-shadow: 0 0 0 var(--type-color); }
  50%      { box-shadow: 0 0 30px 6px rgba(240, 200, 73, 0.7); }
}

.battle-stage.crit-flash::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.35);
  pointer-events: none;
  animation: crit-fade 0.32s ease;
  z-index: 50;
}
@keyframes crit-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.creature-card.fainted {
  animation: faint-out 1.2s ease forwards;
  pointer-events: none;
}
@keyframes faint-out {
  0%   { transform: none; opacity: 1; filter: none; }
  60%  { transform: rotate(8deg) translateY(20px) scale(0.92); opacity: 0.7; filter: grayscale(0.5) brightness(0.7); }
  100% { transform: rotate(15deg) translateY(60px) scale(0.7); opacity: 0; filter: grayscale(1) brightness(0.4); }
}

/* ---------- VICTORY / DEFEAT OVERLAYS ---------- */
.result-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  overflow: hidden;
}
.result-overlay.show { opacity: 1; }
.result-overlay.victory {
  background: radial-gradient(circle, rgba(240, 200, 73, 0.35) 0%, rgba(10, 8, 20, 0.85) 70%);
}
.result-overlay.victory.boss {
  background: radial-gradient(circle, rgba(240, 200, 73, 0.5) 0%, rgba(60, 20, 80, 0.9) 60%, rgba(10, 8, 20, 0.95) 100%);
}
.result-overlay.defeat {
  background: radial-gradient(circle, rgba(232, 98, 59, 0.3) 0%, rgba(10, 8, 20, 0.95) 70%);
}
.result-text {
  text-align: center;
  z-index: 2;
  animation: result-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes result-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.result-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(48px, 12vw, 96px);
  letter-spacing: 0.35em;
  margin-bottom: 12px;
}
.result-overlay.victory .result-title {
  color: #f0c849;
  text-shadow: 0 0 30px #f0c849, 0 0 60px rgba(240, 200, 73, 0.4);
}
.result-overlay.defeat .result-title {
  color: #e8623b;
  text-shadow: 0 0 30px #e8623b, 0 0 60px rgba(232, 98, 59, 0.4);
}
.result-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(14px, 3vw, 18px);
  color: #d4c8a8;
  letter-spacing: 0.1em;
}
.result-rays {
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(240, 200, 73, 0.18) 6deg, transparent 12deg,
    transparent 60deg, rgba(240, 200, 73, 0.18) 66deg, transparent 72deg,
    transparent 120deg, rgba(240, 200, 73, 0.18) 126deg, transparent 132deg,
    transparent 180deg, rgba(240, 200, 73, 0.18) 186deg, transparent 192deg,
    transparent 240deg, rgba(240, 200, 73, 0.18) 246deg, transparent 252deg,
    transparent 300deg, rgba(240, 200, 73, 0.18) 306deg, transparent 312deg,
    transparent 360deg
  );
  animation: rays-rotate 8s linear infinite;
}
@keyframes rays-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* combatant containers — give battle-stage relative positioning for crit-flash */
.battle-stage { position: relative; }
.combatant .creature-card { position: relative; overflow: visible; }

/* ============================================================
   v0.3.5 — BATTLE VFX
   Per-type particle shapes, screen shake, explosion rings,
   tempest lightning, and status-effect aura pulses.
   ============================================================ */

/* --- Type-specific particle shapes ---
   Base .hit-particle already exists above. These override shape,
   opacity, and (for spin-types) the animation keyframe. */
.hit-particle.flame   { border-radius: 50%; filter: blur(0.4px); }
.hit-particle.drop    { border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%; }
.hit-particle.leaf    { border-radius: 2px 8px 2px 8px; opacity: 0.95; }
.hit-particle.spark   { border-radius: 50%; }
.hit-particle.chunk   { border-radius: 1px; }
.hit-particle.crystal { border-radius: 0; }
.hit-particle.smoke   { border-radius: 50%; opacity: 0.55; filter: blur(1px); }
.hit-particle.sparkle { border-radius: 50%; }
.hit-particle.cloud   { border-radius: 50%; opacity: 0.6; filter: blur(0.8px); }
.hit-particle.wisp    { border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; opacity: 0.85; }

/* Spinning fall variants — leaves, chunks, crystals tumble as they go */
.hit-particle.leaf,
.hit-particle.chunk,
.hit-particle.crystal {
  animation-name: particle-burst-spin;
}
@keyframes particle-burst-spin {
  0%   { transform: translate(-50%, -50%) scale(1.2) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0) rotate(540deg); opacity: 0; }
}

/* --- Screen shake (battle stage) --- */
.battle-stage.shake-soft { animation: shake-soft 0.42s cubic-bezier(.36,.07,.19,.97) both; }
.battle-stage.shake-hard { animation: shake-hard 0.46s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake-soft {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 1px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -1px); }
}
@keyframes shake-hard {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-7px, 3px); }
  25% { transform: translate(8px, -5px); }
  40% { transform: translate(-6px, 5px); }
  55% { transform: translate(6px, -3px); }
  70% { transform: translate(-4px, 2px); }
  85% { transform: translate(3px, -2px); }
}

/* --- Explosion ring for power ≥ 100 moves --- */
.explosion-ring {
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 5px solid var(--ring-color, #f0c849);
  box-shadow:
    0 0 32px var(--ring-color, #f0c849),
    inset 0 0 24px var(--ring-color, #f0c849);
  pointer-events: none;
  z-index: 51;
  transform: translate(-50%, -50%);
  animation: explosion-ring-expand 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes explosion-ring-expand {
  0%   { transform: translate(-50%, -50%) scale(0.25); opacity: 1; border-width: 6px; }
  60%  { opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(22);   opacity: 0; border-width: 1px; }
}

/* --- Tempest lightning strike overlay --- */
.lightning-strike {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 49;
  animation: lightning-fade 0.38s ease-out forwards;
}
@keyframes lightning-fade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  35%  { opacity: 1; }
  70%  { opacity: 0.55; }
  100% { opacity: 0; }
}
.lightning-flash {
  position: absolute; inset: 0;
  background: rgba(220, 215, 255, 0.55);
  pointer-events: none;
  z-index: 48;
  mix-blend-mode: screen;
  animation: lightning-screen-flash 0.38s ease-out forwards;
}
@keyframes lightning-screen-flash {
  0% { opacity: 0; }
  10% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Status-effect aura pulses on the creature card ---
   Each card with an .aura-* class gets a softly pulsing colored glow
   around it for as long as the status is active. The card already has
   position:relative so absolute ::after lays out correctly.
*/
.creature-card[class*="aura-"]::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 8px;
  pointer-events: none;
  animation: status-aura-pulse 1.8s ease-in-out infinite;
}
.creature-card.aura-burn::after     { box-shadow: 0 0 24px 6px rgba(232, 98, 59, 0.65); }
.creature-card.aura-freeze::after   { box-shadow: 0 0 24px 6px rgba(78, 163, 217, 0.65); }
.creature-card.aura-paralyze::after { box-shadow: 0 0 24px 6px rgba(240, 200, 73, 0.65); }
.creature-card.aura-poison::after   { box-shadow: 0 0 24px 6px rgba(200, 210, 76, 0.65); }
.creature-card.aura-sleep::after    { box-shadow: 0 0 24px 6px rgba(138, 118, 179, 0.55); }
.creature-card.aura-confuse::after  { box-shadow: 0 0 24px 6px rgba(110, 58, 138, 0.65); }
@keyframes status-aura-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}

/* Honour user's reduced-motion preference for the VFX */
@media (prefers-reduced-motion: reduce) {
  .battle-stage.shake-soft, .battle-stage.shake-hard { animation: none; }
  .explosion-ring                                    { animation-duration: 0.3s; }
  .creature-card[class*="aura-"]::after              { animation: none; opacity: 0.6; }
}

/* v1.1 — Binding rune capture animation.
   A large diamond sigil appears centered on the enemy card, shakes three
   times, then either locks shut (success) or shatters (broke free).
*/
.binding-rune {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}
.rune-inner {
  font-family: 'Cinzel', serif;
  font-size: 64px;
  line-height: 1;
  color: var(--gold-hot);
  text-shadow:
    0 0 24px var(--gold-hot),
    0 0 12px var(--gold-soft),
    0 0 4px #fff;
  filter: drop-shadow(0 0 8px var(--gold-hot));
  animation: rune-appear 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rune-appear {
  from { opacity: 0; transform: scale(0.3) rotate(-90deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0deg);   }
}
.binding-rune.shake .rune-inner { animation: rune-shake 0.72s ease-in-out; }
@keyframes rune-shake {
  0%, 100%                  { transform: translate(0, 0) rotate(0deg); }
  10%, 30%, 50%, 70%, 90%   { transform: translate(-5px, 1px) rotate(-4deg); }
  20%, 40%, 60%, 80%        { transform: translate(5px, -1px) rotate(4deg); }
}
.binding-rune.locked .rune-inner {
  color: var(--good);
  text-shadow:
    0 0 32px var(--good),
    0 0 64px rgba(110,192,120,0.5),
    0 0 4px #fff;
  animation: rune-lock 0.52s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}
@keyframes rune-lock {
  0%   { transform: scale(1)   rotate(0deg);   opacity: 1; }
  40%  { transform: scale(1.4) rotate(45deg);  opacity: 1; }
  100% { transform: scale(0.4) rotate(180deg); opacity: 0; }
}
.binding-rune.broken .rune-inner {
  color: var(--danger);
  text-shadow:
    0 0 16px var(--danger),
    0 0 4px #fff;
  animation: rune-break 0.42s ease-out forwards;
}
@keyframes rune-break {
  0%   { transform: scale(1)   rotate(0deg);  opacity: 1; }
  60%  { transform: scale(1.7) rotate(60deg); opacity: 0.8; }
  100% { transform: scale(2.1) rotate(120deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .binding-rune.shake .rune-inner { animation-duration: 0.3s; }
}