/* =======================================================================
   HACEB · MUNDIAL MIX — Estilos
   Fondos limpios + todo el contenido (texto, botones, marcador) en HTML/CSS
   ======================================================================= */

@font-face{ font-family:"Poppins"; src:url("../assets/fonts/Poppins-Regular.ttf") format("truetype");   font-weight:400; font-display:swap; }
@font-face{ font-family:"Poppins"; src:url("../assets/fonts/Poppins-Medium.ttf") format("truetype");    font-weight:500; font-display:swap; }
@font-face{ font-family:"Poppins"; src:url("../assets/fonts/Poppins-SemiBold.ttf") format("truetype");  font-weight:600; font-display:swap; }
@font-face{ font-family:"Poppins"; src:url("../assets/fonts/Poppins-Bold.ttf") format("truetype");      font-weight:700; font-display:swap; }
@font-face{ font-family:"Poppins"; src:url("../assets/fonts/Poppins-ExtraBold.ttf") format("truetype"); font-weight:800; font-display:swap; }
@font-face{ font-family:"Poppins"; src:url("../assets/fonts/Poppins-Black.ttf") format("truetype");     font-weight:900; font-display:swap; }

:root{
  --haceb-yellow: #DDF135;
  --haceb-yellow-2:#C8DC1F;
  --haceb-ink:    #1B1F1A;
  --haceb-red:    #C8262C;
  --haceb-red-2:  #8E1B20;
  --white:        #ffffff;
  --muted:        #5d6358;
  --font:         "Poppins", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  font-family:var(--font); color:var(--haceb-ink);
  background:#1a1f1a;
  min-height:100vh;
  min-height:100dvh;       /* respeta barras del browser en móvil */
  overflow:hidden;
  display:flex; flex-direction:column;
}

/* ---------- Escenario: llena todo el viewport ---------- */
.stage{
  flex:1; position:relative; width:100%;
  height:100vh; height:100dvh;   /* dvh = dynamic viewport height (móvil) */
  overflow:hidden;
}
.screen{
  position:absolute; top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  display:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:#1B1F1A;
  opacity:0; transform:translateY(8px);
}
.screen.is-active{ display:block; opacity:1; transform:none; animation:screenIn .45s ease both; }
@keyframes screenIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

/* ---------- Logo Haceb (rombo blanco esquina superior derecha, pegado al borde del marco) ---------- */
.logo-haceb{
  position:absolute;
  top:clamp(22px,2.8vw,42px);     /* mismo top que el marco */
  right:clamp(22px,2.8vw,42px);   /* mismo right que el marco */
  width:clamp(110px,11vw,200px); height:auto;
  z-index:7; pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

/* ---------- Marco de cancha (rectángulo redondeado + círculo central) ---------- */
.cancha-frame{
  position:absolute;
  top:clamp(22px,2.8vw,42px);
  left:clamp(22px,2.8vw,42px);
  right:clamp(22px,2.8vw,42px);
  bottom:clamp(22px,2.8vw,42px);
  border:2px solid rgba(255,255,255,.42);
  border-radius:clamp(14px,1.8vw,28px);
  z-index:4; pointer-events:none;
  overflow:hidden;
}
/* círculo tipo cancha — mitad visible a la izquierda */
.cancha-frame::before{
  content:""; position:absolute;
  left:-15%; top:50%; transform:translateY(-50%);
  width:clamp(180px,18vw,320px); aspect-ratio:1/1;
  border:2px solid rgba(255,255,255,.42);
  border-radius:50%;
}
/* círculo tipo cancha — mitad visible a la derecha */
.cancha-frame::after{
  content:""; position:absolute;
  right:-15%; top:50%; transform:translateY(-50%);
  width:clamp(180px,18vw,320px); aspect-ratio:1/1;
  border:2px solid rgba(255,255,255,.42);
  border-radius:50%;
}

/* ---------- Cintas amarillas con triangulitos (SVG del diseñador) ---------- */
.tape{
  position:absolute; left:0; right:0;
  height:clamp(14px,1.8vw,26px);
  background-repeat:no-repeat;
  background-size:100% 100%;
  z-index:5; pointer-events:none;
}
.tape--top{    top:0;    background-image:url("../assets/lineas/linea-top.svg"); }
.tape--bottom{ bottom:0; background-image:url("../assets/lineas/linea-bottom.svg"); }

/* ---------- Botón rombo del diseñador (SVG vacío + texto encima) ---------- */
.btn-rombo{
  position:relative; background:transparent; border:none; cursor:pointer; padding:0;
  display:inline-block; line-height:0;
  width:clamp(240px,26vw,420px);
  transition:transform .15s ease, filter .2s ease;
}
.btn-rombo:hover{ filter:brightness(1.08) drop-shadow(0 6px 16px rgba(221,241,53,.3)); }
.btn-rombo:active{ transform:scale(.95); }
.btn-rombo__bg{ display:block; width:100%; height:auto; pointer-events:none; }
.btn-rombo__txt{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--font); font-weight:700; color:var(--haceb-ink);
  font-size:clamp(16px,1.8vw,28px); letter-spacing:.4px; line-height:1.15;
  text-align:center; white-space:nowrap;
  pointer-events:none;
}
.btn-rombo__txt--small{ font-size:clamp(11px,1.1vw,17px); white-space:normal; }
.btn-rombo--terminos{ position:absolute; right:5%; bottom:7%; }

/* Enlaces de navegación auxiliares (sin rombo) */
.link-continuar, .link-reset{
  position:absolute; left:50%; transform:translateX(-50%);
  background:transparent; border:none; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:clamp(14px,1.5vw,20px); letter-spacing:1.5px;
  color:var(--white); text-transform:uppercase;
  padding:8px 14px;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
}
.link-continuar{ bottom:18%; color:var(--haceb-yellow); }
/* SEGUIR de la pantalla de jugada: por encima del rombo para que reciba el clic */
.screen--jugada .link-continuar{ z-index:8; }
.link-reset{ bottom:10%; color:var(--haceb-ink); text-shadow:none; }
.link-continuar:hover, .link-reset:hover{ opacity:.75; }

/* ---------- Kicker (los 3 puntitos típicos del diseño Haceb) ---------- */
.kicker{
  display:inline-block; color:var(--haceb-yellow);
  font-weight:900; font-size:clamp(16px,2vw,22px); letter-spacing:6px;
  margin-bottom:8px;
}

/* ====================================================================
   1) SPLASH
   ==================================================================== */
.screen--splash{ background:radial-gradient(120% 90% at 50% -10%, #2a2d24 0%, #161913 100%); display:none; align-items:center; justify-content:center; flex-direction:column; gap:14px; }
.screen--splash.is-active{ display:flex; }
.splash-logo{ font-weight:900; letter-spacing:6px; font-size:clamp(40px,8vw,72px); color:var(--haceb-yellow); text-shadow:0 8px 30px rgba(221,241,53,.35); }
.splash-sub{ color:var(--white); font-weight:600; letter-spacing:4px; font-size:clamp(14px,2vw,18px); text-transform:uppercase; }
.splash-ball{ font-size:54px; animation:bounce 1.1s infinite ease-in-out; margin:10px 0; }
@keyframes bounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-22px) rotate(180deg) } }
.loader{ width:180px; height:6px; background:rgba(255,255,255,.14); border-radius:99px; overflow:hidden; }
.loader span{ display:block; height:100%; width:40%; background:var(--haceb-yellow); border-radius:99px; animation:load 1.6s ease-in-out infinite; }
@keyframes load{ 0%{ transform:translateX(-110%) } 100%{ transform:translateX(360%) } }

/* ====================================================================
   2) HOME — fondo electrodomésticos + título + 2 botones rombo
   ==================================================================== */
.screen--home{
  background-image:url("../assets/screens/bg_electros.jpg");
  background-position:center top;
  background-color:rgb(89, 110, 104);
}
.home-titulo{
  position:absolute; top:50%; left:6%; right:6%; transform:translateY(-50%);
  color:var(--white); text-shadow:0 4px 18px rgba(0,0,0,.65);
  text-align:center;
  z-index:2;
}
.home-titulo h1{
  font-size:clamp(20px,2.6vw,42px); font-weight:800; line-height:1.22;
  margin-top:8px; max-width:none;
  color:var(--white);
}
/* "*Imagen de referencia" pegada al borde inferior-izquierdo del marco */
.ref-imagen{
  position:absolute;
  bottom:clamp(28px,3.4vw,52px);   /* un poco arriba del marco para que quede dentro */
  left:clamp(34px,3.8vw,58px);     /* un poco hacia adentro del borde izquierdo del marco */
  font-size:clamp(10px,1vw,14px); font-weight:400; font-style:italic;
  color:rgba(255,255,255,.75); letter-spacing:.2px;
  z-index:6;
}
.home-actions{
  position:absolute; left:50%; bottom:7%; transform:translateX(-50%);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:clamp(10px,1.4vw,18px);
  z-index:2;
}
/* JUGAR + VOLVER A JUGAR lado a lado */
.home-rombos{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(2px,0.6vw,12px);
}
/* "Volver a jugar": mismo rombo, más pequeño que JUGAR (~65%) */
.btn-rombo--volver{ width:clamp(150px,17vw,275px); }
.btn-entrenamiento{
  background:transparent; border:1px solid rgba(255,255,255,.5); color:var(--white);
  padding:8px 28px; border-radius:999px;
  font-family:inherit; font-size:clamp(11px,1.2vw,15px); font-weight:600;
  letter-spacing:.08em; cursor:pointer; z-index:2;
  transition:background .18s, border-color .18s;
}
.btn-entrenamiento:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.8); }

/* ====================================================================
   3) INSTRUCCIONES — fondo cancha + cristal con las 4 reglas
   ==================================================================== */
.screen--instrucciones{ background-image:url("../assets/screens/bg_cancha.jpg"); }

.cristal{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.45);
  border-radius:24px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  color:var(--white);
  padding:34px 42px;
}
.cristal--instrucciones{
  position:absolute;
  left:8%; right:8%;
  top:18%; bottom:32%;
  padding:clamp(28px,4vw,60px) clamp(40px,6vw,90px);
  display:flex; flex-direction:column; justify-content:center;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.28);
  border-radius:clamp(20px,2.6vw,40px);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.cristal--instrucciones .kicker{ margin-bottom:0; }
.cristal--instrucciones h2{
  font-size:clamp(34px,5.4vw,76px); font-weight:900; line-height:1; margin:6px 0 clamp(18px,2.4vw,34px);
  color:var(--white); letter-spacing:-.5px;
}
.reglas{ list-style:none; padding:0; display:flex; flex-direction:column; gap:clamp(6px,.8vw,12px); }
.reglas li{
  font-size:clamp(17px,2.2vw,34px); font-weight:700; line-height:1.25;
  color:var(--white); display:flex; align-items:baseline; gap:clamp(10px,1.2vw,18px);
}
.reglas li strong{ color:var(--haceb-yellow); font-weight:900; min-width:1.5ch; }

/* ====================================================================
   4) TÉRMINOS — fondo cancha + cristal con lista de 11 puntos
   ==================================================================== */
.screen--terminos{ background-image:url("../assets/screens/bg_cancha.jpg"); }

.cristal--terminos{
  position:absolute;
  left:6%; right:6%; top:13%; bottom:18%;
  padding:clamp(24px,3.2vw,50px) clamp(34px,4.4vw,72px);
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.28);
  border-radius:clamp(18px,2.4vw,36px);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  text-shadow:0 2px 6px rgba(0,0,0,.4);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.tyc-titulo{
  font-size:clamp(24px,3.2vw,46px); font-weight:900;
  color:var(--haceb-yellow); letter-spacing:.5px; margin-bottom:4px;
}
.tyc-header-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:clamp(10px,1.4vw,18px); }
.tyc-sub{ font-size:clamp(14px,1.5vw,20px); font-weight:700; color:var(--haceb-yellow); margin:0; }
.tyc-download-btn{
  flex-shrink:0;
  color:var(--haceb-ink); background:var(--haceb-yellow);
  border-radius:8px; padding:5px 10px;
  font-size:clamp(9px,1vw,12px); font-weight:700; text-decoration:none;
  white-space:nowrap;
}
.tyc-scroll-hint{
  text-align:center; flex-shrink:0;
  color:var(--haceb-yellow); font-size:clamp(9px,.9vw,11px);
  margin:3px 0 0; opacity:.75; letter-spacing:.5px;
}
.tyc-cuerpo{
  flex:1; overflow-y:auto; padding-right:6px;
  color:var(--white); font-size:clamp(10px,1.05vw,14px); line-height:1.5;
}
.tyc-cuerpo::-webkit-scrollbar{ width:4px; }
.tyc-cuerpo::-webkit-scrollbar-track{ background:rgba(255,255,255,.1); border-radius:2px; }
.tyc-cuerpo::-webkit-scrollbar-thumb{ background:var(--haceb-yellow); border-radius:2px; }
.tyc-cuerpo p{ margin:0 0 4px; }
.tyc-clausula{ color:var(--haceb-yellow); font-weight:700; font-size:clamp(10px,1.05vw,14px); margin-top:clamp(8px,1vw,13px); margin-bottom:1px; }
.tyc-datos-box{ margin-top:clamp(10px,1.2vw,16px); padding-top:clamp(8px,1vw,13px); border-top:1px solid rgba(255,255,255,.3); }
.tyc-ul{ padding-left:1.1em; margin:3px 0; }
.tyc-ul li{ margin-bottom:2px; }
.tyc-acepta-box{
  margin-top:clamp(12px,1.5vw,20px);
  padding:clamp(10px,1.2vw,14px);
  background:rgba(221,241,53,.08);
  border:1px solid rgba(221,241,53,.4);
  border-radius:10px;
}
.tyc-acepta-label{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  color:var(--white); font-size:clamp(10px,1.1vw,14px); font-weight:600; line-height:1.4;
}
.tyc-acepta-label input[type="checkbox"]{
  width:18px; height:18px; flex-shrink:0;
  accent-color:var(--haceb-yellow); cursor:pointer; margin-top:2px;
}
.btn-rombo--terminos:disabled{ opacity:.3; pointer-events:none; filter:grayscale(.5); }
.btn-rombo--terminos{ right:6%; bottom:7%; z-index:8; }
.tyc-volver{ position:absolute; left:6%; bottom:7%; transform:none; z-index:8; padding-left:0; }

/* ====================================================================
   5) PENALTY — fondo arquero limpio + 4 balones reales + marcador
   ==================================================================== */
.screen--penalty{ background-image:url("../assets/screens/bg_arquero.jpg"); }

/* Título oscuro centrado arriba */
.penalty-titulo{
  position:absolute; top:9%; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.55); color:var(--white);
  padding:clamp(8px,1vw,14px) clamp(20px,2.8vw,40px);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  font-weight:500; font-size:clamp(11px,1.3vw,17px);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  z-index:6; text-align:center; white-space:normal;
  max-width:70%; line-height:1.4;
}

/* 4 balones — círculo blanco de fondo con el objeto adentro, dentro del arco */
.balones-arco{ position:absolute; inset:0; z-index:4; }
.balon-hotspot{
  position:absolute; width:clamp(56px,6.5vw,96px); aspect-ratio:1/1;
  cursor:pointer; border:none; padding:0;
  background:#ffffff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.6);
  transition:transform .18s ease, box-shadow .2s ease;
  animation:floatBall 3s ease-in-out infinite;
}
.balon-hotspot:hover{ transform:scale(1.12); box-shadow:0 12px 28px rgba(0,0,0,.55), inset 0 0 0 3px var(--haceb-yellow); }
.balon-hotspot:active{ transform:scale(.94); }
.balon-hotspot img{
  width:78%; height:78%; object-fit:contain; pointer-events:none;
}
/* posiciones — balones dentro del arco, distribuidos a los lados del arquero */
.balon-hotspot[data-pos="tl"]{ top:28%; left:24%;  animation-delay:.0s; }  /* cojín */
.balon-hotspot[data-pos="tr"]{ top:28%; right:25%; animation-delay:.6s; }  /* rollo */
.balon-hotspot[data-pos="bl"]{ top:46%; left:16%;  animation-delay:1.2s; } /* oso */
.balon-hotspot[data-pos="br"]{ top:46%; right:17%; animation-delay:1.8s; } /* papel */
/* pelota de tela — centrada arriba del portero (animación que conserva el centrado) */
.balon-hotspot[data-pos="tc"]{ top:19%; left:50%; transform:translateX(-50%); animation:floatTip 3s ease-in-out .3s infinite; }
.balon-hotspot[data-pos="tc"]:hover{ transform:translateX(-50%) scale(1.12); }
.balon-hotspot[data-pos="tc"]:active{ transform:translateX(-50%) scale(.94); }
@keyframes floatBall{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }

/* Marcador — rombo amarillo con bordes redondeados */
.marcador{
  position:absolute; left:5%; bottom:9%;
  background:var(--haceb-yellow); color:var(--haceb-ink);
  padding:clamp(12px,1.4vw,18px) clamp(18px,2.2vw,28px);
  border-radius:clamp(8px,1vw,14px);
  font-weight:700; font-size:clamp(11px,1.2vw,15px);
  line-height:1.85;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
  z-index:6;
}
.marcador-row{
  display:grid; grid-template-columns:18px auto 1fr auto; align-items:center; gap:8px;
}
.marcador-row::before{
  content:""; width:14px; height:14px; border-radius:3px;
  background:var(--haceb-ink);
  /* ícono de silbato / balón sutil */
}
.marcador-row span{ letter-spacing:.5px; }
.marcador-row strong{
  justify-self:end; font-weight:900; letter-spacing:2px;
  padding-left:14px;
}

/* Tip — texto guía debajo del portero (el balón ahora es jugable, posición tc) */
@keyframes floatTip{
  0%,100%{ transform:translateX(-50%) translateY(0) }
  50%    { transform:translateX(-50%) translateY(-8px) }
}
.tip-texto{
  position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
  color:var(--white); font-size:clamp(12px,1.4vw,18px); font-weight:600;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
  text-align:center; white-space:nowrap; z-index:6; pointer-events:none;
}

/* ====================================================================
   6) PREGUNTA — fondo cancha + cristal con situación + 4 opciones
   ==================================================================== */
.screen--pregunta{
  background:linear-gradient(180deg, #b8c0c2 0%, #9aa1a3 100%);
}

.pregunta-balones{
  position:absolute; top:62px; left:42px;
  display:flex; gap:10px; z-index:5;
}
.pregunta-balones .mini{
  width:clamp(40px,4vw,56px); height:clamp(40px,4vw,56px); border-radius:50%;
  background:var(--white); display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}
.pregunta-balones .mini.activo{ background:var(--haceb-yellow); }
.pregunta-balones .mini img{ width:72%; height:72%; object-fit:contain; }

.timer{
  position:absolute; top:60px; left:26%; right:26%; height:5px;
  background:rgba(0,0,0,.18); border-radius:99px; overflow:hidden; z-index:5;
}
.timer-fill{ height:100%; width:100%; background:var(--haceb-ink); transform-origin:left; }
.timer-fill.run{ animation:drain linear forwards; }
.timer-fill.danger{ background:var(--haceb-red); }
@keyframes drain{ from{ transform:scaleX(1) } to{ transform:scaleX(0) } }

.pregunta-card{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(82%,1100px);
  display:flex; flex-direction:column; gap:24px;
}
.cristal--situacion{
  padding:28px 36px; text-align:center;
  color:var(--haceb-ink);
}
.cristal--situacion .contexto{ font-size:clamp(14px,1.5vw,18px); font-weight:500; margin-bottom:6px; }
.cristal--situacion .pregunta{ font-size:clamp(16px,2vw,22px); font-weight:800; }

.opciones{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.opcion{
  font-family:inherit; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
  border-radius:18px; padding:18px 20px 18px 70px;
  backdrop-filter:blur(8px);
  font-size:clamp(13px,1.5vw,17px); font-weight:600; color:var(--haceb-ink);
  position:relative; min-height:64px;
  transition:transform .12s ease, background .2s ease;
}
.opcion::before{
  content:attr(data-letra);
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background:var(--haceb-yellow); color:var(--haceb-ink);
  font-weight:900; font-size:18px;
  display:flex; align-items:center; justify-content:center;
}
.opcion:hover{ background:rgba(255,255,255,.75); }
.opcion:active{ transform:scale(.98); }
.opcion.correcta{ background:rgba(221,241,53,.7); border-color:var(--haceb-yellow); }
.opcion.incorrecta{ background:rgba(200,38,44,.55); border-color:var(--haceb-red); color:var(--white); }
.opcion.incorrecta::before{ background:var(--haceb-red); color:var(--white); }
.opcion[disabled]{ cursor:default; }

/* ====================================================================
   7) JUGADA — rombo gigante amarillo/rojo sobre arco vacío oscurecido
   ==================================================================== */
.screen--jugada{
  background-image:url("../assets/screens/bg_arco_vacio.jpg");
  background-color:#0a0d10;
  position:relative;
}
.screen--jugada::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.5);
  z-index:1; pointer-events:none;
}

/* Rombo del mensaje (usa SVG del diseñador como background) */
.rombo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0);
  width:min(70%,900px); aspect-ratio:1173/391;
  display:flex; align-items:center; justify-content:center;
  padding:0 14%; text-align:center;
  background-repeat:no-repeat; background-size:contain; background-position:center;
  z-index:6; pointer-events:none;
}
.rombo--gol{
  background-image:url("../assets/rombos/gol.svg");
  filter:drop-shadow(0 0 30px rgba(221,241,53,.4));
}
.rombo--falla{
  background-image:url("../assets/rombos/falla.svg");
  filter:drop-shadow(0 0 30px rgba(255,38,38,.4));
}
.rombo__txt{
  position:relative; z-index:2;
  color:var(--haceb-ink); font-weight:900;
  font-size:clamp(20px,3.4vw,46px);
  letter-spacing:.5px; line-height:1.15;
}
.rombo--falla .rombo__txt{ color:var(--white); }
.rombo.show{
  animation:rombo-pop .55s cubic-bezier(.2,1.5,.4,1) forwards;
  /* Fallback Safari: si la animación no arranca, el rombo igual se ve */
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
}
@keyframes rombo-pop{
  0%{ transform:translate(-50%,-50%) scale(.3) rotate(-10deg); opacity:0; }
  60%{ transform:translate(-50%,-50%) scale(1.08) rotate(2deg); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(1) rotate(0); opacity:1; }
}

/* Confeti */
.confeti{ position:absolute; inset:0; pointer-events:none; z-index:7; overflow:hidden; }
.confeti i{ position:absolute; top:-12px; width:8px; height:14px; border-radius:2px; animation:fall linear forwards; }
@keyframes fall{ to{ transform:translateY(120%) rotate(540deg); opacity:.2; } }

/* ====================================================================
   8) FINALES — fondo cancha + rombo gigante con mensaje + JUGAR OTRA VEZ
   ==================================================================== */
.screen--final{ background-image:url("../assets/screens/bg_cancha.jpg"); }
.screen--final::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(200,210,212,.85) 0%, rgba(180,190,193,.85) 100%);
  z-index:1;
}
.rombo--final{
  position:absolute;
  top:38%; left:50%; transform:translate(-50%,-50%) scale(1);
  width:min(72%,1000px); aspect-ratio:1173/391;
  z-index:6;
}
.rombo--final .rombo__txt{
  font-size:clamp(20px,3.2vw,42px);
}

/* Botones de acción al final (ir al inicio / volver a jugar) */
.final-actions{
  position:absolute; left:50%; bottom:11%; transform:translateX(-50%);
  display:flex; gap:clamp(20px,2.5vw,40px); align-items:center;
  z-index:7;
}
.final-actions .btn-rombo{ width:clamp(190px,20vw,300px); }
.final-actions .btn-rombo__txt{ font-size:clamp(13px,1.3vw,18px); }
.entrenamiento-msg{ font-size:clamp(14px,2vw,26px); }

/* ---------- Overlay "gira tu teléfono" (forzar landscape en móvil portrait) ---------- */
.rotate-overlay{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #161913 0%, #0a0d0a 100%);
  text-align:center; padding:30px;
}
.rotate-overlay__inner{
  max-width:340px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:24px;
  padding:36px 28px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.rotate-overlay__icon{
  width:100px; height:100px; display:block; margin:0 auto 18px;
  animation:rotateBounce 1.8s ease-in-out infinite;
}
.rotate-overlay__icon rect, .rotate-overlay__icon path, .rotate-overlay__icon polygon{
  stroke:#fff;
}
.rotate-overlay__icon rect[fill]{ fill:#fff; }
.rotate-overlay__icon polygon{ fill:var(--haceb-yellow); }
.rotate-overlay__icon path{ stroke:var(--haceb-yellow); }
@keyframes rotateBounce{
  0%, 100%{ transform:rotate(0); }
  50%{ transform:rotate(-90deg); }
}
.rotate-overlay h2{
  color:var(--haceb-yellow); font-size:24px; font-weight:900;
  margin-bottom:10px; letter-spacing:.5px;
}
.rotate-overlay p{
  color:rgba(255,255,255,.85); font-size:15px; line-height:1.45;
  font-weight:500;
}
.rotate-overlay strong{ color:var(--haceb-yellow); font-weight:800; }
/* Solo se muestra en móvil/tablet en portrait */
@media (orientation: portrait) and (max-width: 1024px){
  .rotate-overlay{ display:flex; }
  .stage{ visibility:hidden; }
}

/* En móvil landscape: el escenario llena todo el viewport (sin bandas) */
@media (orientation: landscape) and (max-width: 1024px){
  .stage{
    width:100vw;
    height:100vh; height:100dvh;
    transform:none !important;   /* anular cualquier escala del JS */
  }
  /* compactar tamaños un poco para móvil */
  .home-titulo h1{ font-size:clamp(14px,3.6vw,28px); }
  .penalty-titulo{ padding:6px 18px; font-size:clamp(10px,1.8vw,14px); top:6%; }
  .marcador{ padding:8px 14px; font-size:clamp(9px,1.5vw,12px); }
  .tip-texto{ font-size:clamp(10px,1.6vw,13px); }
  .balon-hotspot{ width:clamp(44px,7vw,72px); }
  .opcion{ padding:12px 14px 12px 52px; font-size:clamp(11px,1.6vw,14px); min-height:48px; }
  .opcion::before{ width:32px; height:32px; font-size:14px; left:10px; }
  .cristal--situacion{ padding:14px 18px; }
  .cristal--situacion .contexto{ font-size:clamp(11px,1.6vw,14px); }
  .cristal--situacion .pregunta{ font-size:clamp(13px,2vw,16px); }
  .pregunta-card{ width:92%; gap:14px; }
  .pregunta-balones{ top:38px; left:24px; gap:6px; }
  .pregunta-balones .mini{ width:32px; height:32px; }
  .timer{ top:24px; left:35%; right:35%; height:4px; }
  .logo-haceb{ width:56px; }
  .rombo__txt{ font-size:clamp(14px,2.6vw,22px); }
  .rombo--final .rombo__txt{ font-size:clamp(12px,2.2vw,18px); }
  .btn-rombo{ width:clamp(120px,18vw,180px); }
  .btn-rombo__txt{ font-size:clamp(9px,1.4vw,13px); }
  .btn-rombo__txt--small{ font-size:clamp(7px,1.1vw,11px); }
  .reglas li{ font-size:clamp(11px,2vw,16px); }
  .cristal--instrucciones h2{ font-size:clamp(20px,4vw,34px); }
  .tyc-titulo{ font-size:clamp(14px,2.4vw,22px); }
  .tyc-sub{ font-size:clamp(10px,1.6vw,14px); }
  .tyc-header-row{ margin-bottom:6px; }
  .cancha-frame{ top:18px; left:18px; right:18px; bottom:18px; border-width:1.5px; }
  .tape{ height:14px; }
  .ref-imagen{ font-size:10px; bottom:22px; left:28px; }
}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .opciones{ grid-template-columns:1fr; }
  .pregunta-card{ width:90%; gap:14px; }
  .balon-hotspot{ width:64px; height:64px; }
  .home-actions{ gap:12px; bottom:5%; }
  .home-titulo{ left:5%; right:5%; top:14%; }
  .cristal--instrucciones{ max-width:88%; }
  .tyc-list{ grid-template-columns:1fr; }
  .cristal--terminos{ right:5%; }
  .reg-secciones{ column-count:1; }
  .reg-checks-grid{ grid-template-columns:1fr; }
  .screen[data-screen="registro-prev"] .cristal--registro{ width:92%; }
}
/* ---------- Pantallas de poca altura (móvil en horizontal / pantallas bajitas) ----------
   En estas alturas el card del quiz se desbordaba (opciones cortadas, encimadas con la
   barra de música) y el título de penaltis se montaba sobre la X y los balones. Aquí se
   compacta todo para que quepa sin cortes. Va al final para ganarle a los media anteriores. */
@media (max-height: 480px){
  /* ── PREGUNTA: 4 opciones en 2 columnas para que quepan en vertical ── */
  .opciones{ grid-template-columns:1fr 1fr; gap:8px; }
  .opcion{
    min-height:0; padding:8px 12px 8px 42px;
    font-size:clamp(11px,1.5vw,14px); border-radius:12px;
  }
  .opcion::before{ width:26px; height:26px; font-size:13px; left:8px; }
  .pregunta-card{ width:94%; gap:8px; }
  .cristal--situacion{ padding:8px 16px; }
  .cristal--situacion .contexto{ font-size:clamp(10px,1.4vw,13px); margin-bottom:2px; }
  .cristal--situacion .pregunta{ font-size:clamp(12px,1.7vw,15px); }
  .pregunta-balones{ top:22px; left:16px; gap:5px; }
  .pregunta-balones .mini{ width:26px; height:26px; }
  .timer{ top:14px; }

  /* ── PENALTY: título compacto que no se monta sobre la X ni los balones ── */
  .penalty-titulo{
    top:4%; padding:5px 16px; max-width:82%;
    font-size:clamp(9px,1.6vw,12px); line-height:1.25; border-radius:10px;
  }
  .marcador{ bottom:7%; padding:6px 12px; font-size:clamp(8px,1.4vw,11px); line-height:1.55; }
  .tip-texto{ bottom:5%; font-size:clamp(9px,1.5vw,12px); }

  /* ── HOME: título anclado arriba (no centrado) para que no se monte
        sobre la cinta ni el logo; botones compactos abajo ── */
  .home-titulo{ top:9%; left:6%; right:6%; transform:none; }
  .home-titulo .kicker{ margin-bottom:1px; font-size:13px; }
  .home-titulo h1{ font-size:clamp(11px,2.6vw,17px); line-height:1.18; }
  .home-actions{ bottom:5%; gap:5px; }
  .btn-rombo{ width:clamp(100px,16vw,150px); }
  .btn-entrenamiento{ padding:4px 18px; font-size:clamp(9px,1.5vw,12px); }
  .ref-imagen{ bottom:9px; left:16px; font-size:9px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.05s !important; }
  /* El temporizador del quiz es funcional (marca el tiempo real de la pregunta),
     no decorativo: se exime del apagado de animaciones para que la barra siga
     bajando en 15s aunque el dispositivo tenga "reducir movimiento" activado. */
  .timer-fill.run{ animation-duration:15s !important; }
}

/* ====================================================================
   9) CARGANDO / REGISTRO / TABLA (flujo arcade conectado al backend)
   ==================================================================== */
.screen--cargando,
.screen--registro,
.screen--tabla{ background-image:url("../assets/screens/bg_cancha.jpg"); }
.screen--cargando::before,
.screen--registro::before,
.screen--tabla::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(22,25,19,.82) 0%, rgba(10,13,10,.9) 100%);
}

.cargando-box{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  color:var(--white); font-weight:700; letter-spacing:1px;
}

/* Aviso de conexión (en home) */
.aviso-red{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%); z-index:8;
  background:var(--haceb-red); color:#fff; padding:10px 18px; border-radius:10px;
  font-weight:700; font-size:clamp(12px,1.4vw,15px); max-width:80%; text-align:center;
}

/* Cristal centrado para registro y tabla */
.cristal--registro,
.cristal--tabla{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:6;
  width:min(92%,620px);
  max-height:90vh; max-height:90dvh; overflow-y:auto;  /* si el form no cabe, scroll interno (el botón siempre alcanzable) */
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.28);
  border-radius:clamp(14px,2vw,28px);
  padding:clamp(10px,1.4vw,18px) clamp(16px,2.5vw,40px);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  text-align:center; text-shadow:0 2px 8px rgba(0,0,0,.4);
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.cristal--registro h2,
.tabla-titulo{ font-size:clamp(16px,2vw,26px); font-weight:900; color:var(--white); margin:0 0 2px; }
.reg-sub{ color:var(--haceb-yellow); font-weight:700; font-size:clamp(9px,1.05vw,13px); margin-bottom:5px; }

.reg-form{ display:flex; flex-direction:column; gap:5px; align-items:stretch; width:100%; box-sizing:border-box; }
.reg-campo{ display:flex; flex-direction:column; gap:1px; text-align:left;
  font-size:clamp(8px,.95vw,10px); font-weight:700; color:var(--white); min-width:0; }
.reg-campo input, .reg-campo select{
  width:100%; box-sizing:border-box;
  padding:4px 8px; border-radius:6px; border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.95); color:var(--haceb-ink); font-size:clamp(11px,1.15vw,13px); font-family:inherit;
}
.reg-campo input:focus, .reg-campo select:focus{
  outline:none; border-color:var(--haceb-yellow); box-shadow:0 0 0 2px rgba(221,241,53,.5);
}
.reg-hint{ color:rgba(255,255,255,.6); font-size:clamp(8px,.9vw,10px); font-weight:400; }
/* Feedback en vivo del nickname en el registro */
.reg-msg-ok{ color:#7CFC7C !important; font-weight:700; }
.reg-msg-bad{ color:#FF6B6B !important; font-weight:700; }
.reg-campo input.reg-ok{ border-color:#7CFC7C; }
.reg-campo input.reg-bad{ border-color:#FF6B6B; }

/* Campos extra en 2 columnas */
#regExtra{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  width:100%; box-sizing:border-box;
}
/* Dirección: ocupa las 2 columnas */
#regExtra .reg-campo:last-child{ grid-column:1 / -1; }
/* El campo extra del registro previo tiene los mismos ids que regExtra */
#prevExtra{ display:grid; grid-template-columns:1fr 1fr; gap:5px; width:100%; box-sizing:border-box; }
#prevExtra .reg-campo:last-child{ grid-column:1 / -1; }

/* Formulario por secciones (TyC al pie de la letra) — compacto para entrar sin scroll */
.reg-intro{
  text-align:left; font-size:clamp(8px,.86vw,10px); font-weight:400; line-height:1.22;
  color:rgba(255,255,255,.76); margin:0 0 2px;
}
.reg-intro strong{ color:var(--white); font-weight:700; }
.reg-intro .link-inline{ font-size:inherit; }
.reg-seccion{
  text-align:left; font-size:clamp(9px,1vw,12px); font-weight:900; letter-spacing:.04em;
  color:var(--haceb-yellow); margin:4px 0 3px;
  padding-top:3px; border-top:1px solid rgba(221,241,53,.3);
}
.reg-doble{ display:flex; gap:6px; }
.reg-doble select{ flex:1; min-width:0; }

/* Layout amplio del registro: tarjeta más ancha y secciones en 2 columnas */
.screen[data-screen="registro-prev"] .cristal--registro{
  width:min(94%, 940px); max-height:98dvh;
  padding-top:clamp(5px,.7vw,10px); padding-bottom:clamp(5px,.7vw,10px);
}
/* Compactar lo justo en registro para que entre sin scroll, pero legible */
.screen[data-screen="registro-prev"] .kicker{ display:none; }
.screen[data-screen="registro-prev"] h2{ font-size:clamp(15px,1.7vw,23px); margin:0; }
.screen[data-screen="registro-prev"] .reg-sub{ margin:0 0 3px; }
.screen[data-screen="registro-prev"] .reg-form{ gap:2px; }
.screen[data-screen="registro-prev"] .reg-campo{ gap:0; font-size:clamp(8.5px,.95vw,10.5px); }
.screen[data-screen="registro-prev"] .reg-campo input,
.screen[data-screen="registro-prev"] .reg-campo select{ padding:3px 9px; font-size:clamp(10.5px,1.1vw,12.5px); }
.screen[data-screen="registro-prev"] .reg-hint{ font-size:clamp(7.5px,.84vw,9.5px); line-height:1.15; }
.screen[data-screen="registro-prev"] .reg-check{ font-size:clamp(8.5px,.95vw,11px); gap:8px; line-height:1.26; align-items:flex-start; }
.screen[data-screen="registro-prev"] .reg-check input[type="checkbox"]{ margin-top:2px; }
.screen[data-screen="registro-prev"] .btn-rombo{ margin-top:3px; }
.reg-intro-wrap{ width:100%; }
.reg-secciones{
  column-count:2; column-gap:clamp(24px,3vw,48px);
  width:100%; margin-top:4px;
}
.reg-bloque{ break-inside:avoid; -webkit-column-break-inside:avoid; display:block; margin-bottom:0; }
.reg-bloque .reg-campo{ margin-bottom:3px; }
.reg-bloque .reg-seccion:first-child{ margin-top:0; }
/* Sección 4 a todo el ancho con las dos declaraciones en paralelo */
.reg-bloque--full{ width:100%; margin-top:3px; }
.reg-checks-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px clamp(24px,3vw,48px); }

/* ---- OTP ---- */
.otp-email{ color:rgba(255,255,255,.8); font-size:clamp(10px,1.1vw,13px); margin:0 0 10px; line-height:1.4; }
.otp-email strong{ color:var(--haceb-yellow); }
.otp-boxes{ display:flex; gap:clamp(5px,.8vw,10px); justify-content:center; margin:10px 0; }
.otp-box{
  width:clamp(36px,5vw,50px); height:clamp(44px,6vw,58px);
  text-align:center; font-size:clamp(20px,2.8vw,30px); font-weight:900;
  border:2px solid rgba(255,255,255,.35); border-radius:9px;
  background:rgba(255,255,255,.95); color:var(--haceb-ink);
  caret-color:var(--haceb-yellow); font-family:inherit;
}
.otp-box:focus{ border-color:var(--haceb-yellow); outline:none; box-shadow:0 0 0 3px rgba(221,241,53,.5); }
.otp-dev{
  background:rgba(221,241,53,.12); border:1px solid rgba(221,241,53,.5);
  color:var(--haceb-yellow); border-radius:7px; padding:6px 12px;
  font-size:clamp(9px,1vw,11px); font-weight:700; margin-bottom:6px;
}
.otp-reenvio{ margin:6px 0 0; font-size:clamp(9px,1vw,11px); display:flex; align-items:center; justify-content:center; gap:6px; }
.otp-resend{ background:none; border:none; color:var(--haceb-yellow); font-weight:700;
  font-size:inherit; cursor:pointer; text-decoration:underline; font-family:inherit; padding:0; }
.otp-resend:disabled{ color:rgba(255,255,255,.35); text-decoration:none; cursor:default; }
.otp-timer{ color:rgba(255,255,255,.45); }

.reg-error{ color:#fff; background:var(--haceb-red); border-radius:7px; padding:6px 10px; font-weight:700; font-size:11px; }
.reg-check{ display:flex; align-items:center; gap:8px; text-align:left;
  font-size:clamp(9px,1vw,11px); font-weight:600; color:rgba(255,255,255,.85); cursor:pointer; }
.reg-check input[type="checkbox"]{ width:15px; height:15px; flex-shrink:0; accent-color:var(--haceb-yellow); }
.link-inline{ background:none; border:none; padding:0; color:var(--haceb-yellow); font-weight:700;
  font-size:inherit; cursor:pointer; text-decoration:underline; font-family:inherit; }
.cristal--registro .btn-rombo{ width:clamp(140px,18vw,200px); margin:3px auto 0; }
.cristal--registro .btn-rombo__txt{ font-size:clamp(11px,1.2vw,15px); letter-spacing:.2px; }
.screen--registro[data-screen="nickname"] .btn-rombo{ margin-top:clamp(14px,2vw,24px); }

/* Tabla de posiciones */
.tabla-yo{ color:var(--haceb-yellow); font-weight:800; font-size:clamp(15px,1.8vw,22px); margin-bottom:12px; }
.tabla-top{ width:100%; border-collapse:collapse; color:var(--white); }
.tabla-top td{ padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.18);
  font-size:clamp(13px,1.6vw,19px); font-weight:700; text-align:left; }
.tabla-top td.pos{ width:2.5ch; color:var(--haceb-yellow); font-weight:900; }
.tabla-top td.pts{ text-align:right; font-weight:900; }
.tabla-top tr.yo td{ background:var(--haceb-yellow); color:var(--haceb-ink); }
.tabla-top tr.yo td.pos{ color:var(--haceb-ink); }

/* Que el "IR AL INICIO" fluya dentro de los botones del final (no absoluto) */
.final-actions .link-continuar{ position:static; left:auto; transform:none; bottom:auto; }
/* Links dentro del cristal van en flujo normal, no absolutos */
.cristal--registro .link-continuar{
  position:static; left:auto; transform:none; bottom:auto;
  font-size:clamp(9px,1vw,11px); font-weight:600; letter-spacing:0;
  color:rgba(255,255,255,.55); margin-top:2px; display:block; text-align:center;
}

/* ── Botón música flotante ───────────────────────────────────── */
.btn-music{
  position:fixed; bottom:clamp(12px,2.5vw,20px); right:clamp(12px,2.5vw,20px);
  z-index:200;
  width:clamp(36px,4.5vw,48px); height:clamp(36px,4.5vw,48px);
  border-radius:50%; border:2px solid rgba(221,241,53,.45);
  background:rgba(22,25,19,.72); backdrop-filter:blur(8px);
  color:var(--haceb-yellow); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0; transition:background .2s, border-color .2s, transform .15s;
}
.btn-music:hover{ background:rgba(221,241,53,.15); border-color:var(--haceb-yellow); }
.btn-music:active{ transform:scale(.9); }
.btn-music svg{ width:55%; height:55%; }
.btn-music.is-muted{ opacity:.5; }

/* Botón salir al inicio — visible solo en pantallas de juego */
.btn-salir{
  position:fixed; top:clamp(18px,3vw,30px); left:clamp(12px,2.5vw,20px);
  z-index:200;
  width:clamp(34px,4.2vw,46px); height:clamp(34px,4.2vw,46px);
  border-radius:50%; border:2px solid rgba(255,255,255,.4);
  background:rgba(22,25,19,.72); backdrop-filter:blur(8px);
  color:#fff; cursor:pointer; font-size:clamp(15px,1.9vw,21px); line-height:1;
  display:flex; align-items:center; justify-content:center;
  padding:0; transition:background .2s, border-color .2s, transform .15s;
}
.btn-salir[hidden]{ display:none; }
.btn-salir:hover{ background:rgba(200,38,44,.9); border-color:#fff; }
.btn-salir:active{ transform:scale(.9); }

/* Modal de confirmación (salir) — estilo Haceb */
.modal-overlay{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,10,7,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:5vw; animation:modalFade .18s ease;
}
.modal-overlay[hidden]{ display:none; }
@keyframes modalFade{ from{ opacity:0 } to{ opacity:1 } }
.modal-box{
  width:min(440px,92vw); text-align:center;
  background:rgba(27,31,26,.96); color:var(--white);
  border:1px solid rgba(221,241,53,.35); border-radius:20px;
  padding:clamp(22px,3vw,34px) clamp(20px,3vw,38px);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  animation:modalPop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes modalPop{ from{ transform:scale(.88); opacity:0 } to{ transform:scale(1); opacity:1 } }
.modal-msg{
  font-size:clamp(15px,1.8vw,20px); font-weight:600; line-height:1.45;
  margin:clamp(10px,1.4vw,16px) 0 clamp(18px,2.4vw,26px);
}
.modal-actions{ display:flex; gap:clamp(10px,1.4vw,16px); justify-content:center; flex-wrap:wrap; }
.modal-btn{
  font-family:inherit; font-weight:800; font-size:clamp(12px,1.3vw,16px); letter-spacing:.04em;
  padding:clamp(10px,1.2vw,14px) clamp(16px,2vw,26px); border-radius:999px;
  cursor:pointer; transition:transform .12s, background .18s, border-color .18s; border:2px solid transparent;
}
.modal-btn:active{ transform:scale(.95); }
.modal-btn--ghost{ background:transparent; border-color:rgba(255,255,255,.5); color:var(--white); }
.modal-btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.modal-btn--danger{ background:var(--haceb-yellow); color:var(--haceb-ink); }
.modal-btn--danger:hover{ background:var(--haceb-yellow-2); }