/* =================================================================
 *  俄罗斯方块 —— 样式
 *  独立全屏页 /tetris，与工具箱主站同一套视觉语言（Inter），
 *  采用深色街机底 + 靛蓝主色，衬托彩色方块。
 * ================================================================= */

:root {
    --tt-primary: #818cf8;
    --tt-primary-dark: #6366f1;
    --tt-sky: #22d3ee;
    --tt-danger: #f87171;
    --tt-ink: #f8fafc;
    --tt-ink-soft: #a5b4fc;
    --tt-line: rgba(148, 163, 184, .22);
    --tt-card: rgba(15, 23, 42, .72);
    --tt-radius: 16px;
}

* { box-sizing: border-box; }

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

.tt-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
        'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    color: var(--tt-ink);
    /* 深夜街机底，画布加载前也不会闪白 */
    background:
        radial-gradient(1100px 700px at 75% -10%, rgba(99, 102, 241, .45) 0%, transparent 60%),
        linear-gradient(180deg, #1e1b4b 0%, #0f172a 100%);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.tt-app {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

/* ── 顶栏 ── */

.tt-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 8px 14px;
    border-radius: var(--tt-radius);
    background: var(--tt-card);
    border: 1px solid var(--tt-line);
    box-shadow: 0 8px 24px rgba(2, 6, 23, .45);
    backdrop-filter: blur(10px);
}

.tt-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
}

.tt-brand-text {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .02em;
}

.tt-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
}

.tt-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(129, 140, 248, .14);
    border: 1px solid rgba(129, 140, 248, .28);
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}

.tt-stat-label {
    color: var(--tt-ink-soft);
    font-weight: 600;
}

.tt-stat-val {
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 800;
}

.tt-stat-best { color: var(--tt-sky); }

.tt-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.tt-btn {
    appearance: none;
    border: 1px solid var(--tt-line);
    background: rgba(255, 255, 255, .08);
    color: var(--tt-ink);
    font: 600 13px/1 inherit;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.tt-btn:hover {
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 4px 14px rgba(2, 6, 23, .4);
    transform: translateY(-1px);
}

.tt-btn:active { transform: translateY(0); }

.tt-btn-primary {
    background: linear-gradient(180deg, var(--tt-primary) 0%, var(--tt-primary-dark) 100%);
    border-color: transparent;
    color: #fff;
}

.tt-btn-lg {
    font-size: 15px;
    padding: 11px 28px;
    border-radius: 12px;
}

.tt-btn-icon {
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tt-btn-icon svg { width: 16px; height: 16px; }
.tt-btn-icon .tt-ico-off { display: none; }
.tt-btn-icon.is-muted .tt-ico-on { display: none; }
.tt-btn-icon.is-muted .tt-ico-off { display: block; }

/* ── 舞台 ── */

.tt-stage {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
    border-radius: var(--tt-radius);
    overflow: hidden;
    background: rgba(2, 6, 23, .55);
    border: 1px solid var(--tt-line);
    box-shadow: 0 12px 32px rgba(2, 6, 23, .5);
}

#ttCanvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.tt-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: auto;
    background: rgba(15, 23, 42, .68);
    backdrop-filter: blur(6px);
}

.tt-overlay:empty { display: none; }
.tt-overlay[hidden] { display: none; }

.tt-panel {
    width: min(480px, 100%);
    text-align: center;
    background: var(--tt-card);
    border: 1px solid var(--tt-line);
    border-radius: 20px;
    padding: 28px 26px 22px;
    box-shadow: 0 18px 48px rgba(2, 6, 23, .6);
}

.tt-panel[hidden] { display: none; }

.tt-panel-emoji {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 10px;
}

.tt-panel-title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: .02em;
}

.tt-panel-sub {
    margin: 0 0 14px;
    color: var(--tt-ink-soft);
    font-size: 14px;
    line-height: 1.7;
}

.tt-rules {
    margin: 0 0 20px;
    padding: 12px 14px 12px 32px;
    text-align: left;
    color: var(--tt-ink-soft);
    font-size: 13px;
    line-height: 1.9;
    background: rgba(129, 140, 248, .10);
    border: 1px dashed rgba(129, 140, 248, .4);
    border-radius: 12px;
}

.tt-rules b { color: var(--tt-ink); }

.tt-panel-tip {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--tt-ink-soft);
}

kbd {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--tt-line);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    font: 600 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--tt-ink);
}

.tt-panel-over .tt-panel-title { color: var(--tt-danger); }

.tt-over-stats {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}

.tt-over-stat {
    min-width: 96px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--tt-line);
}

.tt-over-stat-label {
    display: block;
    font-size: 11px;
    color: var(--tt-ink-soft);
    font-weight: 600;
    margin-bottom: 2px;
}

.tt-over-stat-val {
    display: block;
    font-size: 20px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.tt-over-stat.is-best .tt-over-stat-val { color: var(--tt-sky); }

.tt-new-best {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #facc15, #f97316);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

.tt-new-best[hidden] { display: none; }

/* ── 触屏按键 ── */

.tt-keypad {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 64px);
    grid-template-rows: repeat(2, 48px);
    gap: 6px;
    justify-content: center;
    padding-bottom: 4px;
}

.tt-keypad[hidden] { display: none; }

.tt-dir {
    appearance: none;
    border: 1px solid var(--tt-line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    color: var(--tt-ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(2, 6, 23, .4);
    user-select: none;
    -webkit-user-select: none;
}

.tt-dir:active {
    background: var(--tt-primary);
    color: #fff;
}

.tt-dir-ccw   { grid-column: 1; grid-row: 1; }
.tt-dir-cw    { grid-column: 2; grid-row: 1; }
.tt-dir-drop  { grid-column: 3; grid-row: 1; }
.tt-dir-left  { grid-column: 1; grid-row: 2; }
.tt-dir-down  { grid-column: 2; grid-row: 2; }
.tt-dir-right { grid-column: 3; grid-row: 2; }

/* ── 底栏 ── */

.tt-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--tt-ink-soft);
    padding: 0 4px;
}

.tt-foot-hint {
    font-weight: 600;
    color: var(--tt-sky);
}

/* ── 小屏适配 ── */

@media (max-width: 640px) {
    .tt-brand-text { display: none; }

    .tt-topbar { gap: 8px; padding: 8px 10px; }

    .tt-stat { padding: 2px 8px; font-size: 11px; }
    .tt-stat-val { font-size: 13px; }

    .tt-btn { padding: 7px 10px; font-size: 12px; }

    .tt-panel { padding: 22px 18px 18px; }
    .tt-panel-title { font-size: 22px; }

    .tt-foot span:first-child { display: none; }
    .tt-foot { justify-content: center; }
}