:root {
  --bg: #0f1226;
  --bg2: #f2f4ff;
  --panel: #1e2347;
  --text: #eef0ff;
  --text-dim: #9aa1c9;
  --gold: #ffd166;
  --radius: 18px;
}

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

html, body { height: 100%; }

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(1200px 800px at 20% -10%, #232a5e 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 110%, #2a1a4a 0%, transparent 55%),
    var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow-x: hidden;
}

/* 背景漂浮装饰箭头 */
.bg-arrow {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  opacity: .07;
  animation: bgfloat 11s ease-in-out infinite alternate;
}
.bg-arrow.a2 { animation-duration: 14s; animation-delay: -4s; }
.bg-arrow.a3 { animation-duration: 17s; animation-delay: -9s; }
@keyframes bgfloat {
  from { translate: 0 -14px; rotate: -4deg; }
  to { translate: 0 18px; rotate: 5deg; }
}

header, .progress-wrap, main, footer { position: relative; z-index: 1; }

/* ---------- Header ---------- */
header {
  width: min(94vw, 640px);
  padding: 14px 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(120deg, #8ea2ff, #ff8ac2 60%, #ffd166);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.logo small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--text-dim);
  -webkit-text-fill-color: var(--text-dim);
}

.hud { display: flex; gap: 8px; align-items: center; }
.hud-break { display: none; }   /* 桌面单行；移动端在媒体查询里变成换行符 */

.stat {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 6px 12px;
  text-align: center;
  min-width: 58px;
}

.stat b { font-size: 16px; display: block; font-variant-numeric: tabular-nums; }
.stat span { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
#hud-lives { letter-spacing: -1px; }
/* 每个数据块一点点彩色个性 */
#hud-level { color: #8ea2ff; }
#hud-time { color: #ffd166; }
.stat { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }

.icon-btn {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .15s, background .15s;
}
.icon-btn:hover { background: #272d5c; translate: 0 -1px; }
.icon-btn:active { transform: scale(.96); }

@media (max-width: 480px) {
  .logo { font-size: 16px; }
  .logo small { letter-spacing: 2px; }
  .hud { gap: 5px; }
  .stat { min-width: 46px; padding: 5px 8px; border-radius: 10px; }
  .stat b { font-size: 13px; }
  .icon-btn { width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
}

/* ---------- Progress ---------- */
.progress-wrap {
  width: min(94vw, 640px);
  height: 8px;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  margin: 6px 0 14px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%),
    linear-gradient(90deg, #6c7bff, #ff8ac2);
  background-size: 220% 100%, 100% 100%;
  animation: shimmer 2.4s linear infinite;
  transition: width .35s cubic-bezier(.22,1,.36,1);
}
@keyframes shimmer {
  from { background-position: 220% 0, 0 0; }
  to { background-position: -120% 0, 0 0; }
}

/* ---------- Board ---------- */
main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding-bottom: 24px;
}

#board {
  position: relative;
  width: min(94vw, 640px, 72dvh);
  aspect-ratio: 1;
  background: var(--bg2);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.4);
  padding: 8px;
  cursor: pointer;
}

#svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  overflow: hidden;
}

#fx {
  position: absolute;
  inset: 8px;
  pointer-events: none;
}

.snake.hit { animation: hitshake .28s; }

/* 悬停高亮（仅指针设备）：整条箭头变亮变粗 */
.snake path { transition: stroke-width .15s; }
@media (hover: hover) {
  .snake.hover { filter: brightness(1.15); }
  .snake.hover path:first-child { stroke-width: 32; }
}

/* 被挡时棋盘轻微震屏 */
#board.board-shake { animation: boardshake .3s; }
@keyframes boardshake {
  25% { translate: 3px 1px; }
  50% { translate: -3px -1px; }
  75% { translate: 2px 1px; }
}

/* 消除时的粒子迸发 */
.pop {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 15;
}

/* 提示：闪烁可抽出的箭头 */
.snake.hintpulse { animation: hintpulse .7s ease-in-out 2; }
@keyframes hintpulse { 50% { opacity: .2; } }

/* 挑战模式计时状态 */
.stat.danger b { color: #ff5d73; }
.stat.penalty { animation: penaltyflash .5s; }
@keyframes penaltyflash { 30% { background: #a12744; } }
@keyframes hitshake {
  30% { translate: calc(var(--hx) * 5px) calc(var(--hy) * 5px); }
  65% { translate: calc(var(--hx) * -3px) calc(var(--hy) * -3px); }
}

/* floating combo text（连击越高越大越炸） */
.float-text {
  position: absolute;
  z-index: 20;
  font-weight: 800;
  font-size: 15px;
  color: #b45309;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  pointer-events: none;
  animation: floatup .85s cubic-bezier(.2,.8,.3,1) forwards;
  white-space: nowrap;
  translate: -50% -50%;
}
.float-text.tier2 { font-size: 19px; color: #c2410c; }
.float-text.tier3 { font-size: 24px; color: #db2777; text-shadow: 0 2px 10px rgba(219,39,119,.4); }
@keyframes floatup {
  0% { opacity: 0; scale: .4; margin-top: 6px; }
  18% { opacity: 1; scale: 1.15; margin-top: 0; }
  30% { scale: 1; }
  100% { opacity: 0; margin-top: -50px; }
}

/* ---------- Overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 30, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.overlay.show { opacity: 1; pointer-events: auto; }

.card {
  background: linear-gradient(160deg, #232858, #1a1e42);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 34px 38px;
  text-align: center;
  width: min(88vw, 380px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
  scale: .9;
  transition: scale .3s cubic-bezier(.34,1.56,.64,1);
}
.overlay.show .card { scale: 1; }

.card h1 { font-size: 26px; margin-bottom: 6px; text-wrap: balance; }
.card p { color: var(--text-dim); font-size: 14px; line-height: 1.9; text-wrap: pretty; }

.stars { font-size: 40px; letter-spacing: 6px; margin: 14px 0 4px; }
.stars .off { opacity: .18; filter: grayscale(1); }
.stars .on { animation: starpop .5s cubic-bezier(.34,1.56,.64,1) backwards; display: inline-block; }
.stars .on:nth-child(2) { animation-delay: .15s; }
.stars .on:nth-child(3) { animation-delay: .3s; }
@keyframes starpop { from { scale: 0; rotate: -60deg; } }

.result-row {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin: 12px 0 20px;
  font-size: 13px;
  color: var(--text-dim);
}
.result-row b { color: var(--text); font-size: 17px; display: block; font-variant-numeric: tabular-nums; }

.btn {
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  padding: 13px 30px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(120deg, #6c7bff, #9d6bff);
  box-shadow: 0 10px 24px -8px rgba(108,123,255,.7), inset 0 1px 0 rgba(255,255,255,.3);
  transition: transform .15s, filter .15s, box-shadow .15s;
  margin: 4px;
  position: relative;
  overflow: hidden;
}
.btn::after {                    /* 悬停时高光扫过 */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
  translate: -120% 0;
  transition: translate .5s ease;
  pointer-events: none;
}
.btn:hover { filter: brightness(1.08); box-shadow: 0 14px 30px -10px rgba(108,123,255,.85), inset 0 1px 0 rgba(255,255,255,.3); }
.btn:hover::after { translate: 120% 0; }
.btn:active { transform: scale(.96); }
.btn.ghost {
  background: rgba(255,255,255,.08);
  box-shadow: none;
  color: var(--text-dim);
}

.demo-svg { width: 220px; margin: 12px auto 4px; display: block; }

/* ---------- 选关 ---------- */
.card.wide { width: min(92vw, 520px); }

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 8px;
  margin: 16px 0 10px;
  max-height: 48vh;
  overflow-y: auto;
  padding: 4px;
}

.level-cell {
  font: inherit;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: var(--text);
  padding: 10px 4px 8px;
  cursor: pointer;
  transition: transform .12s, background .15s;
}
.level-cell b { display: block; font-size: 18px; }
.level-cell span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  min-height: 13px;
  color: var(--gold);
  letter-spacing: 1px;
}
.level-cell span.size { color: var(--text-dim); letter-spacing: 0; }
.level-cell:hover:not(:disabled) { background: rgba(255,255,255,.15); transform: translateY(-2px); }
.level-cell.current { outline: 2px solid #6c7bff; background: rgba(108,123,255,.18); }
.level-cell.locked { opacity: .35; cursor: default; }

/* level toast */
.toast {
  position: fixed;
  top: 18%;
  left: 50%;
  translate: -50%;
  z-index: 40;
  background: rgba(20,24,55,.9);
  border: 1px solid rgba(255,255,255,.12);
  padding: 10px 26px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 17px;
  pointer-events: none;
  opacity: 0;
}
.toast.show { animation: toastin 1.4s ease forwards; }
@keyframes toastin {
  0% { opacity: 0; translate: -50% 14px; }
  15%, 75% { opacity: 1; translate: -50% 0; }
  100% { opacity: 0; translate: -50% -10px; }
}

/* confetti */
.confetti {
  position: fixed;
  z-index: 60;
  width: 10px;
  height: 10px;
  top: -20px;
  pointer-events: none;
}

footer {
  padding: 10px 16px 18px;
  font-size: 11px;
  color: var(--text-dim);
  opacity: .8;
  width: min(94vw, 640px);
  text-align: center;
}

/* 页脚 SEO 内容区：玩法说明 + FAQ */
.seo-block {
  margin-top: 14px;
  text-align: left;
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  padding: 14px 16px;
  font-size: 12px;
}
.seo-block h2 {
  font-size: 13px;
  margin: 10px 0 6px;
  color: var(--text);
  letter-spacing: 1px;
  text-wrap: balance;
}
.seo-block h2:first-child { margin-top: 0; }
.seo-block p, .seo-block li { line-height: 1.9; text-wrap: pretty; }
.seo-block ol { padding-left: 18px; margin: 4px 0; }
.seo-block details {
  border-radius: 10px;
  padding: 7px 10px;
  margin: 5px 0;
  background: rgba(255,255,255,.04);
}
.seo-block summary { cursor: pointer; font-weight: 600; color: var(--text); }
.seo-block details p { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* The game also runs in a narrow iframe, independently of the site viewport. */
@media (max-width: 540px) {
  header { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 4px 4px; }
  .logo { width: 100%; text-align: center; font-size: 17px; }
  .logo small { display: none; }
  .hud { gap: 6px; justify-content: center; flex-wrap: wrap; }
  .stat { min-width: 48px; padding: 5px 9px; }
  .stat b { font-size: 13px; }
  /* 数据一排、功能按钮一排 */
  .hud-break { display: block; width: 100%; height: 0; }
  .icon-btn { width: 40px; height: 36px; }
  .card { padding: 22px 20px; max-height: 94dvh; overflow-y: auto; }

  /* 竖屏时棋盘受宽度限制，把它在剩余高度里垂直居中，
     并压缩头尾的固定开销，消除棋盘下方的大片空白 */
  .progress-wrap { margin: 2px 0 6px; }
  main { align-items: center; padding-bottom: 6px; }
  #board { width: min(96vw, 640px, 72dvh); }
  footer { padding: 6px 12px 12px; }
}
.overlay { visibility: hidden; }
.overlay.show { visibility: visible; }

/* Island theme: the standalone game shares the site's warm, soft palette. */
:root { --bg: #e7eddc; --bg2: #fffdf2; --panel: #f9f5e6; --text: #75654e; --text-dim: #8b7a60; --gold: #c9993e; --radius: 24px; }
body { font-family: "Hiragino Maru Gothic ProN", "Yuanti SC", "PingFang SC", ui-rounded, system-ui, sans-serif; background: radial-gradient(ellipse at 20% 20%, #f5f3de 0%, transparent 55%), #e7eddc; }
.logo { background: none; color: #699e83; -webkit-text-fill-color: #699e83; }
.logo small { color: #91a083; -webkit-text-fill-color: #91a083; }
.stat { border: 0; border-radius: 15px; box-shadow: 0 3px #d9ddc7; }
#hud-level { color: #609780; }
#hud-time { color: #a58a40; }
.icon-btn { background: #faf5e5; color: #867553; border: 0; border-radius: 14px; box-shadow: 0 3px #d4d9c0; }
.progress-wrap { background: #d5dec7; }
.progress-bar { background: #87bba0; box-shadow: none; }
#board { border: 5px solid #fffef6; box-shadow: 0 6px #d6ddc6, 0 12px 25px #73885e12; }
.overlay { background: #c9d9b680; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.card { background: #fff9e9; border: 6px solid #fffdf3; border-radius: 35px; box-shadow: 0 7px #d8d2b9, 0 20px 55px #5d775d20; }
.card h1 { color: #7c6a4e; }
.card p { color: #89775a; }
.btn { background: #58aa91; color: #fffdf0; border-radius: 22px; box-shadow: 0 5px #3d8772; }
.btn:hover { filter: brightness(1.03); box-shadow: 0 5px #3d8772; }
.btn:active { transform: translateY(3px) scale(.96); box-shadow: 0 2px #3d8772; }
.btn.ghost { background: #eee6ca; color: #89754f; box-shadow: 0 4px #dcd1af; }
.btn::after { display: none; }
.demo-svg { filter: saturate(.65); }
.toast { background: #fffae9; color: #7c6a4e; border: 2px solid #dfd5b8; box-shadow: 0 4px #d1c7aa50; }
.level-grid button { color: #7c6a4e; background: #eee8d2; border-color: #dfd4b6; }
footer p { color: #7b896d; }
.bg-arrow { opacity: .05; }
button:focus-visible { outline: 3px solid #398b78; outline-offset: 3px; }
.level-grid .level-cell.current { outline: 2px solid #62a78c; background: #deecd5; }
@media (hover: hover) { .level-grid .level-cell:hover:not(:disabled) { background: #e4eacd; } }

/* Translated labels and status messages can be longer than the original text. */
header { flex-wrap: wrap; }
.hud { flex-wrap: wrap; justify-content: center; }
.toast { width: max-content; max-width: 90vw; text-align: center; border-radius: 24px; overflow-wrap: break-word; }
html:lang(ko) .toast, html:lang(ko) .card p { word-break: keep-all; }
@media (max-width: 540px) { .toast { font-size: 14px; padding: 10px 16px; } }