:root {
  --game-width: min(100vw, 430px);
  --navy: #061633;
  --navy2: #020716;
  --cyan: #00efff;
  --cyan-soft: rgba(0, 239, 255, .42);
  --blue: #0077ff;
  --green: #00f578;
  --yellow: #ffd400;
  --pink: #ff3bd5;
  --text: #ffffff;
  --stage-accent: #61e9fa;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 239, 255, .18), transparent 24%),
    linear-gradient(180deg, #06183d 0%, #020714 58%, #000 100%);
  color: var(--text);
  font-family: Poppins, "Segoe UI", Arial, sans-serif;
  touch-action: none;
  overscroll-behavior: none;
}
body { position: fixed; inset: 0; }
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: calc((100vw - var(--game-width)) / 2 + 1px);
  background: linear-gradient(180deg, #020817, #000);
  pointer-events: none;
  z-index: 1;
}
body::before { left: 0; }
body::after { right: 0; }

#pianopix-canvas {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--game-width);
  height: 100vh;
  height: 100svh;
  display: block;
  background: #020714;
  box-shadow: 0 0 0 1px rgba(0,239,255,.12), 0 0 55px rgba(0,239,255,.16);
  z-index: 2;
}
.hidden { display: none !important; }

.boot-loader {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 20%, rgba(0,239,255,.24), transparent 25%),
    radial-gradient(circle at 50% 74%, rgba(255,59,213,.14), transparent 30%),
    linear-gradient(180deg, #061633, #020716 60%, #000);
}
.boot-card {
  width: min(90vw, 360px);
  text-align: center;
  padding: 28px 22px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(3,14,38,.94), rgba(1,5,16,.94));
  border: 1px solid rgba(0,239,255,.35);
  box-shadow: 0 24px 70px rgba(0,0,0,.56), 0 0 34px rgba(0,239,255,.18);
}
.boot-card h1 { margin: 12px 0 6px; color: #fff; font-size: 32px; font-weight: 950; line-height: .98; text-shadow: 0 0 18px var(--cyan-soft); }
.boot-card p { margin: 0 auto 16px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.35; }
.boot-rings { width: 88px; height: 88px; margin: 0 auto; position: relative; }
.boot-rings span { position: absolute; inset: 0; border-radius: 50%; border: 4px solid transparent; animation: ringSpin 1.1s linear infinite; }
.boot-rings span:nth-child(1) { border-top-color: var(--cyan); filter: drop-shadow(0 0 10px var(--cyan)); }
.boot-rings span:nth-child(2) { inset: 14px; border-right-color: var(--pink); animation-direction: reverse; }
.boot-rings span:nth-child(3) { inset: 28px; border-bottom-color: #fff; animation-duration: .78s; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.boot-progress { width: 100%; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.12); margin: 17px 0 9px; }
.boot-progress span { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--pink)); transition: width .22s ease; }
.boot-status { color: rgba(255,255,255,.72); font-weight: 800; }

/* The splash shares the home identity and only runs during initialization. */
.boot-loader{background:radial-gradient(ellipse at 50% 38%,#10466495,transparent 53%),repeating-linear-gradient(110deg,transparent 0 95px,#6cdfe107 96px 97px),#061222}
.boot-card{width:min(94vw,440px);padding:20px 5px;border:0;border-radius:0;background:none;box-shadow:none}
.boot-kicker{font:800 9px/1.4 "Trebuchet MS",sans-serif;letter-spacing:3px;color:#75eae2}
.boot-logo{display:block;width:100%;height:auto;margin:10px auto 14px}
.boot-card p{color:#b8d1e0;font-size:13px;letter-spacing:.2px;margin-bottom:24px}
.boot-equalizer{display:flex;justify-content:center;align-items:center;gap:5px;height:24px;margin-bottom:18px}
.boot-equalizer i{height:22px;width:4px;border-radius:4px;background:#6af1e8;animation:boot-beat .85s ease-in-out infinite alternate}
.boot-equalizer i:nth-child(2){animation-delay:-.2s;height:13px}.boot-equalizer i:nth-child(3){animation-delay:-.4s;background:#ffdf6e}.boot-equalizer i:nth-child(4){animation-delay:-.6s;height:16px}.boot-equalizer i:nth-child(5){animation-delay:-.3s}
.boot-progress{width:65%;max-width:250px;height:5px;margin:0 auto 12px;background:#4a738340}
.boot-progress span{background:linear-gradient(90deg,#52ede8,#ffe47c)}
.boot-status{font-size:10px;color:#7c9daf;font-weight:600}
.music-round-summary{display:flex;gap:12px;justify-content:space-between;text-align:left;border:1px solid #6ad5e129;border-radius:10px;background:#091b2d;padding:10px 14px;margin:12px 0;font-size:10px;color:#8faec5}
.music-round-summary>span:last-child{text-align:right}.music-round-summary strong{display:block;color:#e5f5ff;font-size:17px;margin-top:2px}.music-round-summary>span:last-child strong{color:#ffe278}
@keyframes boot-beat{to{transform:scaleY(.35);opacity:.5}}
@media(max-height:500px){.boot-logo{width:210px;margin:0 auto}.boot-card p{margin-bottom:10px}.boot-equalizer{display:none}.music-round-summary{padding:6px 12px;margin:6px 0}.music-round-summary strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.boot-equalizer i{animation:none}.boot-progress span{transition:none}}

.top-unified-hud{position:fixed;z-index:20;top:0;left:50%;width:var(--game-width);height:calc(57px + env(safe-area-inset-top));transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 44px;align-items:center;gap:5px;padding:calc(env(safe-area-inset-top) + 6px) 8px 5px;background:linear-gradient(180deg,#051123f0,#051123b8);pointer-events:none}
.hud-item{min-width:0;padding:3px 7px;color:#8dacbf;font-size:8px;font-weight:800;line-height:1.15;text-transform:uppercase;white-space:nowrap;border-right:1px solid #8ac8f51c}
.hud-item strong{display:block;margin-top:4px;color:#f2f8ff;font-size:13px;font-weight:850;line-height:1.1;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.hud-demo-label,.hud-balance{text-align:center}.hud-demo-label strong{color:#eeb4ff;letter-spacing:1px;font-size:12px}.hud-balance strong{color:#83e6f0}.hud-target strong{color:#ffe18b}
.exit-btn{pointer-events:auto;min-width:44px;min-height:44px;border:1px solid #719abc30;border-radius:12px;background:#10283c;color:#caddea;font:700 10px Poppins,"Segoe UI",sans-serif;cursor:pointer}
.top-hud{position:fixed;z-index:19;top:calc(57px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:calc(var(--game-width) - 16px);height:45px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:6px;padding:5px 9px 7px;border:1px solid #82c9eb25;border-radius:0 0 12px 12px;background:linear-gradient(110deg,#0a283bed,#081a2aed);pointer-events:none}
.money-row{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}.money-row small{font-size:7px;font-weight:750;color:#8cacc0;letter-spacing:.3px}#money-earned{color:#71f2cc;font-size:19px;font-weight:900;line-height:1.15;letter-spacing:-.5px}
.rhythm-status{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;min-width:0;color:var(--stage-accent);font-size:7px;font-weight:850;letter-spacing:.4px;line-height:1}
.danger-life{font-size:8px;color:#ffa6ab;letter-spacing:0;white-space:nowrap}
.progress-track{grid-column:1/-1;height:3px;width:100%;border-radius:3px;background:#ffffff16;overflow:hidden;position:relative}
.progress-fill{width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#16d7b8,#85f8dc 65%,#f8e994);transform:scaleX(0);transform-origin:left;transition:transform .12s linear}
.progress-track::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(var(--flow,34%) - 1px),#08172999 var(--flow,34%),transparent calc(var(--flow,34%) + 1px),transparent calc(var(--turbo,68%) - 1px),#08172999 var(--turbo,68%),transparent calc(var(--turbo,68%) + 1px))}
html[data-pianopix-stage="1"]{--stage-accent:#d79cff}html[data-pianopix-stage="2"]{--stage-accent:#ffe48a}
.feedback-btn{position:fixed;z-index:22;bottom:calc(env(safe-area-inset-bottom) + 18px);width:44px;height:44px;display:grid;place-items:center;border:1px solid #749cbe45;border-radius:14px;background:#0a2137ed;color:#b8def1;cursor:pointer}
.feedback-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.sound-btn{left:calc(50% - var(--game-width)/2 + 8px)}.haptic-btn{right:calc(50% - var(--game-width)/2 + 8px)}.sound-btn[aria-pressed="true"],.haptic-btn[aria-pressed="false"]{color:#718699;background:#091524}.sound-btn[aria-pressed="true"]:after,.haptic-btn[aria-pressed="false"]:after{content:"";position:absolute;width:23px;height:2px;background:currentColor;transform:rotate(-45deg)}

.cashout-btn {
  position: fixed;
  z-index: 21;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  transform: translateX(-50%);
  width: calc(var(--game-width) - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #fff0ac;
  border-radius: 18px;
  min-height: 64px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fff18d 0%, #ffd04b 45%, #ffb52d 100%);
  color: #352109;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 5px 0 #b87318, 0 9px 24px #f8b42c3d, inset 0 2px 0 #fff6;
  animation: cashout-pulse 1.45s ease-in-out infinite;
  touch-action: manipulation;
  cursor: pointer;
}
.cashout-btn strong{font-size:clamp(18px,5.4vw,24px);font-variant-numeric:tabular-nums;letter-spacing:-.5px}.cashout-btn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.cashout-btn:disabled{animation:none;opacity:.65;cursor:wait}
@keyframes cashout-pulse{0%,100%{transform:translateX(-50%) scale(.98)}50%{transform:translateX(-50%) scale(1.025)}}
html[data-pianopix-cashout="true"] .feedback-btn{bottom:calc(env(safe-area-inset-bottom) + 97px)}
.cashout-note { position: fixed; z-index: 21; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 107px); width:calc(var(--game-width) - 130px); transform: translateX(-50%); color: #ffe9a9; text-align:center; font-size: 10px; font-weight: 700; line-height:1.35; text-shadow: 0 2px 8px #0008; pointer-events:none; }


/* Compact dialogs reuse the original blue/cyan palette without backdrop blur. */
.overlay,.bet-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));background:rgba(1,5,15,.82);overflow-y:auto;touch-action:pan-y}
.panel,.bet-card{--dialog-accent:#56e6f4;width:min(100%,336px);max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;margin:auto;padding:20px;border:1px solid #24455e;border-radius:18px;background:radial-gradient(ellipse at 0 0,#16364d80,transparent 65%),#071426;box-shadow:0 18px 48px #0007;color:#eef6ff;text-align:left;animation:dialog-in .16s ease-out}
.panel::before{content:none}.overlay[data-state="win"] .panel{--dialog-accent:#65e9ad;border-color:#28624f}.overlay[data-state="lose"] .panel{--dialog-accent:#a8d4f0}.overlay[data-state="danger"] .panel{--dialog-accent:#ffac99;border-color:#69433f}
.panel-heading{display:flex;align-items:center;gap:9px;margin-bottom:14px}.panel-mark{display:grid;place-items:center;width:32px;height:32px;border:1px solid #315268;border-radius:9px;background:#112e40;color:var(--dialog-accent);flex:none}.panel-mark svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.panel-badge{display:block;color:var(--dialog-accent);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.panel h1,.bet-card h2{margin:0 0 8px;color:#f4f8ff;font-size:24px;font-weight:800;line-height:1.15;letter-spacing:-.5px;text-transform:none;text-shadow:none}.bet-card h2{font-size:22px}
#overlay-text,.bet-card p{margin:0;color:#aac0d3;font-size:13px;line-height:1.5;font-weight:500}.bet-card p{margin-bottom:14px}.result-lead{display:block;margin:0 0 14px;font-size:13px;color:#aac0d3;line-height:1.5}
.overlay[data-state="win"] .panel-heading,.overlay[data-state="lose"] .panel-heading{justify-content:center;margin-bottom:10px}.overlay[data-state="win"] #overlay-title,.overlay[data-state="lose"] #overlay-title{text-align:center;font-size:23px}.overlay[data-state="win"] .result-lead,.overlay[data-state="lose"] .result-lead{text-align:center;margin-bottom:12px}
.result-summary{display:grid;gap:10px;padding:16px 12px 10px;margin:0 0 10px;border:1px solid #d1ae4f70;border-radius:14px;background:radial-gradient(ellipse at 50% 25%,#eabf3824,transparent 72%),linear-gradient(145deg,#142a3c,#0b1c2c);box-shadow:inset 0 1px 0 #fff3ba16;text-align:center}.result-prize{min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}.result-prize small{font-size:9px;font-weight:750;color:#ead6a0;letter-spacing:1.25px}.result-prize strong{display:flex;align-items:baseline;justify-content:center;gap:5px;max-width:100%;color:#ffda45;font-size:clamp(42px,13vw,54px);font-weight:900;line-height:1.05;letter-spacing:-1.8px;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:0 2px 0 #77500d,0 0 18px #ffd54a38}.result-prize .result-currency{font-size:.4em;letter-spacing:-.5px;color:#ffedaa;text-shadow:none}.result-prize strong[data-size="medium"]{font-size:clamp(32px,10vw,40px)}.result-prize strong[data-size="long"]{font-size:clamp(26px,8vw,32px)}.result-prize strong[data-size="huge"]{font-size:clamp(18px,5.5vw,22px);letter-spacing:-.5px}.result-score{min-width:0;display:flex;align-items:baseline;justify-content:center;gap:6px;border-top:1px solid #dec47626;padding-top:7px}.result-score strong{font-size:14px;font-weight:800;color:#e7f3ff;line-height:1.2}.result-score small{font-size:10px;font-weight:500;color:#9ab2c5}.result-footnote{display:block;color:#90a9bd;font-size:10px;line-height:1.45;margin:0;text-align:center}.result-footnote[hidden]{display:none}
#overlay-btn,.bet-btn{display:block;min-width:0;min-height:46px;border:1px solid #71ecf2;border-radius:11px;padding:11px 15px;background:linear-gradient(180deg,#64edf1,#25c7d5);color:#05232e;font:750 14px/1.3 Poppins,"Segoe UI",Arial,sans-serif;cursor:pointer;box-shadow:0 3px 0 #137386;touch-action:manipulation}#overlay-btn{width:100%;margin-top:18px}.bet-btn.secondary{color:#b9d0e0;background:#10283c;border-color:#29475b;box-shadow:none}.bet-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-top:15px}.bet-actions .bet-btn{padding-inline:9px}.bet-stepper{display:flex;align-items:center;gap:9px;padding:7px;border:1px solid #27465a;border-radius:12px;background:#091e30}.bet-step-btn{width:44px;height:44px;flex:none;border:1px solid #315269;border-radius:9px;color:#65eaf0;background:#123447;font-size:25px;font-weight:700;cursor:pointer}#bet-input{flex:1;min-width:0;width:100%;border:0;background:none;color:#f5faff;text-align:center;font-size:25px;font-weight:750}
#bet-range,#bet-preview,.bet-suggest-title{display:block;color:#92adc2;margin-top:10px;font-size:10px;font-weight:500;line-height:1.45}.bet-suggest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:7px}.bet-suggest-btn{min-height:44px;border:1px solid #2b4b60;border-radius:9px;background:#112b3e;color:#d5e8f7;font-size:13px;font-weight:700;cursor:pointer}.bet-suggest-btn.active{background:#235566;border-color:#70d7e1;color:#e7fcff}
.bet-stepper{border-color:#ac91485e;background:radial-gradient(ellipse at 50% 50%,#d9af291a,transparent 75%),#091e30}#bet-input{color:#ffda45;font-size:clamp(32px,9vw,38px);font-weight:900;letter-spacing:-1px;font-variant-numeric:tabular-nums;text-shadow:0 0 14px #ffd54a24}#bet-input[data-size="medium"]{font-size:clamp(24px,7vw,29px)}#bet-input[data-size="long"]{font-size:clamp(18px,5.5vw,22px)}
@keyframes dialog-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

.gesture-hint { position: fixed; z-index: 18; left: 50%; top: 52%; transform: translate(-50%, -50%); padding: 17px 18px; border: 1px solid #77cadd26; border-radius: 20px; background: #06172eec; color: #effcff; text-align: center; pointer-events: none; box-shadow: 0 8px 22px #0004; }
.lane-keys { display: none; }
.tap-hand svg { width: 40px; height: 40px; fill: #7feff2; animation: tapPulse 1.6s ease-in-out infinite; }
.gesture-hint small { display: block; width: 220px; margin-top: 8px; font-weight: 900; font-size: 13px; }
.gesture-hint small span { display: block; margin-top: 6px; font-size: 11px; font-weight: 500; line-height: 1.5; color: #abc8db; }
@keyframes tapPulse { 0%, 100% { transform: scale(1); opacity: .62; } 50% { transform: scale(1.08); opacity: 1; } }

.start-countdown{position:fixed;z-index:24;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;min-width:140px;min-height:140px;padding:18px;border:1px solid #87f9ff78;border-radius:28px;background:radial-gradient(circle at 50% 35%,#22f4ff2e,transparent 60%),#06172ee8;color:#fff;text-align:center;pointer-events:none;box-shadow:0 16px 44px #0008,0 0 30px #00efff26}
.start-countdown span{display:block;color:#ffda45;font-size:74px;font-weight:950;line-height:.9;letter-spacing:-2px;text-shadow:0 3px 0 #6d470c,0 0 24px #ffda4570;animation:countdown-pop .68s cubic-bezier(.2,1.2,.22,1)}
.start-countdown small{display:block;margin-top:9px;color:#bdf8ff;font-size:10px;font-weight:850;letter-spacing:1.1px;text-transform:uppercase}
.start-countdown.is-go span{font-size:48px;color:#60f1ff;text-shadow:0 0 22px #60f1ff80}
@keyframes countdown-pop{0%{opacity:0;transform:scale(.5)}32%{opacity:1;transform:scale(1.14)}100%{opacity:.98;transform:scale(1)}}

@media (max-width: 520px) {
  :root { --game-width: 100vw; }
  .panel, .bet-card { padding: 18px; width: min(100%, 336px); }
}

@media(max-height:480px){.panel,.bet-card{padding:12px 17px;border-radius:15px}.panel-heading{margin-bottom:8px}.panel-mark{width:26px;height:26px}.panel h1{font-size:22px;margin-bottom:6px}.result-lead{font-size:12px;margin-bottom:9px}.result-summary{padding:10px 12px 7px;margin-bottom:8px;gap:7px}.result-prize{gap:4px}.result-prize strong{font-size:40px}.result-prize strong[data-size="medium"]{font-size:34px}.result-prize strong[data-size="long"]{font-size:28px}.result-score{padding-top:5px}#overlay-btn{margin-top:12px;min-height:44px}.bet-card p{margin-bottom:10px}.bet-actions{margin-top:10px}}
@media(max-height:480px){.bet-card h2{font-size:20px;margin-bottom:6px}.bet-card p{font-size:12px;line-height:1.35;margin-bottom:8px}#bet-range,#bet-preview,.bet-suggest-title{font-size:9px;line-height:1.35;margin-top:6px}#bet-input{font-size:32px}.bet-suggest-grid{margin-top:6px}.bet-actions{margin-top:8px}}

.overlay[data-result-mode="real"][data-state="lose"] .panel{--dialog-accent:#ff7588;border-color:#703b4c}
.overlay[data-result-mode="real"][data-state="lose"] .result-summary{border-color:#e3596b70;background:radial-gradient(ellipse at 50% 25%,#f04c6520,transparent 72%),linear-gradient(145deg,#301d30,#151929);box-shadow:inset 0 1px 0 #ffb5c016}
.overlay[data-result-mode="real"][data-state="lose"] .result-prize strong{color:#ff637c;text-shadow:0 2px 0 #731f36,0 0 18px #ff496b30}
.overlay[data-result-mode="real"][data-state="lose"] .result-prize .result-currency,.overlay[data-result-mode="real"][data-state="lose"] .result-prize small{color:#ff8698}
.result-loss-mark{font-size:.55em;align-self:center;margin-right:5px;text-shadow:none}
.overlay[data-result-mode="demo"] .result-prize small{font-size:11px;letter-spacing:.45px}
.overlay[data-result-mode="demo"] #overlay-btn{min-height:58px;padding:14px 10px;font-size:16px;font-weight:900;border-color:#b2ffc8;background:linear-gradient(180deg,#a5ff87,#35e5a0);color:#07372e;box-shadow:0 4px 0 #167453,0 0 22px #57f7a42b;animation:demo-play-pulse 1.6s ease-in-out infinite}
.result-retry{display:block;width:100%;min-height:42px;margin-top:13px;padding:9px 12px;border:1px solid #485260;border-radius:10px;background:#27313e;color:#cbd2db;font:600 12px/1.35 Poppins,"Segoe UI",Arial,sans-serif;cursor:pointer;touch-action:manipulation}
@keyframes demo-play-pulse{0%,100%{transform:scale(.975)}50%{transform:scale(1.025)}}
@media(max-height:480px){.overlay[data-result-mode="demo"] .panel-heading{display:none}.overlay[data-result-mode="demo"] .result-lead{font-size:11px;line-height:1.35;margin-bottom:7px}.overlay[data-result-mode="demo"] #overlay-btn{min-height:46px;padding:10px;font-size:14px;margin-top:10px}.result-retry{min-height:36px;margin-top:9px;padding:7px 10px}.overlay[data-result-mode="demo"] .result-combo{display:none}}

/* Compatibility and feedback without changing the original layout. */
body{touch-action:manipulation}#pianopix-canvas{touch-action:none}
.panel,.bet-card{touch-action:pan-y}.bet-suggest-btn{min-height:44px}.bet-btn:disabled,.bet-step-btn:disabled,.bet-suggest-btn:disabled{opacity:.5;cursor:default}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.stage-toast{position:fixed;z-index:70;left:50%;top:30%;transform:translateX(-50%);width:min(88vw,330px);padding:12px 16px;border:1px solid var(--cyan);border-radius:12px;background:#04112df5;text-align:center;pointer-events:none;box-shadow:0 8px 25px #0008}
.stage-toast small{display:block;color:var(--cyan);font-size:9px;letter-spacing:1px}.stage-toast strong{display:block;color:#fff;font-size:13px;margin-top:4px}.stage-toast.is-error{border-color:#ff8796}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media(max-height:480px){.gesture-hint{top:65%;padding:10px 14px}.tap-hand svg{width:26px;height:26px}.gesture-hint small{font-size:11px;width:190px}.gesture-hint small span{font-size:10px}}
@media(max-height:480px){.start-countdown{min-width:118px;min-height:118px;border-radius:22px}.start-countdown span{font-size:58px}.start-countdown.is-go span{font-size:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@supports not (height:100dvh){.panel,.bet-card{max-height:calc(100vh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}

html[data-pianopix-quality="lite"] .tap-hand svg{filter:none}html[data-pianopix-quality="lite"] #pianopix-canvas{box-shadow:0 0 0 1px #164157}

.result-combo{margin:10px 0 0;padding:7px 10px;border:1px solid #e5c3762b;border-radius:9px;background:#ffd36b09;color:#f3d991;font-size:11px;font-weight:700;line-height:1.4;text-align:center}
@media(max-height:480px){.result-combo{margin-top:8px;padding:6px 8px}}

.music-modal{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 20%,#123b5480,transparent 60%),#020d20f5;overflow-y:auto;touch-action:pan-y}
.music-card{border-color:#3b6576;background:linear-gradient(145deg,#113043,#071626 65%);padding:22px}.music-card .panel-heading{justify-content:space-between;margin-bottom:12px}.music-kicker{font-size:9px;font-weight:800;letter-spacing:1.1px;color:#89dce5}.music-disc{width:30px;height:30px;border:5px solid #234757;outline:1px solid #508799;border-radius:50%;background:radial-gradient(circle,#142838 0 17%,#81dfdd 20% 42%,#142838 45%)}
.music-card h1{font-size:23px}.music-card>p{font-size:12px;line-height:1.5;color:#abc2d3;margin:0 0 17px}
.music-options{display:grid;gap:8px}.music-option{--track:#71efcf;display:flex;align-items:center;gap:12px;width:100%;min-height:65px;padding:9px 12px;border:1px solid #2a465a;border-radius:12px;background:#0d2235;color:#e9f3fc;text-align:left;cursor:pointer;font-family:inherit;touch-action:manipulation}.music-option[data-music="sertanejo"]{--track:#ffca7a}.music-option[data-music="classico"]{--track:#a6c8ff}
.music-icon{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:10px;background:#173447;color:var(--track)}.music-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.music-option strong,.music-option small{display:block}.music-option strong{font-size:15px;font-weight:800}.music-option small{margin-top:3px;color:#91adbf;font-size:10px}.music-option i{margin-left:auto;width:16px;height:16px;border:1px solid #516b7c;border-radius:50%;flex:none}.music-option[aria-pressed="true"]{border-color:var(--track);background:#173449;box-shadow:inset 3px 0 0 var(--track)}.music-option[aria-pressed="true"] i{border:4px solid #173449;outline:1px solid var(--track);background:var(--track)}
.music-footnote{display:block;margin-top:13px;color:#91aabc;font-size:10px;line-height:1.45}.music-actions{grid-template-columns:.7fr 1.5fr}.music-option:disabled{cursor:wait;opacity:.6}
@media(max-height:480px){.music-card{padding:12px 16px}.music-card .panel-heading{margin-bottom:6px}.music-disc{width:22px;height:22px;border-width:4px}.music-card h1{font-size:21px}.music-card>p{margin-bottom:6px;font-size:11px}.music-option{min-height:49px;padding:6px 10px}.music-icon{width:32px;height:32px}.music-options{gap:6px}.music-footnote{margin-top:6px;font-size:9px}.music-actions{margin-top:10px}}