/* =====================================================================
   play2048.cn — 游戏页样式
   棋盘 clamp() 流体缩放 · 数字方块渐变 · 移动/合并/粒子动画
   ===================================================================== */

/* 主题表面色（浅色覆盖见文件末尾） */
:root {
  --board-bg: rgba(0, 0, 0, 0.35);
  --cell-bg: rgba(255, 255, 255, 0.045);
  --cell-inset: inset 0 0 8px rgba(0, 0, 0, 0.4);
  --overlay-bg: rgba(6, 6, 14, 0.72);
}

html[data-theme="light"] {
  --board-bg: #dce4f0;
  --cell-bg: rgba(255, 255, 255, 0.78);
  --cell-inset: inset 0 1px 3px rgba(20, 40, 80, 0.10);
  --overlay-bg: rgba(240, 246, 252, 0.85);
}

.game-layout {
  display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px; margin: 0 auto;
}
.is-tutorial { max-width: 980px; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
@media (max-width: 880px) {
  .is-tutorial { grid-template-columns: 1fr; }
  .tutorial-panel { order: -1; }
}

/* ---------------- 顶部信息条 ---------------- */

.game-top { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }

.stat-box {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 96px; padding: 9px 16px 11px; overflow: hidden;
}
.stat-label {
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
}
.stat-val { font-size: clamp(19px, 3.4vw, 25px); font-weight: 700; color: var(--text); }
.best-box .stat-val { color: var(--amber); }
#box-coins .stat-val { color: var(--lime); }

.score-delta {
  position: absolute; right: 8px; top: 6px;
  font-size: 14px; font-weight: 700; color: var(--lime);
  opacity: 0; pointer-events: none;
}
.score-delta.bump { animation: delta-rise 800ms ease-out; }
@keyframes delta-rise {
  0%   { opacity: 0; transform: translateY(6px); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-18px); }
}

.stat-val.bump { animation: score-pop 220ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes score-pop { 50% { transform: scale(1.18); } }

.best-box.flash { animation: best-flash 900ms ease-out; }
@keyframes best-flash {
  0%, 100% { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
  35%      { box-shadow: 0 0 24px rgba(255, 176, 60, 0.65), inset 0 0 0 1px rgba(255, 176, 60, 0.7); }
}

.game-top #btn-new { margin-left: auto; }

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

.board-shell {
  position: relative;
  width: 100%;                      /* 撑满上级容器 */
  margin: 18px auto;                /* 与上下区域保持距离 */
  padding: clamp(10px, 2.6vw, 16px);
}

.board {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 1 / 1;              /* 自适应正方形，JS 按 clientWidth 测量布局 */
  height: auto;
  margin: 0 auto;
  background: var(--board-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  touch-action: none;               /* 触屏滑动由 JS 接管 */
  user-select: none; -webkit-user-select: none;
}

.board-cells, .board-tiles, .board-fx {
  position: absolute; inset: 0;
}

.board-cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 3.2%;
  padding: 3.2%;
}
.board-cell {
  background: var(--cell-bg);
  border-radius: 10px;
  box-shadow: var(--cell-inset);
}

/* 方块几何：JS 依 --board-size 计算像素位置 */
.board-tiles .tile {
  position: absolute;
  width: var(--cell); height: var(--cell);
  display: grid; place-items: center;
  border-radius: 10px;
  font-family: var(--font-mono); font-weight: 800;
  transform: translate3d(var(--x), var(--y), 0);
  transition: transform var(--move-ms) ease-in-out;
  will-change: transform;
  z-index: 2;
}

/* 数值字号随位数收缩 */
.tile .num { line-height: 1; letter-spacing: -1px; }
.tile[data-len="1"] .num, .tile[data-len="2"] .num { font-size: calc(var(--cell) * .42); }
.tile[data-len="3"] .num { font-size: calc(var(--cell) * .34); }
.tile[data-len="4"] .num { font-size: calc(var(--cell) * .27); }
.tile[data-len="5"] .num { font-size: calc(var(--cell) * .22); }

/* 方块配色：2 → 8192 独立渐变 */
.tile[data-v="2"]    { background: linear-gradient(145deg, #7de8f5, #2ec9dd); color: #052a2e; }
.tile[data-v="4"]    { background: linear-gradient(145deg, #56e6ff, #00c2e8); color: #04222b; }
.tile[data-v="8"]    { background: linear-gradient(145deg, #4f8dff, #2f5fe0); color: #eaf6ff; }
.tile[data-v="16"]   { background: linear-gradient(145deg, #7a7bff, #4a3ae0); color: #ecebff; }
.tile[data-v="32"]   { background: linear-gradient(145deg, #b04dff, #7a1fe0); color: #f6ecff; }
.tile[data-v="64"]   { background: linear-gradient(145deg, #e46bff, #b029e8); color: #ffe9fb; box-shadow: 0 0 14px rgba(228, 107, 255, .4); }
.tile[data-v="128"]  { background: linear-gradient(145deg, #ff5fae, #e02f86); color: #fff; box-shadow: 0 0 14px rgba(255, 95, 174, .4); }
.tile[data-v="256"]  { background: linear-gradient(145deg, #ff5470, #d92250); color: #fff; box-shadow: 0 0 16px rgba(255, 84, 112, .45); }
.tile[data-v="512"]  { background: linear-gradient(145deg, #ff8a5c, #f0552e); color: #2b0d00; box-shadow: 0 0 16px rgba(255, 138, 92, .45); }
.tile[data-v="1024"] { background: linear-gradient(145deg, #ffd36b, #ffa42e); color: #2b1600; box-shadow: 0 0 18px rgba(255, 176, 60, .5); }
.tile[data-v="2048"] { background: linear-gradient(145deg, #f4ff7a, #b6ff3c); color: #1d2b00; box-shadow: 0 0 26px rgba(182, 255, 60, .65); animation: tile-2048 1.6s ease-in-out infinite alternate; }
.tile[data-v="4096"] { background: linear-gradient(145deg, #c8fff4, #6bffd8); color: #00302a; box-shadow: 0 0 28px rgba(107, 255, 216, .7); animation: tile-2048 1.4s ease-in-out infinite alternate; }
.tile[data-v="8192"] { background: linear-gradient(145deg, #ffffff, #9ff3ff); color: #003341; box-shadow: 0 0 34px rgba(255, 255, 255, .8); animation: tile-2048 1.2s ease-in-out infinite alternate; }

@keyframes tile-2048 {
  from { filter: brightness(1); }
  to   { filter: brightness(1.25); }
}

/* 出现 / 合并动画 */
.tile.is-new { animation: tile-pop 180ms ease-out backwards; }
@keyframes tile-pop {
  from { opacity: 0; transform: translate3d(var(--x), var(--y), 0) scale(0); }
  to   { opacity: 1; transform: translate3d(var(--x), var(--y), 0) scale(1); }
}
.tile.is-merged { animation: tile-bounce 200ms ease-out; z-index: 3; }
@keyframes tile-bounce {
  0%   { transform: translate3d(var(--x), var(--y), 0) scale(1); }
  55%  { transform: translate3d(var(--x), var(--y), 0) scale(1.22); }
  100% { transform: translate3d(var(--x), var(--y), 0) scale(1); }
}

/* 技能目标高亮 */
.tile.pick-source, .board-cell.pick-target {
  outline: 2px solid var(--lime);
  outline-offset: -2px;
  animation: pick-pulse 900ms ease-in-out infinite alternate;
}
.board-cell.pick-target { border-radius: 10px; }
@keyframes pick-pulse {
  from { box-shadow: 0 0 4px rgba(182, 255, 60, .3); }
  to   { box-shadow: 0 0 16px rgba(182, 255, 60, .8); }
}
.tile.pick-bomb { outline: 2px dashed var(--danger); outline-offset: -2px; }

/* 粒子（合并爆炸） */
.particle {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  pointer-events: none; z-index: 4;
  animation: particle-fly 520ms ease-out forwards;
}
@keyframes particle-fly {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to   { opacity: 0; transform: translate(var(--px), var(--py)) scale(.3); }
}

/* 炸弹闪光 */
.bomb-flash {
  position: absolute; border-radius: 10px; background: rgba(255, 84, 112, .55);
  pointer-events: none; z-index: 5;
  animation: bomb-flash 420ms ease-out forwards;
}
@keyframes bomb-flash {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ---------------- 终局遮罩 ---------------- */

.board-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-radius: 14px; text-align: center; padding: 20px;
  background: var(--overlay-bg);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  animation: overlay-in .38s ease;
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
.board-overlay h2 {
  margin: 0; font-size: clamp(26px, 6vw, 38px); font-weight: 800;
  color: var(--cyan); text-shadow: 0 0 24px rgba(0, 240, 255, 0.55);
}
.board-overlay.win h2 { color: var(--lime); text-shadow: 0 0 24px rgba(182, 255, 60, 0.55); }
.board-overlay p { margin: 0 0 14px; color: var(--text-dim); font-size: 14.5px; }
.overlay-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------------- 底部操作区 ---------------- */

.game-bottom { display: flex; flex-direction: column; gap: 12px; align-items: center; }

#btn-undo { min-width: 128px; }
.undo-count { opacity: .7; font-size: 12.5px; }
#btn-undo:disabled { opacity: .35; }

.how-hint {
  width: 100%; text-align: center; color: var(--text-faint);
  font-size: 12.8px; line-height: 1.7; margin: 4px 0 0;
}

/* ---------------- 技能面板（加强模式） ---------------- */

.skill-bar {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; width: 100%;
}
.skill-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 96px; padding: 9px 12px;
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit;
  transition: transform var(--move-ms) ease, box-shadow var(--move-ms) ease, border-color var(--move-ms) ease;
}
.skill-btn:not(:disabled):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lime) 50%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--lime) 20%, transparent); }
.skill-btn.is-armed { border-color: var(--lime); box-shadow: 0 0 16px color-mix(in srgb, var(--lime) 35%, transparent); }
.skill-btn:disabled { cursor: not-allowed; }
.skill-btn.is-locked, .skill-btn.is-empty { opacity: .42; filter: saturate(.4); }
.skill-btn.is-cooling { opacity: .6; }

.skill-name { font-size: 13px; font-weight: 700; color: var(--text); }
.skill-meta { font-size: 11px; color: var(--text-faint); letter-spacing: .4px; }
.skill-btn.is-armed .skill-meta { color: var(--lime); }

.skill-prompt {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--lime) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--lime) 45%, transparent);
  color: var(--lime); font-size: 14px; margin: 0;
}
.skill-prompt.hidden { display: none !important; }

/* ---------------- 教程面板 ---------------- */

.tutorial-panel { padding: 22px; position: sticky; top: 84px; }
.tut-progress { color: var(--text-faint); font-size: 12px; letter-spacing: 1.2px; margin: 0 0 8px; }
.tut-title { font-size: 19px; color: var(--lime); margin-bottom: 8px; }
.tut-text { color: var(--text-dim); font-size: 14px; min-height: 96px; }
.tut-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }

/* 推荐方向箭头（教程模式） */
.hint-layer { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; z-index: 9; }
.hint-arrow {
  position: absolute; font-size: 44px; color: var(--lime);
  text-shadow: 0 0 18px rgba(182, 255, 60, 0.9);
  animation: hint-blink 1s ease-in-out infinite alternate;
}
.hint-arrow[data-dir="U"] { transform: rotate(0deg);    top: 6%; }
.hint-arrow[data-dir="D"] { transform: rotate(180deg);  bottom: 6%; }
.hint-arrow[data-dir="L"] { transform: rotate(-90deg);  left: 5%; top: 45%; }
.hint-arrow[data-dir="R"] { transform: rotate(90deg);   right: 5%; top: 45%; }
@keyframes hint-blink { from { opacity: .35; } to { opacity: 1; } }

/* ---------------- 窄屏适配 ---------------- */

/* ≤720px：新一局与分数/最高分/金币同一行等宽排布（不换行），玻璃卡片风格一致 */
@media (max-width: 720px) {
  .game-top {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
  }
  .game-top .stat-box {
    flex: 1 1 0;
    min-width: 0;
  }
  .game-top #btn-new {
    margin-left: 0;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 6px;
    font-size: 13px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
  }
  .game-top #btn-new:hover {
    transform: none;
    border-color: var(--line-strong);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

@media (max-width: 480px) {
  .game-top { gap: 6px; }
  .stat-box { padding: 8px 6px 10px; }
  .skill-btn { min-width: calc(50% - 4px); flex: 1; }
  .board-overlay h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .board-tiles .tile, .tile.is-new, .tile.is-merged, .tile[data-v="2048"] { animation: none !important; transition: none !important; }
}