html,body { height:100%; overflow:hidden; overscroll-behavior:none; }
body,button,a,.control-button,.instruction-list,.hud { touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.game-body { background:radial-gradient(120% 90% at 50% -10%,#1c2440aa 0%,transparent 55%),var(--ink); }
.game-app { height:100vh; height:100svh; display:grid; grid-template-areas:"header" "player" "stage" "controls"; grid-template-rows:auto auto minmax(0,1fr) auto; padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); overflow-y:auto; overflow-x:hidden; }
.game-header { grid-area:header; }
.song-player { grid-area:player; }
.stage { grid-area:stage; }
.controls { grid-area:controls; }
.game-header { min-height:62px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem; position:relative; z-index:20; }
.game-header__back { width:48px; height:48px; border:1px solid #ffffff22; border-radius:50%; display:grid; place-items:center; text-decoration:none; background:#0c1019b8; font-size:1.3rem; }
.game-header__title { overflow:hidden; }
.game-header__title p { margin:0; color:var(--blue); font-size:.62rem; font-weight:900; letter-spacing:.16em; }
.game-header__title h1 { margin:.15rem 0 0; font-size:clamp(.95rem,3vw,1.25rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-header__tools { display:flex; gap:.35rem; }
.game-header__tools button { width:46px; height:46px; border:1px solid #ffffff22; border-radius:50%; background:#0c1019cc; cursor:pointer; display:grid; place-items:center; color:var(--cream); }
.game-header__tools [data-song].is-playing { border-color:#70a7ff88; color:var(--blue); box-shadow:0 0 0 3px #70a7ff18,0 0 20px #2d6cdf55; }
.game-header__tools [data-audio] { font-size:.62rem; font-weight:900; letter-spacing:.03em; color:#5a6272; }
.game-header__tools [data-audio].is-active { border-color:#1ed76088; color:#7cf0a4; box-shadow:0 0 0 3px #1ed76018,0 0 16px #1ed76040; }
.stage { min-height:0; position:relative; z-index:26; overflow:hidden; border:1px solid #ffffff18; border-radius:22px; background:#07101f; isolation:isolate; }
.stage::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 90px #0008; z-index:4; }
.game-canvas { width:100%; height:100%; display:block; touch-action:none; }
.hud { position:absolute; left:.75rem; right:.75rem; top:.75rem; z-index:8; display:flex; justify-content:space-between; gap:.5rem; pointer-events:none; }
.hud__group { display:flex; gap:.4rem; }
.hud__chip { min-height:38px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.1rem; padding:.32rem .65rem; border:1px solid #ffffff1f; border-radius:14px; background:#05070dcc; backdrop-filter:blur(8px); }
.hud__chip small { font-size:.52rem; font-weight:800; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.hud__chip b { color:var(--blue); font-size:.92rem; font-weight:900; line-height:1.15; }
.game-message { position:absolute; left:50%; top:18%; z-index:10; transform:translate(-50%,-50%); padding:.5rem 1rem; border-radius:999px; background:#05070ddd; color:var(--cream); font-weight:900; opacity:0; transition:opacity .2s; pointer-events:none; text-align:center; white-space:nowrap; }
.game-message.show { opacity:1; }
.song-player { position:relative; z-index:25; width:100%; height:200px; margin:0 0 .45rem; overflow:hidden; border:1px solid #ffffff25; border-radius:12px; background:#080b12; box-shadow:0 8px 28px #0008; touch-action:pan-y; transition:height .22s ease; }
.song-player.is-compact { height:48px; }
.song-player__compact { position:absolute; z-index:3; inset:0 0 auto; height:48px; display:grid; grid-template-columns:34px minmax(0,1fr) 38px 34px; align-items:center; gap:.45rem; padding:0 .4rem 0 .6rem; background:linear-gradient(90deg,#122239,#0b101a 66%); }
.song-player__mark { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#70a7ff22; color:var(--blue); font-weight:950; }
.song-player__copy { min-width:0; display:flex; align-items:baseline; gap:.55rem; white-space:nowrap; overflow:hidden; }
.song-player__copy strong { overflow:hidden; text-overflow:ellipsis; font-size:.78rem; }
.song-player__copy small { overflow:hidden; text-overflow:ellipsis; color:#9da6b5; font-size:.64rem; }
.song-player__play,.song-player__expand { width:34px; height:34px; display:grid; place-items:center; border:1px solid #ffffff2d; border-radius:50%; background:#05070dcc; color:var(--cream); cursor:pointer; }
.song-player[data-song-state="playing"] .song-player__mark { color:#7cf0a4; background:#1ed76028; box-shadow:0 0 16px #1ed76045; }
.song-player__embed { position:absolute; left:0; right:0; top:48px; height:152px; opacity:1; transition:opacity .18s ease; }
.song-player.is-compact .song-player__embed { height:0; opacity:0; pointer-events:none; }
.song-player__embed > [data-song-close] { position:absolute; z-index:2; right:4px; top:4px; width:30px; height:30px; border:1px solid #ffffff42; border-radius:50%; background:#05070de8; color:var(--cream); cursor:pointer; }
.song-player iframe { display:block; width:100%; min-height:152px; border-radius:0 0 11px 11px; background:#121212; }
.controls { min-height:82px; display:flex; align-items:end; justify-content:space-between; gap:.7rem; padding-top:.65rem; position:relative; z-index:20; }
.controls--empty { display:none; min-height:0; padding:0; }
.controls__side { display:flex; gap:.55rem; flex:1; }
.controls__side--action { justify-content:flex-end; }
.controls--grouped .controls__side { padding:.32rem; border:1px solid #ffffff17; border-radius:22px; background:#080c15a8; }
.controls--grouped .controls__side--move::before,.controls--grouped .controls__side--action::before { align-self:center; color:#8e97a5; font-size:.55rem; font-weight:950; letter-spacing:.08em; writing-mode:vertical-rl; transform:rotate(180deg); }
.controls--grouped .controls__side--move::before { content:"MOVER"; }
.controls--grouped .controls__side--action::before { content:"ACCIÓN"; }
.control-button { min-width:64px; min-height:64px; border:1px solid #ffffff25; border-radius:18px; background:linear-gradient(#172238,#0c1019); color:var(--cream); font-weight:950; font-size:1.25rem; box-shadow:0 6px 0 #03050a; cursor:pointer; touch-action:none; }
.control-button:active,.control-button.active { transform:translateY(4px); box-shadow:0 2px 0 #03050a; background:var(--blue-deep); }
.control-button--wide { flex:1; min-width:100px; font-size:.85rem; letter-spacing:.06em; }
.control-button--fire { background:linear-gradient(#c63732,#761322); }
.screen { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:1rem; background:#05070de8; backdrop-filter:blur(12px); overflow:auto; touch-action:pan-y; }
.screen[hidden] { display:none; }
.screen__panel { width:min(520px,100%); max-height:100%; overflow:auto; padding:clamp(1.2rem,4vw,2rem); border:1px solid #ffffff22; border-radius:22px; background:linear-gradient(150deg,#11192a,#0c1019); box-shadow:0 20px 80px #000a; }
.screen__panel--intro { position:relative; }
.screen__intro-copy { position:relative; z-index:1; width:100%; }
.screen__panel h2 { font-size:clamp(2rem,7vw,3.4rem); line-height:.9; letter-spacing:-.055em; margin:.4rem 0 1rem; text-transform:uppercase; }
.screen__panel p { color:#b4bbc6; line-height:1.5; }
.instruction-list { padding:0; list-style:none; display:grid; gap:.7rem; margin:1.3rem 0; }
.instruction-list li { display:flex; gap:.7rem; align-items:center; }
.instruction-list li span { flex:0 0 34px; height:34px; display:grid; place-items:center; border-radius:10px; background:#70a7ff20; color:var(--blue); font-weight:900; }
.screen__actions { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1rem; }
.screen__actions .primary-button,.screen__actions .screen__actions-wide { grid-column:1/-1; }
.result-score { padding:1rem 0; border-block:1px solid #ffffff16; margin:1rem 0; }
.result-score small { color:var(--blue); font-weight:900; letter-spacing:.12em; }
.result-score strong { display:block; font-size:clamp(3.5rem,14vw,6rem); line-height:1; letter-spacing:-.06em; }
.result-meta { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.result-meta div { background:#ffffff08; border-radius:14px; padding:.8rem; }
.result-meta span { display:block; color:#8e97a5; font-size:.7rem; }
.result-meta b { display:block; margin-top:.25rem; font-size:1.2rem; }
.album-link { display:flex; align-items:center; justify-content:center; min-height:46px; margin-top:.75rem; border:1px solid #1ed76055; border-radius:999px; color:#75ef9e; font-size:.78rem; font-weight:900; text-align:center; text-decoration:none; }
.ranking-list { list-style:none; padding:0; margin:1rem 0; display:grid; gap:.35rem; }
.ranking-list li { display:grid; grid-template-columns:32px 1fr auto; gap:.7rem; padding:.65rem; border-radius:10px; background:#ffffff08; }
.ranking-list li b:last-child { color:var(--blue); }
.ranking-list li span.is-top3 { color:var(--fire); font-weight:900; }
.immersive .game-app { position:fixed; inset:0; z-index:9999; background:var(--ink); }
@media (max-height:650px) {
  .game-header { min-height:48px; }
  .game-header__back,.game-header__tools button { width:40px;height:40px; }
  .song-player.is-compact { height:48px; }
  .controls { min-height:64px; }
  .control-button { min-height:56px;min-width:56px; }
  .screen__panel { padding:1rem; }
  .screen__panel h2 { font-size:1.9rem; }
  .instruction-list { margin:.7rem 0; }
}
@media (max-width:520px) {
  .game-app { padding-left:max(.4rem,env(safe-area-inset-left)); padding-right:max(.4rem,env(safe-area-inset-right)); }
  .game-header { gap:.35rem; }
  .game-header__back { width:40px;height:40px; }
  .game-header__title p { font-size:.52rem; letter-spacing:.1em; }
  .game-header__title h1 { font-size:.92rem; }
  .game-header__tools { gap:.16rem; }
  .game-header__tools button { width:38px;height:38px; font-size:.82rem; }
  .song-player.is-compact { height:48px; }
  .song-player__copy { display:block; }
  .song-player__copy strong,.song-player__copy small { display:block; }
  .hud { left:.35rem; right:.35rem; top:.4rem; gap:.2rem; }
  .hud__group { min-width:0; gap:.18rem; }
  .hud__chip { min-height:34px; gap:.02rem; padding:.28rem .5rem; }
  .hud__chip small { font-size:.44rem; }
  .hud__chip b { font-size:.8rem; }
  .controls { gap:.38rem; }
  .controls__side { gap:.35rem; min-width:0; }
  .control-button { min-width:58px; min-height:60px; font-size:1rem; }
  .control-button--wide { min-width:86px; font-size:.72rem; }
  .screen { padding:.45rem; }
  .screen__panel { border-radius:18px; padding:1rem; }
  .screen__panel h2 { font-size:clamp(1.8rem,11vw,2.7rem); }
  .instruction-list { gap:.48rem; margin:.75rem 0; }
  .instruction-list li { gap:.5rem; font-size:.88rem; }
  .instruction-list li span { flex-basis:31px; height:31px; font-size:.72rem; }
}
@media (min-width:900px) {
  .game-app { width:min(1120px,100%); margin:auto; }
  .stage { border-radius:28px; }
  .controls { padding-inline:2rem; }
  .screen__panel--intro { width:min(680px,100%); }
}
@media (max-height:800px) {
  .game-header { min-height:50px; }
  .game-header__back,.game-header__tools button { width:42px;height:42px; }
  .song-player.is-compact { height:48px; }
  .controls:not(.controls--empty) { min-height:66px; padding-top:.4rem; }
  .control-button { min-height:56px; }
  .screen { padding:.65rem; }
  .screen__panel { padding:1rem 1.2rem; }
  .screen__panel h2 { margin:.25rem 0 .65rem; font-size:clamp(1.85rem,6vh,2.7rem); }
  .instruction-list { gap:.4rem; margin:.65rem 0; }
  .instruction-list li span { flex-basis:30px; height:30px; }
  .screen__panel p { margin:.55rem 0; line-height:1.35; }
  .screen__panel .primary-button { min-height:48px; padding:.75rem 1.2rem; }
}
.rotate-overlay { display:none; position:fixed; inset:0; z-index:99999; background:var(--ink); color:var(--cream); flex-direction:column; align-items:center; justify-content:center; gap:1rem; text-align:center; padding:2rem; }
.rotate-overlay p { max-width:20rem; font-size:1.1rem; font-weight:800; }
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse) {
  .rotate-overlay { display:flex; }
}