/* ============================================================
   CISSP TREK — gym-battle edition
   Retro handheld battle screen on the parchment field-guide page.
   The current boss's domain color arrives on .scene as --dc.
   ============================================================ */

:root {
  /* paper & ink (page frame) */
  --paper:      #f2ecdc;
  --paper-deep: #e9e0c8;
  --ink:        #22323c;
  --ink-soft:   #55676f;
  --line:       #c9bd9d;
  --stamp:      #a23b24;
  --gold:       #b98a2f;

  /* battle screen */
  --screen-sky:   #b8e6c8;
  --screen-grass: #7ccc8e;
  --panel:        #f8f4e0;
  --panel-edge:   #3a4a52;
  --hp-good:      #4cc45a;
  --hp-warn:      #e8b93c;
  --hp-crit:      #e04f3f;

  --card:   #faf6ea;
  --shadow: 0 10px 30px rgba(34, 50, 60, .18), 0 2px 0 rgba(34, 50, 60, .12);
  --good:   #2f7d4f;
  --bad:    #b3402e;

  --retro: "Press Start 2P", "IBM Plex Mono", monospace;
  --body:  "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%2322323c' stroke-opacity='0.055' stroke-width='1.4'%3E%3Cpath d='M-30 80c70-40 130-10 190 10s140 30 230-20M-30 140c80-40 150 0 210 20s150 20 240-30M-30 210c60-50 160-20 220 0s160 40 230-10M-30 280c90-30 140 10 200 30s170 0 250-40M-30 350c70-40 150-10 210 10s160 30 240-20'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.19 0 0 0 0 0.23 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   MASTHEAD
   ============================================================ */

.masthead { border-bottom: 3px double var(--ink); }

.masthead-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px 14px;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* little CSS pokéball-style compass */
.pokeball {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid var(--ink);
  background: linear-gradient(180deg, var(--stamp) 0 46%, var(--ink) 46% 54%, var(--paper) 54%);
  position: relative;
  animation: ballDrop .7s cubic-bezier(.3,1.6,.4,1) both;
}
.pokeball::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--ink);
}
@keyframes ballDrop { from { transform: translateY(-30px) rotate(-120deg); opacity: 0; } }

.masthead-text { flex: 1; min-width: 0; }

h1 {
  margin: 0;
  font-family: var(--retro);
  font-size: clamp(18px, 3vw, 26px);
  letter-spacing: .02em;
  line-height: 1.2;
  text-shadow: 3px 3px 0 rgba(34,50,60,.14);
}
.tagline { margin: 7px 0 0; color: var(--ink-soft); font-size: 12.5px; letter-spacing: .04em; }

/* mini badge dots in the header */
.badge-strip { display: flex; gap: 6px; flex: none; }
.badge-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--paper-deep);
  opacity: .35;
}
.badge-dot.earned { opacity: 1; background: var(--dc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dc) 35%, transparent); }

/* ============================================================
   LAYOUT
   ============================================================ */

.layout {
  max-width: 1180px;
  margin: 26px auto 60px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

/* ============================================================
   BATTLE FRAME
   ============================================================ */

.battle-frame {
  background: var(--card);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ---- the scene ---- */

.scene {
  position: relative;
  height: 360px;
  --ground1: #6fc083;   /* platform tint, overridden per domain scene */
  --ground2: #5db473;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--dc, #0f766e) 18%, var(--screen-sky)),
      var(--screen-sky) 55%,
      var(--screen-grass) 100%);
  border-bottom: 3px solid var(--ink);
  image-rendering: pixelated;
}

/* ---- per-domain backdrops (set as .scene-dN by game.js) ---- */

/* D1 GOVERNOWL — hall of governance: dawn light, marble columns */
.scene-d1 {
  --ground1: #9ec7ab; --ground2: #b7d6bf;
  background:
    radial-gradient(circle at 78% 18%, rgba(232,185,60,.8) 0 20px, rgba(232,185,60,.25) 38px, transparent 68px),
    repeating-linear-gradient(90deg, rgba(34,50,60,.06) 0 22px, transparent 22px 96px),
    linear-gradient(180deg, #f7ecd4 0%, #eedbae 52%, #cfe0d4 68%, #a8ccb4 100%);
}
/* D2 VAULTOISE — inside the vault: dial glow, panelled walls */
.scene-d2 {
  --ground1: #7c5a2b; --ground2: #98713a;
  background:
    radial-gradient(circle at 75% 32%, rgba(232,185,60,.4) 0 40px, transparent 92px),
    repeating-radial-gradient(circle at 75% 38%, transparent 0 52px, rgba(232,185,60,.3) 52px 56px, transparent 56px 112px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 3px, transparent 3px 36px),
    linear-gradient(180deg, #4a3117 0%, #6b4a23 62%, #3d2a12 100%);
}
/* D3 BASTIGON — castle night: stars over battlements */
.scene-d3 {
  --ground1: #3a3d85; --ground2: #4b4e9e;
  background:
    radial-gradient(#e0e7ff 1.5px, transparent 2.4px) 12px 8px / 84px 62px,
    radial-gradient(#c7d2fe 1.2px, transparent 2px) 46px 34px / 118px 88px,
    repeating-linear-gradient(90deg, #191642 0 24px, transparent 24px 48px) 0 47% / 48px 20px repeat-x,
    linear-gradient(180deg, #161233 0%, #2c2766 52%, #191642 52% 62%, #34367c 62%, #2c2f66 100%);
}
/* D4 PACKETULA — the wire: neon grid in the dark */
.scene-d4 {
  --ground1: #0b4a72; --ground2: #0e5c8d;
  background:
    radial-gradient(circle at 74% 30%, rgba(56,163,221,.4) 0 44px, transparent 98px),
    linear-gradient(rgba(56,163,221,.17) 1.5px, transparent 1.5px) 0 0 / 100% 30px,
    linear-gradient(90deg, rgba(56,163,221,.17) 1.5px, transparent 1.5px) 0 0 / 30px 100%,
    linear-gradient(180deg, #07253b 0%, #0a3a5c 62%, #062033 100%);
}
/* D5 KEYPURR — gate of keys: dusk arch and keyhole glow */
.scene-d5 {
  --ground1: #6d1e7a; --ground2: #8a2f98;
  background:
    radial-gradient(circle at 75% 28%, rgba(244,196,106,.6) 0 16px, rgba(244,196,106,.22) 32px, transparent 62px),
    repeating-radial-gradient(circle at 75% 34%, transparent 0 44px, rgba(226,150,240,.4) 44px 47px, transparent 47px 92px, rgba(226,150,240,.25) 92px 95px, transparent 95px 220px),
    linear-gradient(180deg, #33093a 0%, #5c1668 55%, #7b2287 76%, #45104d 100%);
}
/* D6 SCANTIS — the lab: graph paper and petri glow */
.scene-d6 {
  --ground1: #c4dda3; --ground2: #d6e8bc;
  background:
    radial-gradient(circle at 18% 68%, rgba(127,182,53,.28) 0 44px, transparent 78px),
    radial-gradient(circle at 84% 24%, rgba(127,182,53,.22) 0 30px, transparent 60px),
    linear-gradient(rgba(77,124,15,.13) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(77,124,15,.13) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(180deg, #f2f8e8 0%, #e2efcf 60%, #cfe3b2 100%);
}
/* D7 SIRENHOUND — ops room on fire: embers and hazard tape */
.scene-d7 {
  --ground1: #7c2320; --ground2: #96302c;
  background:
    radial-gradient(circle at 22% 38%, rgba(245,158,11,.32) 0 12px, transparent 30px),
    radial-gradient(circle at 58% 20%, rgba(245,158,11,.24) 0 9px, transparent 24px),
    radial-gradient(circle at 38% 55%, rgba(245,158,11,.18) 0 7px, transparent 20px),
    repeating-linear-gradient(45deg, #d97706 0 16px, #1c1917 16px 32px) 0 52% / 100% 15px repeat-x,
    linear-gradient(180deg, #1d0b0a 0%, #4c1210 55%, #6f1815 76%, #3a0e0c 100%);
}
/* D8 DEBUGON — code night: scanlines and a pink glow */
.scene-d8 {
  --ground1: #472a44; --ground2: #5a3555;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px),
    radial-gradient(circle at 74% 30%, rgba(244,114,182,.36) 0 42px, transparent 94px),
    linear-gradient(180deg, #171a26 0%, #2a2233 60%, #3d2438 100%);
}

/* sprites & platforms */
.spot { position: absolute; display: flex; flex-direction: column; align-items: center; }
.enemy-spot  { right: 9%;  top: 40px; }
.player-spot { left: 8%;   bottom: 6px; }

.platform {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 190px; height: 52px; border-radius: 50%;
  /* --ground1/2 come from the active scene so platforms match the backdrop */
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dc, #0f766e) 42%, var(--ground2)), color-mix(in srgb, var(--dc, #0f766e) 16%, var(--ground1)) 70%, transparent 72%);
  filter: drop-shadow(0 3px 0 rgba(34,50,60,.22));
}
.player-spot .platform { width: 230px; height: 58px; }

.sprite {
  position: relative; z-index: 1;
  line-height: 1;
  filter: drop-shadow(0 6px 4px rgba(20, 35, 25, .35));
  user-select: none;
}
.boss-sprite { padding-bottom: 10px; animation: idleBob 2.6s ease-in-out infinite; }
.boss-sprite svg { width: 152px; height: 152px; display: block; }
.hero-sprite { font-size: 96px; padding-bottom: 10px; animation: idleBob 3.1s ease-in-out infinite .6s; }
.hero-sprite svg { width: 140px; height: 152px; display: block; }
@keyframes idleBob { 50% { translate: 0 -5px; } }

/* battle animations (classes toggled by game.js) */
.boss-sprite.hit    { animation: hitFlash .4s steps(2) 2, recoilL .38s cubic-bezier(.2,1.6,.4,1); }
.boss-sprite.faint  { animation: faintDrop .9s ease-in forwards; }
.boss-sprite.enter  { animation: bossEnter .6s cubic-bezier(.3,1.5,.5,1) both; }
.boss-sprite.attack { animation: bossLunge .45s cubic-bezier(.3,1.8,.4,1); }
.hero-sprite.lunge  { animation: heroLunge .45s cubic-bezier(.3,1.8,.4,1); }
.hero-sprite.hurt   { animation: hitFlash .4s steps(2) 2, recoilR .38s cubic-bezier(.2,1.6,.4,1); }
.hero-sprite.faint  { animation: faintDrop .9s ease-in forwards; }
.hero-sprite.heal   { animation: healPulse .8s ease; }

/* recoil — the struck fighter gets knocked back, then snaps in */
@keyframes recoilL { 0% { translate: 0 0; } 22% { translate: 26px -10px; rotate: 7deg; } 100% { translate: 0 0; rotate: 0; } }
@keyframes recoilR { 0% { translate: 0 0; } 22% { translate: -26px -10px; rotate: -7deg; } 100% { translate: 0 0; rotate: 0; } }

/* ---- hit-stop: freeze everything for a beat at the moment of impact ---- */
.scene.hitstop *, .scene.hitstop { animation-play-state: paused !important; }

/* ---- screen shake ---- */
.scene.shake  { animation: shakeS .3s cubic-bezier(.36,.07,.19,.97); }
.scene.shakeH { animation: shakeH .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes shakeS {
  10%,90% { translate: -2px 1px; } 20%,80% { translate: 4px -2px; }
  30%,50%,70% { translate: -6px 2px; } 40%,60% { translate: 6px -1px; }
}
@keyframes shakeH {
  8%  { translate: -9px 4px; rotate: -.5deg; } 18% { translate: 11px -6px; rotate: .6deg; }
  30% { translate: -13px 5px; rotate: -.7deg; } 42% { translate: 12px -4px; rotate: .5deg; }
  56% { translate: -8px 3px; } 70% { translate: 6px -2px; } 85% { translate: -3px 1px; }
}

/* ---- the effects layer sprites/sparks/numbers live in ---- */
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }

/* impact burst — starburst + shockwave ring */
.spark { position: absolute; translate: -50% -50%; pointer-events: none; }
.spark .burst {
  position: absolute; translate: -50% -50%;
  width: 150px; height: 150px;
  filter: drop-shadow(0 0 10px var(--sc, #fff));
  animation: burstPop .36s cubic-bezier(.2,1.5,.4,1) forwards;
}
.spark .ring {
  position: absolute; translate: -50% -50%;
  width: 46px; height: 46px; border-radius: 50%;
  border: 6px solid var(--sc, #fff);
  animation: ringOut .44s cubic-bezier(.2,.9,.3,1) forwards;
}
@keyframes burstPop { 0% { scale: .15; opacity: 1; rotate: -20deg; } 60% { opacity: 1; } 100% { scale: 1.45; opacity: 0; rotate: 25deg; } }
@keyframes ringOut  { 0% { scale: .3; opacity: 1; } 100% { scale: 3; opacity: 0; border-width: 1px; } }

/* floating damage numbers */
.dmg {
  position: absolute; translate: -50% -50%;
  font-family: var(--retro); font-size: 22px; white-space: nowrap;
  color: #fff; text-shadow: 3px 3px 0 #22323c, -1px -1px 0 #22323c;
  animation: dmgFly .95s cubic-bezier(.2,1.2,.4,1) forwards;
}
.dmg.crit { font-size: 30px; color: #ffd166; }
.dmg.heal { color: #6ef58a; }
@keyframes dmgFly {
  0%   { scale: .4; opacity: 0; }
  22%  { scale: 1.25; opacity: 1; }
  38%  { scale: 1; }
  100% { translate: -50% -50%; opacity: 0; margin-top: -58px; }
}

/* big centred callouts — CRITICAL, K.O., COMBO */
.callout {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%;
  font-family: var(--retro); font-size: 40px; white-space: nowrap;
  color: #fff; letter-spacing: .04em;
  text-shadow: 5px 5px 0 #22323c, -2px -2px 0 #22323c, 0 0 26px rgba(255,209,102,.85);
  animation: calloutIn .85s cubic-bezier(.2,1.7,.35,1) forwards;
}
.callout.crit { color: #ffd166; }
.callout.ko   { color: #ff5a4a; font-size: 58px; }
.callout.combo { color: #7fe7ff; font-size: 30px; top: 28%; }
@keyframes calloutIn {
  0%   { scale: 2.6; opacity: 0; rotate: -9deg; }
  18%  { scale: .88; opacity: 1; rotate: 2deg; }
  30%  { scale: 1.06; rotate: 0deg; }
  72%  { scale: 1; opacity: 1; }
  100% { scale: 1.1; opacity: 0; }
}

/* speed lines streaking behind an attack */
.speedlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 3px, transparent 3px 26px);
  mask-image: linear-gradient(90deg, transparent, #000 40%, transparent);
  animation: streak .4s ease-out forwards;
}
.speedlines.rtl { animation-name: streakR; }
@keyframes streak  { 0% { opacity: 0; translate: -60% 0; } 35% { opacity: .8; } 100% { opacity: 0; translate: 60% 0; } }
@keyframes streakR { 0% { opacity: 0; translate: 60% 0; }  35% { opacity: .8; } 100% { opacity: 0; translate: -60% 0; } }

/* red rim flash when the player takes damage */
.hurt-vig {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 90px 30px rgba(224,79,63,.85);
  animation: vigFade .55s ease-out forwards;
}
@keyframes vigFade { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

@keyframes hitFlash  { 50% { opacity: .15; } }
@keyframes faintDrop { to { translate: 0 90px; opacity: 0; } }
@keyframes bossEnter { from { translate: 120px 0; opacity: 0; } }
@keyframes bossLunge { 35% { translate: -34px 20px; } }
@keyframes heroLunge { 35% { translate: 44px -24px; } }
@keyframes shake     { 25% { rotate: -4deg; } 60% { rotate: 3deg; } }
@keyframes healPulse { 30% { filter: drop-shadow(0 0 18px rgba(76,196,90,.9)); } }

/* full-scene flash when someone takes damage */
.scene-fx { position: absolute; inset: 0; pointer-events: none; }
.scene-fx.flash { animation: sceneFlash .35s steps(2) 1; background: #fff; }
@keyframes sceneFlash { 50% { opacity: .55; } 100% { opacity: 0; } }

/* ---- HP panels ---- */

.panel {
  position: absolute; z-index: 2;
  min-width: 240px;
  background: var(--panel);
  border: 3px solid var(--panel-edge);
  border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(34,50,60,.28);
  padding: 10px 12px 9px;
}
.enemy-panel  { left: 18px; top: 18px; }
.player-panel { right: 18px; bottom: 16px; }

.panel-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mon-name  { font-family: var(--retro); font-size: 11px; letter-spacing: .04em; }
.mon-level { font-family: var(--retro); font-size: 9.5px; color: var(--ink-soft); }

.hp-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.hp-tag {
  font-family: var(--retro); font-size: 8px; color: var(--stamp);
  border: 1.5px solid var(--stamp); border-radius: 3px; padding: 2px 3px;
}
.hp-bar {
  position: relative;
  flex: 1; height: 10px; border-radius: 6px;
  background: #cfc7a8; border: 2px solid var(--panel-edge);
  overflow: hidden;
}
/* two stacked bars: the real fill snaps down, a pale "chip" ghost trails
   behind it a beat later so you can see the chunk you just lost */
.hp-bar i {
  position: absolute; left: 0; top: 0;
  display: block; height: 100%; width: 100%;
}
.hp-bar i.ghost {
  z-index: 0; background: #fff2b0;
  transition: width .55s cubic-bezier(.4,0,.6,1) .35s;
}
.hp-bar i.fill {
  z-index: 1;
  background: var(--hp-good);
  transition: width .22s cubic-bezier(.3,.9,.4,1), background-color .3s;
}
.hp-bar i.fill.warn { background: var(--hp-warn); }
.hp-bar i.fill.crit { background: var(--hp-crit); }

/* the panel itself jolts when its owner is hit */
.panel.jolt { animation: panelJolt .3s ease; }
@keyframes panelJolt { 30% { translate: -4px 0; } 60% { translate: 3px 0; } }

.hp-nums { margin-top: 6px; text-align: right; font-family: var(--retro); font-size: 9.5px; }

/* boss "hits remaining" pips */
.hit-pips { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.hit-pips b {
  width: 11px; height: 11px; border-radius: 3px;
  border: 1.5px solid var(--panel-edge);
  background: var(--dc, var(--ink));
}
.hit-pips b.spent { background: transparent; opacity: .4; }
.hit-pips b.last { border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent); }

/* ---- console: dialog + command menu ---- */

.console {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 10px;
  padding: 12px;
  background: var(--panel-edge);
}

.dialog {
  background: var(--panel);
  border: 3px solid #8a97a0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 3px var(--panel-edge);
  padding: 14px 16px;
  font-family: var(--retro);
  font-size: 11.5px;
  line-height: 1.9;
  min-height: 74px;
  display: flex; align-items: center;
}
.dialog.blink::after { content: "▼"; margin-left: 8px; animation: blink 1s steps(1) infinite; color: var(--stamp); }
@keyframes blink { 50% { opacity: 0; } }

.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.cmd {
  font-family: var(--retro); font-size: 10px; letter-spacing: .03em;
  border: 3px solid var(--panel-edge); border-radius: 8px;
  padding: 10px 6px; cursor: pointer; color: var(--ink);
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
  transition: transform .07s ease, filter .12s ease;
}
.cmd:hover:not(:disabled) { filter: brightness(1.08); }
.cmd:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.cmd:disabled { opacity: .45; cursor: not-allowed; }

.cmd-fight   { background: #f2a0aa; }
.cmd-trainer { background: #f0c46a; }
.cmd-badges  { background: #8fd0c0; }
.cmd-run     { background: #a8d98a; }

/* ============================================================
   HUD SIDEBAR
   ============================================================ */

.hud { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }

.hud-block {
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 14px 16px;
}

.hud-heading {
  margin: 0 0 10px;
  font-family: var(--retro); font-size: 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}

.hud-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.stat { display: flex; flex-direction: column; }
.stat-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.stat-value { font-family: var(--mono); font-size: 24px; font-weight: 600; }
.stat-value.bump { animation: bump .4s ease; }
@keyframes bump { 40% { transform: scale(1.25); color: var(--stamp); } }

/* badge case rows */
.domain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.domain-row {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px;
  font-size: 12.5px;
}
.domain-medal {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--paper-deep); opacity: .5;
}
.domain-row.earned .domain-medal { background: var(--dc); opacity: 1; }
.domain-row.current .domain-medal { opacity: 1; border-color: var(--dc); animation: pulse 1.6s ease infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc) 30%, transparent); } }
.domain-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.domain-row.current .domain-name { font-weight: 700; }
.domain-row.earned .domain-name::after { content: " ✓"; color: var(--good); font-weight: 700; }
.domain-state { font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); }

.btn {
  font-family: var(--body); font-weight: 600; font-size: 15px;
  border-radius: 10px; cursor: pointer;
  border: 2px solid var(--ink);
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn:active { transform: translateY(2px); box-shadow: none !important; }

.btn-ghost {
  width: 100%; padding: 9px; background: transparent; color: var(--ink-soft);
  border: 1.5px dashed var(--ink-soft); font-size: 13px;
}
.btn-ghost:hover { color: var(--stamp); border-color: var(--stamp); }

.how-to summary { cursor: pointer; font-weight: 700; }
.how-to ul { margin: 10px 0 2px; padding-left: 18px; font-size: 13px; color: var(--ink-soft); }
.how-to li { margin-bottom: 6px; }

/* ============================================================
   SITE FOOTER — licence / trademark disclaimer
   ============================================================ */

.site-foot {
  max-width: 780px;
  margin: 0 auto 46px;
  padding: 18px 24px 0;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.site-foot p { margin: 0 0 8px; }
.site-foot strong { color: var(--ink); }

/* ============================================================
   QUESTION CARD (modal) — same bones as the classic edition
   ============================================================ */

.overlay {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(34, 50, 60, .55);
  backdrop-filter: blur(3px) sepia(.2);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  overflow-y: auto;
}
.overlay[hidden] { display: none; }

.card {
  background: var(--card);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(10, 20, 26, .45);
  width: min(660px, 100%);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: 22px 26px 24px;
  animation: cardIn .35s cubic-bezier(.2,1.4,.4,1) both;
  border-top: 10px solid var(--dc, var(--ink));
}
@keyframes cardIn { from { transform: translateY(26px) scale(.96); opacity: 0; } }

.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }

.chip {
  font-family: var(--retro); font-size: 9px; letter-spacing: .1em;
  padding: 5px 9px; border-radius: 4px;
  border: 2px solid var(--ink); background: var(--paper-deep);
  transform: rotate(-1.5deg);
}
.chip.boss   { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.chip.review { background: var(--stamp); color: var(--card); border-color: var(--stamp); }
.chip.event  { background: var(--gold); color: var(--ink); border-color: var(--ink); }

.card-domain { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; }

.card-kicker { margin: 10px 0 0; font-family: var(--retro); font-size: 13px; line-height: 1.7; }

.card-scenario {
  margin: 14px 0 0; padding: 12px 14px;
  background: var(--paper-deep); border-left: 4px solid var(--dc, var(--ink));
  border-radius: 6px; font-size: 14px; font-style: italic;
}

.card-question { margin: 14px 0 4px; font-size: 16.5px; font-weight: 500; line-height: 1.55; }

.card-options { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }

.opt {
  text-align: left; padding: 11px 14px 11px 44px; position: relative;
  background: var(--paper); border: 2px solid var(--line); border-radius: 10px;
  font: 500 14.5px/1.45 var(--body); color: var(--ink); cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
.opt::before {
  content: attr(data-letter);
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--ink-soft); color: var(--ink-soft);
  font: 600 11px/20px var(--mono); text-align: center;
}
.opt:hover:not(:disabled) { border-color: var(--ink); transform: translateX(3px); }
.opt:disabled { cursor: default; }
.opt.correct { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--paper)); }
.opt.correct::before { border-color: var(--good); color: var(--good); content: "✓"; }
.opt.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--paper)); }
.opt.wrong::before { border-color: var(--bad); color: var(--bad); content: "✗"; }
.opt.dim { opacity: .5; }

/* term-match rows */
.card-match { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.match-row { display: flex; flex-direction: column; gap: 5px; }
.match-term { font-weight: 700; font-size: 14.5px; }
.match-row select {
  font: 500 13.5px var(--body); color: var(--ink);
  padding: 9px 10px; border-radius: 8px; border: 2px solid var(--line);
  background: var(--paper); width: 100%;
}
.match-row select:focus { outline: none; border-color: var(--ink); }
.match-row.correct select { border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--paper)); }
.match-row.wrong   select { border-color: var(--bad);  background: color-mix(in srgb, var(--bad) 10%, var(--paper)); }

.btn-submit { margin-top: 16px; width: 100%; padding: 11px; background: var(--ink); color: var(--paper); box-shadow: 0 4px 0 rgba(34,50,60,.55); }

.card-foot { margin-top: 18px; border-top: 2px dashed var(--line); padding-top: 14px; }

.verdict { font-family: var(--retro); font-size: 14px; line-height: 1.6; }
.verdict.good { color: var(--good); }
.verdict.bad { color: var(--bad); }

.explanation {
  margin: 10px 0 0; padding: 12px 14px; font-size: 14px; line-height: 1.6;
  background: var(--paper-deep); border-radius: 8px;
}
.explanation strong { color: var(--stamp); }

.consequence { margin: 12px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft); }

.btn-continue { margin-top: 16px; width: 100%; padding: 12px; background: var(--ink); color: var(--paper); box-shadow: 0 4px 0 rgba(34,50,60,.55); }

/* ============================================================
   BADGES MODAL + WIN OVERLAY
   ============================================================ */

.card-badges { text-align: center; }
.badges-title { margin: 4px 0 16px; font-family: var(--retro); font-size: 16px; }
.badges-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px;
}
.badge-slot { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-soft); }
.badge-coin {
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid var(--ink);
  background: var(--paper-deep);
  display: flex; align-items: center; justify-content: center;
  opacity: .35; filter: grayscale(1);
  overflow: hidden;
}
.badge-coin svg { width: 40px; height: 40px; }
.badge-slot.earned .badge-coin {
  opacity: 1; filter: none;
  background: color-mix(in srgb, var(--dc) 30%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc) 35%, transparent);
  animation: badgePop .5s cubic-bezier(.2,1.8,.4,1);
}
@keyframes badgePop { from { transform: scale(.3); } }

/* ---- trainer select ---- */
.card-select { width: min(860px, 100%); text-align: center; }
.select-sub { margin: -6px 0 20px; color: var(--ink-soft); font-size: 13.5px; }

.trainer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.trainer-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: transparent; border: none; border-radius: 16px;
  padding: 12px 6px 14px; cursor: pointer;
  font-family: var(--body); color: var(--ink);
  transition: transform .15s ease, background .15s ease;
  animation: podiumIn .45s cubic-bezier(.2,1.4,.4,1) both;
}
.trainer-card:nth-child(1) { animation-delay: .05s; }
.trainer-card:nth-child(2) { animation-delay: .13s; }
.trainer-card:nth-child(3) { animation-delay: .21s; }
.trainer-card:nth-child(4) { animation-delay: .29s; }
@keyframes podiumIn { from { transform: translateY(22px); opacity: 0; } }

.trainer-card:hover { transform: translateY(-5px); background: color-mix(in srgb, var(--ac) 8%, transparent); }

/* the little stage each trainer stands on */
.trainer-stage { position: relative; display: block; width: 100%; height: 148px; }
.trainer-stage svg {
  position: relative; z-index: 1;
  width: 128px; height: 139px;
  filter: drop-shadow(0 5px 4px rgba(34,50,60,.22));
  transition: transform .18s ease;
}
.trainer-card:hover .trainer-stage svg { transform: translateY(-4px); }
.trainer-pf {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 32px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ac) 42%, var(--paper-deep)), color-mix(in srgb, var(--ac) 16%, var(--paper-deep)) 70%, transparent 72%);
  transition: filter .18s ease;
}
.trainer-card:hover .trainer-pf,
.trainer-card.selected .trainer-pf { filter: brightness(1.12) saturate(1.25); }

.trainer-plate {
  font-family: var(--retro); font-size: 12px; letter-spacing: .05em;
  background: var(--ink); color: var(--paper);
  border-radius: 7px; padding: 6px 14px;
  box-shadow: 0 3px 0 rgba(34,50,60,.4);
  transition: background .15s ease, color .15s ease;
}
.trainer-card.selected .trainer-plate { background: var(--gold); color: var(--ink); }
.trainer-title { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }

/* selected: gold ring + check mark */
.trainer-card.selected { background: color-mix(in srgb, var(--ac) 10%, transparent); box-shadow: inset 0 0 0 3px var(--gold); }
.trainer-card.selected::after {
  content: "✓";
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); color: var(--ink);
  border: 2px solid var(--ink);
  font: 700 14px/21px var(--body); text-align: center;
  animation: badgePop .3s cubic-bezier(.2,1.8,.4,1);
}

/* pick → confirm footer */
.select-foot {
  margin-top: 18px; padding-top: 16px;
  border-top: 2px dashed var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.select-blurb { margin: 0; font-size: 14px; color: var(--ink-soft); text-align: left; min-height: 22px; }
.select-blurb strong { font-family: var(--retro); font-size: 12.5px; color: var(--ink); }
.btn-choose {
  flex: none; padding: 12px 26px;
  background: var(--ink); color: var(--paper);
  font-family: var(--retro); font-size: 11px;
  box-shadow: 0 4px 0 rgba(34,50,60,.55);
}
.btn-choose:hover:not(:disabled) { background: #33474f; }
.btn-choose:disabled { opacity: .4; cursor: not-allowed; }

/* disclaimer on the select screen — the one place every player passes through */
.select-legal {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: .85;
}

/* ---- trainer card modal ---- */
.card-tcard { width: min(430px, 100%); }
.tcard-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tcard-sprite svg { width: 92px; height: 100px; }
.tcard-name { font-family: var(--retro); font-size: 15px; }
.tcard-name small { font-size: 10px; color: var(--ink-soft); }
.tcard-title { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.tcard-blurb { font-size: 12.5px; font-style: italic; margin-top: 6px; color: var(--ink-soft); }

.card-win { text-align: center; border-top-color: var(--gold); }
.win-stamp {
  margin: 6px auto 14px; width: 110px; height: 110px;
  border: 4px double var(--stamp); border-radius: 50%;
  color: var(--stamp); font: 700 15px/1.4 var(--retro); letter-spacing: .08em;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-9deg);
  animation: stampIn .5s cubic-bezier(.2,2,.4,1) .2s both;
}
@keyframes stampIn { from { transform: rotate(-9deg) scale(2.4); opacity: 0; } }

.win-title { margin: 0; font-family: var(--retro); font-size: 22px; }
.win-sub { color: var(--ink-soft); margin: 10px 0 18px; }

.win-stats {
  margin: 0 0 20px; padding: 14px; text-align: left;
  background: var(--paper-deep); border-radius: 10px;
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px;
  font-size: 14px;
}
.win-stats dt { color: var(--ink-soft); }
.win-stats dd { margin: 0; font-family: var(--mono); font-weight: 600; text-align: right; }

/* ============================================================
   MOTION SENSITIVITY — keep the game fully playable without the
   shakes and flashes for anyone who asks the OS to reduce motion.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .scene.shake, .scene.shakeH { animation: none; }
  .spark, .speedlines, .hurt-vig { display: none; }
  .boss-sprite, .hero-sprite { animation: none !important; }
  .callout { animation: calloutCalm .9s ease forwards; }
  @keyframes calloutCalm { 0% { opacity: 0; } 20%,75% { opacity: 1; } 100% { opacity: 0; } }
  .dmg { animation-duration: .6s; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1020px) {
  .layout { grid-template-columns: 1fr; }
  .hud { position: static; }
  .hud-stats { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .masthead-inner { padding: 12px 14px 10px; gap: 12px; }
  .pokeball { width: 40px; height: 40px; }
  .badge-strip { display: none; }
  .layout { padding: 0 12px; margin-top: 14px; gap: 16px; }

  .scene { height: 300px; }
  .panel { min-width: 178px; padding: 8px 10px 7px; }
  .mon-name { font-size: 9px; }
  .mon-level { font-size: 8px; }
  .hp-nums { font-size: 8px; }
  .boss-sprite svg { width: 108px; height: 108px; }
  .hero-sprite { font-size: 70px; }
  .hero-sprite svg { width: 100px; height: 108px; }
  .trainer-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .trainer-stage { height: 118px; }
  .trainer-stage svg { width: 100px; height: 108px; }
  .trainer-pf { width: 94px; height: 26px; }
  .select-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .select-blurb { text-align: center; }
  .enemy-spot { right: 4%; top: 66px; }
  .player-spot { left: 2%; }
  .platform { width: 140px; height: 40px; }
  .player-spot .platform { width: 170px; height: 46px; }
  .enemy-panel { left: 10px; top: 10px; }
  .player-panel { right: 10px; bottom: 10px; }

  /* keep the callouts inside a phone screen */
  .callout       { font-size: 22px; }
  .callout.ko    { font-size: 32px; }
  .callout.combo { font-size: 17px; }
  .dmg           { font-size: 16px; }
  .dmg.crit      { font-size: 21px; }
  .spark .burst  { width: 104px; height: 104px; }

  .console { grid-template-columns: 1fr; }
  .dialog { min-height: 64px; font-size: 10px; }
  .cmd { font-size: 9px; padding: 9px 4px; }

  .hud-stats { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: 20px; }
  .card { padding: 18px 16px 20px; }
  .card-kicker { font-size: 11px; }
  .badges-grid { grid-template-columns: repeat(2, 1fr); }
}