:root {
    --bg:        #12141a;
    --bg-karte:  #1b1f27;
    --bg-hoch:   #252b36;
    --rand:      #333a47;
    --text:      #eef1f6;
    --text-leise:#9aa4b5;
    --richtig:   #4a9d5f;
    --drin:      #c9a227;
    --weg:       #39404e;
    --akzent:    #6ea8fe;
    --fehler:    #e0645c;
    --radius:    12px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--akzent); }

.huelle {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------- Kopfzeile */

.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rand);
}

.kopf h1 {
    font-size: 18px;
    margin: 0;
    letter-spacing: 0.5px;
}

.kopf nav {
    display: flex;
    gap: 14px;
    font-size: 14px;
}

.kopf nav a {
    color: var(--text-leise);
    text-decoration: none;
}

.kopf nav a:hover, .kopf nav a.aktiv { color: var(--text); }

/* ---------------------------------------------------------------- Anmeldung */

.mitte {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.karte {
    background: var(--bg-karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 28px 24px;
    width: 100%;
    max-width: 380px;
}

.karte.breit { max-width: 460px; }

.karte h2 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
}

.unterzeile {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-leise);
}

/* ------------------------------------------------------- Namensauswahl */

.namensraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.namenskachel {
    display: block;
    padding: 13px 10px;
    background: var(--bg-hoch);
    border: 1px solid var(--rand);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.namenskachel:hover { border-color: var(--akzent); }

/* Schon vergeben: blasser, aber weiterhin antippbar - dahinter liegt dann
   die Anmeldung, nicht die Neuanlage. */
.namenskachel.vergeben {
    background: transparent;
    color: #6b7280;
    border-style: dashed;
    font-weight: 500;
}

.namenskachel .schloss {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #5b6472;
    margin-top: 2px;
}

/* ------------------------------------------------------- Name des Tages */

.wahlzeile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 11px 12px;
    background: var(--bg);
    border: 1px solid var(--rand);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}

.wahlzeile input { margin: 0; }

label {
    display: block;
    font-size: 13px;
    color: var(--text-leise);
    margin: 14px 0 6px;
}

input[type=text], input[type=password] {
    width: 100%;
    padding: 11px 12px;
    background: var(--bg);
    border: 1px solid var(--rand);
    border-radius: 8px;
    color: var(--text);
    font-size: 16px;
}

input:focus {
    outline: none;
    border-color: var(--akzent);
}

button, .knopf {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    background: var(--akzent);
    color: #0d1117;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

button:hover { filter: brightness(1.08); }

button.leise {
    background: transparent;
    color: var(--text-leise);
    border: 1px solid var(--rand);
}

.wechsel {
    margin-top: 18px;
    text-align: center;
    font-size: 14px;
    color: var(--text-leise);
}

.meldung {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    background: rgba(224, 100, 92, 0.14);
    border: 1px solid rgba(224, 100, 92, 0.4);
    color: #f3a9a4;
}

.meldung.gut {
    background: rgba(74, 157, 95, 0.14);
    border-color: rgba(74, 157, 95, 0.4);
    color: #8fd6a3;
}

/* ---------------------------------------------------------------- Testmodus */

.testleiste {
    background: #2a2214;
    border-bottom: 1px solid #5c4a1e;
    padding: 8px 16px;
    font-size: 12px;
    color: #e0c477;
}

.testleiste strong { color: #f0c33a; }

.testzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin: 2px 0;
}

.testleiste a {
    color: #e0c477;
    text-decoration: none;
    border: 1px solid #5c4a1e;
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
}

.testleiste a:hover {
    background: #3a2f1a;
    color: #ffe9a8;
}

/* ---------------------------------------------------------------- Stufen */

.stufen {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.stufe-knopf {
    flex: 1;
    padding: 10px 6px;
    background: var(--bg-karte);
    border: 1px solid var(--rand);
    border-radius: 10px;
    color: var(--text-leise);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
    text-align: center;
    line-height: 1.35;
}

.stufe-knopf .zustand {
    display: block;
    font-size: 15px;
    margin-top: 2px;
}

.stufe-knopf.aktiv {
    border-color: var(--akzent);
    color: var(--text);
    background: var(--bg-hoch);
}

.stufe-knopf.geschafft { color: var(--richtig); }
.stufe-knopf.verloren  { color: var(--fehler); }

/* ---------------------------------------------------------------- Spielfeld */

.brett {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    gap: 6px;
    justify-content: center;
    margin: 4px 0 18px;
}

.reihe {
    display: grid;
    grid-template-columns: repeat(5, 58px);
    gap: 6px;
    /* Damit sich die Kacheln raeumlich drehen und nicht bloss flach schrumpfen */
    perspective: 800px;
}

.feld {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    border: 2px solid var(--rand);
    border-radius: 6px;
    text-transform: uppercase;
    background: transparent;
    transition: transform 0.12s ease;
}

.feld.gefuellt {
    border-color: #58607280;
    animation: plopp 0.1s ease;
}

.feld.richtig { background: var(--richtig); border-color: var(--richtig); color: #fff; }
.feld.drin    { background: var(--drin);    border-color: var(--drin);    color: #1a1a1a; }
.feld.weg     { background: var(--weg);     border-color: var(--weg);     color: #cfd5e0; }

@keyframes plopp {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Auswertung: die Kachel dreht sich einmal um die Hochachse. Genau in der
   Mitte steht sie hochkant - dort wird die Farbe gesetzt, sodass der
   Buchstabe umgedreht sein Ergebnis zeigt. */
.feld.dreht {
    animation: umdrehen 520ms ease-in-out;
}

@keyframes umdrehen {
    0%   { transform: rotateY(0deg); }
    50%  { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .feld.dreht { animation-duration: 1ms; }
    .reihe.falsch { animation: none; }
}

@keyframes wackeln {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-6px); }
    40%     { transform: translateX(6px); }
    60%     { transform: translateX(-4px); }
    80%     { transform: translateX(4px); }
}

.reihe.falsch { animation: wackeln 0.4s ease; }

/* ---------------------------------------------------------------- Tastatur */

.tastatur {
    margin-top: auto;
    padding-bottom: 8px;
}

.tastenreihe {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 6px;
}

.taste {
    /* Kein min-width: 11 Tasten a 30px plus Abstaende passen auf schmalen
       Handys nicht in die Zeile und quellen sonst links und rechts heraus. */
    min-width: 0;
    flex: 1;
    max-width: 44px;
    height: 52px;
    margin: 0;
    padding: 0;
    background: var(--bg-hoch);
    color: var(--text);
    border: 0;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
}

.taste.breit {
    flex: 1.6;
    max-width: 72px;
    font-size: 12px;
}

.taste.richtig { background: var(--richtig); color: #fff; }
.taste.drin    { background: var(--drin);    color: #1a1a1a; }
.taste.weg     { background: #22262e;        color: #6b7280; }

/* ---------------------------------------------------------------- Hinweise */

.hinweis {
    position: fixed;
    top: 68px;
    left: 50%;
    transform: translateX(-50%);
    background: #f0f2f6;
    color: #12141a;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    max-width: 90vw;
    text-align: center;
}

.hinweis.sichtbar { opacity: 1; }

.abschluss {
    background: var(--bg-karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.abschluss .wort {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* ---------------------------------------------------------------- Rangliste */

table.rang {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 24px;
}

table.rang th, table.rang td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid var(--rand);
}

table.rang th {
    color: var(--text-leise);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

table.rang td.zahl, table.rang th.zahl { text-align: right; }
table.rang tr.ich { background: rgba(110, 168, 254, 0.10); }
table.rang .platz { color: var(--text-leise); width: 28px; }

h2.abschnitt {
    font-size: 15px;
    margin: 22px 0 10px;
    color: var(--text-leise);
    font-weight: 600;
}

/* ------------------------------------------------------- Reiter (Stufen) */

.reiter {
    display: flex;
    gap: 6px;
    margin: 4px 0 4px;
}

.reiter a {
    flex: 1;
    padding: 9px 4px;
    text-align: center;
    background: var(--bg-karte);
    border: 1px solid var(--rand);
    border-radius: 9px;
    color: var(--text-leise);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.reiter a.aktiv {
    border-color: var(--akzent);
    background: var(--bg-hoch);
    color: var(--text);
}

.reiter.gross { margin-bottom: 10px; }

.reiter.gross a {
    padding: 11px 4px;
    font-size: 15px;
}

/* ------------------------------------------------------- Zahlenrätsel */

/* Das Woerterbrett zentriert feste 58er-Kacheln. Hier sollen sich 6 oder 8
   Kacheln stattdessen die Breite teilen - dafuer muss die Reihe die volle
   Breite bekommen, sonst schrumpfen die Spalten auf wenige Pixel zusammen. */
.zahlenbrett {
    justify-content: stretch;
}

.zahlenbrett .reihe {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    gap: 5px;
}

.zahlenbrett .feld {
    width: auto;
    height: 46px;
    font-size: 22px;
}

/* Bei wenigen Tasten je Reihe duerfen sie breiter werden */
.tastenreihe .taste.rechenzeichen { max-width: 60px; }
.tastenreihe .taste.breit { max-width: 120px; }

/* Rechenzeichen etwas absetzen, damit sie sich von Ziffern abheben */
.taste.rechenzeichen {
    background: #2c3340;
    color: #cfe0ff;
    font-size: 18px;
}

.taste.rechenzeichen.richtig { background: var(--richtig); color: #fff; }
.taste.rechenzeichen.drin    { background: var(--drin);    color: #1a1a1a; }
.taste.rechenzeichen.weg     { background: #22262e;        color: #6b7280; }

.abschluss .rechnung {
    letter-spacing: 3px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 380px) {
    .zahlenbrett .feld { height: 42px; font-size: 19px; }
    .zahlenbrett .reihe { gap: 4px; }
}

.klein {
    font-size: 12px;
    color: var(--text-leise);
    font-weight: 400;
}

/* Die heutigen Loesungswoerter unter dem Namen */

.woerter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 4px;
}

.wortchen {
    font-size: 11px;
    color: #6b7280;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.wortchen b {
    color: var(--text-leise);
    font-weight: 600;
    letter-spacing: 1px;
}

/* ------------------------------------------------------- Verwaltung */

.reihenform {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

button.minik {
    width: auto;
    margin: 0;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-hoch);
    color: var(--text);
    border: 1px solid var(--rand);
    border-radius: 7px;
}

button.minik.gefahr {
    color: #f3a9a4;
    border-color: rgba(224, 100, 92, 0.4);
}

.leer {
    color: var(--text-leise);
    font-size: 14px;
    padding: 14px 0;
}

.fuss {
    text-align: center;
    font-size: 12px;
    color: #5b6472;
    padding: 18px 16px 24px;
    line-height: 1.6;
}

@media (max-width: 380px) {
    .reihe { grid-template-columns: repeat(5, 50px); }
    .feld { width: 50px; height: 50px; font-size: 24px; }
    .taste { height: 46px; font-size: 14px; }
    .tastenreihe { gap: 4px; }
    .tastatur { margin-left: -6px; margin-right: -6px; }
}