/* ==========================================================================
   FLAPPY QUETZAL — style.css
   Solo maqueta la UI en DOM (overlays, modales, HUD).
   TODO el mundo del juego se dibuja en <canvas>; aquí no hay nada del juego.
   ========================================================================== */

:root{
  --jade:        #12a86b;
  --jade-deep:   #0b6b45;
  --jade-night:  #062b1f;
  --ruby:        #d7263d;
  --gold:        #f4b400;
  --cream:       #f6f3e8;
  --ink:         #0d1f18;
  --panel-bg:    rgba(9, 30, 23, 0.82);
  --panel-brd:   rgba(244, 180, 0, 0.35);
  --shadow:      0 18px 50px rgba(0,0,0,.45);
  --radius:      18px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  width:100%; height:100%;
  overflow:hidden;
  background:#04150f;
  color:var(--cream);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  touch-action:manipulation;
  user-select:none;
}

/* ------------------------------------------------------------------ STAGE */
#stage{
  position:fixed; inset:0;
  width:100%; height:100%;
  overflow:hidden;
}

#game{
  display:block;
  position:absolute; inset:0;
  width:100%; height:100%;
  touch-action:none;
}

.hidden{ display:none !important; }

/* -------------------------------------------------------------------- HUD */
#hud{
  position:absolute;
  top:calc(10px + var(--safe-top)); right:10px;
  display:flex; gap:8px;
  z-index:20;
}

.icon-btn{
  width:46px; height:46px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  background:rgba(6,25,18,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--cream);
  cursor:pointer;
  transition:transform .12s ease, background .18s ease;
}
.icon-btn:active{ transform:scale(.92); }
.icon-btn:hover{ background:rgba(18,168,107,.35); }

/* ---------------------------------------------------------------- SCREENS */
.screen{
  position:absolute; inset:0;
  z-index:30;
  display:flex; align-items:center; justify-content:center;
  padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));
  background:radial-gradient(120% 100% at 50% 0%, rgba(3,18,12,.35) 0%, rgba(3,18,12,.72) 100%);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  animation:fadeIn .28s ease both;
}

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{ from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none} }

.panel{
  width:min(420px, 100%);
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:var(--panel-bg);
  border:1px solid var(--panel-brd);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  padding:22px 20px;
  animation:popIn .3s cubic-bezier(.2,.9,.3,1.2) both;
}
.panel-compact{ width:min(400px, 100%); }
.panel-mini{ width:min(340px, 100%); text-align:center; }

/* --------------------------------------------------------------- LOGOTIPO */
.panel-head{ margin-bottom:18px; }

/* Logo personalizado (PNG transparente). Se adapta al ancho del panel y
   nunca desborda: si el PNG es muy alto, `max-height` lo contiene y
   `object-fit: contain` conserva la proporción. */
.title-logo{
  display:block;
  width:100%;
  max-width:360px;
  max-height:clamp(88px, 22vh, 180px);
  height:auto;
  margin:0 auto 2px;
  object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));
  -webkit-user-drag:none;
}
@media (max-height: 560px){
  .title-logo{ max-height:76px; }
}
.logo{ display:flex; align-items:center; gap:12px; }
.logo-bird{ flex:0 0 auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.logo-text h1{
  margin:0;
  font-family:'Baloo 2', system-ui, sans-serif;
  font-weight:800;
  font-size:clamp(26px, 7vw, 34px);
  line-height:1;
  letter-spacing:.5px;
  color:var(--gold);
  text-shadow:0 3px 0 rgba(0,0,0,.35);
}
.logo-text p{
  margin:4px 0 0;
  font-size:12px;
  color:rgba(246,243,232,.65);
  letter-spacing:.2px;
}

/* ------------------------------------------------------------------- FORM */
form label{
  display:block;
  font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em;
  color:rgba(246,243,232,.62);
  margin-bottom:7px;
}
.field{ display:flex; gap:8px; }

input[type="text"]{
  flex:1 1 auto; min-width:0;
  height:48px;
  padding:0 14px;
  font-size:16px;              /* 16px evita el zoom automático en iOS */
  font-family:inherit;
  color:var(--cream);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  outline:none;
  transition:border-color .18s ease, background .18s ease;
}
input[type="text"]::placeholder{ color:rgba(246,243,232,.32); }
input[type="text"]:focus{
  border-color:var(--jade);
  background:rgba(18,168,107,.12);
}

.btn-primary, .btn-ghost{
  height:48px;
  padding:0 20px;
  font-family:'Baloo 2', system-ui, sans-serif;
  font-size:17px; font-weight:700;
  letter-spacing:.3px;
  border-radius:12px;
  cursor:pointer;
  border:none;
  transition:transform .12s ease, filter .18s ease;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg, var(--jade) 0%, var(--jade-deep) 100%);
  color:#fff;
  box-shadow:0 6px 0 rgba(4,60,38,.9), 0 10px 22px rgba(0,0,0,.35);
}
.btn-ghost{
  background:rgba(255,255,255,.08);
  color:var(--cream);
  border:1px solid rgba(255,255,255,.18);
}
.btn-primary:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(4,60,38,.9); }
.btn-ghost:active{ transform:translateY(2px); }
.btn-primary:hover, .btn-ghost:hover{ filter:brightness(1.08); }

.btn-row{ display:flex; gap:10px; margin-top:14px; }
.btn-row .btn-primary{ flex:1 1 auto; }

.error{
  margin:8px 0 0;
  font-size:13px;
  color:#ff9aa5;
}

/* ------------------------------------------------------------ LEADERBOARD */
.board{ margin-top:22px; }
.board-tight{ margin-top:18px; }

.board-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
  border-bottom:1px solid rgba(244,180,0,.22);
  padding-bottom:6px;
}
.board-head h2{
  margin:0;
  font-family:'Baloo 2', sans-serif;
  font-size:15px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold);
}
.link-btn{
  background:none; border:none; cursor:pointer;
  color:rgba(246,243,232,.6);
  font-size:18px; line-height:1;
  padding:2px 6px; border-radius:8px;
}
.link-btn:hover{ color:var(--gold); }

/* ------------------------------------------------- PESTAÑAS DE TORNEO */
.lb-tabs{
  display:flex;
  gap:4px;
  margin-bottom:8px;
  padding:3px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
}
.lb-tab{
  flex:1 1 0;
  min-width:0;
  padding:7px 4px;
  font-family:inherit;
  font-size:12.5px; font-weight:600;
  letter-spacing:.02em;
  color:rgba(246,243,232,.58);
  background:none;
  border:none;
  border-radius:8px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
.lb-tab:hover{ color:var(--cream); }
.lb-tab.is-active{
  background:linear-gradient(180deg, rgba(18,168,107,.85) 0%, rgba(11,107,69,.85) 100%);
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}

.leaderboard{
  list-style:none;
  margin:0; padding:0;
  max-height:min(38vh, 280px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.leaderboard li{
  display:flex; align-items:center; gap:10px;
  padding:7px 8px;
  border-radius:9px;
  font-size:14px;
}
.leaderboard li.row-odd{ background:rgba(255,255,255,.04); }
.leaderboard .rank{
  flex:0 0 26px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:rgba(246,243,232,.5);
  text-align:right;
}

/* --------------------------------------------------------- PODIO 1-2-3
   Las clases las pone game.js (renderBoard) por posición real en el
   ranking, no con :nth-child, para que sigan siendo correctas aunque el
   navegador reordene o se filtren filas. Del 4 al 10: estilo normal. */
.leaderboard li.podium{
  border:1px solid transparent;
  font-weight:600;
}
.leaderboard li.podium .medal{
  flex:0 0 auto;
  font-size:13px;
  line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

.leaderboard li.gold{
  background:linear-gradient(90deg, rgba(244,180,0,.26) 0%, rgba(244,180,0,.05) 100%);
  border-color:rgba(244,180,0,.55);
}
.leaderboard li.gold .rank,
.leaderboard li.gold .pts{ color:#ffd24a; }
.leaderboard li.gold .name{ color:#fff6da; }

.leaderboard li.silver{
  background:linear-gradient(90deg, rgba(203,213,222,.22) 0%, rgba(203,213,222,.04) 100%);
  border-color:rgba(203,213,222,.45);
}
.leaderboard li.silver .rank,
.leaderboard li.silver .pts{ color:#dde5ec; }
.leaderboard li.silver .name{ color:#f2f6fa; }

.leaderboard li.bronze{
  background:linear-gradient(90deg, rgba(205,127,50,.24) 0%, rgba(205,127,50,.04) 100%);
  border-color:rgba(205,127,50,.5);
}
.leaderboard li.bronze .rank,
.leaderboard li.bronze .pts{ color:#e29a5c; }
.leaderboard li.bronze .name{ color:#fbeadc; }
.leaderboard .name{
  flex:1 1 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.leaderboard .pts{
  flex:0 0 auto;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--jade);
}
.leaderboard li.me{
  background:rgba(244,180,0,.14);
  outline:1px solid rgba(244,180,0,.3);
}
.lb-empty{
  justify-content:center;
  color:rgba(246,243,232,.45);
  font-size:13px;
}
.lb-status{
  margin:8px 0 0;
  font-size:11.5px;
  color:rgba(246,243,232,.42);
  text-align:center;
  min-height:14px;
}

/* --------------------------------------------------------------- GAMEOVER */
.gameover-title{
  margin:0 0 16px;
  font-family:'Baloo 2', sans-serif;
  font-size:clamp(22px, 6vw, 28px);
  color:var(--gold);
  text-align:center;
  text-wrap:balance;
  text-shadow:0 2px 0 rgba(0,0,0,.35);
}

/* Entrada de la frase chapina aleatoria */
@keyframes phrasePop{
  0%   { opacity:0; transform:scale(.86) rotate(-1.5deg); }
  60%  { opacity:1; transform:scale(1.06) rotate(.8deg); }
  100% { opacity:1; transform:none; }
}
.gameover-title.phrase-pop{
  animation:phrasePop .42s cubic-bezier(.2,.9,.3,1.3) both;
}
@media (prefers-reduced-motion: reduce){
  .gameover-title.phrase-pop{ animation:none; }
}
.score-row{ display:flex; gap:10px; }
.score-box{
  flex:1 1 0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:12px 10px;
  text-align:center;
}
.score-label{
  display:block;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(246,243,232,.55);
  margin-bottom:2px;
}
.score-box strong{
  font-family:'Baloo 2', sans-serif;
  font-size:32px; line-height:1.05;
  color:var(--cream);
  font-variant-numeric:tabular-nums;
}
.submit-status{
  margin:12px 0 0;
  min-height:17px;
  font-size:12.5px;
  text-align:center;
  color:rgba(246,243,232,.6);
}
.submit-status.ok{ color:#7fe0ae; }
.submit-status.warn{ color:#ffc46b; }
.submit-status.bad{ color:#ff9aa5; }

.panel-mini h2{
  margin:0 0 6px;
  font-family:'Baloo 2', sans-serif;
  font-size:26px; color:var(--gold);
}
.muted{ margin:0; font-size:13px; color:rgba(246,243,232,.6); }

.panel-foot{
  margin-top:16px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:12px;
  color:rgba(246,243,232,.5);
  text-align:center;
}
kbd{
  font-family:inherit; font-size:11px;
  padding:1px 6px; border-radius:5px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
}

/* -------------------------------------------------- AJUSTES POR VIEWPORT */

/* Móvil bajo / horizontal: el panel se compacta para no desbordar */
@media (max-height: 560px){
  .panel{ padding:16px 16px; }
  .panel-head{ margin-bottom:12px; }
  .logo-bird svg{ width:42px; height:42px; }
  .board{ margin-top:14px; }
  .leaderboard{ max-height:26vh; }
  .panel-foot{ display:none; }
  .score-box strong{ font-size:26px; }
}

/* Escritorio ancho: panel un poco mayor */
@media (min-width: 900px) and (min-height: 700px){
  .panel{ width:min(460px, 100%); padding:26px 24px; }
}

@media (prefers-reduced-motion: reduce){
  .screen, .panel{ animation:none; }
}