@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;
  --coral: #ef6f6c;
  --red: #e2453d;
  --cobalt: #2f5ee8;
  --mint: #2f9e6a;
  --gold: #e7b545;
  --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;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #120f24; color: var(--navy); font-family: var(--font-ui); }
body { background: radial-gradient(1200px 800px at 50% 40%, #2a2142, #0e0b1c); }

#app { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage {
  position: relative; width: 360px; height: 640px; overflow: hidden;
  background: #120f24;
  box-shadow: 0 30px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: 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, .card { 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-mute {
  position: absolute; right: calc(var(--u)*22); top: calc(var(--u)*22); z-index: 30;
  width: calc(var(--u)*62); height: calc(var(--u)*62); 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)*26); 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)*620) calc(var(--u)*460) at 50% 26%, rgba(255,214,120,.28), rgba(255,214,120,0) 70%),
    linear-gradient(0deg, rgba(14,11,28,.85) 0%, rgba(14,11,28,0) 34%);
}
.logo-wrap { position: relative; transform: rotate(-4deg); margin-top: calc(var(--u)*40); }
.logo { margin: 0; font-family: var(--pop); font-weight: 400; line-height: .92; text-align: center; color: var(--paper); }
.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 var(--coral); }
.logo-2 { font-size: calc(var(--u)*170); color: var(--yellow); margin-top: calc(var(--u)*4); text-shadow: calc(var(--u)*10) calc(var(--u)*14) 0 var(--cobalt); }
.sticker {
  position: absolute; font-family: var(--pop); color: var(--paper); background: var(--red); 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-slogan { left: 50%; bottom: calc(var(--u)*-76); padding: calc(var(--u)*8) calc(var(--u)*26); border-radius: calc(var(--u)*14); background: var(--paper); color: var(--navy); font-size: calc(var(--u)*36); transform: translateX(-46%) rotate(3deg); }
@keyframes wobble { 0%, 100% { transform: rotate(10deg) scale(1); } 50% { transform: rotate(18deg) 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)*64); letter-spacing: calc(var(--u)*6); text-indent: calc(var(--u)*6);
  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: var(--paper); 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,.75); font-size: calc(var(--u)*20); letter-spacing: calc(var(--u)*6); font-weight: 700; }

/* ---------- HUD ---------- */
#hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr calc(var(--u)*190) 1fr; align-items: start; gap: calc(var(--u)*14);
  padding: calc(var(--u)*22) calc(var(--u)*24) 0;
}
.hud-card {
  padding: calc(var(--u)*10) calc(var(--u)*20) calc(var(--u)*12);
  border-radius: calc(var(--u)*26); background: var(--paper);
  border: calc(var(--u)*4) solid var(--navy); box-shadow: 0 calc(var(--u)*6) 0 var(--navy);
}
.hud-combo { text-align: right; }
.hud-label { display: block; font-size: calc(var(--u)*19); font-weight: 800; color: rgba(23,32,61,.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(--navy); }
.hud-card b.neg { color: var(--red); }
.hud-combo b { color: #b8862f; }
.hud-clock {
  text-align: center; padding: calc(var(--u)*8) 0 calc(var(--u)*14);
  border-radius: calc(var(--u)*30); background: var(--navy); color: var(--paper);
  box-shadow: 0 calc(var(--u)*6) 0 rgba(23,32,61,.35);
}
.hud-clock b { display: block; font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*76); line-height: 1; color: var(--yellow); }
.hud-bar { margin: calc(var(--u)*6) auto 0; width: 76%; height: calc(var(--u)*8); border-radius: 9px; background: rgba(255,255,255,.18); overflow: hidden; }
.hud-bar i { display: block; height: 100%; background: var(--yellow); transform-origin: left; }
#hud.urgent .hud-clock { background: var(--red); 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.06); } }
.bump { animation: bump .25s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.toast {
  position: absolute; left: 50%; top: 40%; z-index: 13;
  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 b { display: block; font-family: var(--pop); font-weight: 400; font-size: calc(var(--u)*72); }
/* ---------- 结算：潮玩贴纸风 ---------- */
#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)*60) 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: var(--red);
  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)*124); 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 var(--coral);
}
.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)*32); 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-model { margin-top: calc(var(--u)*16); text-align: center; font-size: calc(var(--u)*22); font-weight: 800; color: rgba(23,32,61,.65); }
.res-model b { font-family: var(--font-num); font-size: calc(var(--u)*30); color: var(--red); margin-left: calc(var(--u)*6); }
.res-best { margin-top: calc(var(--u)*8); text-align: center; color: rgba(23,32,61,.7); font-size: calc(var(--u)*22); font-weight: 800; }
.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;
  user-select: text; -webkit-user-select: text;
}
.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: var(--cobalt); 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: var(--cobalt); font-size: calc(var(--u)*22); font-weight: 800; }
.result-sheet .btn-pop { width: 100%; height: calc(var(--u)*104); font-size: calc(var(--u)*56); 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 var(--coral); 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); white-space: nowrap; }
.tab-x { flex: 1.9; font-size: calc(var(--u)*24); }
.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); }
.board-row .nm { flex: 1; min-width: 0; font-weight: 800; font-size: calc(var(--u)*27); color: var(--navy); }
.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: var(--cobalt); }
.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-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(--navy); }

.floats { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.float {
  position: absolute; font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*46);
  paint-order: stroke fill; -webkit-text-stroke: calc(var(--u)*8) var(--navy); color: #8de6b4;
  animation: floatUp .8s ease-out forwards;
}
.float.bad { color: #ff8a80; }
@keyframes floatUp { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { transform: translate(-50%, calc(var(--u)*-10)) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, calc(var(--u)*-70)) scale(1); opacity: 0; } }
.bump { animation: bump .25s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* ---------- 本作新增 ---------- */
.disclaimer { color: rgba(255,246,226,.6); }
.hud-act { display: block; margin-top: calc(var(--u)*6); font-family: var(--pop); font-size: calc(var(--u)*22); color: rgba(255,246,226,.75); letter-spacing: calc(var(--u)*4); }
.hud-combo b { color: #b8862f; }
.mult { display: block; font-style: normal; font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*26); color: var(--red); line-height: 1; }
.mult.lv0 { color: rgba(23,32,61,.35); }

/* 飘字 */
.float { white-space: nowrap; }
.float.good { color: #8de6b4; }
.float.big { font-size: calc(var(--u)*58); color: var(--yellow); }
.float.bad { color: #ff8a80; }
.float small { display: block; font-family: var(--pop); font-weight: 400; font-size: calc(var(--u)*30); -webkit-text-stroke: calc(var(--u)*7) var(--navy); color: var(--paper); text-align: center; }
.float.note { font-family: var(--font-ui); font-weight: 800; font-size: calc(var(--u)*26); color: #e9ecf2; -webkit-text-stroke: calc(var(--u)*6) #3a3f4c; animation-duration: 1.3s; }

/* 准星：四段短线 + 中心点，压在靶子上变红 */
.reticle { position: absolute; left: 0; top: 0; z-index: 9; width: calc(var(--u)*92); height: calc(var(--u)*92); margin: calc(var(--u)*-46) 0 0 calc(var(--u)*-46); pointer-events: none; will-change: transform; }
.reticle::before { content: ""; position: absolute; inset: calc(var(--u)*14); border-radius: 50%; border: calc(var(--u)*5) solid #fff; box-shadow: 0 0 0 calc(var(--u)*3) rgba(23,32,61,.85), inset 0 0 0 calc(var(--u)*3) rgba(23,32,61,.85); transition: transform .08s, border-color .08s; }
.reticle i { position: absolute; background: #fff; box-shadow: 0 0 0 calc(var(--u)*3) rgba(23,32,61,.85); border-radius: 3px; }
.reticle i:nth-child(1), .reticle i:nth-child(2) { left: 50%; width: calc(var(--u)*6); height: calc(var(--u)*20); margin-left: calc(var(--u)*-3); }
.reticle i:nth-child(1) { top: 0; }
.reticle i:nth-child(2) { bottom: 0; }
.reticle i:nth-child(3), .reticle i:nth-child(4) { top: 50%; height: calc(var(--u)*6); width: calc(var(--u)*20); margin-top: calc(var(--u)*-3); }
.reticle i:nth-child(3) { left: 0; }
.reticle i:nth-child(4) { right: 0; }
.reticle b { position: absolute; left: 50%; top: 50%; width: calc(var(--u)*10); height: calc(var(--u)*10); margin: calc(var(--u)*-5) 0 0 calc(var(--u)*-5); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(var(--u)*3) rgba(23,32,61,.85); }
.reticle.on::before { border-color: var(--red); transform: scale(.82); }
.reticle.on i, .reticle.on b { background: var(--red); }
.reticle.shot::before { transform: scale(1.25); }

/* 摇杆 + 开火键 */
.pad { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.zone { position: absolute; pointer-events: auto; touch-action: none; }
/* 点哪打哪：HUD 下面整片。电脑上准星就是鼠标，把系统光标藏掉 */
.zone-aim { left: 0; right: 0; top: calc(var(--u)*170); bottom: 0; cursor: crosshair; }
body.desk .zone-aim { cursor: none; }
/* 可选的 OTA 键、触控板：只占角上提示那一块 */
.zone-l { left: 0; bottom: 0; width: calc(var(--u)*280); height: calc(var(--u)*290); }
.zone-r { right: 0; bottom: 0; width: calc(var(--u)*320); height: calc(var(--u)*270); cursor: grab; }
.stick {
  position: absolute; right: calc(var(--u)*28); bottom: calc(calc(var(--u)*30) + env(safe-area-inset-bottom)); width: calc(var(--u)*250); height: calc(var(--u)*200); border-radius: calc(var(--u)*36);
  background: linear-gradient(160deg, rgba(255,246,226,.2), rgba(255,246,226,.06));
  border: calc(var(--u)*5) solid rgba(255,246,226,.55); box-shadow: inset 0 0 0 calc(var(--u)*3) rgba(23,32,61,.4);
  pointer-events: none; opacity: .75; transition: opacity .15s;
}
/* 拖动时提示的触控板亮起来 */
.stick.drag { opacity: 1; border-color: rgba(255,210,63,.9); }
/* 触控板上的四向小箭头 */
.stick::before, .stick::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--u)*150); height: calc(var(--u)*6); margin: calc(var(--u)*-3) 0 0 calc(var(--u)*-75); border-radius: 3px; background: rgba(255,246,226,.25); }
.stick::after { transform: rotate(90deg); width: calc(var(--u)*110); margin-left: calc(var(--u)*-55); }
.knob {
  position: absolute; left: 50%; top: 50%; width: calc(var(--u)*56); height: calc(var(--u)*56); margin: calc(var(--u)*-28) 0 0 calc(var(--u)*-28); border-radius: 50%; z-index: 1;
  background: linear-gradient(180deg, #fff6e2, #e9dcc0); border: calc(var(--u)*5) solid var(--navy); box-shadow: 0 calc(var(--u)*5) 0 var(--navy);
  will-change: transform; pointer-events: none; transition: transform .12s ease-out;
}
.stick.drag { cursor: grabbing; }
.stick.drag .knob { box-shadow: 0 calc(var(--u)*3) 0 var(--navy); }
.fire {
  position: absolute; left: calc(var(--u)*32); bottom: calc(calc(var(--u)*36) + env(safe-area-inset-bottom)); width: calc(var(--u)*212); height: calc(var(--u)*212); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 38%, #ff7a5c, #e2453d 62%, #b42a22); border: calc(var(--u)*7) solid var(--navy); box-shadow: 0 calc(var(--u)*14) 0 var(--navy);
  color: var(--paper); font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*50); letter-spacing: calc(var(--u)*2);
  display: flex; align-items: center; justify-content: center; touch-action: none; transition: transform .05s, box-shadow .05s;
}
.fire span { paint-order: stroke fill; -webkit-text-stroke: calc(var(--u)*8) var(--navy); }
.fire.hit { transform: translateY(calc(var(--u)*10)); box-shadow: 0 calc(var(--u)*4) 0 var(--navy); }
.kc { position: absolute; font-family: var(--font-num); font-size: calc(var(--u)*20); color: rgba(255,246,226,.6); display: none; white-space: nowrap; }
.fire .kc { top: calc(var(--u)*-36); left: 50%; transform: translateX(-50%); -webkit-text-stroke: 0; font-family: var(--font-ui); font-weight: 700; }
.kc-stick { top: calc(var(--u)*-36); left: 50%; transform: translateX(-50%); }
body.desk .kc { display: block; }
body.rec .kc { display: none !important; }
/* 录钩子：不要 HUD 和操控提示；落版时标题页只留标题 */
body.hook #hud, body.hook #pad { display: none !important; }
body.hook-end #btn-start, body.hook-end #btn-board-title, body.hook-end .disclaimer { visibility: hidden; }

/* 开场字卡 */
.act-card {
  position: absolute; left: 50%; top: 40%; z-index: 14; text-align: center; pointer-events: none;
  transform: translate(-50%, -50%) scale(.6) rotate(-3deg); opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.2,1.6,.4,1);
}
.act-card.show { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.act-card small { display: block; margin: 0 auto calc(var(--u)*10); width: max-content; padding: calc(var(--u)*6) calc(var(--u)*22); border-radius: 99px; background: var(--navy); color: var(--yellow); font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*30); letter-spacing: calc(var(--u)*3); border: calc(var(--u)*4) solid var(--paper); }
.act-card b { display: block; font-family: var(--pop); font-weight: 400; font-size: calc(var(--u)*120); color: var(--paper); paint-order: stroke fill; -webkit-text-stroke: calc(var(--u)*16) var(--navy); text-shadow: calc(var(--u)*8) calc(var(--u)*12) 0 var(--red); white-space: nowrap; }

/* 结算：分数明细 + 各靶处理数 */
.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; background: #fff; border: calc(var(--u)*4) solid var(--navy); border-radius: calc(var(--u)*22); }
.stats div:nth-child(4) { background: #e3e6ef; }
.stats div:nth-child(5) { background: #fff1b8; }
.stats div:nth-child(6) { background: #ffe1dc; }
.stats b { display: block; font-family: var(--pop); font-weight: 400; font-size: calc(var(--u)*44); color: var(--navy); line-height: 1.05; }
.stats span { font-size: calc(var(--u)*19); color: rgba(23,32,61,.6); font-weight: 800; }
#screen-result { background: rgba(14,11,28,.55); }
.ledger { margin-top: calc(var(--u)*20); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u)*8); }
.ledger div { text-align: center; padding: calc(var(--u)*6) 0; border-radius: calc(var(--u)*16); background: #f3ecdc; }
.ledger span { display: block; font-size: calc(var(--u)*19); font-weight: 800; color: rgba(23,32,61,.6); }
.ledger b { font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*36); color: var(--navy); }
.ledger .neg b { color: var(--red); }
.stats div:nth-child(1) { background: #fff; }
.stats div:nth-child(2) { background: #fff1b8; }
.stats div:nth-child(3) { background: #e3e6ef; }
.tally { margin-top: calc(var(--u)*14); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u)*8); }
.tally div { display: flex; align-items: center; gap: calc(var(--u)*8); padding: calc(var(--u)*6) calc(var(--u)*10); border-radius: calc(var(--u)*16); background: #fff; border: calc(var(--u)*3) solid rgba(23,32,61,.18); min-width: 0; }
.tally img, .tally i { flex: 0 0 auto; width: calc(var(--u)*50); height: calc(var(--u)*50); object-fit: contain; }
.tally i { display: flex; align-items: center; justify-content: center; border-radius: calc(var(--u)*12); font-style: normal; font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*20); color: #fff; }
.tally span { flex: 1; min-width: 0; font-size: calc(var(--u)*19); font-weight: 800; color: rgba(23,32,61,.7); line-height: 1.15; }
.tally b { font-family: var(--font-num); font-weight: 700; font-size: calc(var(--u)*32); color: var(--navy); }
.tally .zero { opacity: .45; }