/* 2048 固有の見た目（共通は ../common/base.css）
   灰青の盤に、数が大きいほど濃くなる藍のタイル（色は board.js の TILE）。目標に届いたタイルは黄土色の縁 */
[hidden] { display: none !important; }
:root { --g-bg: #C5CCD6; --g-cell: #DDE2E9; --g-ring: #D9A21B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --g-bg: #B3BBC6; --g-cell: #CDD3DC; } }
:root[data-theme="dark"] { --g-bg: #B3BBC6; --g-cell: #CDD3DC; }

.board-wrap { position: relative; max-width: 480px; margin: 0 auto; }
.board-box { aspect-ratio: 1 / 1; }
.g-board {
  --gap: 10px; --size: calc((100% - (var(--n) + 1) * var(--gap)) / var(--n));
  position: relative; width: 100%; height: 100%; background: var(--g-bg); border-radius: 10px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: grab;
}
.g-board.n5 { --gap: 8px; }
.g-board.n6 { --gap: 7px; }
.g-cells, .g-tiles { position: absolute; inset: 0; }
.g-cells { display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); gap: var(--gap); padding: var(--gap); }
.g-cell { background: var(--g-cell); border-radius: 6px; }
.g-tile {
  position: absolute; left: var(--gap); top: var(--gap); width: var(--size); height: var(--size);
  transform: translate(calc(var(--c) * (100% + var(--gap))), calc(var(--r) * (100% + var(--gap))));
  transition: transform 110ms ease-out; z-index: 1;
  container-type: inline-size;
}
.g-tile .t {
  width: 100%; height: 100%; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.02em;
  font-size: calc(var(--fs) * 100cqw); filter: var(--shadow-piece);
}
.g-tile.light .t { box-shadow: inset 0 0 0 1.5px #AEB6C2; }
.g-tile.goal .t { box-shadow: inset 0 0 0 max(3px, 6cqw) var(--g-ring); }
.g-tile.merged { z-index: 2; }
.g-tile.merged .t { animation: gpop 160ms ease-out; }
.g-tile.new .t { animation: gnew 160ms ease-out 40ms both; }
@keyframes gpop { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes gnew { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* 動かない向きを押したときの小さな揺れ */
.g-board.nudge-left { animation: nl .18s ease-out; } .g-board.nudge-right { animation: nr .18s ease-out; }
.g-board.nudge-up { animation: nu .18s ease-out; } .g-board.nudge-down { animation: nd .18s ease-out; }
@keyframes nl { 40% { transform: translateX(-5px); } } @keyframes nr { 40% { transform: translateX(5px); } }
@keyframes nu { 40% { transform: translateY(-5px); } } @keyframes nd { 40% { transform: translateY(5px); } }

/* 盤の下の4つの矢印 */
.pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 480px; margin: 10px auto 0; }
.pad-btn { padding: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.pad-btn svg { width: 26px; height: 26px; fill: currentColor; display: block; }

/* 手番のバー: 盤・得点・ベスト */
.status { flex-wrap: wrap; column-gap: 12px; row-gap: 0; }
.st-name { white-space: nowrap; }
.counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter b { font-size: 1.25em; }
.gain { color: var(--ok); font-size: 14px; margin-left: 4px; }
.best { margin-left: auto; color: var(--ink-sub); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv { display: inline-block; white-space: nowrap; font-size: 14px; font-weight: 700; padding: 0 8px; border-radius: 999px; border: 1.5px solid currentColor; margin-left: 6px; vertical-align: middle; color: var(--accent); }

/* 結果は盤の下に出す（最後の盤を隠さない） */
.result-box { position: static; margin: 10px auto 0; padding: 16px 20px; max-width: 480px; }
.result-box h2 { font-size: 1.4rem; margin-bottom: 4px; }
.result-box .big { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.result-box ul { list-style: none; padding: 0; margin: 0 0 8px; }
.callout { z-index: 5; top: 42%; }
#tools { max-width: 480px; margin-left: auto; margin-right: auto; }

@media (max-width: 420px) {
  .stage { padding: 8px; }
  .turnbar { margin-bottom: 6px; }
  .g-board { --gap: 8px; }
  .g-board.n5 { --gap: 6px; }
  .g-board.n6 { --gap: 5px; }
  .pad { gap: 6px; margin-top: 8px; }
  .controls .btn.icon { padding: 0 9px; }
  .result-box { padding: 12px; }
  .result-box h2 { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .g-tile { transition: none; }
  .g-tile.merged .t, .g-tile.new .t, .g-board[class*="nudge"] { animation: none; }
}
/* 上のバーの高さを一定に（No.93。数字は一番長い文が画面の幅（360px・375px 以上・641px 以上）で何行になるか。--tb-rt はふりがなの分。base.css・turnbar.js） */
.turnbar { --tb-msg-lines: 2; --tb-st-lines: 1.25; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1.25; } }
@media (min-width: 641px) { .turnbar { --tb-msg-lines: 1; --tb-st-lines: 1.25; } }
:root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 2; --tb-rt: 0px; --tb-st-rt: 0px; }
@media (min-width: 375px) { :root:lang(en) .turnbar { --tb-msg-lines: 3; --tb-st-lines: 2; } }
@media (min-width: 641px) { :root:lang(en) .turnbar { --tb-msg-lines: 2; --tb-st-lines: 1.25; } }
/* 上のバーの高さ ここまで */