:root {
  /* 设计稿基准 393 × 700，所有尺寸按 --u 等比缩放 */
  --u: calc(min(100vw, 100vh * 393 / 700) / 393);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --num-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --round-font: ui-rounded, "SF Pro Rounded", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;

  /* 调色板：奶油底 + 长春花蓝主色 + 琥珀 / 薄荷 / 玫瑰点缀 */
  --bg: #fff9f0;
  --ink: #241f3a;
  --ink-2: #6f6a85;
  --pri: #5b6ee8;       --pri-d: #3a49b0;
  --pri-soft: #c9d6ff;  --pri-soft-d: #8e9fe0;
  --pri-pale: #eef0ff;
  --amber: #ffdf7e;     --amber-d: #b98a12;   --amber-ink: #5a3e00;
  --mint: #b8f0c8;      --mint-d: #2f9a5c;    --mint-ink: #114a2a;
  --rose: #ffc6c9;      --rose-d: #c8414b;    --rose-ink: #8e1c26;
  --peach: #ffe9dc;     --peach-d: #e3b9a2;   --orange: #ff7a45;  --orange-d: #c4521f;
  --green: #3dd68c;     --green-d: #23995f;
  --plain: #ebe6f7;     --plain-d: #b9b1d8;   --plain-ink: #4a3f8c;
  --lock: #dcd6ca;      --lock-d: #a8a296;
  --edge: #e8dfd0;
}
@supports (height: 100dvh) {
  :root { --u: calc(min(100vw, 100dvh * 393 / 700) / 393); }
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }

#app {
  position: relative;
  width: calc(var(--u) * 393);
  height: 100vh; height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
}
.screen {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center;
  padding-top: var(--sat);
  background: var(--bg);
}
.screen.active { display: flex; animation: fadein .22s ease-out; }
@keyframes fadein { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- 首页 ---------- */
.deco { position: absolute; left: 0; top: var(--sat); width: 100%; pointer-events: none; }
.hbtn {
  position: absolute; top: calc(var(--u) * 18 + var(--sat)); z-index: 2;
  width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: 50%;
  background: #fff; color: var(--pri);
  box-shadow: 0 calc(var(--u) * 3) 0 var(--edge);
  display: grid; place-items: center;
}
.hbtn.l { left: calc(var(--u) * 24); }
.hbtn.r { right: calc(var(--u) * 24); }
.hbtn svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.hbtn.mute { color: #b5b0c4; }
.hbtn:active { transform: translateY(calc(var(--u) * 2)); box-shadow: 0 calc(var(--u) * 1) 0 var(--edge); }
.logo {
  margin-top: calc(var(--u) * 84);
  font-size: calc(var(--u) * 45); font-weight: 800; letter-spacing: calc(var(--u) * 1);
  color: var(--ink); line-height: 1.2; position: relative;
}
.logo-dots { display: flex; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 18); position: relative; }
.logo-dots span {
  width: calc(var(--u) * 43); height: calc(var(--u) * 43); border-radius: 50%;
  display: grid; place-items: center;
  font: 700 calc(var(--u) * 26) var(--round-font);
}
.d2 { background: var(--pri-soft); color: var(--pri-d); box-shadow: 0 calc(var(--u) * 3) 0 var(--pri-d); }
.d4 { background: var(--amber); color: var(--amber-ink); box-shadow: 0 calc(var(--u) * 3) 0 var(--amber-d); }

.modes {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 20) calc(var(--u) * 13);
  width: calc(var(--u) * 345);
  margin-top: calc(var(--u) * 54);
  position: relative;
}
.mode {
  position: relative;
  height: calc(var(--u) * 166);
  border-radius: calc(var(--u) * 36);
  text-align: left;
  padding: calc(var(--u) * 16) calc(var(--u) * 16) 0;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: transform .08s, box-shadow .08s;
}
.mode .mi {
  width: calc(var(--u) * 50); height: calc(var(--u) * 50); border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  display: grid; place-items: center;
}
.mode .mi svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.mode b { font-size: calc(var(--u) * 30); font-weight: 800; margin-top: calc(var(--u) * 12); line-height: 1.25; white-space: nowrap; }
.mode small { font-size: calc(var(--u) * 10.5); margin-top: calc(var(--u) * 6); opacity: .85; white-space: nowrap; }
.mode .chip {
  position: absolute; top: calc(var(--u) * 18); right: calc(var(--u) * 14);
  font-style: normal; font-size: calc(var(--u) * 10.5); font-weight: 600; white-space: nowrap;
  padding: calc(var(--u) * 3) calc(var(--u) * 7); border-radius: calc(var(--u) * 10);
  background: rgba(255, 255, 255, .6);
}
.mode .chip:empty { display: none; }
.m-level { background: var(--mint); color: var(--mint-ink); box-shadow: 0 calc(var(--u) * 7) 0 var(--mint-d); }
.m-speed { background: var(--amber); color: var(--amber-ink); box-shadow: 0 calc(var(--u) * 7) 0 var(--amber-d); }
.m-survival { background: var(--rose); color: var(--rose-ink); box-shadow: 0 calc(var(--u) * 7) 0 var(--rose-d); }
.m-timed { background: var(--pri-soft); color: #1f2b7a; box-shadow: 0 calc(var(--u) * 7) 0 var(--pri-d); }
.mode:active { transform: translateY(calc(var(--u) * 5)); box-shadow: 0 calc(var(--u) * 2) 0 rgba(0, 0, 0, .35); }

/* ---------- 顶栏 ---------- */
.bar {
  position: relative; width: 100%;
  height: calc(var(--u) * 64);
  margin-top: calc(var(--u) * 12);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.bar h1 { font-size: calc(var(--u) * 20); font-weight: 700; color: var(--ink); }
.back {
  position: absolute; left: calc(var(--u) * 27); top: calc(var(--u) * 6);
  width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 50%;
  background: var(--pri-pale); color: var(--pri);
  box-shadow: 0 calc(var(--u) * 3) 0 var(--pri);
  display: grid; place-items: center;
}
.back svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.back:active { transform: translateY(calc(var(--u) * 2)); box-shadow: 0 calc(var(--u) * 1) 0 var(--pri); }

/* ---------- 选关 ---------- */
#lv-sub { font-size: calc(var(--u) * 16); color: var(--ink-2); margin-top: calc(var(--u) * -6); height: calc(var(--u) * 22); flex: none; }
#pages {
  width: 100%; flex: none;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin-top: calc(var(--u) * 12);
}
#pages::-webkit-scrollbar { display: none; }
.page { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; padding: 0 calc(var(--u) * 31) calc(var(--u) * 10); }
.grid { display: grid; grid-template-columns: repeat(4, calc(var(--u) * 73)); gap: calc(var(--u) * 13); }
.cell {
  height: calc(var(--u) * 70); border-radius: calc(var(--u) * 16);
  margin-bottom: calc(var(--u) * 3);
  display: grid; place-items: center;
  font: 700 calc(var(--u) * 30) var(--round-font);
  background: var(--pri-soft); color: #1f2551; box-shadow: 0 calc(var(--u) * 3) 0 var(--pri-soft-d);
}
.cell.first { font-size: calc(var(--u) * 25); }
.cell.cur { background: var(--pri); color: #fff; box-shadow: 0 calc(var(--u) * 3) 0 var(--pri-d); }
.cell.locked, .exam.locked { background: var(--lock); color: #fff; box-shadow: 0 calc(var(--u) * 3) 0 var(--lock-d); }
.cell svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.cell:not(.locked):active, .exam:not(.locked):active { transform: translateY(calc(var(--u) * 2)); }
.exam {
  width: 100%; margin-top: calc(var(--u) * 31);
  height: calc(var(--u) * 92); border-radius: calc(var(--u) * 22);
  background: var(--amber); color: var(--amber-ink); box-shadow: 0 calc(var(--u) * 8) 0 var(--amber-d);
  position: relative; text-align: left; display: block;
  padding: calc(var(--u) * 12) calc(var(--u) * 20);
}
.exam.locked { box-shadow: 0 calc(var(--u) * 8) 0 var(--lock-d); }
.exam.passed { background: var(--mint); color: var(--mint-ink); box-shadow: 0 calc(var(--u) * 8) 0 var(--mint-d); }
.exam .t { display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 18); font-weight: 700; }
.exam .t svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.exam .s { font-size: calc(var(--u) * 11); margin-top: calc(var(--u) * 3); opacity: .9; }
.exam .l { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); font-weight: 600; margin-top: calc(var(--u) * 9); }
.exam .l svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.exam .r { position: absolute; right: calc(var(--u) * 32); top: 50%; transform: translateY(-50%); width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
#dots { display: flex; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 8); }
#dots i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: calc(var(--u) * 3); background: var(--edge); transition: width .2s, background-color .2s; }
#dots i.on { background: var(--pri); width: calc(var(--u) * 16); }

/* ---------- 游戏 ---------- */
#pills {
  width: calc(var(--u) * 333); height: calc(var(--u) * 36);
  margin-top: calc(var(--u) * -2);
  display: flex; justify-content: space-between; align-items: flex-start;
  position: relative; flex: none; z-index: 3;
}
#pills.off { visibility: hidden; }
.pill {
  position: relative;
  height: calc(var(--u) * 32); min-width: calc(var(--u) * 79);
  padding: 0 calc(var(--u) * 16);
  border-radius: calc(var(--u) * 16);
  background: #fff; box-shadow: 0 calc(var(--u) * 3) 0 var(--edge);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10);
  font-size: calc(var(--u) * 16); color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pill svg { width: calc(var(--u) * 19); height: calc(var(--u) * 19); flex: none; color: var(--pri); }
.pill.warn, .pill.warn svg { color: #e5484d; }
.float {
  position: absolute; top: calc(var(--u) * -14); right: calc(var(--u) * -4);
  font: 700 calc(var(--u) * 16) var(--num-font); color: var(--green-d); pointer-events: none;
  animation: floatup .9s ease-out forwards;
}
.float.neg { color: #e5484d; }
@keyframes floatup { from { opacity: 1; transform: translateY(calc(var(--u) * 12)); } to { opacity: 0; transform: translateY(calc(var(--u) * -14)); } }

#board {
  position: relative; flex: none;
  width: calc(var(--u) * 331); height: calc(var(--u) * 340);
  margin-top: calc(var(--u) * 17);
}
.card {
  position: absolute;
  width: calc(var(--u) * 153); height: calc(var(--u) * 152);
  border-radius: calc(var(--u) * 30);
  background: var(--pri-soft); color: #1b1f45;
  box-shadow: 0 calc(var(--u) * 8) 0 var(--pri-soft-d);
  display: grid; place-items: center;
  transition: left .17s ease-in, top .17s ease-in, transform .34s cubic-bezier(.2, .8, .3, 1), opacity .3s, background-color .12s, box-shadow .12s;
  cursor: pointer;
}
.card.s0 { left: 0; top: 0; }
.card.s1 { left: calc(var(--u) * 178); top: 0; }
.card.s2 { left: 0; top: calc(var(--u) * 179); }
.card.s3 { left: calc(var(--u) * 178); top: calc(var(--u) * 179); }
.card .num { font: 400 calc(var(--u) * 84) var(--num-font); line-height: 1; letter-spacing: calc(var(--u) * -1); padding-top: calc(var(--u) * 8); }
.card .num[data-len="m"] { font-size: calc(var(--u) * 60); }
.card .num[data-len="l"] { font-size: calc(var(--u) * 40); }
.card .expr {
  position: absolute; top: calc(var(--u) * 7); left: 0; right: 0; text-align: center;
  font: 400 calc(var(--u) * 19) var(--num-font); color: rgba(40, 50, 120, .38); white-space: nowrap;
}
.card .pend {
  position: absolute; top: calc(var(--u) * 6); right: calc(var(--u) * 14);
  font: 700 calc(var(--u) * 19) var(--num-font); color: #fff;
}
.card.sel { background: var(--pri); color: #fff; box-shadow: 0 calc(var(--u) * 8) 0 var(--pri-d); }
.card.sel .expr { color: rgba(255, 255, 255, .55); }
.card.sel .expr.hide { visibility: hidden; }
.card.win { background: var(--green); color: #fff; box-shadow: 0 calc(var(--u) * 8) 0 var(--green-d); z-index: 2; }
.card.win .expr, .card.bad .expr { visibility: hidden; }
.card.bad { background: #ff8f8f; color: #fff; box-shadow: 0 calc(var(--u) * 8) 0 #c9555a; }
.card.gone { opacity: 0; z-index: 0; }
.card.moving { z-index: 1; }
.burst { position: absolute; inset: calc(var(--u) * -26); pointer-events: none; }
.burst i {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 16); height: calc(var(--u) * 26); margin: calc(var(--u) * -13) 0 0 calc(var(--u) * -8);
  border-radius: 40%; background: var(--green); opacity: 0; filter: blur(calc(var(--u) * 2));
  animation: ray .7s ease-out forwards;
}
@keyframes ray {
  0% { opacity: .55; transform: rotate(var(--a)) translateY(calc(var(--u) * -60)) scaleY(.6); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--u) * -108)) scaleY(1.2); }
}

#ops {
  flex: none; display: flex; gap: calc(var(--u) * 22);
  margin-top: calc(var(--u) * 44);
}
.op {
  width: calc(var(--u) * 66); height: calc(var(--u) * 66);
  border-radius: calc(var(--u) * 17);
  background: var(--peach); color: var(--orange);
  box-shadow: 0 calc(var(--u) * 3) 0 var(--peach-d);
  display: grid; place-items: center;
  transition: background-color .1s, transform .08s;
}
.op svg { width: calc(var(--u) * 36); height: calc(var(--u) * 36); }
.op svg path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.op.sel { background: var(--orange); color: #fff; box-shadow: 0 calc(var(--u) * 3) 0 var(--orange-d); }
.op:active { transform: translateY(calc(var(--u) * 2)); }

#actions {
  flex: none; display: flex; justify-content: center; gap: calc(var(--u) * 50);
  margin-top: calc(var(--u) * 54);
}
.act {
  width: calc(var(--u) * 132); height: calc(var(--u) * 56);
  border-radius: calc(var(--u) * 26);
  background: var(--plain); color: var(--plain-ink);
  box-shadow: 0 calc(var(--u) * 6) 0 var(--plain-d);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 9);
  font-size: calc(var(--u) * 19); white-space: nowrap;
  transition: transform .08s, box-shadow .08s;
}
.act svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); flex: none; }
.act.hint { background: var(--amber); color: var(--amber-ink); box-shadow: 0 calc(var(--u) * 6) 0 var(--amber-d); }
.act:active { transform: translateY(calc(var(--u) * 4)); box-shadow: 0 calc(var(--u) * 2) 0 var(--plain-d); }
.act.hint:active { box-shadow: 0 calc(var(--u) * 2) 0 var(--amber-d); }
.act.off { opacity: .45; }
.act[hidden] { display: none; }

/* ---------- 结算页 ---------- */
#confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
#confetti i {
  position: absolute; top: -4%;
  border-radius: 2px; opacity: .9;
  animation: fall linear infinite;
}
@keyframes fall {
  from { transform: translateY(0) rotate(0); }
  to { transform: translateY(110vh) rotate(var(--r)); }
}
.r-left, .r-right { display: flex; flex-direction: column; align-items: center; flex: none; }
.r-hero { position: relative; margin-top: calc(var(--u) * 30); width: calc(var(--u) * 250); display: grid; place-items: center; }
.r-badge {
  width: calc(var(--u) * 150); height: calc(var(--u) * 150); border-radius: 50%;
  background: var(--pri); box-shadow: 0 calc(var(--u) * 8) 0 var(--pri-d);
  display: grid; place-items: center;
  animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.r-badge b {
  font: 800 calc(var(--u) * 84) var(--round-font); color: #fff; letter-spacing: calc(var(--u) * -2);
  text-shadow: 0 calc(var(--u) * 4) 0 rgba(20, 30, 110, .35);
}
.r-side {
  position: absolute; border-radius: 50%; display: grid; place-items: center;
  animation: pop .5s cubic-bezier(.2, 1.4, .4, 1) .15s both;
}
.r-side.a { left: calc(var(--u) * 8); top: calc(var(--u) * 26); width: calc(var(--u) * 56); height: calc(var(--u) * 56); background: var(--amber); color: var(--amber-ink); box-shadow: 0 calc(var(--u) * 4) 0 var(--amber-d); }
.r-side.b { right: calc(var(--u) * 4); top: calc(var(--u) * 62); width: calc(var(--u) * 64); height: calc(var(--u) * 64); background: var(--mint); color: var(--mint-ink); box-shadow: 0 calc(var(--u) * 4) 0 var(--mint-d); z-index: 1; }
.r-side svg { width: 54%; height: 54%; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#result.sad .r-badge { background: #b9b4c9; box-shadow: 0 calc(var(--u) * 8) 0 #8d87a3; }
#result.sad .r-badge b { text-shadow: 0 calc(var(--u) * 4) 0 rgba(0, 0, 0, .18); }
#result.sad .r-side { display: none; }
#r-title { margin-top: calc(var(--u) * 26); font-size: calc(var(--u) * 30); font-weight: 800; }
#r-sub { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 16); color: var(--ink-2); }
#r-sub b, #r-prog-text b { color: var(--green-d); font-weight: 600; }
#r-sub em, #r-prog-text em { color: var(--pri); font-style: normal; font-weight: 600; }
.r-card {
  margin-top: calc(var(--u) * 20);
  width: calc(var(--u) * 331); min-height: calc(var(--u) * 104);
  border-radius: calc(var(--u) * 30);
  background: #fff; box-shadow: 0 calc(var(--u) * 5) 0 var(--edge);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--u) * 12);
}
.r-card small { font-size: calc(var(--u) * 15); color: var(--ink-2); }
#r-value { margin-top: calc(var(--u) * 8); font: 400 calc(var(--u) * 24) var(--num-font); color: var(--ink); }
#r-value.big { font: 700 calc(var(--u) * 40) var(--round-font); color: var(--pri); margin-top: calc(var(--u) * 2); }
#r-extra { font-size: calc(var(--u) * 13); color: var(--ink-2); margin-top: calc(var(--u) * 2); }
#r-extra:empty { display: none; }
#r-prog { margin-top: calc(var(--u) * 20); display: flex; flex-direction: column; align-items: center; }
#r-prog[hidden] { display: none; }
#r-prog-text { font-size: calc(var(--u) * 16); }
.r-bar { margin-top: calc(var(--u) * 9); width: calc(var(--u) * 298); height: calc(var(--u) * 11); border-radius: calc(var(--u) * 6); background: var(--edge); overflow: hidden; }
.r-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--green); transition: width .7s cubic-bezier(.2, .8, .3, 1) .2s; }
#r-next {
  margin-top: calc(var(--u) * 24);
  width: calc(var(--u) * 331); height: calc(var(--u) * 68); border-radius: calc(var(--u) * 32);
  background: var(--pri); color: #fff; box-shadow: 0 calc(var(--u) * 7) 0 var(--pri-d);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 14);
  font-size: calc(var(--u) * 24);
  transition: transform .08s, box-shadow .08s;
}
#r-next svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
#r-next:active { transform: translateY(calc(var(--u) * 5)); box-shadow: 0 calc(var(--u) * 2) 0 var(--pri-d); }
#r-row { margin-top: calc(var(--u) * 24); width: calc(var(--u) * 331); display: flex; gap: calc(var(--u) * 30); }
#r-row button {
  flex: 1; height: calc(var(--u) * 54); border-radius: calc(var(--u) * 27);
  background: var(--pri-pale); color: var(--pri-d); box-shadow: 0 calc(var(--u) * 5) 0 var(--pri-soft-d);
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10);
  font-size: calc(var(--u) * 20);
}
#r-row svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
#r-row button:active { transform: translateY(calc(var(--u) * 3)); box-shadow: 0 calc(var(--u) * 2) 0 var(--pri-soft-d); }

/* ---------- 玩法说明 ---------- */
#help-body {
  flex: 1; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(var(--u) * 8) calc(var(--u) * 28) calc(var(--u) * 30 + var(--sab));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--u) * 14); align-content: start;
}
.h-card {
  background: #fff; border-radius: calc(var(--u) * 24); box-shadow: 0 calc(var(--u) * 5) 0 var(--edge);
  padding: calc(var(--u) * 16) calc(var(--u) * 18);
  font-size: calc(var(--u) * 14.5); line-height: 1.7; color: var(--ink-2);
}
.h-card h3 { font-size: calc(var(--u) * 17); color: var(--ink); margin-bottom: calc(var(--u) * 4); display: flex; align-items: center; gap: calc(var(--u) * 8); }
.h-card h3 i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; flex: none; }
.h-card b { color: var(--pri); font-weight: 600; }
.h-demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--u) * 8) calc(var(--u) * 6); margin: calc(var(--u) * 12) 0 calc(var(--u) * 6); font: 400 calc(var(--u) * 20) var(--num-font); color: var(--ink); }
.h-demo span {
  width: calc(var(--u) * 36); height: calc(var(--u) * 36); border-radius: calc(var(--u) * 10);
  background: var(--pri-soft); box-shadow: 0 calc(var(--u) * 3) 0 var(--pri-soft-d);
  display: grid; place-items: center;
}
.h-demo span.ok { background: var(--green); color: #fff; box-shadow: 0 calc(var(--u) * 3) 0 var(--green-d); }
.h-demo em { font-style: normal; color: var(--orange); font-weight: 700; }

/* ---------- 弹窗 / 提示 ---------- */
#modal {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(36, 31, 58, .42);
  display: grid; place-items: center;
  animation: fadein .18s ease-out;
}
#modal[hidden] { display: none; }
.sheet {
  width: calc(var(--u) * 318); max-height: 84%;
  background: #fff; border-radius: calc(var(--u) * 28);
  box-shadow: 0 calc(var(--u) * 7) 0 var(--edge);
  padding: calc(var(--u) * 24) calc(var(--u) * 22) calc(var(--u) * 24);
  display: flex; flex-direction: column;
}
.sheet h2 { font-size: calc(var(--u) * 22); text-align: center; font-weight: 800; flex: none; }
.sheet .body { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 15); color: var(--ink-2); line-height: 1.6; overflow-y: auto; text-align: center; }
.sheet .btns { display: flex; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 20); flex: none; }
.sheet .btns button {
  flex: 1; height: calc(var(--u) * 50); border-radius: calc(var(--u) * 22);
  background: var(--plain); color: var(--plain-ink); box-shadow: 0 calc(var(--u) * 5) 0 var(--plain-d);
  font-size: calc(var(--u) * 17); font-weight: 600; margin-bottom: calc(var(--u) * 5);
}
.sheet .btns button.pri { background: var(--pri); color: #fff; box-shadow: 0 calc(var(--u) * 5) 0 var(--pri-d); }
.sheet .btns button.danger { background: var(--rose); color: var(--rose-ink); box-shadow: 0 calc(var(--u) * 5) 0 var(--rose-d); }
.sheet .btns button:active { transform: translateY(calc(var(--u) * 3)); }

#toast {
  position: absolute; left: 50%; bottom: calc(var(--u) * 150 + var(--sab)); z-index: 30;
  transform: translate(-50%, calc(var(--u) * 10));
  background: rgba(36, 31, 58, .9); color: #fff;
  padding: calc(var(--u) * 9) calc(var(--u) * 18); border-radius: calc(var(--u) * 20);
  font-size: calc(var(--u) * 14.5); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 横屏（iPad 横放 / 桌面）：设计稿基准 700 × 500 ---------- */
@media (orientation: landscape) {
  :root { --u: min(100vw / 700, 100vh / 500); }
  @supports (height: 100dvh) {
    :root { --u: min(100vw / 700, 100dvh / 500); }
  }
  #app { width: calc(var(--u) * 700); }

  /* 首页：四个模式排成一行 */
  .logo { margin-top: calc(var(--u) * 78); }
  .modes { grid-template-columns: repeat(4, calc(var(--u) * 152)); width: auto; margin-top: calc(var(--u) * 44); }
  .mode { padding: calc(var(--u) * 16) calc(var(--u) * 14) 0; }
  .mode b { font-size: calc(var(--u) * 28); }
  .mode .chip { right: calc(var(--u) * 10); font-size: calc(var(--u) * 10); }

  /* 选关：8 × 3 */
  .bar { margin-top: calc(var(--u) * 8); }
  .page { padding: 0 calc(var(--u) * 44) calc(var(--u) * 10); }
  .grid { grid-template-columns: repeat(8, calc(var(--u) * 66)); gap: calc(var(--u) * 12); }
  .cell { height: calc(var(--u) * 64); }
  .exam { margin-top: calc(var(--u) * 24); }

  /* 游戏：左边牌面，右边运算符和按钮 */
  #game.active {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "bar bar" "pills pills" "board ops" "board actions";
    justify-content: center; align-content: start;
    column-gap: calc(var(--u) * 62);
  }
  #game .bar { grid-area: bar; width: auto; height: calc(var(--u) * 58); }
  #game .back { left: 0; }
  #pills { grid-area: pills; width: auto; }
  #board { grid-area: board; margin-top: calc(var(--u) * 12); }
  #ops {
    grid-area: ops; align-self: end;
    display: grid; grid-template-columns: repeat(2, calc(var(--u) * 104));
    gap: calc(var(--u) * 22);
    margin-top: calc(var(--u) * 12);
  }
  .op { width: calc(var(--u) * 104); height: calc(var(--u) * 104); border-radius: calc(var(--u) * 24); box-shadow: 0 calc(var(--u) * 4) 0 var(--peach-d); }
  .op.sel { box-shadow: 0 calc(var(--u) * 4) 0 var(--orange-d); }
  .op svg { width: calc(var(--u) * 54); height: calc(var(--u) * 54); }
  #actions { grid-area: actions; align-self: start; gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 40); }
  .act { width: calc(var(--u) * 107); font-size: calc(var(--u) * 16.5); gap: calc(var(--u) * 6); }
  .act svg { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }

  /* 结算：左边徽章和标题，右边成绩和按钮 */
  #result.active { flex-direction: row; justify-content: center; align-items: center; gap: calc(var(--u) * 40); }
  .r-hero { margin-top: 0; }
  .r-badge { width: calc(var(--u) * 180); height: calc(var(--u) * 180); }
  .r-badge b { font-size: calc(var(--u) * 100); }
  .r-card { margin-top: 0; }

  /* 玩法说明：两列 */
  #help-body { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: calc(var(--u) * 44); padding-right: calc(var(--u) * 44); }
  #toast { bottom: calc(var(--u) * 30 + var(--sab)); }
}