:root {
    --ts-bg: #020b12;
    --ts-panel: #062536;
    --ts-panel-deep: #031923;
    --ts-border: rgba(125, 211, 252, 0.22);
    --ts-text: #e0f2fe;
    --ts-muted: #94a3b8;
    --ts-cyan: #38bdf8;
    --ts-green: #34d399;
    --ts-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;

    color: var(--ts-text);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(56, 189, 248, 0.18),
            transparent 34rem
        ),
        linear-gradient(
            180deg,
            #073b50,
            #031923 48%,
            #020b12
        );
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
}

.ts-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;
}

.ts-topbar {
    min-height: 70px;

    display: flex;
    align-items: center;
    gap: 0.7rem;

    padding:
        max(0.8rem, env(safe-area-inset-top, 0px))
        clamp(0.8rem, 3vw, 2rem)
        0.8rem;

    border-bottom: 1px solid rgba(125, 211, 252, 0.12);

    background: rgba(2, 11, 18, 0.82);
    backdrop-filter: blur(18px);
}

.ts-brand {
    min-width: 0;

    display: inline-flex;
    align-items: center;
    gap: 0.7rem;

    color: inherit;
    text-decoration: none;
}

.ts-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.ts-brand span {
    min-width: 0;
    display: grid;
}

.ts-brand strong {
    font-size: 0.9rem;
}

.ts-brand small {
    overflow: hidden;

    color: var(--ts-muted);

    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-back {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;

    margin-left: auto;
    padding: 0.6rem 0.85rem;

    border: 1px solid var(--ts-border);
    border-radius: 12px;

    background: rgba(8, 47, 73, 0.58);
    color: var(--ts-text);

    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
}

.ts-icon-button {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid var(--ts-border);
    border-radius: 12px;

    background: rgba(8, 47, 73, 0.58);
    color: white;

    cursor: pointer;
}

.ts-main {
    width: 100%;

    flex: 1 1 auto;

    display: grid;
    place-items: center;

    padding: clamp(0.75rem, 2vw, 1.5rem);
}

.ts-game {
    width: min(860px, 100%);

    overflow: hidden;

    border: 1px solid var(--ts-border);
    border-radius: clamp(18px, 2vw, 26px);

    background:
        linear-gradient(
            180deg,
            rgba(8, 47, 73, 0.9),
            rgba(3, 25, 35, 0.96)
        );

    box-shadow: var(--ts-shadow);
}

.ts-hud {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 1px;

    background: rgba(125, 211, 252, 0.13);
}

.ts-hud > div {
    min-width: 0;
    min-height: 62px;

    display: grid;
    place-content: center;
    gap: 0.15rem;

    padding: 0.55rem;

    text-align: center;

    background: rgba(3, 25, 35, 0.97);
}

.ts-hud span,
.ts-panel-label,
.ts-final-grid span {
    color: var(--ts-muted);

    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ts-hud strong {
    font-size: 1.1rem;
}

.ts-layout {
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(180px, 240px);
    justify-content: center;
    gap: clamp(0.8rem, 2vw, 1.25rem);

    padding: clamp(0.8rem, 2vw, 1.25rem);
}

.ts-board-wrap {
    position: relative;

    width: min(100%, 360px);
    aspect-ratio: 1 / 2;

    justify-self: center;

    overflow: hidden;

    border: 1px solid rgba(125, 211, 252, 0.24);
    border-radius: 18px;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(186, 230, 253, 0.18),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #12617d,
            #07536b 48%,
            #04384a
        );

    box-shadow:
        inset 0 0 55px rgba(2, 11, 18, 0.35),
        0 18px 46px rgba(0, 0, 0, 0.32);
}

#tsCanvas {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    touch-action: none;
}

.ts-side {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.ts-panel {
    padding: 0.8rem;

    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 15px;

    background: rgba(2, 24, 34, 0.68);
}

.ts-panel-label {
    display: block;
    margin-bottom: 0.55rem;
}

#tsNextCanvas {
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1;

    display: block;

    margin-inline: auto;

    border-radius: 12px;

    background: rgba(2, 11, 18, 0.38);
}

.ts-help p,
.ts-score-note span {
    margin: 0;

    color: #b7c9d3;

    font-size: 0.75rem;
    line-height: 1.5;
}

.ts-help p + p {
    margin-top: 0.65rem;
}

.ts-score-note {
    display: grid;
    gap: 0.25rem;
}

.ts-score-note strong {
    color: var(--ts-text);
    font-size: 0.8rem;
}

.ts-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;

    display: none;
    place-items: center;

    padding: 0.8rem;

    background: rgba(2, 11, 18, 0.78);
    backdrop-filter: blur(8px);
}

.ts-overlay-active {
    display: grid;
}

.ts-overlay-card {
    width: min(390px, 100%);
    max-height: calc(100% - 0.5rem);

    overflow-y: auto;

    padding: clamp(1rem, 4vw, 1.6rem);

    border: 1px solid rgba(125, 211, 252, 0.24);
    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 47, 73, 0.97),
            rgba(3, 25, 35, 0.99)
        );

    text-align: center;

    box-shadow: 0 22px 64px rgba(0, 0, 0, 0.46);
}

.ts-overlay-card-small {
    width: min(300px, 100%);
}

.ts-kicker {
    color: var(--ts-cyan);

    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ts-overlay-card h1,
.ts-overlay-card h2 {
    margin: 0.55rem 0;
}

.ts-overlay-card h1 {
    font-size: clamp(2rem, 8vw, 3.4rem);
}

.ts-overlay-card h2 {
    font-size: 1.7rem;
}

.ts-overlay-card p {
    margin: 0 auto 1rem;

    color: #cbd5e1;

    font-size: 0.79rem;
    line-height: 1.55;
}

.ts-instructions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.4rem;

    margin: 0.9rem 0;
}

.ts-instructions span {
    padding: 0.45rem;

    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 10px;

    background: rgba(2, 11, 18, 0.32);

    color: #cbd5e1;

    font-size: 0.67rem;
    font-weight: 700;
}

.ts-primary {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.65rem 1rem;

    border: 1px solid rgba(125, 211, 252, 0.32);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #0284c7,
            #0369a1
        );

    color: white;

    font-weight: 850;

    cursor: pointer;
}

.ts-final-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0.5rem;

    margin: 0.8rem 0;
}

.ts-final-grid > div {
    display: grid;
    gap: 0.15rem;

    padding: 0.65rem;

    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 12px;

    background: rgba(2, 11, 18, 0.32);
}

.ts-final-grid strong {
    font-size: 1.15rem;
}

.ts-save-status {
    min-height: 1.4rem;
}

.ts-mobile-controls {
    display: none;
}

@media (max-width: 720px) {

    .ts-topbar {
        min-height: 58px;
        padding: 0.5rem 0.65rem;
    }

    .ts-brand img {
        width: 34px;
        height: 34px;
    }

    .ts-brand small {
        display: none;
    }

    .ts-back {
        min-height: 38px;
        padding: 0.45rem 0.55rem;
    }

    .ts-back span:last-child {
        display: none;
    }

    .ts-icon-button {
        width: 38px;
        height: 38px;
    }

    .ts-main {
        display: block;
        padding: 0.45rem;
    }

    .ts-game {
        border-radius: 16px;
    }

    .ts-hud > div {
        min-height: 50px;
        padding: 0.35rem;
    }

    .ts-hud strong {
        font-size: 0.95rem;
    }

    .ts-layout {
        grid-template-columns: 1fr;
        gap: 0.55rem;

        padding: 0.55rem;
    }

    .ts-board-wrap {
        width: min(100%, 310px);
        border-radius: 14px;
    }

    .ts-side {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 0.55rem;
    }

    .ts-panel {
        padding: 0.55rem;
    }

    .ts-help {
        display: none;
    }

    .ts-score-note {
        align-content: center;
    }

    #tsNextCanvas {
        max-width: 90px;
    }

    .ts-mobile-controls {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));

        gap: 0.35rem;

        padding:
            0
            0.55rem
            calc(
                0.65rem
                + env(safe-area-inset-bottom, 0px)
            );
    }

    .ts-mobile-controls button {
        min-width: 0;
        min-height: 54px;

        display: grid;
        place-content: center;
        gap: 0.05rem;

        padding: 0.3rem;

        border: 1px solid rgba(125, 211, 252, 0.2);
        border-radius: 12px;

        background: rgba(8, 47, 73, 0.8);
        color: var(--ts-text);

        cursor: pointer;

        touch-action: manipulation;
    }

    .ts-mobile-controls span {
        font-size: 1.2rem;
        line-height: 1;
    }

    .ts-mobile-controls small {
        font-size: 0.56rem;
        font-weight: 800;
    }

    .ts-drop-button {
        background:
            linear-gradient(
                135deg,
                rgba(2, 132, 199, 0.95),
                rgba(3, 105, 161, 0.95)
            ) !important;
    }
}

@media (max-width: 390px) {

    .ts-board-wrap {
        width: min(100%, 282px);
    }

    .ts-overlay-card {
        padding: 0.85rem;
    }

    .ts-overlay-card h1 {
        font-size: 2.2rem;
    }

    .ts-instructions {
        gap: 0.3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   Tank Stack mobile gameplay layout V2
   Keep board, preview and controls together inside the usable phone viewport.
   2026-09-14
   ========================================================================== */

@media (max-width: 720px) {

    .ts-main {
        padding: .35rem;
    }

    .ts-layout {
        position: relative;

        display: block;

        padding: .45rem;
    }

    .ts-board-wrap {
        width:
            min(
                100%,
                330px,
                calc(
                    (
                        100dvh
                        - 58px
                        - 50px
                        - 72px
                        - 34px
                    ) / 2
                )
            );

        min-width: 250px;

        margin-inline: auto;
    }

    /*
     * Float only the useful Next Piece panel over the aquarium.
     * The help/leaderboard explanation is unnecessary during mobile play.
     */
    .ts-side {
        position: absolute;

        top: .8rem;
        right:
            max(
                .8rem,
                calc(
                    (100% - min(100%, 330px)) / 2
                    + .8rem
                )
            );

        z-index: 8;

        display: block;

        pointer-events: none;
    }

    .ts-side .ts-panel {
        display: none;
    }

    .ts-side .ts-panel:first-child {
        width: 76px;

        display: block;

        padding: .4rem;

        border-color:
            rgba(
                125,
                211,
                252,
                .22
            );

        background:
            rgba(
                2,
                24,
                34,
                .76
            );

        backdrop-filter: blur(8px);
    }

    .ts-side .ts-panel-label {
        margin-bottom: .2rem;

        font-size: .48rem;

        text-align: center;
    }

    #tsNextCanvas {
        width: 62px;
        height: 62px;

        max-width: 62px;
    }

    .ts-mobile-controls {
        gap: .3rem;

        padding:
            .15rem
            .45rem
            calc(
                .5rem
                + env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    .ts-mobile-controls button {
        min-height: 50px;
    }
}


@media (max-width: 390px) {

    .ts-board-wrap {
        width:
            min(
                100%,
                300px,
                calc(
                    (
                        100dvh
                        - 58px
                        - 50px
                        - 70px
                        - 28px
                    ) / 2
                )
            );

        min-width: 238px;
    }

    .ts-side .ts-panel:first-child {
        width: 68px;
    }

    #tsNextCanvas {
        width: 54px;
        height: 54px;
    }
}

/* ==========================================================================
   Tank Stack final phone fit
   Keeps HUD + board + controls inside the available PWA viewport.
   2026-09-14
   ========================================================================== */

@media (max-width: 720px) {

    .ts-main {
        padding:
            .3rem
            .3rem
            calc(
                .3rem
                + env(safe-area-inset-bottom, 0px)
            );
    }

    .ts-layout {
        padding: .35rem;
    }

    .ts-board-wrap {
        width:
            min(
                100%,
                290px,
                calc(
                    (
                        100dvh
                        - 205px
                        - env(safe-area-inset-bottom, 0px)
                    ) / 2
                )
            );

        min-width: 0;

        margin-inline: auto;
    }

    .ts-mobile-controls {
        padding:
            .1rem
            .35rem
            calc(
                .35rem
                + env(safe-area-inset-bottom, 0px)
            );
    }

    .ts-mobile-controls button {
        min-height: 46px;
    }
}