/* 9×9 方块拼图 —— 蓝色渐变背景 + 立体果冻方块 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* 格子边长：随窗口收缩，桌面封顶 46px（盘面宽高都是 10.72cs） */
  --cs: clamp(24px, min(calc((100vw - 40px) / 10.72), calc((100vh - 322px) / 10.72)), 46px);
  --gap: calc(var(--cs) * 0.14);
  --pad: calc(var(--cs) * 0.3);
  --radius: calc(var(--cs) * 0.21);
  --board-w: calc(9 * var(--cs) + 8 * var(--gap) + 2 * var(--pad));

  --ink: #f4f7ff;
  --gold: #ffcf4f;
  --mint: #6ff0d4;
}

@supports (height: 100dvh) {
  :root {
    --cs: clamp(24px, min(calc((100vw - 40px) / 10.72), calc((100dvh - 322px) / 10.72)), 46px);
  }
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: none;
  color: var(--ink);
  font-family: "Nunito", "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Microsoft YaHei",
    system-ui, sans-serif;
  background: radial-gradient(125% 105% at 16% -10%, #6a82fa 0%, #4d62ec 32%, #3b4bdd 62%, #2f3ac6 100%);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

body::before {
  /* 左上角一团柔光，和参考图的打光一致 */
  content: "";
  position: fixed;
  inset: -20% 40% 55% -25%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* ---------------- 布局 ---------------- */

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--cs) * 0.3);
  padding: 8px 0;
}

/* 宽屏：盘面右侧的动作栏（新局 / 重开 / 模式），窄屏收进设置面板 */
.side-actions {
  position: absolute;
  left: 100%;
  /* 精确对齐盘面上沿：具体像素由 alignSideActions() 在布局后按 board.offsetTop 写进来 */
  top: 0;
  margin-left: calc(var(--cs) * 0.55);
  display: flex;
  flex-direction: column;
  gap: calc(var(--cs) * 0.18);
  width: calc(var(--cs) * 3);
}

.side-btn {
  border: 0;
  padding: calc(var(--cs) * 0.24) calc(var(--cs) * 0.18);
  border-radius: calc(var(--cs) * 0.22);
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-size: calc(var(--cs) * 0.28);
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease, transform 0.1s ease, color 0.15s ease;
}

.side-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.side-btn:active {
  transform: translateY(1px);
}

.side-btn.mode.on {
  background: linear-gradient(180deg, #ffffff 0%, #eef1fb 100%);
  color: #26305a;
  box-shadow: 0 6px 14px -6px rgba(8, 11, 42, 0.6), inset 0 -2px 0 rgba(0, 0, 0, 0.06);
}

.side-sep {
  height: 1px;
  margin: calc(var(--cs) * 0.04) 0;
  background: rgba(255, 255, 255, 0.18);
}

/* 侧栏底部的新手说明 */
.side-tip {
  margin: calc(var(--cs) * 0.22) 0 0;
  padding-top: calc(var(--cs) * 0.22);
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
  font-size: calc(var(--cs) * 0.21);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.52);
  text-align: left;
  letter-spacing: 0.02em;
}

@media (max-width: 860px) {
  .side-actions {
    display: none;
  }
}

.hud {
  width: var(--board-w);
  display: flex;
  flex-direction: column;
  gap: calc(var(--cs) * 0.06);
}

.hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.best {
  display: flex;
  align-items: center;
  gap: calc(var(--cs) * 0.14);
  color: var(--gold);
  font-size: calc(var(--cs) * 0.36);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 6px rgba(12, 16, 48, 0.35);
}

.crown {
  width: calc(var(--cs) * 0.42);
  height: calc(var(--cs) * 0.42);
  fill: var(--gold);
  filter: drop-shadow(0 2px 3px rgba(10, 14, 44, 0.35));
}

/* 右上角的文字按钮：本机排名 / 全服排名 / 设置 */
.text-btn {
  border: 0;
  padding: calc(var(--cs) * 0.1) calc(var(--cs) * 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  font-family: inherit;
  font-size: calc(var(--cs) * 0.24);
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.text-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.text-btn:active {
  transform: scale(0.96);
}

/* 当前看的是哪个榜 */
.text-btn.on {
  background: linear-gradient(180deg, #ffffff 0%, #eef1fb 100%);
  color: #26305a;
}

.score-row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--cs) * 0.28);
}

.score {
  font-size: calc(var(--cs) * 1.02);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-shadow: 0 3px 10px rgba(10, 14, 46, 0.32);
  transform-origin: left bottom;
}

.score.bump {
  animation: scoreBump 0.22s ease-out;
}

@keyframes scoreBump {
  40% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

/* 等级徽标：挂在分数旁边 */
.lv-chip {
  align-self: center;
  padding: calc(var(--cs) * 0.06) calc(var(--cs) * 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffe27a;
  font-size: calc(var(--cs) * 0.26);
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 消线条数：贴分数行右端，常驻小字 */
.lines {
  margin-left: auto;
  font-size: calc(var(--cs) * 0.3);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform-origin: right center;
  transition: color 0.2s ease;
}

.lines.bump {
  animation: linesBump 0.3s ease-out;
}

@keyframes linesBump {
  40% {
    transform: scale(1.16);
    color: #fff;
  }
}

/* ---------------- 盘面 ---------------- */

.board {
  position: relative;
  width: var(--board-w);
  padding: var(--pad);
  touch-action: none;
  border-radius: calc(var(--cs) * 0.46);
  background: linear-gradient(180deg, #232c52 0%, #1b2242 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -3px 8px rgba(0, 0, 0, 0.3),
    0 20px 36px -12px rgba(8, 11, 42, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.board.flash {
  animation: boardFlash 0.5s ease;
}

@keyframes boardFlash {
  35% {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), inset 0 -3px 8px rgba(0, 0, 0, 0.3),
      0 20px 36px -12px rgba(8, 11, 42, 0.55), 0 0 34px rgba(180, 210, 255, 0.55);
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--n, 9), var(--cs));
  grid-auto-rows: var(--cs);
  gap: var(--gap);
}

.cell {
  position: relative;
  border-radius: var(--radius);
  background: #1b2343;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* 九宫格：交替区块浅一号，让 3×3 的分组一眼能看出来 */
.cell.lt {
  background: #2d3760;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.42), inset 0 -1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

/* 3D 果冻方块 */
.tile {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(158deg, var(--c1) 0%, var(--c2) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 5px rgba(0, 0, 0, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 3px rgba(6, 9, 32, 0.3);
  overflow: hidden;
}

.tile.landing {
  animation: tileLand 0.16s ease-out;
}

@keyframes tileLand {
  from {
    transform: scale(0.84);
    opacity: 0.65;
  }
}

.tile::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 6%;
  height: 34%;
  border-radius: 45% 45% 50% 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* 拖放时：这一下会消掉的既有方块提前亮起来（保留本色，只加白边和光晕） */
.tile.will-clear,
.drag-piece.will-clear .tile {
  filter: brightness(1.06) saturate(1.08);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8), inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
    inset 0 -3px 5px rgba(0, 0, 0, 0.18), 0 0 18px 3px rgba(190, 225, 255, 0.55);
}

.tile.will-clear::after,
.drag-piece.will-clear .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04));
  animation: willClearPulse 1.1s ease-in-out infinite;
  pointer-events: none;
}

@keyframes willClearPulse {
  50% {
    opacity: 0.4;
  }
}

/* 手里这块本身也会参与消除，跟着一起发光 */
.drag-piece.will-clear {
  filter: drop-shadow(0 12px 16px rgba(6, 9, 36, 0.42)) drop-shadow(0 0 14px rgba(200, 230, 255, 0.7));
}

.tile.clearing {
  z-index: 3;
  animation: tileClear 0.46s cubic-bezier(0.34, 0.06, 0.2, 1) forwards;
}

/* 先鼓一下、闪一下，再缩掉 —— 太快看不清，也太廉价 */
@keyframes tileClear {
  0% {
    transform: scale(1);
    filter: brightness(1);
    opacity: 1;
  }
  14% {
    transform: scale(1.16);
    filter: brightness(1.85) saturate(1.35);
  }
  42% {
    transform: scale(1.12);
    filter: brightness(1.45) saturate(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0.18);
    filter: brightness(1.3);
    opacity: 0;
  }
}

/* 拖放时的落点预览：方块本身跟手，虚影负责标出落到哪几格 */
.cell.ghost::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(158deg, var(--g1), var(--g2));
  opacity: 0.42;
  /* 外发光：方块压在虚影上时，也能从边缘看到"会落在这里" */
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 0 0 2px rgba(255, 255, 255, 0.5),
    0 0 16px 3px rgba(190, 220, 255, 0.4);
}

.cell.ghost-bad::after {
  background: #ff5f6d;
  opacity: 0.34;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.38), 0 0 0 2px rgba(255, 95, 109, 0.45),
    0 0 16px 3px rgba(255, 95, 109, 0.35);
}

/* 提示虚影 */
.cell.hint::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(158deg, var(--g1), var(--g2));
  border: 2px dashed rgba(255, 255, 255, 0.85);
  opacity: 0.55;
  animation: hintPulse 1.1s ease-in-out infinite;
}

/* 还没轮到的步骤：淡淡一层，让玩家看得出「先放这块」 */
.cell.hint-other::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(158deg, var(--g1), var(--g2));
  border: 2px dashed rgba(255, 255, 255, 0.5);
  opacity: 0.24;
}

/* 当前这步要靠前面的步骤把位置腾出来：琥珀色斜纹提醒 */
.cell.hint-wait::after {
  border-color: rgba(255, 176, 40, 0.95);
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 176, 40, 0.45) 0 7px,
    rgba(18, 24, 58, 0.28) 7px 14px
  );
  animation: hintWaitPulse 1.2s ease-in-out infinite;
}

@keyframes hintWaitPulse {
  50% {
    opacity: 0.55;
  }
}

/* 步骤序号，挂在每块虚影的第一格上 */
.cell[data-hint]::before {
  content: attr(data-hint);
  position: absolute;
  left: -8%;
  top: -14%;
  z-index: 5;
  min-width: calc(var(--cs) * 0.34);
  padding: 0 calc(var(--cs) * 0.08);
  border-radius: 999px;
  background: rgba(8, 12, 34, 0.92);
  color: #ffe27a;
  font-size: calc(var(--cs) * 0.3);
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

@keyframes hintPulse {
  50% {
    opacity: 0.22;
  }
}

/* 加分飘字 */
.gain {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--cs) * 0.72);
  font-weight: 800;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 4px 14px rgba(6, 9, 34, 0.45);
}

.gain.show {
  animation: gainUp 1.8s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes gainUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.9);
  }
  6% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
  }
  /* 停住别急着褪，留够时间看清这一手拿了多少 */
  80% {
    opacity: 1;
    transform: translate(-50%, -24px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -48px) scale(1);
  }
}

/* 多线同消：分数翻金、字更大，别让人以为和消一条一样 */
.gain.bonus {
  font-size: calc(var(--cs) * 0.88);
  color: #ffe27a;
  text-shadow: 0 4px 18px rgba(255, 198, 60, 0.65), 0 2px 8px rgba(6, 9, 34, 0.5);
}

/* 倍率说明：3 线 ×9 */
.line-bonus {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--cs) * 0.34);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #ffd76b;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(255, 190, 60, 0.55), 0 2px 6px rgba(6, 9, 34, 0.55);
}

.line-bonus.show {
  animation: lineBonusUp 1.8s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes lineBonusUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.92);
  }
  6% {
    opacity: 1;
    transform: translate(-50%, -4px) scale(1.06);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -14px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -26px) scale(1);
  }
}

/* 盘面中央的连击飘字：连击在上、+分 在下，一起往上飘（和参考版同一个位置） */
.combo-float {
  position: absolute;
  left: 50%;
  top: 41%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--cs) * 0.56);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #ff8fb0;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 3px 10px rgba(255, 74, 128, 0.55), 0 2px 6px rgba(6, 9, 34, 0.5);
}

.combo-float.show {
  animation: comboFloat 2s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes comboFloat {
  0% {
    opacity: 0;
    transform: translate(-50%, 6px) scale(0.82);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -6px) scale(1.1);
  }
  18% {
    transform: translate(-50%, -8px) scale(1);
  }
  82% {
    opacity: 1;
    transform: translate(-50%, -16px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -44px) scale(1.02);
  }
}

/* ---------------- 托盘 ---------------- */

/* 托盘高度写死：托盘里换成什么块都不能改变它，否则整条 stage 重新居中、盘面会上下跳 */
.tray {
  width: var(--board-w);
  height: calc(var(--cs) * 2.4);
  display: flex;
  align-items: center;
  justify-content: space-around;
  touch-action: none;
}

.slot {
  width: 33%;
  height: 100%;
  display: grid;
  place-items: center;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.slot.lifting {
  opacity: 0.25;
  transform: translateY(2px);
}

.slot.hint .mini {
  animation: slotGlow 1.1s ease-in-out infinite;
  border-radius: calc(var(--cs) * 0.2);
}

@keyframes slotGlow {
  50% {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.75));
  }
}

.mini {
  /* 托盘里的格子边长：默认 0.66cs；竖四连/竖五连这种高块按高度收一档，
     保证最长的块也塞得进 2.4cs 的托盘，托盘高度不变 → 盘面不跟着跳 */
  --mc: min(
    calc(var(--cs) * 0.66),
    calc((var(--cs) * 2.28 - (var(--h) - 1) * var(--cs) * 0.05) / var(--h))
  );
  display: grid;
  grid-template-columns: repeat(var(--w), var(--mc));
  grid-auto-rows: var(--mc);
  gap: calc(var(--cs) * 0.05);
}

.mini-cell {
  position: relative;
}

.mini-cell .tile {
  border-radius: calc(var(--cs) * 0.12);
}

/* 新一波三块进托盘时做个轻微的入场 */
.slot.fresh .mini {
  animation: trayIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

@keyframes trayIn {
  from {
    opacity: 0;
    transform: scale(0.72) translateY(-4px);
  }
}

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

.actions {
  width: calc(var(--board-w) * 0.8);
  display: flex;
  gap: calc(var(--cs) * 0.26);
}

.btn {
  flex: 1;
  height: calc(var(--cs) * 1.04);
  border: 0;
  border-radius: calc(var(--cs) * 0.2);
  background: linear-gradient(180deg, #ffffff 0%, #eef1fb 100%);
  color: #2b3358;
  font-family: inherit;
  font-size: calc(var(--cs) * 0.38);
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 8px 18px -4px rgba(8, 11, 42, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.06);
  transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.btn:hover:not(:disabled) {
  box-shadow: 0 10px 22px -4px rgba(8, 11, 42, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.06);
}

.btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 4px 10px -4px rgba(8, 11, 42, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.06);
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 暂停遮罩：盖住整屏，暂停期间不计入游玩时间 */
.pause-veil {
  position: fixed;
  inset: 0;
  z-index: 28;
  display: grid;
  place-items: center;
  background: rgba(14, 20, 48, 0.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.pause-veil[hidden] {
  display: none;
}

.pause-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--cs) * 0.26);
  min-width: calc(var(--cs) * 5.2);
  padding: calc(var(--cs) * 0.8) calc(var(--cs) * 0.9);
  border-radius: calc(var(--cs) * 0.5);
  background: linear-gradient(180deg, #26305a 0%, #1c2444 100%);
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: panelIn 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.pause-card strong {
  font-size: calc(var(--cs) * 0.5);
  color: #ffe27a;
  letter-spacing: 0.12em;
}

.pause-card span {
  font-size: calc(var(--cs) * 0.25);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
}

.pause-card .btn {
  width: 100%;
  height: calc(var(--cs) * 0.9);
  margin-top: calc(var(--cs) * 0.1);
}

/* ---------------- 拖放层 ---------------- */

.drag-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.drag-piece {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  grid-template-columns: repeat(var(--dw), var(--dcell));
  grid-auto-rows: var(--dcell);
  gap: var(--dgap);
  filter: drop-shadow(0 12px 16px rgba(6, 9, 36, 0.42));
  will-change: transform;
}

.drag-piece .dc {
  position: relative;
}

.drag-piece .dc.on .tile {
  border-radius: calc(var(--dcell) * 0.17);
}

/* 放不下时：跟手悬空、整体偏红 */
.drag-piece.invalid {
  filter: drop-shadow(0 8px 12px rgba(255, 70, 90, 0.45)) saturate(0.55);
  opacity: 0.88;
}

/* ---------------- 弹层 ---------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(18, 24, 58, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.overlay[hidden] {
  display: none;
}

.sheet {
  min-width: calc(var(--cs) * 6);
  max-height: 88vh;
  overflow: auto;
  padding: calc(var(--cs) * 0.6) calc(var(--cs) * 0.8);
  border-radius: calc(var(--cs) * 0.5);
  text-align: center;
  background: linear-gradient(180deg, #26305a 0%, #1c2444 100%);
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: panelIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}

.sheet h1 {
  margin: 0 0 calc(var(--cs) * 0.3);
  font-size: calc(var(--cs) * 0.5);
  letter-spacing: 0.06em;
  color: #ffe27a;
}

.sheet h2 {
  margin: 0 0 calc(var(--cs) * 0.36);
  font-size: calc(var(--cs) * 0.42);
  letter-spacing: 0.08em;
}

.final-label {
  margin: 0;
  font-size: calc(var(--cs) * 0.28);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.14em;
}

.final-score {
  margin: 2px 0 calc(var(--cs) * 0.2);
  font-size: calc(var(--cs) * 0.94);
  font-weight: 800;
}

.final-best {
  margin: 0 0 calc(var(--cs) * 0.24);
  font-size: calc(var(--cs) * 0.3);
  color: var(--gold);
  font-weight: 700;
}

.final-line {
  margin: 0 0 calc(var(--cs) * 0.12);
  font-size: calc(var(--cs) * 0.28);
  color: rgba(255, 255, 255, 0.82);
}

.final-line.dim {
  margin-bottom: calc(var(--cs) * 0.4);
  color: rgba(255, 255, 255, 0.52);
}

/* 结算里的经验 / 升级 / 每日连胜 */
.final-xp {
  margin: 0 0 calc(var(--cs) * 0.1);
  font-size: calc(var(--cs) * 0.28);
  font-weight: 700;
  color: var(--mint);
}

.final-xp.levelup {
  color: var(--gold);
  animation: levelPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

@keyframes levelPop {
  40% {
    transform: scale(1.14);
  }
}

.final-streak {
  margin: 0 0 calc(var(--cs) * 0.34);
  font-size: calc(var(--cs) * 0.26);
  color: #ffb3a7;
  font-weight: 700;
}

/* 本局在历史榜上排第几 */
.final-rank {
  margin: 0 0 calc(var(--cs) * 0.1);
  font-size: calc(var(--cs) * 0.26);
  color: #9fd3ff;
  font-weight: 700;
}

/* ---------------- 等级条 / 每日连胜 ---------------- */

.progress {
  margin-bottom: calc(var(--cs) * 0.28);
  padding: calc(var(--cs) * 0.24) calc(var(--cs) * 0.3);
  border-radius: calc(var(--cs) * 0.3);
  background: rgba(9, 13, 38, 0.35);
}

.progress-top {
  display: flex;
  align-items: center;
  gap: calc(var(--cs) * 0.2);
  margin-bottom: calc(var(--cs) * 0.18);
}

.lv-badge {
  padding: calc(var(--cs) * 0.05) calc(var(--cs) * 0.2);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe27a, #ffc93c);
  color: #3a2d00;
  font-size: calc(var(--cs) * 0.24);
  font-weight: 900;
}

.lv-title {
  font-size: calc(var(--cs) * 0.26);
  font-weight: 700;
  color: #fff;
}

.lv-xp {
  margin-left: auto;
  font-size: calc(var(--cs) * 0.24);
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
}

.xp-bar {
  height: calc(var(--cs) * 0.15);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.xp-bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6ff0d4, #7b61ff);
  transition: width 0.35s ease;
}

.streak {
  margin-bottom: calc(var(--cs) * 0.28);
  padding: calc(var(--cs) * 0.24) calc(var(--cs) * 0.3);
  border-radius: calc(var(--cs) * 0.3);
  background: rgba(9, 13, 38, 0.35);
}

.streak-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: calc(var(--cs) * 0.18);
}

.streak-top strong {
  font-size: calc(var(--cs) * 0.26);
  color: #fff;
}

.streak-top span {
  font-size: calc(var(--cs) * 0.24);
  color: rgba(255, 255, 255, 0.55);
}

.streak-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--cs) * 0.1);
}

.streak-days .day {
  display: grid;
  place-items: center;
  height: calc(var(--cs) * 0.82);
  border-radius: calc(var(--cs) * 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.42);
  font-size: calc(var(--cs) * 0.22);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.streak-days .day.on {
  background: linear-gradient(180deg, #ffd66b, #ffab2e);
  color: #3a2d00;
}

.streak-days .day.today {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8);
}

.btn.primary {
  width: 100%;
  height: calc(var(--cs) * 0.94);
}

/* ---------------- 设置面板 ---------------- */

.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--cs) * 0.3);
  margin-bottom: calc(var(--cs) * 0.28);
}

.field-label {
  font-size: calc(var(--cs) * 0.3);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.12em;
}

.seg {
  display: flex;
  padding: 3px;
  border-radius: calc(var(--cs) * 0.28);
  background: rgba(9, 13, 38, 0.45);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

.seg button {
  border: 0;
  padding: calc(var(--cs) * 0.16) calc(var(--cs) * 0.3);
  border-radius: calc(var(--cs) * 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: calc(var(--cs) * 0.28);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.seg button.on {
  background: linear-gradient(180deg, #ffffff 0%, #e9edfb 100%);
  color: #26305a;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5);
}

.records {
  margin: calc(var(--cs) * 0.2) 0 calc(var(--cs) * 0.28);
  padding: calc(var(--cs) * 0.28) calc(var(--cs) * 0.3);
  border-radius: calc(var(--cs) * 0.3);
  background: rgba(9, 13, 38, 0.35);
  text-align: left;
}

/* 历史前十 */
.history {
  margin: 0 0 calc(var(--cs) * 0.28);
  padding: calc(var(--cs) * 0.24) calc(var(--cs) * 0.3);
  border-radius: calc(var(--cs) * 0.3);
  background: rgba(9, 13, 38, 0.35);
  text-align: left;
}

.history h3 {
  margin: 0 0 calc(var(--cs) * 0.2);
  font-size: calc(var(--cs) * 0.26);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em;
}

/* 排行榜弹层：本机 / 全服 */
.rank-sheet {
  min-width: calc(var(--cs) * 7.2);
  max-width: calc(var(--cs) * 9);
}

.rank-sheet h2 {
  margin-bottom: calc(var(--cs) * 0.3);
}

.rank-sheet .seg {
  width: fit-content;
  margin: 0 auto calc(var(--cs) * 0.32);
}

/* 弹层里十行全展开，不用内滚 */
.rank-sheet .his-list {
  max-height: none;
  gap: calc(var(--cs) * 0.16);
  margin-bottom: calc(var(--cs) * 0.3);
}

.rank-sheet .his-row {
  font-size: calc(var(--cs) * 0.3);
}

.rank-sheet .his-meta {
  font-size: calc(var(--cs) * 0.26);
}

.his-note {
  margin: calc(var(--cs) * 0.18) 0 0;
  font-size: calc(var(--cs) * 0.22);
  color: rgba(255, 255, 255, 0.5);
}

.his-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--cs) * 0.12);
  margin: 0;
  padding: 0;
  list-style: none;
  /* 十行全放得下；屏幕太矮时它自己滚，别把整个面板撑爆 */
  max-height: calc(var(--cs) * 5.1);
  overflow-y: auto;
  scrollbar-width: thin;
}

.his-row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--cs) * 0.2);
  font-size: calc(var(--cs) * 0.24);
}

.his-rank {
  width: calc(var(--cs) * 0.46);
  flex: none;
  text-align: center;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
}

.his-row.top1 .his-rank {
  color: #ffd76b;
}

.his-score {
  min-width: calc(var(--cs) * 1.9);
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.his-row.top1 .his-score {
  color: #ffe27a;
}

.his-meta {
  margin-left: auto;
  font-size: calc(var(--cs) * 0.22);
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.his-empty {
  margin: 0;
  font-size: calc(var(--cs) * 0.24);
  color: rgba(255, 255, 255, 0.45);
}

.records h3 {
  margin: 0 0 calc(var(--cs) * 0.18);
  font-size: calc(var(--cs) * 0.26);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em;
}

.records dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--cs) * 0.14) calc(var(--cs) * 0.3);
  margin: 0;
}

.records dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--cs) * 0.2);
}

.records dt {
  font-size: calc(var(--cs) * 0.26);
  color: rgba(255, 255, 255, 0.55);
}

.records dd {
  margin: 0;
  font-size: calc(var(--cs) * 0.32);
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.sheet-actions {
  display: flex;
  gap: calc(var(--cs) * 0.22);
  margin-bottom: calc(var(--cs) * 0.18);
}

.sheet-actions .btn {
  height: calc(var(--cs) * 0.86);
  font-size: calc(var(--cs) * 0.32);
  letter-spacing: 0.04em;
}

.sheet-close {
  width: 100%;
  border: 0;
  padding: calc(var(--cs) * 0.16);
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: calc(var(--cs) * 0.28);
  cursor: pointer;
}

.sheet-close:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------------- 顶部小徽标 / 横幅 / 提示条 / toast ---------------- */

.hud-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--cs) * 0.18);
}

.chip {
  padding: calc(var(--cs) * 0.09) calc(var(--cs) * 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: calc(var(--cs) * 0.24);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.chip[hidden] {
  display: none;
}

.banner {
  position: absolute;
  left: 50%;
  top: 21%;
  transform: translate(-50%, -50%);
  font-size: calc(var(--cs) * 0.72);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff6c9;
  text-shadow: 0 4px 18px rgba(255, 214, 102, 0.55), 0 6px 22px rgba(6, 9, 34, 0.55);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

.banner.show {
  animation: bannerPop 1.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}

@keyframes bannerPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  32% {
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -78%) scale(1.02);
  }
}

.hint-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 26;
  display: flex;
  align-items: center;
  gap: calc(var(--cs) * 0.3);
  max-width: min(560px, calc(100vw - 24px));
  padding: calc(var(--cs) * 0.24) calc(var(--cs) * 0.34);
  border-radius: calc(var(--cs) * 0.34);
  background: rgba(20, 26, 58, 0.94);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: panelIn 0.2s ease;
}

.hint-bar[hidden] {
  display: none;
}

.hint-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hint-copy strong {
  font-size: calc(var(--cs) * 0.28);
  color: #ffe27a;
  letter-spacing: 0.04em;
}

.hint-copy span {
  font-size: calc(var(--cs) * 0.26);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.35;
}

.hint-actions {
  display: flex;
  gap: calc(var(--cs) * 0.14);
  flex-shrink: 0;
}

.mini-btn {
  border: 0;
  padding: calc(var(--cs) * 0.14) calc(var(--cs) * 0.26);
  border-radius: calc(var(--cs) * 0.2);
  background: linear-gradient(180deg, #ffffff 0%, #eaeefb 100%);
  color: #26305a;
  font-family: inherit;
  font-size: calc(var(--cs) * 0.26);
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s ease, opacity 0.15s ease;
}

.mini-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.mini-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.mini-btn.ghost {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  z-index: 40;
  padding: calc(var(--cs) * 0.18) calc(var(--cs) * 0.34);
  border-radius: 999px;
  background: rgba(12, 16, 42, 0.9);
  color: #fff;
  font-size: calc(var(--cs) * 0.26);
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 12px 26px -8px rgba(0, 0, 0, 0.6);
  animation: panelIn 0.18s ease;
}

.toast[hidden] {
  display: none;
}

@media (max-width: 520px) {
  .hint-bar {
    flex-direction: column;
    align-items: stretch;
    bottom: 8px;
  }
  .hint-actions {
    justify-content: flex-end;
  }
}

@media (max-height: 620px) {
  .stage {
    gap: calc(var(--cs) * 0.22);
  }
}