/* ============================================================
   青 · 2048 —— 样式表
   模块：
   01 全局变量与基础样式
   02 顶部标题 / 信息区 / 模式条
   03 琴音控制条
   04 棋盘 / 数字方块 / 冻结徽章 / 道具栏 / 消除条
   05 按钮交互
   06 设置弹窗（主题 / 自定义底色 / 数据 / 成就）
   07 结算 / 胜利弹窗
   08 轻提示 / 成就提示
   09 夜间护眼模式
   10 大屏适配与响应式
   ============================================================ */

/* ---------- 01 全局变量与基础 ---------- */
:root {
  --page-bg: linear-gradient(160deg, #f2f6f4, #dfe9e4);
  --board-bg: linear-gradient(160deg, rgba(58, 99, 84, .92), rgba(33, 66, 55, .95));
  --cell-bg: rgba(255, 255, 255, .16);
  --panel-bg: rgba(252, 250, 246, .97);
  --bar-bg: rgba(255, 255, 255, .55);
  --btn-bg: rgba(255, 255, 255, .55);
  --btn-bg-hover: rgba(255, 255, 255, .92);
  --btn-border: rgba(63, 111, 92, .28);
  --accent: #3f6f5c;
  --accent-hover: #4d8370;
  --text-color: #2f3b35;
  --pad: 14px;
  --gap: 14px;
  --danger: #b04a4a;
  --t2-bg: #ecf5f0; --t2-fg: #4c5f56;
  --t4-bg: #dcefe4; --t4-fg: #4c5f56;
  --t8-bg: #bfe0cd; --t8-fg: #31523f;
  --t16-bg: #95c9ab; --t16-fg: #ffffff;
  --t32-bg: #6fb28c; --t32-fg: #ffffff;
  --t64-bg: #4a9672; --t64-fg: #ffffff;
  --t128-bg: #e7c98a; --t128-fg: #6b5220;
  --t256-bg: #ddb566; --t256-fg: #6b5220;
  --t512-bg: #d19c3d; --t512-fg: #ffffff;
  --t1024-bg: #c2832a; --t1024-fg: #ffffff;
  --t2048-bg: #b06d21; --t2048-fg: #ffffff;
  --tsup-bg: #8a5a33; --tsup-fg: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  min-height: 100vh;
  font-family: "Kaiti SC", "STKaiti", "KaiTi", "Microsoft YaHei", "PingFang SC", serif;
  color: var(--text-color);
  background: var(--page-bg) fixed;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 28px 46px;
  -webkit-font-smoothing: antialiased;
  transition: filter .3s ease;
}

[hidden] { display: none !important; }

/* ---------- 02 顶部标题 / 信息区 / 模式条 ---------- */
.topbar {
  width: 100%;
  max-width: 1060px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.brand-title {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 8px;
  color: var(--accent);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.brand-sub {
  margin-top: 6px;
  font-size: 16px;
  letter-spacing: 5px;
  color: var(--text-color);
  opacity: .65;
}

.score-board {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.score-item {
  min-width: 148px;
  padding: 12px 20px;
  text-align: center;
  background: var(--board-bg);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.score-label {
  display: block;
  font-size: 14px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .72);
}

.score-value {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.score-item.best .score-value { color: #ffe9b3; }
.score-item.time .score-value { color: #bff3e0; }
.score-item.clear .score-value { color: #ffd9a0; }

.score-value.xp { font-size: 18px; }

.xp-bar {
  display: block;
  margin-top: 5px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .22);
  overflow: hidden;
}

.xp-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ffe9b3, #ffd27a);
  transition: width .3s ease;
}

.actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* 模式条 */
.mode-bar {
  width: 100%;
  max-width: 1060px;
  margin-top: 24px;
  display: flex;
  gap: 12px;
}

.mode-btn {
  font-family: inherit;
  font-size: 18px;
  letter-spacing: 3px;
  padding: 12px 34px;
  border: 2px solid var(--btn-border);
  border-radius: 14px;
  background: var(--btn-bg);
  color: var(--accent);
  cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .12s ease, box-shadow .22s ease;
}

.mode-btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }

.mode-btn.active {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(63, 111, 92, .35);
}

/* ---------- 03 琴音控制条 ---------- */
.music-bar {
  width: 100%;
  max-width: 1060px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-radius: 16px;
  background: var(--bar-bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

.mb-icon { font-size: 26px; color: var(--accent); }

.music-select {
  font-family: inherit;
  font-size: 17px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg-hover);
  color: var(--text-color);
  cursor: pointer;
}

.vol-label { font-size: 16px; opacity: .75; margin-left: 6px; letter-spacing: 1px; }

.volume {
  width: 190px;
  height: 8px;
  accent-color: var(--accent);
  cursor: pointer;
}

.vol-num { font-size: 15px; min-width: 44px; opacity: .75; }

/* ---------- 04 棋盘 / 方块 / 道具栏 ---------- */
.game-wrap {
  width: 100%;
  max-width: 1060px;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-hint {
  margin-bottom: 8px;
  font-size: 17px;
  letter-spacing: 2px;
  opacity: .72;
}

.melody-hint {
  margin-bottom: 16px;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--accent);
  opacity: .9;
  font-weight: 600;
}

.freeze-badge {
  margin-bottom: 14px;
  padding: 8px 22px;
  border-radius: 20px;
  background: rgba(96, 140, 200, .9);
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px;
  box-shadow: 0 4px 14px rgba(96, 140, 200, .35);
  animation: badgePulse 1.6s ease infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.board {
  position: relative;
  width: min(64vh, 680px);
  max-width: calc(100vw - 56px);
  aspect-ratio: 1 / 1;
  padding: var(--pad);
  border-radius: 24px;
  background: var(--board-bg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  touch-action: none;
  user-select: none;
}

/* 无效移动驳回反馈：棋盘轻微抖动（不涉及方块滑动动画） */
.board.shake { animation: boardShake .3s ease; }

@keyframes boardShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-7px); }
  50%      { transform: translateX(6px); }
  75%      { transform: translateX(-3px); }
}

.cells {
  position: absolute;
  inset: var(--pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--gap);
}

.cell {
  border-radius: 14px;
  background: var(--cell-bg);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, .18);
}

.tile-layer {
  position: absolute;
  inset: var(--pad);
  pointer-events: none;
}

.tile {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  transition: transform .16s ease;
}

.tile-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .14);
}

/* 数字配色 —— 由主题调色板变量驱动 */
.tile-2   .tile-inner { background: var(--t2-bg); color: var(--t2-fg); }
.tile-4   .tile-inner { background: var(--t4-bg); color: var(--t4-fg); }
.tile-8   .tile-inner { background: var(--t8-bg); color: var(--t8-fg); }
.tile-16  .tile-inner { background: var(--t16-bg); color: var(--t16-fg); }
.tile-32  .tile-inner { background: var(--t32-bg); color: var(--t32-fg); }
.tile-64  .tile-inner { background: var(--t64-bg); color: var(--t64-fg); }
.tile-128 .tile-inner { background: var(--t128-bg); color: var(--t128-fg); }
.tile-256 .tile-inner { background: var(--t256-bg); color: var(--t256-fg); }
.tile-512 .tile-inner { background: var(--t512-bg); color: var(--t512-fg); }
.tile-1024 .tile-inner { background: var(--t1024-bg); color: var(--t1024-fg); }
.tile-2048 .tile-inner { background: var(--t2048-bg); color: var(--t2048-fg); }
.tile-super .tile-inner { background: var(--tsup-bg); color: var(--tsup-fg); }

/* 动画 */
.tile--new .tile-inner { animation: tileIn .22s ease; }
.tile--merged .tile-inner { animation: tilePulse .24s ease; }
.tile--dying { opacity: 0; transition: opacity .16s ease; }

@keyframes tileIn {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes tilePulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* 消除模式：方块可点击选中 */
.board.clear-active .tile { pointer-events: auto; cursor: pointer; }

.tile--selected { z-index: 5; }
.tile--selected .tile-inner {
  box-shadow: 0 0 0 3px var(--accent), 0 3px 10px rgba(0, 0, 0, .25);
  transform: scale(1.04);
}
.tile--selected .tile-inner { transition: transform .12s ease; }

/* 道具栏 */
.items-bar {
  width: 100%;
  max-width: 680px;
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.items-title {
  font-size: 16px;
  letter-spacing: 2px;
  opacity: .7;
}

.item-btn { min-width: 150px; }

.btn:disabled, .item-btn:disabled, .mode-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 消除条 */
.clear-bar {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 16px;
  letter-spacing: 1px;
  opacity: .85;
}

.footer-hint {
  margin-top: 22px;
  font-size: 14px;
  letter-spacing: 1px;
  opacity: .55;
}

/* ---------- 05 按钮交互（淡色悬浮） ---------- */
.btn {
  font-family: inherit;
  font-size: 17px;
  letter-spacing: 2px;
  padding: 12px 26px;
  border: 1px solid var(--btn-border);
  border-radius: 14px;
  background: var(--btn-bg);
  color: var(--accent);
  cursor: pointer;
  transition: background .22s ease, transform .12s ease, box-shadow .22s ease, color .22s ease;
}

.btn:hover {
  background: var(--btn-bg-hover);
  box-shadow: 0 4px 16px rgba(63, 111, 92, .18);
  transform: translateY(-1px);
}

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

.btn-primary {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}

.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 6px 20px rgba(63, 111, 92, .35); }

.btn-danger {
  border-color: rgba(176, 74, 74, .4);
  color: var(--danger);
}

.btn-danger:hover { background: rgba(176, 74, 74, .1); box-shadow: 0 4px 14px rgba(176, 74, 74, .15); }

.btn-sm { font-size: 15px; padding: 9px 16px; letter-spacing: 1px; }
.btn-lg { font-size: 22px; padding: 15px 50px; letter-spacing: 4px; }

/* ---------- 06 设置弹窗 ---------- */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 32, 27, .45);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 50;
}

.modal.open { opacity: 1; visibility: visible; }

.modal-panel {
  width: min(920px, calc(100vw - 48px));
  max-height: 88vh;
  overflow-y: auto;
  background: var(--panel-bg);
  color: var(--text-color);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
  padding: 30px 36px 34px;
  transform: translateY(14px) scale(.98);
  transition: transform .25s ease;
}

.modal.open .modal-panel { transform: translateY(0) scale(1); }

.modal-panel.small {
  width: min(500px, calc(100vw - 48px));
  text-align: center;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-head h2 {
  font-size: 32px;
  letter-spacing: 8px;
  color: var(--accent);
}

.btn-close {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-size: 20px;
  color: var(--text-color);
  cursor: pointer;
  transition: background .2s ease;
}

.btn-close:hover { background: rgba(63, 111, 92, .12); }

.sec-title {
  font-size: 20px;
  letter-spacing: 2px;
  margin: 26px 0 16px;
  font-weight: 600;
  color: var(--accent);
  border-left: 4px solid var(--accent);
  padding-left: 12px;
}

.sec-count { font-size: 15px; color: var(--text-color); opacity: .6; }

.theme-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.theme-card {
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--btn-border);
  border-radius: 16px;
  background: var(--btn-bg-hover);
  cursor: pointer;
  text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.theme-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .1); }

.theme-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(63, 111, 92, .18);
}

.theme-swatch {
  height: 104px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(0, 0, 0, .08);
}

.theme-swatch .mini-board {
  width: 56px;
  margin: 14px auto 0;
  border-radius: 8px;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.theme-swatch .mini-board i {
  display: block;
  aspect-ratio: 1;
  border-radius: 3px;
  background: rgba(255, 255, 255, .3);
}

.theme-swatch .mini-board i.hot { background: rgba(255, 255, 255, .72); }

.theme-name {
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 600;
}

.theme-mark { font-size: 13px; color: var(--accent); min-height: 18px; }

/* 自定义底色 */
.custom-color-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.custom-color-row input[type="color"] {
  width: 64px;
  height: 44px;
  padding: 2px;
  border: 1px solid var(--btn-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}

.custom-color-note { font-size: 14px; opacity: .6; }

/* 数据面板 */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.stat-cell {
  padding: 16px 10px;
  border-radius: 14px;
  background: var(--board-bg);
  text-align: center;
}

.stat-label { display: block; font-size: 14px; letter-spacing: 1px; color: rgba(255, 255, 255, .72); }

.stat-value { display: block; font-size: 26px; font-weight: 700; color: #fff; margin-top: 4px; }

/* 成就 */
.achievement-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.achieve-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: var(--bar-bg);
  border: 1px solid var(--btn-border);
}

.achieve-card.locked { opacity: .5; filter: grayscale(.7); }

.achieve-icon { font-size: 30px; }

.achieve-info .achieve-name { font-size: 16px; font-weight: 600; }
.achieve-info .achieve-desc { font-size: 13px; opacity: .7; margin-top: 2px; }
.achieve-info .achieve-desc i { font-style: normal; color: var(--accent); }

.settings-actions {
  display: flex;
  gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.settings-note {
  margin-top: 14px;
  font-size: 14px;
  opacity: .6;
  letter-spacing: 1px;
}

/* ---------- 07 结算 / 胜利弹窗 ---------- */
.over-title {
  font-size: 52px;
  letter-spacing: 16px;
  text-align: center;
  color: var(--accent);
}

.over-title.win { color: #c2832a; }

.over-sub {
  margin: 6px 0 22px;
  font-size: 17px;
  letter-spacing: 2px;
  opacity: .7;
}

.over-score {
  margin: 10px auto;
  padding: 12px;
  background: var(--board-bg);
  border-radius: 14px;
  max-width: 300px;
}

.over-score .score-value.big { font-size: 38px; }

.over-body { text-align: center; padding-bottom: 8px; }
.over-body .btn { margin-top: 20px; }

.over-achievements {
  margin-top: 14px;
  min-height: 22px;
}

.over-achievement {
  display: inline-block;
  margin: 4px;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(230, 190, 90, .2);
  border: 1px solid rgba(200, 150, 60, .4);
  color: var(--text-color);
  font-size: 14px;
}

.win-modal .modal-panel { background: rgba(255, 252, 243, .98); }

/* ---------- 08 轻提示 / 成就提示 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%) translateY(10px);
  background: rgba(30, 46, 40, .88);
  color: #fff;
  padding: 12px 26px;
  border-radius: 14px;
  font-size: 16px;
  letter-spacing: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 60;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.achieve-toast {
  position: fixed;
  top: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  background: linear-gradient(135deg, rgba(220, 180, 80, .96), rgba(190, 130, 40, .96));
  color: #fff;
  padding: 14px 30px;
  border-radius: 16px;
  font-size: 18px;
  letter-spacing: 2px;
  box-shadow: 0 8px 28px rgba(190, 140, 50, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 70;
}

.achieve-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 09 夜间护眼模式 ---------- */
body.night {
  filter: brightness(.72) saturate(.92) contrast(.95);
}

/* ---------- 10 大屏与响应式 ---------- */
@media (max-width: 1000px) {
  .topbar, .music-bar, .mode-bar, .game-wrap { max-width: 100%; }
  .theme-list { grid-template-columns: repeat(3, 1fr); }
  .achievement-list { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .theme-list { grid-template-columns: repeat(2, 1fr); }
  .achievement-list { grid-template-columns: 1fr; }
  .brand-title { font-size: 36px; }
  .board { width: min(92vw, 560px); }
}