/* ============================================================
   拾光游戏厅 · game2048.css
   仅作用于 .g2048-* 命名空间。
   胡桃木机身 + 象牙/彩漆数字牌，平滑滑动 / 合并弹跳 / 新块落下。
   ============================================================ */

/* ---------------- 外层与舞台 ---------------- */
.g2048-wrap {
  --g2048-cell: 100px;
  --g2048-gap: 8px;
  --g2048-pad: 12px;
  --g2048-nx: -5px;
  --g2048-ny: 0px;
  position: relative;
  width: 100%;
}

.g2048-stage {
  position: relative;
  align-items: start;
  padding: clamp(16px, 2.4vw, 30px) clamp(12px, 2vw, 26px);
  background:
    radial-gradient(ellipse 58% 42% at 50% 4%, rgba(255, 224, 166, .13), transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(0, 0, 0, .38), transparent 70%),
    repeating-linear-gradient(93deg, rgba(33, 18, 8, .22) 0 2px, rgba(255, 230, 183, .015) 2px 5px, transparent 5px 19px),
    linear-gradient(150deg, #402b1c, #281a10 78%);
}

.g2048-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, transparent 55%, rgba(0, 0, 0, .26));
}

.g2048-machine {
  position: relative;
  z-index: 1;
  width: min(100%, 546px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}

/* ---------------- 机身铭牌 ---------------- */
.g2048-marquee {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.5;
}

.g2048-marquee-en {
  color: rgba(230, 201, 130, .68);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .36em;
  text-indent: .36em;
  text-shadow: 0 0 12px rgba(230, 201, 130, .22);
}

.g2048-marquee-plate {
  color: rgba(239, 225, 196, .4);
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: .18em;
}

/* ---------------- 木质边框 ---------------- */
.g2048-frame {
  position: relative;
  width: 100%;
  padding: clamp(7px, 1.4vw, 13px);
  border-radius: 15px;
  border: 1px solid rgba(198, 160, 90, .4);
  background:
    linear-gradient(180deg, rgba(255, 241, 208, .12), transparent 26%),
    repeating-linear-gradient(92deg, rgba(255, 230, 185, .035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(87deg, rgba(24, 12, 4, .16) 0 2px, transparent 2px 7px),
    linear-gradient(150deg, #6f4b2b, #4b3019 46%, #2c1b0e);
  box-shadow:
    0 28px 46px rgba(0, 0, 0, .5),
    0 4px 10px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 236, 196, .28),
    inset 0 -2px 5px rgba(0, 0, 0, .45);
}

.g2048-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 235, 200, .09);
  pointer-events: none;
}

.g2048-screw {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #f2dba0, #b98d4e 48%, #6a4c22 78%, #3a2711);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .65),
    inset 0 0 0 1px rgba(38, 22, 8, .5);
}

.g2048-screw::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  height: 1px;
  background: rgba(44, 26, 9, .7);
  transform: rotate(-38deg);
}

.g2048-screw.is-tl { left: 6px; top: 6px; }
.g2048-screw.is-tr { right: 6px; top: 6px; }
.g2048-screw.is-bl { left: 6px; bottom: 6px; }
.g2048-screw.is-br { right: 6px; bottom: 6px; }

/* ---------------- 棋盘 ---------------- */
.g2048-board {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(ellipse at 38% 16%, rgba(255, 226, 180, .075), transparent 56%),
    repeating-linear-gradient(96deg, rgba(20, 11, 5, .18) 0 2px, rgba(255, 235, 200, .012) 2px 5px, transparent 5px 14px),
    linear-gradient(155deg, #3b2716, #24160c 68%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .5),
    inset 0 8px 20px rgba(0, 0, 0, .46),
    inset 0 -2px 0 rgba(255, 228, 178, .05);
}

.g2048-field {
  position: absolute;
  inset: var(--g2048-pad);
}

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

.g2048-cell {
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(14, 8, 4, .55), rgba(38, 22, 11, .42));
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .62),
    inset 0 -1px 0 rgba(255, 222, 170, .06),
    0 1px 0 rgba(255, 226, 180, .045);
}

.g2048-tiles {
  position: absolute;
  inset: 0;
}

/* ---------------- 数字牌 ---------------- */
.g2048-tile {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--g2048-cell);
  height: var(--g2048-cell);
  will-change: transform;
}

.g2048-tile.is-silent { transition: none !important; }

.g2048-tile-face {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid var(--t-edge, rgba(120, 90, 52, .4));
  color: var(--t-ink, #4c3a20);
  background:
    radial-gradient(ellipse at 30% 15%, var(--t-glow, rgba(255, 255, 255, .42)), transparent 56%),
    repeating-linear-gradient(98deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px),
    linear-gradient(158deg, var(--t-bg1, #f2e5c8), var(--t-bg2, #e0cea6));
  box-shadow:
    inset 0 1px 0 var(--t-inner, rgba(255, 250, 235, .6)),
    inset 0 -3px 6px rgba(0, 0, 0, .16),
    0 4px 9px rgba(0, 0, 0, .34),
    0 1px 0 rgba(255, 232, 190, .07);
  transition: background .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.g2048-tile-face::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 4px;
  border: 1px solid var(--t-inner-line, rgba(255, 255, 255, .18));
  pointer-events: none;
}

.g2048-tile-face::after {
  content: "";
  position: absolute;
  left: 7%;
  top: 5%;
  width: 34%;
  height: 10%;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--t-gloss, rgba(255, 255, 255, .5)), transparent);
  filter: blur(1px);
  opacity: .65;
  pointer-events: none;
}

.g2048-tile-num {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: calc(var(--g2048-cell) * .44);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--t-shadow, 0 1px 0 rgba(255, 250, 235, .6));
}

.g2048-tile.is-len2 .g2048-tile-num { font-size: calc(var(--g2048-cell) * .4); }
.g2048-tile.is-len3 .g2048-tile-num { font-size: calc(var(--g2048-cell) * .31); }
.g2048-tile.is-len4 .g2048-tile-num { font-size: calc(var(--g2048-cell) * .25); }
.g2048-tile.is-len5 .g2048-tile-num { font-size: calc(var(--g2048-cell) * .2); }

/* 各等级配色：象牙 → 琥珀 → 朱红 → 铜/橄榄 → 墨绿 → 墨 */
.g2048-tile.g2048-v2 {
  --t-bg1: #f6ecd6; --t-bg2: #e6d5ae; --t-ink: #4c3a20; --t-edge: #cbb78d;
  --t-glow: rgba(255, 255, 255, .5);
}
.g2048-tile.g2048-v4 {
  --t-bg1: #f0ddb6; --t-bg2: #dcc69a; --t-ink: #4a3517; --t-edge: #c1a87b;
}
.g2048-tile.g2048-v8 {
  --t-bg1: #eeca8c; --t-bg2: #d5a75e; --t-ink: #49300e; --t-edge: #b58f57;
}
.g2048-tile.g2048-v16 {
  --t-bg1: #e6ad65; --t-bg2: #c9863c; --t-ink: #3e2508; --t-edge: #a16c31;
}
.g2048-tile.g2048-v32 {
  --t-bg1: #da874c; --t-bg2: #b7662f; --t-ink: #fff3dc; --t-edge: #8e4e1f;
  --t-glow: rgba(255, 240, 210, .32);
  --t-inner: rgba(255, 236, 208, .3);
  --t-inner-line: rgba(255, 240, 214, .16);
  --t-shadow: 0 1px 2px rgba(74, 30, 6, .5);
  --t-gloss: rgba(255, 245, 222, .35);
}
.g2048-tile.g2048-v64 {
  --t-bg1: #c95f37; --t-bg2: #a54423; --t-ink: #fff1d8; --t-edge: #7d2e14;
  --t-glow: rgba(255, 236, 205, .28);
  --t-inner: rgba(255, 232, 200, .28);
  --t-inner-line: rgba(255, 240, 214, .14);
  --t-shadow: 0 1px 2px rgba(64, 20, 4, .55);
  --t-gloss: rgba(255, 244, 220, .3);
}
.g2048-tile.g2048-v128 {
  --t-bg1: #ad3f2c; --t-bg2: #81261a; --t-ink: #ffe9c6; --t-edge: #621c10;
  --t-glow: rgba(255, 222, 190, .24);
  --t-inner: rgba(255, 226, 190, .24);
  --t-inner-line: rgba(255, 234, 206, .12);
  --t-shadow: 0 1px 2px rgba(48, 12, 3, .6), 0 0 12px rgba(255, 196, 150, .18);
  --t-gloss: rgba(255, 240, 214, .26);
}
.g2048-tile.g2048-v256 {
  --t-bg1: #bd8340; --t-bg2: #8d5d23; --t-ink: #fff4d8; --t-edge: #6d4717;
  --t-glow: rgba(255, 232, 180, .3);
  --t-inner: rgba(255, 238, 200, .3);
  --t-inner-line: rgba(255, 242, 212, .15);
  --t-shadow: 0 1px 2px rgba(58, 34, 6, .5);
  --t-gloss: rgba(255, 246, 220, .34);
}
.g2048-tile.g2048-v512 {
  --t-bg1: #94762c; --t-bg2: #65501a; --t-ink: #fff0c0; --t-edge: #4c3a0e;
  --t-glow: rgba(255, 240, 180, .26);
  --t-inner: rgba(255, 240, 200, .26);
  --t-inner-line: rgba(255, 244, 210, .13);
  --t-shadow: 0 1px 2px rgba(40, 28, 4, .55);
  --t-gloss: rgba(255, 248, 216, .3);
}
.g2048-tile.g2048-v1024 {
  --t-bg1: #337566; --t-bg2: #1a473c; --t-ink: #f4e9c6; --t-edge: #0e2f28;
  --t-glow: rgba(158, 228, 147, .32);
  --t-inner: rgba(210, 250, 230, .24);
  --t-inner-line: rgba(196, 246, 224, .12);
  --t-shadow: 0 1px 2px rgba(2, 18, 14, .7), 0 0 14px rgba(158, 228, 147, .2);
  --t-gloss: rgba(220, 255, 234, .2);
}
.g2048-tile.g2048-v2048 {
  --t-bg1: #235f4f; --t-bg2: #0d342a; --t-ink: #ffe3a0; --t-edge: #08241d;
  --t-glow: rgba(255, 226, 160, .3);
  --t-inner: rgba(255, 240, 200, .3);
  --t-inner-line: rgba(255, 236, 180, .16);
  --t-shadow: 0 1px 2px rgba(0, 14, 10, .8), 0 0 16px rgba(230, 201, 130, .3);
  --t-gloss: rgba(255, 240, 196, .24);
}
.g2048-tile.g2048-v2048 .g2048-tile-face {
  border-color: rgba(230, 201, 130, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 200, .35),
    inset 0 -3px 7px rgba(0, 0, 0, .4),
    0 0 0 1px rgba(230, 201, 130, .26),
    0 0 22px rgba(230, 201, 130, .22),
    0 5px 12px rgba(0, 0, 0, .42);
}
.g2048-tile.g2048-v4096 {
  --t-bg1: #2f3527; --t-bg2: #181e14; --t-ink: #e6c982; --t-edge: #0c100a;
  --t-glow: rgba(230, 201, 130, .16);
  --t-inner: rgba(230, 201, 130, .2);
  --t-inner-line: rgba(230, 201, 130, .12);
  --t-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 12px rgba(230, 201, 130, .18);
  --t-gloss: rgba(230, 201, 130, .18);
}
.g2048-tile.g2048-v8192,
.g2048-tile.g2048-vmax {
  --t-bg1: #1c1913; --t-bg2: #0a0806; --t-ink: #f0d391; --t-edge: #000000;
  --t-glow: rgba(230, 201, 130, .14);
  --t-inner: rgba(230, 201, 130, .18);
  --t-inner-line: rgba(230, 201, 130, .1);
  --t-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 14px rgba(226, 185, 109, .24);
  --t-gloss: rgba(230, 201, 130, .14);
}

/* ---------------- 覆盖层：结束 / 达成 ---------------- */
.g2048-over,
.g2048-win {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(circle at 50% 42%, rgba(26, 16, 8, .5), rgba(10, 6, 3, .84));
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}

.g2048-over[hidden],
.g2048-win[hidden] { display: none; }

.g2048-over-panel,
.g2048-win-panel {
  width: min(100%, 306px);
  padding: 21px 22px 19px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid rgba(198, 160, 90, .46);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 236, 195, .1), transparent 55%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .03) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #42301d, #22160c 78%);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 232, 190, .14);
}

.g2048-over-en,
.g2048-win-en {
  display: block;
  margin-bottom: 5px;
  color: rgba(230, 201, 130, .58);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .24em;
}

.g2048-over-panel h3 {
  color: #f0e0c0;
  font-family: var(--font-display);
  font-size: 23px;
  letter-spacing: .14em;
  font-weight: 700;
}

.g2048-over-score {
  margin-top: 10px;
  color: rgba(239, 225, 196, .62);
  font-size: 11px;
  letter-spacing: .05em;
}

.g2048-over-score b {
  margin-left: 5px;
  color: #ffd98f;
  font-family: var(--font-mono);
  font-size: 21px;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(230, 201, 130, .32);
}

.g2048-over-best {
  margin-top: 2px;
  color: rgba(239, 225, 196, .44);
  font-size: 10.5px;
}

.g2048-over-best b {
  margin-left: 4px;
  color: rgba(230, 201, 130, .9);
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.g2048-over-new {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid rgba(178, 58, 43, .62);
  border-radius: 2px;
  color: #f0b9a8;
  font-size: 8.5px;
  letter-spacing: .08em;
  vertical-align: 1px;
}

.g2048-over-new[hidden] { display: none; }

.g2048-over-actions,
.g2048-win-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 15px;
}

.g2048-over-actions .btn,
.g2048-win-actions .btn { min-height: 33px; font-size: 11.5px; padding: 5px 13px; }

.g2048-win {
  z-index: 6;
  background:
    radial-gradient(circle at 50% 42%, rgba(26, 16, 8, .3), rgba(10, 6, 3, .72));
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.g2048-win-num {
  display: block;
  margin: 2px 0 6px;
  color: #ffdf9f;
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-shadow:
    0 1px 0 rgba(255, 248, 224, .35),
    0 0 26px rgba(230, 201, 130, .38);
}

.g2048-win-panel p {
  color: rgba(239, 225, 196, .58);
  font-size: 10.5px;
  line-height: 1.8;
}

/* ---------------- 底座提示与纪录横幅 ---------------- */
.g2048-plinth {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(239, 225, 196, .36);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .14em;
}

.g2048-plinth-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(198, 160, 90, .45);
}

.g2048-banner {
  position: absolute;
  z-index: 4;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid rgba(230, 201, 130, .5);
  border-radius: 2px;
  color: #f4e4c2;
  font-size: 11px;
  letter-spacing: .05em;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(42, 29, 17, .97), rgba(22, 14, 8, .97));
  box-shadow: 0 10px 22px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 240, 200, .14);
}

.g2048-banner[hidden] { display: none; }

.g2048-banner span {
  color: rgba(230, 201, 130, .62);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .18em;
}

.g2048-banner b { color: #ffd98f; font-weight: 600; }

/* ---------------- 右侧面板 ---------------- */
.g2048-score-card { position: relative; }

.g2048-score-main {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 1px 2px 6px;
}

.g2048-score-num {
  display: inline-block;
  color: #7d2b1d;
  font-family: var(--font-display);
  font-size: clamp(40px, 3.6vw, 54px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 1px 0 rgba(255, 253, 240, .65),
    0 2px 3px rgba(92, 48, 22, .18);
}

.g2048-score-side {
  padding-bottom: 4px;
  text-align: right;
  color: rgba(84, 58, 28, .62);
  font-family: var(--font-display);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: .08em;
}

.g2048-score-side em {
  display: block;
  margin-top: 2px;
  color: rgba(84, 58, 28, .42);
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-style: normal;
  letter-spacing: .1em;
}

.g2048-score-note {
  margin: 0 1px 8px;
  color: rgba(76, 52, 25, .58);
  font-size: 10px;
  line-height: 1.65;
}

.g2048-score-note b { color: #6b311f; font-weight: 600; }

.g2048-record-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 2px 2px;
  border-top: 1px dashed rgba(109, 76, 38, .26);
  color: rgba(76, 52, 25, .68);
  font-size: 10.5px;
}

.g2048-record-row b {
  margin-left: 2px;
  color: #4d3419;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
}

.g2048-record-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(109, 76, 38, .4);
}

.g2048-record-badge {
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid rgba(178, 58, 43, .5);
  border-radius: 2px;
  color: #8e2c1e;
  font-size: 8.5px;
  letter-spacing: .1em;
  background: rgba(178, 58, 43, .07);
}

.g2048-record-badge[hidden] { display: none; }

.g2048-milestone-title {
  margin: 12px 0 8px;
  color: rgba(109, 76, 38, .5);
  font-size: 8px;
}

.g2048-milestones {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.g2048-mile {
  padding: 3px 8px;
  border: 1px solid rgba(109, 76, 38, .26);
  border-radius: 2px;
  color: rgba(72, 50, 26, .4);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .02em;
  background: rgba(86, 59, 28, .06);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.g2048-mile.is-done {
  color: #f5e9d2;
  border-color: #7d5c2f;
  background: linear-gradient(180deg, #92703d, #6f5028);
  box-shadow: inset 0 1px 0 rgba(255, 240, 208, .32), 0 1px 2px rgba(60, 38, 14, .2);
}

.g2048-mile.is-current {
  border-color: #8e2c1e;
  box-shadow: 0 0 0 1px rgba(142, 44, 30, .45), inset 0 1px 0 rgba(255, 240, 208, .32);
}

.g2048-toolbar { gap: 7px; }

.g2048-toolbar .btn { flex: 1 1 auto; justify-content: center; }

.g2048-status {
  margin-top: 10px;
  align-items: baseline;
}

.g2048-status span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
}

.g2048-status small { font-size: 9px; }

.g2048-keys {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 11px;
  color: rgba(84, 58, 28, .55);
  font-size: 9px;
}

.g2048-kbd {
  min-width: 19px;
  padding: 2px 5px;
  border: 1px solid rgba(109, 76, 38, .32);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 252, 242, .6), rgba(240, 230, 208, .38));
  color: #5c4327;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.3;
  text-align: center;
}

.g2048-key-sep { margin: 0 1px; color: rgba(109, 76, 38, .35); }

.g2048-key-text { font-size: 9.5px; letter-spacing: .02em; }

/* 得分上浮 */
.g2048-floats {
  position: absolute;
  right: 2px;
  top: -6px;
  width: 80px;
  height: 40px;
  pointer-events: none;
}

.g2048-float {
  position: absolute;
  right: 4px;
  top: 4px;
  color: #2f6f62;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
  animation: none;
}

/* ---------------- 动画（尊重 reduced-motion） ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .g2048-tile { transition: transform .13s cubic-bezier(.25, .75, .3, 1); }

  @keyframes g2048-spawn {
    0% { opacity: 0; transform: translateY(-9%) scale(.34); }
    62% { opacity: 1; transform: translateY(1.5%) scale(1.06); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes g2048-merge {
    0% { transform: scale(1); }
    38% { transform: scale(1.16); }
    68% { transform: scale(.965); }
    100% { transform: scale(1); }
  }

  @keyframes g2048-score-pulse {
    0% { transform: scale(1); }
    32% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

  @keyframes g2048-card-hot {
    0% { box-shadow: 0 7px 16px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 30px rgba(105, 71, 32, .055); }
    38% { box-shadow: 0 7px 18px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 34px rgba(178, 58, 43, .16), 0 0 0 1px rgba(178, 58, 43, .22); }
    100% { box-shadow: 0 7px 16px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 30px rgba(105, 71, 32, .055); }
  }

  @keyframes g2048-float-up {
    0% { opacity: 0; transform: translateY(7px) scale(.8); }
    18% { opacity: 1; transform: translateY(0) scale(1); }
    72% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-26px) scale(1); }
  }

  @keyframes g2048-nudge {
    0% { transform: translate(0, 0); }
    28% { transform: translate(var(--g2048-nx), var(--g2048-ny)); }
    62% { transform: translate(calc(var(--g2048-nx) * -.55), calc(var(--g2048-ny) * -.55)); }
    100% { transform: translate(0, 0); }
  }

  @keyframes g2048-banner-in {
    0% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.96); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  }

  .g2048-tile-face.is-new { animation: g2048-spawn .21s cubic-bezier(.2, .8, .3, 1) both; }
  .g2048-tile-face.is-merge { animation: g2048-merge .24s cubic-bezier(.3, .7, .3, 1); }
  .g2048-score-num.is-pulse { animation: g2048-score-pulse .32s cubic-bezier(.3, .7, .3, 1); }
  .g2048-score-card.is-hot { animation: g2048-card-hot .5s ease; }
  .g2048-float { animation: g2048-float-up .94s cubic-bezier(.2, .7, .4, 1) both; }
  .g2048-board.is-nudge { animation: g2048-nudge .22s ease; }
  .g2048-banner.is-on { animation: g2048-banner-in .26s cubic-bezier(.2, .8, .3, 1) both; }
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
  .g2048-machine { width: min(100%, 520px); }
}

@media (max-width: 900px) {
  .g2048-machine { width: min(100%, 600px); }
  .g2048-score-card .g2048-score-num { font-size: 52px; }
}

@media (max-width: 600px) {
  .g2048-stage { padding: 12px 8px 14px; }
  .g2048-machine { width: 100%; gap: 9px; }
  .g2048-marquee-en { font-size: 8px; letter-spacing: .28em; text-indent: .28em; }
  .g2048-marquee-plate { display: none; }
  .g2048-frame { padding: 7px; border-radius: 12px; }
  .g2048-frame::before { inset: 3px; border-radius: 9px; }
  .g2048-screw { width: 6px; height: 6px; }
  .g2048-screw.is-tl, .g2048-screw.is-tr { top: 4px; }
  .g2048-screw.is-tl, .g2048-screw.is-bl { left: 4px; }
  .g2048-screw.is-tr, .g2048-screw.is-br { right: 4px; }
  .g2048-screw.is-bl, .g2048-screw.is-br { bottom: 4px; }
  .g2048-board { border-radius: 7px; }
  .g2048-cell { border-radius: 5px; }
  .g2048-tile-face { border-radius: 5px; }
  .g2048-tile-face::before { inset: 2px; border-radius: 3px; }
  .g2048-plinth { display: none; }
  .g2048-banner { top: 44px; font-size: 10px; padding: 5px 10px; }
  .g2048-over-panel, .g2048-win-panel { width: min(100%, 268px); padding: 17px 16px 15px; }
  .g2048-over-panel h3 { font-size: 20px; }
  .g2048-win-num { font-size: 42px; }
  .g2048-over-actions .btn, .g2048-win-actions .btn { min-height: 31px; font-size: 11px; }
  .g2048-score-num { font-size: 40px; }
  .g2048-side .paper-card { padding: 13px 13px 12px; }
}