/* Letter Chase Prototype (V2) — volledig eigen stylesheet, raakt style.css niet aan.
   Hergebruikt alleen bestaande design tokens (var(--...)) uit style.css en de
   globale .g-icon-btn-klasse die daar al gedefinieerd staat. De speelwereld
   zelf (character/letters/scenery) wordt sinds V2 door Phaser getekend in
   #chasePhaserMount — de DOM-chrome hieronder (header/controls/overlay/tap-
   marker) blijft bewust gewoon HTML/CSS, zie sectie 10 van de V2-opdracht. */

#gamestage.screen { position: fixed; inset: 0; z-index: 50; background: var(--cream); }
html.gamestage-active, html.gamestage-active body { overflow: hidden; height: 100%; }

.chase-screen {
  height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
  touch-action: none; -webkit-user-select: none; user-select: none;
}

/* Minimaal gehouden (sectie 21 V3: "de wereld is de interface") — één dunne
   balk, geen dashboard, geen kaart-in-kaart. */
.chase-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: calc(7px + env(safe-area-inset-top)) 10px 7px;
  background: rgba(253, 246, 230, .88); backdrop-filter: blur(2px); border-bottom: 2px solid var(--gold-light);
}
.chase-replay {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: none;
  background: #fff; color: var(--gold); font-size: 16px; display: grid; place-items: center;
  box-shadow: 0 3px 0 var(--gold-light), 0 6px 12px rgba(120, 80, 20, .15);
}
.chase-replay:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gold-light); }
.chase-replay.is-playing { color: var(--color-secondary); animation: chaseReplayPulse .9s ease-in-out infinite; }
.chase-replay:disabled { opacity: .9; }
@keyframes chaseReplayPulse { 0%, 100% { box-shadow: 0 3px 0 var(--gold-light), 0 6px 12px rgba(120, 80, 20, .15); } 50% { box-shadow: 0 3px 0 var(--gold-light), 0 0 0 7px rgba(58, 143, 217, .25); } }
.chase-instr { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 8px; min-width: 0; }
.chase-instr-text { font-weight: 800; font-size: clamp(15px, 3.6vw, 19px); color: var(--color-text); }
.chase-instr-letter { font-family: "Amiri", serif; font-weight: 700; font-size: clamp(26px, 7vw, 34px); color: var(--color-character-accent); }
.chase-dots { display: flex; gap: 6px; flex: none; }
.chase-dots i { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--gold-light); display: block; }
.chase-dots i.done { background: var(--color-success); border-color: var(--color-success-strong); }

.chase-field {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background: linear-gradient(180deg, #bfe4f5 0%, #e7f4de 62%, #ead9a6 100%);
  touch-action: none;
}
.chase-phaser-mount { position: absolute; inset: 0; }
.chase-phaser-mount canvas { display: block; touch-action: none; }

.chase-tap-marker {
  position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; border: 3px solid var(--color-secondary); opacity: 0; pointer-events: none; z-index: 2;
}
.chase-tap-marker.is-active { animation: chaseTapPulse .65s ease-out; }
@keyframes chaseTapPulse { 0% { opacity: .9; transform: scale(.4); } 70% { opacity: .5; } 100% { opacity: 0; transform: scale(1.15); } }

.chase-controls {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--gold-soft); border-top: 3px solid var(--gold-light);
  touch-action: none; min-height: 150px; justify-content: center;
}
.chase-mode-toggle {
  position: absolute; top: 8px; right: 12px; border: none; border-radius: 999px;
  background: #fff; color: var(--color-text-muted); font-size: 12px; font-weight: 700;
  padding: 6px 12px; box-shadow: 0 2px 0 var(--gold-light);
}
.chase-tap-hint { margin: 0; font-size: 14px; font-weight: 700; color: var(--color-text-muted); text-align: center; }
/* direction:ltr is bewust hardcoded: de fysieke betekenis van de bewegings-
   knoppen mag NOOIT meedraaien met de interfacetaal (RTL mag alleen tekst/UI
   spiegelen) — zonder dit zou flexbox de knopvolgorde onder dir="rtl" omkeren
   en "links" en "rechts" laten wisselen. */
.chase-dpad { display: flex; flex-direction: column; align-items: center; gap: 10px; direction: ltr; }
.chase-btn-row { display: flex; align-items: center; gap: 16px; }
.chase-btn {
  width: 64px; height: 64px; border-radius: 20px; border: none; flex: none;
  background: linear-gradient(180deg, #fff, #fdf6e6); color: var(--gold);
  box-shadow: 0 4px 0 var(--gold-light), 0 8px 16px rgba(120, 80, 20, .18);
  display: grid; place-items: center; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.chase-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-light); }
.chase-btn svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Desktop: toetsenbord is hier de primaire besturing (zie onKeyDown in
   game-chase.js — WASD/pijltjes werken ongeacht of de D-pad zichtbaar is).
   De D-pad blijft beschikbaar maar mag het grote, ruime gamebeeld niet
   domineren: compacter, kleiner en naar de zijkant geschoven i.p.v. een
   brede knoppenbalk in het midden. */
@media (min-width: 1024px) {
  .chase-controls { flex-direction: row; justify-content: flex-start; align-items: center; gap: 18px; min-height: 74px; padding-left: 28px; }
  .chase-mode-toggle { position: static; }
  .chase-dpad { gap: 5px; }
  .chase-dpad .chase-btn-row { gap: 5px; }
  .chase-btn { width: 40px; height: 40px; border-radius: 12px; }
  .chase-btn svg { width: 18px; height: 18px; }
  .chase-tap-hint { margin: 0; }
}

.chase-overlay {
  position: absolute; inset: 0; z-index: 10; display: grid; place-items: center;
  background: rgba(60, 39, 18, .4); padding: 16px;
}
.chase-card {
  background: #fff; border-radius: 24px; padding: 30px 24px 24px; text-align: center;
  box-shadow: var(--shadow-card); max-width: 320px; width: 100%;
}
.chase-card h2 { margin: 0 0 10px; font-size: 21px; color: var(--color-text); }
.chase-card-letter { display: block; font-family: "Amiri", serif; font-weight: 700; font-size: 56px; color: var(--color-character-accent); line-height: 1; }
.chase-card-score { font-size: 24px; font-weight: 800; color: var(--color-success-strong); margin: 10px 0 18px; }
.chase-cta { display: block; width: 100%; border: none; border-radius: 16px; padding: 14px; font-weight: 800; font-size: 16px; margin-top: 10px; }
.chase-cta-primary { background: var(--color-success); color: #fff; box-shadow: 0 4px 0 var(--color-success-strong); }
.chase-cta-ghost { background: transparent; color: var(--color-text-muted); }

/* RTL mag uitsluitend tekst/UI-iconen spiegelen (bv. de terug-pijl), nooit
   de fysieke betekenis van de bewegingsknoppen — .chase-dpad/.chase-btn
   krijgen daarom bewust GEEN RTL-regel. */
html[dir="rtl"] .chase-head .g-icon-btn svg { transform: scaleX(-1); }