/* 《节奏哲楠》样式：暖色卡通 + 粗描边 + 竖屏手机舞台 */
:root {
  --ink: #4a3b3a;
  --paper: #fff6e8;
  --red: #ff5d5d;
  --gold: #ffc93c;
  --blue: #4a90ff;
  --green: #3ecf8e;
  --purple: #6c5ce7;
  --shadow: 0 4px 0 rgba(74, 59, 58, .25);
  --font: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; font-family: var(--font); color: var(--ink); user-select: none; -webkit-user-select: none; }
body { background: #211a30; }
button { font-family: inherit; }

/* 桌面/平板两侧的放大模糊背景 */
.room-backdrop {
  position: fixed; inset: 0; z-index: 0;
  background: #211a30;
}
.phone {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px; height: 100%; height: 100dvh; margin: 0 auto;
  background: #ffe9c8; overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,.45);
  display: flex; flex-direction: column;
}
@media (min-width: 700px) {
  .phone { height: 940px; height: min(940px, 96dvh); margin-block: auto; border-radius: 28px; border: 4px solid #fff; top: 2dvh; }
  body { display: flex; }
}

/* —— 屏幕切换 —— */
.screen {
  position: absolute; inset: 0; z-index: 2;
  display: none; flex-direction: column;
}
.screen.show { display: flex; animation: screenIn .28s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.overlay-screen {
  z-index: 40; background: rgba(40,30,58,.55); backdrop-filter: blur(3px); justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
}

/* —— 通用组件 —— */
.btn {
  min-height: 44px; border: 3px solid var(--ink); border-radius: 16px;
  font-size: 17px; font-weight: 800; color: var(--ink);
  background: #fff; box-shadow: 0 4px 0 var(--ink); cursor: pointer;
  transition: transform .08s, box-shadow .08s; padding: 10px 18px;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.big { width: 100%; min-height: 52px; font-size: 19px; border-radius: 18px; }
.btn.primary { background: linear-gradient(180deg, #ff7a7a, var(--red)); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.btn.ghost { background: #fff8ec; }
.btn:disabled { filter: grayscale(.7) brightness(.92); box-shadow: 0 4px 0 #999; border-color: #999; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink);
  background: #fff8ec; font-size: 18px; font-weight: 900; box-shadow: 0 3px 0 var(--ink); cursor: pointer;
}
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.card {
  background: var(--paper); border: 4px solid var(--ink); border-radius: 24px;
  padding: 22px; box-shadow: var(--shadow); text-align: center;
}
.card h2 { font-size: 24px; margin-bottom: 12px; }
.card p { font-size: 15px; line-height: 1.7; }
.linklike { background: none; border: 0; color: #a08b8a; font-size: 12px; text-decoration: underline; cursor: pointer; min-height: 44px; }

/* —— 免责声明 —— */
.disclaimer-card { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.dis-avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 4px solid var(--ink); margin: 0 auto -4px; background: #fff; }
.dis-avatar, .title-avatar { object-position: center 18%; }
.check-line { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; text-align: left; line-height: 1.5; }
.check-line input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--red); flex: none; }

/* —— 标题 —— */
#screen-title {
  justify-content: space-between; text-align: center;
  padding: 8% 24px max(6%, env(safe-area-inset-bottom));
  background: #ffe9c8;
}
.title-wrap { position: relative; margin-top: 4%; }
.title-avatar {
  width: 168px; height: 168px; border-radius: 50%; object-fit: cover;
  border: 5px solid #fff; outline: 4px solid var(--ink);
  box-shadow: 0 10px 0 rgba(74,59,58,.18);
  animation: bob 2.6s ease-in-out infinite; background: #fff;
}
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1.5deg); } }
.game-title {
  font-size: 52px; font-weight: 900; margin-top: 14px; letter-spacing: 4px;
  color: #ff5d5d; -webkit-text-stroke: 2px var(--ink);
  text-shadow: 0 5px 0 var(--ink), 0 9px 0 rgba(74,59,58,.2);
  transform: rotate(-2deg);
}
.game-sub { font-size: 17px; font-weight: 800; color: #8a6f58; margin-top: 6px; }
.title-note { position: absolute; font-size: 30px; animation: floatNote 2s ease-in-out infinite; }
.title-note.n1 { left: 8%; top: 10%; } .title-note.n2 { right: 9%; top: 22%; animation-delay: .5s; } .title-note.n3 { right: 16%; top: 0; animation-delay: 1s; }
@keyframes floatNote { 0%,100% { transform: translateY(0) rotate(-8deg); opacity: .7; } 50% { transform: translateY(-12px) rotate(8deg); opacity: 1; } }
.menu { display: flex; flex-direction: column; gap: 14px; }

/* —— 选关 —— */
.screen-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.screen-head h2 { font-size: 22px; }
.level-list { padding: 8px 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.level-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 20px;
  padding: 10px 14px; box-shadow: 0 4px 0 var(--ink); min-height: 88px; cursor: pointer;
}
.level-card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.lv-thumb { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; border: 3px solid var(--ink); flex: none; background: #fff; display: flex; align-items: center; justify-content: center; }
.lv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lv-thumb.lock { background: #e6ddcf; font-size: 26px; }
.lv-meta { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.lv-meta b { font-size: 17px; } .lv-meta span { font-size: 13px; color: #9a8674; }
.lv-go { font-size: 22px; color: var(--red); }
.level-card.locked { filter: grayscale(.8); opacity .7; }

/* —— 罪名卷轴 —— */
#screen-story { justify-content: center; padding: 24px; background: rgba(60,40,30,.35); }
.scroll-card { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scroll-top, .scroll-bottom { width: 320px; max-width: 86%; height: 34px; background: linear-gradient(180deg, #d8a85a, #b9853f); border: 3px solid var(--ink); border-radius: 10px; box-shadow: var(--shadow); }
.scroll-body {
  width: 300px; max-width: 80%; background: #fffaf0; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink);
  padding: 22px 20px; text-align: center; position: relative; min-height: 232px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.scroll-prefix { font-size: 16px; color: #8a6f58; }
.scroll-crime { font-size: 26px; font-weight: 900; color: var(--red); }
.scroll-law { font-size: 14px; color: #8a6f58; line-height: 1.8; }
.stamp {
  position: absolute; right: -16px; bottom: -6px; width: 76px; height: 76px; border-radius: 12px;
  border: 4px solid #d33; color: #d33; font-size: 26px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-18deg) scale(3); opacity: 0;
}
.stamp.stamped { animation: stampIn .35s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes stampIn { to { transform: rotate(-18deg) scale(1); opacity: .9; } }

/* —— 教学 —— */
#screen-tutorial { justify-content: space-between; padding: 30px 22px 24px; background: linear-gradient(180deg,#fff3dd,#ffe2bd); }
.tut-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.tut-page { display: none; text-align: center; animation: screenIn .3s ease-out; }
.tut-page.show { display: block; }
.tut-icon { font-size: 56px; margin-bottom: 10px; animation: bob 2.4s ease-in-out infinite; }
.tut-page h2 { font-size: 26px; margin-bottom: 14px; }
.tut-page p { font-size: 17px; line-height: 1.8; color: #6d5b50; }
.tut-demo { position: relative; height: 148px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }

/* 教学示意 1：示范 → 该你了 */
.tut-listen { flex-direction: column; gap: 8px; }
.tl-dots { display: flex; gap: 12px; }
.tl-dots i { width: 16px; height: 16px; border-radius: 50%; background: #d9c3ab; animation: tlDot 1.6s ease-in-out infinite; }
.tl-dots i:nth-child(2) { animation-delay: .4s; } .tl-dots i:nth-child(3) { animation-delay: .8s; } .tl-dots i:nth-child(4) { animation-delay: 1.2s; }
@keyframes tlDot { 0%, 100% { background: #d9c3ab; transform: scale(1); } 30% { background: var(--red); transform: scale(1.35); } }
.tl-bubble { padding: 5px 16px; border-radius: 14px; font-size: 17px; font-weight: 800; }
.tl-bubble.ghost { background: #efe3d2; color: #9a8674; border: 2px solid #d9c3ab; }
.tl-bubble.you { background: var(--red); color: #fff; border: 2px solid var(--ink); animation: tlYou 1.6s ease-in-out infinite; }
@keyframes tlYou { 0%, 55% { opacity: 0; transform: translateY(6px) scale(.8); } 70%, 92% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; } }
.tl-arrow { font-size: 18px; color: #9a8674; animation: tlYou 1.6s ease-in-out infinite; }

/* 教学示意 2：收缩圈 */
.tut-ring .tr-target { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 3px dashed rgba(74,59,58,.55); }
.tut-ring .tr-ring { position: absolute; width: 96px; height: 96px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 0 0 2px var(--ink); animation: trClose 1.5s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes trClose { 0% { transform: scale(1.5); opacity: 0; } 15% { opacity: 1; } 78% { transform: scale(.34); opacity: 1; } 90%,100% { transform: scale(.34); opacity: 0; } }
.tr-rank { position: absolute; font-size: 13px; font-weight: 800; white-space: nowrap; }
.tr-rank.perfect { left: calc(50% + 62px); top: calc(50% - 44px); color: #d99a16; }
.tr-rank.good { left: calc(50% + 78px); top: 50%; color: #3f9e58; }
.tr-rank.ok { left: calc(50% + 62px); top: calc(50% + 30px); color: #4a86c9; }

/* 教学示意 3：手拍 */
.tut-slap { gap: 6px; }
.ts-hand { font-size: 58px; transform-origin: 80% 80%; animation: tsSlap 1.2s ease-in-out infinite; z-index: 2; }
.ts-butt { font-size: 72px; animation: tsJiggle 1.2s ease-in-out infinite; }
.ts-pop { position: absolute; left: calc(50% - 78px); top: 16px; font-size: 22px; font-weight: 900; color: var(--red); -webkit-text-stroke: 1.5px var(--ink); opacity: 0; animation: tsPop 1.2s ease-in-out infinite; }
@keyframes tsSlap { 0%, 55% { transform: rotate(35deg) translateX(34px); } 70% { transform: rotate(-8deg) translateX(0); } 80% { transform: rotate(6deg) translateX(6px); } 100% { transform: rotate(35deg) translateX(34px); } }
@keyframes tsJiggle { 0%, 62% { transform: translateX(0); } 68% { transform: translateX(5px) rotate(4deg); } 76% { transform: translateX(-4px) rotate(-3deg); } 86% { transform: translateX(2px); } 100% { transform: translateX(0); } }
@keyframes tsPop { 0%, 62% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.15); } 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* 教学示意 4：按住蓄力 */
.tut-hold { flex-direction: column; gap: 6px; }
.th-finger { font-size: 40px; animation: thPress 1.8s ease-in-out infinite; }
.th-ball { width: 58px; height: 58px; border-radius: 50%; border: 5px solid #d9a516; background: radial-gradient(circle at 35% 30%, #ffe98a, #f5c02e); animation: thCharge 1.8s ease-in-out infinite; }
@keyframes thPress { 0%, 12% { transform: translateY(-12px); } 22%, 60% { transform: translateY(10px) scale(.92); } 70% { transform: translateY(-16px) scale(1.05); } 100% { transform: translateY(-12px); } }
@keyframes thCharge { 0% { transform: scale(.4); opacity: .5; } 18%, 62% { transform: scale(1.15); opacity: 1; } 72%, 100% { transform: scale(.4); opacity: 0; } }
.th-label { font-size: 14px; font-weight: 800; position: absolute; }
.th-label.down { left: calc(50% + 58px); top: 30px; color: #9a7a2a; }
.th-label.up { left: calc(50% + 58px); bottom: 24px; color: var(--red); animation: tlYou 1.8s ease-in-out infinite; }
.tut-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.tut-dots i { width: 10px; height: 10px; border-radius: 50%; background: #d9c3ab; }
.tut-dots i.on { background: var(--red); transform: scale(1.3); }
.tut-actions { display: flex; gap: 10px; }
.tut-actions .btn { flex: 1; }
#btn-tut-skip { flex: 0 0 76px; }

/* —— 游戏 HUD（节奏天国式：几乎不显示任何东西，反馈全靠角色与声音）—— */
#screen-game { background: #f7e7c7; }
.hud { display: flex; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 8px) 12px 4px; background: none; }
.phase-pill {
  background: none; border: none; border-radius: 0;
  padding: 0; font-weight: 900; font-size: 15px; letter-spacing: 3px;
  color: rgba(74,59,58,.55); box-shadow: none;
}
.phase-pill.pop { animation: pillPop .3s ease-out; }
@keyframes pillPop { 40% { transform: scale(1.15) rotate(-2deg); } }
.rhythm-top { padding: 0; display: block; }
.beat-dots, .gauge { display: none; } /* 拍点/节奏槽：玩的时候不看，结算见分晓 */
.combo { position: absolute; right: 16px; top: calc(env(safe-area-inset-top) + 56px); text-align: center; opacity: 0; transform: scale(.8); transition: all .15s; pointer-events: none; z-index: 8; }
.combo.show { opacity: 1; transform: scale(1); }
.combo span { display: block; font-size: 30px; font-weight: 900; color: var(--red); -webkit-text-stroke: 0; text-shadow: none; line-height: 1; }
.combo small { font-size: 10px; font-weight: 900; color: rgba(74,59,58,.5); letter-spacing: 2px; }

/* —— 舞台：纯色墙 + 一条硬边地平线（节奏天国式负空间）—— */
.stage-area {
  position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: pointer;
  background: linear-gradient(#f7e7c7 0 64%, #e6c492 64% 100%);
}
.stage-area[data-section="stick"] { background: linear-gradient(#fdf3da 0 64%, #ecd7ac 64% 100%); }
.stage-area[data-section="B"] { background: linear-gradient(#e7e1f2 0 64%, #c9bae6 64% 100%); }
.stage-area[data-section="charge"] { background: linear-gradient(#ffd98a 0 64%, #f0a94e 64% 100%); }
.stage-area[data-section="outro"] { background: linear-gradient(#f7e7c7 0 64%, #e6c492 64% 100%); }
.stage-area.shake { animation: shake .13s linear; }
@keyframes shake { 25% { transform: translateX(calc(var(--shake,4px) * -1)); } 50% { transform: translateX(var(--shake,4px)); } 75% { transform: translateX(calc(var(--shake,4px) * -.5)); } }
.zhenan-wrap { position: absolute; left: 50%; bottom: 0; height: 97%; transform: translateX(-50%); z-index: 3; }
.zhenan { height: 100%; width: auto; display: block; }
.stage-area::after { /* 椅脚投影：一个扁椭圆就够 */
  content: ''; position: absolute; left: 50%; bottom: 2%; width: 60%; height: 18px; z-index: 2;
  background: rgba(90,60,30,.16); border-radius: 50%; transform: translateX(-50%); pointer-events: none;
}
/* 新姿势锚点：撅起的屁股（左半边手印中心）在 wrap 内约 21%、50% */
.tap-anchor { position: absolute; left: 21%; top: 50%; width: 30px; height: 30px; z-index: 4; transform: translate(-50%,-50%); }
.fx { position: absolute; inset: 0; z-index: 20; pointer-events: none; }

/* 聚光灯（棍子登场） */
.spotlight {
  position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 42% at 50% 34%, rgba(255,246,200,.95), rgba(255,246,200,.25) 55%, transparent 72%);
  transition: opacity .35s;
}
.spotlight.in { opacity: 1; animation: spotSway 1.6s ease-in-out infinite; }
@keyframes spotSway { 0%,100% { background-position: 0 0; } 50% { filter: brightness(1.12); } }
.grab-anchor { position: absolute; left: 50%; top: 26%; width: 20px; height: 20px; z-index: 7; }
.hand-anchor { position: absolute; left: 14%; top: 50%; width: 20px; height: 20px; z-index: 7; }

/* 道具：手 / 棍子 */
.prop { position: absolute; z-index: 9; pointer-events: none; will-change: transform; }
.hand {
  left: 2%; top: 40%; width: 38%;
  opacity: 0; transform: translate(0,0) rotate(30deg) scale(.9);
  transition: opacity .12s;
}
.hand.in { opacity: 1; }
.stick {
  width: 48%; left: 50%; top: -30%; z-index: 8;
  transform: translate(-50%, 0) rotate(24deg);
  opacity: 0;
}
.stick.enter, .stick.held { opacity: 1; }
.stick.enter { animation: stickDrop 1.1s cubic-bezier(.4,1.5,.5,1) forwards; }
@keyframes stickDrop {
  0% { left: 50%; top: -30%; transform: translate(-50%,0) rotate(35deg); }
  70% { left: 50%; top: 30%; transform: translate(-50%,0) rotate(14deg); }
  85% { transform: translate(-50%,0) rotate(28deg); }
  100% { left: 50%; top: 32%; transform: translate(-50%,0) rotate(22deg); }
}
@keyframes stickReady { from { opacity: .3; } to { opacity: 1; } }

/* 蓄力暗角 */
.charge-vig {
  position: absolute; inset: 0; z-index: 15; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 calc(40px + 90px * var(--p,0)) rgba(255,60,60, calc(.25 + .45 * var(--p,0)));
  transition: opacity .2s;
}
.charge-vig.in { opacity: 1; }
.hold-hint {
  position: absolute; left: 50%; top: 11%; transform: translate(-50%,-50%) scale(.6);
  z-index: 16; font-size: 30px; font-weight: 900; color: #fff;
  -webkit-text-stroke: 2px var(--ink); text-shadow: 0 4px 0 var(--ink);
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.hold-hint.in { animation: holdPulse .6s ease-in-out infinite; }
@keyframes holdPulse { 0%,100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 50% { opacity: .75; transform: translate(-50%,-50%) scale(1.12); } }

/* 判定圈 */
.ring {
  position: absolute; z-index: 12; width: 64px; height: 64px; border-radius: 50%;
  border: 5px solid #fff; outline: 3px solid var(--ink); opacity: 0; pointer-events: none;
  box-shadow: none;
}
.ring.hold { border-color: #ffd23f; }
.ring.ghost { border-style: dashed; }
.ring-label {
  position: absolute; z-index: 12; font-size: 18px; font-weight: 900; color: #fff;
  -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 2px 0 var(--ink); pointer-events: none; white-space: nowrap;
}

/* 文字反馈 */
.judge-pop {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%,-50%) scale(0);
  z-index: 18; font-size: 40px; font-weight: 900; pointer-events: none; white-space: nowrap;
  color: #fff; -webkit-text-stroke: 2.5px var(--ink); text-shadow: 0 5px 0 var(--ink);
}
.judge-pop.pop { animation: judgePop .45s cubic-bezier(.2,1.5,.4,1) forwards; }
.judge-pop[data-rank="perfect"] { color: #ffe66d; }
.judge-pop[data-rank="good"] { color: #a6f0c6; }
.judge-pop[data-rank="ok"] { color: #9fd8ff; }
.judge-pop[data-rank="early"], .judge-pop[data-rank="miss"] { color: #d8d2e0; font-size: 32px; }
@keyframes judgePop {
  0% { transform: translate(-50%,-30%) scale(0) rotate(-8deg); opacity: 0; }
  30% { transform: translate(-50%,-50%) scale(1.25) rotate(2deg); opacity: 1; }
  70% { transform: translate(-50%,-55%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-90%) scale(.9); opacity: 0; }
}
.onomat {
  position: absolute; z-index: 19; font-size: 46px; font-weight: 900; pointer-events: none; white-space: nowrap;
  color: #fff; -webkit-text-stroke: 3px var(--red); text-shadow: 0 4px 0 var(--ink);
  transform: translate(-50%,-50%) scale(0);
}
.onomat.pop { animation: onomat .5s cubic-bezier(.2,1.6,.4,1) forwards; }
.onomat.ghost { -webkit-text-stroke: 3px #b9a89a; color: #fff; }
.onomat[data-dull="true"] { -webkit-text-stroke: 3px #9a95a8; font-size: 34px; }
@keyframes onomat {
  0% { transform: translate(-50%,-30%) scale(.3) rotate(-10deg); opacity: 0; }
  35% { transform: translate(-50%,-50%) scale(1.3) rotate(4deg); opacity: 1; }
  100% { transform: translate(-50%,-120%) scale(1) rotate(-2deg); opacity: 0; }
}
.cue {
  position: absolute; left: 50%; top: 16%; transform: translate(-50%,-50%) scale(.8);
  z-index: 17; background: rgba(74,59,58,.85); color: #fff; font-weight: 800; font-size: 17px;
  padding: 8px 18px; border-radius: 999px; border: 3px solid #fff; opacity: 0; pointer-events: none; white-space: nowrap;
}
.cue.show { animation: cueIn 1s ease-out forwards; }
@keyframes cueIn { 0% { opacity: 0; transform: translate(-50%,-30%) scale(.8); } 20%,75% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; } }
.milestone {
  position: absolute; left: 50%; top: 12%; transform: translate(-50%,-50%) scale(.5);
  z-index: 18; background: #ffd23f; color: #6b3e00;
  font-weight: 900; font-size: 19px; padding: 10px 22px; border-radius: 999px;
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); opacity: 0; pointer-events: none; white-space: nowrap;
}
.milestone.show { animation: milestone 1.3s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes milestone {
  0% { opacity: 0; transform: translate(-50%, 20%) scale(.5) rotate(-4deg); }
  20%,75% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(1deg); }
  100% { opacity: 0; transform: translate(-50%,-80%) scale(.95); }
}
.subtitle {
  position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%);
  z-index: 17; background: rgba(40,30,50,.82); color: #fff; font-size: 17px; font-weight: 700;
  padding: 6px 16px; border-radius: 10px; opacity: 0; pointer-events: none; white-space: nowrap;
}
.subtitle.show { animation: subIn .65s ease-out forwards; }
@keyframes subIn { 0% { opacity: 0; transform: translate(-50%, 8px); } 15%,75% { opacity: 1; transform: translate(-50%,0); } 100% { opacity: 0; } }
.bubble {
  position: absolute; left: auto; right: 6%; top: 10%; z-index: 17; max-width: 52%;
  background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 8px 12px;
  font-size: 17px; font-weight: 800; opacity: 0; transform: scale(.5); pointer-events: none;
}
.bubble::after {
  content: ''; position: absolute; bottom: -12px; left: 34px;
  border: 8px solid transparent; border-top-color: var(--ink);
}
.bubble::before {
  content: ''; position: absolute; bottom: -7px; left: 37px; z-index: 1;
  border: 6px solid transparent; border-top-color: #fff;
}
.bubble.show { animation: bubblePop .9s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes bubblePop {
  0% { opacity: 0; transform: scale(.4) translateY(8px); }
  20%,70% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(.9) translateY(-6px); }
}
.tap-hint { text-align: center; font-size: 12px; color: rgba(74,59,58,.7); padding: 7px 0 calc(env(safe-area-inset-bottom) + 6px); background: rgba(255,240,210,.6); }

/* 暂停浮层 */
.pause-overlay {
  position: absolute; inset: 0; z-index: 30; background: rgba(40,30,58,.6); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.pause-overlay.show { display: flex; }
.pause-overlay .card { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; }

/* —— 结算 —— */
#screen-results {
  background: #ffe9c8; justify-content: center; text-align: center;
  padding: calc(26px + env(safe-area-inset-top)) 22px calc(26px + env(safe-area-inset-bottom));
}
.results-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.res-zhenan { width: 150px; height: 150px; object-fit: cover; object-position: center 14%; border-radius: 26px; border: 4px solid var(--ink); background: #fff; box-shadow: var(--shadow); }
.rank-stamp {
  font-size: 96px; font-weight: 900; line-height: 1;
  color: #ff5d5d; -webkit-text-stroke: 3px var(--ink);
  text-shadow: 0 6px 0 var(--ink); transform: scale(3) rotate(-12deg); opacity: 0;
  animation: rankLand .45s cubic-bezier(.2,1.5,.4,1) .25s forwards;
}
.rank-stamp[data-rank="S"] { color: #ffd700; }
.rank-stamp[data-rank="A"] { color: #ff8c42; }
.rank-stamp[data-rank="B"] { color: #3ecf8e; }
.rank-stamp[data-rank="C"] { color: #6fb7ff; }
.rank-stamp[data-rank="F"] { color: #b0a8c0; }
@keyframes rankLand { 0% { transform: scale(3) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(-12deg); opacity: 1; } }
.res-title { font-size: 24px; font-weight: 900; }
.res-line { font-size: 15px; color: #7a6655; background: #fff8ec; border: 2px dashed #c9b196; border-radius: 12px; padding: 8px 14px; }
.res-grid { display: flex; gap: 10px; width: 100%; margin-top: 6px; }
.res-grid > div { flex: 1; background: #fff8ec; border: 3px solid var(--ink); border-radius: 16px; padding: 10px 4px; box-shadow: 0 3px 0 var(--ink); }
.res-grid b { display: block; font-size: 22px; } .res-grid span { font-size: 12px; color: #9a8674; }
.res-counts { font-size: 12px; color: #9a8674; }
.results-wrap .btn-row { width: 100%; margin-top: 8px; }

/* —— 设置 —— */
.settings-card { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.settings-card h2 { text-align: center; }
.set-line { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 700; }
.set-line.sub { font-size: 11px; color: #a08b8a; font-weight: 400; }
.set-line.sub span { line-height: 1.4; }
.set-line input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--red); }
.set-block { background: #fff; border: 2px dashed #d3bda2; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.set-block input[type="range"] { width: 100%; accent-color: var(--red); }
.set-hint { font-size: 11px; color: #a08b8a; }
.calib-hint {
  min-height: 52px; border: 3px dashed #b9a089; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #8a6f58; cursor: pointer;
}
.calib-hint.on { border-style: solid; border-color: var(--red); color: var(--red); background: #fff; }

/* 横屏提示 */
.rotate-tip { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .phone > *:not(.rotate-tip) { display: none !important; }
  .rotate-tip {
    display: flex; position: absolute; inset: 0; z-index: 99; background: #2b2340; color: #fff;
    align-items: center; justify-content: center; flex-direction: column; gap: 14px; font-size: 18px; text-align: center; padding: 20px;
  }
  .rotate-tip .ph { font-size: 46px; animation: rotatePh 1.4s ease-in-out infinite; }
}
@keyframes rotatePh { 0%,100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .stage-area.shake { animation: none; }
}

/* —— P0/P1 修复追加层 —— */
/* hold 充能球：与 tap 收缩圈完全不同的视觉对象 */
.hold-ball {
  position: absolute; z-index: 10; width: 86px; height: 86px; border-radius: 50%;
  left: 50%; top: 50%; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--s, .25));
  background: #ffd23f;
  border: 4px solid var(--ink);
  box-shadow: none;
  transition: opacity .12s;
}
.hold-ball.in { opacity: .92; }
.hold-ball.full { border-color: #ff5d5d; }
.hold-ball.demo {
  opacity: .9;
  animation: ballDemo .5s cubic-bezier(.3, 1.4, .5, 1) forwards;
}
@keyframes ballDemo {
  0% { transform: translate(-50%,-50%) scale(.25); }
  85% { transform: translate(-50%,-50%) scale(1.25); }
  100% { transform: translate(-50%,-50%) scale(.25); opacity: 0; }
}

/* 连射档：立绘只做 120ms 挤压，不换帧，避免频闪 */
.zhenan.rapid-hit { animation: rapidSquish .12s ease-out; transform-origin: 21% 50%; }
@keyframes rapidSquish { 50% { transform: scaleX(1.05) scaleY(.95) rotate(-1.5deg); } }
.onomat.rapid.pop { animation: onomatRapid .16s ease-out forwards; font-size: 38px; }
@keyframes onomatRapid {
  0% { transform: translate(-50%,-50%) scale(.7); opacity: .4; }
  40% { transform: translate(-50%,-56%) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%,-70%) scale(.95); opacity: .65; }
}

/* 舞台顶部不加压暗条：纯色背景本身就托得住 HUD */
.stage-area::before { content: none; }
.gauge-pass-label {
  position: absolute; left: 50%; top: 17px; transform: translateX(-50%);
  font-size: 9px; font-weight: 800; color: rgba(74,59,58,.55); pointer-events: none;
}

/* 热区提示三次后淡出 */
.tap-hint { transition: opacity .5s; }
.tap-hint.fade { opacity: 0; pointer-events: none; }

.btn.wide { width: 100%; margin-top: 2px; }
#screen-results .btn-row { margin-bottom: 2px; }

/* —— 二轮视觉修复 —— */
.title-slogan {
  margin-top: 10px; font-size: 15px; font-weight: 800; color: #b07b4a; letter-spacing: 1px;
}
.stick.held {
  left: -30%; right: auto; top: 39%; width: 72%;
  transform: rotate(calc(18deg + var(--wind, 0deg)));
  animation: stickReady .3s ease-out;
}