/* ===========================================================================
   CFA Duck Race — estética arcade (Fall Guys / Mario Party vibe)
   Paleta: fucsia KRÜ + agua turquesa + amarillo sol + naranja pico + tinta.
   =========================================================================== */

:root {
  --brand: #FF0080;      /* fucsia KRÜ (del logo) */
  --brand-2: #FF5FB0;
  --brand-deep: #A5106A; /* sombra del fucsia */
  --aqua: #6DCDE8;       /* cian de las salpicaduras */
  --aqua-deep: #0A6E82;
  --sun: #FFD23F;
  --orange: #FF7100;     /* naranja del pico */
  --silver: #C9C9C9;     /* plateado del texto DUCK RACE */
  --ink: #141416;        /* negro del logo */
  --ink-2: #1f1730;
  --cream: #FFF7FB;
  --shadow: 0 10px 0 rgba(0,0,0,.22), 0 22px 40px rgba(0,0,0,.35);
  --radius: 22px;
  --font-display: "Fredoka", "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-body);
  color: var(--cream);
  background:
    radial-gradient(1100px 700px at 82% -12%, rgba(255,0,128,.22) 0%, transparent 55%),
    radial-gradient(950px 650px at -8% 112%, rgba(109,205,232,.14) 0%, transparent 55%),
    linear-gradient(160deg, #17151a 0%, #100c12 60%, #0a080c 100%);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* --- Botón principal tipo "chicle" ---------------------------------------- */
.btn {
  border: 0;
  border-radius: 18px;
  padding: 16px 26px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 8px 0 var(--brand-deep), 0 14px 24px rgba(255,0,128,.35);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
  letter-spacing: .3px;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--brand-deep), 0 6px 14px rgba(255,0,128,.35); }
.btn:disabled { filter: grayscale(.6) brightness(.8); cursor: not-allowed; box-shadow: 0 6px 0 #444; }

.btn.aqua { background: linear-gradient(180deg, #4fe0ef, var(--aqua)); box-shadow: 0 8px 0 #0a6e82, 0 14px 24px rgba(22,198,217,.3); }
.btn.aqua:active { box-shadow: 0 2px 0 #0a6e82; }
.btn.ghost { background: rgba(255,255,255,.08); box-shadow: 0 6px 0 rgba(0,0,0,.3); }
.btn.ghost:active { box-shadow: 0 2px 0 rgba(0,0,0,.3); }
.btn.big { padding: 20px 40px; font-size: 1.35rem; border-radius: 22px; }

/* --- Tarjeta -------------------------------------------------------------- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.1); font-weight: 600; font-size: .9rem;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; line-height: 1.02; }

.muted { opacity: .7; }
.center { text-align: center; }
.wobble { animation: wobble 3s ease-in-out infinite; }
@keyframes wobble { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }

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

/* --- Branding logo -------------------------------------------------------- */
.logo-head { height: clamp(52px, 8vh, 84px); width: auto; filter: drop-shadow(0 6px 16px rgba(255,0,128,.45)); }
.logo-wm { position: absolute; bottom: 16px; right: 18px; width: 130px; opacity: .22; z-index: 4; pointer-events: none; }
.logo-res { width: min(230px, 46vw); margin: 0 auto 6px; display: block; filter: drop-shadow(0 8px 22px rgba(255,0,128,.45)); }
.subres { opacity: .7; margin: -1vh 0 2vh; font-size: 1.1rem; }

/* --- Tablero en vivo: panel compacto que arranca a la DERECHA y a mitad de
   carrera se desliza a la IZQUIERDA (así nunca tapa la meta) ---------------- */
.live-hud {
  position: absolute; top: 16px; left: 0; z-index: 6; width: min(30vw, 430px);
  background: rgba(10, 8, 14, .62); backdrop-filter: blur(5px);
  border: 2px solid rgba(255,255,255,.12); border-radius: 18px; padding: 10px 16px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); pointer-events: none;
  transform: translateX(calc(100vw - 100% - 16px));   /* anclado a la derecha */
  transition: transform 1.4s cubic-bezier(.6,0,.2,1);
}
.live-hud.to-left { transform: translateX(16px); }     /* se va a la izquierda */
.lh-title {
  display: block; font-family: var(--font-display); color: var(--sun); letter-spacing: 1px;
  font-size: clamp(1rem, 2vw, 1.7rem); margin-bottom: 6px;
}
.lh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lh-row {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: clamp(1rem, 1.9vw, 1.55rem); line-height: 1.3;
}
.lh-row .rk { flex: none; min-width: 1.5em; text-align: right; font-family: var(--font-display); color: var(--aqua); }
.lh-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-row:first-child .rk, .lh-row:first-child .nm { color: var(--sun); }

/* Avisos de muerte: abajo a la izquierda, nombre + calavera, se van a los 5 s */
.lh-deaths {
  position: absolute; left: 16px; bottom: 16px; z-index: 6;
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
.lh-death {
  display: flex; align-items: center; gap: 12px;
  background: rgba(180, 30, 40, .4); border: 2px solid rgba(255,90,90,.4);
  border-radius: 14px; padding: 8px 16px; font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.5rem); backdrop-filter: blur(3px);
  opacity: 0; transform: translateX(-24px); transition: opacity .35s ease, transform .35s ease;
}
.lh-death.show { opacity: 1; transform: none; }
.lh-death .nm { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lh-death .sk { flex: none; font-size: 1.3em; }

/* --- Ambiente de "pileta" en el lobby (patos + burbujas) ------------------ */
.pond-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.lobby-head, .lobby-body, .lobby-foot { position: relative; z-index: 1; }
.float-duck {
  position: absolute; width: clamp(64px, 9vw, 140px); opacity: .5;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.4));
  animation: swim linear infinite;
}
.float-duck.d1 { top: 14%; animation-duration: 27s; }
.float-duck.d2 { top: 50%; animation-duration: 35s; animation-delay: -9s; width: clamp(80px,11vw,170px); opacity:.42; }
.float-duck.d3 { top: 72%; animation-duration: 31s; animation-delay: -17s; opacity:.55; }
.float-duck.d4 { top: 36%; animation-duration: 42s; animation-delay: -24s; width: clamp(54px,7vw,110px); opacity:.36; }
@keyframes swim {
  0%   { transform: translate(-18vw, 0) rotate(-3deg) scaleX(-1); }
  50%  { transform: translate(52vw, -16px) rotate(3deg) scaleX(-1); }
  100% { transform: translate(120vw, 0) rotate(-3deg) scaleX(-1); }
}
.bub {
  position: absolute; bottom: -4vh; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), rgba(109,205,232,.2));
  animation: rise linear infinite; opacity: .5;
}
.bub.b1 { left: 12%; animation-duration: 9s; }
.bub.b2 { left: 26%; width: 10px; height: 10px; animation-duration: 12s; animation-delay: -3s; }
.bub.b3 { left: 44%; width: 22px; height: 22px; animation-duration: 8s; animation-delay: -5s; }
.bub.b4 { left: 63%; width: 12px; height: 12px; animation-duration: 11s; animation-delay: -2s; }
.bub.b5 { left: 78%; width: 18px; height: 18px; animation-duration: 10s; animation-delay: -6s; }
.bub.b6 { left: 90%; width: 9px; height: 9px; animation-duration: 13s; animation-delay: -8s; }
@keyframes rise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  15%  { opacity: .6; }
  100% { transform: translateY(-98vh) scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .float-duck, .bub { animation: none; }
}