/* ============================================================
   HUB-RESTYLE v2 · Führerscheine, Arena & Kommentar-Check
   Vollständiger Umzug in die Hub-Designsprache:
   Open Sans überall, Pillen-Buttons, weiche Karten.
   Wird in den vier Tools NACH deren Styles geladen.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root {
  --pixel: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --body:  'Open Sans', 'Segoe UI', system-ui, sans-serif;
  --dark:  #14283C;
  --shadow: 0 2px 8px rgba(10, 61, 98, .16);
}

/* ── Ex-Pixel-Elemente: kräftig & lesbar in Open Sans ── */
.answer-key, .badge-lesson, .badge-round, .btn, .lesson-title-txt,
.overview-num, .overview-tag, .progress-label, .rank-name, .section-title,
.diff-badge, .enemy-name, .level-badge, .round-info, .streak-badge,
.area-hint, .breakdown-head, .breakdown-score, .btn-hub-result, .btn-next,
.btn-restart, .fb-verdict, .header-badge, .header-title, .result-rank,
.score-chip .num, .stat-box .n, .zone-label, .comment-avatar,
.pixel-title, .start-title, .rank-title {
  font-family: 'Open Sans', 'Segoe UI', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  line-height: 1.35;
}

/* Größen (Pixelschrift wirkte ~1,5× größer als angegeben) */
.progress-label, .area-hint, .round-info,
.badge-lesson, .badge-round, .level-badge, .diff-badge,
.streak-badge, .header-badge { font-size: 11px !important; letter-spacing: .08em; text-transform: uppercase; }
.answer-key, .section-title, .zone-label, .breakdown-head { font-size: 12.5px !important; }
.lesson-title-txt, .overview-num, .enemy-name, .breakdown-score,
.btn-hub-result { font-size: 13.5px !important; }
.btn, .overview-tag, .btn-next, .btn-restart { font-size: 14px !important; }
.fb-verdict, .result-rank { font-size: 16px !important; }
.rank-name, .comment-avatar { font-size: 16px !important; }
.header-title { font-size: 19px !important; }
.pixel-title { font-size: 17px !important; letter-spacing: -0.01em; }
.start-title, .rank-title { font-size: clamp(22px, 5vw, 30px) !important; letter-spacing: -0.02em; }
.score-chip .num { font-size: 20px !important; }
.stat-box .n { font-size: 24px !important; }

/* ── Buttons als Hub-Pillen ── */
.btn, .btn-next, .btn-restart, .btn-hub-result, .answer-btn {
  border-radius: 100px !important;
}
.btn, .btn-next, .btn-restart, .btn-hub-result {
  border: none !important;
  padding: 12px 24px !important;
  box-shadow: 0 3px 10px rgba(10, 61, 98, .22) !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover, .btn-next:hover, .btn-restart:hover, .btn-hub-result:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 61, 98, .28) !important;
}

/* ── Antwort-/Auswahlflächen: Hub-Kartenlogik ── */
.answer-btn {
  border-radius: 14px !important;
  border: 1.5px solid #D9E4EE !important;
  box-shadow: 0 1px 4px rgba(10, 61, 98, .08) !important;
}
.answer-btn:hover { border-color: #0077C1 !important; }

/* ── Doppelten Hub-Button ausblenden — die Leiste übernimmt ── */
.hub-back-btn { display: none !important; }