/* ===== General / Fondo ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:url("../img/fondo.png") center/cover no-repeat fixed;
}

/* ===== Centro exacto ===== */
.center{
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
}

/* ===== Portada (dos botones / títulos grandes) ===== */
.hero-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.hero-btn{
  cursor:pointer;
  background:none;
  border:none;
  color:#fff;
  font-weight:300;
  line-height:1.1;
  letter-spacing:.5px;
  text-shadow:0 1px 18px rgba(0,0,0,.35);
  transition:transform .06s ease, opacity .15s ease;
  font-size:clamp(28px,4vw,48px);   /* tamaño igual para ambos */
  padding:.15em .4em;
  text-decoration:none;             /* ⬅ sin subrayado */
  display:inline-block;             /* necesario para el scale */
}
.hero-btn.sub{ font-size:clamp(28px,4vw,48px); }
.hero-btn:hover{ transform:scale(1.06); opacity:.98; } /* ⬅ zoom al hover */
.hero-btn:focus-visible{ outline:2px solid rgba(255,255,255,.6); outline-offset:3px; }

/* ===== Títulos ULTIMATUM / GAME ===== */
.ultimatum-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:0.92; letter-spacing:2px; text-transform:uppercase;
  text-shadow:0 2px 26px rgba(0,0,0,.35);
  padding:.2em .5em;
}
.ultimatum-btn .ult{
  font-weight:800;
  font-size:clamp(28px,6vw,84px);
}
.ultimatum-btn .game{
  font-weight:900;
  font-size:clamp(42px,12vw,140px);
}

/* ===== Topbar perfil ===== */
.topbar{
  position:fixed; top:16px; left:16px; right:16px; height:54px;
  display:flex; align-items:center; justify-content:flex-start;
  z-index:100;
}
.profile-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 10px; border-radius:999px;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
}
.avatar{
  width:36px; height:36px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #d1d5db 30%, #9ca3af 31%, #6b7280 70%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.2);
}
.user-name{
  color:#fff; font-weight:500; letter-spacing:.2px;
}

/* ===== Flechas laterales (carrusel simple) ===== */
.center{ position:relative; }
.arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#c9c9c9;
  font-size:clamp(28px,5vw,60px); line-height:1;
  cursor:pointer; padding:.1em .2em;
  opacity:.65; transition:opacity .15s ease, transform .06s ease;
  text-shadow:0 2px 14px rgba(0,0,0,.4);
}
.arrow:hover{ opacity:1; transform:translateY(-50%) scale(1.06); }
.arrow.left{ left:min(3vw,32px); }
.arrow.right{ right:min(3vw,32px); }

/* ===== Tarjeta / Inputs / Botones ===== */
.card{
  width:min(520px, 92vw);
  background:rgba(17,24,39,.65);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:24px;
  text-align:left;
}
.title{ margin:0 0 14px; font-weight:600; }

.stack > * + *{ margin-top:12px; }

input[type="email"], input[type="password"], input[type="text"]{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid transparent;
  background:rgba(255,255,255,.06);
  color:#fff;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder{ color:#cbd5e1; }
input:focus{
  border-color:rgba(79,70,229,.55);
  box-shadow:0 0 0 4px rgba(79,70,229,.15);
  background:rgba(255,255,255,.09);
}

.btn{
  width:100%;
  border:0; border-radius:12px;
  padding:12px 14px;
  font-weight:600; cursor:pointer;
  transition:transform .04s ease, filter .15s ease, box-shadow .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:#4f46e5; color:#fff; box-shadow:0 10px 18px rgba(79,70,229,.25); }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-secondary{ background:#e5e7eb; color:#111827; }

/* ===== Modal ===== */
.modal{
  position:fixed; inset:0;
  display:none; place-items:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  z-index:1000;
}
.modal.open{ display:grid; animation:fadeIn .12s ease-out; }
.modal .card{ width:min(540px, 92vw); }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* ===== Lista de participantes ===== */
.list-clean{ list-style:none; margin:0; padding:0; }
.participant{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.participant + .participant { margin-top:8px; }
.participant .dot{
  width:10px; height:10px; border-radius:50%;
  background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.6);
}
.participant .kind{ margin-left:auto; opacity:.85; font-size:.9em; }

/* ===== Panel sala (más ancho) ===== */
.room-card{ width:min(920px, 92vw); }

/* ===== Mensajes flash básicos ===== */
.flash-container{ position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:9999; max-width:90vw; }
.flash{ margin:.25rem auto; padding:.5rem .75rem; border-radius:8px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.15); color:#fff; }

/* ——— Logout grande y arriba-derecha ——— */
.logout-btn{
  position:fixed; top:16px; right:16px;
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  color:#fff; font-weight:700; letter-spacing:.3px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:transform .08s ease, filter .15s ease;
}
.logout-btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }

/* ——— Animación suave para los enlaces gigantes ——— */
.anim-link{ display:inline-block; transform-origin:center; }
@keyframes pulseLoop{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.02);} }
.pulse-loop{ animation:pulseLoop 2.4s ease-in-out infinite; }
.anim-link:hover{ transform:scale(1.03); }