.game-page {--game-border:var(--site-border, #dde5ef);--game-muted:var(--site-muted, #64748b);}
.game-page [hidden] {display:none!important;}
.game-layout {display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:28px;align-items:start;max-width:1080px;margin:auto;}
.game-stage {min-width:0;display:flex;justify-content:center;align-items:center;}
.gomoku-canvas {width:100%;max-width:640px;aspect-ratio:1;display:block;border-radius:14px;touch-action:manipulation;cursor:crosshair;box-shadow:0 2px 10px #202c4012;}
.game-canvas:focus-visible {outline:3px solid #3b82f6;outline-offset:4px;}
.game-sidebar {display:flex;flex-direction:column;gap:18px;min-width:0;}
.game-status {font-weight:600;line-height:1.65;min-height:3.3em;}
.game-status[data-error="true"] {color:#dc2626;}
.game-stats {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.game-stat {padding:12px 14px;border:1px solid var(--game-border);border-radius:12px;min-width:0;}
.game-stat span {display:block;font-size:13px;color:var(--game-muted);line-height:1.5;}
.game-stat strong {display:block;font-size:24px;font-variant-numeric:tabular-nums;font-weight:700;line-height:1.5;overflow-wrap:anywhere;}
.game-action-row {display:flex;gap:10px;flex-wrap:wrap;}
.game-action-row button {flex:1;min-height:46px;white-space:normal;}
.game-settings {display:grid;grid-template-columns:minmax(0,1fr);gap:8px 14px;}
.game-settings .tool-form-field {min-width:0;}
.game-settings .tool-label {margin:0 0 6px;line-height:1.5;}
.game-settings .tool-select {width:100%;min-width:0;min-height:46px;}
.game-settings .tool-select:disabled {opacity:.6;}
.game-help {font-size:14px;line-height:1.8;color:var(--game-muted);}
.game-help p + p {margin-top:8px;}
.game-toggle {display:flex;gap:8px;align-items:center;font-size:14px;}
.game-toggle input {width:17px;height:17px;accent-color:#2563eb;}
.game-board-wrap {position:relative;max-width:320px;width:100%;}
.tetris-canvas {display:block;width:100%;aspect-ratio:1/2;max-height:660px;border:1px solid #344158;border-radius:12px;background:#101a2d;touch-action:none;}
.tetris-overlay {position:absolute;inset:0;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;border-radius:12px;background:#0b122bc9;color:#fff;padding:18px;text-align:center;backdrop-filter:blur(3px);}
.tetris-overlay[hidden] {display:none;}
.tetris-overlay strong {font-size:26px;}
.tetris-overlay button {min-width:140px;min-height:46px;}
.tetris-layout {grid-template-columns:320px 290px;justify-content:center;max-width:720px;gap:32px;}
.tetris-previews {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tetris-preview {border:1px solid var(--game-border);border-radius:12px;padding:10px;}
.tetris-preview span {display:block;font-size:13px;color:var(--game-muted);}
.tetris-preview canvas {width:100%;height:70px;display:block;}
.tetris-touch {display:flex;gap:8px;justify-content:center;margin-top:14px;}
.tetris-controls > .game-action-row {margin-bottom:12px;}
.tetris-touch button {display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--game-border);border-radius:12px;background:var(--site-surface,#fff);color:var(--site-text,#172033);font-size:24px;touch-action:none;user-select:none;}
.tetris-touch button:active,.tetris-touch button.is-held {background:#2563eb;color:white;}
.game-page button:disabled {opacity:.45;cursor:default;}
.game-page .game-secondary {border:1px solid var(--game-border);border-radius:10px;padding:10px 14px;background:var(--site-surface,#fff);color:var(--site-text,#172033);font-weight:600;}
.game-page .game-secondary:hover:not(:disabled) {border-color:#94a3b8;}
html[data-theme="dark"] .game-page {--game-border:#334155;--game-muted:#a9b6cb;}
@media(max-width:900px) {.game-layout {grid-template-columns:minmax(0,1fr) 260px;gap:20px;}.tetris-layout {grid-template-columns:280px 260px;}}
@media(max-width:640px) {
    .game-layout {grid-template-columns:1fr;gap:20px;}
    .game-sidebar {gap:14px;}
    .gomoku-layout .game-sidebar {display:grid;grid-template-columns:1fr 1fr;column-gap:14px;}
    .gomoku-layout .game-settings,.gomoku-layout .game-help,.gomoku-layout .game-toggle {grid-column:1/-1;}
    .gomoku-layout .game-settings {grid-template-columns:repeat(2,minmax(0,1fr));}
    .gomoku-layout .game-settings .tool-form-field:first-child,.gomoku-layout .game-settings .tool-form-field:last-child {grid-column:1/-1;}
    .gomoku-layout .game-status {grid-column:1/-1;min-height:1.65em;}
    .gomoku-layout .game-stats {grid-column:1/-1;}
    .gomoku-layout .game-action-row {grid-column:1/-1;}
    .tetris-layout {grid-template-columns:minmax(0,1fr) 100px;gap:12px;}
    .tetris-layout .game-stats {grid-template-columns:1fr;gap:6px;}
    .tetris-layout .game-stat {padding:6px 8px;}
    .tetris-layout .game-stat strong {font-size:20px;line-height:1.2;}
    .tetris-layout .game-stat span {font-size:11px;line-height:1.3;}
    .tetris-layout .game-sidebar {gap:10px;}
    .tetris-layout .game-action-row {gap:6px;}
    .tetris-layout .game-action-row button {padding:8px;font-size:13px;}
    .tetris-layout .tetris-previews {grid-template-columns:1fr;gap:6px;}
    .tetris-layout .tetris-preview {padding:6px;}
    .tetris-layout .tetris-preview canvas {height:40px;}
    .tetris-layout .game-help {display:none;}
    .tetris-layout .game-status {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
    .tetris-controls {grid-column:1/-1;}
    .tetris-touch {gap:8px;margin-top:0;flex-wrap:wrap;}
    .tetris-touch button {width:44px;height:44px;}
    .tetris-level {grid-column:1/-1;display:flex;align-items:center;gap:12px;}
    .tetris-level .tool-label {margin:0;}
    .tetris-level .tool-select {width:100px;}
}
@media(prefers-reduced-motion:reduce) {.game-page * {scroll-behavior:auto;}}