/* Basic reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overscroll-behavior: none;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #05060a;
    color: #f5f5f5;
}

/* Page layout */
.tetris-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
}

/* Optional background image behind everything */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("assets/bg-main.jpg");
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    pointer-events: none;
    z-index: -1;
}

/* Header */
.tetris-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(10, 12, 20, 0.9);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.tetris-logo {
    display: flex;
    flex-direction: column;
}

.logo-main {
    font-family: Impact, "Arial Black", system-ui, sans-serif;
    font-size: 32px;
    letter-spacing: 0.16em;
    color: #ffdd55;
    text-shadow:
        0 0 4px rgba(0, 0, 0, 0.8),
        0 0 12px rgba(255, 200, 0, 0.8);
}

.logo-sub {
    font-size: 12px;
    text-transform: uppercase;
    color: #aaaaaa;
    margin-top: 2px;
}

/* Buttons */
.btn {
    font: inherit;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(20, 24, 40, 0.95);
    color: #f5f5f5;
    cursor: pointer;
    margin-left: 8px;
    min-width: 80px;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

.btn.primary {
    background: linear-gradient(135deg, #ff7c4a, #ffdd55);
    color: #111;
    border: none;
}

.btn.danger {
    background: linear-gradient(135deg, #ff4a6a, #ff8f8f);
    color: #111;
    border: none;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.tetris-menu {
    display: flex;
    align-items: center;
}

/* Main layout */
.tetris-main {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    gap: 16px;
    align-items: flex-start;
}

/* Panels */
.panel {
    background: rgba(10, 12, 20, 0.92);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.panel h2 {
    font-size: 16px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #d1d5ff;
}

.panel-instructions ul {
    list-style: none;
    margin: 6px 0 8px;
}

.panel-instructions li {
    font-size: 14px;
    margin-bottom: 3px;
}

.hint {
    font-size: 13px;
    color: #aaaaaa;
    margin-top: 4px;
}

.panel-theme-hint p {
    font-size: 13px;
    color: #bbbbbb;
}

/* Center game area */
.tetris-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.game-frame {
    position: relative;
    background: radial-gradient(circle at top, #1b2545 0, #05070d 55%);
    border-radius: 18px;
    padding: 10px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.65),
        0 0 20px rgba(120, 160, 255, 0.4);
}

#tetris-board {
    display: block;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 8px;
    /* Display size is pinned in CSS: touch.js sizes the backing store to
       displayed size x devicePixelRatio for sharp rendering. */
    width: 320px;
    height: 640px;
}

#next-canvas {
    width: 120px;
    height: 160px;
}

#hold-canvas {
    width: 120px;
    height: 80px;
}

/* Touch hygiene on the play surfaces */
#tetris-board,
#next-canvas,
#hold-canvas {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.game-frame,
.tetris-menu,
.panel-status {
    -webkit-user-select: none;
    user-select: none;
}

.btn {
    -webkit-tap-highlight-color: transparent;
}

/* Fullscreen / theater toggle */
.btn-fullscreen {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 6;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(10, 14, 26, 0.55);
    color: #f5f5f5;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn-fullscreen:hover {
    background: rgba(30, 40, 70, 0.85);
}

/* Overlay screen */
.game-overlay {
    position: absolute;
    inset: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(5, 8, 16, 0.98), rgba(0, 0, 0, 0.98));
    border-radius: 10px;
}

.game-overlay.hidden {
    display: none;
}

.overlay-content {
    text-align: center;
    padding: 16px 18px;
}

#overlay-title {
    font-size: 24px;
    margin-bottom: 8px;
}

#overlay-message {
    font-size: 14px;
    margin-bottom: 12px;
    color: #cccccc;
}

/* Stats panel */
.panel-status {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.panel-status .stat {
    flex: 1;
    background: rgba(15, 20, 40, 0.98);
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat .label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
}

.stat .value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-top: 4px;
}

/* Side panels */
.tetris-left,
.tetris-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.small {
    font-size: 12px;
    color: #9ca3af;
}

/* High score list */
.highscore-list {
    list-style: decimal;
    padding-left: 18px;
    margin-top: 4px;
    font-size: 13px;
    max-height: 200px;
    overflow-y: auto;
}

.highscore-list li span.name {
    font-weight: 600;
}

.highscore-list li span.score {
    float: right;
    opacity: 0.85;
}

/* Name dialog */
.dialog {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
}

.dialog.hidden {
    display: none;
}

.dialog-content {
    background: rgba(10, 12, 20, 0.98);
    border-radius: 12px;
    padding: 16px 18px;
    width: 280px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

.dialog-content h2 {
    margin-bottom: 6px;
    font-size: 18px;
}

.dialog-content p {
    font-size: 14px;
    margin-bottom: 8px;
}

#player-name {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.8);
    background: rgba(15, 23, 42, 0.95);
    color: #f9fafb;
    font-size: 14px;
    margin-bottom: 10px;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .tetris-page {
        padding: 10px;
        gap: 10px;
    }

    .tetris-main {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Board first, then the compact Next/Hold/scores strip, then the text */
    .tetris-center {
        order: -1;
    }

    .tetris-left {
        order: 2;
    }

    .tetris-header {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .logo-main {
        font-size: 24px;
    }

    /* Comfortable tap targets */
    .btn {
        min-height: 44px;
        min-width: 64px;
        padding: 10px 14px;
    }

    /* Board fills the available width in portrait, capped so the whole
       frame still fits the viewport height; aspect ratio preserved. */
    .game-frame {
        width: 100%;
        max-width: min(430px, calc((100vh - 250px) / 2 + 24px));
        max-width: min(430px, calc((100dvh - 250px) / 2 + 24px));
    }

    #tetris-board {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 2;
    }

    .panel-status {
        max-width: 430px;
    }

    /* Next + Hold side by side, high scores full width below */
    .tetris-right {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tetris-right .panel {
        flex: 1 1 40%;
    }

    .tetris-right .panel-highscores {
        flex: 1 1 100%;
    }

    .tetris-right .small {
        display: none;
    }

    #next-canvas,
    #hold-canvas {
        display: block;
        margin: 0 auto;
    }
}

/* Theater mode: automatic on touch devices (touch.js adds the class on
   load), synced with real fullscreen on fullscreenchange, and the fallback
   where element fullscreen does not exist. The board column is pinned to
   the VISIBLE viewport — touch.js tracks visualViewport.height against
   Safari's collapsing chrome. */
html:has(> body.theater) {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

body.theater {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

body.theater .tetris-page {
    min-height: 0;
}

body.theater .tetris-header,
body.theater .tetris-left,
body.theater .tetris-right {
    display: none;
}

body.theater .tetris-main {
    display: block;
}

body.theater .tetris-center {
    position: fixed;
    inset: 0;
    z-index: 30;
    margin: 0;
    height: 100vh;   /* fallback; touch.js pins this to visualViewport.height */
    height: 100dvh;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: calc(env(safe-area-inset-top, 0px) + 10px)
             calc(env(safe-area-inset-right, 0px) + 10px)
             calc(env(safe-area-inset-bottom, 0px) + 10px)
             calc(env(safe-area-inset-left, 0px) + 10px);
}

/* The board takes whatever height is left above the status strip and keeps
   its 1:2 aspect, letterboxed — the whole portrait layout always fits the
   visible viewport. */
body.theater .game-frame {
    flex: 1 1 auto;
    min-height: 0;
    width: auto;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.theater #tetris-board {
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 2;
    max-width: calc(100vw - 68px);
    max-width: calc(100dvw - 68px);
}

body.theater .panel-status {
    flex: 0 0 auto;
    width: auto;
    min-width: 260px;
    max-width: 430px;
}

/* one-time iOS "Add to Home Screen" strip (injected by touch.js) */
.a2hs-hint {
    pointer-events: none;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 35;
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: calc(100vw - 16px);
    padding: 2px 2px 2px 14px;
    background: rgba(10, 12, 20, 0.94);
    border: 1px solid rgba(255, 221, 85, 0.45);
    border-radius: 999px;
    color: #f5f5f5;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.a2hs-hint .a2hs-close {
    pointer-events: auto;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #ffdd55;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}