/* 水排序 Water Sort —— 深色/浅色双主题，移动优先 */
:root {
  --accent: #38bdf8;
  --accent2: #818cf8;
  --gold: #fbbf24;
}
:root[data-theme="dark"] {
  --fg: #e9eef8;
  --muted: #8d99b0;
  --card: rgba(148, 170, 220, .10);
  --card2: rgba(30, 38, 60, .92);
  --border: rgba(160, 180, 220, .18);
  --overlay: rgba(8, 10, 18, .55);
  --bg1: #141a2b;
  --bg2: #0b0e18;
  --btn-text: #0b1220;
}
:root[data-theme="light"] {
  --fg: #182437;
  --muted: #5c6b82;
  --card: rgba(255, 255, 255, .62);
  --card2: rgba(255, 255, 255, .94);
  --border: rgba(30, 60, 120, .16);
  --overlay: rgba(226, 236, 248, .6);
  --bg1: #e9f1fb;
  --bg2: #ccd9ee;
  --gold: #d9930d;
  --btn-text: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
button {
  font-family: inherit;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hidden { display: none !important; }

#cv {
  position: fixed;
  inset: 0;
  display: block;
  touch-action: none;
}

/* ---------- HUD ---------- */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 8px;
}
#hud-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .5px;
}
#hud-moves {
  min-width: 40px;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.icon-btn {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.icon-btn:active { transform: scale(.94); }

/* ---------- 工具栏 ---------- */
#toolbar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 4px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tool-btn {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 2px;
  color: var(--fg);
  border-radius: 14px;
}
.tool-btn svg, .tool-btn .ico-slot svg { width: 21px; height: 21px; }
.tool-btn .ico-slot { display: flex; height: 21px; }
.tool-btn span { font-size: 10px; color: var(--muted); }
.tool-btn:active { background: var(--border); }
.tool-btn.disabled { opacity: .32; pointer-events: none; }
#add-count {
  position: absolute;
  top: 0;
  right: 12%;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--btn-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ---------- 屏幕 / 主页 ---------- */
.screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.screen.active { opacity: 1; pointer-events: auto; }

.home-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  z-index: 1;
}
.logo { width: 132px; height: 86px; color: var(--fg); margin-bottom: 10px; }
.home-inner h1 {
  font-size: 40px;
  letter-spacing: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
.sub { color: var(--muted); font-size: 13px; margin-bottom: 26px; letter-spacing: 2px; }
.progress { margin-top: 20px; font-size: 12px; color: var(--muted); }

.big-btn {
  width: min(320px, 82vw);
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--btn-text);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  margin-top: 12px;
  box-shadow: 0 6px 20px rgba(80, 130, 250, .35);
  transition: transform .12s;
}
.big-btn:active { transform: scale(.97); }
.big-btn.ghost {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
  box-shadow: none;
}
.big-btn small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: .72;
  margin-top: 2px;
}

/* 主页气泡装饰 */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bubbles i {
  position: absolute;
  bottom: -70px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.5), rgba(120,170,255,.12) 60%);
  border: 1px solid rgba(160, 190, 255, .25);
  animation: rise linear infinite;
  opacity: .6;
}
.bubbles i:nth-child(1) { left: 8%;  width: 34px; height: 34px; animation-duration: 9s;  animation-delay: 0s; }
.bubbles i:nth-child(2) { left: 22%; width: 18px; height: 18px; animation-duration: 7s;  animation-delay: 2s; }
.bubbles i:nth-child(3) { left: 38%; width: 46px; height: 46px; animation-duration: 12s; animation-delay: 1s; }
.bubbles i:nth-child(4) { left: 55%; width: 22px; height: 22px; animation-duration: 8s;  animation-delay: 3.5s; }
.bubbles i:nth-child(5) { left: 68%; width: 38px; height: 38px; animation-duration: 11s; animation-delay: .6s; }
.bubbles i:nth-child(6) { left: 82%; width: 16px; height: 16px; animation-duration: 6.5s; animation-delay: 2.8s; }
.bubbles i:nth-child(7) { left: 92%; width: 28px; height: 28px; animation-duration: 10s; animation-delay: 4.2s; }
.bubbles i:nth-child(8) { left: 47%; width: 14px; height: 14px; animation-duration: 7.5s; animation-delay: 5s; }
@keyframes rise {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-100vh - 140px)); }
}

/* ---------- 关卡选择 ---------- */
.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
}
.panel-head h2 { flex: 1; text-align: center; font-size: 18px; }
.head-spacer { width: 40px; flex: none; }
#level-grid {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 10px;
  padding: 6px 16px calc(24px + env(safe-area-inset-bottom));
  align-content: start;
}
.lvl {
  aspect-ratio: .85;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.lvl:active { transform: scale(.95); }
.lvl b { font-size: 17px; }
.lvl .stars { font-size: 9px; letter-spacing: 1px; color: var(--gold); }
.lvl .stars .off { color: var(--muted); opacity: .45; }
.lvl.locked { opacity: .45; }
.lvl.locked svg { width: 18px; height: 18px; }

/* ---------- 通关弹窗 ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.modal.show { opacity: 1; pointer-events: auto; }
.modal-card {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 26px 22px;
  width: min(340px, 86vw);
  text-align: center;
  transform: scale(.85);
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1);
}
.modal.show .modal-card { transform: scale(1); }
.modal-card h2 { font-size: 24px; letter-spacing: 3px; margin-bottom: 6px; }
#win-stars { margin: 4px 0 8px; height: 56px; }
#win-stars span {
  font-size: 44px;
  color: var(--muted);
  opacity: .28;
  display: inline-block;
  margin: 0 6px;
}
#win-stars span.lit {
  color: var(--gold);
  opacity: 1;
  text-shadow: 0 0 18px rgba(251, 191, 36, .55);
  animation: pop .45s cubic-bezier(.2, 1.8, .4, 1);
}
@keyframes pop {
  0% { transform: scale(.2) rotate(-30deg); }
  100% { transform: scale(1) rotate(0); }
}
#win-info { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.modal-btns { display: flex; gap: 8px; margin-top: 10px; }
.modal-btns .big-btn { width: auto; flex: 1; padding: 12px 6px; font-size: 14px; margin-top: 0; }

/* ---------- Toast ---------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 118px;
  transform: translate(-50%, 20px);
  background: var(--card2);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 40;
  max-width: 84vw;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }