/* notes.css — Notes Runner */

:root{
  --bg: #0b0f14;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --border: rgba(255,255,255,.12);

  --viewport-h: 56vh;
  --kbd-h: 20vh;
  --kbd-max: 160px;

  --key-visual: 48px;   /* teclado visible */
  --key-hit: 60px;      /* hit area */
  --key-gap: 8px;

  /* ✅ Runner más grandecito */
  --runner-size: 64px;  /* antes ~56 */
  --runner-gap: 18px;

  --radius: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 50% 0%, #121a24 0%, var(--bg) 60%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.app{
  height:100%;
  display:flex;
  flex-direction:column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* HUD */
.hud{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 12px 8px;
}

.hud-left, .hud-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.pill{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
}

#speed{ width: 160px; }

.btn{
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.btn:active{ transform: scale(.98); }

/* Stage */
.stage{
  flex: 1 1 auto;
  display:flex;
  padding: 8px 12px 10px;
}

.viewport{
  position:relative;
  width:100%;
  height: var(--viewport-h);
  min-height: 280px;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* ✅ Coins canvas overlay (inside viewport) */
.coinCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index: 2;
  pointer-events:none;
}

/* Moving lane */
.lane{
  position:absolute;
  inset:0;
  z-index: 3;
}

/* Fades for edges */
.viewport-fade{
  position:absolute;
  top:0; bottom:0;
  width: 70px;
  pointer-events:none;
  z-index: 5;
}
.viewport-fade.left{
  left:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.viewport-fade.right{
  right:0;
  background: linear-gradient(270deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}

/* Message overlay */
.msg{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight: 900;
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: .5px;
  color: rgba(255,255,255,.95);
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
  z-index: 10;
  opacity: 0;
  transition: opacity .18s ease;
}
.msg.show{ opacity: 1; }

/* ✅ Runner note bubble:
   usamos --x para NO romper la animación */
.note-bubble{
  position:absolute;
  top: 50%;
  transform: translate(var(--x, 0px), -50%);
  width: var(--runner-size);
  height: var(--runner-size);
  border-radius: 999px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  will-change: transform, opacity;
}

.note-bubble img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Pop animation respects --x (no “jump”) */
@keyframes popOut{
  0%   { transform: translate(var(--x, 0px), -50%) scale(1);    opacity: 1; }
  65%  { transform: translate(var(--x, 0px), -50%) scale(1.12); opacity: 1; }
  100% { transform: translate(var(--x, 0px), -50%) scale(0.2);  opacity: 0; }
}
.note-bubble.pop{
  animation: popOut 260ms ease-out forwards;
}

/* Keyboard */
.keyboard{
  flex: 0 0 auto;
  display:flex;
  justify-content:space-between;
  gap: var(--key-gap);
  padding: 10px 12px 14px;
  height: min(var(--kbd-h), var(--kbd-max));
}

.key{
  flex: 1 1 0;
  height: var(--key-hit);
  min-width: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  display:grid;
  place-items:center;
  padding:0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.key img{
  width: var(--key-visual);
  height: var(--key-visual);
  border-radius: 999px;
  object-fit: cover;
  display:block;
}
.key:active{
  transform: translateY(1px) scale(.99);
  background: rgba(255,255,255,.08);
}
.key:focus{ outline: none; }

/* Small phones */
@media (max-width: 380px){
  :root{
    --key-visual: 44px;
    --key-hit: 56px;
    --key-gap: 6px;
    --runner-size: 60px;
  }
  #speed{ width: 130px; }
}

/* Landscape: a bit more runway */
@media (orientation: landscape){
  :root{
    --viewport-h: 58vh;
    --runner-size: 66px;
    --key-visual: 46px;
  }
}