/* Sistema de diseño — Mini juegos 3NDINGMOVIE */
:root {
  --bg: #0b0b10;
  --bg2: #14141c;
  --card: #1b1b26;
  --rojo: #ff3540;
  --rojo-os: #8f0a10;
  --oro: #ffd782;
  --txt: #ffffff;
  --txt2: #b9b9c7;
  --ok: #37e08b;
  --azul: #4aa8ff;
  --radio: 16px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100dvh; overscroll-behavior: none;
}
#juego-root { min-height: 100dvh; display: flex; flex-direction: column; padding-top: var(--safe-t); padding-bottom: var(--safe-b); }

/* ---- Botones ---- */
.gc-btn {
  display: block; width: min(420px, 92%); margin: 8px auto; padding: 16px;
  font-size: 18px; font-weight: 800; letter-spacing: 1px; color: var(--txt);
  background: var(--card); border: 2px solid #2c2c3a; border-radius: var(--radio);
  cursor: pointer; touch-action: manipulation; text-align: center; text-decoration: none;
}
.gc-btn:active { transform: scale(0.97); }
.gc-btn-jugar { background: linear-gradient(180deg, var(--rojo), var(--rojo-os)); border: none; font-size: 20px; }
.gc-btn-diario { border-color: var(--oro); color: var(--oro); }
.gc-btn-link { line-height: 1.4; }

/* ---- Portada / Fin ---- */
.gc-portada, .gc-fin {
  margin: auto; width: min(480px, 94%); text-align: center; padding: 24px 12px;
  animation: gc-in 0.35s ease;
}
@keyframes gc-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gc-icono { font-size: 64px; }
.gc-titulo { font-size: 30px; margin: 8px 0; letter-spacing: 1px; }
.gc-desc { color: var(--txt2); font-size: 16px; margin: 4px 0 12px; }
.gc-como { background: var(--bg2); border-left: 4px solid var(--oro); border-radius: 8px;
  padding: 12px 14px; text-align: left; font-size: 15px; line-height: 1.45; }
.gc-stats { display: flex; gap: 8px; justify-content: center; margin: 14px 0; }
.gc-stat { flex: 1; background: var(--card); border-radius: 12px; padding: 10px 6px; font-size: 13px; color: var(--txt2); }
.gc-stat b { color: var(--txt); font-size: 17px; }
.gc-volver { display: inline-block; margin-top: 14px; color: var(--txt2); text-decoration: none; font-size: 15px; }
.gc-puntos-fin { font-size: 72px; font-weight: 900; color: var(--oro); line-height: 1; margin-top: 8px; }
.gc-puntos-label { color: var(--txt2); letter-spacing: 3px; font-size: 13px; margin-bottom: 8px; }
.gc-detalle { color: var(--txt2); font-size: 15px; }
.gc-record-nuevo { display: inline-block; background: linear-gradient(180deg, var(--oro), #d8a93f);
  color: #3a2703; font-weight: 900; padding: 8px 18px; border-radius: 999px; margin: 6px 0;
  animation: gc-pop 0.6s ease infinite alternate; }
@keyframes gc-pop { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ---- Cuenta atrás ---- */
.gc-cuenta { margin: auto; text-align: center; }
.gc-cuenta-num { font-size: 120px; font-weight: 900; color: var(--oro); animation: gc-pop 0.7s ease; }
.gc-cuenta-nombre { color: var(--txt2); font-size: 16px; }

/* ---- Shell de juego / HUD ---- */
.gc-shell { display: flex; flex-direction: column; min-height: 100dvh; }
.gc-hud {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg2); border-bottom: 1px solid #262633; touch-action: manipulation;
}
.gc-hud-label { font-size: 11px; letter-spacing: 2px; color: var(--txt2); }
.gc-hud-pts { font-size: 26px; font-weight: 900; color: var(--oro); min-width: 60px; }
.gc-hud-tie { margin-left: auto; font-size: 18px; font-weight: 700; color: var(--txt); }
.gc-hud-pausa { background: var(--card); border: 1px solid #2c2c3a; color: var(--txt);
  font-size: 20px; border-radius: 12px; padding: 8px 14px; cursor: pointer; touch-action: manipulation; }
.gc-mount { position: relative; flex: 1; overflow: hidden; touch-action: manipulation; }
.gc-diario .gc-hud { border-bottom: 2px solid var(--oro); }

/* ---- Overlay / modal ---- */
.gc-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.72); z-index: 50;
  display: flex; align-items: center; justify-content: center; }
.gc-modal { background: var(--card); border-radius: 20px; padding: 28px 22px; width: min(380px, 90%); text-align: center; }
.gc-modal h2 { margin-top: 0; }
.gc-toast { position: fixed; left: 50%; bottom: calc(30px + var(--safe-b)); transform: translateX(-50%);
  background: #262633; color: var(--txt); padding: 12px 20px; border-radius: 999px; font-size: 15px;
  z-index: 99; max-width: 92%; text-align: center; }
.gc-error { margin: auto; color: var(--txt2); font-size: 16px; text-align: center; padding: 40px; }

/* ---- FX ---- */
.fx-popup { position: absolute; top: 38%; transform: translateX(-50%); font-size: 30px; font-weight: 900;
  color: var(--oro); text-shadow: 0 2px 8px rgba(0,0,0,0.7); pointer-events: none; z-index: 40;
  animation: fx-up 1.1s ease forwards; }
@keyframes fx-up { from { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -70px; } }
.fx-confeti { position: absolute; inset: 0; pointer-events: none; z-index: 45; }

/* ---- Hub ---- */
.hub { width: min(560px, 96%); margin: 0 auto; padding: 18px 8px 40px; }
.hub-head { text-align: center; margin-bottom: 6px; }
.hub-head h1 { font-size: 28px; margin: 6px 0; letter-spacing: 1px; }
.hub-head p { color: var(--txt2); margin: 0 0 10px; }
.hub-racha { display: inline-block; background: var(--card); border: 1px solid var(--oro);
  color: var(--oro); border-radius: 999px; padding: 8px 18px; font-weight: 800; margin-bottom: 14px; }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-card { display: block; background: var(--card); border-radius: var(--radio); padding: 16px 12px;
  text-decoration: none; color: var(--txt); text-align: center; border: 2px solid transparent;
  touch-action: manipulation; position: relative; }
.hub-card:active { transform: scale(0.97); border-color: var(--rojo); }
.hub-card .hc-icono { font-size: 40px; }
.hub-card .hc-nombre { font-weight: 800; font-size: 14px; margin: 8px 0 4px; }
.hub-card .hc-desc { font-size: 12px; color: var(--txt2); line-height: 1.35; }
.hub-card .hc-diario { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--oro);
  border: 1px solid var(--oro); border-radius: 999px; padding: 4px 10px; }
.hub-volver { display: block; text-align: center; margin: 18px 0; color: var(--txt2); text-decoration: none; }
.hub-foot { text-align: center; color: var(--txt2); font-size: 13px; margin-top: 8px; }

@media (min-width: 700px) { .hub-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ---- Barra superior: menú (☰) + atrás (←) en todas las páginas ---- */
.jnav-bar{display:flex;align-items:center;gap:8px;padding:calc(var(--safe-t) + 8px) 12px 8px;
  background:#101018;border-bottom:1px solid rgba(255,215,130,.18)}
.jnav-btn{background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:50%;
  width:38px;height:38px;font-size:17px;cursor:pointer;touch-action:manipulation;flex:0 0 auto}
.jnav-btn:active{background:rgba(255,255,255,.22)}
.jnav-title{font-size:14px;letter-spacing:1.5px;color:var(--txt2);margin-left:4px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.jnav-title img{width:26px;height:24px;object-fit:contain}
.jnav-title b{color:var(--oro);font-weight:900}
.jnav-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;opacity:0;
  pointer-events:none;transition:opacity .25s}
.jnav-scrim.open{opacity:1;pointer-events:auto}
.jnav-drawer{position:fixed;top:0;left:0;bottom:0;width:min(300px,84vw);background:#14141b;
  border-right:1px solid rgba(255,215,130,.25);z-index:201;transform:translateX(-105%);
  transition:transform .28s ease;display:flex;flex-direction:column;padding:14px}
.jnav-drawer.open{transform:translateX(0)}
.jnav-dhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.jnav-dtitle{font-weight:900;letter-spacing:2px;color:var(--oro);font-size:15px;display:inline-flex;align-items:center;gap:8px}
.jnav-dtitle img{width:28px;height:26px;object-fit:contain}
.jnav-drawer a{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;
  font-size:16px;font-weight:700;padding:13px 10px;border-radius:10px}
.jnav-drawer a:active{background:rgba(255,255,255,.08)}
.jnav-drawer a span{font-size:20px}

/* ---- Compartir con referido ---- */
.hub-card-wrap { position: relative; }
.hub-card-wrap.destacada { grid-column: 1 / -1; }
.hc-acciones { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hc-share { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  background: rgba(255,215,130,.08); color: #ffd782; border: 1px solid rgba(255,215,130,.4);
  border-radius: 50%; font-size: 16px; cursor: pointer; touch-action: manipulation; }
.hc-share:active { transform: scale(.92); }

/* ---- Hub premium 3NDINGMOVIE (rediseño: más movido, más profesional) ---- */
.hub { width: min(640px, 96%); margin: 0 auto; padding: 0 8px 48px; }
.hub-hero { position: relative; overflow: hidden; text-align: center; border-radius: 24px;
  margin: 14px 0 16px; padding: 36px 16px 28px;
  background: radial-gradient(120% 140% at 50% 0%, #2b1520 0%, #14141c 55%, #0b0b10 100%);
  border: 1px solid rgba(255,215,130,.25); }
.hub-hero::before, .hub-hero::after { content: ""; position: absolute; width: 220px; height: 220px;
  border-radius: 50%; filter: blur(70px); opacity: .5; animation: hub-blob 9s ease-in-out infinite alternate; }
.hub-hero::before { background: #ff3540; top: -70px; left: -50px; }
.hub-hero::after { background: #ffd782; bottom: -80px; right: -40px; animation-delay: -4.5s; }
@keyframes hub-blob { from { transform: translate(0,0) scale(1); } to { transform: translate(40px,30px) scale(1.25); } }
.hub-flot { position: absolute; font-size: 26px; opacity: .45; animation: hub-flot 6s ease-in-out infinite;
  pointer-events: none; z-index: 0; }
@keyframes hub-flot { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-16px) rotate(8deg); } }
.hub-eyebrow { display: inline-block; position: relative; z-index: 1; font-size: 12px; letter-spacing: 4px;
  color: var(--oro); border: 1px solid rgba(255,215,130,.4); border-radius: 999px; padding: 6px 14px;
  margin-bottom: 10px; background: rgba(255,215,130,.08); }
.hub-title { position: relative; z-index: 1; font-size: 34px; margin: 4px 0 6px; letter-spacing: 1px; font-weight: 900;
  background: linear-gradient(100deg,#ffd782 20%,#fff6d9 40%,#ffd782 60%); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hub-shine 4s linear infinite; }
@keyframes hub-shine { to { background-position: 200% center; } }
.hub-sub { position: relative; z-index: 1; color: var(--txt2); margin: 0 0 14px; font-size: 15px; }
.hub-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.hub-pill { background: rgba(0,0,0,.45); border: 1px solid rgba(255,215,130,.35); color: #fff;
  border-radius: 999px; padding: 9px 16px; font-weight: 800; font-size: 14px;
  animation: hub-pop .5s ease backwards; }
.hub-pill b { color: var(--oro); }
.hub-pill:nth-child(2) { animation-delay: .12s; }
@keyframes hub-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.hub-diario-banner { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: center;
  background: linear-gradient(90deg,rgba(255,215,130,.14),rgba(255,215,130,.05));
  border: 1px solid var(--oro); border-radius: 16px; padding: 12px; margin-bottom: 14px;
  font-weight: 800; font-size: 14px; color: var(--oro); animation: hub-glow 2.6s ease-in-out infinite; }
@keyframes hub-glow { 0%,100% { box-shadow: 0 0 0 rgba(255,215,130,0); } 50% { box-shadow: 0 0 18px rgba(255,215,130,.35); } }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hub-card { position: relative; display: block; text-decoration: none; color: var(--txt); text-align: center;
  border-radius: 18px; padding: 20px 12px 16px; touch-action: manipulation;
  background: linear-gradient(#1e1e2a,#1e1e2a) padding-box,
              linear-gradient(135deg,rgba(255,215,130,.45),rgba(255,53,64,.35)) border-box;
  border: 1.5px solid transparent;
  animation: hub-in .55s cubic-bezier(.2,.9,.3,1.2) backwards; animation-delay: var(--d, 0ms);
  transition: transform .15s ease; }
@keyframes hub-in { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
.hub-card:active { transform: scale(.96); }
.hc-icono { font-size: 44px; width: 76px; height: 76px; margin: 0 auto; display: flex; align-items: center;
  justify-content: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2c2c3e, #17171f);
  border: 1px solid rgba(255,215,130,.3); box-shadow: 0 4px 18px rgba(0,0,0,.5); }
.hc-nombre { font-weight: 900; font-size: 14px; margin: 10px 0 4px; letter-spacing: .5px; }
.hc-desc { font-size: 12px; color: var(--txt2); line-height: 1.4; min-height: 34px; }
.hc-record { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--oro); font-weight: 800;
  background: rgba(255,215,130,.1); border-radius: 999px; padding: 4px 12px; }
.hc-jugar { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 900; letter-spacing: 1px;
  color: #fff; background: linear-gradient(180deg,var(--rojo),var(--rojo-os));
  border-radius: 999px; padding: 9px 26px; box-shadow: 0 4px 14px rgba(255,53,64,.4); }
.hub-card .hc-diario { display: inline-block; margin-top: 10px; margin-left: 6px; font-size: 11px; color: var(--oro);
  border: 1px solid var(--oro); border-radius: 999px; padding: 8px 10px; vertical-align: middle; }
/* Tarjeta destacada: Parchís multijugador */
.hub-card.destacada { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  text-align: left; align-items: center; padding: 20px 18px;
  background: linear-gradient(#242430,#242430) padding-box,
              linear-gradient(135deg,#ffd782,#ff3540,#ffd782) border-box;
  background-size: auto, 220% auto;
  animation: hub-in .55s cubic-bezier(.2,.9,.3,1.2) backwards, hub-borde 5s linear infinite; }
@keyframes hub-borde { to { background-position: 0 0, 220% 0; } }
.hub-card.destacada .hc-icono { animation: hub-icono 3s ease-in-out infinite; margin: 0; }
@keyframes hub-icono { 0%,100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.08); } }
.hub-card.destacada .hc-nombre { font-size: 18px; margin-top: 0; }
.hub-card.destacada .hc-desc { min-height: 0; font-size: 13px; }
.hc-live { display: inline-block; margin: 8px 0 2px; font-size: 11px; font-weight: 900; color: #0b0b10;
  background: var(--ok); border-radius: 999px; padding: 5px 12px; letter-spacing: .5px; }
.hc-live i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #0b0b10;
  margin-right: 6px; animation: hub-blink 1.2s infinite; vertical-align: 1px; }
@keyframes hub-blink { 50% { opacity: .25; } }
@media (min-width: 700px) { .hub-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ---- Galería estilo Netflix: portadas cinematográficas ---- */
.hub-card { padding: 0; overflow: hidden; text-align: left; }
.hc-cover { position: relative; overflow: hidden; background: linear-gradient(135deg,#1a1214,#0d0d12); }
.hc-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  transition: transform .45s ease; }
.hub-card:active .hc-cover img { transform: scale(1.07); }
.hc-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(8,8,12,.6)); }
.hc-cuerpo { padding: 12px 14px 16px; }
.hc-cuerpo .hc-nombre { margin-top: 0; }
.hub-card.destacada { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr;
  padding: 0; text-align: left; align-items: stretch; }
.hub-card.destacada .hc-cover { min-height: 220px; }
.hub-card.destacada .hc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.hub-card.destacada .hc-cuerpo { padding: 20px 18px; align-self: center; }
.hc-live { z-index: 3; }

/* Moneda 3ND: rotación 3D suave de un lado a otro */
img[src*="token-3nd"]{animation:coinsway 3.2s ease-in-out infinite}
@keyframes coinsway{0%,100%{transform:perspective(300px) rotateY(-32deg)}50%{transform:perspective(300px) rotateY(32deg)}}
@media (prefers-reduced-motion:reduce){img[src*="token-3nd"]{animation:none}}