/* ================= 设计令牌（来自 pencil-welcome.pen） ================= */
:root {
  --sn-bg: #060b08;
  --sn-surface: #0c1410;
  --sn-surface-2: #101b14;
  --sn-border: #223428;
  --sn-border-strong: #2e4636;
  --sn-text: #eaf7ee;
  --sn-muted: #7c9a88;
  --sn-green: #4ade80;
  --sn-green-bright: #7df29e;
  --sn-green-deep: #1e7a44;
  --sn-ink: #06280f;
  --sn-food: #ff6b5e;
  --sn-gold: #ffc857;
  --sn-grid: #0f1913;
  --font-sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "Cascadia Code", Consolas, monospace;
}

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

html,
body {
  height: 100%;
}

body {
  background: var(--sn-bg);
  color: var(--sn-text);
  font-family: var(--font-sans);
  overflow: hidden;
  overscroll-behavior: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

svg {
  display: block;
}

/* ================= 通用屏幕结构 ================= */
.screen {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  height: 100dvh;
  padding: 40px 48px;
  overflow: hidden;
  animation: screenIn 0.5s ease both;
}
.screen.active {
  display: flex;
}

@keyframes screenIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ================= 背景装饰：霓虹光斑 ================= */
.deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.streak {
  position: absolute;
  border-radius: 99px;
  background: var(--sn-green);
  filter: blur(40px);
}

.glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 62% 34% at 50% 42%,
    rgba(74, 222, 128, 0.09),
    transparent 70%
  );
}
.glow-red {
  background: radial-gradient(
    ellipse 62% 32% at 50% 44%,
    rgba(255, 107, 94, 0.08),
    transparent 70%
  );
}

#screen-start .s1 {
  left: 8%;
  top: 15%;
  width: 62%;
  height: 5px;
  opacity: 0.3;
  transform: rotate(7deg);
}
#screen-start .s2 {
  left: 26%;
  top: 84%;
  width: 53%;
  height: 4px;
  background: var(--sn-green-bright);
  opacity: 0.2;
  transform: rotate(-9deg);
  filter: blur(44px);
}
#screen-start .s3 {
  left: -4%;
  top: 51%;
  width: 73%;
  height: 6px;
  opacity: 0.14;
  transform: rotate(5deg);
  filter: blur(52px);
}

#screen-game .s1 {
  left: 5%;
  top: 17%;
  width: 57%;
  height: 5px;
  opacity: 0.26;
  transform: rotate(6deg);
}
#screen-game .s2 {
  left: 37%;
  top: 81%;
  width: 50%;
  height: 4px;
  background: var(--sn-green-bright);
  opacity: 0.18;
  transform: rotate(-8deg);
  filter: blur(44px);
}
#screen-game .s3 {
  left: -6%;
  top: 55%;
  width: 70%;
  height: 6px;
  opacity: 0.12;
  transform: rotate(5deg);
  filter: blur(52px);
}

#overlay-over .s1 {
  left: 7%;
  top: 20%;
  width: 61%;
  height: 5px;
  opacity: 0.22;
  transform: rotate(6deg);
}
#overlay-over .s2 {
  left: 29%;
  top: 80%;
  width: 51%;
  height: 4px;
  background: var(--sn-food);
  opacity: 0.16;
  transform: rotate(-8deg);
  filter: blur(44px);
}

/* ================= Logo 蛇形徽标 ================= */
.logo-mark {
  position: relative;
  width: calc(44px * var(--u));
  height: calc(44px * var(--u));
  border-radius: calc(12px * var(--u));
  background: linear-gradient(160deg, #5ce68e, #1e7a44);
  box-shadow: 0 calc(6px * var(--u)) calc(28px * var(--u))
    rgba(74, 222, 128, 0.25);
  flex: none;
}

.lseg {
  position: absolute;
  border-radius: calc(4px * var(--u));
  background: var(--sn-ink);
}
.lseg.head {
  left: calc(27px * var(--u));
  top: calc(7px * var(--u));
  width: calc(11px * var(--u));
  height: calc(11px * var(--u));
}
.lseg.b1 {
  left: calc(27px * var(--u));
  top: calc(19px * var(--u));
  width: calc(11px * var(--u));
  height: calc(11px * var(--u));
}
.lseg.b2 {
  left: calc(16px * var(--u));
  top: calc(19px * var(--u));
  width: calc(11px * var(--u));
  height: calc(11px * var(--u));
}
.lseg.tail {
  left: calc(16px * var(--u));
  top: calc(31px * var(--u));
  width: calc(11px * var(--u));
  height: calc(11px * var(--u));
}

.leye {
  position: absolute;
  width: calc(3px * var(--u));
  height: calc(3px * var(--u));
  border-radius: 50%;
  background: var(--sn-text);
}
.leye.e1 {
  left: calc(29px * var(--u));
  top: calc(10px * var(--u));
}
.leye.e2 {
  left: calc(33px * var(--u));
  top: calc(10px * var(--u));
}

/* ================= 开始界面 ================= */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: screenIn 0.6s 0.05s ease both;
}

.title {
  font-size: clamp(64px, 11vw, 112px);
  font-weight: 800;
  letter-spacing: -4px;
  line-height: 1;
  color: var(--sn-text);
  text-shadow: 0 0 56px rgba(74, 222, 128, 0.22);
}

.tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 6px;
  color: var(--sn-muted);
}

.difficulty-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  animation: screenIn 0.6s 0.15s ease both;
}

.diff-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 236px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--sn-surface);
  border: 1px solid var(--sn-border);
  text-align: left;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}
.diff-card:hover {
  transform: translateY(-3px);
  border-color: var(--sn-border-strong);
}
.diff-card.selected {
  background: #0f2418;
  border: 1.5px solid var(--sn-green);
  box-shadow: 0 4px 20px rgba(74, 222, 128, 0.19);
}

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

.diff-icon {
  width: 24px;
  height: 24px;
  color: #9dbba8;
}
.diff-icon.gold {
  color: var(--sn-gold);
}
.diff-icon.food {
  color: var(--sn-food);
}

.diff-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--sn-border-strong);
  background: transparent;
  color: transparent;
  transition: all 0.2s ease;
}
.diff-badge svg {
  width: 12px;
  height: 12px;
}
.diff-card.selected .diff-badge {
  background: var(--sn-green);
  border-color: var(--sn-green);
  color: var(--sn-ink);
}

.diff-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--sn-text);
}

.diff-desc {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 1px;
  color: var(--sn-muted);
}

.diff-dots {
  display: flex;
  gap: 5px;
}
.diff-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1c2b21;
}
.diff-dots i.on {
  background: var(--sn-green);
}

#btn-start {
  animation: screenIn 0.6s 0.25s ease both;
}

.hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--sn-muted);
  animation: screenIn 0.6s 0.35s ease both;
}

/* ================= 按钮 ================= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 9px;
  background: linear-gradient(180deg, #5ce68e, #2fac5c);
  color: var(--sn-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(74, 222, 128, 0.21);
  transition:
    filter 0.15s ease,
    transform 0.15s ease;
}
.btn-primary:hover {
  filter: brightness(1.08);
}
.btn-primary:active {
  transform: translateY(1px);
}
.btn-primary svg {
  width: 14px;
  height: 14px;
}

.btn-xl {
  padding: 18px 46px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  box-shadow: 0 6px 32px rgba(74, 222, 128, 0.33);
}
.btn-xl svg {
  width: 18px;
  height: 18px;
}

.btn-lg {
  padding: 14px 30px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 6px 28px rgba(74, 222, 128, 0.33);
}
.btn-lg svg {
  width: 16px;
  height: 16px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 9px;
  background: var(--sn-surface);
  border: 1px solid var(--sn-border-strong);
  color: var(--sn-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.btn-ghost:hover {
  border-color: var(--sn-muted);
  background: var(--sn-surface-2);
}
.btn-ghost svg {
  width: 14px;
  height: 14px;
  color: var(--sn-muted);
}

/* ================= 游戏主界面 ================= */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1344px;
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.title-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.title-block .t1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
}
.title-block .t2 {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--sn-muted);
}

.stats {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.chip {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--sn-surface);
  border: 1px solid var(--sn-border);
}

.chip-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--sn-muted);
}

.chip-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}
.chip-value.white {
  color: var(--sn-text);
}
.chip-value.gold {
  color: var(--sn-gold);
}

.chip-speed {
  justify-content: center;
  gap: 7px;
}

.speed-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 16px;
}
.speed-bars i {
  width: 7px;
  border-radius: 2px;
  background: #1d2d22;
  transition: background 0.25s ease;
}
.speed-bars i.on {
  background: var(--sn-green);
}

/* ---------- 棋盘 ---------- */
.board-wrap {
  position: relative;
  width: min(600px, 92vw, calc(100vh - 320px));
  width: min(600px, 92vw, calc(100dvh - 320px));
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--sn-surface);
  border: 1px solid var(--sn-border-strong);
  box-shadow: 0 0 56px rgba(74, 222, 128, 0.12);
  overflow: hidden;
}

#board {
  display: block;
  width: 100%;
  height: 100%;
}

.pause-overlay {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(6, 11, 8, 0.62);
  backdrop-filter: blur(3px);
}
.pause-overlay.show {
  display: flex;
}
.pause-title {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 8px;
}
.pause-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--sn-muted);
}

/* ---------- 底栏 ---------- */
.game-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1344px;
}

.controls {
  display: flex;
  gap: 24px;
  align-items: center;
}

.ctrl-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.arrow-cluster {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}
.arrow-row {
  display: flex;
  gap: 3px;
}

.keycap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--sn-surface);
  border: 1px solid var(--sn-border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sn-muted);
}
.keycap svg {
  width: 13px;
  height: 13px;
}
.keycap.wide {
  width: 64px;
  font-size: 9px;
  letter-spacing: 1.5px;
}

.ctrl-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--sn-muted);
}

.actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ================= 游戏结束浮层 ================= */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 11, 8, 0.86);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.over-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 24px;
  transform: scale(0.96) translateY(10px);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.overlay.show .over-card {
  transform: none;
}

.run-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 99px;
  background: #2a1512;
  border: 1px solid rgba(255, 107, 94, 0.25);
  color: var(--sn-food);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
}
.run-badge svg {
  width: 13px;
  height: 13px;
}

.over-title {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.over-title span {
  font-size: clamp(52px, 9vw, 92px);
  font-weight: 800;
  letter-spacing: -3px;
  line-height: 1;
}
.over-title .w {
  color: var(--sn-text);
}
.over-title .r {
  color: var(--sn-food);
  text-shadow: 0 0 48px rgba(255, 107, 94, 0.28);
}

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

.score-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--sn-muted);
}

.score-value {
  font-family: var(--font-mono);
  font-size: clamp(52px, 8vw, 72px);
  font-weight: 700;
  line-height: 1;
}

.record-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.record-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 99px;
  background: #2a2110;
  border: 1px solid rgba(255, 200, 87, 0.31);
  color: var(--sn-gold);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.record-badge svg {
  width: 13px;
  height: 13px;
}

.prev-best {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--sn-muted);
}

.stats-row {
  display: flex;
  gap: 32px;
  align-items: center;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--sn-muted);
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
}

.stat-divider {
  width: 1px;
  height: 34px;
  background: var(--sn-border);
}

.over-buttons {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* ================= 响应式 ================= */
@media (max-width: 900px) {
  .screen {
    padding: 24px;
    gap: 20px;
  }
  .game-header {
    flex-direction: column;
    gap: 16px;
  }
  .game-footer {
    flex-direction: column;
    gap: 18px;
  }
  .controls {
    display: none;
  }
  .stats {
    flex-wrap: wrap;
    justify-content: center;
  }
  .over-title span {
    letter-spacing: -1px;
  }
}

@media (max-width: 560px) {
  .difficulty-row {
    gap: 12px;
  }
  .diff-card {
    width: calc(50% - 6px);
    min-width: 150px;
  }
  .title {
    letter-spacing: -2px;
  }
}

/* ================= 触屏 / 窄屏：移动端方向键（D-Pad） ================= */
.dpad {
  display: none;
}

.touch-only {
  display: none;
}

/* ---- 主条件：触屏设备，或 ≤700px 的窄窗口 ---- */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .kb-only {
    display: none;
  }
  .touch-only {
    display: inline;
  }

  /* 键盘按键提示由 D-Pad 取代 */
  .controls {
    display: none;
  }

  /* 适配 iPhone 等机型的底部安全区 */
  .screen {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  /* 页头压缩为单行，为 D-Pad 腾出纵向空间 */
  .game-header {
    flex-direction: row;
  }
  .game-footer {
    align-items: center;
  }

  /* 棋盘为底部 D-Pad 预留空间 */
  .board-wrap {
    width: min(600px, 92vw, calc(100dvh - 470px));
  }

  .dpad {
    display: grid;
    grid-template-columns: repeat(3, 58px);
    grid-template-rows: repeat(3, 58px);
    gap: 9px;
  }

  .dpad-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--sn-surface);
    border: 1px solid var(--sn-border-strong);
    color: var(--sn-green);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transition:
      background 0.12s ease,
      border-color 0.12s ease,
      transform 0.12s ease,
      box-shadow 0.12s ease;
  }
  .dpad-btn:active,
  .dpad-btn.pressed {
    background: #0f2418;
    border-color: var(--sn-green);
    transform: scale(0.92);
    box-shadow: 0 0 18px rgba(74, 222, 128, 0.28);
  }
  .dpad-btn svg {
    width: 26px;
    height: 26px;
  }

  .dpad-up {
    grid-column: 2;
    grid-row: 1;
  }
  .dpad-left {
    grid-column: 1;
    grid-row: 2;
  }
  .dpad-right {
    grid-column: 3;
    grid-row: 2;
  }
  .dpad-down {
    grid-column: 2;
    grid-row: 3;
  }

  .dpad-center {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dpad-center::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1c2b21;
    border: 1px solid var(--sn-border-strong);
  }
}

/* ---- 小屏手机：进一步压缩页头 ---- */
@media (max-width: 560px) {
  .game-header .title-block {
    display: none;
  }
  .game-header {
    justify-content: center;
  }
  .chip {
    padding: 10px 14px;
    gap: 4px;
  }
  .chip-value {
    font-size: 18px;
  }
  .speed-bars {
    height: 14px;
  }
}

/* ---- 偏矮屏幕：缩小 D-Pad，减少棋盘预留 ---- */
@media (max-width: 700px) and (max-height: 740px) {
  .dpad {
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(3, 52px);
    gap: 8px;
  }
  .board-wrap {
    width: min(600px, 92vw, calc(100dvh - 440px));
  }
}

/* ---- 横屏（触屏手机）：D-Pad 悬浮于右侧，避免纵向空间不足 ---- */
@media (orientation: landscape) and (max-height: 500px) {
  .screen {
    padding: 12px 20px;
    gap: 10px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .game-header .title-block {
    display: none;
  }
  .game-header {
    justify-content: center;
  }
  .game-footer {
    flex-direction: row;
    gap: 10px;
  }
  .board-wrap {
    width: min(600px, 52vw, calc(100dvh - 180px));
  }
  .dpad {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    top: calc(50% - 78px);
    grid-template-columns: repeat(3, 46px);
    grid-template-rows: repeat(3, 46px);
    gap: 6px;
  }
}