@font-face { font-family: 'SCC Serif'; font-weight: 600; font-display: swap; src: url(../vendor/fonts/serif-600.woff2) format('woff2'); }
@font-face { font-family: 'SCC Serif'; font-weight: 900; font-display: swap; src: url(../vendor/fonts/serif-900.woff2) format('woff2'); }
@font-face { font-family: 'SCC Num'; font-weight: 500; font-display: swap; src: url(../vendor/fonts/barlow-condensed-500.woff2) format('woff2'); }
@font-face { font-family: 'SCC Num'; font-weight: 700; font-display: swap; src: url(../vendor/fonts/barlow-condensed-700.woff2) format('woff2'); }

:root {
  --u: 0.5px;
  --pop: "SCC Pop", "PingFang SC", "Microsoft YaHei", sans-serif;
  --navy: #17203d;
  --yellow: #ffd23f;
  --paper: #fff6e2;
  --gold-1: #f3e4c2;
  --gold-2: #e0bd76;
  --gold-3: #9c7a45;
  --ink: #141826;
  --ink-2: #2a3045;
  --cream: #fbf7f0;
  --cobalt: #2f5ee8;
  --coral: #ef6f6c;
  --mint: #2f9e6a;
  --hair: rgba(224,189,118,.4);
  --font-ui: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-num: "SCC Num", "Bahnschrift", "Roboto Condensed", "Arial Narrow", sans-serif;
  --font-serif: "SCC Serif", "Noto Serif SC", "Songti SC", "STSong", serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #d9d0c3; color: var(--ink); font-family: var(--font-serif); }
body { background: radial-gradient(1200px 800px at 50% 40%, #efe7dc, #cfc5b6); }

#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage {
  position: relative; width: 360px; height: 640px; overflow: hidden;
  background: #eee5d8;
  box-shadow: 0 30px 120px rgba(60,40,20,.35), 0 0 0 1px rgba(255,255,255,.4);
  user-select: none; -webkit-user-select: none; touch-action: none;
}
@media (max-aspect-ratio: 10/16) { #stage { box-shadow: none; } }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui button, #ui input, #ui a, .modal, .screen, .tray { pointer-events: auto; }
.hidden { display: none !important; }
body:not(.ready) #ui { opacity: 0; }
#ui { transition: opacity .8s ease; }
button { font-family: inherit; cursor: pointer; border: 0; }

/* ---------- 通用按钮 ---------- */
.btn-gold {
  position: relative; overflow: hidden; display: block;
  width: calc(var(--u) * 460); height: calc(var(--u) * 96); margin: 0 auto;
  border-radius: calc(var(--u) * 48);
  font-family: var(--font-serif); font-size: calc(var(--u) * 34); font-weight: 900;
  letter-spacing: calc(var(--u) * 12); text-indent: calc(var(--u) * 12);
  color: #1d1408; text-align: center; line-height: calc(var(--u) * 96); text-decoration: none;
  background: linear-gradient(180deg, #f8ecd0 0%, #e3c68c 50%, #c09a5c 100%);
  box-shadow: 0 calc(var(--u)*16) calc(var(--u)*40) rgba(150,110,50,.35), inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(120,80,30,.25);
  transition: transform .15s ease, filter .15s ease;
}
.btn-gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shine 4s ease-in-out infinite;
}
.btn-gold:active { transform: scale(.97); filter: brightness(.96); }
@keyframes shine { 0%, 60% { left: -50%; } 90%, 100% { left: 130%; } }

.btn-ghost {
  display: block; margin: calc(var(--u)*18) auto 0;
  width: calc(var(--u) * 460); height: calc(var(--u) * 78);
  border-radius: calc(var(--u) * 40);
  background: rgba(20,24,38,.55);
  border: 1px solid var(--hair);
  color: var(--gold-1); font-family: var(--font-serif); font-weight: 600;
  font-size: calc(var(--u) * 27); letter-spacing: calc(var(--u)*8); text-indent: calc(var(--u)*8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:active { background: rgba(224,189,118,.18); }

.btn-mute {
  position: absolute; right: calc(var(--u)*22); top: calc(var(--u)*22); z-index: 30;
  width: calc(var(--u)*58); height: calc(var(--u)*58); border-radius: 50%;
  background: rgba(20,24,38,.5); border: 1px solid var(--hair);
  color: var(--gold-1); font-size: calc(var(--u)*24);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-mute.off { opacity: .45; text-decoration: line-through; }
body.playing .btn-mute { top: auto; bottom: calc(var(--u)*250); right: calc(var(--u)*20); opacity: .7; }

/* ---------- 标题页：潮玩贴纸风 ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; z-index: 20; }
#screen-title { padding: calc(var(--u)*110) 0 calc(var(--u)*56); }
.title-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(calc(var(--u)*620) calc(var(--u)*420) at 50% 14%, rgba(255,248,230,.75), rgba(255,248,230,0) 70%),
    linear-gradient(0deg, rgba(23,32,61,.5) 0%, rgba(23,32,61,0) 30%);
}
.logo-wrap { position: relative; transform: rotate(-4deg); }
.logo { margin: 0; font-family: var(--pop); font-weight: 400; line-height: .92; text-align: center; color: #fff6e2; }
.logo span { display: block; paint-order: stroke fill; -webkit-text-stroke: calc(var(--u)*16) var(--navy); }
.logo-1 { font-size: calc(var(--u)*190); letter-spacing: calc(var(--u)*-4); text-shadow: calc(var(--u)*10) calc(var(--u)*14) 0 #ef6f6c; }
.logo-2 { font-size: calc(var(--u)*150); color: #ffd23f; letter-spacing: calc(var(--u)*24); text-indent: calc(var(--u)*24); margin-top: calc(var(--u)*6); text-shadow: calc(var(--u)*10) calc(var(--u)*14) 0 #2f5ee8; }
.sticker {
  position: absolute; font-family: var(--pop); color: #fff6e2; background: #e2453d; border: calc(var(--u)*5) solid var(--navy);
  box-shadow: calc(var(--u)*6) calc(var(--u)*8) 0 var(--navy); white-space: nowrap;
}
.sticker-x { left: calc(var(--u)*-40); top: calc(var(--u)*210); width: calc(var(--u)*124); height: calc(var(--u)*124); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: calc(var(--u)*34); line-height: 1.05; transform: rotate(14deg); animation: wobble 3s ease-in-out infinite; }
.sticker-slogan { left: 50%; bottom: calc(var(--u)*-74); padding: calc(var(--u)*8) calc(var(--u)*26); border-radius: calc(var(--u)*14); background: #fff6e2; color: var(--navy); font-size: calc(var(--u)*34); transform: translateX(-46%) rotate(3deg); }
@keyframes wobble { 0%, 100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(-4deg) scale(1.06); } }
.title-spacer { flex: 1; }
.btn-pop, .btn-pop-2 {
  display: block; margin: 0 auto; font-family: var(--pop); font-weight: 400; color: var(--navy);
  border: calc(var(--u)*6) solid var(--navy); border-radius: calc(var(--u)*60);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn-pop {
  width: calc(var(--u)*440); height: calc(var(--u)*124); font-size: calc(var(--u)*68); letter-spacing: calc(var(--u)*8); text-indent: calc(var(--u)*8);
  background: linear-gradient(180deg, #ffe066, #ffc21f); box-shadow: 0 calc(var(--u)*14) 0 var(--navy);
  animation: breathe 1.6s ease-in-out infinite;
}
.btn-pop-2 {
  margin-top: calc(var(--u)*34); width: calc(var(--u)*300); height: calc(var(--u)*86); font-size: calc(var(--u)*40); letter-spacing: calc(var(--u)*6); text-indent: calc(var(--u)*6);
  background: #fff6e2; box-shadow: 0 calc(var(--u)*10) 0 var(--navy);
}
.btn-pop:active, .btn-pop-2:active { transform: translateY(calc(var(--u)*10)); box-shadow: 0 calc(var(--u)*3) 0 var(--navy); animation: none; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.disclaimer { margin: calc(var(--u)*30) 0 0; color: rgba(255,246,226,.6); font-size: calc(var(--u)*19); letter-spacing: calc(var(--u)*6); }

/* ---------- HUD ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--u)*22) calc(var(--u)*22) 0; z-index: 5; }
.hud-top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(var(--u)*12); }
.hud-card {
  min-width: calc(var(--u)*196); padding: calc(var(--u)*12) calc(var(--u)*20) calc(var(--u)*14);
  border-radius: calc(var(--u)*26);
  background: rgba(255,252,246,.86);
  box-shadow: 0 calc(var(--u)*10) calc(var(--u)*30) rgba(90,60,30,.18), inset 0 1px 0 #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.hud-cycle { text-align: right; }
.hud-label { display: block; font-size: calc(var(--u)*19); font-weight: 600; color: rgba(20,24,38,.55); letter-spacing: calc(var(--u)*3); }
.hud-card b { font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*52); line-height: 1.05; color: var(--ink); }
.hud-card small { font-size: calc(var(--u)*20); font-weight: 600; color: rgba(20,24,38,.6); margin-left: calc(var(--u)*4); }
.hud-orders b { color: #b8862f; }
.hud-cycle b { color: var(--coral); }
.hud-clock {
  flex: 0 0 calc(var(--u)*170); text-align: center; padding: calc(var(--u)*10) 0 calc(var(--u)*14);
  border-radius: calc(var(--u)*26); background: rgba(20,24,38,.82); color: #fff;
  box-shadow: 0 calc(var(--u)*10) calc(var(--u)*30) rgba(20,24,38,.3);
}
.hud-clock .hud-label { color: rgba(243,228,194,.7); }
.hud-clock b { display: block; font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*58); line-height: 1; color: var(--gold-1); }
.hud-bar { margin: calc(var(--u)*8) auto 0; width: 76%; height: calc(var(--u)*6); border-radius: 9px; background: rgba(255,255,255,.15); overflow: hidden; }
.hud-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-2), #fff1cc); transform-origin: left; }
#hud.urgent .hud-clock { background: rgba(200,40,50,.9); animation: pulse .5s ease-in-out infinite alternate; }
#hud.urgent .hud-clock b { color: #fff; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.05); } }
.hud-combo {
  margin: calc(var(--u)*14) auto 0; width: max-content; padding: calc(var(--u)*8) calc(var(--u)*26);
  border-radius: 99px; background: linear-gradient(180deg, #2a3045, #141826); color: var(--gold-1);
  font-weight: 900; font-size: calc(var(--u)*24); letter-spacing: calc(var(--u)*4);
  opacity: 0; transform: translateY(calc(var(--u)*-10)) scale(.9); transition: opacity .2s, transform .2s;
  box-shadow: 0 calc(var(--u)*8) calc(var(--u)*20) rgba(20,24,38,.3);
}
.hud-combo b { font-family: var(--font-num); font-size: calc(var(--u)*32); margin-left: calc(var(--u)*10); color: #fff1cc; }
.hud-combo.on { opacity: 1; transform: none; }
.hud-combo i { font-style: normal; font-size: calc(var(--u)*20); margin-left: calc(var(--u)*12); color: rgba(255,241,204,.75); }
.hud-card b.neg { color: var(--coral); }
.launch-meta b.plus { color: #8de6b4; font-weight: 900; }
.launch-meta b.minus { color: #ff8a80; font-weight: 900; }
.tray.stun .part { filter: grayscale(.8) brightness(.92); }
.hud-combo.hot { background: linear-gradient(180deg, #d9463f, #a8242a); animation: pulse .35s ease-in-out infinite alternate; }

/* ---------- 订单气泡 ---------- */
.order {
  position: absolute; left: 0; top: 0; z-index: 6; will-change: transform;
  padding: calc(var(--u)*12) calc(var(--u)*16) calc(var(--u)*14);
  border-radius: calc(var(--u)*24);
  background: rgba(255,252,246,.94);
  box-shadow: 0 calc(var(--u)*14) calc(var(--u)*34) rgba(60,40,20,.25), inset 0 1px 0 #fff;
}
.order::after {
  content: ""; position: absolute; left: calc(50% + var(--tail, 0px)); top: calc(var(--u)*-12); margin-left: calc(var(--u)*-12);
  border: calc(var(--u)*12) solid transparent; border-top: 0; border-bottom-color: rgba(255,252,246,.94);
}
.order.pop { animation: orderPop .25s ease; }
@keyframes orderPop { 0% { scale: .92; } 60% { scale: 1.04; } 100% { scale: 1; } }
.order-head { display: flex; justify-content: space-between; gap: calc(var(--u)*16); font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*19); letter-spacing: calc(var(--u)*2); color: rgba(20,24,38,.5); margin-bottom: calc(var(--u)*6); white-space: nowrap; }
.order-head b { color: var(--coral); font-family: var(--font-serif); font-weight: 900; }
.order.no-tail::after { display: none; }
.order-row { display: flex; flex-wrap: nowrap; justify-content: center; gap: calc(var(--u)*8); padding: calc(var(--u)*8) calc(var(--u)*16); }
/* 每种零件一个固定颜色：工序单和按钮一一对应 */
.part-wheel { --pc: #3a3f4c; --pt: #e7e8ec; }
.part-body { --pc: #2f5ee8; --pt: #dfe7ff; }
.part-steer { --pc: #d9822b; --pt: #fbe9d4; }
.part-screen { --pc: #16a8b8; --pt: #d5f3f5; }
.order-item {
  position: relative; width: calc(var(--u)*76); height: calc(var(--u)*76); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pt); box-shadow: inset 0 0 0 calc(var(--u)*4) var(--pc);
  transition: opacity .15s, transform .15s;
}
.order-item img { width: calc(var(--u)*60); height: calc(var(--u)*60); display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.order-item.done { opacity: .28; transform: scale(.78); }
.order-item.done::after {
  content: "✓"; position: absolute; right: calc(var(--u)*-4); bottom: calc(var(--u)*-4);
  width: calc(var(--u)*30); height: calc(var(--u)*30); border-radius: 50%; background: var(--mint); color: #fff;
  font-size: calc(var(--u)*20); line-height: calc(var(--u)*30); text-align: center; font-weight: 900;
}
.order-item.cur { transform: scale(1.22); z-index: 1; background: #fff; box-shadow: inset 0 0 0 calc(var(--u)*6) var(--pc), 0 0 0 calc(var(--u)*5) rgba(224,189,118,.9), 0 calc(var(--u)*8) calc(var(--u)*18) rgba(0,0,0,.2); margin: 0 calc(var(--u)*8); }
.order-item.cur::before {
  content: ""; position: absolute; inset: calc(var(--u)*-14); border-radius: 50%;
  border: calc(var(--u)*3) solid rgba(224,189,118,.8);
  animation: curPulse .6s ease-in-out infinite alternate;
}
@keyframes curPulse { from { transform: scale(.92); opacity: 1; } to { transform: scale(1.08); opacity: .4; } }

/* ---------- 零件按钮 ---------- */
.tray {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u)*12);
  padding: calc(var(--u)*22) calc(var(--u)*22) calc(var(--u)*30 + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(238,229,216,0), rgba(238,229,216,.55) 22%, rgba(228,218,204,.85));
}
.part {
  position: relative; height: calc(var(--u)*176); border-radius: calc(var(--u)*30);
  background: linear-gradient(180deg, #fffdf9, var(--pt, #f2ebe0));
  border-top: calc(var(--u)*8) solid var(--pc, #ccc);
  box-shadow: 0 calc(var(--u)*10) 0 #d6cab9, 0 calc(var(--u)*18) calc(var(--u)*30) rgba(80,55,30,.25), inset 0 1px 0 #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink); transition: transform .06s ease, box-shadow .06s ease, opacity .2s;
  touch-action: manipulation;
}
.part-icon { width: calc(var(--u)*96); height: calc(var(--u)*96); display: block; }
.part-icon img { width: 100%; height: 100%; display: block; pointer-events: none; }
.part-name { margin-top: calc(var(--u)*-2); font-weight: 900; font-size: calc(var(--u)*27); letter-spacing: calc(var(--u)*2); color: var(--pc); }
.part-kbd { position: absolute; right: calc(var(--u)*16); top: calc(var(--u)*12); font-family: var(--font-num); font-size: calc(var(--u)*18); color: rgba(20,24,38,.3); }
.part-lock { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; font-size: calc(var(--u)*40); }
.part.locked { opacity: .5; filter: grayscale(1); }
.part.locked .part-icon, .part.locked .part-name { opacity: .25; }
.part.locked .part-lock { display: flex; }
.part:active, .part.hit { transform: translateY(calc(var(--u)*8)); box-shadow: 0 calc(var(--u)*2) 0 #d6cab9, 0 calc(var(--u)*6) calc(var(--u)*14) rgba(80,55,30,.25), inset 0 1px 0 #fff; }
.part.hit { animation: hit .14s ease; }
@keyframes hit { 0% { transform: translateY(calc(var(--u)*8)) scale(.96); } 100% { transform: none; } }
.part.bad { animation: bad .35s ease, badTint .6s ease; }
@keyframes bad { 0%,100% { translate: 0; } 20% { translate: calc(var(--u)*-10) 0; } 40% { translate: calc(var(--u)*10) 0; } 60% { translate: calc(var(--u)*-6) 0; } 80% { translate: calc(var(--u)*6) 0; } }
@keyframes badTint { 0%, 40% { background: linear-gradient(180deg, #ffe3df, #f5c4bd); } 100% { background: linear-gradient(180deg, #fffdf9, #f2ebe0); } }
.part.nope { animation: bad .3s ease; }
.part.fresh { animation: fresh .9s ease; }
.part.hint { box-shadow: 0 calc(var(--u)*10) 0 #d6cab9, 0 0 0 calc(var(--u)*5) var(--gold-2), 0 calc(var(--u)*18) calc(var(--u)*40) rgba(224,189,118,.6), inset 0 1px 0 #fff; }
@keyframes fresh { 0% { transform: scale(.7); box-shadow: 0 0 0 0 rgba(224,189,118,.9); } 50% { transform: scale(1.08); box-shadow: 0 0 0 calc(var(--u)*16) rgba(224,189,118,0); } 100% { transform: none; } }

/* ---------- 出厂仪式 ---------- */
.launch {
  position: absolute; left: calc(var(--u)*24); right: calc(var(--u)*24); top: calc(var(--u)*250); z-index: 7;
  display: flex; align-items: center; gap: calc(var(--u)*20);
  padding: calc(var(--u)*18) calc(var(--u)*26) calc(var(--u)*18) calc(var(--u)*18);
  border-radius: calc(var(--u)*28);
  background: linear-gradient(180deg, rgba(26,30,46,.95), rgba(12,14,22,.95));
  border: 1px solid var(--hair);
  box-shadow: 0 calc(var(--u)*20) calc(var(--u)*50) rgba(10,12,20,.35);
  opacity: 0; transform: translateY(calc(var(--u)*-30)) scale(.96); pointer-events: none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,1.4,.4,1);
}
.launch.show { opacity: 1; transform: none; }
.launch-seal {
  flex: 0 0 calc(var(--u)*120); height: calc(var(--u)*120); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: calc(var(--u)*5) solid var(--gold-2); color: var(--gold-2);
  box-shadow: inset 0 0 0 calc(var(--u)*5) rgba(12,14,22,1), inset 0 0 0 calc(var(--u)*7) var(--gold-2);
  font-weight: 900; font-size: calc(var(--u)*40); letter-spacing: calc(var(--u)*2); transform: rotate(-12deg);
}
.launch.long .launch-seal { font-size: calc(var(--u)*30); }
.launch.show .launch-seal { animation: stamp .35s ease .05s both; }
@keyframes stamp { 0% { transform: rotate(-12deg) scale(2.2); opacity: 0; } 70% { transform: rotate(-12deg) scale(.92); opacity: 1; } 100% { transform: rotate(-12deg) scale(1); } }
.launch.bad .launch-seal { border-color: #e04a44; color: #ff6a5f; box-shadow: inset 0 0 0 calc(var(--u)*5) rgba(12,14,22,1), inset 0 0 0 calc(var(--u)*7) #e04a44; }
.launch-text { min-width: 0; flex: 1; }
.launch-model { color: var(--gold-1); font-weight: 900; font-size: calc(var(--u)*42); line-height: 1.15; white-space: nowrap; }
.launch-model b { background: linear-gradient(180deg, #fffaf0, #e0bd76 60%, #a8803f); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: calc(var(--u)*12); }
.launch-model span { font-family: var(--font-num); font-weight: 700; color: var(--gold-1); }
.launch-claim { margin-top: calc(var(--u)*6); color: #fff; font-weight: 900; font-size: calc(var(--u)*30); letter-spacing: calc(var(--u)*2); line-height: 1.3; }
.launch.bad .launch-claim { color: #ffd6d0; }
.launch-meta { margin-top: calc(var(--u)*8); color: rgba(243,228,194,.6); font-size: calc(var(--u)*20); font-weight: 600; letter-spacing: calc(var(--u)*1); }

/* ---------- 提示 ---------- */
.toast {
  position: absolute; left: 50%; top: 64%; z-index: 9; min-width: calc(var(--u)*300);
  padding: calc(var(--u)*20) calc(var(--u)*44); border-radius: calc(var(--u)*32);
  background: var(--paper); color: var(--navy); text-align: center; white-space: nowrap;
  border: calc(var(--u)*6) solid var(--navy); box-shadow: 0 calc(var(--u)*12) 0 var(--navy);
  transform: translate(-50%, -50%) scale(.8) rotate(-2deg); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .25s cubic-bezier(.2,1.4,.4,1);
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
.toast small { display: block; font-family: var(--pop); color: rgba(23,32,61,.7); font-size: calc(var(--u)*30); }
.toast b { display: block; font-family: var(--pop); font-weight: 400; font-size: calc(var(--u)*52); }
.toast img { display: block; width: calc(var(--u)*120); height: calc(var(--u)*120); margin: calc(var(--u)*4) auto 0; }
.toast.big b { font-size: calc(var(--u)*120); line-height: 1.05; color: var(--yellow); paint-order: stroke fill; -webkit-text-stroke: calc(var(--u)*12) var(--navy); text-shadow: calc(var(--u)*6) calc(var(--u)*9) 0 #ef6f6c; }
.count {
  position: absolute; left: 50%; top: 36%; z-index: 9; transform: translate(-50%, -50%);
  font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*220); color: #fff;
  -webkit-text-stroke: calc(var(--u)*4) rgba(200,40,50,.9); opacity: 0; pointer-events: none;
  text-shadow: 0 calc(var(--u)*10) calc(var(--u)*30) rgba(200,40,50,.4);
}
.count.show { animation: count .9s ease forwards; }
@keyframes count { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } 20% { opacity: .95; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }

/* ---------- 测试场 ---------- */
.testbar { position: absolute; left: 0; right: 0; top: 0; z-index: 6; padding: calc(var(--u)*44) calc(var(--u)*30) calc(var(--u)*60); text-align: center; background: linear-gradient(180deg, rgba(23,32,61,.55), rgba(23,32,61,0)); }
.test-title { display: inline-block; font-family: var(--pop); font-size: calc(var(--u)*84); color: var(--yellow); paint-order: stroke fill; -webkit-text-stroke: calc(var(--u)*12) var(--navy); text-shadow: calc(var(--u)*6) calc(var(--u)*9) 0 #ef6f6c; transform: rotate(-3deg); }
.test-sub { margin: calc(var(--u)*10) auto 0; width: max-content; padding: calc(var(--u)*6) calc(var(--u)*20); border-radius: calc(var(--u)*12); background: var(--paper); color: var(--navy); border: calc(var(--u)*4) solid var(--navy); font-family: var(--pop); font-size: calc(var(--u)*26); transform: rotate(2deg); }
.test-stats { margin-top: calc(var(--u)*22); display: flex; justify-content: center; gap: calc(var(--u)*18); }
.test-stats span { padding: calc(var(--u)*6) calc(var(--u)*22); border-radius: 99px; border: calc(var(--u)*4) solid var(--navy); box-shadow: calc(var(--u)*4) calc(var(--u)*5) 0 var(--navy); font-family: var(--pop); font-size: calc(var(--u)*30); color: var(--navy); background: #8de6b4; }
.test-stats span:last-child { background: #ff8a80; }
.test-stats b { font-weight: 400; font-size: calc(var(--u)*40); margin-left: calc(var(--u)*8); }
.btn-skip { position: absolute; right: calc(var(--u)*24); bottom: calc(var(--u)*-70); padding: calc(var(--u)*8) calc(var(--u)*26); border-radius: 99px; background: var(--paper); color: var(--navy); border: calc(var(--u)*4) solid var(--navy); box-shadow: 0 calc(var(--u)*5) 0 var(--navy); font-family: var(--pop); font-size: calc(var(--u)*28); }

/* ---------- 结算：潮玩贴纸风 ---------- */
#screen-result { overflow-y: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; background: rgba(23,32,61,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.result-sheet {
  position: relative; width: calc(var(--u)*660); margin: calc(var(--u)*54) 0 calc(var(--u)*24); padding: calc(var(--u)*56) calc(var(--u)*30) calc(var(--u)*30);
  border-radius: calc(var(--u)*44); color: var(--navy); background: var(--paper);
  border: calc(var(--u)*6) solid var(--navy); box-shadow: 0 calc(var(--u)*16) 0 var(--navy);
  animation: sheetIn .45s cubic-bezier(.2,1.3,.4,1);
}
@keyframes sheetIn { from { transform: translateY(calc(var(--u)*80)) rotate(2deg); opacity: 0; } to { transform: none; opacity: 1; } }
.res-tag {
  position: absolute; left: 50%; top: calc(var(--u)*-34); transform: translateX(-50%) rotate(-3deg);
  padding: calc(var(--u)*10) calc(var(--u)*30); white-space: nowrap; border-radius: calc(var(--u)*16);
  font-family: var(--pop); font-size: calc(var(--u)*36); color: var(--paper); background: #e2453d;
  border: calc(var(--u)*5) solid var(--navy); box-shadow: calc(var(--u)*6) calc(var(--u)*8) 0 var(--navy);
}
.res-big { text-align: center; line-height: 1; }
.res-big b {
  font-family: var(--pop); font-weight: 400; font-size: calc(var(--u)*120); color: var(--yellow);
  paint-order: stroke fill; -webkit-text-stroke: calc(var(--u)*14) var(--navy); text-shadow: calc(var(--u)*8) calc(var(--u)*12) 0 #ef6f6c;
}
.res-big small { font-family: var(--pop); font-size: calc(var(--u)*44); margin-left: calc(var(--u)*8); }
.res-sub { margin-top: calc(var(--u)*10); text-align: center; color: rgba(23,32,61,.65); font-family: var(--font-ui); font-size: calc(var(--u)*22); font-weight: 600; }
.res-title {
  margin: calc(var(--u)*16) auto 0; width: max-content; padding: calc(var(--u)*6) calc(var(--u)*24); border-radius: 99px;
  font-family: var(--pop); font-size: calc(var(--u)*30); background: var(--yellow); border: calc(var(--u)*5) solid var(--navy);
  box-shadow: calc(var(--u)*5) calc(var(--u)*6) 0 var(--navy); transform: rotate(2deg);
}
.res-title b { font-weight: 400; }
.stats { margin-top: calc(var(--u)*22); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u)*10); }
.stats div { text-align: center; padding: calc(var(--u)*8) 0 calc(var(--u)*8); background: #fff; border: calc(var(--u)*4) solid var(--navy); border-radius: calc(var(--u)*22); }
.stats div:nth-child(2) { background: #dff5e6; }
.stats div:nth-child(3) { background: #ffe1dc; }
.stats b { display: block; font-family: var(--pop); font-weight: 400; font-size: calc(var(--u)*42); color: var(--navy); line-height: 1.05; }
.stats b small { font-size: calc(var(--u)*22); margin-left: calc(var(--u)*2); }
.stats span { font-family: var(--font-ui); font-size: calc(var(--u)*19); color: rgba(23,32,61,.6); font-weight: 700; }
.res-brands-h { margin-top: calc(var(--u)*18); text-align: center; font-family: var(--pop); font-size: calc(var(--u)*28); color: var(--navy); }
.res-brands { margin-top: calc(var(--u)*10); display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u)*10); }
.chip {
  padding: calc(var(--u)*4) calc(var(--u)*16); border-radius: calc(var(--u)*14); font-family: var(--pop); font-size: calc(var(--u)*25);
  background: #e2453d; color: var(--paper); border: calc(var(--u)*4) solid var(--navy); box-shadow: calc(var(--u)*4) calc(var(--u)*5) 0 var(--navy);
}
.chip:nth-child(odd) { transform: rotate(-2deg); }
.chip:nth-child(even) { transform: rotate(2deg); }
.chip.good { background: var(--yellow); color: var(--navy); }
.chip b { font-weight: 400; margin-left: calc(var(--u)*6); }
.res-best { margin-top: calc(var(--u)*14); text-align: center; color: rgba(23,32,61,.7); font-family: var(--font-ui); font-size: calc(var(--u)*22); font-weight: 700; }
.submit-row { display: flex; gap: calc(var(--u)*10); margin: calc(var(--u)*14) 0 0; }
.submit-row input {
  flex: 1; min-width: 0; height: calc(var(--u)*70); padding: 0 calc(var(--u)*24); border-radius: calc(var(--u)*35);
  border: calc(var(--u)*4) solid var(--navy); background: #fff; color: var(--navy); font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u)*26); outline: none;
}
.btn-icon { width: calc(var(--u)*70); height: calc(var(--u)*70); border-radius: 50%; background: #fff; border: calc(var(--u)*4) solid var(--navy); font-size: calc(var(--u)*30); }
.btn-line { height: calc(var(--u)*70); padding: 0 calc(var(--u)*28); border-radius: calc(var(--u)*35); background: #2f5ee8; color: var(--paper); border: calc(var(--u)*4) solid var(--navy); box-shadow: 0 calc(var(--u)*6) 0 var(--navy); font-family: var(--pop); font-size: calc(var(--u)*34); letter-spacing: calc(var(--u)*4); }
.btn-line:disabled { opacity: .5; }
.submit-msg { min-height: calc(var(--u)*28); margin: calc(var(--u)*6) 0 calc(var(--u)*10); text-align: center; color: #2f5ee8; font-family: var(--font-ui); font-size: calc(var(--u)*22); font-weight: 700; }
.result-sheet .btn-pop { width: 100%; height: calc(var(--u)*104); font-size: calc(var(--u)*58); animation: none; }
.result-sheet .btn-pop-2 { height: calc(var(--u)*76); font-size: calc(var(--u)*36); }
.row2 { display: flex; gap: calc(var(--u)*16); margin-top: calc(var(--u)*24); }
.row2 .btn-pop-2 { margin: 0; width: auto; flex: 1; }

/* ---------- 弹窗：排行榜 / 战报 ---------- */
.modal { position: absolute; inset: 0; z-index: 40; background: rgba(23,32,61,.5); display: flex; align-items: flex-end; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet {
  width: 100%; max-height: 88%; display: flex; flex-direction: column;
  border-radius: calc(var(--u)*44) calc(var(--u)*44) 0 0; padding: calc(var(--u)*28) calc(var(--u)*26) calc(var(--u)*24);
  background: var(--paper); color: var(--navy); border: calc(var(--u)*6) solid var(--navy); border-bottom: 0;
  animation: sheetUp .35s cubic-bezier(.2,1.2,.4,1);
}
@keyframes sheetUp { from { transform: translateY(40%); } to { transform: none; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h3 { margin: 0; font-family: var(--pop); font-weight: 400; font-size: calc(var(--u)*52); color: var(--yellow); paint-order: stroke fill; -webkit-text-stroke: calc(var(--u)*10) var(--navy); text-shadow: calc(var(--u)*5) calc(var(--u)*7) 0 #ef6f6c; transform: rotate(-2deg); }
.btn-close { width: calc(var(--u)*64); height: calc(var(--u)*64); border-radius: 50%; background: #fff; color: var(--navy); border: calc(var(--u)*4) solid var(--navy); font-size: calc(var(--u)*26); font-weight: 900; }
.tabs { display: flex; gap: calc(var(--u)*10); margin: calc(var(--u)*22) 0 calc(var(--u)*14); }
.tab { flex: 1; height: calc(var(--u)*66); border-radius: 99px; background: #fff; color: var(--navy); border: calc(var(--u)*4) solid var(--navy); font-family: var(--pop); font-size: calc(var(--u)*28); }
.tab.active { background: var(--yellow); box-shadow: 0 calc(var(--u)*5) 0 var(--navy); transform: translateY(calc(var(--u)*-3)); }
.board-list { overflow-y: auto; min-height: calc(var(--u)*420); -webkit-overflow-scrolling: touch; padding: calc(var(--u)*4) calc(var(--u)*2); }
.board-row { display: flex; align-items: center; gap: calc(var(--u)*14); padding: calc(var(--u)*12) calc(var(--u)*10); margin-bottom: calc(var(--u)*10); background: #fff; border: calc(var(--u)*4) solid var(--navy); border-radius: calc(var(--u)*22); }
.board-row.me { background: #fff1b8; box-shadow: calc(var(--u)*5) calc(var(--u)*6) 0 var(--navy); }
.rk { flex: 0 0 calc(var(--u)*58); height: calc(var(--u)*58); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--pop); font-size: calc(var(--u)*28); color: var(--navy); background: #eef0f5; border: calc(var(--u)*3) solid var(--navy); }
.board-row:nth-child(1) .rk { background: var(--yellow); font-size: calc(var(--u)*34); }
.board-row:nth-child(2) .rk { background: #dfe6f2; font-size: calc(var(--u)*32); }
.board-row:nth-child(3) .rk { background: #f3c08f; font-size: calc(var(--u)*30); }
.board-row:nth-child(n+100) .rk { font-size: calc(var(--u)*22); }
.nm { flex: 1; min-width: 0; font-family: var(--font-ui); font-weight: 800; font-size: calc(var(--u)*27); color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt { display: block; margin-top: calc(var(--u)*4); font-weight: 600; font-size: calc(var(--u)*19); color: rgba(23,32,61,.55); overflow: hidden; text-overflow: ellipsis; }
.sc { font-family: var(--pop); font-size: calc(var(--u)*40); color: #2f5ee8; }
.board-empty { padding: calc(var(--u)*80) 0; text-align: center; color: rgba(23,32,61,.6); font-family: var(--pop); font-size: calc(var(--u)*32); line-height: 1.6; }
.board-empty small { font-family: var(--font-ui); font-size: calc(var(--u)*22); }
.sheet-share { align-items: center; }
.sheet-share img { max-width: 100%; max-height: calc(var(--u)*760); margin: calc(var(--u)*16) 0; border-radius: calc(var(--u)*16); border: calc(var(--u)*4) solid var(--navy); }
.share-tip { margin: 0 0 calc(var(--u)*18); color: rgba(23,32,61,.6); font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u)*22); }
.sheet-share .btn-pop { width: calc(var(--u)*420); height: calc(var(--u)*100); line-height: calc(var(--u)*88); font-size: calc(var(--u)*48); text-align: center; text-decoration: none; animation: none; }

.no-webgl #stage::before { content: "你的浏览器不支持 WebGL"; position: absolute; top: 45%; left: 0; right: 0; text-align: center; color: var(--ink); }