* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  background: radial-gradient(circle at 50% 0%, #1b2440 0%, #0a0e1c 70%);
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  color: #e8ecff;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  overscroll-behavior: none;                 /* 禁止移动端下拉刷新/橡皮筋 */
  -webkit-tap-highlight-color: transparent;  /* 去掉点击高亮方块 */
}
#wrap { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:12px; }
#hud {
  width:100%; max-width:1100px; display:flex; justify-content:space-between; align-items:center;
  font-size:15px; letter-spacing:.5px; padding:0 6px; gap:8px;
}
#hud .stat { display:flex; align-items:center; gap:6px; white-space:nowrap; }
#hud b { color:#7fd1ff; font-variant-numeric:tabular-nums; }
#activeFx { display:none; }   /* 道具状态改由 canvas 渲染，避免 HUD 重排抖动 */
.iconbtn {
  background:rgba(127,209,255,.12); border:1px solid rgba(127,209,255,.3); color:#cfe8ff;
  width:34px; height:34px; border-radius:9px; font-size:16px; cursor:pointer; line-height:1; padding:0;
  box-shadow:none; transition:background .15s;
}
.iconbtn:hover { background:rgba(127,209,255,.25); transform:none; }
#stageWrap {
  position:relative;
  /* 同时受宽度与可用高度约束；用 svh（稳定视口高度）避免地址栏伸缩导致抖动 */
  width: min(100%, 1100px, calc((100svh - 92px) * 4 / 3));
  aspect-ratio: 4 / 3;
}
canvas {
  width:100%; height:100%; display:block; border-radius:14px;
  background:linear-gradient(180deg,#0e1430 0%,#0a0f22 100%);
  box-shadow:0 18px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(120,150,255,.15);
  touch-action:none; cursor:none;
}
#overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; background:rgba(8,11,24,.82); backdrop-filter:blur(6px); border-radius:14px;
  text-align:center; padding:22px; transition:opacity .25s; overflow:auto;
}
#overlay.hide { opacity:0; pointer-events:none; }
#overlay h1 { font-size:clamp(24px,5vw,42px); font-weight:800; letter-spacing:1px; }
#overlay h1 small { display:block; font-size:13px; font-weight:500; color:#9fb0e0; margin-top:6px; letter-spacing:3px; }
#overlay p { color:#aeb9e0; max-width:560px; line-height:1.7; font-size:14px; }
#overlay .big { font-size:clamp(18px,4vw,28px); color:#7fd1ff; font-weight:700; }
button {
  font-family:inherit; font-size:16px; font-weight:700; letter-spacing:1px;
  color:#0a0e1c; background:linear-gradient(135deg,#7fd1ff,#6affc2); border:none;
  padding:12px 30px; border-radius:999px; cursor:pointer;
  box-shadow:0 8px 24px rgba(106,255,194,.3); transition:transform .12s, box-shadow .12s;
}
button:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(106,255,194,.45); }
button:active { transform:translateY(0); }
button.ghost { background:rgba(127,209,255,.12); color:#cfe8ff; box-shadow:none; border:1px solid rgba(127,209,255,.3); }
button.ghost:hover { background:rgba(127,209,255,.22); box-shadow:none; }
.btnrow { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.legend { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px 16px; max-width:620px; font-size:13px; color:#c3cdf0; }
.legend .it { display:flex; align-items:center; gap:8px; }
.dot { width:14px; height:14px; border-radius:4px; flex:none; box-shadow:0 0 8px currentColor; }
#note { font-size:12px; color:#6b78a3; max-width:560px; }
.chip { font-size:11px; padding:2px 9px; border-radius:999px; background:rgba(127,209,255,.15); color:#9fe0ff; border:1px solid rgba(127,209,255,.3); }

/* 关卡选择 */
.pager { display:flex; align-items:center; gap:14px; font-size:14px; color:#c3cdf0; }
.pager button { padding:6px 16px; font-size:18px; }
.grid1000 { display:grid; grid-template-columns:repeat(10,1fr); gap:5px; width:100%; max-width:560px; }
.cell {
  position:relative; aspect-ratio:1; font-size:12px; font-weight:700; letter-spacing:0;
  border-radius:7px; padding:0; box-shadow:none; cursor:pointer; transition:transform .1s, background .15s;
  display:flex; align-items:center; justify-content:center;
}
.cell:hover { transform:translateY(-2px); box-shadow:none; }
.cell.done { background:linear-gradient(135deg,#1dd1a1,#10b981); color:#04221a; }
.cell.open { background:rgba(127,209,255,.18); color:#cfe8ff; border:1px solid rgba(127,209,255,.45); }
.cell.lock { background:rgba(255,255,255,.05); color:#54607f; cursor:not-allowed; border:1px solid rgba(255,255,255,.06); }
.cell.lock:hover { transform:none; }
.cell .chk { position:absolute; top:1px; right:3px; font-size:9px; color:#04221a; }

/* 加载条 */
.loadbar { width:min(420px,80%); height:16px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(127,209,255,.2); }
#loadfill { width:0%; height:100%; background:linear-gradient(90deg,#7fd1ff,#6affc2); border-radius:999px; transition:width .05s linear; box-shadow:0 0 16px rgba(106,255,194,.6); }

/* 跳关 / 搜索 */
.jumpbox { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; font-size:13px; color:#9fb0e0; }
.jumpbox input {
  width:170px; padding:8px 12px; border-radius:9px; border:1px solid rgba(127,209,255,.3);
  background:rgba(255,255,255,.06); color:#e8ecff; font-family:inherit; font-size:14px;
}
.jumpbox input:focus { outline:none; border-color:#7fd1ff; }
.jumpbox button { padding:8px 18px; font-size:14px; }
#jumpMsg { color:#ffd166; min-width:0; }
.cell .cstar { position:absolute; bottom:1px; left:0; right:0; font-size:8px; line-height:1; color:#ffd166; letter-spacing:-1px; }

/* 星级展示 */
.stars { font-size:clamp(28px,7vw,52px); letter-spacing:6px; color:#ffd166; text-shadow:0 0 16px rgba(255,209,102,.5); }
.stars .empty { color:rgba(255,255,255,.18); text-shadow:none; }

/* ============ 移动端适配 ============ */
@media (max-width: 640px) {
  #wrap { padding:8px; gap:8px; }
  #hud { font-size:13px; gap:6px 8px; padding:0 2px; flex-wrap:wrap; }
  #hud .stat { gap:4px; }
  #activeFx { order:5; flex-basis:100%; min-height:0; }   /* 道具倒计时单独占一行 */
  .iconbtn { width:38px; height:38px; font-size:17px; }   /* 触摸目标更大 */
  #overlay { gap:12px; padding:14px; }
  #overlay h1 small { letter-spacing:2px; }
  #overlay p { font-size:12.5px; line-height:1.6; }
  button { font-size:14px; padding:12px 22px; }           /* 保证触摸高度 */
  .btnrow { gap:8px; }
  .legend { grid-template-columns:1fr 1fr; font-size:11.5px; gap:6px 10px; }
  .grid1000 { gap:4px; max-width:100%; }
  .cell { font-size:11px; border-radius:6px; }
  .cell .chk { font-size:8px; }
  .pager button { padding:8px 14px; }
  .jumpbox input { width:140px; }
  .stars { letter-spacing:4px; }
}

/* 触摸设备：去掉 hover 位移，避免点一下“跳”一下 */
@media (hover: none) {
  button:hover, .iconbtn:hover, .cell:hover { transform:none; }
  canvas { cursor:default; }

  /* 锁死页面，避免地址栏伸缩导致窗口抖动 */
  html, body { position:fixed; inset:0; width:100%; height:100svh; overflow:hidden; }
  #wrap { height:100svh; }

  /* 弹层做成真正的全屏面板：菜单/关卡/暂停占满屏，不再挤在小窗里滚动 */
  #overlay {
    position:fixed; inset:0; width:100vw; height:100svh;
    border-radius:0; z-index:50; overscroll-behavior:contain;
    padding:max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  }
}