/* Piano Berjalan: jalur not di kanvas, papan pemain, hitung mundur */
.pn-wrap { flex: 1; min-height: 0; display: flex; padding: clamp(4px, 1vw, 12px); background: #1e1b4b; }
.pn-stage { position: relative; flex: 1; min-height: 0; border-radius: 16px; overflow: hidden; border: 3px solid #fff; touch-action: none; user-select: none; -webkit-user-select: none; background: #0f172a; }
.pn-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pn-hud { position: absolute; left: 0; right: 0; top: 6px; display: flex; justify-content: center; align-items: center; gap: 8px; pointer-events: none; z-index: 2; flex-wrap: wrap; padding: 0 8px; }
.pn-song { background: rgba(15,23,42,.75); color: #fff; border-radius: 999px; padding: 2px 14px; font-weight: 800; font-size: clamp(12px, 1.6vw, 20px); }
.pn-pls { display: flex; gap: 6px; }
.pn-pl { background: rgba(255,255,255,.92); border-radius: 999px; padding: 2px 12px; font-weight: 800; font-size: clamp(12px, 1.5vw, 18px); border-left: 8px solid var(--pc); white-space: nowrap; }
.pn-pl b { font-variant-numeric: tabular-nums; margin-left: 4px; }
.pn-team { background: rgba(255,255,255,.92); border-radius: 999px; padding: 2px 14px; font-weight: 800; font-size: clamp(12px, 1.6vw, 20px); }
.pn-team .pn-combo { color: #b45309; margin-left: 4px; }
.pn-prog { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: rgba(255,255,255,.2); z-index: 3; }
.pn-prog i { display: block; height: 100%; width: 0; background: #fde047; }
.pn-count { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-weight: 900; color: #fff; text-shadow: 0 4px 0 rgba(15,23,42,.45); font-size: clamp(54px, 16vh, 150px); line-height: 1; pointer-events: none; z-index: 3; }
.pn-fb { position: absolute; left: 50%; top: 44%; transform: translate(-50%, 10px); background: var(--ink); color: #fff; padding: 6px 16px; border-radius: 14px; font-weight: 800; font-size: clamp(14px, 2vw, 26px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 5; text-align: center; max-width: 80%; }
.pn-fb.show { opacity: 1; transform: translate(-50%, 0); }
.pn-stars { font-size: clamp(32px, 7vh, 60px); color: #f59e0b; letter-spacing: 6px; line-height: 1; margin-bottom: 6px; }
.pn-stars .off { color: #cbd5e1; }
@media (max-height: 520px) { .pn-wrap { padding: 3px 6px; } .pn-stage { border-width: 2px; border-radius: 12px; } .pn-hud { top: 8px; } }
@media (prefers-reduced-motion: reduce) { .pn-fb { transition: none; } }