:root {
  /* 页面（黑底） */
  --page-bg: #000000;
  --page-fg: #f4f4f5;
  --page-muted: #9ca3af;

  /* 涂鸦：纸本 / 马克笔 */
  --shell: #fff9e8;
  --shell-deep: #ffecc8;
  --shell-shadow: #2a2520;
  --well: #fff3d4;
  --well-inset: #ffe8b8;

  /* 「屏幕」→ 便签 / 画框 */
  --lcd-bg: #fffef6;
  --lcd-glow: #fff4d4;
  --lcd-text: #1a1a1e;
  --lcd-dim: #5c5a55;
  --led: #e63946;

  --ink: #1c1c22;
  --marker-pink: #ff6b9d;
  --marker-blue: #339af0;
  --marker-green: #51cf66;
  --marker-yellow: #ffd43b;
  --sketch-shadow: 5px 5px 0 rgba(28, 28, 34, 0.88);
  --sketch-shadow-soft: 4px 4px 0 rgba(28, 28, 34, 0.55);
  --radius-doodle: 255px 18px 240px 18px / 18px 235px 18px 255px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

  /**
   * 自适应尺度：随 vmin 增长，手机约 1～1.05，横屏/平板/桌面更大
   * 用于间距、圆角、部分字号
   */
  --ui-scale: clamp(1, 0.35vmin + 0.72, 1.38);
  --cell-gap: clamp(5px, 1.15vmin, 12px);
  /* 正方形键帽圆角（与 .cell-cap overflow 裁剪图片一致） */
  --cap-radius: clamp(10px, 2vmin, 16px);
  --device-pad-x: clamp(10px, 2.4vmin, 22px);
  --device-pad-y: clamp(10px, 2.2vmin, 24px);
  --device-radius: clamp(22px, 4.5vmin, 40px);
  --board-pad: clamp(5px, 1.2vmin, 14px);
  --board-max-w: min(100%, min(96vw, 78vmin, 720px));
  --board-max-h: min(82dvh, min(74vmin, 640px));
}

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

html,
body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  background-color: var(--page-bg);
  background-image: radial-gradient(
    circle at 50% -15%,
    rgba(255, 255, 255, 0.07) 0%,
    transparent 52%
  );
  color: var(--page-fg);
  font-family:
    "ZCOOL KuaiLe",
    "Patrick Hand",
    "PingFang SC",
    "Microsoft YaHei",
    system-ui,
    sans-serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

.app.device {
  width: min(
    100%,
    calc(100vw - max(8px, var(--safe-x) * 2))
  );
  max-width: min(98vw, 720px);
  margin: max(4px, var(--safe-top)) auto max(6px, var(--safe-bottom));
  min-height: 100dvh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: var(--device-pad-y) var(--device-pad-x) calc(var(--device-pad-y) + var(--safe-bottom));
  background: transparent;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

/* —— HUD：小条 + 主屏幕 —— */
.hud.device__top {
  margin-bottom: clamp(6px, 1.4vmin, 14px);
}

.lcd {
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.lcd--status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(6px, 1.2vmin, 11px) clamp(10px, 1.8vmin, 14px);
  margin-bottom: clamp(5px, 1vmin, 10px);
  border-radius: 0;
}

.lcd__brand {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.6vmin, 14px);
  min-width: 0;
}

.lcd__logo {
  width: clamp(28px, 7vmin, 42px);
  height: clamp(28px, 7vmin, 42px);
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  border-radius: clamp(8px, 1.6vmin, 12px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.lcd__label {
  font-family: "Patrick Hand", "ZCOOL KuaiLe", cursive;
  font-size: clamp(1.05rem, 3vmin, 1.5rem);
  letter-spacing: 0.06em;
  color: var(--page-muted);
  transform: rotate(-0.4deg);
}

.lcd__led {
  width: clamp(11px, 2vmin, 16px);
  height: clamp(11px, 2vmin, 16px);
  border-radius: 50%;
  background: var(--marker-green);
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 10px rgba(81, 207, 102, 0.45);
}

.lcd--main {
  padding: clamp(8px, 1.6vmin, 16px) clamp(10px, 1.8vmin, 18px) clamp(10px, 1.8vmin, 18px);
  border-radius: 0;
}

.lcd__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(8px, 1.5vmin, 14px);
}

.lcd__row--level {
  margin-bottom: clamp(5px, 1vmin, 10px);
  padding-bottom: clamp(5px, 1vmin, 10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.lcd__row--scores {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(8px, 1.5vmin, 16px);
  align-items: start;
}

.lcd__row--scores .lcd__metric--target {
  justify-self: end;
  text-align: right;
}

.lcd__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lcd__hint {
  font-size: clamp(0.78rem, 2vmin, 1rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--page-muted);
  opacity: 0.98;
}

.lcd__num {
  font-family: "ZCOOL KuaiLe", "Patrick Hand", cursive;
  font-size: clamp(1.85rem, 5.5vmin, 3rem);
  line-height: 1;
  color: var(--page-fg);
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.85),
    2px 2px 0 var(--marker-yellow);
  font-variant-numeric: tabular-nums;
}

.lcd__num--wide {
  font-size: clamp(1.45rem, 4.2vmin, 2.45rem);
  word-break: break-all;
}

/* —— 棋盘凹槽 —— */
.board-wrap.device__screen-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.board-well {
  width: 100%;
  max-width: var(--board-max-w);
  padding: var(--board-pad);
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.board {
  display: grid;
  gap: var(--cell-gap);
  /*
   * 正方形棋盘：边长取 min(父宽, 最大高度)，避免「宽 100% + max-height 压高度」导致整盘变成长方形、格子非方。
   * 8×8 时 content 区仍为正方形，与 gap 无关。
   */
  width: min(100%, var(--board-max-h));
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  max-height: var(--board-max-h);
  margin-inline: auto;
  box-sizing: border-box;
  min-height: 0;
  touch-action: manipulation;
  padding: clamp(2px, 0.55vmin, 7px);
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* —— 格子：透明底，键帽在 .cell-cap —— */
.cell {
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

.cell-cap {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--cap-radius);
  overflow: hidden;
  display: block;
  position: relative;
  box-sizing: border-box;
  padding: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  border: 0;
  /* 弱机：单层柔和阴影，无描边 */
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

/* 图片铺满正方形键帽；cover 裁切 + 父级圆角与 overflow 裁剪 */
.cell-cap .cell-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.12s ease;
}

.cell:not(.empty) .cell-cap {
  background: transparent;
}

.cell:not(.empty):active .cell-cap {
  transform: translateY(4px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.cell:not(.empty):active .cell-img {
  transform: scale(0.96);
}

.cell.preview {
  z-index: 2;
}

.cell.preview .cell-cap {
  transform: translateY(-2px) rotate(-0.8deg);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.5),
    0 0 0 3px var(--marker-pink);
}

.cell.empty {
  visibility: hidden;
  pointer-events: none;
}

.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.btn-key {
  padding: clamp(18px, 4vmin, 28px) clamp(34px, 8vmin, 64px);
  border-radius: 255px 20px 240px 20px / 20px 245px 20px 255px;
  font-size: clamp(1.1rem, 3.4vmin, 1.38rem);
  min-height: clamp(58px, 12vmin, 76px);
  color: var(--ink);
  background: #fffef6;
  border: 0;
  box-shadow: 4px 4px 0 var(--ink);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.btn-key:active {
  transform: translateY(3px);
  box-shadow: 1px 1px 0 var(--ink);
}

.btn-primary.btn-key {
  color: var(--ink);
  background: var(--marker-blue);
  border: 0;
  box-shadow: 4px 4px 0 var(--ink);
}

.btn-primary.btn-key:active {
  box-shadow: 1px 1px 0 var(--ink);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(80px, calc(12dvh + env(safe-area-inset-bottom, 0px)));
  transform: translateX(-50%) rotate(-0.6deg);
  background: var(--marker-yellow);
  color: var(--ink);
  border-radius: 240px 18px 255px 18px / 18px 250px 18px 240px;
  border: 3px solid var(--ink);
  padding: clamp(12px, 2.2vmin, 18px) clamp(18px, 3vmin, 28px);
  font-size: clamp(0.88rem, 2.1vmin, 1.05rem);
  font-weight: 700;
  z-index: 50;
  pointer-events: none;
  max-width: min(92vw, 480px);
  text-align: center;
  line-height: 1.4;
  box-shadow: var(--sketch-shadow);
  font-family: "ZCOOL KuaiLe", "Patrick Hand", sans-serif;
}

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  margin: 0;
  /* 与 level-splash 一致：黑底上的遮罩 */
  background: radial-gradient(
    ellipse 90% 75% at 50% 40%,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.88) 100%
  );
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.overlay.is-open {
  display: flex;
}

/* 过关全屏动效：当前关卡 + 本关目标（与 HUD「目标」一致） */
.level-splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  pointer-events: none;
  background: radial-gradient(
    ellipse 90% 75% at 50% 40%,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.85) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

.level-splash[hidden] {
  display: none !important;
}

.level-splash.is-visible {
  pointer-events: auto;
  opacity: 1;
}

.level-splash__card {
  text-align: center;
  max-width: min(90vw, 400px);
  padding: clamp(22px, 4vmin, 36px) clamp(20px, 3.5vmin, 32px);
  border-radius: 255px 22px 245px 20px / 22px 250px 20px 255px;
  background: linear-gradient(168deg, #fffef8 0%, #ffe8f0 55%, #fff4d4 100%);
  color: var(--lcd-text);
  border: 3px solid var(--ink);
  box-shadow: var(--sketch-shadow), 0 0 0 2px rgba(255, 255, 255, 0.7) inset;
  transform: scale(0.82) rotate(-1deg);
  opacity: 0;
  transition:
    transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1),
    opacity 0.35s ease;
}

.level-splash.is-visible .level-splash__card {
  transform: scale(1) rotate(0.4deg);
  opacity: 1;
}

.level-splash__kicker {
  margin: 0 0 clamp(8px, 1.5vmin, 12px);
  font-size: clamp(0.82rem, 2.1vmin, 1rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--lcd-dim);
}

.level-splash__level {
  margin: 0 0 clamp(14px, 2.2vmin, 20px);
  font-size: clamp(1.05rem, 2.8vmin, 1.35rem);
  font-weight: 800;
  color: var(--lcd-text);
  line-height: 1.35;
}

.level-splash__level-num {
  font-family: "ZCOOL KuaiLe", cursive;
  font-size: clamp(2.4rem, 9vmin, 3.6rem);
  line-height: 1;
  color: var(--led);
  text-shadow:
    3px 3px 0 var(--marker-yellow),
    -1px -1px 0 #fff;
  vertical-align: middle;
}

.level-splash__target-label {
  margin: 0 0 6px;
  font-size: clamp(0.82rem, 2vmin, 0.95rem);
  font-weight: 700;
  color: var(--lcd-dim);
  letter-spacing: 0.06em;
}

.level-splash__target-num {
  margin: 0 0 clamp(10px, 1.8vmin, 14px);
  font-family: "ZCOOL KuaiLe", cursive;
  font-size: clamp(1.65rem, 5vmin, 2.35rem);
  line-height: 1.2;
  color: var(--lcd-text);
  text-shadow: 2px 2px 0 var(--marker-blue);
  font-variant-numeric: tabular-nums;
}

.level-splash__next {
  margin: 0;
  font-size: clamp(0.75rem, 1.85vmin, 0.88rem);
  font-weight: 600;
  color: var(--lcd-dim);
  line-height: 1.45;
  opacity: 0.92;
}

.level-splash__hint {
  margin: clamp(12px, 2vmin, 18px) 0 0;
  font-size: clamp(0.72rem, 1.75vmin, 0.85rem);
  color: rgba(92, 90, 85, 0.85);
}

/* 弹窗：与 level-splash 同系便签卡 */
.modal {
  position: relative;
  background: linear-gradient(168deg, #fffef8 0%, #e7f5ff 48%, #fff9e0 100%);
  border-radius: 250px 20px 255px 22px / 22px 248px 20px 252px;
  border: 3px solid var(--ink);
  padding: clamp(16px, 2.6vmin, 24px) clamp(16px, 2.6vmin, 22px) clamp(18px, 2.8vmin, 26px);
  max-width: min(92vw, 400px);
  width: min(100%, 400px);
  flex: 0 0 auto;
  text-align: center;
  color: var(--lcd-text);
  box-shadow: var(--sketch-shadow), 0 0 0 2px rgba(255, 255, 255, 0.65) inset;
  transform: rotate(-0.5deg);
}

.modal-title {
  margin: 0 0 clamp(12px, 2vmin, 18px);
  font-size: clamp(1rem, 2.8vmin, 1.28rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--lcd-text);
  letter-spacing: 0.06em;
  word-break: break-word;
  text-shadow: 2px 2px 0 var(--marker-pink);
}

.modal-body {
  margin: 0 0 clamp(18px, 2.6vmin, 26px);
  line-height: 1.6;
  font-size: clamp(0.88rem, 2.1vmin, 1.02rem);
  font-weight: 600;
  word-break: break-word;
  color: var(--lcd-text);
  opacity: 0.92;
}

.modal--no-body .modal-title {
  margin-bottom: clamp(16px, 2.8vmin, 22px);
}

.modal--no-body .modal-body {
  display: none;
  margin: 0;
}

/* 恭喜过关彩蛋：弹出 + 光晕呼吸 + 标题微闪 + 顶饰星星 */
.modal--celebrate {
  overflow: visible;
  animation:
    modalCelebratePop 0.68s cubic-bezier(0.34, 1.45, 0.64, 1) both,
    modalCelebrateGlow 2.4s ease-in-out infinite 0.65s;
}

.modal--celebrate::before {
  content: "✦ · ★ · ✦";
  position: absolute;
  left: 50%;
  top: clamp(-14px, -2vmin, -8px);
  transform: translateX(-50%);
  font-size: clamp(0.65rem, 1.6vmin, 0.8rem);
  letter-spacing: 0.35em;
  color: var(--marker-green);
  text-shadow:
    2px 2px 0 var(--ink),
    0 0 12px rgba(81, 207, 102, 0.55);
  pointer-events: none;
  white-space: nowrap;
  animation: modalCelebrateStars 1.5s ease-in-out infinite alternate;
}

.modal--celebrate .modal-title {
  animation: modalCelebrateTitle 2s ease-in-out infinite;
  text-shadow:
    2px 2px 0 var(--marker-yellow),
    -1px -1px 0 #fff;
}

@keyframes modalCelebratePop {
  0% {
    transform: scale(0.86);
    opacity: 0;
  }
  72% {
    transform: scale(1.04);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes modalCelebrateGlow {
  0%,
  100% {
    box-shadow:
      var(--sketch-shadow),
      0 0 0 2px rgba(255, 255, 255, 0.65) inset,
      0 0 22px rgba(255, 107, 157, 0.35);
  }
  50% {
    box-shadow:
      5px 5px 0 rgba(28, 28, 34, 0.88),
      0 0 0 2px rgba(255, 255, 255, 0.75) inset,
      0 0 40px rgba(51, 154, 240, 0.45),
      0 0 56px rgba(255, 212, 59, 0.4);
  }
}

@keyframes modalCelebrateStars {
  0% {
    opacity: 0.65;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-3px);
  }
}

@keyframes modalCelebrateTitle {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08) drop-shadow(0 0 8px rgba(255, 212, 59, 0.65));
  }
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vmin, 14px);
  width: 100%;
}

.modal-actions .btn {
  width: 100%;
  min-height: clamp(60px, 12vmin, 78px);
  line-height: 1.25;
  white-space: normal;
}

/* 弹窗主按钮：荧光绿涂鸦块 */
.overlay .modal .btn-primary.btn-key {
  color: var(--ink);
  background: var(--marker-green);
  border: 0;
  box-shadow: 4px 4px 0 var(--ink);
}

.overlay .modal .btn-primary.btn-key:active {
  box-shadow: 1px 1px 0 var(--ink);
}

/*
 * 手机端：棋盘尽量贴屏幕两侧，并略抬棋盘边长（vmin / dvh）
 * 与刘海安全区仍由 env(safe-area-*) + .app padding 负责
 */
@media screen and (max-width: 600px) {
  :root {
    --device-pad-x: clamp(0px, 0.5vmin, 4px);
    --device-pad-y: clamp(3px, 1vmin, 10px);
    --board-pad: clamp(0px, 0.2vmin, 3px);
    --board-max-w: min(100%, min(100vw, 88vmin, 720px));
    --board-max-h: min(88dvh, min(84vmin, 700px));
  }

  .app.device {
    width: min(100%, calc(100vw - max(0px, var(--safe-x) * 2)));
    max-width: 100%;
    margin: max(0px, var(--safe-top)) auto max(2px, var(--safe-bottom));
  }

  .board {
    padding: clamp(0px, 0.25vmin, 3px);
  }
}

/* 窄屏手机：再加大触控区与字号（弹窗按钮等） */
@media (max-width: 480px) {
  .btn-key {
    padding: clamp(20px, 4.8vmin, 28px) clamp(20px, 9vw, 44px);
    font-size: clamp(1.14rem, 4.2vmin, 1.4rem);
    min-height: clamp(62px, 14vmin, 82px);
  }

  .modal-actions .btn {
    min-height: clamp(64px, 14vmin, 84px);
  }

  .modal-actions {
    gap: clamp(10px, 2.2vmin, 16px);
  }
}

@media (min-width: 400px) {
  .modal-actions {
    flex-direction: row;
    justify-content: stretch;
    flex-wrap: wrap;
  }

  .modal-actions .btn {
    flex: 1 1 calc(50% - 6px);
    min-width: clamp(120px, 22vw, 200px);
  }
}

/* 大屏 Web：再放宽整机宽度上限，棋盘用更大 vmin */
@media (min-width: 900px) {
  :root {
    --board-max-w: min(100%, min(82vw, 80vmin, 800px));
    --board-max-h: min(76dvh, min(64vmin, 660px));
  }

  .app.device {
    max-width: min(90vw, 800px);
  }
}

/* 横屏手机：高度紧张，略压棋盘高度、保证一屏可操作；左右留白与竖屏手机一致收紧 */
@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --device-pad-x: clamp(0px, 0.5vmin, 4px);
    --device-pad-y: clamp(2px, 0.85vmin, 8px);
    --board-pad: clamp(0px, 0.2vmin, 3px);
    --board-max-h: min(66dvh, 60vmin);
  }

  .app.device {
    min-height: auto;
    width: min(100%, calc(100vw - max(0px, var(--safe-x) * 2)));
    max-width: 100%;
    margin: max(0px, var(--safe-top)) auto max(2px, var(--safe-bottom));
  }

  .board {
    padding: clamp(0px, 0.25vmin, 3px);
  }
}