/* mobil.css — Handy- und Touch-Anpassungen fuer alle Seiten.
   Wird als LETZTES eingebunden, damit die Regeln die Seiten-Styles ueberschreiben.
   Faustregel: alles, was man antippt, mindestens 44px hoch – so gross ist eine
   Fingerkuppe. Darunter tippt man dauernd daneben. */

/* ---------------------------------------------------------- ueberall */

/* Verstecktes bleibt versteckt. Ohne das gewinnt jedes eigene
   "display: flex" gegen das hidden-Attribut, und dann sieht Dominika
   Knoepfe, die nur Abel sehen soll. */
[hidden] {
    display: none !important;
}

/* Kein halbsekuendiges Warten mehr nach dem Tippen (Doppeltipp-Zoom), und
   kein grauer Kasten, der beim Antippen aufblitzt. */
a, button, input, label, .slot, .day, .game-option, .tile,
.galgen-key, .rating-button, .doodle-swatch, .doodle-tool, .doodle-picker {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Beim schnellen Tippen soll nicht versehentlich Text markiert werden. */
button, .slot, .day, .game-option, .tile, .galgen-key,
.galgen-tile, .rating-button, .pill, .score-num, .presence-row {
    -webkit-user-select: none;
    user-select: none;
}

/* Eingabefelder duerfen weiter markiert werden. */
input, textarea {
    -webkit-user-select: auto;
    user-select: auto;
}

/* iOS zoomt beim Antippen rein, wenn Schrift < 16px ist. */
@media (max-width: 860px) {
    input,
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ------------------------------------------------- ab Handy-Breite */
@media (max-width: 640px) {

    /* --- runde Schalter unten (Ton, Kritzelblock) --- */
    .sound-toggle,
    .tool-toggle {
        width: 48px;
        height: 48px;
        font-size: 21px;
        /* Standard-Polster des Browsers weg, sonst sitzt das Symbol schief. */
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .sound-toggle svg,
    .tool-toggle svg {
        display: block;
    }

    .tool-toggle {
        bottom: 76px;
    }

    .tool-toggle.pos-left {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    /* Der Eck-Knopf im Menü ist das Gegenstück zum Stift – gleiche Größe,
       gleiche Höhe, sonst sitzen die beiden Ecken schief zueinander. */
    .eck-knopf {
        width: 48px;
        height: 48px;
    }

    .eck-liste {
        bottom: 58px;
    }

    .sound-toggle {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    /* --- Zurueck/Verlauf/Abmelden --- */
    .back-link,
    .logout,
    .doodle-clear,
    .round-end-option,
    .ready-game-button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-left: 16px;
        padding-right: 16px;
    }

    .logout {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    /* --- Login: das Auge zum Passwort-Anzeigen --- */
    .peek {
        width: 44px;
        height: 44px;
    }

    /* --- Menue-Kacheln: bequem gross ---
       Die Kacheln stehen laengst nebeneinander und werden gewischt; die
       alten Raster-Regeln von hier haben dem Band nur seinen Abstand
       kaputtgemacht. Abstand und Polsterung stehen jetzt in menu.html. */
    .tile {
        min-height: 96px;
        padding: 20px 18px;
    }

    /* --- Spielauswahl --- */
    .game-option {
        min-height: 72px;
    }

    /* --- Satz Land Quatsch: Bewertungsknoepfe waren winzig --- */
    .rating-button {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .play-cell.with-rating {
        padding-right: 132px;
    }

    .speak-button {
        min-width: 44px;
        min-height: 44px;
        font-size: 18px;
    }

    /* --- Galgen-Bär: Leiter und Baer brauchen eine eigene Spur ---
       Sonst liegen sie hinter dem Spielfenster und man sieht den Baeren
       ueberhaupt nicht klettern. */
    .galgen-ladder {
        width: 56px !important;
        left: 6px !important;
    }

    /* Der Baer sitzt bei x=24 und ist 64 breit, die Leiter davor – die Spur
       endet also bei 88px. Das Fenster faengt erst danach an, sonst deckt
       es den kletternden Baeren zu. */
    #galgen-window {
        left: auto !important;
        right: 8px !important;
        width: calc(100vw - 104px) !important;
        transform: translateY(-50%) scale(1) !important;
        margin: 0 !important;
    }

    #galgen-window:not(.show) {
        opacity: 0;
    }

    /* Tasten fingergerecht: lieber etwas schmaler, dafuer hoch genug. */
    .galgen-key {
        min-width: 34px;
        height: 46px;
        font-size: 17px;
    }

    .galgen-keyboard {
        gap: 5px;
    }

    .galgen-tile {
        width: 30px;
        height: 42px;
        font-size: 21px;
    }

    .galgen-set-btn,
    .galgen-input {
        min-height: 46px;
    }

    /* --- Telefonzeiten: mehr Zeiten pro Reihe, groessere Felder --- */
    .slot {
        min-height: 48px;
    }

    .day {
        min-width: 58px;
        min-height: 74px;
    }

    /* Der Tagesstreifen wird gewischt – mit Schwung und ohne Balken. */
    .day-strip {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 4px;
    }

    .day {
        scroll-snap-align: center;
    }

    .chosen-list button {
        min-width: 40px;
        min-height: 40px;
    }

    /* --- Kritzelblock: das Wichtigste, hier war alles zu klein --- */
    .doodle-panel {
        width: calc(100vw - 16px);
        padding: 12px 12px 14px;
        gap: 12px;
    }

    .doodle-tools {
        gap: 14px;
        row-gap: 12px;
    }

    .doodle-swatch,
    .doodle-picker {
        width: 38px;
        height: 38px;
    }

    .doodle-colors {
        gap: 9px;
        flex-wrap: wrap;
    }

    .doodle-tool {
        width: 46px;
        height: 46px;
        font-size: 21px;
    }

    .doodle-toolbtns {
        gap: 9px;
    }

    /* Der duenne Schieber war kaum zu treffen. */
    .doodle-range {
        width: 130px;
        height: 34px;
    }

    .doodle-sizewrap {
        gap: 10px;
    }

    .doodle-close {
        width: 44px;
        height: 44px;
        font-size: 19px;
    }

    /* Sechs Werkzeuge brauchen auf dem Handy zwei Reihen – lieber das,
       als sie so klein zu machen, dass man danebentippt. */
    .doodle-toolbtns {
        flex-wrap: wrap;
    }

    .doodle-knopf {
        min-height: 44px;
        padding: 8px 14px;
    }

    .doodle-aktionen {
        margin-left: 0;
        width: 100%;
        gap: 8px;
    }

    .doodle-aktionen button {
        flex: 1 1 auto;
    }

    .doodle-archiv {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        max-height: 40vh;
    }

    .doodle-bild .knoepfe button {
        min-height: 38px;
    }

    /* --- Platz fuer die Notch und den Balken unten --- */
    body {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

/* ------------------------------------- sehr schmale Geraete (SE & Co.) */
@media (max-width: 380px) {
    .galgen-key {
        min-width: 30px;
        height: 44px;
        font-size: 16px;
    }

    .galgen-tile {
        width: 26px;
        height: 38px;
        font-size: 19px;
    }

    .galgen-ladder {
        width: 44px !important;
    }
}

/* ------------------------------------------------- Quer gehaltenes Handy */
@media (max-height: 500px) and (orientation: landscape) {
    .play-window,
    #galgen-window {
        max-height: calc(100vh - 12px);
        overflow-y: auto;
    }
}

/* =====================================================================
   Kritzelblock auf dem Handy: das Blatt bekommt den ganzen Bildschirm.
   Vorher sass es als kleine Karte mittendrin – auf einem hochkant
   gehaltenen Handy blieb davon kaum Malflaeche uebrig.
   ===================================================================== */
@media (max-width: 900px) {
    /* Nichts soll hinter dem Blatt wegscrollen. */
    body.doodle-offen {
        overflow: hidden;
    }

    .doodle-panel,
    .doodle-panel.show {
        left: 0;
        top: 0;
        transform: none;
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
        gap: 8px;
        padding:
            calc(env(safe-area-inset-top, 0px) + 8px)
            calc(env(safe-area-inset-right, 0px) + 8px)
            calc(env(safe-area-inset-bottom, 0px) + 8px)
            calc(env(safe-area-inset-left, 0px) + 8px);
    }

    /* Das Blatt bekommt den GANZEN Rahmen, nicht den Rest nach den
       Werkzeugen. Vorher stand die Werkzeugzeile darunter und nahm dem Blatt
       genau die Hoehe weg, die auf einem quer gehaltenen Handy die knappe
       ist: gemessen 513x342 statt der moeglichen 561x374.
       Jetzt liegt alles uebereinander – das Blatt fuellt den Rahmen, die
       Werkzeuge schweben darueber. */
    .doodle-panel {
        position: fixed;
    }

    .doodle-canvas-wrap {
        position: absolute;
        inset: calc(env(safe-area-inset-top, 0px) + 6px)
               calc(env(safe-area-inset-right, 0px) + 6px)
               calc(env(safe-area-inset-bottom, 0px) + 6px)
               calc(env(safe-area-inset-left, 0px) + 6px);
    }

    /* Die Buehne fuellt den Rahmen und haelt das Blatt in der Mitte. Sie
       ist es auch, die beim Schieben und Zoomen bewegt wird. */
    .doodle-buehne {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .doodle-canvas {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

    /* ---- Das Werkzeugfach ----
       Das Blatt ist 3:2, das Handy quer gut 2,2:1. Links und rechts davon
       bleibt also immer ein Streifen frei – gemessen 133 px auf Abels
       iPhone, 174 px auf Dominikas Flip5. Genau dort sitzt das Fach: es
       deckt nie das Bild zu, auch nicht aufgeklappt. */
    .doodle-tools {
        position: absolute;
        left: calc(env(safe-area-inset-left, 0px) + 4px);
        top: 50%;
        z-index: 7;
        width: 104px;
        /* Der Punkt am Regler hat jetzt einen festen Kasten von 22 px statt
           mitzuwachsen – das Fach wurde damit etwas hoeher. Lieber ein paar
           Prozent mehr Platz geben als scrollen lassen. */
        max-height: 92%;
        overflow-y: auto;
        overscroll-behavior: contain;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 10px 8px;
        background: var(--cream, #fff6ee);
        border: 2px solid #e7c5aa;
        border-radius: 18px;
        box-shadow: 0 14px 30px -18px rgba(74, 44, 28, 0.7);
        /* translateY haelt es mittig und muss darum in JEDER
           transform-Regel wieder mit dabei sein. */
        transform: translateY(-50%);
        transition: transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.1), opacity 0.18s ease;
    }

    /* Zugeklappt faehrt es nach links aus dem Bild. display:none waere
       einfacher, aber dann gaebe es nichts zu sehen, was faehrt. */
    .doodle-panel.werkzeuge-zu .doodle-tools {
        transform: translateY(-50%) translateX(calc(-100% - 14px));
        opacity: 0;
        pointer-events: none;
    }

    .doodle-toolbtns {
        display: grid;
        grid-template-columns: repeat(2, 40px);
        gap: 6px;
        justify-content: center;
    }

    .doodle-colors {
        display: grid;
        grid-template-columns: repeat(3, 26px);
        gap: 6px;
        justify-content: center;
    }

    .doodle-sizewrap {
        flex-direction: column;
        gap: 5px;
        width: 100%;
    }

    .doodle-range {
        width: 86px;
    }

    .doodle-aktionen {
        flex-direction: column;
        width: 100%;
        margin-left: 0;
        gap: 5px;
    }

    .doodle-knopf,
    .doodle-clear {
        width: 100%;
        padding: 7px 4px;
        font-size: 11.5px;
    }

    /* Die Knoepfe sitzen rechts, das Fach kommt links heraus. Das ist
       Absicht: die Hand, die tippt, deckt dann nicht zu, was aufgeht. */
    .doodle-griff {
        display: flex;
        right: calc(env(safe-area-inset-right, 0px) + 6px);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    }

    /* Darueber der Schiebe-Modus. */
    .doodle-zoom {
        display: flex;
        right: calc(env(safe-area-inset-right, 0px) + 6px);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 62px);
    }

    .doodle-archiv {
        position: absolute;
        inset: calc(env(safe-area-inset-top, 0px) + 52px)
               calc(env(safe-area-inset-right, 0px) + 8px)
               calc(env(safe-area-inset-bottom, 0px) + 8px)
               calc(env(safe-area-inset-left, 0px) + 8px);
        max-height: none;
        overflow-y: auto;
    }

    /* Im Archiv wird nur geschaut – beide Knoepfe haben dort nichts zu tun. */
    .doodle-panel.archiv-an .doodle-griff,
    .doodle-panel.archiv-an .doodle-zoom {
        display: none;
    }

    /* ---- Im Archiv ist das Fach kein Fach mehr ----
       Uebrig bleibt dort ein einziger Knopf: "Zurueck zum Blatt". Der stand
       aber weiter im schwebenden Kasten mittig am Rand und lag damit ueber
       den Bildern. Und weil der Fach-Knopf im Archiv weg ist, liess er sich
       nicht einmal wegklappen.
       Also: kein Kasten, kein Schweben, kein Ein- und Ausklappen – einfach
       ein Knopf oben links, gegenueber dem x. Die Bilderliste faengt
       darunter an.
       Die zweite Zeile im Waehler ist noetig, damit er auch dann dasteht,
       wenn das Fach vorher zugeklappt war. */
    .doodle-panel.archiv-an .doodle-tools,
    .doodle-panel.archiv-an.werkzeuge-zu .doodle-tools {
        top: calc(env(safe-area-inset-top, 0px) + 6px);
        left: calc(env(safe-area-inset-left, 0px) + 6px);
        width: auto;
        max-height: none;
        overflow: visible;
        padding: 0;
        gap: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }
}

/* Gemalt wird immer quer.
   Das Geraet zu drehen kann man von aussen nicht erzwingen – iPhones lassen
   das nicht zu. Also drehen wir stattdessen das Blatt: haelt man das Handy
   hochkant, kippt der ganze Block um 90°. Damit gibt es aus Sicht der Seite
   gar kein Hochformat mehr. */
@media (max-width: 900px) and (orientation: portrait) {
    .doodle-panel,
    .doodle-panel.show {
        /* Breite und Hoehe tauschen die Rollen */
        width: 100dvh;
        height: 100vw;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
        transform-origin: 50% 50%;
    }

    /* Quer gehalten wirkt das Handy niedrig – dieselbe kompakte Aufteilung
       wie beim echten Querformat. */
    .doodle-title {
        display: none;
    }

    .doodle-head {
        position: absolute;
        top: 6px;
        right: 8px;
        z-index: 3;
    }

    /* Groessen im Fach. Die Aufteilung (Spalte am Rand) steht schon im
       Handy-Block darueber – hier nur noch, wie gross die Sachen sind. */
    .doodle-tool {
        width: 40px;
        height: 40px;
    }

    .doodle-swatch,
    .doodle-picker {
        width: 26px;
        height: 26px;
    }

    .doodle-knopf,
    .doodle-clear {
        min-height: 34px;
    }
}

/* --- Quer gehalten: jede Zeile Hoehe zaehlt ---
   Der Fach-Knopf steht schon oben im Handy-Block; hier geht es nur noch um
   die Groessen im Fach selbst. Die Regeln zu Reihen und Zeilen von frueher
   sind raus: das Fach ist jetzt eine Spalte am Rand, keine Zeile darunter. */
@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
    /* Der Titel darf weg, das x wandert in die freie Ecke neben dem Blatt.
       Quer ist der Bildschirm breiter als 3:2, links und rechts vom Blatt
       bleibt also ohnehin Rand. */
    .doodle-title {
        display: none;
    }

    .doodle-head {
        position: absolute;
        top: calc(env(safe-area-inset-top, 0px) + 6px);
        right: calc(env(safe-area-inset-right, 0px) + 8px);
        z-index: 3;
    }

    .doodle-tool {
        width: 40px;
        height: 40px;
    }

    .doodle-swatch,
    .doodle-picker {
        width: 26px;
        height: 26px;
    }

    .doodle-knopf,
    .doodle-clear {
        min-height: 34px;
        padding: 6px 4px;
        font-size: 11.5px;
    }

    .doodle-range {
        width: 86px;
    }
}