/* BensowPrompts©2026
   Handy- und Fold-Layout. Wird nach style.css geladen und ändert auf großen Bildschirmen nichts. */

html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior: none; }
@supports (height: 100dvh) { body { height: 100dvh; } }      /* echte sichtbare Höhe (Adressleiste/Gesten-Leiste) */

/* Platz für Kerbe/Kamera-Loch und Gesten-Leiste */
.app-header { padding-top: env(safe-area-inset-top); height: calc(52px + env(safe-area-inset-top));
    padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
.seat-bottom { bottom: max(12px, env(safe-area-inset-bottom)); }

/* Knopf für Protokoll/Emojis: nur auf kleinen Bildschirmen */
#btn-sidebar { display: none; position: relative; }
#btn-menu { display: none; }
.header-more { display: contents; }          /* Desktop: Knöpfe wie bisher nebeneinander */
.cherry-chip { display: none; }
#btn-sidebar .new-dot { display: none; }
#btn-sidebar.has-new .new-dot { display: block; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; border: 2px solid #0f172a; }

.sidebar-backdrop { position: fixed; inset: 0; z-index: 140; background: rgba(2, 6, 23, 0.55); }

/* ---------- bis 860 px (großes Handy quer, Fold außen/innen, kleine Tablets) ---------- */
@media (max-width: 860px) {
    #btn-sidebar { display: inline-flex; }
    /* Schublade statt fester Seitenleiste */
    .game-sidebar {
        display: flex;
        position: fixed;
        top: calc(52px + env(safe-area-inset-top));
        right: 0;
        bottom: 0;
        width: min(320px, 88vw);
        z-index: 150;
        transform: translateX(105%);
        transition: transform 0.25s ease;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.5);
    }
    .game-sidebar.open { transform: none; }
    .btn-emoji { font-size: 1.6rem; padding: 8px; }
    button, .btn-icon { min-height: 40px; }
    .btn-sm { min-height: 36px; }
}

/* ---------- Handy hochkant und kleine Fenster ---------- */
@media (max-width: 760px) {
    :root { --card-width: clamp(46px, 14.5vw, 64px); --card-height: calc(var(--card-width) * 1.5); }

    /* Kopfzeile: nur Symbole, nichts darf breiter als der Bildschirm werden */
    .app-header { height: calc(46px + env(safe-area-inset-top)); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
    .game-sidebar { top: calc(46px + env(safe-area-inset-top)); }
    .header-left { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
    .header-right { gap: 4px; flex: 0 0 auto; }
    .btn-label { display: none; }
    #btn-menu { display: inline-flex; }
    .header-more { display: none; position: absolute; top: calc(100% + 4px); right: max(8px, env(safe-area-inset-right)); z-index: 160;
        flex-direction: column; gap: 4px; padding: 8px; min-width: 190px; background: rgba(15, 23, 42, 0.98);
        border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6); }
    .header-more.open { display: flex; }
    .header-more button { justify-content: flex-start; gap: 4px; width: 100%; min-height: 44px; font-size: 0.95rem; padding: 8px 12px; }
    .header-more .btn-label { display: inline; }
    .app-header { position: relative; }
    .game-logo { font-size: 1.3rem; }
    .room-tag { margin-left: 2px; padding: 3px 8px; font-size: 0.72rem; white-space: nowrap; }
    .game-tag { display: none; }
    .header-right .btn-sm, .header-right .btn-icon { padding: 6px 9px; font-size: 1.05rem; min-width: 38px; }

    /* Gegner oben in einer Reihe, damit sie die Stapel in der Mitte nicht verdecken */
    .seat-top { top: 6px; left: 50%; transform: translateX(-50%); flex-direction: column; }
    .seat-left { left: 6px; top: 6px; transform: none; flex-direction: column; align-items: flex-start; }
    .seat-right { right: 6px; top: 6px; transform: none; flex-direction: column; align-items: flex-end; }
    .player-badge { padding: 3px 9px 3px 5px; gap: 5px; max-width: 42vw; }
    .player-badge .name { font-size: 0.78rem; max-width: 22vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .player-badge .avatar { font-size: 1rem; }
    .card-count-badge { font-size: 0.7rem; }
    /* Gegner-Karten klein und überlappend, immer waagerecht */
    .hand-opponent, .hand-left, .hand-right, .hand-top { flex-direction: row !important; padding: 2px 0 0 !important; max-width: 40vw; }
    .hand-opponent .card-back-mini, .hand-top .card-back-mini, .hand-left .card-back-mini, .hand-right .card-back-mini {
        width: 20px; height: 30px; margin: 0 0 0 -11px; }
    .hand-opponent .card-back-mini:first-child { margin-left: 0; }

    /* Mitte etwas nach unten, unter die Gegner */
    .center-area { margin-top: 56px; gap: 10px; }
    .deck-area { gap: 22px; }
    .status-banner { font-size: 0.78rem; padding: 5px 12px; }
    .turn-announcement { font-size: 0.82rem; }

    /* Eigene Hand und Schaltflächen: groß genug zum Tippen */
    .my-hand-container { width: 100%; max-width: 100%; padding: 6px 0 2px; min-height: calc(var(--card-height) + 14px); overflow-x: hidden; overflow-y: visible; }
    .my-hand-container .card:hover { transform: none; }
    .my-hand-container .card.playable { transform: translateY(-6px); }
    .action-dock { gap: 6px; flex-wrap: wrap; justify-content: center; }
    .action-dock button { min-height: 42px; padding: 8px 12px; font-size: 0.88rem; }
    .btn-mau { padding: 8px 14px !important; }
    .my-badge-row { margin-top: 0; gap: 10px; }
    .seat-bottom { width: 100%; }

    /* Poker / Skat */
    .community-card-slot { width: var(--card-width); height: var(--card-height); }
    .poker-community, #poker-community-cards { gap: 5px; }
    .trick-slot { width: var(--card-width); height: var(--card-height); }
    .skat-trick-area { gap: 8px; }

    /* Coach & Spielfeld-Hinweise unter den Gegnern */
    .coach-box { top: auto; bottom: calc(var(--card-height) + 120px); left: 8px; right: 8px; width: auto; max-width: none; }

    /* Cherrys: Kritzelei weg (sie läge unter der Hand), dafür ein kleines Symbol in der Kopfzeile */
    .cherry-doodle { display: none !important; }
    .cherry-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8rem; font-weight: 700; color: #fecdd3;
        background: rgba(190, 18, 60, 0.28); border: 1px solid rgba(251, 113, 133, 0.45); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }

    /* Dialoge */
    .modal-card { max-width: calc(100vw - 20px); max-height: calc(100dvh - 30px); overflow-y: auto; }
    .welcome-card { padding: 16px 14px; }
}

/* ---------- Querformat auf dem Handy (niedrig und breit) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
    :root { --card-width: clamp(38px, 9.5vh, 54px); --card-height: calc(var(--card-width) * 1.5); }
    .app-header { height: calc(38px + env(safe-area-inset-top)); }
    .game-sidebar { top: calc(38px + env(safe-area-inset-top)); }
    .game-logo { font-size: 1.1rem; }
    .btn-label { display: none; }
    .header-right .btn-sm, .header-right .btn-icon { padding: 3px 8px; min-height: 30px; font-size: 1rem; }
    #btn-sidebar { display: inline-flex; }

    .seat-top { top: 4px; }
    .seat-left { left: 8px; top: 4px; transform: none; flex-direction: column; align-items: flex-start; }
    .seat-right { right: 8px; top: 4px; transform: none; flex-direction: column; align-items: flex-end; }
    .player-badge { padding: 2px 8px 2px 4px; }
    .player-badge .name { font-size: 0.72rem; }
    .hand-opponent, .hand-left, .hand-right, .hand-top { flex-direction: row !important; padding: 0 !important; }
    .hand-opponent .card-back-mini, .hand-top .card-back-mini, .hand-left .card-back-mini, .hand-right .card-back-mini { width: 16px; height: 24px; margin: 0 0 0 -9px; }
    .hand-opponent .card-back-mini:first-child { margin-left: 0; }

    .center-area { margin-top: 18px; gap: 4px; }
    .turn-announcement { display: none; }
    .status-banner { font-size: 0.7rem; padding: 3px 10px; }
    .deck-area { gap: 16px; }
    .pile-label { display: none; }

    /* Hand und Schaltflächen nebeneinander statt untereinander, Namensleiste weglassen */
    .seat-bottom { flex-direction: row; align-items: flex-end; justify-content: center; gap: 10px; width: 100%; bottom: max(4px, env(safe-area-inset-bottom)); }
    .seat-bottom .my-badge-row { display: none; }
    .my-hand-container { min-height: 0; padding: 0; flex: 1 1 auto; max-width: 62vw; }
    .action-dock { flex-direction: column; gap: 4px; }
    .action-dock button { min-height: 34px; padding: 4px 10px; font-size: 0.78rem; }
    .coach-box { display: none; }
    .cherry-doodle { display: none !important; }
    .cherry-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; font-weight: 700; color: #fecdd3; background: rgba(190, 18, 60, 0.28); padding: 2px 8px; border-radius: 999px; }
}

/* Gesten: kein versehentliches Zoomen/Scrollen auf dem Spieltisch */
.felt-table, .my-hand-container, .sol-board { touch-action: manipulation; }
.sol-card { touch-action: none; }

/* Im ☰-Menü bekommt der Musik-Knopf eine Beschriftung */
@media (max-width: 760px) {
    .header-more #btn-ambient-toggle { border-radius: 6px; }
    .header-more #btn-ambient-toggle::after { content: "  Musik / Ton"; font-size: 0.95rem; font-weight: 600; }
}

@media (max-width: 760px) {
    .header-more #btn-ambient-toggle { color: var(--text-light); }
    .slide-tags { flex-wrap: wrap; justify-content: center; gap: 6px; }
    .slide-tags span { white-space: nowrap; font-size: 0.72rem; padding: 4px 9px; }
}

/* Niedrige Fenster (Handy quer): Start- und Lobby-Bildschirm müssen scrollbar sein */
@media (max-height: 560px) {
    #screen-welcome, #screen-lobby { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}