@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;
  --ink: #141826;
  --cobalt: #2f5ee8;
  --coral: #ef6f6c;
  --red: #e2453d;
  --mint: #2f9e6a;
  --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;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
input { -webkit-user-select: text; user-select: text; }
#share-img { -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
img { -webkit-user-drag: none; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #0d1124; color: var(--ink); font-family: var(--font-ui); }
body { background: radial-gradient(1200px 800px at 50% 40%, #232b55, #0b0f20); }

#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage {
  position: relative; width: 360px; height: 640px; overflow: hidden;
  background: #161c3a;
  box-shadow: 0 30px 120px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08);
  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, .pad { 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; padding: 0; }

.btn-mute {
  position: absolute; right: calc(var(--u)*22); top: calc(var(--u)*22); z-index: 30;
  width: calc(var(--u)*64); height: calc(var(--u)*64); border-radius: 50%;
  background: var(--paper); border: calc(var(--u)*4) solid var(--navy); box-shadow: 0 calc(var(--u)*5) 0 var(--navy);
  color: var(--navy); font-size: calc(var(--u)*28); font-weight: 900;
}
.btn-mute.off { opacity: .5; text-decoration: line-through; }
body.playing .btn-mute { display: none; }

/* ---------- 标题页：潮玩贴纸风 ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; z-index: 20; }
#screen-title { padding: calc(var(--u)*120) 0 calc(var(--u)*56); }
.title-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(calc(var(--u)*640) calc(var(--u)*440) at 50% 16%, rgba(255,214,150,.22), rgba(255,214,150,0) 70%),
    linear-gradient(0deg, rgba(10,13,30,.75) 0%, rgba(10,13,30,0) 34%);
}
.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)*196); letter-spacing: calc(var(--u)*6); text-indent: calc(var(--u)*6); text-shadow: calc(var(--u)*10) calc(var(--u)*14) 0 #ef6f6c; }
.logo-2 { font-size: calc(var(--u)*230); color: #ffd23f; 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-num {
  right: calc(var(--u)*-70); top: calc(var(--u)*150); width: calc(var(--u)*136); height: calc(var(--u)*136); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--paper); color: var(--navy);
  font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*64); transform: rotate(14deg); animation: wobble 3s ease-in-out infinite;
  box-shadow: inset 0 0 0 calc(var(--u)*6) var(--paper), inset 0 0 0 calc(var(--u)*10) var(--navy), calc(var(--u)*6) calc(var(--u)*8) 0 var(--navy);
}
.sticker-slogan { left: 50%; bottom: calc(var(--u)*-70); 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(-50%) 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,.55); 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)*20) calc(var(--u)*20) 0; z-index: 5; }
.hud-top { display: flex; align-items: flex-start; justify-content: space-between; }
.hud-card {
  min-width: calc(var(--u)*150); margin-top: calc(var(--u)*16); padding: calc(var(--u)*8) calc(var(--u)*18) calc(var(--u)*10);
  border-radius: calc(var(--u)*24); background: var(--paper); color: var(--navy);
  border: calc(var(--u)*5) solid var(--navy); box-shadow: 0 calc(var(--u)*7) 0 var(--navy);
}
.hud-right { text-align: right; }
.hud-label { display: block; font-family: var(--pop); font-size: calc(var(--u)*22); color: rgba(23,32,61,.6); }
.hud-card b { display: block; font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*54); line-height: 1; }
.hud-gauge { position: relative; width: calc(var(--u)*300); height: calc(var(--u)*220); margin-top: calc(var(--u)*-6); }
.hud-gauge canvas { width: 100%; height: 100%; display: block; }
.hud-combo {
  margin: calc(var(--u)*-8) auto 0; width: max-content; padding: calc(var(--u)*4) calc(var(--u)*22);
  border-radius: 99px; background: var(--yellow); color: var(--navy); 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)*26);
  opacity: 0; transform: scale(.8) rotate(-2deg); transition: opacity .2s, transform .2s;
}
.hud-combo b { font-weight: 400; margin-left: calc(var(--u)*8); }
.hud-combo.on { opacity: 1; transform: rotate(-2deg); }
.hud-combo.bump { animation: bump .3s ease; }
@keyframes bump { 0% { scale: 1; } 40% { scale: 1.25; } 100% { scale: 1; } }

/* 领航提示：方向 + 剩余距离 */
.note {
  position: absolute; left: 50%; top: calc(var(--u)*290); display: flex; align-items: center; gap: calc(var(--u)*12);
  padding: calc(var(--u)*8) calc(var(--u)*24) calc(var(--u)*8) calc(var(--u)*12); border-radius: calc(var(--u)*22);
  background: var(--paper); color: var(--navy); border: calc(var(--u)*5) solid var(--navy); box-shadow: calc(var(--u)*5) calc(var(--u)*7) 0 var(--navy);
  transform: translateX(-50%) rotate(-1.5deg); transition: transform .2s;
}
.note.near { background: var(--yellow); }
.note.now { background: var(--red); color: var(--paper); animation: notePulse .35s ease-in-out infinite alternate; }
@keyframes notePulse { from { transform: translateX(-50%) rotate(-1.5deg) scale(1); } to { transform: translateX(-50%) rotate(-1.5deg) scale(1.07); } }
.note-arrow {
  display: block; width: calc(var(--u)*64); height: calc(var(--u)*64); border-radius: 50%; background: var(--navy); position: relative;
}
.note-arrow::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--u)*30); height: calc(var(--u)*30);
  border-left: calc(var(--u)*9) solid var(--paper); border-top: calc(var(--u)*9) solid var(--paper);
  transform: translate(-35%, -50%) rotate(-45deg);
}
.note.dir-R .note-arrow::before { transform: translate(-65%, -50%) rotate(135deg); }
.note.dir-S .note-arrow::before { transform: translate(-50%, -30%) rotate(45deg); }
.note b { font-family: var(--pop); font-weight: 400; font-size: calc(var(--u)*52); line-height: 1; }
.note span { font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*46); line-height: 1; }
.note small { font-family: var(--pop); font-size: calc(var(--u)*24); margin-left: calc(var(--u)*4); }

/* 智驾状态：开着是青色，退出时红色闪一下 */
.auto {
  position: absolute; left: 50%; top: calc(var(--u)*388); display: flex; align-items: center; gap: calc(var(--u)*10);
  padding: calc(var(--u)*6) calc(var(--u)*22) calc(var(--u)*6) calc(var(--u)*12); border-radius: 99px;
  background: #5fe0d0; color: var(--navy); 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); white-space: nowrap;
  transform: translateX(-50%) rotate(1.5deg); opacity: 0; transition: opacity .25s;
}
.auto i { display: block; width: calc(var(--u)*30); height: calc(var(--u)*30); border-radius: 50%; border: calc(var(--u)*5) solid var(--navy); position: relative; }
.auto i::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--u)*6); height: calc(var(--u)*6); border-radius: 50%; background: var(--navy); transform: translate(-50%, -50%); }
.auto.on { opacity: 1; }
.auto.on i { animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auto.off { opacity: 1; background: var(--red); color: var(--paper); animation: notePulse .22s ease-in-out infinite alternate; }
.auto.off i { border-color: var(--paper); }
.auto.off i::after { background: var(--paper); }

/* ---------- 操作区：两个方向键 + 踏板 ---------- */
.pad {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; height: calc(var(--u)*330 + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 calc(var(--u)*26) calc(var(--u)*34 + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(10,13,30,0), rgba(10,13,30,.35) 40%, rgba(10,13,30,.6));
  touch-action: none;
}
.steer { display: flex; gap: calc(var(--u)*18); touch-action: none; }
.key {
  position: relative; width: calc(var(--u)*160); height: calc(var(--u)*176); border-radius: calc(var(--u)*40);
  background: linear-gradient(180deg, #fffaf0, #f0e6d2); border: calc(var(--u)*6) solid var(--navy);
  box-shadow: 0 calc(var(--u)*14) 0 var(--navy); touch-action: none;
  transition: transform .05s ease, box-shadow .05s ease, background .1s;
}
.key i { position: absolute; left: 50%; top: 50%; width: calc(var(--u)*54); height: calc(var(--u)*54); border-left: calc(var(--u)*16) solid var(--navy); border-bottom: calc(var(--u)*16) solid var(--navy); border-radius: calc(var(--u)*6); }
.key-l i { transform: translate(-30%, -50%) rotate(45deg); }
.key-r i { transform: translate(-70%, -50%) rotate(-135deg); }
.key.on { transform: translateY(calc(var(--u)*11)); box-shadow: 0 calc(var(--u)*3) 0 var(--navy); background: linear-gradient(180deg, #ffe066, #ffc21f); }

.brake-wrap { display: flex; align-items: flex-end; gap: calc(var(--u)*14); }
.force { width: calc(var(--u)*74); height: calc(var(--u)*270); position: relative; }
.force canvas { width: 100%; height: 100%; display: block; }
.pedal-slot {
  position: relative; width: calc(var(--u)*170); height: calc(var(--u)*262); border-radius: calc(var(--u)*34);
  border: calc(var(--u)*5) dashed rgba(255,246,226,0); transition: border-color .3s;
}
.pedal {
  position: absolute; inset: 0; border-radius: calc(var(--u)*34);
  background: linear-gradient(180deg, #4a5168, #2a3045); border: calc(var(--u)*6) solid var(--navy);
  box-shadow: 0 calc(var(--u)*14) 0 var(--navy); touch-action: none;
  transition: transform .05s ease, box-shadow .05s ease;
}
.pedal-face { position: absolute; inset: calc(var(--u)*18); border-radius: calc(var(--u)*20); background: #1d2236; display: flex; flex-direction: column; justify-content: space-evenly; padding: 0 calc(var(--u)*16); }
.pedal-face i { display: block; height: calc(var(--u)*14); border-radius: 99px; background: #565e78; }
.pedal.on { transform: translateY(calc(var(--u)*11)); box-shadow: 0 calc(var(--u)*3) 0 var(--navy); }
.pedal.hot .pedal-face { background: #5a1e26; }
.pedal.hot .pedal-face i { background: #ff8a80; }
/* 踏板断了：裂开、掉下去，原位只剩虚线槽 */
.pedal-slot.broken { border-color: rgba(255,246,226,.45); }
.pedal.snap { animation: snap .9s cubic-bezier(.5,0,.9,.6) forwards; pointer-events: none; }
@keyframes snap {
  0% { transform: none; }
  12% { transform: rotate(-9deg) translateX(calc(var(--u)*-6)); }
  22% { transform: rotate(6deg); }
  100% { transform: translate(calc(var(--u)*60), calc(var(--u)*700)) rotate(48deg); opacity: .8; }
}
.pad.dead .key, .pad.dead .pedal { filter: grayscale(1) brightness(.75); }
/* 智驾开着：按键是灰的，按了也没用 */
.pad.pad-auto .key, .pad.pad-auto .pedal { filter: grayscale(.85) brightness(.7); }
.pad.pad-auto .force { opacity: .5; }
.pad .key, .pad .pedal, .pad .force { transition: filter .2s, opacity .2s; }
/* 电脑上（有鼠标）按键角上标键帽：A / D / 空格；手机和录像里不显示 */
.kc {
  display: none; position: absolute; right: calc(var(--u)*12); bottom: calc(var(--u)*12);
  min-width: calc(var(--u)*34); padding: calc(var(--u)*3) calc(var(--u)*8); box-sizing: border-box;
  border: calc(var(--u)*3) solid var(--navy); border-radius: calc(var(--u)*9); background: #fff;
  box-shadow: 0 calc(var(--u)*3) 0 var(--navy);
  font: 800 calc(var(--u)*20)/1.1 system-ui, "Microsoft YaHei", sans-serif; color: var(--navy); text-align: center;
  pointer-events: none;
}
.pedal .kc { right: 50%; bottom: calc(var(--u)*-10); transform: translateX(50%); }
@media (hover: hover) and (pointer: fine) { body:not(.rec) .kc { display: block; } }

/* ---------- 提示 ---------- */
.toast {
  position: absolute; left: 50%; top: 44%; 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); }
.count {
  position: absolute; left: 50%; top: 40%; z-index: 9; transform: translate(-50%, -50%);
  font-family: var(--pop); font-size: calc(var(--u)*240); color: var(--yellow); opacity: 0; pointer-events: none;
  paint-order: stroke fill; -webkit-text-stroke: calc(var(--u)*16) var(--navy); text-shadow: calc(var(--u)*8) calc(var(--u)*12) 0 #ef6f6c;
}
.count.show { animation: count .8s ease forwards; }
@keyframes count { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }

/* ---------- 结算：潮玩贴纸风 ---------- */
#screen-result { overflow-y: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; background: rgba(10,13,30,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.result-sheet {
  position: relative; width: calc(var(--u)*660); margin: calc(var(--u)*64) 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-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);
}
.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: #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-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(10,13,30,.55); 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); }
.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: #fff; }