/* 两个游戏的独立样式。尺寸以容器为准，500px 棋盘也能缩放到窄屏。 */
.game-shell { width:100%; max-width:500px; min-width:0; margin:0 auto; }
.game-shell button { touch-action:manipulation; }
.game-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; }
.game-score { margin:0; color:var(--accent); font-size:16px; font-variant-numeric:tabular-nums; }
.game-2048-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.game-2048-title { margin:0; font-size:clamp(38px,8vw,66px); line-height:1.1; letter-spacing:-2px; font-weight:750; }
.game-scores { display:flex; align-items:stretch; gap:8px; min-width:0; }
.game-scores .game-score,.game-best { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:78px; max-width:158px; padding:8px 14px; margin:0; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); text-align:center; }
.score-label { font-size:10px; line-height:1.5; color:var(--muted); white-space:nowrap; }
.score-value { max-width:100%; font-size:23px; line-height:1.25; font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.score-gain { position:absolute; left:0; right:0; bottom:7px; z-index:4; color:var(--accent); font-size:23px; line-height:1; font-weight:750; pointer-events:none; }
.score-gain.is-visible { animation:score-float 650ms ease-out both; }
.game-2048-goal { flex:1 1 180px; margin:0; color:var(--muted); font-size:13px; }
.game-2048 .game-toolbar .btn { flex:none; min-height:42px; }
.game-2048 .game-toolbar .btn[data-auto-toggle][aria-pressed="true"] { color:var(--button-ink); background:var(--accent); border-color:transparent; }
.game-2048 .game-toolbar .btn[data-auto-toggle][aria-pressed="true"]:hover { filter:brightness(1.06); }
.board-2048-stage { position:relative; width:100%; min-width:0; }
.board-2048 { --board-gap:clamp(6px,1.8vw,12px); position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:var(--board-gap); width:100%; aspect-ratio:1; padding:var(--board-gap); border-radius:10px; background:#4c4944; user-select:none; touch-action:none; }
/* 数字格沿用经典米色、橙色和金色，文字颜色逐档调整，明暗主题都保持可读。 */
.tile,.tile-motion { display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; border-radius:5px; background:#615d56; color:#eee9e0; font-size:clamp(25px,5.6vw,52px); font-weight:750; line-height:1; font-variant-numeric:tabular-nums; }
.tile-0 { color:transparent; }
.tile-2 { background:#eee4da; color:#655c53; }
.tile-4 { background:#ede0c8; color:#655c53; }
.tile-8 { background:#f2b179; color:#47352b; }
.tile-16 { background:#f59563; color:#422d24; }
.tile-32 { background:#f67c5f; color:#42281f; }
.tile-64 { background:#f65e3b; color:#381b15; }
.tile-128 { background:#edcf72; color:#514313; }
.tile-256 { background:#edcc61; color:#514313; }
.tile-512 { background:#edc850; color:#514313; }
.tile-1024 { background:#edc53f; color:#514313; }
.tile-2048 { background:#edc22e; color:#514313; box-shadow:0 0 22px #edc22e36; }
.tile-super { background:#36343b; color:#f4e6b7; }
.tile[data-digits="3"],.tile-motion[data-digits="3"] { font-size:clamp(21px,4.7vw,42px); }
.tile[data-digits="4"],.tile-motion[data-digits="4"] { font-size:clamp(17px,4vw,35px); }
.tile[data-digits="5"],.tile-motion[data-digits="5"] { font-size:clamp(14px,3.2vw,28px); }
.tile-super[data-digits]:is([data-digits="6"],[data-digits="7"],[data-digits="8"],[data-digits="9"],[data-digits="10"],[data-digits="11"],[data-digits="12"],[data-digits="13"],[data-digits="14"],[data-digits="15"],[data-digits="16"]) { font-size:clamp(6px,1.5vw,12px); }
.tile.is-travelling { visibility:hidden; }
.tile.is-new { animation:tile-appear 150ms 120ms ease-out both; }
.tile.is-merged { animation:tile-merge 160ms 120ms ease-out both; }
.tile-motion-layer { position:absolute; inset:var(--board-gap); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:var(--board-gap); pointer-events:none; }
.tile-motion { animation:tile-slide 120ms ease-out forwards; }
.game-overlay { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; padding:24px; background:#191c22e8; border:1px solid var(--line); border-radius:10px; text-align:center; }
.game-overlay[hidden] { display:none; }
.game-overlay-title { margin:0; color:#e7e8e1; font-size:clamp(26px,6vw,42px); line-height:1.2; }
.game-overlay-message { margin:0; color:#c3c9c7; font-size:13px; }
.game-overlay-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px; }
.game-directions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:16px; }
.game-directions .btn { min-height:44px; min-width:0; padding:8px 3px; }
.game-note { margin:15px 0 0; min-height:2em; }
.game-rules { margin:17px 0 0; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.9; }
.reaction-pad { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:290px; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--ink); text-align:center; font-size:clamp(18px,3vw,24px); font-weight:600; line-height:1.6; }
.reaction-pad.is-ready { color:#20271e; background:#b5c69f; border-color:#b5c69f; }
.reaction-pad.is-early { background:var(--error-bg); color:var(--error); }
:root[data-theme="light"] .board-2048 { background:#b9ada1; }
:root[data-theme="light"] .tile-0 { background:#ccc1b5; }
/* 浅色主题的结果层同时调整文字和按钮底色，不复用暗色文字造成低对比。 */
:root[data-theme="light"] .game-overlay { background:#f5f1e8ef; }
:root[data-theme="light"] .game-overlay-title { color:#3b382f; }
:root[data-theme="light"] .game-overlay-message { color:#615c52; }
@keyframes tile-slide { from { transform:translate(0,0); } to { transform:translate(calc(var(--move-x)*(100% + var(--board-gap))),calc(var(--move-y)*(100% + var(--board-gap)))); } }
@keyframes tile-appear { from { transform:scale(.3); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes tile-merge { 0%,100% { transform:scale(1); } 45% { transform:scale(1.12); } }
@keyframes score-float { from { transform:translateY(0); opacity:1; } to { transform:translateY(-42px); opacity:0; } }
@media(max-width:480px) {
  .game-2048-heading { gap:8px; margin-bottom:15px; }
  .game-scores { gap:6px; }
  .game-scores .game-score,.game-best { min-width:64px; padding:8px; }
  .score-value { font-size:20px; }
  .game-overlay { padding:16px; gap:10px; }
  .game-overlay-actions { gap:8px; }
  .game-overlay-actions .btn { padding-inline:12px; }
  .game-2048 .game-toolbar { gap:8px; }
  .reaction-pad { min-height:240px; padding:18px; }
}
/* 用户要求减少动态效果时，移动、弹出和分数上浮全部关闭，仍保留静态反馈。 */
@media(prefers-reduced-motion:reduce) {
  .tile,.tile-motion,.score-gain { animation:none!important; transition:none!important; }
  .tile.is-travelling { visibility:visible; }
  .tile-motion-layer { display:none; }
  .score-gain.is-visible { bottom:-21px; font-size:16px; }
}

/* 输入法保护用的不可见只读输入框，仅在输入法接管 WASD 时才会出现。 */
.ime-guard { position:absolute; width:1px; height:1px; margin:0; padding:0; border:0; opacity:0; pointer-events:none; }