/* ============================================================
   tetris.css – herní sekce Tetris na stránce /zabava
   Barvy přebírá z CSS proměnných hlavního style.css webu, takže
   panely, tlačítka a texty automaticky fungují ve světlém i
   tmavém režimu stejně jako zbytek stránky (žádné natvrdo zapsané
   barvy chrome UI). Samotná herní plocha <canvas> se kreslí přes
   tetris.js a je záměrně vždy tmavá (jako u arkádového automatu),
   viz komentář v tetris.js.
   Vše je schované pod .jh-tetris, aby to nekolidovalo s jiným
   CSS na stránce.
   ============================================================ */

.jh-tetris {
    max-width: 900px;
    margin: 0 auto;
}

/* Tlačítko pro zavření celoobrazovkového režimu – mimo mobilní fullscreen
   (viz media query níže) vždy schované, i na desktopu, kde .jh-tetris se
   do fullscreen nikdy nepřepíná. */
.jh-tetris__fs-exit {
    display: none;
}

.jh-tetris__intro {
    text-align: center;
    margin-bottom: 2rem;
}

.jh-tetris #game-area {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.jh-tetris aside {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 140px;
    flex-shrink: 0;
}

.jh-tetris .panel-box {
    background: linear-gradient(155deg, var(--jh-surface-card), var(--jh-surface-alt));
    border: 1px solid var(--jh-border-subtle);
    border-radius: 10px;
    padding: .75rem;
    box-shadow: var(--jhq-tile-shadow);
}

.jh-tetris .panel-box h2 {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--jh-text-muted);
    margin-bottom: .5rem;
}

.jh-tetris #score,
.jh-tetris #level,
.jh-tetris #lines {
    font-size: 1.6rem;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--jh-accent);
}

.jh-tetris #canvas-wrapper {
    position: relative;
    flex-shrink: 0;
}

.jh-tetris #tetris-canvas {
    display: block;
    width: 260px;
    height: 520px;
    background: #14213d;
    border: 2px solid var(--jh-accent);
    border-radius: 6px;
    box-shadow:
        0 0 20px rgba(92, 159, 36, .35),
        inset 0 0 30px rgba(0, 0, 0, .5);
}

.jh-tetris .overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 33, 61, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.jh-tetris .overlay.visible { opacity: 1; pointer-events: all; }
.jh-tetris .overlay-content { text-align: center; padding: 1.5rem; }

.jh-tetris .overlay-content h3 {
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: .2em;
    color: #ffffff;
    margin-bottom: .5rem;
}

.jh-tetris .overlay-content p {
    color: #c3c9dc;
    margin-bottom: 1.25rem;
    font-size: 1rem;
}

.jh-tetris #next-canvas {
    display: block;
    margin: 0 auto;
    background: #14213d;
    border: 1px solid var(--jh-border-subtle);
    border-radius: 4px;
}

.jh-tetris #highscore-list {
    list-style: none;
    padding: 0;
    font-size: .8rem;
}

.jh-tetris #highscore-list li {
    display: flex;
    justify-content: space-between;
    padding: .25rem 0;
    border-bottom: 1px solid var(--jh-border-subtle);
    color: var(--jh-text);
}

.jh-tetris #highscore-list li:last-child { border-bottom: none; }
.jh-tetris #highscore-list li.loading { color: var(--jh-text-muted); justify-content: center; }
.jh-tetris #highscore-list li.highlight { color: var(--jh-accent); font-weight: 700; }

.jh-tetris #highscore-list .hs-rank { color: var(--jh-text-muted); margin-right: .3rem; }
.jh-tetris #highscore-list .hs-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jh-tetris #highscore-list .hs-score { font-variant-numeric: tabular-nums; }

.jh-tetris #controls-box ul {
    list-style: none;
    font-size: .75rem;
    line-height: 1.85;
    color: var(--jh-text);
}

.jh-tetris kbd {
    display: inline-block;
    padding: .1em .4em;
    background: rgba(var(--jhq-tint-rgb), .10);
    border: 1px solid var(--jh-border-subtle);
    border-radius: 3px;
    font-size: .68rem;
    font-family: monospace;
    color: var(--jh-accent);
}

/* ── Mobilní layout – canvas nahoře, skóre pod ním ───────── */
@media (max-width: 700px) {
    .jh-tetris #game-area {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .jh-tetris #panel-left {
        order: 2;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        max-width: 400px;
        gap: 8px;
    }

    .jh-tetris #panel-left .panel-box { flex: 1; padding: .5rem .3rem; }
    .jh-tetris #panel-left .panel-box h2 { font-size: .55rem; margin-bottom: .25rem; }

    .jh-tetris #canvas-wrapper { order: 1; position: relative; }

    .jh-tetris #tetris-canvas {
        width: auto;
        height: calc(100vh - 260px);
        height: calc(100svh - 260px);
        aspect-ratio: 1 / 2;
        max-width: 90vw;
    }

    .jh-tetris #panel-right { display: none; }

    /* Tlačítko pro zavření celoobrazovkového režimu – mimo něj vždy schované,
       zobrazí se jen když je aktivní .jh-tetris--fullscreen (viz níže). */
    .jh-tetris__fs-exit {
        display: none;
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 2;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: rgba(var(--jhq-tint-rgb), .18);
        color: #ffffff;
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
    }
}

/* ── Celoobrazovkový režim na mobilu (po stisknutí "Spustit hru") ─────────
   Hrací pole má být co největší a hraní pohodlnější, proto po startu hry
   na mobilu (viz tetris.js, funkce enterFullscreen()) sekce "vyskočí" přes
   celou obrazovku nad zbytek webu (hlavička, patička, ostatní panely) a
   canvas se zvětší na maximum dostupné výšky. Po konci hry nebo klepnutím
   na ✕ se vrátí zpět do běžného umístění na stránce. Mimo mobilní šířku
   (viz media query výše) se tahle třída nikdy nepřidává, takže na desktopu
   se nic nemění.

   Rozměry NEJSOU odhadnuté pevným číslem (calc(100vh - Npx)) — to na
   mobilech snadno přeteče přes viditelnou plochu (adresní řádek prohlížeče
   mění výšku 100vh, a odhad "kolik místa zabere panel se skóre" nikdy
   nesedí přesně). Místo toho je celý sloupec svázaný přes flexbox s pevnou
   výškou 100dvh (dynamická výška viewportu, bez adresního řádku): canvas
   dostane přesně tolik místa, kolik po panelu se skóre zbyde, a
   `overflow: hidden` na kontejneru navíc pojistí, že se nic nemůže
   vykreslit mimo viditelnou obrazovku. */
@media (max-width: 700px) {
    body.jh-tetris-lock-scroll { overflow: hidden; }

    .jh-tetris--fullscreen {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: #14213d;
        display: flex;
        flex-direction: column;
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
                 max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        max-width: none;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* Nadpis a text nad hrou ("🧱 Tetris" apod.) v celoobrazovkovém režimu
       zbytečně ubírají místo hracímu poli – přes hru se stejně nevidí. */
    .jh-tetris--fullscreen .jh-tetris__intro { display: none; }

    .jh-tetris--fullscreen #game-area {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .jh-tetris--fullscreen #panel-left {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .jh-tetris--fullscreen #canvas-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    /* Výška canvasu = přesně to, co v tomto flex sloupci zbyde po panelu
       se skóre (žádný odhad v px) – šířka se dopočítá z poměru stran a
       navíc nikdy nepřeteče přes šířku obrazovky (max-width: 100 %). */
    .jh-tetris--fullscreen #tetris-canvas {
        height: 100%;
        width: auto;
        max-width: 100%;
        max-height: 100%;
        aspect-ratio: 1 / 2;
    }

    .jh-tetris--fullscreen .jh-tetris__fs-exit { display: flex; align-items: center; justify-content: center; }
}