/* The fonts (Cinzel, Rajdhani) ship with the game: css/fonts.css, linked before this file in index.html. They used to be fetched from Google here. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold: #d4a843;
  --gold-light: #f0d78c;
  --dark: #0a0a12;
  --darker: #06060a;
  --purple: #2a1a3e;
  --purple-light: #6b3fa0;
  --red: #c0392b;
  --green: #27ae60;
  --blue: #2980b9;
  --zone-safe: #1a3a1a;
  --zone-mid: #3a3a1a;
  --zone-deep: #3a2a1a;
  --zone-forbidden: #2a1a2a;
  /* the text colours shared by both style sheets (2026-11-01: about thirty near-identical greys and creams were merged into these) */
  --text-body: #d8d0c0;        /* ordinary text on the dark panels */
  --text-soft: #c8c0b0;        /* text a step quieter: labels, buttons at rest */
  --text-muted: #9a96b0;       /* secondary lines: descriptions, captions */
  --text-dim: #8a8aa0;         /* hints, small print */
  --text-faint: #6a6a7e;       /* empty states, disabled */
  --text-warm-dim: #8a7a6a;    /* the small capital section headings */
}

body {
  background: var(--darker);
  color: var(--text-body);
  font-family: 'Rajdhani', sans-serif;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

canvas { display: block; image-rendering: pixelated; }

#game-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: clip;                       /* nothing in the game scrolls the page: #portal-transition is drawn 15% bigger than the screen, and a focus() or scrollIntoView() would otherwise slide the whole game up */
  background: radial-gradient(ellipse at center, #12121e 0%, var(--darker) 100%);
}

/* ---- SCREENS ---- */
.screen {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
}
.screen.active { display: flex; }

/* ---- TITLE SCREEN ---- */
#title-screen {
  position: relative;
  overflow: hidden;
  align-items: center;
  justify-content: flex-end;
  background: #000;
  padding-bottom: 6%;
}
.title-overlay {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: max-content;
}
#title-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Bottom gradient to make buttons readable without blocking the art */
#title-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 45%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
#title-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
/* The Beta label under the title buttons, and on a Beta save's slot card and the menu */
#title-beta { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 2px; color: rgba(255,255,255,0.62); text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
.beta-tag, .slot-beta { display: inline-block; padding: 2px 8px; border: 1px solid var(--gold); border-radius: 3px; color: var(--gold); font-weight: 700; letter-spacing: 3px; background: rgba(212,168,67,0.12); }
.slot-beta { margin-left: 8px; padding: 0 6px; font-size: 0.62rem; letter-spacing: 2px; vertical-align: middle; }

/* ── Cinematic title-screen buttons ── */
.title-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 260px;
  padding: 14px 32px;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.25s ease;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}
.title-btn-icon {
  font-size: 1.1rem;
}
.newgame-title-btn {
  border-color: var(--gold);
  color: var(--gold);
  text-shadow: 0 0 12px rgba(212,168,67,0.5);
  box-shadow: 0 0 18px rgba(212,168,67,0.15), inset 0 0 18px rgba(212,168,67,0.05);
}
.newgame-title-btn:hover {
  background: rgba(212,168,67,0.15);
  box-shadow: 0 0 30px rgba(212,168,67,0.4), inset 0 0 20px rgba(212,168,67,0.1);
  transform: translateY(-2px);
}
.continue-title-btn {
  border-color: #4ab8cc;
  color: #4ab8cc;
  text-shadow: 0 0 12px rgba(74,184,204,0.5);
  box-shadow: 0 0 18px rgba(74,184,204,0.15), inset 0 0 18px rgba(74,184,204,0.05);
}
.continue-title-btn:hover {
  background: rgba(74,184,204,0.15);
  box-shadow: 0 0 30px rgba(74,184,204,0.4), inset 0 0 20px rgba(74,184,204,0.1);
  transform: translateY(-2px);
}

/* keep old #continue-btn hover stub intact for other screens */
#continue-btn.btn:hover {
  border-color: #5cb;
  color: #5cb;
  box-shadow: 0 0 20px rgba(68,170,153,0.3);
}

/* ---- SAVE SLOT PICKER ---- */
#save-slot-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(6,6,10,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
}
#save-slot-overlay.active { display: flex; }
#save-slot-overlay h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(212,168,67,0.4);
}
#slot-picker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 420px;
}
.slot-card {
  position: relative;
  border: 1px solid #3a3a5a;
  background: rgba(20,20,35,0.95);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.slot-card:hover {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(212,168,67,0.2);
}
.slot-card.empty { cursor: default; opacity: 0.6; }
.slot-card.empty:hover { border-color: #3a3a5a; box-shadow: none; }
.slot-card-title {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: var(--gold-light);
}
.slot-card-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.slot-card-time {
  font-size: 0.72rem;
  color: var(--text-faint);
  margin-top: 2px;
}
.slot-delete-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-warm-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.slot-delete-btn:hover {
  color: var(--red);
  background: rgba(192,57,43,0.15);
}

.btn {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  padding: 14px 48px;
  border: 2px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-size: 1.1rem;
  cursor: pointer;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.btn:hover {
  background: var(--gold);
  color: var(--darker);
  box-shadow: 0 0 30px rgba(212,168,67,0.3);
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s;
}
.btn:hover::before { left: 100%; }

/* ---- INTRO SCREEN ---- */
#intro-screen {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #020208;
  padding: 20px;
}
.intro-container {
  position: relative; z-index: 1;
  max-width: 620px;
  width: 90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
/* The professor speaks in person (ART-012, charart.js caIntroScene): his face, larger than in a conversation, over a dimmed and
   softened still of the title screen; a vignette keeps the words on dark. Without the still it is the old black. */
#intro-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 0.9s ease;
  filter: blur(3px) brightness(0.34) saturate(0.85); }
#intro-backdrop.on { opacity: 1; }
#intro-screen::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(2,2,8,0.35) 0%, rgba(2,2,8,0.6) 55%, rgba(2,2,8,0.94) 100%); }
.intro-portrait { width: 128px; height: 128px; margin-bottom: -14px; flex: none; border-radius: 18px; overflow: hidden; border: 2px solid var(--gold);
  background: radial-gradient(circle at 50% 40%, rgba(240,215,140,0.32), rgba(70,48,110,0.6) 58%, rgba(14,10,30,0.96) 100%);
  box-shadow: 0 0 28px rgba(212,168,67,0.28), 0 8px 24px rgba(0,0,0,0.6); opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease, transform 0.6s ease; }
.intro-portrait.face { opacity: 1; transform: none; }
.intro-portrait canvas { display: block; width: 100%; height: 100%; }
.intro-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.9;
  color: var(--text-soft);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}
.intro-text .intro-line {
  opacity: 0;
  animation: introFadeIn 0.8s ease forwards;
}
@keyframes introFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.intro-text .intro-speaker {
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.1em;
  display: block;
  margin-bottom: 10px;
}
.intro-text .intro-highlight {
  color: var(--gold-light);
  font-weight: 600;
}
.intro-skip {
  display: flex;
  gap: 14px;
}
.intro-skip-btn {
  padding: 10px 32px !important;
  font-size: 0.9rem !important;
}
.intro-skip-btn.dim {
  border-color: #4a4a5a;
  color: var(--text-faint);
}
.intro-skip-btn.dim:hover {
  border-color: #8a8a9a;
  color: #aaa;
  background: transparent;
  box-shadow: none;
}

/* ---- NAME INPUT SCREEN ---- */
#name-screen {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #1a1a30 0%, var(--darker) 70%);
  gap: 20px;
}
#name-screen h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
}
.name-input {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  text-align: center;
  padding: 12px 24px;
  width: 280px;
  background: rgba(20,20,35,0.9);
  border: 2px solid #3a3a5a;
  border-radius: 8px;
  color: var(--gold-light);
  letter-spacing: 3px;
  outline: none;
  transition: border-color 0.3s;
}
.name-input::placeholder {
  color: #4a4a5a;
  letter-spacing: 2px;
}
.name-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 20px rgba(212,168,67,0.15);
}
#name-confirm-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ---- CHARACTER CHOICE (characters.js): the starter screen's look, with a pixel sprite on each card ---- */
#character-screen {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #1a1a30 0%, var(--darker) 70%);
  gap: 20px;
  padding: 20px;
}
#character-screen h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
}
.starter-card.character-card { width: 200px; box-sizing: border-box; padding: 20px 14px 18px; }      /* (4 x 200 + 3 gaps = 860: one row in the starter row's 900) */
.char-art {
  display: block; width: 120px; height: 180px; margin: 0 auto 10px;
  image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55));
}
.character-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-color: var(--gold); }
.name-portrait { display: block; width: 96px; height: 144px; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.55)); }

/* ---- STARTER SELECT ---- */
#starter-screen {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #1a1a30 0%, var(--darker) 70%);
  gap: 20px;
  padding: 20px;
}
#starter-screen h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.3rem, 3vw, 2rem);
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
}
.starter-cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 900px;
}
.starter-card {
  width: 240px;
  background: linear-gradient(135deg, #14142a, #1e1e3a);
  border: 2px solid #333;
  border-radius: 12px;
  padding: 24px 20px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.starter-card:hover {
  border-color: var(--gold);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 40px rgba(212,168,67,0.2);
}
.starter-card .monster-emoji {
  font-size: 3.5rem;
  margin-bottom: 12px;
  display: block;
}
.starter-card-art {
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
  margin: 0 auto 12px;
  border-radius: 8px;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.6));
  transition: transform 0.3s;
}
.starter-card:hover .starter-card-art {
  transform: scale(1.05);
}
.starter-card .monster-name {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--gold-light);
  font-weight: 700;
  margin-bottom: 4px;
}
.starter-card .monster-title {
  font-size: 0.85rem;
  color: var(--text-warm-dim);
  margin-bottom: 12px;
}
.starter-card .monster-desc {
  font-size: 0.85rem;
  color: #9a8a7a;
  line-height: 1.5;
}
.starter-card .evo-chain {
  margin-top: 14px;
  font-size: 0.75rem;
  color: var(--text-faint);
  border-top: 1px solid #2a2a3a;
  padding-top: 10px;
}
.star { color: var(--gold); }

/* ---- THE PHARAOH'S GIFT (the starter to choose after a round of the story, js/starterreward.js) ---- */
#reward-overlay {
  display: none; position: absolute; inset: 0; z-index: 95;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 40%, #1a1a30 0%, var(--darker) 75%);
}
#reward-overlay.active { display: flex; }
#reward-overlay h2 { font-family: 'Cinzel', serif; font-size: clamp(1.3rem, 3vw, 2rem); color: var(--gold); letter-spacing: 4px; text-transform: uppercase; text-align: center; }
#reward-sub { color: var(--text-dim); font-size: 0.9rem; text-align: center; max-width: 520px; }
.starter-card.static { cursor: default; }
.starter-card.static:hover { transform: none; border-color: #333; box-shadow: none; }
.starter-card.static:hover .starter-card-art { transform: none; }
.reward-lv { margin-top: 10px; font-size: 0.8rem; color: var(--gold); letter-spacing: 1px; }
#reward-actions .pause-btn { width: auto; min-width: 190px; padding: 14px 24px; border-color: var(--gold); color: var(--gold-light); }

/* ---- OVERWORLD ---- */
#overworld-screen {
  position: relative;
  background: var(--darker);
}
#overworld-canvas {
  border: 2px solid #2a2a3a;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0; left: 0;
}

#hud {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}
.hud-panel {
  background: rgba(10,10,18,0.92);
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  padding: 8px 14px;
  pointer-events: auto;
}
.hud-panel .label {
  font-size: 0.72rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.hud-panel .value {
  font-family: 'Cinzel', serif;
  color: var(--gold-light);
  font-size: 0.95rem;
}

#boost-hud {                                   /* Lure / Repel / Sealing Ink running, under the menu button */
  position: absolute; top: 56px; right: 10px; z-index: 10;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none;
}
.boost-chip {
  padding: 4px 11px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: var(--gold-light);
  background: rgba(14,10,30,0.82); border: 1px solid rgba(212,168,67,0.45); box-shadow: 0 0 12px rgba(212,168,67,0.18);
}
.btn-ink { font-size: 0.72em; opacity: 0.85; letter-spacing: 0; }

/* The place banner (ui.js showPlaceBanner): the name of where you are, sliding in at the top for a moment between two thin gold
   rules, on a band of dark that fades out at both ends. (Until 2026-11-01 this was a Zone box at the bottom, there all the time.) */
#zone-indicator {
  position: absolute; top: 92px; left: 50%; z-index: 12; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 320px; padding: 10px 72px 9px;
  background: linear-gradient(90deg, rgba(8,6,20,0) 0%, rgba(8,6,20,0.82) 22%, rgba(8,6,20,0.82) 78%, rgba(8,6,20,0) 100%);
  opacity: 0; transform: translate(-50%, -10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#zone-indicator::before, #zone-indicator::after {
  content: ''; position: absolute; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, rgba(212,168,67,0), rgba(212,168,67,0.75), rgba(212,168,67,0));
}
#zone-indicator::before { top: 0; }
#zone-indicator::after { bottom: 0; }
#zone-indicator.show { opacity: 1; transform: translate(-50%, 0); transition-duration: 0.35s, 0.45s; }
#zone-indicator .value { font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.5rem; letter-spacing: 4px; text-transform: uppercase; color: var(--gold-light); text-shadow: 0 2px 12px rgba(0,0,0,0.9); white-space: nowrap; }
#zone-indicator .label { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
#zone-indicator .label:empty { display: none; }
html.reduce-motion #zone-indicator { transform: translate(-50%, 0); transition: opacity 0.3s ease; }

/* HUD minimap — round, top-left under Lead Monster panel */
#hud-minimap {
  position: absolute;
  top: 78px;
  left: 10px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(212,160,32,0.75);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.7), inset 0 0 8px rgba(0,0,0,0.5);
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
  background: #040410;
  transition: box-shadow 0.2s, border-color 0.2s;
}
#hud-minimap:hover {
  border-color: rgba(212,160,32,1);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 4px 20px rgba(212,160,32,0.35), inset 0 0 8px rgba(0,0,0,0.5);
}

/* Interact button */
.interact-btn {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: rgba(68,136,255,0.85);
  border: 2px solid #4488ff;
  border-radius: 8px;
  padding: 8px 20px;
  cursor: pointer;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: interact-pulse 1.5s ease-in-out infinite;
}
.interact-btn:hover {
  background: rgba(68,136,255,1);
}
.interact-key {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.75rem;
}
@keyframes interact-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(68,136,255,0.4); }
  50%      { box-shadow: 0 0 20px rgba(68,136,255,0.8); }
}

#party-hud {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 10;
  display: flex;
  gap: 6px;
}

/* ---- FIRST-RUN CONTROLS HINT (hints.js): bottom centre of the map, above the zone label (bottom 10) and the interact prompt / synergy badge (bottom 60) ---- */
#control-hint {
  position: absolute; bottom: 108px; left: 50%; z-index: 11;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px;
  max-width: calc(100% - 320px); padding: 7px 14px; border-radius: 24px;
  background: rgba(10,10,18,0.88); border: 1px solid rgba(212,168,67,0.45); box-shadow: 0 0 18px rgba(212,168,67,0.14);
  color: #cfc8e0; font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px); pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
#control-hint.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition-delay: 0s; }
#control-hint kbd {
  display: inline-block; min-width: 1.5em; margin: 0 1px; padding: 1px 6px; text-align: center; border-radius: 4px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35); color: var(--gold-light); font: inherit; font-size: 0.8rem;
}
#control-hint .ch-close { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: 0.9rem; padding: 0 2px; }
#control-hint .ch-close:hover { color: var(--gold-light); }

/* ---- SOUND TOGGLE BUTTON (title screen + overworld) ---- */
#title-sound-btn,
#sound-toggle-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 20;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(10,10,18,0.92);
  border: 1px solid #2a2a4a;
  color: #d4a843;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  line-height: 1;
}
#title-sound-btn:hover,
#sound-toggle-btn:hover {
  background: rgba(212,168,67,0.15);
  border-color: var(--gold);
  transform: scale(1.12);
}

/* ---- PROGRESS TRACKER (bottom-right HUD) ---- */
#progress-tracker {
  position: absolute;
  bottom: 56px;
  right: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: auto;
}
.pt-row {
  background: rgba(10,10,18,0.92);
  border: 1px solid #2a2a3a;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-family: 'Rajdhani', sans-serif;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pt-row .pt-label {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.66rem;
}
.pt-row .pt-value {
  color: var(--gold-light);
  font-weight: 600;
}
.pt-row .pt-done {
  color: var(--green);
  font-weight: 600;
}
.pt-bar {
  width: 50px;
  height: 5px;
  background: #1a1a2a;
  border-radius: 3px;
  overflow: hidden;
}
.pt-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.party-icon {
  background: rgba(10,10,18,0.92);
  border: 1px solid #2a2a3a;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 4px;
}
.party-icon .hp-mini {
  width: 40px; height: 4px;
  background: #1a1a2a;
  border-radius: 2px;
  overflow: hidden;
}
.party-icon .hp-mini-fill {
  height: 100%;
  background: var(--green);
  border-radius: 2px;
  transition: width 0.3s;
}

/* ---- BATTLE SCREEN ----
   Everything on this screen is sized from --bs, the scale that fitBattleLayout() (battle.js) fits to the window: 1 is the
   design size (a 1280-wide layout), so the screen grows and shrinks with the window and is never clipped. --px is one design
   pixel and --rem one design rem at that scale: write calc(240 * var(--px)). Not CSS zoom or transform: the attack effects and
   the damage numbers are placed from getBoundingClientRect, which a scaled ancestor would throw off. */
#battle-screen {
  --arena: 70, 60, 130;                     /* the colour of the arena being fought in (set per zone just below): it tints the screen and frames the field */
  --bs: 1;
  --px: calc(1px * var(--bs));
  --rem: calc(1rem * var(--bs));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 38%, rgba(var(--arena), 0.3) 0%, rgba(var(--arena), 0) 64%), radial-gradient(ellipse at 50% 30%, #1a1230 0%, #0a0a12 70%);
}
#battle-screen[data-zone="1"] { --arena: 90, 170, 235; }
#battle-screen[data-zone="2"] { --arena: 255, 110, 40; }
#battle-screen[data-zone="3"] { --arena: 255, 150, 70; }
#battle-screen[data-zone="4"] { --arena: 150, 90, 255; }
#battle-screen[data-zone="5"] { --arena: 140, 110, 210; }
#battle-screen[data-zone="6"] { --arena: 240, 190, 90; }
#battle-screen[data-zone="7"] { --arena: 255, 205, 90; }
#battle-screen[data-zone="cave-moss"] { --arena: 90, 220, 180; }
#battle-screen[data-zone="cave-magma"] { --arena: 255, 120, 50; }
#battle-screen[data-zone="cave-ruins"] { --arena: 230, 190, 110; }
#battle-screen.bs-fit, #battle-screen.bs-fit * { transition: none !important; }   /* while fitBattleLayout() re-sizes the screen */
#battle-container {
  position: relative;                       /* the result panel slides up over the bottom of this column */
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--px));
}
/* The field is a stage seen from a three-quarter angle: the opponent stands up and to the right, smaller and further away;
   your monster stands down on the left, bigger and nearer. Name plates sit in the opposite corners, the log between. */
.battle-field {
  position: relative;
  height: calc(560 * var(--px));
  border-radius: calc(16 * var(--px));
  overflow: hidden;
  box-shadow: 0 0 0 calc(1 * var(--px)) rgba(var(--arena), 0.42), 0 0 calc(44 * var(--px)) rgba(var(--arena), 0.2), 0 calc(16 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, 0.55);
}
#battle-bg-canvas, #battle-ambient-canvas, #battle-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: calc(16 * var(--px));
  display: block;
  image-rendering: auto;                    /* these are drawn at the screen's own pixel density: smooth, never blocky */
}
.battle-field::after {                      /* a soft vignette: the edges fall away and the eye goes to the middle */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse at 50% 56%, transparent 58%, rgba(2,2,14,0.42) 100%);
}
#battle-bg-canvas { z-index: 0; }
#battle-ambient-canvas { z-index: 0; pointer-events: none; }
#battle-fx-canvas { z-index: 6; pointer-events: none; }
.battle-monster { position: absolute; z-index: 2; --aura: #7a90ff; --aura-op: 0.5; }
.battle-monster.player { width: calc(270 * var(--px)); height: calc(270 * var(--px)); left: calc(112 * var(--px)); bottom: calc(72 * var(--px)); z-index: 3; --tilt: 11deg; }
.battle-monster.enemy  { width: calc(208 * var(--px)); height: calc(208 * var(--px)); left: calc(800 * var(--px)); top: calc(112 * var(--px)); --tilt: -12deg; }

/* the card: the wrapper takes the fight's motion (battlemotion.js), the tilt turns it to face its opponent, the bob breathes */
.card-wrap { position: relative; width: 100%; height: 100%; transform-origin: 50% 90%; }
.card-tilt { width: 100%; height: 100%; transform: perspective(calc(1000 * var(--px))) rotateY(var(--tilt, 0deg)) rotateX(4deg); }
.card-bob  { width: 100%; height: 100%; transform-origin: 50% 100%; animation: bmIdle 3.4s ease-in-out infinite; }
.battle-monster.enemy .card-bob { animation-duration: 3.9s; animation-delay: -1.4s; }
.battle-monster.is-fainted .card-bob { animation: none; }
@keyframes bmIdle {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(calc(-5 * var(--px))) scale(1.008, 1.016); }
}
.card-holo {                                /* the hologram card: a glowing frame, scan lines and a slow sweep of light */
  position: relative; width: 100%; height: 100%;
  border-radius: calc(12 * var(--px)); overflow: hidden; background: #0a0818;
  box-shadow: 0 0 0 calc(2 * var(--px)) rgba(255,255,255,0.5), 0 0 calc(34 * var(--px)) var(--aura), 0 calc(16 * var(--px)) calc(30 * var(--px)) rgba(0,0,0,0.7);
}
.card-holo::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px calc(3 * var(--px))),
              radial-gradient(circle at 50% 40%, transparent 52%, rgba(0,0,24,0.5) 100%);
}
.card-holo::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(112deg, transparent 38%, rgba(150,220,255,0.0) 40%, rgba(150,220,255,0.30) 46%, rgba(255,255,255,0.5) 50%, rgba(255,170,240,0.30) 54%, transparent 62%) no-repeat;
  background-size: 300% 100%;
  animation: holoSweep 6.5s ease-in-out infinite;
}
.battle-monster.enemy .card-holo::after { animation-delay: -3s; }
@keyframes holoSweep { 0% { background-position: 130% 0; } 55%, 100% { background-position: -40% 0; } }
.card-art {
  display: block; width: 100%; height: 100%; object-fit: cover; margin: 0;
}
.battle-monster.enemy .card-art { transform: scaleX(-1); }
.mon-aura {                                  /* a soft glow in the monster's own colour (set from its type by battlemotion.js) */
  position: absolute; left: -26%; right: -26%; top: -20%; bottom: -22%; z-index: 0; pointer-events: none;
  border-radius: 50%; mix-blend-mode: screen; opacity: var(--aura-op);
  background: radial-gradient(circle at 50% 52%, var(--aura) 0%, transparent 62%);
  animation: auraPulse 3.8s ease-in-out infinite;
}
.battle-monster.enemy .mon-aura { animation-delay: -1.7s; }
@keyframes auraPulse { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1.06); } }
.battle-monster.is-fainted .mon-aura, .battle-monster.is-fainted .mon-base, .battle-monster.is-fainted .mon-shadow { opacity: 0; transition: opacity 0.6s; animation: none; }
.mon-shadow {                                /* the shadow on the ground, shrinking as the card floats up */
  position: absolute; left: -8%; right: -8%; bottom: -9%; height: 20%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 46%, transparent 72%);
  animation: bmShadow 3.4s ease-in-out infinite;
}
.battle-monster.enemy .mon-shadow { animation-duration: 3.9s; animation-delay: -1.4s; }
@keyframes bmShadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.8; } }
.mon-base {                                  /* the projector ring the hologram stands on */
  position: absolute; left: -12%; width: 124%; bottom: -19%; z-index: 0; overflow: visible; pointer-events: none;
}
.mon-base .mb-glow { fill: var(--aura); opacity: 0.16; }
.mon-base .mb-ring { fill: none; stroke: var(--aura); stroke-width: 2.2; opacity: 0.9; }
.mon-base .mb-dash { fill: none; stroke: rgba(255,255,255,0.6); stroke-width: 1.6; stroke-dasharray: 3 10; animation: mbSpin 9s linear infinite; }
@keyframes mbSpin { to { stroke-dashoffset: -104; } }
.mon-shield {                                /* the guard: a dome of hexagons round the monster for as long as it guards (battlemotion.js adds it and the "guarding" class) */
  position: absolute; left: -13%; right: -13%; top: -11%; bottom: -5%; z-index: 4; pointer-events: none;
  border-radius: 50% 50% 44% 44% / 58% 58% 42% 42%;
  border: calc(2 * var(--px)) solid rgba(196,238,255,0.78);
  background: radial-gradient(ellipse at 50% 46%, rgba(110,205,255,0) 46%, rgba(120,214,255,0.18) 76%, rgba(210,246,255,0.4) 100%);
  box-shadow: 0 0 calc(22 * var(--px)) rgba(120,215,255,0.5), inset 0 0 calc(22 * var(--px)) rgba(170,230,255,0.4);
  opacity: 0; transform: scale(0.84);
  transition: opacity 0.28s ease-out, transform 0.34s cubic-bezier(.2,.9,.3,1.25);
}
.mon-shield::before {                        /* the hexagons, faint in the middle and strong at the rim */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.856' height='24' viewBox='0 0 13.856 24'%3E%3Cpath d='M6.928 4 13.856 8v8L6.928 20 0 16V8zM6.928 0v4m0 16v4' fill='none' stroke='%23c8f0ff' stroke-width='.8' stroke-opacity='.65'/%3E%3C/svg%3E") 0 0 / calc(22.17 * var(--px)) calc(38.4 * var(--px));
  -webkit-mask-image: radial-gradient(ellipse at 50% 46%, transparent 34%, #000 94%);
  mask-image: radial-gradient(ellipse at 50% 46%, transparent 34%, #000 94%);
}
.battle-monster.guarding .mon-shield { opacity: 1; transform: scale(1); animation: shieldPulse 2.6s ease-in-out 0.4s infinite; }
.battle-monster.is-fainted .mon-shield { display: none; }
@keyframes shieldPulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } }
.sw-card-art {
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}
.party-icon-art {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 3px;
}
.battle-monster .emoji {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: calc(6 * var(--rem));
  filter: drop-shadow(0 calc(4 * var(--px)) calc(12 * var(--px)) rgba(0,0,0,0.5));
}
.battle-monster.enemy .emoji { transform: scaleX(-1); }

/* the name plates and the party pips */
.plate-col { position: absolute; z-index: 5; width: calc(330 * var(--px)); display: flex; flex-direction: column; gap: calc(8 * var(--px)); }
.plate-col.enemy  { left: calc(24 * var(--px)); top: calc(18 * var(--px)); }
.plate-col.player { right: calc(24 * var(--px)); bottom: calc(16 * var(--px)); align-items: flex-end; }
.mon-plate {
  width: 100%;
  padding: calc(8 * var(--px)) calc(14 * var(--px)) calc(10 * var(--px));
  background: linear-gradient(180deg, rgba(18,12,38,0.86), rgba(8,6,20,0.86));
  border: 1px solid rgba(212,168,67,0.32);
  border-left: calc(4 * var(--px)) solid #d4a843;
  border-radius: calc(12 * var(--px));
  box-shadow: 0 calc(6 * var(--px)) calc(20 * var(--px)) rgba(0,0,0,0.55);
}
.mon-plate.enemy { border-left-color: #c0392b; }
.plate-head { display: flex; justify-content: space-between; align-items: baseline; gap: calc(10 * var(--px)); }
.mon-plate .mon-name {
  font-family: 'Cinzel', serif; font-size: calc(1.14 * var(--rem)); color: var(--gold-light);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;
}
.mon-plate .mon-level { font-size: calc(0.95 * var(--rem)); font-weight: 700; color: #e6d7ab; flex-shrink: 0; }
.plate-sub { display: flex; align-items: baseline; gap: calc(10 * var(--px)); margin-top: calc(1 * var(--px)); }
.mon-plate .mon-type { font-size: calc(0.8 * var(--rem)); color: #8a9ab5; letter-spacing: 0.5px; text-transform: uppercase; margin: 0; }
.mon-plate .mon-stars { font-size: calc(0.85 * var(--rem)); color: var(--gold); margin: 0; }
#enemy-caught-badge {
  display: inline-block;
  margin-top: calc(4 * var(--px));
  padding: calc(1 * var(--px)) calc(10 * var(--px));
  background: rgba(39, 174, 96, 0.18);
  border: 1px solid #27ae60;
  border-radius: 20px;
  color: #4edc88;
  font-size: calc(0.72 * var(--rem));
  font-family: 'Cinzel', serif;
  letter-spacing: 0.04em;
  box-shadow: 0 0 8px rgba(78, 220, 136, 0.25);
}
.hp-bar-container { width: 100%; margin: calc(6 * var(--px)) 0 0; }
.hp-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: calc(0.85 * var(--rem));
  color: #9a8a78;
}
.hp-bar {
  width: 100%;
  height: calc(12 * var(--px));
  background: #1a1a2a;
  border-radius: calc(8 * var(--px));
  overflow: hidden;
  margin-top: calc(3 * var(--px));
  position: relative;
}
.hp-fill, .hp-chip {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  border-radius: calc(4 * var(--px));
}
.hp-fill {
  z-index: 1;
  background: var(--green);
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), background-color 0.35s ease;
}
.hp-chip {                                   /* the damage just taken: stays a beat, then drains to meet the bar */
  background: linear-gradient(180deg, #fff1b8, #f0c24a);
  opacity: 0.9;
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.42s;
}
.hp-fill.low      { background: #e67e22; }
.hp-fill.critical { background: var(--red); }

.xp-bar-container { width: 100%; margin: calc(5 * var(--px)) 0 0; }
.xp-bar {
  width: 100%;
  height: calc(7 * var(--px));
  background: #1a1a2a;
  border-radius: calc(4 * var(--px));
  overflow: hidden;
}
.xp-fill {
  height: 100%;
  background: var(--blue);
  border-radius: calc(2 * var(--px));
  transition: width 0.5s ease;
}
.adv-hint {                                  /* type advantage, at a glance */
  display: none; width: fit-content; margin-top: calc(6 * var(--px));
  padding: calc(1 * var(--px)) calc(10 * var(--px)); border-radius: 20px;
  font-size: calc(0.72 * var(--rem)); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.adv-hint.show { display: block; }
.adv-hint.up   { color: #8ff0a4; background: rgba(46,204,113,0.14); border: 1px solid rgba(46,204,113,0.5); }
.adv-hint.down { color: #ffb0a0; background: rgba(231,76,60,0.14);  border: 1px solid rgba(231,76,60,0.5); }

/* party pips: one round portrait per monster, its HP as a ring */
.battle-pips { display: flex; }
.pip-list { display: flex; flex-wrap: wrap; gap: calc(7 * var(--px)); padding: calc(3 * var(--px)) calc(4 * var(--px)); }
.battle-pips.player .pip-list { justify-content: flex-end; }
.pip {
  position: relative; width: calc(40 * var(--px)); height: calc(40 * var(--px)); border-radius: 50%; padding: calc(3 * var(--px));
  background: conic-gradient(var(--pc, #2ecc71) var(--hp, 100%), #2a2a3c 0);
  box-shadow: 0 calc(2 * var(--px)) calc(6 * var(--px)) rgba(0,0,0,0.6);
  transition: transform 0.2s;
}
.pip.low      { --pc: #e67e22; }
.pip.critical { --pc: var(--red); }
.pip-art { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #0c0a18; }
.pip.active { transform: scale(1.2); box-shadow: 0 0 0 calc(2 * var(--px)) #d4a020, 0 0 calc(14 * var(--px)) rgba(212,160,32,0.65); }
.pip.fainted { filter: grayscale(1) brightness(0.55); }
.pip.fainted::after { content: '✕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #ff8a7a; font-size: calc(1.1 * var(--rem)); font-weight: 700; }
.pip.waiting { opacity: 0.8; }

/* ── Deck synergy badge (overworld HUD) ──────────────────────── */
#synergy-badge {
  display: none;
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #1a0a3a, #3a1a6a);
  border: 1px solid #c084fc;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: bold;
  color: #e9d5ff;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px #a855f7;
  box-shadow: 0 0 12px rgba(168,85,247,0.5);
  pointer-events: none;
  white-space: nowrap;
  z-index: 20;
}
#synergy-badge.active { display: block; }

/* ── Bonus-round banner (battle screen) ──────────────────────── */
#bonus-banner {
  display: none;
  position: absolute;
  top: calc(62 * var(--px));
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #78350f, #d97706, #78350f);
  border: 2px solid #fbbf24;
  border-radius: calc(14 * var(--px));
  padding: calc(4 * var(--px)) calc(18 * var(--px));
  font-size: calc(12 * var(--px));
  font-weight: bold;
  color: #fef3c7;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  box-shadow: 0 0 18px rgba(251,191,36,0.7);
  animation: bonusPulse 1.1s ease-in-out infinite alternate;
  z-index: 30;
}
#bonus-banner.active { display: block; }
@keyframes bonusPulse {
  from { box-shadow: 0 0 12px rgba(251,191,36,0.5); }
  to   { box-shadow: 0 0 28px rgba(251,191,36,0.95); }
}

#battle-log {                                 /* the fight's commentary, laid over the field between the two corners */
  position: absolute; z-index: 5;
  left: calc(468 * var(--px)); bottom: calc(14 * var(--px));
  width: calc(430 * var(--px)); height: calc(112 * var(--px));
  padding: calc(8 * var(--px)) calc(14 * var(--px));
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1px;
  overflow-y: auto; overflow-x: hidden;
  background: linear-gradient(180deg, rgba(8,6,18,0), rgba(8,6,18,0.74) 40%);
  border-radius: calc(12 * var(--px));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 38%);
          mask-image: linear-gradient(180deg, transparent 0, #000 38%);
  transition: opacity 0.8s ease;
  scrollbar-width: none;
}
#battle-log.idle { opacity: 0.4; }            /* nothing new for a few seconds: it steps back */
#battle-log:hover { opacity: 1; }
#battle-log::-webkit-scrollbar { display: none; }
.log-line {
  font-family: 'Rajdhani', monospace;
  font-size: calc(0.9 * var(--rem));
  line-height: 1.38;
  padding: 1px 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.log-line:nth-last-child(n+2) { opacity: 0.82; }
.log-line:nth-last-child(n+3) { opacity: 0.64; }
.log-line:nth-last-child(n+4) { opacity: 0.48; }
.log-line:nth-last-child(n+5) { opacity: 0.34; }
.log-line.log-player  { color: #d4b458; }
.log-line.log-enemy   { color: #e07575; }
.log-line.log-special { color: #f8d040; font-weight: 700; letter-spacing: 0.02em; }
.log-line.log-danger  { color: #e03535; font-weight: 600; }
.log-line.log-crit    { color: #ffe040; font-weight: 600; }
.log-line.log-super   { color: #ff9040; }
.log-line.log-capture { color: #38d4a0; font-weight: 600; }
.log-line.log-flee    { color: #8888cc; }
.log-line.log-counter { color: #40e0ff; font-weight: 600; text-shadow: 0 0 6px rgba(64,224,255,0.5); }
.log-line.log-recoil  { color: #e88c30; font-weight: 600; }
.log-line.log-system  { color: var(--text-faint); }
@keyframes logSlideIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.log-line.log-new { animation: logSlideIn 0.2s ease-out; }

.battle-actions {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: calc(8 * var(--px));
}
.battle-btn {
  grid-column: span 3;                      /* four to a row; the three moves below span 4 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  min-height: calc(44 * var(--px));
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: calc(0.95 * var(--rem));
  padding: calc(6 * var(--px)) calc(8 * var(--px));
  border: 1px solid #3a3a4a;
  background: rgba(20,20,35,0.9);
  color: var(--text-soft);
  border-radius: calc(12 * var(--px));
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: calc(1.2 * var(--px));
}
.battle-btn.attack, .battle-btn.attack2, .battle-btn.signature {
  grid-column: span 4;
  min-height: calc(58 * var(--px));
  font-size: calc(1.1 * var(--rem));
}
.battle-btn.attack, .battle-btn.attack2 { flex-direction: column; gap: 1px; }
.battle-btn .btn-name { display: block; }
.battle-btn .btn-sub  { display: block; font-size: calc(0.66 * var(--rem)); letter-spacing: calc(0.8 * var(--px)); font-weight: 500; opacity: 0.72; }
.battle-btn .btn-sub .hint-up   { color: #7ee89a; font-weight: 700; opacity: 1; }
.battle-btn .btn-sub .hint-down { color: #f4a090; font-weight: 700; opacity: 1; }
.battle-btn .btn-sub .hint-best, .battle-btn .sig-sub .hint-best { color: var(--gold-light); font-weight: 700; opacity: 1; white-space: nowrap; }   /* DES-005: the move that does the most right now */
.battle-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(40,35,25,0.9);
}
.battle-btn:disabled { opacity: 0.4; cursor: default; }
.battle-btn.attack  { border-color: #c0392b44; }
.battle-btn.attack:hover:not(:disabled)  { border-color: var(--red);          color: var(--red); }
.battle-btn.attack2 { border-color: #e6730044; }
.battle-btn.attack2:hover:not(:disabled) { border-color: #ff8c00;             color: #ff8c00; }
.battle-btn.defend  { border-color: #2980b944; }
.battle-btn.defend:hover:not(:disabled)  { border-color: var(--blue);         color: var(--blue); }
.battle-btn.capture { border-color: #d4a84344; }
.battle-btn.capture:hover:not(:disabled) { border-color: var(--gold);         color: var(--gold); }
.battle-btn.flee    { border-color: #6a6a7a44; }
.battle-btn.switch-btn { border-color: #6b3fa044; }
.battle-btn.switch-btn:hover:not(:disabled) { border-color: var(--purple-light); color: var(--purple-light); }

/* Keyboard-nav focus ring (arrow keys) */
.battle-btn.battle-btn-focused:not(:disabled) {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(40,35,25,0.95) !important;
  box-shadow: 0 0 0 2px rgba(212,168,67,0.55), inset 0 0 12px rgba(212,168,67,0.08);
  outline: none;
}
.battle-btn.attack.battle-btn-focused:not(:disabled)  { border-color: var(--red) !important;          color: var(--red) !important;          box-shadow: 0 0 0 2px rgba(231,76,60,0.5), inset 0 0 12px rgba(231,76,60,0.08); }
.battle-btn.attack2.battle-btn-focused:not(:disabled) { border-color: #ff8c00 !important;             color: #ff8c00 !important;             box-shadow: 0 0 0 2px rgba(255,140,0,0.5), inset 0 0 12px rgba(255,140,0,0.08); }
.battle-btn.defend.battle-btn-focused:not(:disabled)  { border-color: var(--blue) !important;         color: var(--blue) !important;         box-shadow: 0 0 0 2px rgba(41,128,185,0.5), inset 0 0 12px rgba(41,128,185,0.08); }
.battle-btn.switch-btn.battle-btn-focused:not(:disabled) { border-color: var(--purple-light) !important; color: var(--purple-light) !important; box-shadow: 0 0 0 2px rgba(163,102,200,0.5), inset 0 0 12px rgba(163,102,200,0.08); }

/* ── Motion layer (js/battlemotion.js) ───────────────────────── */
#battle-dim {                                 /* a signature move darkens the arena behind the two monsters */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, rgba(0,0,12,0.15) 0%, rgba(0,0,12,0.62) 100%);
  opacity: 0; transition: opacity 0.18s ease-out;
}
#battle-dim.on { opacity: 1; }

#vs-banner {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 40; pointer-events: none;
  display: none; align-items: center; justify-content: center;
  height: calc(150 * var(--px)); margin-top: calc(-75 * var(--px));
  background: linear-gradient(90deg, rgba(8,4,20,0), rgba(8,4,20,0.9) 14%, rgba(8,4,20,0.9) 86%, rgba(8,4,20,0));
  font-family: 'Cinzel', serif; color: #f4e6bf;
}
#vs-banner.show { display: flex; animation: vsFade calc(1.7s * var(--bt, 1)) ease-out forwards; }
#vs-banner.boss { background: linear-gradient(90deg, rgba(40,4,8,0), rgba(48,6,10,0.92) 14%, rgba(48,6,10,0.92) 86%, rgba(40,4,8,0)); }
.vs-slab { display: flex; align-items: center; gap: calc(18 * var(--px)); width: calc(470 * var(--px)); }
.vs-left  { justify-content: flex-end;   animation: vsInL calc(0.5s * var(--bt, 1)) cubic-bezier(.2,.8,.2,1) both; }
.vs-right { justify-content: flex-start; animation: vsInR calc(0.5s * var(--bt, 1)) cubic-bezier(.2,.8,.2,1) both; }
.vs-text { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.vs-left .vs-text  { align-items: flex-end;   text-align: right; }
.vs-right .vs-text { align-items: flex-start; text-align: left; }
/* the duelists' faces next to their names (ART-012): head and shoulders of their pixel-art sprites, on the arena's light in a gold frame */
.vs-face { flex: none; width: calc(96 * var(--px)); height: calc(96 * var(--px)); border-radius: calc(12 * var(--px)); border: calc(2 * var(--px)) solid #d4a843;
  background: radial-gradient(circle at 50% 38%, rgba(var(--arena), 0.55), rgba(70, 48, 110, 0.6) 58%, rgba(12, 8, 26, 0.96) 100%);
  box-shadow: 0 0 calc(18 * var(--px)) rgba(212, 168, 67, 0.35), inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, 0.08); }
#vs-banner.leader { background: linear-gradient(90deg, rgba(26,14,4,0), rgba(34,20,8,0.93) 14%, rgba(34,20,8,0.93) 86%, rgba(26,14,4,0)); }
#vs-banner.leader .vs-mid { text-shadow: 0 0 calc(30 * var(--px)) #f0b020, 0 0 calc(8 * var(--px)) #fff0b0, 0 calc(3 * var(--px)) 0 rgba(0,0,0,0.8); }
#vs-banner.leader .vs-face, #vs-banner.boss .vs-face { border-color: #f0c850; box-shadow: 0 0 calc(26 * var(--px)) rgba(240, 200, 80, 0.55); }

/* The duelist you are fighting stands on the right of the field, behind his monster (ART-012, battlemotion.js duelist): his sprite at
   4x, facing you, in a pool of shade, his name on a plate. He steps in as the duel opens; a leader or the Pharaoh further, in a flash. */
#duelist-stand { position: absolute; z-index: 1; left: calc(1046 * var(--px)); top: calc(88 * var(--px)); width: calc(176 * var(--px));
  display: none; flex-direction: column; align-items: center; pointer-events: none; }
#duelist-stand.show { display: flex; }
#duelist-stand::before { content: ''; position: absolute; left: 50%; top: calc(128 * var(--px)); width: calc(120 * var(--px)); height: calc(26 * var(--px));
  transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 70%); }
#duelist-canvas { position: relative; display: block; width: calc(96 * var(--px)); height: calc(144 * var(--px));
  filter: drop-shadow(0 0 calc(8 * var(--px)) rgba(var(--arena), 0.6)); animation: duelistBreath 2.8s ease-in-out infinite; }
.duelist-plate { position: relative; margin-top: calc(4 * var(--px)); padding: calc(3 * var(--px)) calc(12 * var(--px)); border-radius: calc(8 * var(--px));
  background: rgba(10, 8, 22, 0.84); border: calc(1 * var(--px)) solid rgba(212, 168, 67, 0.7); box-shadow: 0 calc(3 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.5);
  font-family: 'Cinzel', serif; font-size: calc(0.72 * var(--rem)); font-weight: 700; letter-spacing: 0.1em; color: #f0d78c; white-space: nowrap; }
#duelist-stand.star .duelist-plate { border-color: #f0c850; color: #ffe9a0; box-shadow: 0 0 calc(14 * var(--px)) rgba(240, 200, 80, 0.45), 0 calc(3 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.5); }
#duelist-stand.enter { animation: duelistIn calc(0.7s * var(--bt, 1)) cubic-bezier(.2,.8,.2,1) calc(0.25s * var(--bt, 1)) both; }
#duelist-stand.star.enter { animation: duelistInStar calc(1.1s * var(--bt, 1)) cubic-bezier(.2,.8,.2,1) calc(0.2s * var(--bt, 1)) both; }
@keyframes duelistIn { from { opacity: 0; transform: translateX(calc(48 * var(--px))); } to { opacity: 1; transform: none; } }
@keyframes duelistInStar { 0% { opacity: 0; transform: translateX(calc(140 * var(--px))); filter: brightness(2.4); } 55% { opacity: 1; filter: brightness(1.5); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes duelistBreath { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1.5 * var(--px))); } }
.vs-mid { font-size: calc(4.2 * var(--rem)); font-weight: 900; color: #ffd86a; padding: 0 calc(34 * var(--px)); letter-spacing: 0.05em;
  text-shadow: 0 0 calc(24 * var(--px)) #e0a020, 0 calc(3 * var(--px)) 0 rgba(0,0,0,0.8); animation: vsPop calc(0.55s * var(--bt, 1)) cubic-bezier(.2,1.4,.3,1) calc(0.18s * var(--bt, 1)) both; }
#vs-banner.boss .vs-mid { color: #ff7a5a; text-shadow: 0 0 calc(24 * var(--px)) #e03010, 0 calc(3 * var(--px)) 0 rgba(0,0,0,0.8); }
.vs-wild { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--px)); animation: vsPop calc(0.5s * var(--bt, 1)) cubic-bezier(.2,1.2,.3,1) both; }
.vs-cap  { font-size: calc(0.8 * var(--rem)); letter-spacing: 0.3em; text-transform: uppercase; color: #b8a878; }
.vs-name { font-size: calc(2 * var(--rem)); font-weight: 700; text-shadow: 0 calc(2 * var(--px)) calc(10 * var(--px)) rgba(0,0,0,0.9); }
.vs-lv   { font-size: calc(1 * var(--rem)); color: #d4a84a; }
@keyframes vsInL { from { transform: translateX(calc(-160 * var(--px))); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vsInR { from { transform: translateX(calc(160 * var(--px)));  opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vsPop { from { transform: scale(2.2); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vsFade { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }

@property --bm-hole { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --bm-ang  { syntax: '<angle>';      inherits: true; initial-value: 0deg; }
#screen-wipe {                                /* the swirl that opens the battle (and the overworld again): a spiralling iris */
  position: absolute; inset: 0; z-index: 9000; pointer-events: none; display: none;
  background: conic-gradient(from var(--bm-ang) at 50% 50%, #07030f, #2e1054 12%, #07030f 24%, #4a1a7c 38%, #07030f 52%, #1c0a38 68%, #3a1466 82%, #07030f);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--bm-hole), #000 calc(var(--bm-hole) + 5%));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--bm-hole), #000 calc(var(--bm-hole) + 5%));
}
#screen-wipe::after {                         /* a gold ring riding the edge of the opening */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent calc(var(--bm-hole) - 1%), rgba(255,214,120,0.85) calc(var(--bm-hole) + 1%), transparent calc(var(--bm-hole) + 4%));
}
#screen-wipe.run { display: block; animation: bmWipe calc(0.85s * var(--bt, 1)) cubic-bezier(0.45, 0, 0.25, 1) forwards; }
@keyframes bmWipe {
  from { --bm-hole: 0%;   --bm-ang: 0deg;   }
  to   { --bm-hole: 150%; --bm-ang: 380deg; }
}
@media (prefers-reduced-motion: reduce) {
  .card-bob { animation: none; }
  .mon-shield { transition: none; animation: none !important; }
  #screen-wipe, #vs-banner { display: none !important; }
  #duelist-stand, #duelist-canvas { animation: none !important; }
}

/* ---- BATTLE LAYOUT (the party trackers are pips inside the field now) ---- */
#battle-layout {
  width: calc(1280 * var(--px));
  padding: calc(8 * var(--px));
}

/* ---- EVOLUTION SCREEN ---- */
#evolution-screen {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 50%, #2a1a3e 0%, var(--darker) 60%);
  gap: 24px;
}
#evolution-screen h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: var(--gold);
  letter-spacing: 4px;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(212,168,67,0.4);
}
.evo-display {
  display: flex;
  align-items: center;
  gap: 40px;
}
.evo-monster { text-align: center; }
.evo-monster .emoji  { font-size: 4rem; display: block; }
.evo-monster .name   { font-family: 'Cinzel', serif; color: var(--gold-light); margin-top: 8px; font-size: 1.1rem; }
.evo-monster .stars  { color: var(--gold); font-size: 0.85rem; margin-top: 4px; }
.evo-card-art {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
  border-radius: 8px;
  filter: drop-shadow(0 0 20px rgba(212,168,67,0.5));
  animation: evo-glow 1.5s ease-in-out infinite alternate;
}
@keyframes evo-glow {
  from { filter: drop-shadow(0 0 10px rgba(212,168,67,0.3)); }
  to   { filter: drop-shadow(0 0 28px rgba(212,168,67,0.8)); }
}

.evo-arrow {
  font-size: 2.5rem;
  color: var(--gold);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.2); }
}
/* ── Shake keyframes ─────────────────────────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}
@keyframes battleShakeLight {
  0%,100% { transform: translate(0,0); }
  20%     { transform: translate(-5px, 2px); }
  40%     { transform: translate(5px,-2px); }
  60%     { transform: translate(-3px, 1px); }
  80%     { transform: translate(3px,-1px); }
}
@keyframes battleShakeHeavy {
  0%,100% { transform: translate(0,0); }
  15%     { transform: translate(-9px, 5px); }
  30%     { transform: translate(9px,-5px); }
  45%     { transform: translate(-7px, 3px); }
  60%     { transform: translate(7px,-3px); }
  75%     { transform: translate(-4px, 2px); }
  90%     { transform: translate(4px,-2px); }
}
@keyframes battleShakeDefeat {
  0%,100% { transform: translate(0,0); }
  10%     { transform: translate(-12px, 6px); }
  20%     { transform: translate(12px,-6px); }
  30%     { transform: translate(-10px, 5px); }
  40%     { transform: translate(10px,-5px); }
  50%     { transform: translate(-8px, 4px); }
  60%     { transform: translate(8px,-4px); }
  70%     { transform: translate(-5px, 2px); }
  80%     { transform: translate(5px,-2px); }
  90%     { transform: translate(-2px, 1px); }
}

.battle-shake-light  { animation: battleShakeLight  calc(0.30s * var(--bt, 1)) ease; }
.battle-shake-heavy  { animation: battleShakeHeavy  calc(0.45s * var(--bt, 1)) ease; }
.battle-shake-defeat { animation: battleShakeDefeat calc(0.60s * var(--bt, 1)) ease; }

/* ── Card hit flash ──────────────────────────────────────────── */
@keyframes flash-hit {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}
.hit-flash { animation: flash-hit calc(0.15s * var(--bt, 1)) ease 3; }
.shake     { animation: shake 0.2s ease 2; }

/* ── Critical hit screen flash ───────────────────────────────── */
#crit-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(220,50,50,0.55) 0%, rgba(180,20,20,0.25) 60%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  z-index: 8;
  border-radius: inherit;
}
@keyframes critFlashAnim {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
#crit-flash.active { animation: critFlashAnim calc(0.45s * var(--bt, 1)) ease-out forwards; }

/* ── Capture seal flash ──────────────────────────────────────── */
#capture-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(240,200,64,0.55) 0%, rgba(180,140,20,0.25) 60%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  z-index: 8;
  border-radius: inherit;
}
@keyframes captureFlashAnim {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
#capture-flash.active { animation: captureFlashAnim 0.4s ease-out forwards; }

@keyframes captureDissolve {
  0%   { transform: scale(1);    opacity: 1; filter: brightness(1); }
  100% { transform: scale(0.15); opacity: 0; filter: brightness(2.2); }
}
.capture-dissolve { animation: captureDissolve 0.6s ease-in forwards; }

/* ── Attack name banner + floating damage numbers ───────────── */
.atk-banner {
  position: absolute;
  top: calc(10 * var(--px));
  z-index: 14;
  max-width: 46%;
  padding: calc(4 * var(--px)) calc(14 * var(--px));
  border-radius: calc(16 * var(--px));
  font-family: 'Cinzel', serif;
  font-size: calc(0.9 * var(--rem));
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(10,8,22,0.82);
  border: 1px solid var(--gold);
  box-shadow: 0 0 14px rgba(212,168,67,0.35);
  pointer-events: none;
  animation: atkBannerAnim calc(1.45s * var(--bt, 1)) ease-out forwards;
}
.atk-banner.player { left: calc(112 * var(--px)); top: calc(224 * var(--px)); }          /* above each monster */
.atk-banner.enemy  { left: calc(800 * var(--px)); top: calc(70 * var(--px)); border-color: #c0392b; box-shadow: 0 0 14px rgba(192,57,43,0.4); }
@keyframes atkBannerAnim {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.92); }
  12%  { opacity: 1; transform: none; }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4px); }
}
.dmg-pop {
  position: absolute;
  z-index: 13;
  transform: translate(-50%, -50%);
  text-align: center;
  white-space: nowrap;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.8);
  pointer-events: none;
  animation: dmgPopAnim calc(1.2s * var(--bt, 1)) ease-out forwards;
}
.dmg-pop .dmg-num { display: block; font-size: calc(2 * var(--rem)); line-height: 1; color: #ff5a4a; }
.dmg-pop .dmg-sub { display: block; margin-top: calc(3 * var(--px)); font-size: calc(0.75 * var(--rem)); letter-spacing: 1.5px; color: #ffd27a; }
.dmg-pop.crit .dmg-num    { font-size: calc(2.7 * var(--rem)); color: #ffe14d; text-shadow: 0 0 16px #ff9a00, 0 2px 0 rgba(0,0,0,0.9); }
.dmg-pop.recoil .dmg-num  { color: #ff9c3a; }
.dmg-pop.counter .dmg-num { color: #40e0ff; text-shadow: 0 0 12px rgba(64,224,255,0.7), 0 2px 0 rgba(0,0,0,0.85); }
.dmg-pop.big:not(.crit) .dmg-num { font-size: calc(2.45 * var(--rem)); }          /* a blow that takes a third of the HP reads bigger than a scratch */
.dmg-pop.huge .dmg-num    { font-size: calc(3.1 * var(--rem)); }
.dmg-pop.huge:not(.crit) .dmg-num { text-shadow: 0 0 18px rgba(255,90,40,0.85), 0 3px 0 rgba(0,0,0,0.9); }
.dmg-pop.guard .dmg-num   { font-size: calc(1.7 * var(--rem)); }
.dmg-pop.guard .dmg-sub   { color: #8ccfff; }
@keyframes dmgPopAnim {
  0%   { opacity: 0; transform: translate(-50%, -20%) scale(0.6); }
  12%  { opacity: 1; transform: translate(-50%, -62%) scale(1.25); }
  26%  { transform: translate(-50%, -72%) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}
/* the round is still playing: the buttons wait */
.battle-actions.busy .battle-btn { opacity: 0.5; pointer-events: none; }

/* ── Signature move button (the third move, beside the two attacks) ── */
.battle-btn.signature {
  flex-direction: column;
  gap: 1px;
  padding: calc(5 * var(--px)) calc(10 * var(--px));
  border-color: rgba(212,168,67,0.55);
  color: #f1d98a;
}
.battle-btn.signature .sig-name { font-size: calc(1 * var(--rem)); line-height: 1.12; }
.battle-btn.signature .sig-sub  { font-size: calc(0.66 * var(--rem)); letter-spacing: 1.4px; opacity: 0.8; }
.battle-btn.signature.sig-ready { animation: sigPulse 1.9s ease-in-out infinite; }
.battle-btn.signature.sig-locked, .battle-btn.signature.sig-cooling, .battle-btn.signature.sig-none { color: var(--text-dim); border-color: #3a3a4a; }
.battle-btn.signature:hover:not(:disabled) { border-color: #ffe48a; color: #ffe48a; }
@keyframes sigPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(212,168,67,0.25); }
  50%      { box-shadow: 0 0 18px rgba(255,214,110,0.55); }
}

/* ── Field badge (the arena's elemental effect) + the opponent charging up ── */
#field-badge {
  position: absolute;
  top: calc(10 * var(--px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  max-width: 44%;
  padding: calc(3 * var(--px)) calc(14 * var(--px));
  border-radius: calc(14 * var(--px));
  background: rgba(10,8,22,0.72);
  border: 1px solid rgba(212,168,67,0.35);
  font-size: calc(0.75 * var(--rem));
  letter-spacing: 0.5px;
  color: #e8dcc0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
#field-badge:empty { display: none; }
#field-badge .fb-fx { display: block; color: #ffd27a; font-size: calc(0.72 * var(--rem)); line-height: 1.2; }   /* on its own line, so the badge stays narrow enough for the gap between the two monsters' bars */
#enemy-monster.charging .card-art { animation: chargeGlow 0.8s ease-in-out infinite alternate; }
#enemy-monster.charging .mon-aura { background: radial-gradient(circle at 50% 52%, #ff4a24 0%, transparent 62%); opacity: 0.9; animation-duration: 0.9s; }      /* its glow goes red and beats fast */
#enemy-monster.charging .mon-base .mb-ring { stroke: #ff6a3a; }
#enemy-monster.charging .mon-base .mb-glow { fill: #ff4a24; opacity: 0.3; }
@keyframes chargeGlow {
  from { filter: drop-shadow(0 0 6px rgba(255,60,40,0.55)) brightness(1.0); }
  to   { filter: drop-shadow(0 0 22px rgba(255,90,40,0.95)) brightness(1.25); }
}
.atk-banner.sig { border-color: #ffe48a; background: rgba(40,28,6,0.88); color: #ffe9a8; box-shadow: 0 0 18px rgba(255,214,110,0.55); }
.dmg-pop.heal .dmg-num   { color: #62ff9e; }
.dmg-pop.heal .dmg-sub   { color: #a8ffd0; }
.dmg-pop.charge .dmg-num { color: #ff6a4a; font-size: calc(1.8 * var(--rem)); }
.dmg-pop.charge .dmg-sub { color: #ffb08a; }

/* signature move block in the summary / bestiary */
.summary-attack.signature { border-color: rgba(255,214,110,0.45); background: linear-gradient(90deg, rgba(60,44,10,0.45), rgba(20,16,30,0.2)); }
.summary-attack.signature .summary-atk-name { color: #ffe29a; }
.summary-attack.signature .sig-tag { margin-left: 6px; font-size: 0.72rem; letter-spacing: 1px; color: #c9b36a; text-transform: uppercase; }
.summary-attack.signature.locked { opacity: 0.7; }

/* ── Level-up banner ─────────────────────────────────────────── */
#level-up-banner {
  position: absolute;
  bottom: 36%;
  left: 4%;
  pointer-events: none;
  z-index: 15;
  display: none;
  text-align: center;
}
#level-up-banner.active { display: block; animation: lvlUpPop calc(1.8s * var(--bt, 1)) ease-out forwards; }

@keyframes lvlUpPop {
  0%   { opacity: 0; transform: translateY(18px) scale(0.8); }
  18%  { opacity: 1; transform: translateY(-6px) scale(1.12); }
  32%  { transform: translateY(0) scale(1); }
  68%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-28px); }
}
.lvlup-text {
  font-family: 'Cinzel', serif;
  font-size: calc(1.5 * var(--rem));
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 18px var(--gold), 0 0 36px var(--gold), 2px 2px 0 rgba(0,0,0,0.8);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.lvlup-level {
  font-family: 'Cinzel', serif;
  font-size: calc(1 * var(--rem));
  color: var(--gold);
  text-shadow: 0 0 10px var(--gold);
  margin-top: 3px;
}

/* ---- BATTLE RESULT PANEL ---- */
#battle-result-panel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(520 * var(--px)), 94%);
  background: linear-gradient(160deg, #0e0820 0%, #140d2a 60%, #0a0618 100%);
  border: 1px solid var(--gold);
  border-bottom: none;
  border-radius: calc(14 * var(--px)) calc(14 * var(--px)) 0 0;
  padding: calc(16 * var(--px)) calc(22 * var(--px)) calc(18 * var(--px));
  z-index: 30;
  box-shadow: 0 -6px 32px rgba(0,0,0,0.7), 0 0 20px rgba(180,120,20,0.15);
  animation: brSlideUp 0.32s cubic-bezier(0.22,1,0.36,1);
}
@keyframes brSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(24px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
.br-defeated-line {
  font-family: 'Cinzel', serif;
  font-size: calc(1.1 * var(--rem));
  font-weight: 700;
  color: #e8d8b0;
  text-align: center;
  margin-bottom: calc(12 * var(--px));
  letter-spacing: 0.04em;
}
.br-xp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: calc(6 * var(--px));
}
.br-mon-name {
  font-family: 'Cinzel', serif;
  font-size: calc(0.95 * var(--rem));
  color: #c8b880;
}
.br-xp-gain {
  font-family: 'Cinzel', serif;
  font-size: calc(1.05 * var(--rem));
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(212,168,67,0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
}
#battle-result-panel.xp-ready .br-xp-gain { opacity: 1; }
.br-xp-bar-wrap { margin-bottom: calc(6 * var(--px)); }
.br-xp-bar {
  height: calc(10 * var(--px));
  background: rgba(255,255,255,0.08);
  border-radius: calc(6 * var(--px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.br-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #c07818, var(--gold), #f0d060);
  border-radius: calc(6 * var(--px));
  width: 0%;
  transition: width 0.9s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px rgba(212,168,67,0.5);
}
.br-xp-text {
  font-size: calc(0.75 * var(--rem));
  color: #7a7a9a;
  margin-top: calc(4 * var(--px));
  text-align: right;
}
.br-level-line {
  font-family: 'Cinzel', serif;
  font-size: calc(0.95 * var(--rem));
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  margin: calc(8 * var(--px)) 0 calc(4 * var(--px));
  text-shadow: 0 0 12px rgba(212,168,67,0.5);
  animation: brLvlPulse 0.6s ease;
}
.br-shared { margin: calc(8 * var(--px)) 0 2px; padding-top: calc(8 * var(--px)); border-top: 1px solid rgba(255,255,255,0.08); }
.br-shared-title { font-family: 'Cinzel', serif; font-size: calc(0.75 * var(--rem)); letter-spacing: 2px; text-transform: uppercase; color: var(--text-warm-dim); margin-bottom: calc(4 * var(--px)); }
.br-shared-row { display: flex; justify-content: space-between; gap: calc(12 * var(--px)); font-size: calc(0.8 * var(--rem)); color: #c8b880; line-height: 1.5; }
.br-shared-row span:last-child { color: var(--gold); }
@keyframes brLvlPulse {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1);    opacity: 1; }
}
.br-continue-btn {
  display: block;
  margin: calc(12 * var(--px)) auto 0;
  padding: calc(8 * var(--px)) calc(28 * var(--px));
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 20px;
  color: var(--gold);
  font-family: 'Cinzel', serif;
  font-size: calc(0.9 * var(--rem));
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  animation: brBtnFade 0.3s ease;
}
.br-continue-btn:hover {
  background: rgba(212,168,67,0.15);
  box-shadow: 0 0 12px rgba(212,168,67,0.3);
}
@keyframes brBtnFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ---- SWITCH MODAL ---- */
#switch-modal {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(6,6,10,0.92);
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
}
#switch-modal.active { display: flex; }
#switch-modal h3 {
  font-family: 'Cinzel', serif;
  color: var(--gold);
  font-size: 1.45rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.switch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  width: 100%;
  max-height: 72vh;
  overflow-y: auto;
}
.switch-entry {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(20,20,35,0.9);
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.2s;
}
.switch-entry:hover             { border-color: var(--gold); }
.switch-entry.fainted           { opacity: 0.4; cursor: default; }
.switch-entry.fainted:hover     { border-color: #2a2a3a; }
.switch-entry .sw-emoji         { font-size: 2rem; }
.switch-entry .sw-info          { flex: 1; }
.switch-entry .sw-name          { font-size: 1.05rem; color: var(--gold-light); font-family: 'Cinzel', serif; }
.switch-entry .sw-detail        { font-size: 0.9rem; color: var(--text-faint); margin-top: 3px; }

.switch-cancel {
  margin-top: 12px;
  padding: 11px 32px;
  background: none;
  border: 1px solid #4a4a5a;
  color: var(--text-dim);
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
}
.switch-cancel:hover { border-color: #8a8a9a; color: #c0c0d0; }

/* ---- HUD MENU BUTTON ---- */
.hud-menu-btn {
  background: rgba(10,10,18,0.92);
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  color: var(--gold);
  font-size: 1.2rem;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  pointer-events: auto;
  flex-shrink: 0;
}
.hud-menu-btn:hover {
  border-color: var(--gold);
  background: rgba(40,30,10,0.95);
  box-shadow: 0 0 12px rgba(212,168,67,0.2);
}

/* ---- PARTY HUD BUTTON ---- */
.hud-party-btn {
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hud-party-btn:hover {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(212,168,67,0.3);
}

/* ---- BESTIARY OVERLAY ---- */
.bestiary-card {
  background: rgba(15,15,28,0.9);
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  padding: 8px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.bestiary-card:hover { border-color: rgba(212,168,67,0.5); transform: translateY(-2px); }
.bestiary-card.caught { border-color: rgba(212,168,67,0.4); background: rgba(212,168,67,0.05); }
.bestiary-card.unknown { cursor: default; opacity: 0.8; }
.bestiary-card.unknown .bestiary-art.unknown-art {
  background: linear-gradient(135deg, #0d0d1a 0%, #1a1028 50%, #0d0d1a 100%);
  border: 1px solid #2a1a4a;
  box-shadow: inset 0 0 12px rgba(80,30,120,0.4);
}
.bestiary-card.unknown .bestiary-card-name { color: #4a3a6a; letter-spacing: 0.1em; }
.bestiary-card.unknown .bestiary-card-zone { color: #3a2a5a; }
/* Fusion tab: mystery card -> "half revealed" (art fades into a veil) -> fully revealed.
   Fully revealed cards with no art file yet get a gold ✦ placeholder behind the image. */
.bestiary-art.fusion-art,
#bestiary-detail-art .holo-card.fusion-art { background: linear-gradient(135deg, #1a1230 0%, #3a2466 50%, #1a1230 100%); }
.bestiary-art.fusion-art::before,
#bestiary-detail-art .holo-card.fusion-art::before {
  content: '✦';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: rgba(212,168,67,0.5); text-shadow: 0 0 10px rgba(212,168,67,0.5);
}
#bestiary-detail-art .holo-card.fusion-art::before { font-size: 3rem; }
.bestiary-art.fusion-art img,
#bestiary-detail-art .holo-card.fusion-art img { position: relative; z-index: 1; }
.bestiary-art.fusion-art .bestiary-caught-badge,
#bestiary-detail-art .holo-card.fusion-art .holo-sheen { z-index: 2; }
.bestiary-card.fusion-mystery { border-color: rgba(120,70,200,0.35); opacity: 1; }
.bestiary-card.fusion-mystery .bestiary-art.unknown-art { box-shadow: inset 0 0 14px rgba(120,60,200,0.55), 0 0 8px rgba(120,60,200,0.25); }
.bestiary-card.fusion-mystery .bestiary-card-zone { color: #6a4aa0; letter-spacing: 0.12em; text-transform: uppercase; }
.bestiary-card.fusion-half { border-color: rgba(160,110,255,0.5); background: linear-gradient(180deg, rgba(120,70,200,0.10), rgba(212,168,67,0.04)); }
.bestiary-art.half-art { background: linear-gradient(135deg, #0d0d1a 0%, #261546 55%, #0d0d1a 100%); border: 1px solid #3a2466; }
.bestiary-art.half-art img,
#bestiary-detail-art .holo-card.half img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 82%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 82%);
}
.bestiary-art.half-art::after {
  content: '?';
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; font-size: 1.7rem; line-height: 1.1;
  color: #8a5ad8; text-shadow: 0 0 10px rgba(150,80,255,0.75);
  pointer-events: none;
}
.bestiary-art {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,20,0.8);
  flex-shrink: 0;
}
.bestiary-art img { width: 100%; height: 100%; object-fit: cover; }
.bestiary-art.unknown-art {
  font-size: 2rem;
  color: #5a3a8a;
  background: linear-gradient(135deg, #0d0d1a 0%, #1a1028 50%, #0d0d1a 100%);
  text-shadow: 0 0 10px rgba(140,60,220,0.6);
}
.bestiary-caught-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.75rem;
  color: var(--gold);
  text-shadow: 0 0 6px rgba(212,168,67,0.8);
}
.bestiary-card-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #c8c8d8;
  text-align: center;
  line-height: 1.2;
}
.bestiary-card-zone {
  font-size: 0.66rem;
  color: var(--text-faint);
  text-align: center;
}
.bestiary-lore {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.55;
  padding: 8px 12px;
  border-left: 2px solid rgba(212,168,67,0.35);
  background: rgba(212,168,67,0.04);
  border-radius: 0 6px 6px 0;
}

#bestiary-detail-art {
  perspective: 700px;
}
#bestiary-detail-art .holo-card {
  width: 110px;
  height: 154px;
  position: relative;
  border-radius: 10px;
  transform-style: preserve-3d;
  animation: holo-idle-spin 6s ease-in-out infinite;
  cursor: zoom-in;
}
#bestiary-detail-art .holo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--gold);
  display: block;
}
#bestiary-detail-art .holo-card.half {
  cursor: default;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(135deg, #0d0d1a 0%, #261546 55%, #0d0d1a 100%);
  border: 2px solid rgba(160,110,255,0.7);
}
#bestiary-detail-art .holo-card.half img { border: none; }
#bestiary-detail-art .holo-card .half-veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 10px;
  background: linear-gradient(to bottom, transparent, rgba(20,10,40,0.7));
  pointer-events: none;
}
#bestiary-detail-art .holo-card .half-veil span {
  font-family: 'Cinzel', serif; font-size: 2.6rem; line-height: 1;
  color: #8a5ad8; text-shadow: 0 0 14px rgba(150,80,255,0.8);
}
#bestiary-detail-art .holo-sheen {
  position: absolute;
  inset: -20%;
  border-radius: 10px;
  background: linear-gradient(115deg, transparent 35%, rgba(212,168,67,0.30) 47%, rgba(107,63,160,0.32) 55%, transparent 68%);
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes holo-idle-spin {
  0%, 100% { transform: perspective(700px) rotateX(4deg) rotateY(-9deg); }
  50%      { transform: perspective(700px) rotateX(-4deg) rotateY(9deg); }
}

/* ---- CARD ZOOM OVERLAY ---- */
#card-zoom-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(4,4,12,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
#card-zoom-overlay.active { display: flex; }
#card-zoom-overlay .zoom-stage {
  perspective: 900px;
}
#card-zoom-overlay img {
  width: min(62vw, 300px);
  height: auto;
  border-radius: 14px;
  border: 3px solid var(--gold);
  box-shadow: 0 0 40px rgba(212,168,67,0.35);
  animation: holo-idle-spin-lg 6s ease-in-out infinite;
}
@keyframes holo-idle-spin-lg {
  0%, 100% { transform: perspective(900px) rotateX(3deg) rotateY(-7deg); }
  50%      { transform: perspective(900px) rotateX(-3deg) rotateY(7deg); }
}
.bestiary-empty {
  font-size: 0.9rem;
  color: var(--text-faint);
  text-align: center;
  padding: 32px 16px;
  grid-column: 1/-1;
}

/* ---- PARTY OVERLAY ---- */

/* Deck tab toggle */
.deck-empty {
  font-size: 0.9rem;
  color: var(--text-faint);
  text-align: center;
  padding: 32px 16px;
  line-height: 1.6;
}
/* Deck sort bar + type group headings */
.deck-sort-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-right: 2px;
}
.deck-sort-btn {
  flex: 1;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(20,20,35,0.7);
  color: var(--text-dim);
  border: 1px solid rgba(212,168,67,0.16);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.deck-sort-btn:hover { color: #ccc; border-color: rgba(212,168,67,0.4); }
.deck-sort-btn.active {
  background: rgba(212,168,67,0.18);
  color: var(--gold);
  border-color: rgba(212,168,67,0.5);
}
.deck-sort-dir { display: inline-block; min-width: 0.9em; font-size: 0.7em; }
.deck-group-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(14,14,22,0.96);
  border-bottom: 1px solid rgba(212,168,67,0.3);
  border-radius: 4px;
}
.deck-group-head span { color: var(--text-dim); font-size: 0.8rem; }
.party-ov-tag.deck-tag {
  background: rgba(80,120,200,0.2);
  color: #8ab4f8;
  border: 1px solid rgba(80,120,200,0.35);
}

.party-ov-entry {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(20,20,30,0.9);
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.party-ov-entry:hover {
  border-color: var(--gold);
  background: rgba(30,28,20,0.9);
}
.party-ov-entry.selected {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(212,168,67,0.3);
}
.party-ov-entry.move-target {
  border-color: #4488ff;
  background: rgba(20,30,50,0.9);
}
.party-ov-entry.fainted {
  opacity: 0.5;
}
.party-ov-art {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #3a3a4a;
  flex-shrink: 0;
}
.party-ov-art-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #1a1a2a;
  border: 1px solid #3a3a4a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--gold-light);
  flex-shrink: 0;
}
.party-ov-info {
  flex: 1;
  min-width: 0;
}
.party-ov-name {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: var(--gold-light);
}
.party-ov-detail {
  font-size: 0.85rem;
  color: var(--text-dim);
}
.party-ov-hp-bar {
  width: 120px;
  height: 7px;
  background: #1a1a2a;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.party-ov-hp-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}
.party-ov-tag {
  font-size: 0.66rem;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.party-ov-tag.starter {
  background: rgba(212,168,67,0.2);
  color: var(--gold);
  border: 1px solid rgba(212,168,67,0.4);
}
.party-ov-tag.lead {
  background: rgba(39,174,96,0.2);
  color: var(--green);
  border: 1px solid rgba(39,174,96,0.4);
}

/* Monster action buttons (Move/Summary/Release) */
.party-ov-actions {
  display: flex;
  gap: 7px;
  flex-shrink: 0;
}
.pov-action-btn {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 13px;
  border: 1px solid #3a3a4a;
  border-radius: 6px;
  background: rgba(20,20,30,0.8);
  color: #aaa;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s;
}
.pov-action-btn:hover {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(40,35,20,0.8);
}
.pov-action-btn.release:hover {
  border-color: var(--red);
  color: #e74c3c;
  background: rgba(40,15,15,0.8);
}
.pov-action-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Summary sub-panel */
.summary-header {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.summary-art img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid var(--gold);
}
.summary-art .party-ov-art-placeholder {
  width: 80px;
  height: 80px;
  font-size: 2rem;
}
.summary-info {
  flex: 1;
}
.summary-name {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--gold-light);
}
.summary-meta {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.summary-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  width: 100%;
  background: rgba(20,20,30,0.8);
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  padding: 10px 14px;
}
.summary-stat {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
}
.summary-stat .stat-label {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.72rem;
}
.summary-stat .stat-value {
  color: var(--gold-light);
  font-weight: 600;
}
.summary-attacks {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.summary-attack {
  background: rgba(20,20,30,0.8);
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  padding: 8px 12px;
}
.summary-atk-name {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: var(--gold-light);
}
.summary-atk-detail {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.summary-atk-desc {
  font-size: 0.72rem;
  color: var(--text-faint);
  font-style: italic;
  margin-top: 2px;
}


/* ---- PAUSE MENU ---- */
.pause-btn {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  padding: 14px 0;
  border: 1px solid #3a3a5a;
  background: rgba(20,20,35,0.95);
  color: var(--text-soft);
  font-size: 0.95rem;
  cursor: pointer;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-radius: 6px;
  transition: all 0.25s;
  width: 100%;
}
.pause-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(40,30,10,0.95);
  box-shadow: 0 0 18px rgba(212,168,67,0.15);
  transform: translateY(-1px);
}
.pause-btn.save {
  border-color: #4a9;
  color: #4a9;
}
.pause-btn.save:hover {
  border-color: #5cb;
  color: #5cb;
  box-shadow: 0 0 18px rgba(68,170,153,0.2);
}
.pause-btn.danger:hover {
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 18px rgba(192,57,43,0.15);
}

/* ---- GAME OVER ---- */
#gameover-screen {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
#gameover-screen h2 { font-family: 'Cinzel', serif; font-size: 2rem; color: var(--red); letter-spacing: 4px; }
#gameover-screen p  { color: var(--text-warm-dim); }
#gameover-screen .defeat-where { max-width: 460px; text-align: center; color: var(--gold-light); font-size: 1.05rem; line-height: 1.5; }
#gameover-screen .defeat-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
#gameover-screen .btn.dim { border-color: #4a4a5a; color: var(--text-dim); }
#gameover-screen .btn.dim:hover { border-color: #8a8a9a; color: #c0c0d0; background: transparent; box-shadow: none; }

/* ---- NOTIFICATION TOAST ---- */
#notification {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: rgba(10,10,18,0.96);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  letter-spacing: 2px;
  padding: 10px 28px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 100;
  white-space: normal;                 /* a long toast wraps inside the window instead of running off it (it was nowrap) */
  width: max-content;
  max-width: min(760px, calc(100vw - 48px));
  text-align: center;
  line-height: 1.45;
  box-shadow: 0 0 24px rgba(212,168,67,0.2);
}
#notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- MAP OVERLAY ---- */
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #9a8a7a;
  letter-spacing: 1px;
}
.legend-color {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ---- PROGRESS OVERLAY ---- */
  /* Starter Zone — green */
  /* Midlands — orange */
  /* Deep Wilds — amber/gold */
  /* Forbidden Zone — purple */

/* ---- ACHIEVEMENTS OVERLAY ---- */

/* ---- INVENTORY OVERLAY ---- */
.inv-empty {
  color: var(--text-faint);
  font-size: 0.85rem;
  text-align: center;
  padding: 24px 12px;
}
.inv-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(20,20,35,0.9);
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: 12px 16px;
}
.inv-card-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}
.inv-card-info { flex: 1; min-width: 0; }
.inv-card-name {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: var(--gold-light);
}
.inv-card-qty { color: var(--text-dim); font-size: 0.8rem; }
.inv-card-desc {
  font-size: 0.8rem;
  color: var(--text-warm-dim);
  margin-top: 4px;
}
.inv-use-btn {
  flex-shrink: 0;
  width: auto;
  padding: 8px 18px;
}
.inv-section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-warm-dim);
  margin-top: 10px;
}

/* ---- HELD ITEMS (helditems.js) ---- */
.held-badge { display: inline-block; margin-left: 5px; font-size: 0.9em; line-height: 1; cursor: help; filter: drop-shadow(0 0 2px rgba(255,215,120,0.45)); }
.held-block { margin: 10px 0 6px; padding: 10px 12px; background: rgba(20,20,35,0.9); border: 1px solid #2a2a3a; border-radius: 10px; }
.held-title { font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-warm-dim); margin-bottom: 6px; }
.held-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.held-row.empty { color: var(--text-faint); font-size: 0.85rem; }
.held-icon { font-size: 1.7rem; flex-shrink: 0; }
.held-info { flex: 1; min-width: 150px; }
.held-name { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--gold-light); }
.held-tag { font-family: inherit; font-size: 0.66rem; color: #b08a5a; letter-spacing: 0; }
.held-desc { font-size: 0.8rem; color: var(--text-warm-dim); margin-top: 2px; }
.held-hint { font-size: 0.72rem; color: #5a5a6a; }
#held-list { display: flex; flex-direction: column; gap: 10px; width: min(92vw, 560px); }
.held-card { display: flex; align-items: center; gap: 14px; background: rgba(20,20,35,0.9); border: 1px solid #2a2a3a; border-radius: 10px; padding: 12px 16px; cursor: pointer; transition: all 0.2s; }
.held-card:hover { border-color: var(--gold); }
.held-card-icon { font-size: 1.8rem; flex-shrink: 0; }
.held-card-info { flex: 1; min-width: 0; }
.held-card-name { font-family: 'Cinzel', serif; font-size: 0.9rem; color: var(--gold-light); }
.held-card-desc { font-size: 0.8rem; color: var(--text-warm-dim); margin-top: 3px; }
.held-pick-note { text-align: center; color: var(--text-warm-dim); font-size: 0.8rem; }
.held-mons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.held-mons .fusion-entry { width: 96px; }
.held-mon-now { font-size: 0.62rem; color: var(--text-warm-dim); margin-top: 2px; }
.mon-held { min-height: 1.1em; font-size: calc(0.75 * var(--rem)); color: #d8c690; margin-top: 2px; }
.mon-plate.enemy .mon-held { color: #e0a8a0; }

/* ---- FUSION PICKER ---- */
#fusion-modal, #held-modal {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(6,6,10,0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 55;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 16px;
  gap: 12px;
  overflow-y: auto;
}
#fusion-modal.active, #held-modal.active { display: flex; }
#fusion-modal h2, #held-modal h2 {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.05rem, 3vw, 1.4rem);
  color: var(--gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
}
#fusion-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 10px;
  width: min(92vw, 560px);
}
/* The panel is as tall as the screen at most (.ov-panel): the list scrolls inside it, and the title, the preview and the Close button stay
   in view (a big collection used to run off the bottom of the panel, Close with it, with no way to scroll: 2026-11-04) */
#fusion-list, #held-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 6px 4px 2px; scrollbar-width: thin; scrollbar-color: rgba(212,168,67,0.35) transparent; }
#fusion-modal .ov-panel > :not(#fusion-list), #held-modal .ov-panel > :not(#held-list) { flex-shrink: 0; }
#fusion-list:empty { display: none; }
.fusion-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 84px;
  background: rgba(20,20,35,0.9);
  border: 1px solid #2a2a3a;
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.fusion-entry:hover { border-color: var(--gold); }
.fusion-entry.ineligible { opacity: 0.35; cursor: default; }
.fusion-entry.ineligible:hover { border-color: #2a2a3a; }
.fusion-entry-art {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.fusion-entry-info { text-align: center; }
.fusion-entry-name {
  font-size: 0.72rem;
  color: var(--gold-light);
  line-height: 1.2;
}
.fusion-entry-level, .fusion-preview-level { font-size: 0.66rem; color: var(--text-dim); }
#fusion-preview:empty { display: none; }
.fusion-preview-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.fusion-preview-mon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--gold-light);
  width: 90px;
}
.fusion-preview-mon.result { color: var(--gold); }
.fusion-preview-art {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #3a3a4a;
  display: block;
}
.fusion-preview-mon.result .fusion-preview-art { border-color: var(--gold); }
.fusion-preview-mon.result .fusion-preview-level { color: var(--gold-light); }    /* (the level it comes out at: the higher of the two, main.js fusionResultLevel) */
.fusion-preview-plus, .fusion-preview-arrow {
  font-size: 1.4rem;
  color: var(--text-dim);
  flex-shrink: 0;
}
.fusion-warning {
  font-size: 0.8rem;
  color: var(--red);
  text-align: center;
  max-width: 420px;
  margin: 4px 0;
}
.fusion-confirm-buttons {
  display: flex;
  gap: 10px;
  width: min(92vw, 360px);
}
.fusion-confirm-buttons .pause-btn { width: auto; flex: 1; }

/* ---- FUSION VORTEX ANIMATION ---- */
#fusion-anim-stage {
  display: none;
  position: relative;
  width: 100%;
  height: 220px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#fusion-anim-stage.active { display: flex; }

#fusion-vortex-disc {
  position: absolute;
  left: 50%; top: 50%;
  width: 200px; height: 200px;
  margin-left: -100px; margin-top: -100px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(200,144,255,0.55) 0deg 9deg,
    rgba(60,10,110,0.15) 9deg 18deg
  );
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 55%, transparent 80%);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 55%, transparent 80%);
}
#fusion-vortex-disc.spinning {
  opacity: 1;
  animation: fusionVortexSpin 1.1s linear infinite;
}
#fusion-vortex-disc.fading {
  animation: none;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}
@keyframes fusionVortexSpin {
  0%   { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(180deg) scale(1.10); }
  100% { transform: rotate(360deg) scale(1);    }
}

.fusion-anim-art {
  position: absolute;
  left: 50%; top: 50%;
  width: 84px; height: 84px;
  margin-left: -42px; margin-top: -42px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--gold);
  opacity: 0;
}
.fusion-anim-art.side-a.spiral-in { animation: fusionSpiralA 0.95s cubic-bezier(0.55,0,0.85,0.35) forwards; }
.fusion-anim-art.side-b.spiral-in { animation: fusionSpiralB 0.95s cubic-bezier(0.55,0,0.85,0.35) forwards; }
@keyframes fusionSpiralA {
  0%   { transform: translate(-96px, -8px)  rotate(0deg)   scale(1);    opacity: 1; }
  30%  { transform: translate(-52px, -46px) rotate(150deg) scale(0.85); opacity: 1; }
  65%  { transform: translate(-18px, 22px)  rotate(300deg) scale(0.55); opacity: 1; }
  100% { transform: translate(0, 0)         rotate(430deg) scale(0.1); opacity: 0; }
}
@keyframes fusionSpiralB {
  0%   { transform: translate(96px, 8px)    rotate(0deg)    scale(1);    opacity: 1; }
  30%  { transform: translate(52px, 46px)   rotate(-150deg) scale(0.85); opacity: 1; }
  65%  { transform: translate(18px, -22px)  rotate(-300deg) scale(0.55); opacity: 1; }
  100% { transform: translate(0, 0)         rotate(-430deg) scale(0.1); opacity: 0; }
}

#fusion-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(230,204,255,0.95) 0%, rgba(160,96,224,0.45) 40%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
@keyframes fusionFlashAnim { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
#fusion-flash.active { animation: fusionFlashAnim 0.45s ease-out forwards; }

.fusion-shockwave {
  position: absolute;
  left: 50%; top: 50%;
  width: 90px; height: 90px;
  margin-left: -45px; margin-top: -45px;
  border-radius: 50%;
  border: 3px solid rgba(200,144,255,0.9);
  opacity: 0;
}
.fusion-shockwave.active { animation: fusionShockwave 0.65s ease-out forwards; }
@keyframes fusionShockwave {
  0%   { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0;   }
}

#fusion-anim-result {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
}
#fusion-anim-result.rising { animation: fusionResultRise 0.75s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes fusionResultRise {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; filter: brightness(2.6); }
  55%  { transform: translate(-50%, -50%) scale(1.18); opacity: 1; filter: brightness(1.3); }
  100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; filter: brightness(1);   }
}
#fusion-anim-result-img {
  width: 96px; height: 96px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--gold);
}
#fusion-anim-result-label {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: var(--gold-light);
  text-align: center;
  max-width: 180px;
}
.fusion-btn-disabled { opacity: 0.4; pointer-events: none; }

/* ---- FUSION VIDEO (cutscene played after a fusion completes) ---- */
#fusion-video-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 150;                 /* above every other overlay and the toast */
  background: #000;
  align-items: center;
  justify-content: center;
  /* no fade-in: a fade would show the first frames ghosted over the fusion screen */
}
#fusion-video-overlay.active { display: flex; }
#fusion-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
#fusion-video-skip {
  position: absolute;
  right: 18px;
  bottom: 18px;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 9px 18px;
  color: var(--gold);
  background: rgba(8,8,14,0.7);
  border: 1px solid rgba(212,168,67,0.45);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;                   /* hidden so it never sits on the picture... */
  transition: opacity 0.3s, border-color 0.2s;
}
#fusion-video-overlay.hint #fusion-video-skip { opacity: 0.7; }   /* ...except at the start and when the mouse moves */
#fusion-video-skip:hover { opacity: 1; border-color: var(--gold); }

/* ---- OPTIONS OVERLAY ---- */

/* Tabs */

/* ---- MUSIC TAB ---- */
.music-vol-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
}
.music-vol-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
}
.music-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 9px;
  border-radius: 6px;
  background: #2a2a3a;
  outline: none;
  cursor: pointer;
}
.music-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(212,168,67,0.5);
}
.music-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: none;
}
.music-vol-pct {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  color: var(--gold);
  min-width: 46px;
  text-align: right;
}
.music-mute-row {
  display: flex;
  justify-content: center;
  padding: 4px 0 14px;
}
.music-mute-btn {
  width: 220px;
  font-size: 1.0rem;
  padding: 12px 24px;
}
.music-now-playing {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  color: var(--text-dim);
  padding: 8px 4px 16px;
  border-left: 2px solid var(--gold);
  padding-left: 14px;
  margin: 4px 0;
}

/* Body */
.options-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.options-panel h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid #2a2a3a;
  padding-bottom: 5px;
}
.options-panel h3:first-child { margin-top: 0; }
.options-desc {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 10px;
}
.options-desc strong { color: var(--gold-light); }

/* Control rows */
.control-row {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.95rem;
  color: #b0a898;
  padding: 7px 0;
}
.control-key {
  display: inline-block;
  min-width: 86px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gold);
  background: rgba(212,168,67,0.1);
  border: 1px solid rgba(212,168,67,0.25);
  border-radius: 4px;
  padding: 4px 10px;
  text-align: center;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

/* Type chart */
.type-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.type-row {
  background: rgba(20,20,35,0.8);
  border: 1px solid #2a2a3a;
  border-radius: 8px;
  padding: 10px 14px;
}
.type-name {
  font-family: 'Cinzel', serif;
  font-size: 1.0rem;
  color: var(--gold-light);
  margin-bottom: 7px;
  letter-spacing: 1px;
}
.type-matchups {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.type-strong, .type-weak {
  font-size: 0.9rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.type-tag {
  display: inline-block;
  font-size: 0.8rem;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.type-tag.strong { background: rgba(80,180,60,0.2); color: #78c850; border: 1px solid rgba(80,180,60,0.3); }
.type-tag.weak   { background: rgba(200,60,60,0.15); color: #e05050; border: 1px solid rgba(200,60,60,0.25); }
.type-tag.neutral { color: var(--text-faint); }

/* Scrollbar */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2a3a; border-radius: 2px; }

/* Hide cancel button when monster fainted (player must choose) */
#switch-modal.faint-mode .switch-cancel { display: none; }

/* ---- Trainer mid-battle swap modal ---- */
#trainer-swap-modal {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 14px;
}
#trainer-swap-modal.active { display: flex; }
#trainer-swap-msg {
  color: var(--text);
  font-size: 1rem;
  text-align: center;
  line-height: 1.5;
}
#trainer-swap-msg strong { color: var(--gold); }
#trainer-swap-list {
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- NPC pre-battle dialogue box ---- */
#npc-dialogue-box {
  display: none;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 700px;
  background: rgba(4, 4, 18, 0.97);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 16px 20px;
  z-index: 200;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 -6px 36px rgba(212,168,67,0.22), 0 4px 20px rgba(0,0,0,0.7);
}
#npc-dialogue-box.active {
  display: flex;
  animation: dlgSlideUp 0.28s cubic-bezier(0.22,1,0.36,1);
}
@keyframes dlgSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(18px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}
.npc-dlg-portrait {
  font-size: 1.9rem;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,168,67,0.10);
  flex-shrink: 0;
  margin-top: 2px;
}
/* A face instead of a symbol: the speaker's head and shoulders (ui.js setPortrait), on a soft light in a rounded frame */
.npc-dlg-portrait.face, .npc-outro-portrait.face {
  width: 72px; height: 72px; border-radius: 12px; overflow: hidden; font-size: 0; margin-top: 0;
  background: radial-gradient(circle at 50% 40%, rgba(240,215,140,0.30), rgba(70,48,110,0.55) 58%, rgba(14,10,30,0.95) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.5);
}
.npc-dlg-portrait.face canvas, .npc-outro-portrait.face canvas { display: block; width: 100%; height: 100%; }
.npc-dlg-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.npc-dlg-name {
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.npc-dlg-text {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.65;
  min-height: 42px;
  cursor: pointer;
}
.npc-dlg-text::after {
  content: '▌';
  animation: dlgCursor 0.7s steps(1) infinite;
  color: var(--gold);
  margin-left: 1px;
}
.npc-dlg-text.done::after { display: none; }
.npc-dlg-btn {
  align-self: flex-start;
  padding: 7px 20px;
  font-size: 0.85rem;
  background: rgba(212,168,67,0.15);
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.18s;
}
.npc-dlg-btn:hover { background: rgba(212,168,67,0.28); }
@keyframes dlgCursor { 50% { opacity: 0; } }

.npc-dlg-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.npc-preview-chip {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.npc-preview-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #3a3a4a;
  display: block;
}
.npc-preview-lvl {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: rgba(4,4,18,0.95);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 1px 4px;
  line-height: 1.3;
}

/* ---- PORTAL TRANSITION ---- */
#portal-transition {
  position: absolute;
  inset: 0;
  z-index: 400;
  background: #000;
  opacity: 0;
  transform: scale(1.15);
  pointer-events: none;
  transition: opacity 300ms ease, transform 300ms ease;
}
#portal-transition.active {
  opacity: 1;
  transform: scale(1);
}

/* ---- NPC outro dialogue modal ---- */
#npc-outro-modal {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(2,2,14,0.55);
  z-index: 300;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 20px;
}
#npc-outro-modal.active { display: flex; }
.npc-outro-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: calc(100% - 48px);
  max-width: 700px;
  background: rgba(4, 4, 18, 0.97);
  border: 2px solid var(--gold);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 -6px 36px rgba(212,168,67,0.22), 0 4px 20px rgba(0,0,0,0.7);
  animation: dlgSlideUp 0.28s cubic-bezier(0.22,1,0.36,1);
}
.npc-outro-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.npc-outro-portrait {
  font-size: 1.9rem;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,168,67,0.10);
  flex-shrink: 0;
}
.npc-outro-name {
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 700;
}
.npc-outro-text {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.65;
  font-style: italic;
  min-height: 36px;
}
.npc-outro-btn {
  flex-shrink: 0;
  padding: 8px 20px;
  font-size: 0.85rem;
  align-self: center;
}

/* ═══════════ SHADOW TOURNAMENT ═══════════ */

#tournament-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 90;
  background: radial-gradient(ellipse at 50% 0%, rgba(58,22,84,0.97) 0%, rgba(10,6,22,0.98) 62%);
  overflow-y: auto;
  padding: 20px 16px 36px;
  justify-content: center;
  align-items: flex-start;
}
#tournament-overlay.active { display: flex; }
.tour-panel { width: min(960px, 100%); display: flex; flex-direction: column; gap: 14px; zoom: var(--ov, 1); }      /* (--ov: menu.js overlayScaleFor, 1 unless the window is short) */
.tour-head { text-align: center; }
.tour-head h2 { font-family: 'Cinzel', serif; font-size: clamp(1.3rem, 3.4vw, 1.9rem); color: var(--gold); letter-spacing: 5px; text-transform: uppercase; }
.tour-sub { color: var(--text-muted); letter-spacing: 2px; font-size: 0.85rem; margin-top: 4px; }
.tour-card { background: rgba(14,10,28,0.86); border: 1px solid #2f2750; border-radius: 12px; padding: 14px 16px; }
.tour-card-title { font-family: 'Cinzel', serif; color: #d8c48a; letter-spacing: 2px; font-size: 0.85rem; text-transform: uppercase; margin-bottom: 10px; }
.tour-note { color: var(--text-dim); font-size: 0.72rem; letter-spacing: 1px; text-transform: none; margin-left: 6px; }
.tour-rules { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: #cfc8e0; font-size: 0.9rem; line-height: 1.45; }
.tour-stats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tour-stat { min-width: 128px; flex: 1; max-width: 220px; text-align: center; background: rgba(14,10,28,0.86); border: 1px solid #2f2750; border-radius: 10px; padding: 10px 8px; }
.tour-stat .ts-v { font-family: 'Cinzel', serif; font-size: 1.6rem; color: var(--gold-light); }
.tour-stat .ts-l { font-size: 0.72rem; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }

.tour-party { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.tour-mon { position: relative; background: rgba(24,18,44,0.9); border: 1px solid #332b58; border-radius: 10px; padding: 8px; text-align: center; }
.tour-mon.down { opacity: 0.55; filter: grayscale(0.7); }
.tour-mon.bonus { border-color: #fbbf24; box-shadow: 0 0 14px rgba(251,191,36,0.35); }
.tour-mon-art { width: 74px; height: 74px; object-fit: cover; border-radius: 8px; display: block; margin: 0 auto 6px; }
.tm-name { font-family: 'Cinzel', serif; font-size: 0.8rem; color: #e8dcc0; line-height: 1.2; min-height: 1.9em; }
.tm-meta { font-size: 0.72rem; color: #8a9ab5; margin-top: 2px; }
.tm-hp { height: 6px; background: #1a1a2a; border-radius: 3px; overflow: hidden; margin-top: 6px; }
.tm-hp > div { height: 100%; background: var(--green); border-radius: 3px; }
.tm-hp > div.low { background: #e67e22; }
.tm-hp > div.critical { background: var(--red); }
.tm-hptext { font-size: 0.66rem; color: var(--text-dim); margin-top: 2px; }
.tm-bonus { margin-top: 4px; font-size: 0.66rem; color: #fbbf24; letter-spacing: 1px; }

.tour-opp { display: flex; gap: 20px; align-items: center; }
.tour-sprite { width: 112px; height: 160px; image-rendering: pixelated; flex-shrink: 0; }
.tour-opp-name { font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--gold-light); letter-spacing: 2px; }
.tour-opp-line { margin: 8px 0; color: #cfc8e0; font-style: italic; line-height: 1.45; }
.tour-opp-meta { font-size: 0.85rem; color: #b9b2d4; margin-top: 4px; }
.tour-quote { text-align: center; font-style: italic; color: #d4cce8; line-height: 1.5; }
.tour-quote-by { margin-top: 6px; font-style: normal; font-size: 0.8rem; color: var(--text-dim); letter-spacing: 1px; }
.tour-gained { color: #fbbf24; line-height: 1.7; }
.tour-note-line { color: var(--text-muted); font-size: 0.85rem; text-align: center; }

.tour-boons { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.tour-boon { cursor: pointer; text-align: center; background: rgba(40,26,70,0.85); border: 1px solid #4a3a80; border-radius: 12px; padding: 14px 10px; transition: all 0.2s; }
.tour-boon:hover { border-color: #fbbf24; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(251,191,36,0.2); }
.tb-icon { font-size: 2rem; }
.tb-name { font-family: 'Cinzel', serif; color: var(--gold-light); letter-spacing: 1px; margin: 4px 0; }
.tb-desc { font-size: 0.8rem; color: #cfc8e0; line-height: 1.4; }

.tour-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tour-actions .pause-btn { width: auto; min-width: 190px; padding: 14px 24px; }
.tour-actions .pause-btn.tour-go { border-color: var(--gold); color: var(--gold-light); }
.tour-actions .pause-btn:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 640px) { .tour-opp { flex-direction: column; text-align: center; } }

/* ═══════════ DECK TOOLS: filters, selection, favourites, team presets, confirm dialog ═══════════ */
.deck-tools { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 6px; }
.dt-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dt-spacer { flex: 1; }
.dt-input, .dt-select {
  font-family: 'Rajdhani', sans-serif; font-size: 0.9rem; color: var(--text-body);
  background: rgba(20,20,35,0.85); border: 1px solid rgba(212,168,67,0.22); border-radius: 6px; padding: 6px 10px; outline: none;
}
.dt-input { flex: 1 1 160px; min-width: 120px; }
.dt-select { flex: 0 1 auto; max-width: 150px; }
.dt-input:focus, .dt-select:focus { border-color: rgba(212,168,67,0.7); }
.dt-select option { background: #14141f; color: var(--text-body); }
.dt-count { font-size: 0.8rem; color: var(--text-dim); letter-spacing: 1px; }
.dt-btn {
  font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  background: rgba(20,20,35,0.85); color: #b9b2d0; border: 1px solid rgba(212,168,67,0.2); border-radius: 6px; padding: 5px 11px; cursor: pointer; transition: all 0.2s;
}
.dt-btn:hover { color: var(--gold); border-color: rgba(212,168,67,0.6); }
.dt-btn.active { background: rgba(212,168,67,0.18); color: var(--gold); border-color: rgba(212,168,67,0.55); }
.dt-btn.danger { border-color: rgba(192,57,43,0.5); color: #e88; }
.dt-btn.danger:hover { background: rgba(192,57,43,0.2); border-color: #e74c3c; color: #ffb0a8; }
.dt-selcount { color: var(--gold); font-weight: 700; }
.dt-input::-webkit-search-cancel-button { display: none; }                /* the Reset button does that job */
.dt-selectbar { background: rgba(212,168,67,0.07); border: 1px solid rgba(212,168,67,0.18); border-radius: 8px; padding: 6px 8px; }

/* a row crowded by tags and four buttons (the lead starter) wraps its buttons to a second line instead of squeezing the name */
#party-ov-list .party-ov-entry { flex-wrap: wrap; row-gap: 8px; }
#party-ov-list .party-ov-info { min-width: 130px; }
#party-ov-list .party-ov-actions { margin-left: auto; }
.fusion-fav { color: #ff4f7a; }
.fav-btn { background: none; border: none; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0 6px 0 0; color: var(--text-faint); vertical-align: middle; transition: color 0.15s, transform 0.15s; }
.fav-btn:hover { color: #ff7a9a; transform: scale(1.2); }
.fav-btn.on { color: #ff4f7a; text-shadow: 0 0 8px rgba(255,79,122,0.5); }
.sel-box { font-size: 1.3rem; width: 30px; text-align: center; flex-shrink: 0; color: #a8a2c0; }
.sel-box.on { color: var(--gold); }
.sel-box.locked { opacity: 0.55; font-size: 1.05rem; }
.party-ov-entry.selecting { cursor: pointer; }
.party-ov-entry.selecting:hover { border-color: rgba(212,168,67,0.5); }
.party-ov-entry.picked { background: rgba(212,168,67,0.12); border-color: rgba(212,168,67,0.6); }

.team-presets { width: 100%; max-width: 640px; display: flex; gap: 8px; flex-wrap: wrap; }
.tp-slot { flex: 1 1 180px; background: rgba(20,20,35,0.8); border: 1px solid rgba(212,168,67,0.18); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.tp-slot.active { border-color: rgba(120,220,150,0.6); box-shadow: 0 0 10px rgba(120,220,150,0.18); }
.tp-slot.empty { opacity: 0.8; border-style: dashed; }
.tp-name { font-family: 'Cinzel', serif; font-size: 0.85rem; color: var(--gold-light); background: transparent; border: none; border-bottom: 1px dashed transparent; outline: none; width: 100%; padding: 2px 0; }
.tp-name:hover:not(:disabled), .tp-name:focus { border-bottom-color: rgba(212,168,67,0.5); }
.tp-art { display: flex; gap: 3px; min-height: 30px; align-items: center; flex-wrap: wrap; }
.tp-thumb { width: 26px; height: 26px; object-fit: cover; border-radius: 4px; border: 1px solid #2a2a3a; }
.tp-empty { color: var(--text-faint); font-size: 0.8rem; letter-spacing: 1px; }
.tp-btns { display: flex; gap: 5px; }
.tp-btn { flex: 1; white-space: nowrap; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; background: rgba(30,30,50,0.9); color: #c0b8d0; border: 1px solid #3a3a5a; border-radius: 6px; padding: 5px 4px; cursor: pointer; }
.tp-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.tp-btn:disabled { opacity: 0.4; cursor: default; }
.tp-head { display: flex; align-items: center; gap: 4px; }
.tp-x { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 0.9rem; padding: 0 3px; line-height: 1; }
.tp-x:hover { color: #e88; }
.tp-miss { font-size: 0.72rem; color: #e0a060; margin-left: 4px; }

#confirm-modal { display: none; position: absolute; inset: 0; z-index: 100; background: rgba(4,4,10,0.78); align-items: center; justify-content: center; padding: 20px; }
#confirm-modal.active { display: flex; }
.confirm-box { width: min(440px, 100%); background: linear-gradient(180deg, rgba(22,16,44,0.97), rgba(9,7,20,0.98)); border: 1px solid rgba(212,168,67,0.35); border-radius: 16px; padding: 18px 20px; box-shadow: 0 24px 80px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.03); }   /* (the framed panel of the menus and the other overlays: .ov-panel) */
.confirm-box h3 { font-family: 'Cinzel', serif; color: var(--gold); letter-spacing: 2px; margin: 0 0 10px; }
.confirm-body { color: #cfc8e0; font-size: 0.9rem; line-height: 1.45; }
.confirm-body p { margin: 6px 0; }
.confirm-list { list-style: none; margin: 8px 0; padding: 8px 10px; max-height: 190px; overflow-y: auto; background: rgba(0,0,0,0.3); border-radius: 8px; display: flex; flex-direction: column; gap: 3px; }
.confirm-list li { display: flex; justify-content: space-between; gap: 10px; }
.confirm-list li span { color: var(--text-dim); font-size: 0.8rem; }
.confirm-warn { color: #e0a060; }
.confirm-btns { display: flex; gap: 10px; margin-top: 14px; }
.confirm-btns .pause-btn { flex: 1; padding: 11px 0; }
#confirm-ok.danger { border-color: rgba(192,57,43,0.7); color: #ffb0a8; background: rgba(192,57,43,0.22); }
#confirm-ok.danger:hover { background: rgba(192,57,43,0.4); border-color: #e74c3c; }

/* ═══════════ FRAMED OVERLAY PANELS ═══════════
   The overlays that are not menu screens (the shop, the fusion picker, the held-item picker) sit in the same framed panel as the
   menu screens (menu.css .mn-frame: the violet gradient, the thin gold border, the rounded corners, the deep shadow), shrunk to a
   short window like the tournament panel (--ov, menu.js), instead of floating on the dark screen with a Close bar as wide as it. */
.ov-panel {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  width: min(100%, 640px); max-height: 100%; margin: auto; overflow: hidden; zoom: var(--ov, 1);
  background: linear-gradient(180deg, rgba(22,16,44,0.94), rgba(9,7,20,0.96));
  border: 1px solid rgba(212,168,67,0.3); border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.03);
  padding: 18px 22px;
}
.ov-panel.ov-wide { width: min(100%, 900px); }
.ov-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(212,168,67,0.16); }
.ov-head h2 { flex: 1; margin: 0; text-align: left; }
.ov-body { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(212,168,67,0.3) transparent; padding-right: 4px; }
.ov-close, .ov-panel > .pause-btn {                       /* the menus' Back button (menu.css .mn-back) */
  align-self: center; width: auto; min-width: 0; padding: 8px 22px; border-radius: 20px;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase;
  border: 1px solid rgba(212,168,67,0.4); background: transparent; color: var(--gold-light); cursor: pointer; transition: all 0.18s; white-space: nowrap;
}
.ov-close:hover, .ov-panel > .pause-btn:hover { background: rgba(212,168,67,0.14); box-shadow: 0 0 14px rgba(212,168,67,0.25); transform: none; }

/* ═══════════ SHOP ═══════════ */
#shop-overlay {
  display: none; position: absolute; inset: 0; z-index: 50;
  background: rgba(6,6,10,0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  flex-direction: column; align-items: center; padding: 20px 16px 16px; overflow-y: auto;
}
#shop-overlay.active { display: flex; }
#shop-overlay h2 { font-family: 'Cinzel', serif; font-size: 1.5rem; color: var(--gold); letter-spacing: 4px; text-transform: uppercase; }
/* the wares: two columns of cards, with the wallet and the tier headings across both */
#shop-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
#shop-content > .shop-wallet, #shop-content > .shop-section, #shop-content > .shop-empty { grid-column: 1 / -1; }
.shop-empty { color: var(--text-muted); font-size: 0.95rem; text-align: center; padding: 34px 14px; line-height: 1.6; background: rgba(255,255,255,0.03); border: 1px dashed #3a3a52; border-radius: 12px; }
.shop-empty-icon { font-size: 2.2rem; margin-bottom: 6px; opacity: 0.8; }
.shop-card { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px 14px; transition: border-color 0.15s, background 0.15s; }
.shop-card:hover { border-color: rgba(212,168,67,0.45); background: rgba(212,168,67,0.05); }
.shop-card-icon { flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.10), rgba(0,0,0,0.25)); border: 1px solid rgba(212,168,67,0.25); }
.shop-card-info { flex: 1; min-width: 0; }
.shop-card-name { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--gold-light); }
.shop-card-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.3; margin-top: 2px; }
.shop-card-buy { display: flex; flex-direction: column; align-items: stretch; gap: 6px; flex-shrink: 0; }
.shop-card-price { color: var(--gold); font-weight: 700; white-space: nowrap; text-align: center; font-size: 0.95rem; }
.shop-card .pause-btn { width: auto; padding: 7px 16px; font-size: 0.8rem; letter-spacing: 2px; border-radius: 8px; }
.shop-card .pause-btn:disabled { opacity: 0.4; cursor: default; }
.shop-card.poor { opacity: 0.8; }
.shop-owned { display: inline-block; font-family: 'Rajdhani', sans-serif; font-size: 0.72rem; letter-spacing: 0; color: #d0aa6c; margin-left: 6px; padding: 0 7px; border-radius: 20px; background: rgba(212,168,67,0.12); white-space: nowrap; vertical-align: 2px; }
.shop-wallet { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 12px; font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--gold); padding: 10px 14px; background: rgba(212,168,67,0.07); border: 1px solid rgba(212,168,67,0.22); border-radius: 12px; }
.shop-wallet span { font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0; }
.shop-section { display: flex; align-items: center; gap: 10px; font-family: 'Cinzel', serif; font-size: 0.8rem; letter-spacing: 3px; text-transform: uppercase; color: #a08a6a; margin-top: 6px; }
.shop-section::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(212,168,67,0.25), rgba(212,168,67,0)); }
.inv-wallet { text-align: center; font-family: 'Cinzel', serif; color: var(--gold); font-size: 1rem; padding: 6px 0 2px; }

/* the white flash when the Shadow Tournament throws you back into the shop */
#knock-flash { position: absolute; inset: 0; z-index: 399; background: #fff; opacity: 0; pointer-events: none; }
#knock-flash.go { animation: knockFlash 0.7s ease-out; }
@keyframes knockFlash { 0% { opacity: 0.92; } 100% { opacity: 0; } }

/* ═══════════ THE KEYBOARD CURSOR OUTSIDE THE MENU SCREENS ═══════════
   The title and the opening screens, the save slots, the Pharaoh's gift and a battle's modals take the arrow keys and Enter (menu.js).
   What has the keyboard looks like what the mouse is over, plus a gold outline. (The menu screens style theirs in menu.css.) */
.title-btn:focus-visible, .intro-skip-btn:focus-visible, .btn:focus-visible, .pause-btn:focus-visible, .slot-delete-btn:focus-visible,
.switch-cancel:focus-visible, #title-sound-btn:focus-visible { outline: 2px solid var(--gold-light, #f0d878); outline-offset: 3px; }
.slot-card:focus-visible { outline: 2px solid var(--gold-light, #f0d878); outline-offset: 2px; border-color: var(--gold); box-shadow: 0 0 16px rgba(212,168,67,0.2); }
.starter-card:focus-visible { outline: 2px solid var(--gold-light, #f0d878); outline-offset: 3px; border-color: var(--gold); transform: translateY(-8px) scale(1.02); box-shadow: 0 12px 40px rgba(212,168,67,0.2); }
.starter-card:focus-visible .starter-card-art { transform: scale(1.05); }
.starter-card.static:focus-visible { transform: none; }
.switch-entry:focus-visible { outline: 2px solid var(--gold-light, #f0d878); outline-offset: 2px; border-color: var(--gold); }

/* the ending card (worldextras.js) */
.end-card { text-align: center; max-width: 560px; margin: 0 auto; line-height: 1.55; color: #e8e0f0; }
.end-card p { margin: 0 0 12px; }
.end-lead { font-size: 1.1em; color: var(--gold-light, #f0d878); }
.end-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.end-stat { background: rgba(255,255,255,0.05); border: 1px solid rgba(212,168,67,0.25); border-radius: 8px; padding: 8px 4px; }
.end-stat b { display: block; font-size: 1.25em; color: var(--gold-light, #f0d878); }
.end-stat span { font-size: 0.78em; opacity: 0.75; }
.end-team span { color: var(--gold-light, #f0d878); margin-right: 6px; }
.end-foot { font-size: 0.8em; opacity: 0.6; letter-spacing: 0.08em; text-transform: uppercase; }