/* =====================================================
   PhilipG — Wizard of the Islands
   Stylesheet
   ===================================================== */

:root {
  --purple-900: #2e1065;
  --purple-800: #4c1d95;
  --purple-700: #5b21b6;
  --purple-600: #6d28d9;
  --purple-500: #7c3aed;
  --purple-400: #a78bfa;
  --purple-300: #c4b5fd;
  --gold:       #fbbf24;
  --gold-light: #fde68a;
  --teal:       #14b8a6;
  --teal-light: #5eead4;
  --pink:       #ec4899;
  --red:        #ef4444;
  --green:      #22c55e;
  --blue:       #3b82f6;
  --ink:        #0f172a;
  --paper:      #fefce8;
  --shadow-md:  0 4px 12px rgba(0,0,0,0.25);
  --shadow-lg:  0 8px 28px rgba(0,0,0,0.35);
  --font-display: 'Trebuchet MS', 'Comic Sans MS', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  height: 100%; width: 100%;
  overflow: hidden;          /* outer page locked; individual screens scroll internally */
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--purple-900);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* =====================================================
   Screen stack
   ===================================================== */
.screen-host {
  position: relative; width: 100vw; height: 100vh;
  overflow: hidden;
}
.screen {
  position: absolute; inset: 0;
  display: none; flex-direction: column;
  background: var(--purple-900);
  overflow-y: auto;                    /* per-screen scroll when content > viewport */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;   /* smooth iOS momentum */
  overscroll-behavior: contain;        /* don't bounce parent */
  /* Respect device safe areas (iOS notch, Android nav bar) so nothing
     gets hidden behind hardware UI on tablets and phones. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.screen.active { display: flex; }

/* Inside any scrolling screen, every direct child should keep its natural size
   instead of being compressed by flex layout. This is the universal fix for
   "I can't see the bottom" on short viewports. */
.screen > * { flex-shrink: 0; }

/* =====================================================
   Player Select
   ===================================================== */
/* Override the flex layout from .screen.active — block layout always scrolls cleanly */
#screen-player-select.active {
  display: block;
  background: linear-gradient(180deg, #1e1b4b 0%, #5b21b6 50%, #7c3aed 100%);
  position: relative;
}
.title-bg {
  /* Fixed positioning so the bg never participates in layout/scroll calculations */
  position: fixed; inset: 0;
  background:
    radial-gradient(2px 2px at 20% 20%, #fff8 50%, transparent 60%),
    radial-gradient(2px 2px at 80% 30%, #fff6 50%, transparent 60%),
    radial-gradient(1px 1px at 35% 70%, #fff8 50%, transparent 60%),
    radial-gradient(2px 2px at 70% 80%, #fffa 50%, transparent 60%),
    radial-gradient(1px 1px at 50% 50%, #fff9 50%, transparent 60%),
    radial-gradient(1px 1px at 10% 90%, #fff7 50%, transparent 60%),
    radial-gradient(2px 2px at 90% 60%, #fff8 50%, transparent 60%);
  background-size: 400px 400px;
  opacity: 0.6;
  animation: twinkle 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes twinkle { from { opacity: 0.3; } to { opacity: 0.9; } }

.title-wrap {
  /* min-height: 100vh fills viewport AND grows with content (scrolls when taller) */
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;     /* vertical center when content fits */
  text-align: center;
  padding: 24px 16px;
  max-width: 800px;
  margin: 0 auto;              /* horizontal center only */
  box-sizing: border-box;
}
.game-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 10vw, 96px);
  margin: 0;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 4px 0 var(--purple-900), 0 6px 20px rgba(0,0,0,0.5);
}
.title-philip { color: var(--gold); }
.title-g { color: var(--teal-light); }
.subtitle {
  color: #e9d5ff;
  font-size: clamp(18px, 3vw, 24px);
  margin: 8px 0 32px;
  letter-spacing: 1px;
}
.player-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 480px) {
  .player-cards { grid-template-columns: 1fr; }
}
.player-card {
  background: linear-gradient(180deg, #fefce8 0%, #fde68a 100%);
  border: 4px solid var(--gold);
  border-radius: 20px;
  padding: 20px 16px;
  box-shadow: var(--shadow-lg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 44px;
}
.player-card:hover, .player-card:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.player-card:active { transform: scale(0.98); }
.player-avatar { width: 140px; height: 140px; }
.player-avatar svg { width: 100%; height: 100%; display: block; }
.player-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--purple-800);
  margin-top: 4px;
}
.player-grade {
  font-size: 14px; color: var(--ink); opacity: 0.7;
}
.player-progress {
  font-size: 12px;
  background: var(--purple-700);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 4px;
}

.ghost-btn {
  background: transparent;
  color: #e9d5ff;
  border: 2px solid #a78bfa;
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.ghost-btn.small { padding: 6px 14px; font-size: 12px; }
.ghost-btn:hover { background: #a78bfa; color: var(--purple-900); }

.primary-btn {
  background: linear-gradient(180deg, var(--gold) 0%, #f59e0b 100%);
  color: var(--purple-900);
  border-radius: 999px;
  padding: 16px 32px;
  font-size: 20px;
  font-weight: 900;
  font-family: var(--font-display);
  box-shadow: 0 4px 0 #b45309, var(--shadow-md);
  transition: transform 0.1s ease;
  min-height: 44px;
}
.primary-btn:hover { transform: translateY(-2px); }
.primary-btn:active { transform: translateY(2px); box-shadow: 0 0 0 #b45309, var(--shadow-md); }

/* =====================================================
   Top Bar / HUD
   ===================================================== */
.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(46,16,101,0.95), rgba(46,16,101,0.7));
  backdrop-filter: blur(8px);
  color: #fff;
  border-bottom: 2px solid var(--purple-500);
  z-index: 5;
  flex: 0 0 auto;
}
.icon-btn {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease;
}
.icon-btn:hover { background: rgba(255,255,255,0.25); }
.hud { text-align: center; }
.hud-name {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 900;
  color: var(--gold-light);
}
.hud-stats { display: flex; gap: 12px; justify-content: center; font-size: 14px; margin-top: 4px; }
.stat { display: inline-flex; align-items: center; gap: 4px; }
.stat-icon { font-size: 14px; }
.stat.hp .stat-icon { color: var(--red); }
.stat.mp .stat-icon { color: var(--teal-light); }
.stat.lv .stat-icon { color: var(--gold); }

/* =====================================================
   World Map
   ===================================================== */
.map-canvas {
  flex: 1; position: relative; overflow: hidden;
  background: linear-gradient(180deg, #0c4a6e 0%, #155e75 60%, #0e7490 100%);
}
.map-ocean {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 200px 60px at 20% 20%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(ellipse 250px 80px at 70% 40%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(ellipse 180px 50px at 40% 70%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(ellipse 220px 70px at 80% 85%, rgba(255,255,255,0.06), transparent 60%);
  animation: oceanShift 12s ease-in-out infinite alternate;
}
@keyframes oceanShift { from { transform: translateX(0); } to { transform: translateX(20px); } }

.map-islands {
  position: absolute; inset: 0;
}
.map-island {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  text-align: center;
  transition: transform 0.2s ease;
  width: 160px;
}
.map-island:hover { transform: translate(-50%, -55%); }
.map-island svg { width: 120px; height: 120px; display: block; margin: 0 auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4)); }
.map-island.locked { opacity: 0.45; cursor: not-allowed; }
.map-island.locked:hover { transform: translate(-50%, -50%); }
.map-island.cleared svg { filter: drop-shadow(0 0 12px var(--gold)) drop-shadow(0 6px 8px rgba(0,0,0,0.4)); }
.island-label {
  background: var(--purple-900); color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700; font-size: 14px;
  display: inline-block;
  border: 2px solid var(--gold);
  margin-top: 6px;
  white-space: nowrap;
}
.map-island.locked .island-label { border-color: #6b7280; opacity: 0.8; }
.map-island.cleared .island-label { background: var(--gold); color: var(--purple-900); }
.island-status {
  display: block; font-size: 11px; opacity: 0.9; margin-top: 2px; color: #fff;
}

.map-footer {
  padding: 8px 16px;
  text-align: center;
  background: rgba(0,0,0,0.4);
  color: #fff;
  flex: 0 0 auto;
}
.map-hint { margin: 0; font-size: 14px; }

/* ===== Walker (the player avatar on the world map) ===== */
.map-walker {
  position: absolute;
  width: 70px; height: 88px;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4));
}
.map-walker svg { width: 100%; height: 100%; }
.map-walker.bobbing {
  animation: walkBob 0.3s ease-in-out;
}
@keyframes walkBob {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-6px); }
}
.map-walker.facing-left svg { transform: scaleX(-1); }

/* Island highlighted when walker is close enough */
.map-island.near {
  animation: nearPulse 1s ease-in-out infinite alternate;
}
@keyframes nearPulse {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -55%) scale(1.08); filter: drop-shadow(0 0 16px var(--gold)); }
}

/* Floating prompt that appears when player is on an island */
.map-prompt {
  position: absolute;
  z-index: 4;
  background: var(--gold);
  color: var(--purple-900);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 900;
  font-family: var(--font-display);
  font-size: 14px;
  border: 3px solid var(--purple-800);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
  animation: promptBob 0.6s ease-in-out infinite alternate;
  cursor: pointer;
  pointer-events: auto;
}
@keyframes promptBob {
  from { transform: translate(-50%, -50%) translateY(0); }
  to   { transform: translate(-50%, -50%) translateY(-4px); }
}

/* Touch D-pad — only shows where most useful (mobile/tablet) */
.map-controls {
  position: absolute;
  bottom: 56px;
  right: 16px;
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
  gap: 4px;
  z-index: 5;
}
.dpad {
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 2px solid var(--gold);
  border-radius: 12px;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  -webkit-touch-callout: none;
  transition: background 0.1s ease, transform 0.08s ease;
}
.dpad:active { background: var(--gold); color: var(--purple-900); transform: scale(0.92); }
.dpad.up    { grid-column: 2; grid-row: 1; }
.dpad.left  { grid-column: 1; grid-row: 2; }
.dpad.right { grid-column: 3; grid-row: 2; }
.dpad.down  { grid-column: 2; grid-row: 3; }

/* Hide D-pad on big screens — they have keyboards */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .map-controls { display: none; }
}

/* =====================================================
   Island Screen
   ===================================================== */
/* ===== Island canvas (walkable scene) ===== */
.island-canvas {
  position: relative;
  flex: 1 0 auto;
  min-height: 60vh;
  overflow: hidden;
  background: #0c4a6e;
}
.island-bg {
  position: absolute; inset: 0; z-index: 0;
}
.island-bg svg { width: 100%; height: 100%; display: block; }

.island-enemies {
  position: absolute; inset: 0; z-index: 1;
}

.island-enemy {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 120px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}
.island-enemy svg { width: 90px; height: 90px; }
.island-enemy .enemy-label {
  display: inline-block;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  margin-top: 2px;
  border: 2px solid var(--gold);
  white-space: nowrap;
}
.island-enemy.boss .enemy-label {
  border-color: var(--red);
  background: rgba(127, 29, 29, 0.9);
}
.island-enemy.wild-pet .enemy-label {
  border-color: #22c55e;
  background: rgba(20, 83, 45, 0.9);
}
.island-enemy.wild-pet svg {
  animation: wildBob 1.8s ease-in-out infinite alternate;
}
@keyframes wildBob {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}
.island-enemy.boss svg {
  animation: bossLoom 2.5s ease-in-out infinite alternate;
}
@keyframes bossLoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.island-enemy.defeated {
  opacity: 0.25;
  pointer-events: none;
  filter: grayscale(1);
}

/* Locked boss (wild pet not yet defeated) */
.island-enemy.locked {
  pointer-events: none;
}
.island-enemy.locked::after {
  content: '🔒';
  position: absolute;
  top: -8px; right: -8px;
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
.island-enemy.locked svg {
  filter: grayscale(0.6) brightness(0.7);
  animation: none;
}
.island-enemy.locked .enemy-label {
  opacity: 0.7;
}

/* Enemy highlights when player is close */
.island-enemy.near {
  filter: drop-shadow(0 0 20px var(--gold)) drop-shadow(0 4px 6px rgba(0,0,0,0.4));
  transform: translate(-50%, -55%) scale(1.1);
}
.island-enemy.near.wild-pet {
  filter: drop-shadow(0 0 20px #22c55e) drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}
.island-enemy.near.boss {
  filter: drop-shadow(0 0 24px var(--red)) drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}

/* ===== Island walker (player avatar on the island) ===== */
.island-walker {
  position: absolute;
  width: 70px; height: 88px;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5));
}
.island-walker svg { width: 100%; height: 100%; }
.island-walker.bobbing { animation: walkBob 0.3s ease-in-out; }
.island-walker.facing-left svg { transform: scaleX(-1); }

/* Floating prompt above an enemy when player is close */
.island-prompt {
  position: absolute;
  z-index: 4;
  background: var(--gold);
  color: var(--purple-900);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 900;
  font-family: var(--font-display);
  font-size: 14px;
  border: 3px solid var(--purple-800);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
  animation: promptBob 0.6s ease-in-out infinite alternate;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
}
.island-prompt.boss-prompt { background: var(--red); color: #fff; border-color: #fef2f2; }
.island-prompt.pet-prompt  { background: #22c55e; color: #052e16; border-color: #bbf7d0; }
.island-prompt.locked-prompt { background: #6b7280; color: #fff; border-color: #1f2937; animation: none; cursor: not-allowed; }
.island-enemy {
  background: rgba(0,0,0,0.4);
  border: 3px solid var(--gold);
  border-radius: 16px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease;
  width: 140px;
}
.island-enemy:hover { transform: scale(1.05); }
.island-enemy.defeated {
  opacity: 0.4;
  border-color: #6b7280;
  cursor: default;
}
.island-enemy.defeated:hover { transform: none; }
.island-enemy.boss {
  border-color: var(--red);
  background: rgba(127,29,29,0.5);
}
.island-enemy svg { width: 80px; height: 80px; }
.island-enemy .enemy-label { color: #fff; font-weight: 700; margin-top: 6px; font-size: 14px; }
.island-enemy .enemy-hp-mini {
  margin-top: 4px; font-size: 11px;
  color: var(--gold-light);
}

/* =====================================================
   Battle
   ===================================================== */
#screen-battle {
  background: #1e1b4b;
  min-height: 100%;            /* ensures flex children stack and scroll cleanly */
}
.battle-bg {
  position: absolute; inset: 0; z-index: 0;
  min-height: 100vh;           /* keeps backdrop covering even when content scrolls */
}
.battle-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, #312e81 0%, #4c1d95 50%, #1e1b4b 100%);
}
.battle-enemy {
  position: relative; z-index: 1;
  text-align: center;
  padding: 24px 16px 8px;
  flex: 0 0 auto;       /* never shrink */
}
.enemy-name {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 22px; font-weight: 900;
  text-shadow: 2px 2px 0 var(--purple-900);
}
.enemy-sprite {
  display: inline-block;
  width: 160px; height: 160px;
  margin-top: 8px;
  animation: enemyFloat 3s ease-in-out infinite alternate;
}
.enemy-sprite svg { width: 100%; height: 100%; }
@keyframes enemyFloat { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.enemy-sprite.hit { animation: enemyHit 0.4s ease; }
@keyframes enemyHit {
  0%, 100% { transform: translateX(0); filter: none; }
  20% { transform: translateX(-12px); filter: brightness(2) hue-rotate(-30deg); }
  40% { transform: translateX(12px); filter: brightness(2) hue-rotate(20deg); }
  60% { transform: translateX(-8px); filter: brightness(1.5); }
  80% { transform: translateX(8px); }
}
.enemy-sprite.defeated { animation: enemyDefeated 1s ease forwards; }
@keyframes enemyDefeated {
  to { transform: scale(0) rotate(360deg); opacity: 0; }
}
.hp-bar {
  width: 240px; max-width: 80vw;
  height: 14px;
  background: #1e1b4b;
  border: 2px solid var(--gold);
  border-radius: 999px;
  margin: 6px auto 0;
  overflow: hidden;
}
.hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #16a34a, #4ade80);
  transition: width 0.35s ease;
}
.hp-fill.low { background: linear-gradient(90deg, #b91c1c, #f87171); }
.mp-bar {
  width: 240px; max-width: 80vw;
  height: 10px;
  background: #1e1b4b;
  border: 2px solid var(--teal-light);
  border-radius: 999px;
  margin: 4px auto 0;
  overflow: hidden;
}
.mp-fill {
  height: 100%;
  background: linear-gradient(90deg, #0d9488, #5eead4);
  transition: width 0.35s ease;
}

.battle-player {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  padding: 8px 16px;
  flex-wrap: wrap;
  flex: 0 0 auto;        /* never shrink — content can push panel past viewport */
}

/* Active pets sit beside the wizard during battle */
.battle-pets {
  display: flex; align-items: flex-end; gap: 4px;
}
.battle-pet {
  width: 64px; height: 64px;
  animation: petBob 2s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.battle-pet svg { width: 100%; height: 100%; }
.battle-pet:nth-child(2) { animation-delay: 0.3s; }
.battle-pet:nth-child(3) { animation-delay: 0.6s; }
.battle-pet:nth-child(4) { animation-delay: 0.9s; }
@keyframes petBob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.player-sprite { width: 140px; height: 140px; }
.player-sprite svg { width: 100%; height: 100%; }
.player-sprite.cast { animation: cast 0.6s ease; }
@keyframes cast {
  0% { transform: scale(1); }
  30% { transform: scale(1.12) translateY(-6px); filter: drop-shadow(0 0 12px var(--gold)); }
  60% { transform: scale(0.98); }
  100% { transform: scale(1); filter: none; }
}
.player-sprite.hit { animation: enemyHit 0.4s ease; }
.player-stats {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  color: #fff;
}
.player-hpname { font-family: var(--font-display); font-weight: 900; color: var(--gold-light); }
.hp-text, .mp-text { font-size: 12px; color: #e9d5ff; }
.player-stats .hp-bar, .player-stats .mp-bar { margin: 4px 0 0; }

.battle-panel {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #fefce8, #fde68a);
  border-top: 4px solid var(--gold);
  padding: 16px;
  min-height: 200px;
  /* CRITICAL: don't shrink. Content like 6 spells + question + 4 answers can
     easily exceed remaining viewport space. flex-shrink: 0 forces the panel
     to its natural content size, which makes the parent .screen scroll. */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  max-height: none;
}
.panel-stage { display: none; flex-direction: column; gap: 12px; flex: 1; }
.panel-stage.active { display: flex; }

.panel-prompt {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 900; color: var(--purple-800);
  margin: 0; text-align: center;
}
.spell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
.spell-btn {
  background: linear-gradient(180deg, #fff, #fef3c7);
  border: 3px solid var(--purple-500);
  border-radius: 14px;
  padding: 10px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  min-height: 80px;
  font-family: var(--font-display);
}
.spell-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.spell-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.spell-icon { font-size: 28px; line-height: 1; }
.spell-name { font-weight: 900; color: var(--purple-800); font-size: 13px; text-align: center; }
.spell-cost { font-size: 11px; color: var(--teal); font-weight: 700; }
.spell-locked { font-size: 10px; color: #6b7280; }

.question-subject {
  display: inline-block;
  background: var(--purple-700); color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  margin: 0 auto;
  text-transform: uppercase; letter-spacing: 1px;
}
.question-text {
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 900;
  color: var(--purple-900);
  text-align: center;
  margin: 0;
  line-height: 1.3;
  min-height: 60px;
  display: flex; align-items: center; justify-content: center;
}
.answer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 380px) {
  .answer-grid { grid-template-columns: 1fr; }
}
.answer-btn {
  background: linear-gradient(180deg, #fff, #fef9c3);
  border: 3px solid var(--purple-500);
  border-radius: 14px;
  padding: 16px 12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--purple-900);
  text-align: center;
  transition: transform 0.1s ease, background 0.2s ease, border-color 0.2s ease;
  min-height: 60px;
}
.answer-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.answer-btn.correct {
  background: linear-gradient(180deg, #bbf7d0, #4ade80);
  border-color: var(--green);
  animation: pulseGood 0.4s ease;
}
.answer-btn.wrong {
  background: linear-gradient(180deg, #fecaca, #f87171);
  border-color: var(--red);
}
@keyframes pulseGood {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.feedback-text {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 900;
  text-align: center;
  margin: 0;
  animation: popIn 0.3s ease;
}
.feedback-text.good { color: var(--green); text-shadow: 2px 2px 0 #064e3b; }
.feedback-text.bad  { color: var(--red);   text-shadow: 2px 2px 0 #7f1d1d; }
.feedback-sub {
  text-align: center; font-size: 18px; font-weight: 700;
  margin: 4px 0 0; color: var(--purple-800);
}
@keyframes popIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.floating-text-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* =====================================================
   Battle FX Layer — projectiles, particles, slashes
   ===================================================== */
.battle-fx-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}
.battle-fx-layer > * { position: absolute; }

/* Wind-up glow at caster position */
.fx-windup {
  width: 80px; height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  animation: fxWindup 0.4s ease-out;
  filter: blur(2px);
}
@keyframes fxWindup {
  from { transform: scale(0.3); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  to   { transform: scale(1.4); opacity: 0; }
}

/* Projectile traveling from caster to target */
.fx-projectile {
  font-size: 44px;
  margin: -22px 0 0 -22px;
  filter: drop-shadow(0 0 12px currentColor);
  will-change: transform;
  text-shadow: 0 0 20px currentColor;
}

/* Arc trajectory (Spark, Fireball) */
.traj-arc {
  animation: trajArc 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes trajArc {
  0%   { transform: translate(0,0) rotate(0deg) scale(0.6); }
  50%  { transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5 - 60px)) rotate(180deg) scale(1.1); }
  100% { transform: translate(var(--dx), var(--dy)) rotate(360deg) scale(1); }
}

/* Sweep trajectory (Tidal Wave) — straight horizontal sweep */
.traj-sweep {
  font-size: 80px;
  margin: -40px 0 0 -40px;
  animation: trajSweep 0.5s ease-out forwards;
}
@keyframes trajSweep {
  from { transform: translate(0,0) scaleX(0.3); opacity: 0.4; }
  to   { transform: translate(var(--dx), var(--dy)) scaleX(1.6); opacity: 1; }
}

/* Swirl trajectory (Leaf Storm) — spiraling */
.traj-swirl {
  animation: trajSwirl 0.55s ease-in-out forwards;
}
@keyframes trajSwirl {
  0%   { transform: translate(0,0) rotate(0deg) scale(0.5); }
  50%  { transform: translate(calc(var(--dx) * 0.5 + 40px), calc(var(--dy) * 0.5 - 30px)) rotate(540deg) scale(1); }
  100% { transform: translate(var(--dx), var(--dy)) rotate(1080deg) scale(1.2); }
}

/* Strike trajectory (Thunder) — fast straight bolt */
.traj-strike {
  font-size: 56px;
  margin: -28px 0 0 -28px;
  animation: trajStrike 0.3s ease-in forwards;
}
@keyframes trajStrike {
  from { transform: translate(0,0) scale(0.4); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(1.3); opacity: 1; }
}

/* Crash trajectory (Meteor) — falling from sky */
.traj-crash {
  font-size: 72px;
  margin: -36px 0 0 -36px;
  animation: trajCrash 0.7s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
@keyframes trajCrash {
  0%   { transform: translate(calc(var(--dx) * 0.5), -400px) rotate(0deg) scale(0.4); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(720deg) scale(1.4); opacity: 1; }
}

/* Self-target (Heal) — pulses on the player */
.traj-self {
  animation: trajSelf 0.6s ease-out forwards;
}
@keyframes trajSelf {
  0%   { transform: scale(0.3); opacity: 0; }
  40%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Particles flying outward from impact */
.fx-particle {
  font-size: 28px;
  margin: -14px 0 0 -14px;
  filter: drop-shadow(0 0 4px currentColor);
  animation: particleBurst 0.8s ease-out forwards;
}
@keyframes particleBurst {
  0%   { transform: translate(0,0) scale(0.6) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(1.2) rotate(360deg); opacity: 0; }
}
.fx-particle-victory {
  font-size: 32px;
  animation: particleVictory 1.2s ease-out forwards;
}
@keyframes particleVictory {
  0%   { transform: translate(0,0) scale(0.3); opacity: 1; }
  40%  { opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(1.6) rotate(720deg); opacity: 0; }
}

/* Impact bursts — each spell type has its own */
.fx-impact-sparkle, .fx-impact-explode, .fx-impact-splash, .fx-impact-burst,
.fx-impact-shock, .fx-impact-crater, .fx-impact-glow {
  width: 120px; height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  animation: impactRipple 0.6s ease-out;
}
.fx-impact-explode {
  background: radial-gradient(circle, #fde047 0%, #f97316 30%, transparent 70%);
  animation: impactExplode 0.6s ease-out;
}
.fx-impact-crater {
  width: 180px; height: 180px;
  margin: -90px 0 0 -90px;
  background: radial-gradient(circle, #fde047 0%, #dc2626 30%, transparent 70%);
  animation: impactExplode 0.7s ease-out;
}
.fx-impact-shock {
  background: radial-gradient(circle, #fde047 0%, #facc15 40%, transparent 70%);
  animation: impactShock 0.6s ease-out;
}
.fx-impact-splash {
  background: radial-gradient(circle, #bfdbfe 0%, #3b82f6 30%, transparent 70%);
  animation: impactRipple 0.6s ease-out;
}
.fx-impact-glow {
  background: radial-gradient(circle, #bbf7d0 0%, #22c55e 40%, transparent 70%);
  animation: impactGlow 0.8s ease-out;
}
@keyframes impactRipple {
  from { transform: scale(0.2); opacity: 1; }
  to   { transform: scale(1.6); opacity: 0; }
}
@keyframes impactExplode {
  0%   { transform: scale(0.2); opacity: 1; }
  40%  { transform: scale(1.3); opacity: 1; filter: brightness(1.5); }
  100% { transform: scale(2); opacity: 0; }
}
@keyframes impactShock {
  0%, 30%, 60% { transform: scale(1.2); opacity: 1; filter: brightness(2); }
  15%, 45%, 100% { transform: scale(1.6); opacity: 0.4; filter: brightness(1); }
}
@keyframes impactGlow {
  from { transform: scale(0.4); opacity: 0; }
  40%  { transform: scale(1.2); opacity: 0.9; }
  to   { transform: scale(1.8); opacity: 0; }
}

/* Lightning bolt from sky on thunder spell */
.fx-lightning {
  width: 12px;
  height: 100vh;
  top: 0;
  margin-left: -6px;
  background: linear-gradient(180deg, transparent 0%, #fde047 30%, #fff 70%, #fde047 100%);
  box-shadow: 0 0 30px #fde047, 0 0 60px #fde047;
  animation: lightningFlash 0.35s ease-out;
  clip-path: polygon(50% 0, 100% 30%, 40% 40%, 80% 60%, 30% 70%, 70% 100%, 50% 100%, 0% 70%, 60% 60%, 20% 40%, 80% 30%);
}
@keyframes lightningFlash {
  0%, 100% { opacity: 0; }
  10%, 30%, 50% { opacity: 1; }
  20%, 40%      { opacity: 0.3; }
}

/* Slash mark for enemy attacks */
.fx-slash {
  width: 140px; height: 14px;
  margin: -7px 0 0 -70px;
  background: linear-gradient(90deg, transparent 0%, #fff 20%, #ef4444 50%, #fff 80%, transparent 100%);
  border-radius: 999px;
  filter: drop-shadow(0 0 10px #ef4444);
  animation: slashSweep 0.4s ease-out;
}
@keyframes slashSweep {
  0%   { transform: rotate(-45deg) scaleX(0); opacity: 1; }
  40%  { transform: rotate(-45deg) scaleX(1.2); opacity: 1; }
  100% { transform: rotate(-45deg) scaleX(1); opacity: 0; }
}

.fx-hit-ring {
  width: 100px; height: 100px;
  margin: -50px 0 0 -50px;
  border: 4px solid currentColor;
  border-radius: 50%;
  animation: hitRing 0.5s ease-out;
  box-shadow: 0 0 20px currentColor;
}
@keyframes hitRing {
  from { transform: scale(0.3); opacity: 1; }
  to   { transform: scale(1.8); opacity: 0; }
}

/* Full-screen color flash */
.fx-hitflash {
  position: fixed; inset: 0;
  opacity: 0.4;
  animation: hitFlashFade 0.22s ease-out;
  pointer-events: none;
}
@keyframes hitFlashFade {
  from { opacity: 0.5; }
  to   { opacity: 0; }
}

/* Enemy wind-up: grows + tints */
.fx-enemy-windup {
  animation: enemyWindup 0.28s ease-in !important;
}
@keyframes enemyWindup {
  0%   { transform: scale(1); filter: none; }
  100% { transform: scale(1.15) translateY(-8px); filter: brightness(1.4) drop-shadow(0 0 12px #ef4444); }
}

/* Enemy lunge: zips forward then snaps back */
.fx-enemy-lunge {
  animation: enemyLunge 0.25s cubic-bezier(0.6, 0, 0.4, 1) !important;
}
@keyframes enemyLunge {
  0%   { transform: scale(1.15) translateY(0); }
  50%  { transform: scale(1.2) translateY(60px); filter: brightness(1.4); }
  100% { transform: scale(1) translateY(0); filter: none; }
}

/* Player stagger after being hit */
.fx-player-stagger {
  animation: playerStagger 0.5s ease-out !important;
}
@keyframes playerStagger {
  0%   { transform: rotate(0deg) translateX(0); }
  20%  { transform: rotate(-12deg) translateX(-16px); filter: brightness(0.7); }
  40%  { transform: rotate(8deg)  translateX(8px); }
  60%  { transform: rotate(-4deg) translateX(-4px); }
  100% { transform: rotate(0deg) translateX(0); filter: none; }
}

/* Screen shake — applied to #screen-battle */
.fx-shake {
  animation: screenShake 0.4s cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(calc(var(--shake-px) * -1), calc(var(--shake-px) * 0.5)); }
  20% { transform: translate(calc(var(--shake-px) *  1), calc(var(--shake-px) * -0.5)); }
  30% { transform: translate(calc(var(--shake-px) * -0.8), calc(var(--shake-px) * 0.3)); }
  40% { transform: translate(calc(var(--shake-px) *  0.8), calc(var(--shake-px) * -0.3)); }
  50% { transform: translate(calc(var(--shake-px) * -0.5), calc(var(--shake-px) * 0.2)); }
  60% { transform: translate(calc(var(--shake-px) *  0.5), 0); }
  70% { transform: translate(calc(var(--shake-px) * -0.3), 0); }
  80% { transform: translate(calc(var(--shake-px) *  0.2), 0); }
}
.floating-text {
  position: absolute;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 900;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
  animation: floatUp 1.2s ease-out forwards;
}
.floating-text.damage { color: var(--gold-light); }
.floating-text.heal { color: var(--green); }
.floating-text.miss { color: #cbd5e1; }
@keyframes floatUp {
  from { opacity: 1; transform: translateY(0) scale(0.6); }
  20% { opacity: 1; transform: translateY(-30px) scale(1.2); }
  to { opacity: 0; transform: translateY(-90px) scale(1); }
}

/* =====================================================
   Result Screen
   ===================================================== */
#screen-result.active {
  display: block;
  background: radial-gradient(circle at center, #5b21b6, #1e1b4b);
}
.result-wrap {
  /* Same bulletproof pattern: min-height viewport + inner flex centering */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 24px 16px;
  max-width: 600px;
  margin: 0 auto;
  box-sizing: border-box;
}
#result-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 72px);
  margin: 0 0 12px;
  color: var(--gold);
  text-shadow: 0 4px 0 var(--purple-900);
  animation: popIn 0.5s ease;
}
#result-message { font-size: 18px; margin: 0 0 24px; }
.result-rewards {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 24px;
}
.reward-line {
  background: rgba(255,255,255,0.1);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: 700;
}

/* =====================================================
   Spellbook Modal
   ===================================================== */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.modal[hidden] { display: none; }
.modal-content {
  background: linear-gradient(180deg, #fefce8, #fde68a);
  border: 4px solid var(--gold);
  border-radius: 20px;
  max-width: 500px; width: 100%; max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--purple-700);
  color: #fff;
}
.modal-header h3 { margin: 0; font-family: var(--font-display); }
.spellbook-list {
  padding: 16px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.spellbook-section-header {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  color: var(--purple-800);
  text-align: center;
  margin-top: 8px;
  padding: 6px 0;
  border-bottom: 2px solid var(--purple-500);
}
.spellbook-section-header:first-child { margin-top: 0; }

.spellbook-entry {
  background: rgba(255,255,255,0.6);
  border: 2px solid var(--purple-500);
  border-radius: 12px;
  padding: 12px;
  display: flex; align-items: center; gap: 12px;
}
.pet-entry .pet-icon-sprite {
  width: 56px; height: 56px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pet-entry .pet-icon-sprite svg { width: 100%; height: 100%; }
.pet-entry .big-lock { font-size: 36px; }
.spellbook-entry.locked { opacity: 0.5; border-style: dashed; }
.spellbook-entry .icon { font-size: 36px; line-height: 1; }
.spellbook-entry .info { flex: 1; }
.spellbook-entry .name { font-family: var(--font-display); font-weight: 900; color: var(--purple-800); }
.spellbook-entry .desc { font-size: 13px; color: var(--ink); }
.spellbook-entry .meta { font-size: 12px; color: var(--purple-700); margin-top: 2px; }

/* =====================================================
   Helpers
   ===================================================== */
.shake { animation: shakeFx 0.4s ease; }
@keyframes shakeFx {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* tablet / chromebook tweaks */
@media (min-height: 700px) and (min-width: 700px) {
  .question-text { min-height: 80px; }
  .battle-panel { min-height: 240px; }
}

/* =====================================================
   Short viewports (landscape phones, small Chromebooks)
   Shrink the heaviest elements so the battle screen
   doesn't require scrolling on common sizes.
   ===================================================== */
@media (max-height: 640px) {
  .enemy-sprite { width: 110px; height: 110px; }
  .player-sprite { width: 100px; height: 100px; }
  .battle-enemy { padding: 12px 12px 4px; }
  .battle-player { padding: 4px 12px; }
  .battle-panel { padding: 12px; min-height: 160px; }
  .answer-btn { padding: 12px 8px; font-size: 18px; min-height: 50px; }
  .spell-btn { min-height: 70px; padding: 8px 6px; }
  .spell-icon { font-size: 24px; }
  .question-text { min-height: 40px; font-size: clamp(18px, 4vw, 24px); }
  .feedback-text { font-size: clamp(24px, 6vw, 36px); }
  .top-bar { padding: 8px 12px; }
  .icon-btn { width: 40px; height: 40px; }
}

/* Tiny phones in portrait */
@media (max-width: 360px) {
  .game-title { font-size: 48px; }
  .player-avatar { width: 110px; height: 110px; }
  .player-card { padding: 16px 12px; }
  .spell-grid { grid-template-columns: 1fr 1fr; }
}

/* Make the spellbook modal always scroll its body */
.spellbook-list { max-height: calc(80vh - 60px); }