* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; background: #2b2150; overflow: hidden; }
/* Respeta las barras del sistema de Android (edge-to-edge forzado en API 35+): el contenido
   queda dentro del área segura, sin que la status bar tape el HUD/título. */
body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
/* Llena en celular (portrait). En pantallas anchas (desktop) limita a una columna portrait
   centrada en vez de estirar un juego vertical a lo ancho. */
#app { position: relative; width: 100%; height: 100%; max-width: calc(100vh * 0.6); margin: 0 auto; }
#game { display: block; width: 100%; height: 100%; background: #2b2a5e; touch-action: none; image-rendering: pixelated; }
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: safe center; gap: 16px;
  background: rgba(17,17,17,.82); color: #fff; font-family: system-ui, sans-serif;
  /* Pantallas largas (Tienda/Mi viaje/Trofeos/Misiones) scrollean cuando el contenido
     supera el alto del viewport; `safe center` centra si cabe, alinea arriba si desborda
     (sin `safe`, el contenido desbordado queda inalcanzable arriba y abajo). */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-top: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.screen.hidden { display: none; }
.hidden { display: none !important; } /* también botones/toast/cofre fuera de .screen */
.screen h1 { font-size: 48px; letter-spacing: 4px; }
button {
  font-size: 18px; padding: 12px 24px; border: 0; border-radius: 8px;
  background: #ffd23f; color: #111; cursor: pointer; min-width: 200px;
}
#level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 300px; }
#level-grid button { min-width: 0; padding: 10px 0; }

/* --- Splash de estudio --- */
.splash { background: #14122e; gap: 6px; }
.studio-pre { font-size: 30px; font-weight: 800; letter-spacing: 3px; color: #ffd23f; text-shadow: 2px 2px 0 #c0392b; }
.studio-presents { font-size: 16px; color: #b9aee0; letter-spacing: 2px; }

/* --- Portada estilo NES (tapa elaborada) --- */
.title { background: rgba(20,18,46,.55); gap: 12px; }
.logo {
  font-size: 64px; letter-spacing: 6px; color: #ffd23f;
  text-shadow: 3px 3px 0 #c0392b, 6px 6px 0 rgba(0,0,0,.35);
  -webkit-text-stroke: 2px #3a2b4a;
}
.tagline { font-size: 15px; color: #ffe9a8; letter-spacing: 1px; margin-bottom: 6px; }
.menu-row { display: flex; gap: 10px; }
.menu-row button { min-width: 0; font-size: 14px; padding: 10px 14px; background: #b08be0; color: #1a1233; }
.studio-credit { position: absolute; bottom: 14px; font-size: 12px; color: #9b8ec9; }

/* --- Settings --- */
#btn-sound, #btn-haptics { background: #6bd3a0; color: #10241b; }

/* --- Cofre de fin de corrida (reveal dramatizado) --- */
#chest { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 96px; }
#chest-icon { font-size: 40px; }
#chest-icon.wiggle { animation: chest-wiggle 0.5s ease-in-out; }
#chest-math { font-size: 20px; color: #ffe9a8; font-variant-numeric: tabular-nums; min-height: 24px; }
#chest-mult { color: #ffd23f; font-weight: 800; margin-left: 6px; display: inline-block; }
#chest-mult.slam { animation: chest-slam 0.35s cubic-bezier(.2,2.2,.4,1); }
#chest-total { font-size: 26px; font-weight: 800; color: #ffd23f; min-height: 30px; }
#chest-total.slam { animation: chest-slam 0.35s cubic-bezier(.2,2.2,.4,1); }
#chest.jackpot #chest-icon { animation: chest-glow 0.6s ease-in-out 3; }
@keyframes chest-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.1); } 75% { transform: rotate(14deg) scale(1.1); } }
@keyframes chest-slam { 0% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes chest-glow { 0%,100% { text-shadow: 0 0 0 rgba(255,210,63,0); transform: scale(1); } 50% { text-shadow: 0 0 18px rgba(255,210,63,.95); transform: scale(1.25); } }

/* --- Leaderboard --- */
#score-list { list-style: decimal inside; color: #fff; font-size: 18px; line-height: 1.6; min-height: 120px; }
#score-list li { font-variant-numeric: tabular-nums; }
#score-list li::marker { color: #ffd23f; font-weight: 700; }
/* Viral rank loop: fila propia resaltada con un acento sutil (no grita, solo orienta). */
#score-list li.me { background: rgba(255,210,63,.16); border-radius: 6px; font-weight: 700; }
/* Badge Mundial/Local sobre la pantalla de leaderboard. */
.board-badge { display: inline-block; margin: 4px auto 8px; padding: 3px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 700; background: rgba(255,255,255,.14); color: #cdb3ff; }
.board-badge.world { background: rgba(255,210,63,.2); color: #ffd23f; }

/* Tienda rediseñada: pestañas + grilla + botones con verbo/estado. */
/* min-width:0 anula el `button{min-width:200px}` base, que si no obliga a cada pestaña/tarjeta
   a ≥200px → 2-3 por fila desbordan a lo ancho en teléfonos angostos. */
#shop-tabs .shop-tab { flex:1; min-width:0; padding:9px 0; border-radius:9px; font-size:14px; font-weight:700; background:#2c2350; color:#c9bdf0; border:none; }
#shop-tabs .shop-tab.on { background:#ffd23f; color:#1a1233; }
#shop-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:20rem; }
.skin-card { background:#241d3f; border-radius:13px; padding:11px 10px 12px; display:flex; flex-direction:column; align-items:center; gap:7px; }
.skin-card.locked { opacity:.78; }
.skin-name { font-size:15px; font-weight:700; color:#f3eefc; }
.skin-btn { width:100%; min-width:0; padding:9px 0; border:none; border-radius:9px; font-size:13px; font-weight:800; cursor:pointer; }
.skin-btn.buy { background:#ffd23f; color:#1a1233; }
.skin-btn.equip { background:#b08be0; color:#1a1233; }
.skin-btn.inuse { background:#3a3160; color:#9d93c4; }
.skin-btn.cant { background:#2c2350; color:#8f84b5; font-weight:600; font-size:12px; }
.skin-btn.lock { background:#2c2350; color:#8f84b5; font-weight:600; font-size:11.5px; }
.skin-btn.reclamar { background:#19c37d; color:#06231a; }
.shop-note { grid-column:1/3; text-align:center; font-size:12px; color:#b7add6; background:#221b3d; border-radius:9px; padding:8px; }
#shop-explain.explain { text-align:center; font-size:12.5px; color:#b7add6; max-width:300px; margin:4px auto 0; }