/* =========================
   ABC Capybara Run - styles
   (compatible con tu index.html)
   ========================= */

:root{
  --bg1:#1b2a4a;
  --bg2:#0b1220;
  --panel: rgba(0,0,0,.40);
  --text:#ffffff;
  --border: rgba(255,255,255,.14);
  --shadow: 0 12px 40px rgba(0,0,0,.18);
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  height:100%;
  overflow:hidden; /* evita scroll de página en iPhone */
}

body{
  background: #ffffff; /* fondo del navegador en blanco */
  color: #111;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

/* Evita scroll/zoom raro en móviles mientras juegan */
#game-container{
  touch-action: none;
}

/* Wrapper general */
#game-wrapper{
  width: 100%;
  height: 100svh; /* iOS: viewport real */
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 10px 10px calc(18px + env(safe-area-inset-bottom));
  gap: 8px;
}

/* Leaderboard (arriba) */
#top-leaderboard{
  width: min(980px, 100%);
  background: #ffffff; /* fondo blanco */
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 10px 12px;
  color: #111;
}

.lb-title{
  font-weight: 900;
  display:block;
  margin-bottom: 6px;
  color: #111;
}

#lb-entries{
  font-size: 13px;
  line-height: 1.35;
}

/* Score / panel */
#score-display{
  width: min(980px, 100%);
  background: #ffffff; /* fondo blanco */
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
  color: #111;
}

/* Panel donde van las palabras ganadas */
#word-panel{
  width: min(980px, 100%) !important; /* tu HTML traía width:800px inline */
  box-shadow: var(--shadow);
  min-height: 44px; /* más grande */
  padding: 10px 12px !important;
}

/* Mundo del juego */
#game-container{
  width: min(980px, 100%);
  height: 420px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: var(--shadow);
  background: linear-gradient(#66c7ff, #bfe9ff);
}

/* Mobile: que TODO quepa en pantalla (iOS friendly) */
@media (max-width: 520px){
  /* Compacta paneles superiores */
  #top-leaderboard, #score-display{
    padding: 8px 10px;
  }

  #game-container{
    height: 52svh; /* más alto para que se vea completo */
    min-height: 320px;
    max-height: 420px;
  }

  /* Overlay: ajustar a la altura del juego; permite scroll interno si hiciera falta */
  #overlay{
    padding: 10px 10px;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Oculta scrollbar en iOS */
  #overlay::-webkit-scrollbar{ width:0; height:0; }

  /* Reduce espacios internos del overlay */
  #overlay h1{
    font-size: 20px !important;
    margin-bottom: 4px !important;
  }
  #overlay p{
    margin-bottom: 6px !important;
  }

  /* Tarjetas de personaje más compactas */
  #char-scooter, #char-car, #char-mono, #char-skate{
    padding: 6px 8px !important;
    border-radius: 12px !important;
  }

  /* Reduce un poco el alto del selector para que quepa */
  #overlay > div{
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  /* Previews más chicas */
  #prev-scooter,
  #prev-car,
  #prev-mono,
  #prev-skate{
    height: 64px !important;
  }

  /* Botón jugar más compacto */
  #btn-play{
    padding: 8px 18px !important;
    font-size: 15px !important;
  }
}

/* Suelo */
#ground{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:90px;
  background: linear-gradient(#2ecc71, #1e9f56);
  will-change: transform;
}

/* Corazones */
#lives{
  position:absolute;
  top: 10px;
  right: 12px;
  z-index: 30;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 6px 10px;
}

.heart{
  margin-left: 2px;
}

/* Jugador */
#capybara{
  position:absolute;
  left:0; /* usaremos transform para posicionar */
  bottom:0;
  height:120px;
  transform-origin: bottom left;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
  will-change: transform;
}

/* Overlay de inicio */
#overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap: 6px;
  background: rgba(255,255,255,0.85);
  z-index: 50;
  text-align:center;
}

/* Preview imágenes del overlay */
#prev-scooter, #prev-car{
  image-rendering:auto;
}

/* Barra velocidad abajo */
#speed-bar{ display:none; }

/* Mobile: ajusta tamaños */
@media (max-width: 520px){
  #capybara{
    height: 105px;
  }
}