/* Crossnerd /raetsel/[name] und /daily - Ergaenzungen zu crossword.css und display.css
 * Farben kommen aus dem Theme (--cn-*), mit den alten /crossword-Farben als Rueckfall.
 * Das ganze Gitter skaliert ueber seine font-size (Zellen sind 4em gross).
 */

/* ---------- Gitter ---------- */
#crossword-grid.cn-raetsel-grid {
    position: relative;
    grid-template-columns: repeat(var(--cols, 12), 4em);
    grid-template-rows: repeat(var(--rows, 12), 4em);
    /* --cn-zoom kommt aus den -/+ Knoepfen (raetsel.js) */
    font-size: calc(clamp(11px, calc((100vw - 2.5rem) / var(--cols, 12) / 4), 16px) * var(--cn-zoom, 1));
    border: 3px solid var(--cn-ink, #000);
    background: var(--cn-ink, #000);
    box-shadow: 6px 6px 0 var(--cn-ink, #000);
}

.cn-raetsel-grid .crossword-cell {
    cursor: pointer;
    font-size: 1.5em;
    font-family: var(--cn-mono, inherit);
    font-weight: 700;
    color: var(--cn-ink, #000);
    background-color: var(--cn-card, #e0e0e0);
    border-color: var(--cn-ink, #000);
    transition: background-color .12s ease;
}
.cn-raetsel-grid .crossword-cell:not(.question):hover { background-color: var(--cn-path, aqua); }
.cn-raetsel-grid .crossword-cell.question {
    font-size: .8em;
    font-family: var(--cn-font, inherit);
    font-weight: 500;
    color: #16171b;
    background-color: var(--cn-frage, #ABD8EE);
}
:root[data-theme="dark"] .cn-raetsel-grid .crossword-cell.question { color: var(--cn-ink); }
.cn-raetsel-grid .crossword-cell.question:hover { background-color: var(--cn-frage-aktiv, #6abfe9); }
.cn-raetsel-grid .crossword-cell.path-highlight { background-color: var(--cn-path, #bbbbbb); }
.cn-raetsel-grid .crossword-cell.start { background-color: var(--cn-path, rgb(235, 186, 151)); }
.cn-raetsel-grid .crossword-cell.question.aktiv { background-color: var(--cn-frage-aktiv, #6abfe9); }

/* aktuelles Feld = Textmarker */
.cn-raetsel-grid .crossword-cell.cn-current {
    background-color: var(--cn-mark, rgb(235, 186, 151)) !important;
    color: #16171b;
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--cn-ink, #000);
}
/* per Hinweis aufgedeckt: kleine Ecke, damit man es spaeter noch sieht */
.cn-raetsel-grid .crossword-cell.cn-revealed { background-image: linear-gradient(225deg, var(--cn-mark, #fc0) 0 18%, transparent 18%); }
.cn-raetsel-grid .crossword-cell.cn-wrong { color: var(--cn-bad, #d64545); background-color: color-mix(in oklab, var(--cn-bad, #d64545) 18%, var(--cn-card, #fff)); }

/* Pfeile: Groesse in em (skaliert mit), Farbe aus dem Theme */
.cn-raetsel-grid .arrow, .cn-mini .arrow { width: 1.95em; height: .16em; }
.cn-raetsel-grid .arrow::before, .cn-mini .arrow::before { background: var(--cn-ink, #000); }
.cn-raetsel-grid .arrow::after, .cn-mini .arrow::after { border-width: .47em; }
.cn-raetsel-grid .arrow-down::after, .cn-mini .arrow-down::after,
.cn-raetsel-grid .arrow-down-right::after, .cn-mini .arrow-down-right::after,
.cn-raetsel-grid .arrow-right-down::after, .cn-mini .arrow-right-down::after { border-top-color: var(--cn-ink, #000); }
.cn-raetsel-grid .arrow-right::after, .cn-mini .arrow-right::after { border-left-color: var(--cn-ink, #000); }
.cn-mini .arrow { font-size: calc(var(--c) / 5.2); }

/* Fragetext: deutsche Silbentrennung statt Umbruch mitten im Wort */
.cn-raetsel-grid .crossword-cell.question {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
    line-height: 1.2;
}
/* raetsel.js verkleinert die Schrift, solange ein Text nicht in sein Feld passt */
.cn-raetsel-grid .question .q-part {
    min-width: 0;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Doppel-Fragefeld: zwei Fragen uebereinander, durch eine Linie geteilt */
.cn-raetsel-grid .crossword-cell.question.double {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
}
.cn-raetsel-grid .question.double .q-part {
    flex: 1;
    min-height: 0;
    padding: 0 .15em;
    font-size: .82em;
    line-height: 1.05;
    overflow: hidden;
}
.cn-raetsel-grid .question.double .q-part + .q-part { border-top: 1px solid var(--cn-ink, #000); }
/* im Doppelfeld nur die gewaehlte Haelfte hervorheben */
.cn-raetsel-grid .question.double.aktiv { background-color: var(--cn-frage, #ABD8EE); }
.cn-raetsel-grid .question.double .q-part.aktiv { background-color: var(--cn-frage-aktiv, #6abfe9); }

/* Feedback-Animation (display.css) an die Theme-Farben anpassen */
@keyframes flashCorrect {
    0% { background-color: var(--cn-ok, #66bb6a); color: #fff; }
    100% { background-color: var(--cn-card, #fff); color: inherit; }
}
@keyframes flashWrong {
    0% { background-color: var(--cn-bad, #ef5350); color: #fff; }
    100% { background-color: var(--cn-card, #fff); color: inherit; }
}

/* verstecktes Eingabefeld (Handy-Tastatur) - liegt unsichtbar ueber dem aktuellen Feld */
.cn-raetsel-grid .cn-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px; /* verhindert Zoom auf iOS */
    caret-color: transparent;
    pointer-events: none;
}

/* schmale Bildschirme: Gitter seitlich scrollen statt die Seite zu sprengen */
.cn-raetsel-wrap {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px 10px 14px 4px;
}

/* ---------- Seitenkopf ---------- */
.cn-raetsel-kopf { max-width: 52rem; margin: 0 auto 1.25rem; text-align: center; }
.cn-raetsel-kopf .cn-kicker { justify-content: center; }
.cn-raetsel-kopf h1 { margin: .15em 0 0; }
.crossnerd-raetsel > .cn-nicht-im-stream { max-width: 42rem; margin: 0 auto 1rem; text-align: center; }

/* ---------- Werkzeugleiste ---------- */
/* eine Spalte, so breit wie das Gitter: die Werkzeugleiste bekommt genau die Gitterbreite.
 * minmax(0, ...) laesst die Spalte am Handy schmaler werden, das Gitter scrollt dann seitlich. */
.cn-spiel {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
}
.cn-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    /* die Leiste zaehlt nicht zur Breite der Spalte - nur das Gitter gibt sie vor */
    contain: inline-size;
    /* gleiche Raender wie das Gitter in .cn-raetsel-wrap (padding 4px links, 10px rechts fuer den Schatten) */
    margin: 0 10px 1rem 4px;
}
.cn-toolbar-status,
.cn-toolbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cn-toolbar-status { gap: .75rem; }
/* Fortschritt: durchgehende Linie ueber die ganze Gitterbreite unter der Leiste */
.cn-toolbar > .cn-progress { flex: 1 1 100%; }
.cn-toolbar > .cn-progress .cn-progress-bar { flex: 1 1 auto; width: auto; height: .45rem; }
.cn-zoom { display: inline-flex; align-items: center; gap: .25rem; }
.cn-tool.cn-zoom-btn { width: 2.1rem; height: 2.1rem; padding: 0; font: 700 1.15rem/1 var(--cn-mono, monospace); display: inline-flex; align-items: center; justify-content: center; }
.cn-tool.cn-zoom-btn:disabled { opacity: .35; cursor: default; background: var(--cn-card, #fff); }
.cn-zoom-wert { min-width: 3.6ch; text-align: center; font-family: var(--cn-mono, monospace); font-size: .8rem; color: var(--cn-muted, #666); }
.cn-tool.cn-tool-timer,
.cn-tool.cn-tool-timer[aria-pressed] { padding-inline: .25rem; font-size: .82rem; background: transparent; color: var(--cn-muted, #666); }
.cn-tool.cn-tool-timer:hover { color: var(--cn-ink, #000); }
/* Timer ausgeblendet: keine Zeit in Leiste, Abschluss und Teilen-Text */
.cn-timer-aus .cn-timer,
.cn-timer-aus .cn-fertig-zeit { display: none; }
@media (max-width: 600px) {
    .cn-toolbar-actions { width: 100%; }
    .cn-toolbar-actions .cn-tool:not(.cn-tool-quiet) { flex: 1 1 auto; }
}
.cn-timer {
    font-family: var(--cn-mono, monospace);
    font-weight: 700;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    min-width: 4.5ch;
    padding: .2rem .6rem;
    background: var(--cn-ink, #000);
    color: var(--cn-paper, #fff);
}
.cn-progress { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--cn-mono, monospace); font-size: .85rem; color: var(--cn-muted, #666); }
.cn-progress-bar { width: 6rem; height: .6rem; border: 1px solid var(--cn-ink, #000); background: var(--cn-card, #fff); }
.cn-progress-bar i { display: block; height: 100%; width: 0; background: var(--cn-mark, #fc0); transition: width .25s ease; }
.cn-tool {
    font: 650 .92rem/1 var(--cn-font, inherit);
    font-stretch: 88%;
    padding: .5rem .75rem;
    margin: 0;
    width: auto;
    color: var(--cn-ink, #000);
    background: var(--cn-card, #fff);
    border: 2px solid var(--cn-ink, #000);
    border-radius: 2px;
    cursor: pointer;
    box-shadow: none;
}
.cn-tool:hover { background: var(--cn-mark, #fc0); color: #16171b; }
.cn-tool:focus-visible { outline: 2px solid var(--cn-frage-aktiv, #39f); outline-offset: 2px; }
.cn-tool b { font-family: var(--cn-mono, monospace); margin-left: .25rem; }
.cn-tool[aria-pressed="true"] { background: var(--cn-ink, #000); color: var(--cn-paper, #fff); }
.cn-tool-quiet { border-color: transparent; background: transparent; color: var(--cn-muted, #666); text-decoration: underline; text-underline-offset: .2em; }
.cn-tool-quiet:hover { background: transparent; color: var(--cn-bad, #c00); }
.is-geloest .cn-tool[data-cn-action="hinweis"],
.is-geloest .cn-tool[data-cn-action="pruefen"] { opacity: .4; pointer-events: none; }

/* aktuelle Frage in Lesegroesse */
.cn-aktuelle-frage {
    max-width: 44rem;
    margin: .5rem auto 0;
    min-height: 1.6em;
    text-align: center;
    font-size: 1.05rem;
    color: var(--cn-ink-soft, #333);
}
.cn-aktuelle-frage b { background: var(--cn-frage, #ABD8EE); color: #16171b; padding: .05rem .4rem; font-weight: 700; }
:root[data-theme="dark"] .cn-aktuelle-frage b { color: var(--cn-ink); }

/* ---------- Abschluss ---------- */
.cn-fertig {
    max-width: 40rem;
    margin: 2rem auto 0;
    padding: 1.5rem 1.75rem 1.75rem;
    background: var(--cn-card, #fff);
    border: 2px solid var(--cn-ink, #000);
    box-shadow: 6px 6px 0 var(--cn-mark, #fc0);
}
.cn-fertig h2 { margin: 0 0 1rem; }
.cn-fertig .cn-facts { max-width: none; margin-bottom: 1.25rem; }
.cn-share-text {
    font-family: var(--cn-mono, monospace);
    font-size: .9rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--cn-paper-2, #eee);
    color: var(--cn-ink, #000);
    border: 1px dashed var(--cn-line, #999);
    padding: .9rem 1rem;
    margin: 0 0 1.25rem;
}
.cn-fertig-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.cn-melden { text-align: center; font-size: .88rem; color: var(--cn-muted, #666); margin: 2rem 0 0; }

/* Archiv */
.cn-archiv-heute { color: var(--cn-muted, #666); }

/* Gesperrtes Archiv-Raetsel (statt Gitter) */
.cn-gesperrt {
    max-width: 40rem;
    margin: 1.5rem auto 0;
    padding: 1.5rem 1.75rem 1.75rem;
    background: var(--cn-card, #fff);
    border: 2px solid var(--cn-ink, #000);
    box-shadow: 6px 6px 0 var(--cn-mark, #fc0);
}
.cn-gesperrt h2 { margin: 0 0 .75rem; }
.cn-gesperrt-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 1rem; }
.cn-gesperrt-klein { font-size: .9rem; color: var(--cn-muted, #666); margin: .25rem 0 0; }

/* ---------- Streamer-Modus ----------
 * Menue und Footer weg (Theme), Gitter so gross wie der Bildschirm erlaubt,
 * Timer gross, kleines crossnerd.io-Logo im Bild, damit Ausschnitte zurueckfuehren.
 * Auch per URL: /daily?stream=1 (z. B. als OBS-Browserquelle) */
.cn-streamer .cn-raetsel-kopf { margin-bottom: .5rem; }
.cn-streamer .cn-raetsel-kopf h1 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.cn-streamer #crossword-grid.cn-raetsel-grid {
    font-size: min(24px, calc((100vh - 16rem) / var(--rows, 12) / 4), calc((100vw - 3rem) / var(--cols, 12) / 4));
}
.cn-streamer .cn-timer { font-size: 1.8rem; }
.cn-streamer .cn-tool-quiet { display: none; }
.cn-stream-brand { display: none; }
.cn-streamer .cn-stream-brand {
    display: block;
    width: fit-content;
    margin: .6rem auto 0;
    padding: .2rem .55rem;
    font: 700 .95rem/1.2 var(--cn-mono, monospace);
    color: #16171b;
    background: var(--cn-mark, #fc0);
    text-decoration: none;
}
.cn-streamer .cn-aktuelle-frage { font-size: 1.35rem; }