/* Tempo — scoped styles (tp-) */
.new-game[data-game=tempo] .intro-art{background:#e6e0f3}
.tp-bpm{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:0 0 6px;color:var(--muted);font-size:12px}
.tp-bpm strong{font-family:'Fredoka',sans-serif;font-size:30px;font-weight:500;color:var(--ink);letter-spacing:-.5px}
.tp-stage{display:grid;place-items:center;padding:14px 0 8px}
.tp-pad{position:relative;width:min(230px,62vw);aspect-ratio:1;border-radius:50%;border:2px solid #333833;background:#f3f0fa;color:var(--ink);display:grid;place-items:center;padding:0;overflow:visible;touch-action:manipulation;user-select:none;-webkit-user-select:none;box-shadow:inset 0 0 0 10px #fffefa,inset 0 0 0 11px #d9d2ea;transition:background .12s,transform .08s}
.tp-pad-label{font-family:'Fredoka',sans-serif;font-size:34px;font-weight:500;letter-spacing:-.5px;position:relative;z-index:1;pointer-events:none}
.tp-pad.live{cursor:pointer}
.tp-pad:active{transform:scale(.985)}
.tp-pad.beat{background:#c9bdf0}
.tp-pad.silent{background:#fbfaf6;box-shadow:inset 0 0 0 10px #fffefa,inset 0 0 0 11px #e4e0d5;border-style:dashed}
.tp-pad.silent .tp-pad-label{font-size:24px;color:var(--muted)}
.tp-ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid #8a7fd0;opacity:0;pointer-events:none}
.tp-pad.beat .tp-ring{animation:tp-ring .5s ease-out}
@keyframes tp-ring{from{opacity:.75;transform:scale(1)}to{opacity:0;transform:scale(1.22)}}
.tp-ripple{position:absolute;inset:18%;border-radius:50%;background:#5458a7;opacity:0;pointer-events:none;animation:tp-ripple .45s ease-out}
@keyframes tp-ripple{from{opacity:.22;transform:scale(.6)}to{opacity:0;transform:scale(1.15)}}
.tp-lights{display:flex;justify-content:center;gap:14px;margin:16px auto 0;flex-wrap:wrap;max-width:520px}
.tp-group{display:flex;flex-direction:column;align-items:center;gap:6px}
.tp-group>span{font-size:10px;letter-spacing:.4px;color:var(--muted);text-transform:uppercase}
.tp-dots{display:flex;gap:5px}
.tp-dots i{width:11px;height:11px;border-radius:50%;border:1px solid #c5bedb;background:transparent;transition:background .1s}
.tp-group.count i.lit{background:#c9bdf0;border-color:#8a7fd0}
.tp-group.guided i.lit{background:#5458a7;border-color:#414581}
.tp-group.silent i{border-style:dashed;border-color:#c9c4b5}
.tp-group.silent i.tapped{background:#9fd0c0;border:1px solid #4f9e86}
.game-page .btn.tp-start{min-width:170px}
.new-game h2.tp-verdict{margin:6px 0 14px}
.tp-stats{display:flex;justify-content:center;gap:10px;max-width:440px;margin:0 auto 14px}
.tp-stats>div{flex:1 1 0;border:1px solid #dcd6ea;border-radius:12px;background:#f7f5fc;padding:9px 6px;min-width:0}
.tp-stats small{display:block;font-size:11px;color:var(--muted)}
.tp-stats strong{font-family:'Fredoka',sans-serif;font-size:24px;font-weight:500;white-space:nowrap}
.tp-tl-wrap{border:1px solid #e1ddd2;border-radius:14px;background:#fbfaf6;padding:6px}
.tp-timeline{display:block;width:100%;height:auto}
.tp-silent-zone{fill:#efeaf8}
.tp-tick{stroke:#b9b3a6;stroke-width:2;stroke-linecap:round}
.tp-tick.silent{stroke:#5458a7}
.tp-tl-labels{display:grid;grid-template-columns:1fr 1fr;font-size:11px;color:var(--muted);padding:2px 14px 4px}
.tp-tl-labels .silent{color:#5458a7;font-weight:600}
.tp-tap{stroke:#333833;stroke-width:1.5}
.tp-tap.guided{fill:#d6d2c6;stroke:#a9a395}
.tp-tap.good{fill:#9fd0c0}
.tp-tap.ok{fill:#efc969}
.tp-tap.off{fill:#e79ab6}
.tp-link{stroke-width:4;stroke-linecap:round;opacity:.6}
.tp-link.good{stroke:#4f9e86}.tp-link.ok{stroke:#c9a23f}.tp-link.off{stroke:var(--hot)}
.tp-miss{fill:none;stroke:var(--hot);stroke-width:2;stroke-dasharray:3 3}
.tp-extra{stroke:#8a8478;stroke-width:2;stroke-linecap:round}
.tp-legend{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:11px;color:var(--muted);margin:10px 0 0}
.tp-legend span{display:inline-flex;align-items:center;gap:6px}
.tp-legend i{display:inline-block}
.tp-legend .k-tick{width:2px;height:12px;background:#5458a7;border-radius:2px}
.tp-legend .k-tap{width:10px;height:10px;border-radius:50%;background:#9fd0c0;border:1px solid #333833}
.tp-legend .k-miss{width:10px;height:10px;border-radius:50%;border:1.5px dashed var(--hot)}
.tp-rounds{display:flex;flex-direction:column;gap:10px;max-width:520px;margin:22px auto 0}
.tp-round{border:1px solid #e1ddd2;border-radius:14px;background:#fbfaf6;padding:8px 10px 4px}
.tp-round-head{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);padding:0 4px}
.tp-round-head strong{font-family:'Fredoka',sans-serif;font-size:22px;font-weight:500;color:var(--ink)}
@media(max-width:450px){
  .tp-lights{gap:10px}
  .tp-dots{gap:4px}
  .tp-dots i{width:9px;height:9px}
  .tp-stats strong{font-size:20px}
  .tp-pad-label{font-size:30px}
}
@media(prefers-reduced-motion:reduce){.tp-pad,.tp-dots i{transition:none}.tp-pad.beat{background:#b3a6ea}.tp-ripple{display:none}}