<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Alphabet Karten</title>

<style>

/* 1. Playfair Display lokal einbinden */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('Fonts/playfair-display-v40-latin-900.woff2') format('woff2'); 
  font-display: swap;
}

/* 2. DM Mono lokal einbinden */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  src: url('Fonts/dm-mono-v16-latin-regular.woff2') format('woff2'); 
  font-display: swap;
}

/* 3. Schriften im Code wie gewohnt zuweisen */
h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}

body, code {
  font-family: 'DM Mono', monospace;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #1a1208;
  --paper: #f5f0e8;
  --paper2: #ede6d6;
  --paper3: #e0d6c2;
  --gold: #b8860b;
  --red: #8b1a1a;
  --green: #1a5c2a;
  --shadow: rgba(26,18,8,0.18);
  --abort: #6b3a2a;
}
body.dark {
  --ink: #e8dfc8;
  --paper: #1a1610;
  --paper2: #231f18;
  --paper3: #2e2820;
  --gold: #c9a227;
  --red: #c45c5c;
  --green: #5aaa6e;
  --shadow: rgba(0,0,0,0.45);
  --abort: #c47a5a;
}
body {
  font-family: 'DM Mono', monospace;
  background: var(--paper); color: var(--ink);
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; transition: background 0.3s, color 0.3s;
  background-image: repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(180,160,100,0.18) 28px);
}
#app { width: 100%; max-width: 520px; }
.screen { display: none; flex-direction: column; align-items: center; gap: 1.2rem; }
.screen.active { display: flex; }

/* ICON BUTTONS (lang / dark) */
.icon-btn {
  background: var(--paper2); border: 1.5px solid var(--paper3); border-radius: 8px;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.3rem; transition: background 0.15s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.icon-btn:active { background: var(--paper3); }

/* TITLE */
.title-block { text-align: center; }
.game-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem,9vw,3.4rem); font-weight: 900; letter-spacing: -1px; line-height: 1;
  color: var(--ink); transition: color 0.3s;
}
.game-subtitle { font-size: 0.68rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-top: 0.4rem; }
.divider { width: 100%; height: 1px; background: linear-gradient(90deg,transparent,var(--gold),transparent); }

/* LAST RESULT */
.last-result {
  background: var(--paper2); border: 1px solid var(--paper3); border-radius: 6px;
  padding: 0.9rem 1.2rem; width: 100%; font-size: 0.8rem; transition: background 0.3s;
}
.last-result-title { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; }
.last-result-stat { display: flex; justify-content: space-between; margin: 0.18rem 0; }
.stat-val { font-weight: 500; }
.stat-val.good { color: var(--green); }
.stat-val.bad  { color: var(--red); }

/* MENU BUTTONS */
.menu-btn {
  width: 100%; padding: 0.9rem 1.2rem;
  font-family: 'DM Mono', monospace; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1.5px solid var(--ink); background: var(--ink); color: var(--paper);
  border-radius: 6px; cursor: pointer; transition: all 0.18s;
  -webkit-tap-highlight-color: transparent; min-height: 52px;
}
.menu-btn:active { opacity: 0.8; transform: scale(0.98); }
.menu-btn.outline { background: var(--paper2); color: var(--ink); }
/* Hover + keyboard selected: gold background + gold outline */
.menu-btn.menu-selectable { transition: all 0.18s; }
.menu-btn.kb-selected,
.menu-btn.menu-selectable:hover,
.menu-btn.outline.kb-selected,
.menu-btn.outline.menu-selectable:hover {
  outline: 2.5px solid var(--gold);
  outline-offset: 2px;
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}
.abort-btn {
  width: 100%; padding: 0.65rem 1rem;
  font-family: 'DM Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1.5px solid var(--abort); background: transparent; color: var(--abort);
  border-radius: 6px; cursor: pointer; transition: all 0.15s;
  -webkit-tap-highlight-color: transparent; min-height: 42px;
}
.abort-btn:active { background: var(--abort); color: var(--paper); }

/* GAME HEADER */
.game-header {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold);
}
.score-block { text-align: right; }
.score-num { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--ink); display: block; line-height: 1; transition: color 0.3s; }

/* M1 TIMER RING */
.timer-wrap { position: relative; width: 52px; height: 52px; }
.timer-ring { transform: rotate(-90deg); }
.timer-bg { fill: none; stroke: var(--paper3); stroke-width: 4; }
.timer-arc { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset 0.9s linear, stroke 0.3s; }
.timer-arc.urgent { stroke: var(--red); }
.timer-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700;
}
.timer-label.urgent { color: var(--red); }

/* COUNTDOWN BAR */
.countdown-bar-wrap { width: 100%; background: var(--paper3); border-radius: 3px; height: 7px; overflow: hidden; }
.countdown-bar-fill { height: 100%; background: var(--gold); border-radius: 3px; transition: width 0.95s linear, background 0.3s; }
.countdown-bar-fill.urgent { background: var(--red); }
.countdown-time-label {
  font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700;
  text-align: center; color: var(--ink); line-height: 1; display: block; transition: color 0.3s;
}
.countdown-time-label.urgent { color: var(--red); }

/* SINGLE CARD (m1/m2) */
.card-stage { perspective: 800px; width: min(200px,52vw); height: min(270px,70vw); }
.card-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4,0,0.2,1); }
.card-inner.flipped { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 12px; border: 2px solid var(--paper3);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: var(--paper2); box-shadow: 4px 6px 24px var(--shadow); transition: background 0.3s;
}
.card-back { background: var(--paper3); transform: rotateY(180deg); }
.card-letter { font-family: 'Playfair Display', serif; font-size: clamp(3.8rem,14vw,6rem); font-weight: 900; color: var(--ink); line-height: 1; user-select: none; transition: color 0.3s; }
.card-number { font-family: 'Playfair Display', serif; font-size: clamp(3.2rem,12vw,5rem); font-weight: 700; color: var(--gold); line-height: 1; user-select: none; }
.card-hint { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-top: 0.3rem; }

@keyframes vanish {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  30%  { transform: scale(1.1) rotate(3deg); }
  60%  { transform: scale(0.55) rotate(-8deg); opacity: 0.4; }
  100% { transform: scale(0) rotate(15deg); opacity: 0; }
}
.card-stage.vanishing .card-inner { animation: vanish 0.6s ease-in forwards; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  15% { transform: translateX(-11px); } 35% { transform: translateX(11px); }
  55% { transform: translateX(-6px); } 75% { transform: translateX(6px); }
  90% { transform: translateX(-3px); }
}
.card-stage.wrong .card-inner { animation: shake 0.5s ease; }

/* INPUT */
.input-row { display: flex; gap: 0.5rem; width: 100%; }
.num-input {
  flex: 1; padding: 0.85rem 0.8rem;
  font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700;
  text-align: center; border: 2px solid var(--paper3); border-radius: 6px;
  background: var(--paper2); color: var(--ink); outline: none;
  transition: border-color 0.15s, background 0.3s; min-height: 54px; -webkit-appearance: none;
  appearance: textfield;
}
.num-input::-webkit-outer-spin-button,
.num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-input[type=number] { -moz-appearance: textfield; }
.num-input:focus { border-color: var(--gold); }
.num-input.wrong-flash { border-color: var(--red) !important; }
.submit-btn {
  padding: 0.85rem 1.1rem; font-family: 'DM Mono', monospace;
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  border-radius: 6px; cursor: pointer; transition: all 0.15s;
  -webkit-tap-highlight-color: transparent; min-height: 54px;
}
.submit-btn:active { opacity: 0.75; }
.remaining-row { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); text-align: center; }
.feedback-message { font-size: 0.8rem; min-height: 1.1rem; text-align: center; }

/* M2 PIPS */
.recent-row { width: 100%; display: flex; gap: 5px; justify-content: center; align-items: center; }
.recent-label { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.recent-pip {
  width: 26px; height: 26px; border-radius: 4px;
  background: var(--paper3); border: 1px solid var(--paper3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 0.82rem; font-weight: 700;
  color: var(--gold); opacity: 0.35; transition: opacity 0.3s;
}
.recent-pip.filled { opacity: 1; background: var(--paper2); border-color: var(--gold); }

/* END */
.end-card {
  background: var(--paper2); border: 1.5px solid var(--paper3);
  border-radius: 10px; padding: 1.8rem; width: 100%; text-align: center; transition: background 0.3s;
}
.end-title { font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 900; margin-bottom: 0.3rem; }
.end-sub { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.end-stats { display: flex; gap: 0.8rem; margin: 1.3rem 0; }
.end-stat-box { flex: 1; background: var(--paper); border: 1px solid var(--paper3); border-radius: 6px; padding: 0.9rem; transition: background 0.3s; }
.end-stat-box .lbl { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.3rem; }
.end-stat-box .val { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 900; }
.val.green { color: var(--green); }
.val.red   { color: var(--red); }

/* ════════════════════════════════
   MODE 3 — THREE CARD SORT
════════════════════════════════ */
/* Three cards side by side */
.m3-table {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  justify-content: center;
}

/* Each card column */
.m3-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Slot label (LEFT / MITTE / RIGHT shown under each slot) */
.m3-slot-label {
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.6;
  transition: opacity 0.2s, color 0.2s;
}
.m3-slot-label.target { color: var(--gold); opacity: 1; }

/* The card itself — flip container */
.m3-flip {
  width: 100%;
  perspective: 500px;
}
.m3-flip-inner {
  width: 100%;
  height: min(155px, 42vw);
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.m3-flip-inner.flipped { transform: rotateY(180deg); }

.m3-face-front, .m3-face-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 3px 5px 16px var(--shadow);
}
.m3-face-front {
  background: var(--paper2);
  border: 2px solid var(--paper3);
  transition: border-color 0.25s, background 0.3s, transform 0.15s;
}
.m3-face-back {
  background: var(--paper3);
  border: 2px solid var(--paper3);
  transform: rotateY(180deg);
}

/* B card highlighted */
.m3-face-front.is-b {
  border-color: var(--gold);
  border-width: 2.5px;
  background: var(--paper2);
}
/* Fixed cards A/C slightly muted */
.m3-face-front.is-fixed { opacity: 0.85; }

.m3-card-letter {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 900; color: var(--ink); line-height: 1;
  user-select: none; transition: color 0.3s;
}
.m3-card-number {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  font-weight: 700; color: var(--gold); line-height: 1;
  user-select: none;
}
.m3-card-sub {
  font-size: 0.5rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-top: 3px;
}

/* B card position indicator — glowing dot row */
.m3-pos-row {
  display: flex; gap: 10px; justify-content: center; align-items: center;
}
.m3-pos-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper3); border: 1.5px solid var(--paper3);
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.m3-pos-dot.on { background: var(--gold); border-color: var(--gold); transform: scale(1.45); }

/* Thin per-card timer strip */
.m3-card-timer-wrap { width: 100%; height: 4px; background: var(--paper3); border-radius: 2px; overflow: hidden; }
.m3-card-timer-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width 0.95s linear, background 0.3s; }
.m3-card-timer-fill.urgent { background: var(--red); }

/* Arrow + confirm buttons */
.m3-controls {
  width: 100%;
  display: flex;
  gap: 8px;
}
.m3-arr {
  flex: 1;
  min-height: 52px;
  font-size: 1.3rem;
  background: var(--paper2);
  border: 2px solid var(--paper3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
}
.m3-arr:active { background: var(--gold); border-color: var(--gold); }
.m3-arr:disabled { opacity: 0.25; cursor: default; }
.m3-ok {
  flex: 2;
  min-height: 52px;
  font-family: 'DM Mono', monospace; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); border-radius: 8px;
  cursor: pointer; transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.m3-ok:active { opacity: 0.75; }

/* Slide animation for B card moving between slots */
@keyframes m3-slide-left {
  from { transform: translateX(40px); opacity: 0.4; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes m3-slide-right {
  from { transform: translateX(-40px); opacity: 0.4; }
  to   { transform: translateX(0); opacity: 1; }
}
.m3-slide-in-left  { animation: m3-slide-left  0.22s ease-out; }
.m3-slide-in-right { animation: m3-slide-right 0.22s ease-out; }

@media (max-width: 480px) {
  body { padding: 1rem 0.8rem; align-items: flex-start; padding-top: 1.2rem; }
}
</style>
</head>
<body>
<div id="app">

<!-- ══ MENU ══════════════════════════════ -->
<div class="screen active" id="screen-menu">
  <div class="title-block">
    <div class="game-title" data-i="title">AlphaBrain</div>
    <div class="game-subtitle" data-i="subtitle">Lerne die Zahl hinter den Karten.</div>
    <div style="display:flex;gap:8px;justify-content:center;margin-top:0.6rem;">
      <button class="icon-btn" id="btn-lang">🇩🇪</button>
      <button class="icon-btn" id="btn-dark">🌙</button>
    </div>
  </div>
  <div class="divider"></div>
  <div class="last-result" id="last-result-box" style="display:none">
    <div class="last-result-title" id="lr-mode-label"></div>
    <div class="last-result-stat"><span data-i="lr_correct">Richtig</span><span class="stat-val good" id="lr-correct">—</span></div>
    <div class="last-result-stat"><span data-i="lr_errors">Fehler</span><span class="stat-val bad" id="lr-errors">—</span></div>
    <div class="last-result-stat"><span data-i="lr_timeouts">Timeouts</span><span class="stat-val bad" id="lr-timeouts">—</span></div>
  </div>
  <button class="menu-btn outline menu-selectable" id="btn-play-mode1">▶ AlphaBrain</button>
  <button class="menu-btn outline menu-selectable" id="btn-play-mode2">◎ AlphaBrain <span style="font-size:0.55em;opacity:0.8;">60 Sek.</span></button>
  <button class="menu-btn outline menu-selectable" id="btn-play-mode3">⟺ Sortieren <span style="font-size:0.55em;opacity:0.8;">in 60 Sek.</span></button>
  <div style="width:100%;background:var(--paper2);border:1px solid var(--paper3);border-radius:6px;padding:0.7rem 1rem;">
    <div style="font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);margin-bottom:0.5rem;" data-i="ctrl_hint">Steuerung</div>
    <table style="width:100%;border-collapse:collapse;font-size:0.68rem;">
      <tr><td style="padding:2px 0;white-space:nowrap;color:var(--ink);font-weight:600;width:1%;padding-right:1rem;" data-i="ctrl_k1">W / ↑</td><td style="padding:2px 0;color:var(--gold);" data-i="ctrl_v1">= Bestätigen</td></tr>
      <tr><td style="padding:2px 0;white-space:nowrap;color:var(--ink);font-weight:600;padding-right:1rem;" data-i="ctrl_k2">A / ◀</td><td style="padding:2px 0;color:var(--gold);" data-i="ctrl_v2">= Links</td></tr>
      <tr><td style="padding:2px 0;white-space:nowrap;color:var(--ink);font-weight:600;padding-right:1rem;" data-i="ctrl_k3">D / ▶</td><td style="padding:2px 0;color:var(--gold);" data-i="ctrl_v3">= Rechts</td></tr>
      <tr><td style="padding:2px 0;white-space:nowrap;color:var(--ink);font-weight:600;padding-right:1rem;" data-i="ctrl_k4">0 – 9</td><td style="padding:2px 0;color:var(--gold);" data-i="ctrl_v4">= Nummer</td></tr>
      <tr><td style="padding:2px 0;white-space:nowrap;color:var(--ink);font-weight:600;padding-right:1rem;" data-i="ctrl_k5">Enter</td><td style="padding:2px 0;color:var(--gold);" data-i="ctrl_v5">= Start</td></tr>
      <tr><td style="padding:2px 0;white-space:nowrap;color:var(--ink);font-weight:600;padding-right:1rem;" data-i="ctrl_k6">⌫ / ESC</td><td style="padding:2px 0;color:var(--gold);" data-i="ctrl_v6">= Abbruch</td></tr>
    </table>
  </div>
</div>

<!-- ══ MODE 1 ═════════════════════════════ -->
<div class="screen" id="screen-game">
  <div class="game-header">
    <div><div data-i="mode1_label">Modus 1</div><div style="color:var(--ink);font-size:0.62rem;margin-top:2px;" data-i="mode1_sub">Karte zur Zahl</div></div>
    <div class="timer-wrap">
      <svg class="timer-ring" width="52" height="52" viewBox="0 0 52 52">
        <circle class="timer-bg" cx="26" cy="26" r="21"/>
        <circle class="timer-arc" id="timer-arc" cx="26" cy="26" r="21" stroke-dasharray="131.95" stroke-dashoffset="0"/>
      </svg>
      <div class="timer-label" id="timer-label">5</div>
    </div>
    <div class="score-block"><div data-i="points">Punkte</div><span class="score-num" id="score-display">0</span></div>
  </div>
  <div class="card-stage" id="card-stage">
    <div class="card-inner" id="card-inner">
      <div class="card-face card-front">
        <div class="card-letter" id="card-letter">A</div>
        <div class="card-hint" data-i="which_num">Welche Zahl?</div>
      </div>
      <div class="card-face card-back">
        <div class="card-number" id="card-number">1</div>
        <div class="card-hint" data-i="backside">Rückseite</div>
      </div>
    </div>
  </div>
  <div class="feedback-message" id="feedback-msg"></div>
  <div class="input-row">
    <input class="num-input" id="num-input" type="number" inputmode="numeric" pattern="[0-9]*" min="1" max="26" placeholder="1–26" autocomplete="off">
    <button class="submit-btn" id="submit-btn">OK</button>
  </div>
  <div class="remaining-row" id="remaining-row"></div>
  <button class="abort-btn" id="abort-btn1" data-i="abort">✕ Abbrechen</button>
</div>

<!-- ══ MODE 2 ═════════════════════════════ -->
<div class="screen" id="screen-game2">
  <div class="game-header">
    <div><div data-i="mode2_label">Modus 2</div><div style="color:var(--ink);font-size:0.62rem;margin-top:2px;" data-i="mode2_sub">60 Sekunden</div></div>
    <div style="text-align:center;">
      <span class="countdown-time-label" id="m2-time-label">60</span>
      <div style="font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin-top:2px;" data-i="seconds">Sek.</div>
    </div>
    <div class="score-block"><div data-i="points">Punkte</div><span class="score-num" id="m2-score-display">0</span></div>
  </div>
  <div class="countdown-bar-wrap"><div class="countdown-bar-fill" id="m2-bar" style="width:100%"></div></div>
  <div class="card-stage" id="m2-card-stage">
    <div class="card-inner" id="m2-card-inner">
      <div class="card-face card-front">
        <div class="card-letter" id="m2-card-letter">A</div>
        <div class="card-hint" data-i="which_num">Welche Zahl?</div>
      </div>
      <div class="card-face card-back">
        <div class="card-number" id="m2-card-number">1</div>
        <div class="card-hint" data-i="backside">Rückseite</div>
      </div>
    </div>
  </div>
  <div class="feedback-message" id="m2-feedback-msg"></div>
  <div class="input-row">
    <input class="num-input" id="m2-num-input" type="number" inputmode="numeric" pattern="[0-9]*" min="1" max="26" placeholder="1–26" autocomplete="off">
    <button class="submit-btn" id="m2-submit-btn">OK</button>
  </div>
  <div class="recent-row">
    <span class="recent-label" data-i="last5">Letzte 5:</span>
    <div class="recent-pip" id="rp0">—</div>
    <div class="recent-pip" id="rp1">—</div>
    <div class="recent-pip" id="rp2">—</div>
    <div class="recent-pip" id="rp3">—</div>
    <div class="recent-pip" id="rp4">—</div>
  </div>
  <button class="abort-btn" id="abort-btn2" data-i="abort">✕ Abbrechen</button>
</div>

<!-- ══ MODE 3 ═════════════════════════════ -->
<div class="screen" id="screen-game3">
  <div class="game-header">
    <div><div data-i="mode3_label">Modus 3</div><div style="color:var(--ink);font-size:0.62rem;margin-top:2px;" data-i="mode3_sub">60 Sekunden</div></div>
    <div style="text-align:center;">
      <span class="countdown-time-label" id="m3-time-label">60</span>
      <div style="font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);margin-top:2px;" data-i="seconds">Sek.</div>
    </div>
    <div class="score-block"><div data-i="points">Punkte</div><span class="score-num" id="m3-score-display">0</span></div>
  </div>

  <!-- Global 60s bar -->
  <div class="countdown-bar-wrap"><div class="countdown-bar-fill" id="m3-bar" style="width:100%"></div></div>
  <!-- Per-card 5s bar -->
  <div class="m3-card-timer-wrap"><div class="m3-card-timer-fill" id="m3-ctimer" style="width:100%"></div></div>

  <!-- Three card columns: col0=left, col1=middle, col2=right -->
  <!-- B card is rendered into whichever col matches m3.bSlot -->
  <div class="m3-table" id="m3-table">
    <!-- col 0 -->
    <div class="m3-col" id="m3-col0">
      <div class="m3-slot-label" id="m3-lbl0" data-i="m3_left">Links</div>
      <div class="m3-flip" id="m3-flip0">
        <div class="m3-flip-inner" id="m3-inner0">
          <div class="m3-face-front is-fixed" id="m3-front0">
            <div class="m3-card-letter" id="m3-char0">?</div>
          </div>
          <div class="m3-face-back">
            <div class="m3-card-number" id="m3-num0">?</div>
            <div class="m3-card-sub" data-i="backside">Rückseite</div>
          </div>
        </div>
      </div>
    </div>
    <!-- col 1 -->
    <div class="m3-col" id="m3-col1">
      <div class="m3-slot-label" id="m3-lbl1" data-i="m3_mid">Mitte</div>
      <div class="m3-flip" id="m3-flip1">
        <div class="m3-flip-inner" id="m3-inner1">
          <div class="m3-face-front is-fixed" id="m3-front1">
            <div class="m3-card-letter" id="m3-char1">?</div>
          </div>
          <div class="m3-face-back">
            <div class="m3-card-number" id="m3-num1">?</div>
            <div class="m3-card-sub" data-i="backside">Rückseite</div>
          </div>
        </div>
      </div>
    </div>
    <!-- col 2 -->
    <div class="m3-col" id="m3-col2">
      <div class="m3-slot-label" id="m3-lbl2" data-i="m3_right">Rechts</div>
      <div class="m3-flip" id="m3-flip2">
        <div class="m3-flip-inner" id="m3-inner2">
          <div class="m3-face-front is-fixed" id="m3-front2">
            <div class="m3-card-letter" id="m3-char2">?</div>
          </div>
          <div class="m3-face-back">
            <div class="m3-card-number" id="m3-num2">?</div>
            <div class="m3-card-sub" data-i="backside">Rückseite</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Position dots -->
  <div class="m3-pos-row">
    <div class="m3-pos-dot" id="m3-dot0"></div>
    <div class="m3-pos-dot" id="m3-dot1"></div>
    <div class="m3-pos-dot" id="m3-dot2"></div>
  </div>

  <div class="feedback-message" id="m3-feedback-msg"></div>

  <!-- Controls -->
  <div class="m3-controls">
    <button class="m3-arr" id="m3-left-btn">◀</button>
    <button class="m3-ok" id="m3-ok-btn" data-i="m3_confirm">↑ Bestätigen</button>
    <button class="m3-arr" id="m3-right-btn">▶</button>
  </div>

  <button class="abort-btn" id="abort-btn3" data-i="abort">✕ Abbrechen</button>
</div>

<!-- ══ END ════════════════════════════════ -->
<div class="screen" id="screen-end">
  <div class="end-card">
    <div class="end-title" data-i="end_title">Fertig!</div>
    <div class="end-sub" id="end-sub-text"></div>
    <div class="end-stats">
      <div class="end-stat-box"><div class="lbl" data-i="correct_lbl">Richtig</div><div class="val green" id="end-correct">0</div></div>
      <div class="end-stat-box"><div class="lbl" data-i="errors_lbl">Fehler</div><div class="val red" id="end-errors">0</div><div style="font-size:0.52rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--red);opacity:0.65;margin-top:4px;" data-i="incl_to">inkl. Timeouts</div></div>
      <div class="end-stat-box"><div class="lbl">Timeouts</div><div class="val red" id="end-timeouts">0</div></div>
    </div>
    <div class="end-stat-box" id="end-time-box" style="display:none;width:100%;text-align:center;margin-top:0;">
      <div class="lbl" data-i="end_time">Zeit</div>
      <div class="val green" id="end-time-val" style="font-size:1.6rem;">—</div>
    </div>
  </div>
  <div class="divider"></div>
  <button class="menu-btn" id="btn-to-menu" data-i="to_menu">← Hauptmenü</button>
</div>

</div><!-- #app -->
<script>
// ════════════════════════════════════════
// TRANSLATIONS
// ════════════════════════════════════════
const T={
  de:{
    title:'AlphaBrain', subtitle:'Lerne die Zahl hinter den Karten.',
    btn_m1:'▶ AlphaBrain', btn_m2:'◎ 60 Sek.', btn_m3:'⟺ Sortieren in 60 Sek.',
    lr_correct:'Richtig', lr_errors:'Fehler', lr_timeouts:'Timeouts',
    mode1_label:'AlphaBrain', mode1_sub:'Karte zur Zahl',
    mode2_label:'Modus 2', mode2_sub:'60 Sekunden',
    mode3_label:'Sortieren', mode3_sub:'60 Sekunden',
    points:'Punkte', which_num:'Welche Zahl?', backside:'Rückseite', seconds:'Sek.',
    remaining:(n)=>`${n} Karte${n!==1?'n':''} verbleiben`,
    abort:'✕ Abbrechen', last5:'Letzte 5:',
    end_title:'Fertig!', end_all26:'Alle 26 Karten gespielt',
    end_60s:'60 Sekunden · Modus 2', end_60s3:'60 Sekunden · Sortieren',
    correct_lbl:'Richtig', errors_lbl:'Fehler', incl_to:'inkl. Timeouts', to_menu:'← Hauptmenü',
    end_time:'Zeit', ctrl_hint:'Steuerung',
    ctrl_k1:'W / ↑', ctrl_v1:'= Bestätigen',
    ctrl_k2:'A / ◀', ctrl_v2:'= Links',
    ctrl_k3:'D / ▶', ctrl_v3:'= Rechts',
    ctrl_k4:'0 – 9', ctrl_v4:'= Nummer',
    ctrl_k5:'Enter', ctrl_v5:'= Start',
    ctrl_k6:'⌫ / ESC', ctrl_v6:'= Abbruch',
    fb_correct:'Richtig! ✓',
    fb_wrong:(n)=>`Falsch! Es wäre ${n} gewesen.`,
    fb_wrong2:'Falsch!', fb_timeout:'⏱ Zeit abgelaufen!',
    lrmode1:'Letztes Spiel · AlphaBrain', lrmode2:'Letztes Spiel · 60 Sek.', lrmode3:'Letztes Spiel · Sortieren',
    m3_left:'Links', m3_mid:'Mitte', m3_right:'Rechts',
    m3_confirm:'↑ Bestätigen',
    m3_move:'← Karte bewegen →',
  },
  en:{
    title:'AlphaBrain', subtitle:'Learn the number behind each card.',
    btn_m1:'▶ AlphaBrain', btn_m2:'◎ 60 Sec.', btn_m3:'⟺ Sort in 60 Sec.',
    lr_correct:'Correct', lr_errors:'Errors', lr_timeouts:'Timeouts',
    mode1_label:'AlphaBrain', mode1_sub:'Card to Number',
    mode2_label:'Mode 2', mode2_sub:'60 Seconds',
    mode3_label:'Sort', mode3_sub:'60 Seconds',
    points:'Points', which_num:'Which number?', backside:'Back', seconds:'Sec.',
    remaining:(n)=>`${n} card${n!==1?'s':''} remaining`,
    abort:'✕ Quit', last5:'Last 5:',
    end_title:'Done!', end_all26:'All 26 cards played',
    end_60s:'60 Seconds · Mode 2', end_60s3:'60 Seconds · Sort',
    correct_lbl:'Correct', errors_lbl:'Errors', incl_to:'incl. Timeouts', to_menu:'← Main Menu',
    end_time:'Time', ctrl_hint:'Controls',
    ctrl_k1:'W / ↑', ctrl_v1:'= Confirm',
    ctrl_k2:'A / ◀', ctrl_v2:'= Left',
    ctrl_k3:'D / ▶', ctrl_v3:'= Right',
    ctrl_k4:'0 – 9', ctrl_v4:'= Number',
    ctrl_k5:'Enter', ctrl_v5:'= Start',
    ctrl_k6:'⌫ / ESC', ctrl_v6:'= Quit',
    fb_correct:'Correct! ✓',
    fb_wrong:(n)=>`Wrong! It was ${n}.`,
    fb_wrong2:'Wrong!', fb_timeout:"⏱ Time's up!",
    lrmode1:'Last Game · AlphaBrain', lrmode2:'Last Game · 60 Sec.', lrmode3:'Last Game · Sort',
    m3_left:'Left', m3_mid:'Middle', m3_right:'Right',
    m3_confirm:'↑ Confirm',
    m3_move:'← Move card →',
  }
};
let lang='de';
function t(k,a){const v=T[lang][k];return typeof v==='function'?v(a):v;}
function applyLang(){
  document.querySelectorAll('[data-i]').forEach(el=>{
    const k=el.getAttribute('data-i'),v=T[lang][k];
    if(v&&typeof v!=='function')el.innerHTML=v;
  });
  document.getElementById('btn-lang').textContent=lang==='de'?'🇩🇪':'🇬🇧';
}

// ════════════════════════════════════════
// DARK MODE
// ════════════════════════════════════════
let dark=false;
function toggleDark(){dark=!dark;document.body.classList.toggle('dark',dark);document.getElementById('btn-dark').textContent=dark?'☀️':'🌙';}

// ════════════════════════════════════════
// AUDIO
// ════════════════════════════════════════
let actx=null;
function getCtx(){if(!actx)actx=new(window.AudioContext||window.webkitAudioContext)();return actx;}
function beep(f,type,dur,vol,delay=0){
  try{const c=getCtx(),o=c.createOscillator(),g=c.createGain();
    o.connect(g);g.connect(c.destination);o.type=type;
    o.frequency.setValueAtTime(f,c.currentTime+delay);
    g.gain.setValueAtTime(vol,c.currentTime+delay);
    g.gain.exponentialRampToValueAtTime(0.001,c.currentTime+delay+dur);
    o.start(c.currentTime+delay);o.stop(c.currentTime+delay+dur);
  }catch(e){}
}
function playCorrect(){beep(523,'sine',0.12,0.3);beep(659,'sine',0.15,0.3,0.1);beep(784,'sine',0.2,0.3,0.22);}
function playWrong(){beep(220,'sawtooth',0.08,0.25);beep(180,'sawtooth',0.12,0.2,0.09);}
function playTimeout(){beep(330,'triangle',0.06,0.2);beep(260,'triangle',0.1,0.2,0.08);beep(200,'triangle',0.15,0.2,0.18);}
function playVanish(){beep(880,'sine',0.08,0.18);beep(1100,'sine',0.06,0.15,0.07);beep(1400,'sine',0.05,0.1,0.14);}
function playMove(){beep(500,'sine',0.035,0.08);}

// ════════════════════════════════════════
// SHARED UTILS
// ════════════════════════════════════════
const CIRC=2*Math.PI*21;
const ALL_CARDS='ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map((l,i)=>({letter:l,number:i+1}));
let lastResult=null;

function rnd(a,b){return a+Math.floor(Math.random()*(b-a+1));}
function shuffle(a){const r=[...a];for(let i=r.length-1;i>0;i--){const j=rnd(0,i);[r[i],r[j]]=[r[j],r[i]];}return r;}

function showScreen(id){
  document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));
  document.getElementById(id).classList.add('active');
  applyLang();
}
function showEnd(mode,correct,errors,timeouts,subKey,elapsedMs){
  lastResult={mode,correct,errors,timeouts};
  document.getElementById('end-sub-text').textContent=t(subKey);
  document.getElementById('end-correct').textContent=correct;
  document.getElementById('end-errors').textContent=errors;
  document.getElementById('end-timeouts').textContent=timeouts;
  const timeBox=document.getElementById('end-time-box');
  if(mode===1 && elapsedMs!=null){
    const secs=Math.round(elapsedMs/1000);
    const m=Math.floor(secs/60), s=secs%60;
    document.getElementById('end-time-val').textContent=m>0?`${m}m ${s}s`:`${s}s`;
    timeBox.style.display='block';
  } else {
    timeBox.style.display='none';
  }
  showScreen('screen-end');
}
function goMenu(){
  clearInterval(m1.timer);
  clearInterval(m2.globalTimer);clearInterval(m2.cardTimer);
  clearInterval(m3.globalTimer);clearInterval(m3.cardTimer);
  m2.done=true;m2.accepting=false;
  m3.done=true;m3.accepting=false;
  m1.accepting=false;
  document.removeEventListener('keydown',m3Key);
  if(lastResult){
    document.getElementById('lr-mode-label').textContent=t('lrmode'+lastResult.mode);
    document.getElementById('lr-correct').textContent=lastResult.correct;
    document.getElementById('lr-errors').textContent=lastResult.errors;
    document.getElementById('lr-timeouts').textContent=lastResult.timeouts;
    document.getElementById('last-result-box').style.display='block';
  }
  showScreen('screen-menu');
}

// ════════════════════════════════════════
// MODE 1
// ════════════════════════════════════════
let m1={};
function m1Start(){
  m1={deck:shuffle(ALL_CARDS),current:null,score:0,errors:0,timeouts:0,accepting:false,timer:null,tc:5,startTime:Date.now()};
  document.getElementById('score-display').textContent=0;
  showScreen('screen-game');m1Next();
}
function m1Next(){
  if(m1.deck.length===0){clearInterval(m1.timer);showEnd(1,m1.score,m1.errors,m1.timeouts,'end_all26',Date.now()-m1.startTime);return;}
  m1.current=m1.deck[Math.floor(Math.random()*m1.deck.length)];
  document.getElementById('card-letter').textContent=m1.current.letter;
  document.getElementById('card-number').textContent=m1.current.number;
  const st=document.getElementById('card-stage'),inn=document.getElementById('card-inner');
  st.classList.remove('vanishing','wrong');inn.classList.remove('flipped');inn.style.animation='';
  document.getElementById('num-input').value='';
  document.getElementById('num-input').classList.remove('wrong-flash');
  document.getElementById('feedback-msg').textContent='';
  document.getElementById('remaining-row').textContent=t('remaining',m1.deck.length);
  m1.accepting=true;
  clearInterval(m1.timer);m1.tc=5;m1Timer(5);
  m1.timer=setInterval(()=>{m1.tc--;m1Timer(m1.tc);if(m1.tc<=0){clearInterval(m1.timer);m1Timeout();}},1000);
  document.getElementById('num-input').focus();
}
function m1Timer(v){
  document.getElementById('timer-arc').style.strokeDashoffset=CIRC*(1-v/5);
  document.getElementById('timer-arc').classList.toggle('urgent',v<=2);
  document.getElementById('timer-label').textContent=v;
  document.getElementById('timer-label').classList.toggle('urgent',v<=2);
}
function m1Timeout(){if(!m1.accepting)return;m1.accepting=false;m1.timeouts++;m1.errors++;playTimeout();m1Fb(t('fb_timeout'),'red');m1Flip();}
function m1Submit(){
  if(!m1.accepting)return;
  const v=parseInt(document.getElementById('num-input').value,10);
  if(isNaN(v)||v<1||v>26){m1Flash();return;}
  clearInterval(m1.timer);m1.accepting=false;
  if(v===m1.current.number){
    m1.score++;document.getElementById('score-display').textContent=m1.score;
    playCorrect();playVanish();m1Fb(t('fb_correct'),'green');
    m1.deck=m1.deck.filter(c=>c.letter!==m1.current.letter);
    document.getElementById('card-stage').classList.add('vanishing');
    setTimeout(m1Next,700);
  }else{m1.errors++;playWrong();m1Fb(t('fb_wrong',m1.current.number),'red');m1Flip();}
}
function m1Flip(){
  const inn=document.getElementById('card-inner'),st=document.getElementById('card-stage');
  st.classList.add('wrong');
  setTimeout(()=>{st.classList.remove('wrong');inn.classList.add('flipped');
    setTimeout(()=>{inn.classList.remove('flipped');setTimeout(m1Next,200);},2000);},400);
}
function m1Fb(msg,type){const e=document.getElementById('feedback-msg');e.textContent=msg;e.style.color=type==='red'?'var(--red)':'var(--green)';}
function m1Flash(){const i=document.getElementById('num-input');i.classList.add('wrong-flash');setTimeout(()=>i.classList.remove('wrong-flash'),500);}

// ════════════════════════════════════════
// MODE 2
// ════════════════════════════════════════
const M2_DUR=60,M2_CD=5;
let m2={};
function m2Start(){
  m2={allCards:[...ALL_CARDS],recent:[],current:null,score:0,errors:0,timeouts:0,accepting:false,globalTimer:null,cardTimer:null,timeLeft:M2_DUR,done:false};
  document.getElementById('m2-score-display').textContent=0;
  m2Bar(M2_DUR);m2Pips();showScreen('screen-game2');
  setTimeout(()=>{m2Global();m2Next();},200);
}
function m2Avail(){return m2.allCards.filter(c=>!m2.recent.includes(c.letter));}
function m2Next(){
  if(m2.done)return;
  m2.current=m2.Avail ? m2.Avail()[Math.floor(Math.random()*m2.Avail().length)] : (()=>{const p=m2Avail();return p[Math.floor(Math.random()*p.length)];})();
  const p=m2Avail(); m2.current=p[Math.floor(Math.random()*p.length)];
  document.getElementById('m2-card-letter').textContent=m2.current.letter;
  document.getElementById('m2-card-number').textContent=m2.current.number;
  const st=document.getElementById('m2-card-stage'),inn=document.getElementById('m2-card-inner');
  st.classList.remove('vanishing','wrong');inn.classList.remove('flipped');inn.style.animation='';
  document.getElementById('m2-num-input').value='';
  document.getElementById('m2-num-input').classList.remove('wrong-flash');
  document.getElementById('m2-feedback-msg').textContent='';
  m2.accepting=true;
  clearInterval(m2.cardTimer);let ctc=5;
  m2.cardTimer=setInterval(()=>{ctc--;if(ctc<=0){clearInterval(m2.cardTimer);m2Timeout();}},1000);
  document.getElementById('m2-num-input').focus();
}
function m2Global(){
  clearInterval(m2.globalTimer);
  m2.globalTimer=setInterval(()=>{
    m2.timeLeft--;m2Bar(m2.timeLeft);
    if(m2.timeLeft<=0){clearInterval(m2.globalTimer);clearInterval(m2.cardTimer);m2.done=true;m2.accepting=false;showEnd(2,m2.score,m2.errors,m2.timeouts,'end_60s',null);}
  },1000);
}
function m2Bar(v){
  const b=document.getElementById('m2-bar'),l=document.getElementById('m2-time-label');
  b.style.width=(v/M2_DUR*100)+'%';b.classList.toggle('urgent',v<=10);l.textContent=v;l.classList.toggle('urgent',v<=10);
}
function m2AddRecent(letter){m2.recent.push(letter);if(m2.recent.length>M2_CD)m2.recent.shift();m2Pips();}
function m2Pips(){for(let i=0;i<5;i++){const p=document.getElementById('rp'+i),l=m2.recent[m2.recent.length-1-i];if(l){p.textContent=l;p.classList.add('filled');}else{p.textContent='—';p.classList.remove('filled');}}}
function m2Timeout(){
  if(!m2.accepting||m2.done)return;m2.accepting=false;m2.timeouts++;m2.errors++;playTimeout();
  m2Fb(t('fb_timeout'),'red');m2AddRecent(m2.current.letter);
  const st=document.getElementById('m2-card-stage');st.classList.add('wrong');
  setTimeout(()=>{st.classList.remove('wrong');if(!m2.done)setTimeout(m2Next,150);},600);
}
function m2Submit(){
  if(!m2.accepting||m2.done)return;
  const v=parseInt(document.getElementById('m2-num-input').value,10);
  if(isNaN(v)||v<1||v>26){m2Flash();return;}
  clearInterval(m2.cardTimer);m2.accepting=false;
  if(v===m2.current.number){
    m2.score++;document.getElementById('m2-score-display').textContent=m2.score;
    playCorrect();playVanish();m2Fb(t('fb_correct'),'green');m2AddRecent(m2.current.letter);
    document.getElementById('m2-card-stage').classList.add('vanishing');
    setTimeout(()=>{if(!m2.done)m2Next();},650);
  }else{
    m2.errors++;playWrong();m2Fb(t('fb_wrong2'),'red');m2AddRecent(m2.current.letter);
    const st=document.getElementById('m2-card-stage');st.classList.add('wrong');
    setTimeout(()=>{st.classList.remove('wrong');if(!m2.done)setTimeout(m2Next,150);},600);
  }
}
function m2Fb(msg,type){const e=document.getElementById('m2-feedback-msg');e.textContent=msg;e.style.color=type==='red'?'var(--red)':'var(--green)';}
function m2Flash(){const i=document.getElementById('m2-num-input');i.classList.add('wrong-flash');setTimeout(()=>i.classList.remove('wrong-flash'),400);}

// ════════════════════════════════════════
// MODE 3
// ════════════════════════════════════════
/*
  HOW IT WORKS:
  - Pick 3 distinct cards (letter → number = position in alphabet, A=1..Z=26)
  - Sort them by number: lo, mid, hi  (these are the "true" positions)
  - The PLAYER card (B) is always lo or hi (never mid), so it's always wrong in the middle
    → The player must move it left (if it should be lowest) or right (if it should be highest)
  - The two STATIC cards fill the remaining slots. The static cards are always displayed
    in their correct relative order (lower one always left of higher one), so the player
    only needs to figure out where B goes relative to them.
  - All 3 letters are visible on the front. On wrong: all flip to show numbers for 2s.
  - Cards are close: max spread = 5 between lowest and highest number in the triplet.
  - B starts in the MIDDLE slot visually.
  - Correct slot for B: slot 0 (left) if B is the lowest, slot 2 (right) if B is the highest.
*/
const M3_DUR=60;
let m3={};

function m3GenRound(){
  // Pick B (player card) first: any of 26
  // Then pick 2 static cards within ±5 of B but not equal to B
  // Ensure all 3 are distinct and span ≤ 5
  // Guarantee B is NOT the middle value (it must be lowest or highest)

  let tries=0;
  while(tries++<200){
    const bIdx=rnd(0,25); // 0..25 → number = bIdx+1
    const bNum=bIdx+1;

    // Range for all 3: [bNum-4 .. bNum+4] clamped to 1..26, span ≤ 5
    const rangeMin=Math.max(1,bNum-4);
    const rangeMax=Math.min(26,bNum+4);
    if(rangeMax-rangeMin < 2) continue; // need at least 3 distinct values in range

    // Pick 2 other distinct numbers from range, not equal to bNum
    const pool=[];
    for(let n=rangeMin;n<=rangeMax;n++) if(n!==bNum) pool.push(n);
    if(pool.length<2) continue;
    const shuf=shuffle(pool);
    const s1=shuf[0],s2=shuf[1];
    const lo=Math.min(s1,s2), hi=Math.max(s1,s2);

    // Ensure total spread ≤ 5
    const allNums=[bNum,lo,hi];
    const spread=Math.max(...allNums)-Math.min(...allNums);
    if(spread>5) continue;

    // Determine correct slot: lo always shown left, hi always shown right
    // B correct: slot 0 if smallest, slot 1 if middle, slot 2 if largest
    const sorted=[bNum,lo,hi].sort((a,b)=>a-b);
    let correctSlot;
    if(sorted[0]===bNum) correctSlot=0;
    else if(sorted[1]===bNum) correctSlot=1;
    else correctSlot=2;

    const bLetter=ALL_CARDS[bNum-1].letter;
    const loLetter=ALL_CARDS[lo-1].letter;
    const hiLetter=ALL_CARDS[hi-1].letter;

    return {bNum,bLetter,loNum:lo,loLetter,hiNum:hi,hiLetter,correctSlot};
  }
  // fallback
  return {bNum:5,bLetter:'E',loNum:3,loLetter:'C',hiNum:8,hiLetter:'H',correctSlot:1};
}

function m3Start(){
  m3={score:0,errors:0,timeouts:0,accepting:false,globalTimer:null,cardTimer:null,timeLeft:M3_DUR,done:false,bSlot:1,round:null};
  document.getElementById('m3-score-display').textContent=0;
  m3GlobalBar(M3_DUR);
  showScreen('screen-game3');
  document.addEventListener('keydown',m3Key);
  setTimeout(()=>{m3StartGlobal();m3NextRound();},200);
}

function m3NextRound(){
  if(m3.done)return;
  m3.bSlot=1; // B always starts in the middle
  m3.round=m3GenRound();
  m3.accepting=false;

  // Unflip all
  [0,1,2].forEach(i=>{
    document.getElementById('m3-inner'+i).classList.remove('flipped');
  });
  document.getElementById('m3-feedback-msg').textContent='';

  // Layout:
  //   slot 0 (left)   → static lo card
  //   slot 1 (middle) → B card (player)
  //   slot 2 (right)  → static hi card
  m3Render();
  m3UpdateDots();
  m3CardTimer();
  // Small delay before accepting to let render settle
  setTimeout(()=>{m3.accepting=true;},120);
}

// Render: set letters in each visual column based on current bSlot
// Slots: col0=left, col1=middle, col2=right
// The two static cards are always lo(left) and hi(right) EXCEPT when B occupies that slot.
// When bSlot=0: col0=B, col1=lo, col2=hi
// When bSlot=1: col0=lo, col1=B, col2=hi  (default)
// When bSlot=2: col0=lo, col1=hi, col2=B
function m3SlotContents(){
  const r=m3.round;
  if(m3.bSlot===0) return [
    {letter:r.bLetter,  num:r.bNum,   isB:true},
    {letter:r.loLetter, num:r.loNum,  isB:false},
    {letter:r.hiLetter, num:r.hiNum,  isB:false},
  ];
  if(m3.bSlot===1) return [
    {letter:r.loLetter, num:r.loNum,  isB:false},
    {letter:r.bLetter,  num:r.bNum,   isB:true},
    {letter:r.hiLetter, num:r.hiNum,  isB:false},
  ];
  // bSlot===2
  return [
    {letter:r.loLetter, num:r.loNum,  isB:false},
    {letter:r.hiLetter, num:r.hiNum,  isB:false},
    {letter:r.bLetter,  num:r.bNum,   isB:true},
  ];
}

function m3Render(slideDir){
  const contents=m3SlotContents();
  contents.forEach((c,i)=>{
    document.getElementById('m3-char'+i).textContent=c.letter;
    document.getElementById('m3-num'+i).textContent=c.num;
    const front=document.getElementById('m3-front'+i);
    front.classList.toggle('is-b',c.isB);
    front.classList.toggle('is-fixed',!c.isB);
    // Slide animation on the B card column
    if(c.isB && slideDir){
      const flip=document.getElementById('m3-flip'+i);
      flip.classList.remove('m3-slide-in-left','m3-slide-in-right');
      void flip.offsetWidth; // reflow
      flip.classList.add(slideDir==='left'?'m3-slide-in-left':'m3-slide-in-right');
    }
  });
  // Update arrow button disabled state
  document.getElementById('m3-left-btn').disabled=m3.bSlot===0||!m3.accepting;
  document.getElementById('m3-right-btn').disabled=m3.bSlot===2||!m3.accepting;
}

function m3UpdateDots(){
  [0,1,2].forEach(i=>document.getElementById('m3-dot'+i).classList.toggle('on',i===m3.bSlot));
}

function m3MoveB(dir){
  if(!m3.accepting||m3.done)return;
  const next=m3.bSlot+dir;
  if(next<0||next>2)return;
  m3.bSlot=next;
  playMove();
  m3Render(dir<0?'right':'left'); // sliding in from opposite direction
  m3UpdateDots();
}

function m3Confirm(){
  if(!m3.accepting||m3.done)return;
  clearInterval(m3.cardTimer);
  m3.accepting=false;

  const correct=m3.round.correctSlot;
  if(m3.bSlot===correct){
    m3.score++;
    document.getElementById('m3-score-display').textContent=m3.score;
    playCorrect();
    m3Fb(t('fb_correct'),'green');
    // Vanish the B column
    const bCol=m3.bSlot;
    const flip=document.getElementById('m3-flip'+bCol);
    flip.style.transition='transform 0.55s ease-in, opacity 0.55s ease-in';
    flip.style.transform='scale(0) rotate(12deg)';
    flip.style.opacity='0';
    setTimeout(()=>{
      flip.style.transition='';flip.style.transform='';flip.style.opacity='';
      if(!m3.done)m3NextRound();
    },650);
  } else {
    m3.errors++;
    playWrong();
    m3Fb(t('fb_wrong2'),'red');
    // Flip all 3 cards to show numbers
    [0,1,2].forEach(i=>document.getElementById('m3-inner'+i).classList.add('flipped'));
    setTimeout(()=>{
      [0,1,2].forEach(i=>document.getElementById('m3-inner'+i).classList.remove('flipped'));
      setTimeout(()=>{if(!m3.done)m3NextRound();},200);
    },2000);
  }
}

function m3CardTimer(){
  clearInterval(m3.cardTimer);
  const TOTAL=2500; // 2.5 seconds
  const TICK=100;   // update every 100ms for smooth bar
  let elapsed=0;
  m3CBar(1);
  m3.cardTimer=setInterval(()=>{
    elapsed+=TICK;
    const frac=1-(elapsed/TOTAL);
    m3CBar(Math.max(0,frac));
    if(elapsed>=TOTAL){clearInterval(m3.cardTimer);m3CardTimeout();}
  },TICK);
}
function m3CBar(frac){
  const b=document.getElementById('m3-ctimer');
  b.style.transition='none';
  b.style.width=(frac*100)+'%';
  b.classList.toggle('urgent',frac<=0.4);
}

function m3CardTimeout(){
  if(!m3.accepting||m3.done)return;
  m3.accepting=false;m3.timeouts++;m3.errors++;
  playTimeout();m3Fb(t('fb_timeout'),'red');
  [0,1,2].forEach(i=>document.getElementById('m3-inner'+i).classList.add('flipped'));
  setTimeout(()=>{
    [0,1,2].forEach(i=>document.getElementById('m3-inner'+i).classList.remove('flipped'));
    setTimeout(()=>{if(!m3.done)m3NextRound();},200);
  },2000);
}

function m3StartGlobal(){
  clearInterval(m3.globalTimer);
  m3.globalTimer=setInterval(()=>{
    m3.timeLeft--;m3GlobalBar(m3.timeLeft);
    if(m3.timeLeft<=0){
      clearInterval(m3.globalTimer);clearInterval(m3.cardTimer);
      m3.done=true;m3.accepting=false;
      document.removeEventListener('keydown',m3Key);
      showEnd(3,m3.score,m3.errors,m3.timeouts,'end_60s3',null);
    }
  },1000);
}
function m3GlobalBar(v){
  const b=document.getElementById('m3-bar'),l=document.getElementById('m3-time-label');
  b.style.width=(v/M3_DUR*100)+'%';b.classList.toggle('urgent',v<=10);l.textContent=v;l.classList.toggle('urgent',v<=10);
}
function m3Fb(msg,type){const e=document.getElementById('m3-feedback-msg');e.textContent=msg;e.style.color=type==='red'?'var(--red)':'var(--green)';}

function m3Key(e){
  if(m3.done)return;
  if(e.key==='ArrowLeft'||e.key==='a'||e.key==='A'){e.preventDefault();m3MoveB(-1);}
  else if(e.key==='ArrowRight'||e.key==='d'||e.key==='D'){e.preventDefault();m3MoveB(1);}
  else if(e.key==='ArrowUp'||e.key==='w'||e.key==='W'||e.key==='Enter'){e.preventDefault();m3Confirm();}
}

// ════════════════════════════════════════
// EVENTS
// ════════════════════════════════════════
document.getElementById('btn-dark').addEventListener('click',toggleDark);
document.getElementById('btn-lang').addEventListener('click',()=>{lang=lang==='de'?'en':'de';applyLang();});

document.getElementById('btn-play-mode1').addEventListener('click',m1Start);
document.getElementById('btn-play-mode2').addEventListener('click',m2Start);
document.getElementById('btn-play-mode3').addEventListener('click',m3Start);

document.getElementById('submit-btn').addEventListener('click',m1Submit);
document.getElementById('num-input').addEventListener('keydown',e=>{
  if(e.key==='Enter'||e.key==='ArrowUp'||e.key==='w'||e.key==='W'){e.preventDefault();m1Submit();}
  if(e.key==='ArrowDown'){e.preventDefault();}
});

document.getElementById('m2-submit-btn').addEventListener('click',m2Submit);
document.getElementById('m2-num-input').addEventListener('keydown',e=>{
  if(e.key==='Enter'||e.key==='ArrowUp'||e.key==='w'||e.key==='W'){e.preventDefault();m2Submit();}
  if(e.key==='ArrowDown'){e.preventDefault();}
});

document.getElementById('m3-left-btn').addEventListener('click',()=>m3MoveB(-1));
document.getElementById('m3-right-btn').addEventListener('click',()=>m3MoveB(1));
document.getElementById('m3-ok-btn').addEventListener('click',m3Confirm);

document.getElementById('abort-btn1').addEventListener('click',goMenu);
document.getElementById('abort-btn2').addEventListener('click',goMenu);
document.getElementById('abort-btn3').addEventListener('click',goMenu);
document.getElementById('btn-to-menu').addEventListener('click',goMenu);

// ════════════════════════════════════════
// MENU KEYBOARD NAVIGATION
// ════════════════════════════════════════
const menuBtns=['btn-play-mode1','btn-play-mode2','btn-play-mode3'];
let menuSel=0;

function menuUpdateHighlight(){
  menuBtns.forEach((id,i)=>{
    document.getElementById(id).classList.toggle('kb-selected',i===menuSel);
  });
}

// Sync mouse hover → moves menuSel so outline follows the mouse
menuBtns.forEach((id,i)=>{
  document.getElementById(id).addEventListener('mouseenter',()=>{
    menuSel=i;
    menuUpdateHighlight();
  });
});

document.addEventListener('keydown',function menuKey(e){
  if(!document.getElementById('screen-menu').classList.contains('active'))return;
  if(e.key==='ArrowUp'||e.key==='w'||e.key==='W'){
    e.preventDefault();
    menuSel=(menuSel-1+menuBtns.length)%menuBtns.length;
    menuUpdateHighlight();
  }else if(e.key==='ArrowDown'||e.key==='s'||e.key==='S'){
    e.preventDefault();
    menuSel=(menuSel+1)%menuBtns.length;
    menuUpdateHighlight();
  }else if(e.key==='Enter'){
    e.preventDefault();
    document.getElementById(menuBtns[menuSel]).click();
  }
});
menuUpdateHighlight();

// ════════════════════════════════════════
// BACKSPACE / ESC = ABORT (go to menu)
// ════════════════════════════════════════
document.addEventListener('keydown',function abortKey(e){
  if(e.key==='Escape'||e.key==='Backspace'){
    // Only if we're in a game screen, not menu/end
    const inGame=document.getElementById('screen-game').classList.contains('active')
               ||document.getElementById('screen-game2').classList.contains('active')
               ||document.getElementById('screen-game3').classList.contains('active');
    // Also allow ESC on end screen to go back to menu
    const onEnd=document.getElementById('screen-end').classList.contains('active');
    if(inGame||onEnd){
      // Don't intercept Backspace when the number input is focused and has text
      if(e.key==='Backspace'){
        const active=document.activeElement;
        if(active&&(active.id==='num-input'||active.id==='m2-num-input')&&active.value!=='') return;
      }
      e.preventDefault();
      goMenu();
    }
  }
});



applyLang();
</script>
</body>
</html>