/* ============================================================
   2048 · 精美版样式
   阶段一：页面骨架 / 视觉体系 / 棋盘与方块外观
   ============================================================ */

:root {
  color-scheme: dark;

  /* 棋盘尺寸体系：改一个 --board-size，其余全部自适应 */
  --board-size: min(86vmin, 460px);
  --gap: calc(var(--board-size) * 0.035);
  --cell: calc((var(--board-size) - 5 * var(--gap)) / 4);
  --radius-tile: calc(var(--cell) * 0.17);
  --radius-board: calc(var(--board-size) * 0.045);

  --text: #eaf0ff;
  --text-dim: #8b9ac0;
  --line: rgba(255, 255, 255, 0.09);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 20px 34px;
  font-family: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system,
    sans-serif;
  color: var(--text);
  background:
    radial-gradient(120% 90% at 50% -10%, #16203c 0%, #0b1020 55%, #070a14 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 背景光晕与噪点 ---------- */

.glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

.glow--violet {
  width: 46vmax;
  height: 46vmax;
  top: -18vmax;
  left: -12vmax;
  background: radial-gradient(circle, #6d4bff 0%, rgba(109, 75, 255, 0) 68%);
}

.glow--cyan {
  width: 42vmax;
  height: 42vmax;
  right: -14vmax;
  bottom: -20vmax;
  background: radial-gradient(circle, #00d7c0 0%, rgba(0, 215, 192, 0) 70%);
  opacity: 0.35;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------- 整体布局 ---------- */

.app {
  position: relative;
  z-index: 1;
  width: var(--board-size);
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 1.1);
}

.head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand scores"
    "button button";
  align-items: end;
  gap: 14px 12px;
}

.brand {
  grid-area: brand;
}

.brand__title {
  margin: 0;
  font-size: clamp(38px, 8.4vmin, 62px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  background: linear-gradient(150deg, #ffffff 0%, #c3d2ff 45%, #8fa5e8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 12px 34px rgba(120, 150, 255, 0.28);
}

.brand__sub {
  margin: 8px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

/* ---------- 分数 ---------- */

.scores {
  grid-area: scores;
  display: flex;
  gap: 8px;
}

.score {
  position: relative;
  min-width: 74px;
  padding: 8px 12px 9px;
  text-align: center;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px -14px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
}

.score--best {
  border-color: rgba(255, 200, 100, 0.22);
  background: linear-gradient(180deg, rgba(255, 196, 74, 0.14), rgba(255, 196, 74, 0.04));
}

.score__label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.score--best .score__label {
  color: rgba(255, 205, 120, 0.85);
}

.score__value {
  display: block;
  margin-top: 2px;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.score__value.is-bumped {
  animation: score-bump 0.34s var(--ease-spring);
}

@keyframes score-bump {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-3px) scale(1.12); color: #ffd479; }
  100% { transform: translateY(0) scale(1); }
}

/* 得分飘字 */
.score__float {
  position: absolute;
  left: 50%;
  top: 2px;
  font-size: 12.5px;
  font-weight: 800;
  color: #ffd479;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(255, 190, 70, 0.55);
  animation: float-up 0.85s var(--ease-out) forwards;
}

@keyframes float-up {
  from { opacity: 0; translate: -50% 8px; }
  25%  { opacity: 1; }
  to   { opacity: 0; translate: -50% -18px; }
}

/* ---------- 按钮 ---------- */

.btn {
  grid-area: button;
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #dfe8ff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 26px -16px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  transition: transform 0.16s var(--ease-out), border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(160, 190, 255, 0.4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
}

.btn:active {
  transform: translateY(0) scale(0.985);
}

.btn:focus-visible {
  outline: 2px solid #7f9cff;
  outline-offset: 3px;
}

.btn__icon {
  font-size: 15px;
  line-height: 1;
}

.btn--primary {
  color: #10182c;
  border-color: transparent;
  background: linear-gradient(135deg, #9fd0ff 0%, #8ea8ff 50%, #c9a6ff 100%);
  box-shadow: 0 16px 34px -18px rgba(140, 168, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---------- 棋盘 ---------- */

.board {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  padding: var(--gap);
  border-radius: var(--radius-board);
  border: 1px solid var(--line);
  background:
    linear-gradient(158deg, rgba(32, 44, 74, 0.92) 0%, rgba(17, 24, 44, 0.96) 100%);
  box-shadow:
    0 34px 80px -28px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 0 1px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  isolation: isolate;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.board::after {
  /* 顶部高光 */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 32%);
  pointer-events: none;
  z-index: 3;
}

.board__cells {
  display: grid;
  grid-template-columns: repeat(4, var(--cell));
  grid-template-rows: repeat(4, var(--cell));
  gap: var(--gap);
}

.cell {
  border-radius: var(--radius-tile);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* ---------- 方块层 ---------- */

.board__tiles {
  position: absolute;
  inset: var(--gap);
  pointer-events: none;
}

.tile {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cell);
  height: var(--cell);
  display: grid;
  place-items: center;
  border-radius: var(--radius-tile);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-size: calc(var(--cell) * 0.44);
  color: var(--tile-fg, #eaf0ff);
  background: linear-gradient(158deg, var(--tile-c1), var(--tile-c2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 6px rgba(0, 0, 0, 0.28),
    0 10px 22px -14px rgba(0, 0, 0, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  transform:
    translate(
      calc(var(--col) * (var(--cell) + var(--gap))),
      calc(var(--row) * (var(--cell) + var(--gap)))
    );
  transition: transform 0.13s var(--ease-out);
  will-change: transform;
}

/* 不同位数自适应字号 */
.tile[data-size="md"] { font-size: calc(var(--cell) * 0.36); }
.tile[data-size="sm"] { font-size: calc(var(--cell) * 0.29); }
.tile[data-size="xs"] { font-size: calc(var(--cell) * 0.235); }
.tile[data-size="xxs"] { font-size: calc(var(--cell) * 0.2); }

/* ---------- 方块配色段 ---------- */

.tile[data-value="2"]    { --tile-c1: #2b3653; --tile-c2: #212a43; --tile-fg: #c9d7f4; }
.tile[data-value="4"]    { --tile-c1: #35446d; --tile-c2: #283353; --tile-fg: #d3dffb; }
.tile[data-value="8"]    { --tile-c1: #3e5cae; --tile-c2: #2f4788; --tile-fg: #e3ecff; }
.tile[data-value="16"]   { --tile-c1: #4c66cf; --tile-c2: #3a4ea6; --tile-fg: #eef3ff; }
.tile[data-value="32"]   { --tile-c1: #6a5ce4; --tile-c2: #5143ba; --tile-fg: #f2eeff; }
.tile[data-value="64"]   { --tile-c1: #8b52da; --tile-c2: #6d39ae; --tile-fg: #f6eeff; }
.tile[data-value="128"]  { --tile-c1: #b148c8; --tile-c2: #8d2fa2; --tile-fg: #fdefff; }
.tile[data-value="256"]  { --tile-c1: #d94298; --tile-c2: #ae2c76; --tile-fg: #ffeef8; }
.tile[data-value="512"]  { --tile-c1: #ec4a6f; --tile-c2: #bd2d52; --tile-fg: #fff0f3; }
.tile[data-value="1024"] { --tile-c1: #f4802f; --tile-c2: #cd5a13; --tile-fg: #fff6e9; }
.tile[data-value="2048"] {
  --tile-c1: #ffc247;
  --tile-c2: #f0990a;
  --tile-fg: #3a2300;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 34px rgba(255, 190, 70, 0.55),
    0 12px 28px -12px rgba(0, 0, 0, 0.8);
}

.tile[data-value="4096"],
.tile[data-value="8192"],
.tile[data-value="16384"],
.tile[data-value="32768"],
.tile[data-value="65536"] {
  --tile-c1: #ff5d73;
  --tile-c2: #cc2246;
  --tile-fg: #fff1f4;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 40px rgba(255, 80, 110, 0.6),
    0 12px 28px -12px rgba(0, 0, 0, 0.8);
}

/* ---------- 方块动画 ---------- */

/* 注意：用独立的 scale 属性做缩放，避免覆盖负责定位的 transform */

.tile--new {
  animation: tile-appear 0.22s var(--ease-spring) both;
}

@keyframes tile-appear {
  from { opacity: 0; scale: 0.35; }
  to   { opacity: 1; scale: 1; }
}

.tile--merged {
  animation: tile-pop 0.24s var(--ease-spring);
  z-index: 2;
}

@keyframes tile-pop {
  0%   { scale: 1; filter: brightness(1); }
  42%  { scale: 1.13; filter: brightness(1.45); }
  100% { scale: 1; filter: brightness(1); }
}

/* ---------- 遮罩层 ---------- */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: var(--gap);
  border-radius: inherit;
  background: rgba(8, 12, 26, 0.74);
  backdrop-filter: blur(9px) saturate(120%);
  animation: fade-in 0.28s var(--ease-out) both;
}

.overlay[hidden] {
  display: none;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.overlay__card {
  width: min(100%, 280px);
  padding: 26px 22px 22px;
  text-align: center;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(160deg, rgba(40, 54, 92, 0.95), rgba(20, 27, 48, 0.97));
  box-shadow: 0 30px 60px -24px #000, inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: card-rise 0.34s var(--ease-spring) both;
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.overlay__title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(140deg, #fff, #a8bcff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.overlay__score {
  margin: 10px 0 20px;
  font-size: 13px;
  color: var(--text-dim);
}

.overlay__score b {
  font-size: 20px;
  color: #ffd479;
  font-variant-numeric: tabular-nums;
}

.overlay__actions {
  display: grid;
  gap: 9px;
}

.overlay .btn {
  grid-area: auto;
  width: 100%;
}

.btn--ghost {
  color: #b9c8ea;
  background: rgba(255, 255, 255, 0.04);
}

/* ---------- 底部提示 ---------- */

.hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(139, 154, 192, 0.75);
  letter-spacing: 0.02em;
}

.hint__dot {
  color: rgba(139, 154, 192, 0.35);
}

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  margin: 0 1px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  color: #cdd9f5;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

/* ---------- 窄屏微调 ---------- */

@media (max-width: 420px) {
  body { padding: 18px 14px 26px; }
  :root { --board-size: min(92vmin, 460px); }
  .score { min-width: 64px; padding: 7px 10px 8px; }
  .score__value { font-size: 17px; }
  .hint { font-size: 10.5px; }
}

/* ---------- 尊重系统的减少动效设置 ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}