* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: 'Segoe UI', Arial, sans-serif;
  user-select: none;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El juego tiene una proporcion fija de 960x600 (8:5). En vez de un ancho
   fijo + un solo media query por ancho, el frame se ajusta para caber
   ENTERO en la pantalla sea cual sea su forma (celular vertical, horizontal,
   tablet, notebook): nunca se recorta el teclado de piano de abajo ni hace
   falta hacer scroll para verlo.
   Se usa dvh/dvw (altura/ancho de viewport "dinamico") en vez de vh/vw:
   en Safari de iPhone, 100vh incluye el espacio de la barra de direcciones
   aunque este oculta, lo que hace que el juego se calcule mas alto de lo
   que realmente se ve y el teclado quede cortado. dvh se ajusta al tamano
   real visible. Se deja vh/vw como respaldo para navegadores viejos. */
#frame {
  position: relative;
  width: min(960px, 100vw, calc(100vh * 960 / 600));
  height: min(600px, 100vh, calc(100vw * 600 / 960));
  width: min(960px, 100dvw, calc(100dvh * 960 / 600));
  height: min(600px, 100dvh, calc(100dvw * 600 / 960));
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(80, 160, 255, 0.25);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #04050a;
}

#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 18px;
  pointer-events: none;
}

#shields {
  display: flex;
  gap: 6px;
}
.shieldIcon {
  width: 22px; height: 22px;
  background: radial-gradient(circle at 35% 30%, #7fe0ff, #1478c7 70%, #063a66);
  border-radius: 50%;
  box-shadow: 0 0 8px #3fa8ff;
}
.shieldIcon.lost {
  background: #222;
  box-shadow: none;
  opacity: 0.35;
}

#scoreBox {
  text-align: center;
  color: #e8ecf5;
}
#score {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(200,220,255,0.5);
}
#levelLabel {
  font-size: 13px;
  color: #9fb3d9;
  margin-top: 2px;
}

#hudBtns {
  display: flex;
  gap: 8px;
  pointer-events: none;
}
#muteBtn, #restartBtn, #pauseBtn {
  pointer-events: auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  font-size: 16px;
  cursor: pointer;
}
#pauseBtn {
  background: radial-gradient(circle at 35% 30%, #ffe27a, #d9a418 70%, #8a6a0a);
  color: #4a3400;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(255, 200, 60, 0.5);
}
#restartBtn {
  background: radial-gradient(circle at 35% 30%, #9fd1ff, #3a7fd5 70%, #1a4a8a);
  color: #04101f;
  box-shadow: 0 0 10px rgba(80, 160, 255, 0.5);
}
#muteBtn {
  background: radial-gradient(circle at 35% 30%, #d7dbe6, #7a8296 70%, #454b5c);
  color: #14181f;
  box-shadow: 0 0 10px rgba(150, 160, 180, 0.5);
}
#muteBtn.isMuted {
  background: radial-gradient(circle at 35% 30%, #8a8f9c, #4a4f5c 70%, #262a33);
  box-shadow: none;
}
#muteBtn:active, #restartBtn:active, #pauseBtn:active { transform: scale(0.94); }

.soundToggle {
  display: block;
  margin: 14px auto 0;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid rgba(150,190,255,0.35);
  background: rgba(30,40,60,0.6);
  color: #cfe0ff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.soundToggle.isMuted {
  background: rgba(30,30,35,0.6);
  color: #8a8f9c;
  border-color: rgba(140,144,156,0.35);
}
.menuToggles {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.menuToggles .soundToggle { margin: 0; }
.soundToggle.midiOn {
  background: rgba(40,90,60,0.6);
  color: #9dffc4;
  border-color: rgba(120,255,170,0.45);
}
.midiStatus {
  margin: 8px 0 0;
  font-size: 12px;
  color: #9dffc4;
}
.midiStatus.warn { color: #ffb38a; }
.midiStatus.hidden, .midiHudBadge.hidden { display: none; }
.midiHudBadge {
  font-size: 18px;
  align-self: center;
  filter: drop-shadow(0 0 4px rgba(120,255,170,0.8));
}

#progressWrap {
  position: absolute;
  top: 74px; left: 18px; right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
#progressBar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(120,180,255,0.3);
}
#progressFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3fa8ff, #7fe0ff);
  box-shadow: 0 0 8px #3fa8ff;
  transition: width 0.25s ease;
}
#distanceLabel, #timeLabel {
  color: #9fd1ff;
  font-size: 12px;
  white-space: nowrap;
}

#pianoBar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 108px;
  display: flex;
  background: linear-gradient(180deg, rgba(10,14,26,0.6), rgba(4,6,14,0.95));
  border-top: 1px solid rgba(120,180,255,0.25);
  padding: 8px 10px;
  gap: 6px;
}

.pianoKey {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgba(150,190,255,0.35);
  background: linear-gradient(180deg, #eef4ff, #c7d7f5 55%, #9fb6e0);
  color: #16233d;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  white-space: nowrap;
  padding-bottom: 8px;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 0 rgba(0,0,0,0.35);
}
.pianoKey small {
  font-weight: 500;
  font-size: 10px;
  color: #3a4a6b;
  margin-top: 2px;
}
.pianoKey:active,
.pianoKey.pressed {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.35);
  background: linear-gradient(180deg, #bfe3ff, #8fc6ff 55%, #5fa0e6);
}
.pianoKey.locked {
  background: linear-gradient(180deg, #2a2f3d, #1a1e28);
  color: #4a5266;
  cursor: default;
  box-shadow: none;
  border-color: rgba(255,255,255,0.05);
}
.pianoKey.locked small { color: #3a4256; }
.pianoKey.wrong {
  background: linear-gradient(180deg, #ff9a9a, #e05a5a 55%, #a83a3a);
}

.screen {
  /* fixed (no absolute) para que en ventanas bajas/angostas el menu pueda
     hacer scroll usando todo el viewport, sin quedar recortado por el
     overflow:hidden de #frame */
  position: fixed;
  inset: 0;
  background: rgba(2,4,10,0.85);
  display: flex;
  /* "safe center": centra cuando el contenido entra, y si no entra se
     comporta como flex-start para que TODO el contenido sea alcanzable con
     scroll (con "center" a secas, el borde superior del contenido que no
     cabe queda inalcanzable — bug clasico de flexbox). */
  align-items: safe center;
  justify-content: center;
  overflow-y: auto;
  padding: 20px 0;
  z-index: 20;
}
.screen.hidden { display: none; }

.panel {
  text-align: center;
  color: #dfe9ff;
  max-width: 560px;
  padding: 30px;
}
.panel.wide {
  max-width: 860px;
}
.panel h1 {
  font-size: 36px;
  letter-spacing: 3px;
  color: #8fd1ff;
  text-shadow: 0 0 18px rgba(100,180,255,0.6);
  margin-bottom: 16px;
}
.panel p {
  font-size: 14px;
  line-height: 1.6;
  color: #b7c6e8;
  margin-bottom: 10px;
}
.recordLine {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  color: #9fd1ff;
}
.recordMsg {
  display: inline-block;
  margin-top: 8px;
  color: #ffe27a;
  font-size: 15px;
}
.keys-help b { color: #ffe27a; }

.bigBtn {
  margin-top: 18px;
  padding: 14px 38px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #04101f;
  background: linear-gradient(180deg, #7fe0ff, #2f9dff);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(80,180,255,0.6);
}
.bigBtn:active { transform: translateY(2px); }
.bigBtn.secondary {
  background: linear-gradient(180deg, #3a4560, #232c42);
  color: #cfe0ff;
  box-shadow: none;
  border: 1px solid rgba(140,180,255,0.35);
}

.btnRow {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.cardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 16px;
  text-align: left;
}

.levelCard {
  background: linear-gradient(180deg, rgba(60,90,140,0.35), rgba(20,28,46,0.6));
  border: 1px solid rgba(130,180,255,0.35);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  color: #e6eeff;
  text-align: left;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.levelCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(100,180,255,0.45);
  border-color: rgba(160,210,255,0.7);
}
.levelCard:active { transform: translateY(0); }
.levelCard.completed {
  border-color: rgba(120,220,150,0.6);
  background: linear-gradient(180deg, rgba(70,140,100,0.3), rgba(20,28,46,0.6));
}
.levelCard.completed:hover { box-shadow: 0 0 14px rgba(120,220,150,0.45); }
.doneCheck {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #7cffb0;
  margin-left: 4px;
}
.levelCard .lvlNum {
  font-size: 17px;
  font-weight: 800;
  color: #8fd1ff;
}
.levelCard .lvlNotes {
  font-size: 12.5px;
  color: #c3d3f2;
  margin-top: 4px;
  line-height: 1.4;
}
.levelCard .lvlRecord {
  margin-top: 6px;
  font-size: 11px;
  color: #ffe27a;
}
.levelCard .lvlTag {
  display: inline-block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #04101f;
  background: #ffe27a;
  border-radius: 5px;
  padding: 2px 6px;
}
.levelCard .lvlTag.hearts {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: 14px;
  letter-spacing: 2px;
}

/* ===== Pantalla de modo ===== */
.modeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.modeCard {
  background: linear-gradient(180deg, rgba(60,90,140,0.35), rgba(20,28,46,0.6));
  border: 1px solid rgba(130,180,255,0.35);
  border-radius: 14px;
  padding: 26px 20px;
  cursor: pointer;
  color: #e6eeff;
  text-align: center;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.modeCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(100,180,255,0.5);
  border-color: rgba(160,210,255,0.7);
}
.modeTitle {
  font-size: 22px;
  font-weight: 800;
  color: #8fd1ff;
  margin-bottom: 10px;
  letter-spacing: 1px;
}
.modeDesc {
  font-size: 13px;
  color: #c3d3f2;
  line-height: 1.5;
}

/* ===== Selector de clave ===== */
.clefSelect {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 6px;
}
.clefBtn {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid rgba(140,180,255,0.35);
  background: rgba(30,40,60,0.6);
  color: #b7c6e8;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.clefBtn.active {
  background: linear-gradient(180deg, #7fe0ff, #2f9dff);
  color: #04101f;
  box-shadow: 0 0 14px rgba(80,180,255,0.6);
  border-color: transparent;
}

.backBtn {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(140,180,255,0.35);
  background: rgba(30,40,60,0.6);
  color: #b7c6e8;
  font-size: 13px;
  cursor: pointer;
}
.panel.wide { position: relative; }

/* variantes de color por dificultad arcade */
.arcadeCard.arcade-facil { border-color: rgba(120,220,150,0.45); }
.arcadeCard.arcade-medio { border-color: rgba(120,190,220,0.45); }
.arcadeCard.arcade-dificil { border-color: rgba(220,190,100,0.45); }
.arcadeCard.arcade-avanzado { border-color: rgba(230,140,90,0.5); }
.arcadeCard.arcade-mortal { border-color: rgba(230,90,90,0.6); }
.arcadeCard.arcade-mortal .lvlNum { color: #ff8080; }

.toast {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: 800;
  color: #ffe27a;
  text-shadow: 0 0 20px rgba(255,220,120,0.8);
  z-index: 15;
  pointer-events: none;
  animation: toastPop 1.4s ease forwards;
}
.toast.hidden { display: none; }
@keyframes toastPop {
  0% { opacity: 0; transform: translate(-50%,-40%) scale(0.7); }
  15% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-55%) scale(1); }
}