.br-game-layout { display: flex; gap: 20px; align-items: flex-start; justify-content: center; max-width: 800px; margin: 0 auto 50px; flex-wrap: wrap; }
.br-game-layout.no-sidebar { max-width: 560px; }
.br-game { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 4px 20px rgba(0,0,0,0.10); max-width: 560px; flex: 1 1 400px; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; color: #222; }
.br-game * { box-sizing: border-box; }
.br-game button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; min-height: 44px; }
.br-game h3 { margin: 0 0 6px; font-size: 22px; text-align: center; color: #1e293b; }
.br-game-sub { text-align: center; color: #6b7280; font-size: 14px; margin-bottom: 20px; }

.br-game-step { display: none; }
.br-game-step.is-active { display: block; }

.br-game-name-input {
    display: block; width: 100%; max-width: 260px; margin: 0 auto 14px; padding: 10px 14px;
    border: 2px solid #d1d5db; border-radius: 100px; font-size: 16px; text-align: center; font-weight: 600;
}
.br-game-name-input:focus { outline: none; border-color: #9333ea; }
.br-game-greeting { text-align: center; font-weight: 700; color: #9333ea; margin-bottom: 10px; font-size: 15px; }

.br-game-sidebar {
    background: #faf5ff; border: 2px solid #e9d5ff; border-radius: 16px; padding: 18px 18px 10px;
    width: 240px; flex: 0 0 240px; box-sizing: border-box; max-height: 420px; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.br-game-sidebar .br-game-choice-label { margin-top: 0; text-align: center; }
.br-game-lb-list { list-style: none; margin: 8px 0 0; padding: 0; }
.br-game-lb-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13.5px; border-bottom: 1px solid #eddcfb; }
.br-game-lb-list li:last-child { border-bottom: none; }
.br-game-lb-rank { width: 24px; text-align: center; font-weight: 700; flex-shrink: 0; }
.br-game-lb-name { flex: 1; font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-game-lb-points { font-weight: 700; color: #7e22ce; white-space: nowrap; }
.br-game-lb-empty { font-size: 13px; color: #6b21a8; text-align: center; margin: 10px 0 6px; }

.br-game-choice-label { font-weight: 700; font-size: 14px; margin: 16px 0 8px; color: #374151; text-align: center; }

.br-game-start-btn {
    display: block; margin: 24px auto 0; background: #9333ea; color: #fff; border: none; border-radius: 100px;
    padding: 14px 36px; font-size: 17px; font-weight: 700; cursor: pointer; transition: background 0.15s;
}
.br-game-start-btn:hover { background: #7e22ce; }
.br-game-start-btn:disabled { opacity: 0.5; cursor: default; }

.br-game-score { display: flex; justify-content: center; gap: 24px; margin-bottom: 18px; font-size: 14px; font-weight: 700; }
.br-game-score-correct { color: #16a34a; }
.br-game-score-wrong { color: #dc2626; }

.br-game-problem-box { text-align: center; padding: 6px 0 16px; }
.br-game-task { font-size: 28px; font-weight: 800; color: #1e293b; margin: 6px 0 14px; }
.br-game-question { font-size: 15px; color: #6b7280; margin: 14px 0 16px; }
.br-game-answer-row { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.br-game-choice-btn {
    border: 2px solid #d1d5db; background: #f9fafb; border-radius: 14px; padding: 14px 0; cursor: pointer;
    font-size: 30px; font-weight: 800; width: 96px; transition: all 0.15s;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.br-game-choice-btn:hover { border-color: #9333ea; background: #faf5ff; }

.br-game-feedback { text-align: center; min-height: 96px; padding-top: 10px; }
.br-game-feedback-emoji { font-size: 60px; display: inline-block; animation: dbl-pop 0.4s ease; }
@keyframes dbl-pop { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.br-game-feedback-text { font-size: 15px; font-weight: 700; margin-top: 8px; }
.br-game-feedback-text.is-correct { color: #16a34a; }
.br-game-feedback-text.is-wrong { color: #dc2626; }

.br-game-back-btn { display: block; margin: 18px auto 0; background: none; border: none; color: #6b7280; font-size: 13px; cursor: pointer; text-decoration: underline; }

.br-game-grade-row, .br-game-mode-row { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.br-game-grade-btn {
    border: 2px solid #d1d5db; background: #f9fafb; border-radius: 14px; padding: 12px 0; cursor: pointer;
    font-size: 26px; font-weight: 800; width: 64px; transition: all 0.15s;
}
.br-game-mode-btn {
    border: 2px solid #d1d5db; background: #f9fafb; border-radius: 14px; padding: 12px 18px; cursor: pointer;
    font-size: 16px; font-weight: 800; transition: all 0.15s;
}
.br-game-grade-btn:hover, .br-game-mode-btn:hover { border-color: #9333ea; background: #faf5ff; }
.br-game-grade-btn.is-selected, .br-game-mode-btn.is-selected { border-color: #9333ea; background: #9333ea; color: #fff; }

@media (max-width: 480px) {
        .br-game-choice-btn { font-size: 24px; width: 82px; }
}
@media (max-width: 700px) {
    .br-game-layout { flex-direction: column; align-items: stretch; }
    .br-game-sidebar { width: 100%; flex-basis: auto; max-height: 220px; order: 2; }
}

.game-focus-overlay .br-game-layout { margin: 0 auto; }

/* ================= Eigene Regeln für die Brüche =================
   Die geerbten Antwortknöpfe sind auf zweistellige Zahlen zugeschnitten
   (feste Breite 96px, Schrift 30px). Hier stehen Brüche und Bilder drin,
   also werden Breite und Schrift neu gesetzt. Diese Regeln stehen bewusst
   am Dateiende, damit sie auch die Media-Query weiter oben überschreiben. */

/* ---- Bruch als Zähler über Nenner ---- */
.br-frac {
    display: inline-flex; flex-direction: column; align-items: center;
    line-height: 1.05; font-weight: 800; color: #1e293b;
}
.br-frac-z { font-size: 30px; padding: 0 6px; }
.br-frac-n { font-size: 30px; padding: 0 6px; border-top: 3px solid #1e293b; }
.br-game-task .br-frac-z, .br-game-task .br-frac-n { font-size: 46px; }
.br-game-task .br-frac-n { border-top-width: 4px; }

/* ---- Das Bild vom Ganzen ---- */
.br-bild { display: block; margin: 0 auto; height: auto; }
.br-game-task .br-bild.is-rechteck { width: 100%; max-width: 280px; }
.br-game-task .br-bild.is-kreis { width: 160px; max-width: 70%; }
.br-game-task { margin: 10px 0 18px; min-height: 120px; display: flex; align-items: center; justify-content: center; }

/* ---- Antworten: Brüche nebeneinander ---- */
.br-game-answer-row.is-brueche { display: flex; gap: 12px; justify-content: center; }
.br-game-answer-row.is-brueche .br-game-choice-btn {
    width: auto; flex: 1 1 0; max-width: 110px; padding: 12px 6px; font-size: inherit;
}

/* ---- Antworten: Bilder untereinander, volle Breite ---- */
.br-game-answer-row.is-bilder { display: grid; grid-template-columns: 1fr; gap: 10px; }
.br-game-answer-row.is-bilder .br-game-choice-btn { width: 100%; padding: 8px 10px; }
.br-game-choice-btn.is-bild .br-bild { width: 100%; max-width: 300px; }

.br-game-choice-btn { transition: border-color .15s, background .15s, transform .1s; }
.br-game-choice-btn:active { transform: scale(0.97); }
.br-game-choice-btn:hover { border-color: #9333ea; background: #faf5ff; }

@media (max-width: 480px) {
    .br-frac-z, .br-frac-n { font-size: 26px; }
    .br-game-task .br-frac-z, .br-game-task .br-frac-n { font-size: 40px; }
    .br-game-task .br-bild.is-kreis { width: 140px; }
    .br-game-answer-row.is-brueche .br-game-choice-btn { padding: 10px 4px; }
}

/* ---- Höhe: die Karte muss auf ein Telefon passen ----
   Gemessen am 2026-10-10: ohne diese Regeln ist die Karte am iPhone 848 px
   hoch bei 812 px Bildschirmhöhe und rutscht unter den Beenden-Knopf. */
.br-game-feedback { min-height: 96px; }
@media (max-height: 900px), (max-width: 480px) {
    .br-game { padding: 18px 16px; }
    .br-game h3 { font-size: 20px; }
    .br-game-sub { margin-bottom: 12px; }
    .br-game-score { margin-bottom: 10px; }
    .br-game-problem-box { padding: 2px 0 10px; }
    .br-game-task { min-height: 96px; margin: 6px 0 12px; }
    .br-game-feedback { min-height: 64px; padding-top: 6px; }
    .br-game-feedback-emoji { font-size: 46px; }
    .br-game-back-btn { margin-top: 10px; }
    .br-game-answer-row.is-bilder { gap: 8px; }
    .br-game-answer-row.is-bilder .br-game-choice-btn { padding: 6px 8px; }
}