.game-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 72px; }
.game-intro { max-width: 800px; margin-bottom: 30px; }
.game-intro h1 { margin: 20px 0 14px; font-size: clamp(42px, 7vw, 76px); }
.game-intro h1 em { color: var(--accent); font-style: normal; }
.game-intro p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.back-link { display: inline-flex; margin-bottom: 34px; color: var(--muted); font-size: 13px; text-decoration: none; }
.back-link:hover { color: var(--accent); }
.game-layout { display: grid; grid-template-columns: minmax(420px, 620px) minmax(240px, 300px); gap: 34px; align-items: start; }
.board-card, .game-panel { border: 1px solid rgba(216, 212, 200, .9); border-radius: 24px; background: var(--card); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.board-card { padding: 22px; }
.score-row { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 16px; }
.score-row div { min-width: 90px; padding: 8px 14px; border-radius: 10px; color: #f8ead2; background: #735b4a; text-align: center; }
.score-row span { display: block; font-size: 11px; opacity: .75; }
.score-row strong { display: block; margin-top: 2px; font-size: 22px; }
.game-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; aspect-ratio: 1; padding: 10px; border-radius: 14px; background: #9d806a; touch-action: none; }
.tile { display: flex; align-items: center; justify-content: center; border-radius: 9px; color: transparent; background: rgba(238, 220, 196, .25); font-size: clamp(26px, 7vw, 48px); font-weight: 800; transition: transform .12s ease, background .12s ease; }
.tile[class*="tile-"] { color: #6b4e3a; background: #f2dfbf; }
.tile-4 { background: #edcfa0 !important; }.tile-8 { color: #fff5e8 !important; background: #e99a63 !important; }.tile-16 { color: #fff5e8 !important; background: #db775d !important; }.tile-32 { color: #fff5e8 !important; background: #c9554a !important; }.tile-64 { color: #fff5e8 !important; background: #ab3f42 !important; }.tile-128,.tile-256,.tile-512 { color: #fff5e8 !important; background: #8b6ab1 !important; font-size: clamp(22px, 6vw, 40px); }.tile-1024,.tile-2048 { color: #fff5e8 !important; background: #4f8e83 !important; font-size: clamp(19px, 5vw, 34px); }
.board-bottom { margin-top: 14px; }.game-tip { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.game-panel { padding: 28px; }.panel-heading h2 { margin: 10px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 29px; font-weight: 500; }
.game-status { min-height: 50px; margin: 28px 0 22px; padding: 13px 14px; border-radius: 12px; color: var(--accent-dark); background: #e4f1e7; font-size: 14px; line-height: 1.6; }.game-status.finished { color: #8b3028; background: #f7ded7; }.game-status.won { color: #79521b; background: #f8edcf; }
.game-actions { display: grid; gap: 9px; margin-top: 24px; }.game-actions button { width: 100%; margin-top: 0; }.rules-note { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }.rules-note strong { color: var(--ink); font-size: 13px; }.rules-note p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
@media (max-width: 860px) { .game-layout { grid-template-columns: 1fr; } .game-panel { display: block; } }
@media (max-width: 600px) { .game-shell { width: min(100% - 20px, 520px); padding-top: 28px; } .game-layout { gap: 18px; } .board-card, .game-panel { border-radius: 18px; padding: 15px; } .game-panel { padding: 22px; } .game-intro h1 { font-size: clamp(38px, 12vw, 56px); } }