.game-2048-page .ttt-stage {
  background: radial-gradient(circle at 80% 12%, rgba(255,255,255,0.16) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #7b1cd4 0%, #580a98 55%, #4d087f 100%);
  background-size: 8px 8px, auto;
}

.game-2048-page .ttt-intro-title {
  color: #ffdf75;
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 0.95;
  text-shadow: 0 8px 0 rgba(120, 67, 22, 0.42);
}

.game-2048-page .ttt-board-stage {
  width: min(460px, 76vw);
  flex: 0 0 auto;
}

.game-2048-board {
  --ttt-board-size: 4;
  --tile-gap: 10px;
  display: grid;
  grid-template-columns: repeat(var(--ttt-board-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--ttt-board-size), minmax(0, 1fr));
  gap: var(--tile-gap);
  padding: var(--tile-gap);
  background: #54756f;
  border-radius: 18px;
  touch-action: none;
  user-select: none;
}

.game-2048-tile {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  border-radius: 11px;
  color: #28444b;
  background: rgba(236, 245, 224, 0.19);
  font-size: clamp(1.1rem, 5vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
  transition: background-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.game-2048-tile[data-value="2"] { background: #edf1d7; }
.game-2048-tile[data-value="4"] { background: #d8e8ae; }
.game-2048-tile[data-value="8"] { background: #a9d483; }
.game-2048-tile[data-value="16"] { background: #77c9a2; color: #103f48; }
.game-2048-tile[data-value="32"] { background: #4cb7b2; color: #fff; }
.game-2048-tile[data-value="64"] { background: #3994ae; color: #fff; }
.game-2048-tile[data-value="128"] { background: #f1c75b; color: #3d3b2b; font-size: clamp(1rem, 4vw, 2rem); }
.game-2048-tile[data-value="256"] { background: #f0a94b; color: #fff; font-size: clamp(1rem, 4vw, 2rem); }
.game-2048-tile[data-value="512"] { background: #ec8741; color: #fff; font-size: clamp(1rem, 4vw, 2rem); }
.game-2048-tile[data-value="1024"],
.game-2048-tile[data-value="2048"],
.game-2048-tile[data-value="4096"] { background: #df5d4d; color: #fff; font-size: clamp(0.85rem, 3.5vw, 1.7rem); }

.game-2048-page[data-tile-theme="contrast"] .game-2048-tile[data-value="2"] { background: #fff; color: #111; }
.game-2048-page[data-tile-theme="contrast"] .game-2048-tile[data-value="4"] { background: #d9d9d9; color: #111; }
.game-2048-page[data-tile-theme="contrast"] .game-2048-tile[data-value="8"] { background: #146c43; color: #fff; }
.game-2048-page[data-tile-theme="contrast"] .game-2048-tile[data-value="16"] { background: #075b82; color: #fff; }
.game-2048-page[data-tile-theme="contrast"] .game-2048-tile[data-value="32"] { background: #49328c; color: #fff; }
.game-2048-page[data-tile-theme="contrast"] .game-2048-tile[data-value="64"] { background: #9c2447; color: #fff; }
.game-2048-page[data-tile-theme="contrast"] .game-2048-tile[data-value^="1"],
.game-2048-page[data-tile-theme="contrast"] .game-2048-tile[data-value^="2"],
.game-2048-page[data-tile-theme="contrast"] .game-2048-tile[data-value^="4"] { background: #111; color: #ffe66d; }

.game-2048-game .ttt-game-topbar {
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0 auto 14px;
}

.game-2048-stat {
  min-width: 130px;
  padding: 7px 16px;
  border: 3px solid #5f88d6;
  border-radius: 20px;
  background: linear-gradient(180deg, #dbe9ff 0%, #c8ddff 100%);
  color: #0d3a74;
  text-align: center;
}

.game-2048-stat span,
.game-2048-stat strong { display: block; }
.game-2048-stat span { font-size: 0.75rem; opacity: 0.82; font-weight: 700; }
.game-2048-stat strong { font-size: 1.6rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.game-2048-board-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.game-2048-page .ttt-game-msg { min-height: 28px; margin: 10px 0 0; text-align: center; }
.game-2048-setting { display: flex; align-items: center; gap: 10px; min-height: 36px; color: #fff; }
.game-2048-setting input { accent-color: #f6c44b; }
.game-2048-page .ttt-match-modal__meta { color: #fff; text-align: center; margin: 10px 0 18px; }

@media (max-width: 700px) {
  .game-2048-page .ttt-stage { height: min(740px, 78vh); min-height: 560px; }
  .game-2048-page .ttt-view--game { padding: 92px 12px 20px; }
  .game-2048-page .ttt-game-topbar { gap: 8px; }
  .game-2048-page .ttt-board-stage { width: min(420px, 78vw); }
  .game-2048-board { --tile-gap: 7px; padding: var(--tile-gap); }
  .game-2048-stat { min-width: 0; flex: 1 1 0; padding: 6px 8px; }
  .game-2048-stat strong { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .game-2048-tile { transition: none; }
}