/* ============================================================
   HYDRO — SKIN v2 (rediseño 2026-07)
   1) Landing/login nuevo (wg2-*)  2) Piel glass del juego
   Cargar DESPUÉS de wg-ui.css.
   ============================================================ */

/* ================= 1) LOGIN / LANDING ================= */

.wg2-hero{
  position:fixed; inset:0; z-index:50; overflow:hidden;
  background:#0A1628; color:var(--text);
  font-family:'Space Grotesk', system-ui, sans-serif;
}
.wg2-water{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 75% -10%, rgba(0,229,255,.16), transparent 55%),
    radial-gradient(90% 70% at 15% 110%, rgba(29,233,182,.12), transparent 60%),
    linear-gradient(180deg, #07101f 0%, #0A1628 45%, #0B2036 100%);
}
.wg2-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.wg2-rays{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background:
    linear-gradient(115deg, transparent 42%, rgba(0,229,255,.05) 46%, transparent 52%),
    linear-gradient(105deg, transparent 60%, rgba(0,229,255,.07) 65%, transparent 72%),
    linear-gradient(120deg, transparent 74%, rgba(29,233,182,.05) 78%, transparent 85%);
  animation:wg2-rays 14s ease-in-out infinite alternate;
}
@keyframes wg2-rays{ from{ transform:translateX(-3%);} to{ transform:translateX(3%);} }

/* chica (video) anclada abajo */
.wg2-girl-box{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:100%; aspect-ratio:900/1280; max-height:96%; z-index:3; pointer-events:none;
}
@media(min-width:900px){
  .wg2-girl-box{ left:auto; right:1.5vw; transform:none; width:auto; height:96%; }
}
.wg2-girl-box::before{
  content:''; position:absolute; inset:-14%;
  background:radial-gradient(closest-side, #0A1628 52%, rgba(10,22,40,0) 100%);
}
.wg2-girl{
  position:relative; width:100%; height:100%; object-fit:contain; display:block;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 8%, #000 100%),
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(180deg, transparent 0, #000 8%, #000 100%),
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-composite:intersect;
}
.wg2-veil{ position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,16,31,0) 46%, rgba(7,16,31,.72) 92%);
}
@media(min-width:900px){
  .wg2-veil{ background:
    linear-gradient(90deg, rgba(7,16,31,.45), transparent 48%),
    linear-gradient(180deg, transparent 62%, rgba(7,16,31,.45));
  }
}

/* capa de contenido */
.wg2-overlay{
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column; padding:16px;
}
@media(min-width:640px){ .wg2-overlay{ padding:32px 40px; } }
@media(min-width:1024px){ .wg2-overlay{ padding:32px 48px; } }

/* nav: LIVE izq · marca centro · idioma+wallet der */
.wg2-nav{ display:flex; align-items:center; justify-content:space-between; position:relative; z-index:30; }
.wg2-live{
  display:flex; align-items:center; gap:6px;
  font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
@media(min-width:640px){ .wg2-live{ font-size:12px; gap:8px; letter-spacing:.14em; } }
.wg2-live i{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:wg2-pulse 1.6s infinite; flex:none; }
@keyframes wg2-pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.wg2-brand{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:2px; pointer-events:none;
}
@media(min-width:640px){ .wg2-brand{ top:2px; transform:translateX(-50%); gap:2px; } }
.wg2-mark{ position:relative; width:28px; height:28px; flex:none; filter:drop-shadow(0 0 8px rgba(0,229,255,.55)); }
.wg2-mark .wg-drop-mark{ width:100%; height:100%; }
@media(min-width:640px){ .wg2-mark{ width:46px; height:46px; } }
.wg2-word{ font-weight:600; font-size:21px; letter-spacing:.04em; color:#fff; }
.wg2-word span{ color:var(--aqua); }
@media(min-width:640px){ .wg2-word{ font-size:32px; } }
.wg2-right{ display:flex; align-items:center; gap:8px; }
.wg2-lang{
  background:rgba(0,0,0,.30);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.10); border-radius:999px;
  color:#fff; font-size:12px; font-weight:600; padding:8px 14px; cursor:pointer;
}
.wg2-btn-white{
  background:#fff; color:#111827; font-weight:500; font-size:12px;
  padding:9px 14px; border-radius:999px; border:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
@media(min-width:640px){ .wg2-btn-white{ font-size:14px; padding:12px 24px; } }
.wg2-btn-white:hover{ transform:translateY(-1px); box-shadow:0 6px 24px rgba(0,229,255,.25); }
.wg2-btn-white:disabled{ opacity:.7; cursor:wait; transform:none; }
.wg2-nav-wallet{ display:none; }
@media(min-width:640px){ .wg2-nav-wallet{ display:block; } }

/* contenido principal abajo */
.wg2-spacer{ flex:1; }
.wg2-main{ display:flex; flex-direction:column; padding-bottom:14px; }
@media(min-width:640px){ .wg2-main{ flex-direction:row; align-items:flex-end; padding-bottom:40px; } }
.wg2-left{ flex:1; min-width:0; }
.wg2-h1{
  font-weight:500; color:#fff; font-size:2rem; line-height:1.05; letter-spacing:-.02em; max-width:700px;
}
.wg2-h1 .hl{ color:var(--aqua); text-shadow:0 0 30px rgba(0,229,255,.45); }
@media(min-width:640px){ .wg2-h1{ font-size:3.5rem; } }
@media(min-width:768px){ .wg2-h1{ font-size:4.5rem; } }
@media(min-width:1024px){ .wg2-h1{ font-size:5.5rem; } }
.wg2-sub{
  color:rgba(255,255,255,.70); font-size:12px; line-height:1.65; max-width:520px; margin-top:14px; font-weight:400;
}
@media(min-width:640px){ .wg2-sub{ font-size:16px; } }

.wg2-cta{
  position:relative; display:flex; align-items:center;
  background:rgba(0,0,0,.30);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.10); border-radius:999px;
  max-width:440px; margin-top:22px; padding:6px;
}
.wg2-cta .hint{
  flex:1; min-width:0; padding:10px 12px 10px 18px; font-size:13px; color:rgba(255,255,255,.75);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums;
}
@media(min-width:640px){ .wg2-cta .hint{ font-size:14px; padding-left:22px; } }
.wg2-cta .wg2-btn-white{ flex:none; font-size:13px; padding:10px 18px; }
@media(min-width:640px){ .wg2-cta .wg2-btn-white{ font-size:14px; padding:12px 24px; } }

.wg2-error{
  max-width:440px; margin-top:10px; font-size:12px; line-height:1.5; color:var(--red-bright);
  background:rgba(255,59,48,.10); border:1px solid rgba(255,59,48,.30);
  border-radius:14px; padding:10px 14px;
}
.wg2-secure{ font-size:10.5px; color:var(--muted); margin-top:10px; }

.wg2-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.wg2-pill{
  background:rgba(0,0,0,.30);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.10); border-radius:999px;
  color:#fff; font-size:12px; padding:6px 12px; white-space:nowrap; font-weight:500;
}
.wg2-pills.desk{ display:none; }
@media(min-width:640px){
  .wg2-pills.mobile{ display:none; }
  .wg2-pills.desk{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; align-self:flex-end; }
  .wg2-pills.desk .wg2-pill{ font-size:14px; padding:8px 16px; }
}

/* ================= 2) JUEGO: piel glass ================= */

#stage{ background:linear-gradient(180deg, #0A1628 0%, #0B2036 100%); }

.wg-topbar{
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.wg-logo{ background:none; box-shadow:none; }
.wg-balance-chip{
  border-radius:999px; background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.wg-icon-btn{ border-radius:999px; background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.10); }

.wg-history{ border-bottom:none; }
.wg-hist-badge{ background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.08); }

.wg-money-btn{ border-radius:999px; }
.wg-money-btn.withdraw{ background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.12); }

.wg-betpanel{
  background:rgba(0,0,0,.30);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.10); border-radius:20px;
}
.wg-bet-input{
  border-radius:999px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.10);
  padding-left:16px;
}
.wg-chip{ border-radius:999px; background:rgba(255,255,255,.07); }
.wg-chip:hover{ background:rgba(255,255,255,.14); }

.wg-action{ border-radius:999px; }
.wg-action.bet{
  background:linear-gradient(135deg, var(--green), #14cfa0); color:#04281e;
  box-shadow:0 8px 30px rgba(29,233,182,.35);
}
.wg-action.cashout{
  background:linear-gradient(135deg, var(--green), #14cfa0); color:#04281e;
}
.wg-action.waiting{ background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.08); }
.wg-btn-ghost{ border-radius:999px; background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.10); }

.wg-feed{
  background:rgba(0,0,0,.30);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.10); border-radius:20px;
}
.wg-feed-head{ border-bottom:1px solid rgba(255,255,255,.07); }
.wg-feed-row{ border-top:1px solid rgba(255,255,255,.05); }

.wg-scene{ border:1px solid rgba(255,255,255,.10); }

.wg-sheet{ background:#0C1A2E; border-top:1px solid rgba(255,255,255,.12); }
.wg-input{ border-radius:999px; background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.12); padding:14px 18px; }
.wg-btn-primary{ border-radius:999px; }

/* móvil: texto del login ARRIBA y más chico (no tapar la cara de la chica) */
@media(max-width:639px){
  .wg2-spacer{ display:none; }
  .wg2-main{ padding-top:16px; }
  .wg2-h1{ font-size:1.6rem; }
  .wg2-sub{ font-size:11.5px; margin-top:10px; }
  .wg2-cta{ margin-top:16px; }
  /* candadito centrado, junto al CTA */
  .wg2-secure{ text-align:center; }
  /* píldoras abajo del todo, centradas */
  .wg2-pills.mobile{
    position:absolute; left:12px; right:12px; bottom:14px; z-index:11;
    justify-content:center; gap:6px; margin-top:0;
  }
  .wg2-pills.mobile .wg2-pill{ font-size:10.5px; padding:6px 10px; }
  /* velo: oscuro arriba (texto) + una pizca abajo (píldoras), la chica libre al medio */
  .wg2-veil{ background:
    linear-gradient(180deg, rgba(7,16,31,.62) 0, rgba(7,16,31,0) 52%),
    linear-gradient(0deg, rgba(7,16,31,.5) 0, rgba(7,16,31,0) 13%);
  }
}

/* ================= 3) JUEGO: estructura estilo mockup (wg2g) ================= */

/* PC: el juego a PANTALLA COMPLETA (sin la "ventana" de 1280px) */
@media(min-width:900px){
  #stage{
    max-width:none; width:100vw;
    height:100dvh; max-height:none;
    border-radius:0; border:none; outline:none; box-shadow:none;
  }
  .wg-main{ max-width:1720px; margin:0 auto; width:100%; }
}

/* fondo animado detrás del juego + brillos de color en el stage */
#stage{
  background:
    radial-gradient(120% 90% at 75% -10%, rgba(0,229,255,.13), transparent 55%),
    radial-gradient(90% 70% at 15% 110%, rgba(29,233,182,.10), transparent 60%),
    linear-gradient(180deg, #0A1628 0%, #0B2036 100%);
}
.wg2g-fx{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.wg2g-top, .wg2g .wg-main{ position:relative; z-index:1; }

/* topbar */
.wg2g-top{
  display:flex; align-items:center; justify-content:space-between; position:relative;
  padding:12px 14px; gap:8px; border-bottom:1px solid rgba(255,255,255,.07); flex:none;
}
.wg2g-top .wg2-brand{ display:none; }
@media(min-width:640px){ .wg2g-top .wg2-brand{ display:flex; top:50%; transform:translate(-50%,-50%); } }
.wg2-mark.sm{ width:26px; height:26px; }
.wg2-word.sm{ font-size:19px; }
@media(min-width:900px){ .wg2-mark.sm{ width:32px; height:32px; } .wg2-word.sm{ font-size:23px; } }
@media(max-width:479px){ .wg2g-top{ position:sticky; top:0; z-index:30; background:var(--bg); } }

.wg2g-pill{
  display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.30); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10); border-radius:999px;
  color:#fff; font-size:12px; font-weight:600; padding:8px 13px; white-space:nowrap;
}
.wg2g-pill.bal{ cursor:pointer; transition:border-color .15s; }
.wg2g-pill.bal:hover{ border-color:var(--aqua-deep); }
.wg2g-pill.bal b{ font-size:14px; }
.wg2g-pill.bal span{ color:var(--aqua); font-size:11px; }
.wg2g-pill.addr{ color:var(--muted); font-weight:500; display:none; }
@media(min-width:900px){ .wg2g-pill.addr{ display:flex; } }
/* en el juego, el badge LIVE es chico */
.wg2g .wg2-live{ flex:none; }
@media(max-width:639px){ .wg2g .wg2-live span{ display:none; } }

/* historial en fila propia, arriba de la escena (no tapa la llave) */
.wg2g-scenewrap{ position:relative; flex:none; }
.wg2g-hist2{ overflow:hidden; }
.wg2g-hist2 .wg-history{ padding:2px 4px 6px; border-bottom:none; background:none; }
.wg2g-hist2 .wg-hist-badge{ background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.08); }
.wg2g-scenewrap .wg-scene{ width:100%; }

/* PC: historial arriba de la escena, escena ocupa el resto de la columna izquierda */
@media(min-width:900px){
  .wg-main > .wg2g-hist2{ grid-column:1; grid-row:1; align-self:start; }
  .wg-main > .wg2g-scenewrap{ grid-column:1; grid-row:2 / 4; align-self:stretch; min-height:560px; display:flex; }
  .wg2g-scenewrap .wg-scene{ height:auto; min-height:560px; align-self:stretch; flex:1; }
  .wg-main > .wg-betpanel{ grid-column:2; grid-row:1 / 3; align-self:start; }
  .wg-main > .wg-feed{ grid-column:2; grid-row:3; align-self:stretch; }
}

/* panel de apuesta estilo mockup */
.wg2g-fields{ display:flex; gap:10px; }
.wg2g-field{ flex:1; min-width:0; }
.wg2g-field label{
  display:block; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 6px 6px;
}
.wg2g-field .wg-bet-input{ padding:9px 14px; gap:8px; }
.wg2g-field .wg-bet-input input{ font-size:17px; }
.wg2g-field .wg-bet-input .cur{ flex:none; font-size:11px; color:var(--muted); }
.wg-quickadd button{
  border-radius:999px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.10);
  color:var(--muted); padding:8px 0;
}
.wg-quickadd button:hover{ color:#fff; border-color:rgba(255,255,255,.25); background:rgba(0,0,0,.25); }
.wg-quickadd button:disabled{ opacity:.45; }
.wg2g-note{ text-align:center; font-size:11px; color:var(--muted); }
.wg2g-money{ display:flex; gap:10px; }
.wg2g-ghost{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(0,0,0,.30); border:1px solid rgba(255,255,255,.12); border-radius:999px;
  color:#fff; font-weight:600; font-size:13px; padding:12px 0; cursor:pointer;
  transition:border-color .15s;
}
.wg2g-ghost:hover{ border-color:rgba(255,255,255,.3); }