/* Runtime visual compartido; los selectores #tm-hero mantienen literalmente la home. */
/* ── Gilda ───────────────────────────────────────────────────────────── */
  .hf__gilda {
    position: absolute;
    bottom: 40px;
    left: 46%;
    transform: translateX(-50%);
    z-index: 6;
  }
  .hf__gilda-sube {
    position: relative;
    opacity: 0;
  }
  .hf__gilda-boton {
    position: relative;
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
    /* Se habilita al aterrizar, como el resto del hero. */
    transition: transform .22s var(--tm-ease-out, ease), filter .22s var(--tm-ease-out, ease);
  }
  .hf__gilda-boton:hover,
  .hf__gilda-boton:focus-visible {
    transform: translateY(-3px) scale(1.03);
    filter: drop-shadow(0 16px 28px rgb(32 30 29 / 16%));
  }
  .hf__gilda-boton:hover .hf__gilda-pista,
  .hf__gilda-boton:focus-visible .hf__gilda-pista { opacity: 1; }
  .hf__gilda img {
    display: block;
    height: 114px;
    width: auto;
    filter: drop-shadow(0 12px 24px rgb(32 30 29 / 35%));
  }
  .hf__gilda-pulso {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    width: 154px;
    height: 34px;
    border-radius: 999px;
    background: radial-gradient(ellipse, rgb(246 200 81 / 24%) 0%, rgb(246 200 81 / 14%) 34%, rgb(246 200 81 / 0%) 72%);
    pointer-events: none;
    animation: hfPlatoLatido 1.8s ease-in-out infinite;
  }
  @keyframes hfPlatoLatido {
    0%, 100% { opacity: .55; transform: translateX(-50%) scale(.96); }
    50%      { opacity: 1; transform: translateX(-50%) scale(1.06); }
  }
  .hf__gilda-pista {
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: #7a2638;
    border: 1px solid var(--tm-saffron-mango, #F6C851);
    box-shadow: 0 0 12px rgb(122 38 56 / 36%), 0 0 24px rgb(122 38 56 / 14%), inset 0 1px 0 rgb(255 255 255 / 12%);
    font-family: var(--tm-font-display, 'Gobold', sans-serif);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tm-paper, #F5EFE6);
    text-shadow: 0 0 6px rgb(32 30 29 / 32%);
    white-space: nowrap;
    pointer-events: none;
    animation: hfMonedaParpadeo 1.2s ease-in-out infinite;
  }
  @keyframes hfMonedaParpadeo {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
  }

/* ══════ GILDA INVADERS ══════
     Global a propósito. Todo cuelga de ids únicos (#tm-hero, #gilda-*,
     #hero-*) que solo existen en este componente, y el juego los manipula por
     id desde un script en línea de la página. Con estilo escopado, mover el
     marcado de sitio dejaría estas ~40 reglas sin emparejar: el HTML seguiría
     siendo válido, la partida seguiría siendo jugable, y el hero se quedaría
     en modo tienda sin un solo aviso. Ya pasó al traerlo de index.astro. */

  /* Salvavidas: las nueve capas pixel arrancan invisibles pase lo que pase.
     Sin esto se ven dos botellas en un render prematuro o al volver por
     bfcache, porque quien las oculta de verdad es el JS. */
  #hero-bottle-pixel, #hero-bottle-pixel-r, #hero-bottle-pixel-c,
  #hero-glass-pixel, #hero-glass-pixel-r, #hero-glass-pixel-c,
  #hero-logo-pixel, #hero-logo-pixel-r, #hero-logo-pixel-c { opacity: 0; }

  #gilda-canvas {
    position: absolute;
    top: 10%;
    left: 30%;
    height: calc(100% - 60px);
    aspect-ratio: 2 / 3;
    width: auto;
    max-width: 32%;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s;
    cursor: none;
  }

  /* Velo de pantalla arcade: líneas de barrido y un tinte cálido arriba.
     Estuvo escrito desde el primer día pero no se vio nunca: el div traía
     `opacity:0` EN LÍNEA, y ningún selector, por específico que sea, gana a un
     estilo en línea. Ahora la opacidad de reposo vive aquí, con lo que la regla
     de `.arcade-on` sí manda. El JS no toca este elemento: se puede. */
  #gilda-arcade-overlay {
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    opacity: 0;
    /* Tres capas, de arriba abajo: la viñeta que hunde las esquinas como el
       cristal de un tubo, el tinte cálido del fósforo, y el barrido. Solo el
       barrido se desplaza —de ahí que tenga su propio `background-size`, que es
       lo que hace repetir el patrón y permite animar su posición—. */
    background:
      radial-gradient(ellipse 78% 82% at 50% 50%,
        rgba(32,30,29,0) 52%, rgba(32,30,29,.14) 78%, rgba(32,30,29,.42) 100%),
      linear-gradient(180deg, rgba(246,200,81,.08) 0%, rgba(246,200,81,0) 18%, rgba(152,52,72,.06) 100%),
      repeating-linear-gradient(180deg, rgba(32,30,29,.17) 0 2px, rgba(255,255,255,0) 2px 5px);
    background-size: 100% 100%, 100% 100%, 100% 5px;
    background-repeat: no-repeat, no-repeat, repeat;
    mix-blend-mode: multiply;
    transition: opacity .24s ease;
  }
  /* Las líneas bajan despacio: un ciclo entero por segundo es el desenganche
     de sincronía de un CRT, no un efecto de discoteca. */
  #tm-hero.arcade-on #gilda-arcade-overlay { animation: tmBarrido 1s linear infinite; }
  @keyframes tmBarrido {
    from { background-position: 0 0, 0 0, 0 0; }
    to   { background-position: 0 0, 0 0, 0 5px; }
  }
  @media (prefers-reduced-motion: reduce) {
    #tm-hero.arcade-on #gilda-arcade-overlay { animation: none; }
  }

  /* ── Modo arcade ─────────────────────────────────────────────────────── */
  #tm-hero.arcade-on #gilda-leaderboard-panel { opacity: 1; }
  #tm-hero.arcade-on #gilda-arcade-overlay { opacity: .92; }
  #tm-hero.arcade-on #gilda-hud-shell {
    background: rgba(32,30,29,.88) !important;
    border-color: #F6C851 !important;
    box-shadow: 0 0 0 2px rgba(246,200,81,.18), 0 14px 28px rgba(32,30,29,.24) !important;
  }
  #tm-hero.arcade-on #gilda-hud [data-arc-label] { color: rgba(245,239,230,.62) !important; }
  #tm-hero.arcade-on #gilda-score-val { color: #F6C851 !important; }
  #tm-hero.arcade-on #gilda-count-val,
  #tm-hero.arcade-on #gilda-round-val { color: #F5EFE6 !important; }
  #tm-hero.arcade-on #gilda-combo { color: #EB683F !important; }
  #tm-hero.arcade-on #gilda-exit { background: rgba(246,200,81,.12) !important; border-color: #F6C851 !important; color: #F6C851 !important; }
  #gilda-exit:hover { transform: translateY(-1px); background: #983448 !important; border-color: #983448 !important; color: #F5EFE6 !important; }
  #tm-hero.arcade-on #gilda-canvas { filter: drop-shadow(0 16px 28px rgba(32,30,29,.18)) saturate(1.08); }

  /* Glitch de las capas pixel. Los transforms base están duplicados en los
     keyframes: tocar el marcado obliga a tocarlos. */
  #tm-hero.arcade-on .hf__hueco-logo { filter: drop-shadow(0 6px 18px rgba(32,30,29,.14)); }
  #tm-hero.arcade-on #hero-logo-pixel { animation: tmLogoJitter 1.2s steps(2,end) infinite; }
  #tm-hero.arcade-on #hero-logo-pixel-r { opacity: .24 !important; animation: tmLogoRed 220ms steps(2,end) infinite; }
  #tm-hero.arcade-on #hero-logo-pixel-c { opacity: .2 !important; animation: tmLogoCyan 180ms steps(2,end) infinite; }
  #tm-hero.arcade-on #hero-bottle-pixel { animation: tmBottleJitter 1.1s steps(2,end) infinite; }
  #tm-hero.arcade-on #hero-bottle-pixel-r { opacity: .18 !important; animation: tmBottleRed 240ms steps(2,end) infinite; }
  #tm-hero.arcade-on #hero-bottle-pixel-c { opacity: .15 !important; animation: tmBottleCyan 190ms steps(2,end) infinite; }
  #tm-hero.arcade-on #hero-glass-pixel { animation: tmGlassJitter .95s steps(2,end) infinite; }
  #tm-hero.arcade-on #hero-glass-pixel-r { opacity: .18 !important; animation: tmGlassRed 220ms steps(2,end) infinite; }
  #tm-hero.arcade-on #hero-glass-pixel-c { opacity: .15 !important; animation: tmGlassCyan 170ms steps(2,end) infinite; }

  /* El logo pixel ya no lleva transform de reposo —lo coloca `top`/`left`—,
     así que el glitch parte de cero. Antes el reposo era
     `translateY(calc(-50% + 14px))` y había que repetirlo en cada fotograma o
     el logo pegaba un salto de 14px al arrancar la partida. */
  @keyframes tmLogoJitter {
    0%,100% { transform: translate(0, 0); }
    22% { transform: translate(1px, 0); }
    24% { transform: translate(-1px, -1px); }
    26% { transform: translate(0, 0); }
    62% { transform: translate(1px, 1px); }
    64% { transform: translate(0, 0); }
  }
  @keyframes tmLogoRed {
    0%,100% { transform: translate(0, 0); }
    50% { transform: translate(3px, 0); }
  }
  @keyframes tmLogoCyan {
    0%,100% { transform: translate(0, 0); }
    50% { transform: translate(-3px, 0); }
  }
  @keyframes tmBottleJitter {
    0%,100% { transform: translateX(-74%) translateY(-2px) scale(1.04); }
    25% { transform: translateX(-74%) translateY(-1px) scale(1.04); }
    27% { transform: translateX(-73%) translateY(-2px) scale(1.04); }
    29% { transform: translateX(-74%) translateY(-2px) scale(1.04); }
  }
  @keyframes tmBottleRed {
    0%,100% { transform: translateX(-74%) translateY(-2px) scale(1.04); }
    50% { transform: translateX(calc(-74% + 4px)) translateY(-2px) scale(1.04); }
  }
  @keyframes tmBottleCyan {
    0%,100% { transform: translateX(-74%) translateY(-2px) scale(1.04); }
    50% { transform: translateX(calc(-74% - 4px)) translateY(-2px) scale(1.04); }
  }
  @keyframes tmGlassJitter {
    0%,100% { transform: translateX(0) translateY(0) scale(1); }
    22% { transform: translateX(1px) translateY(0) scale(1); }
    24% { transform: translateX(-1px) translateY(1px) scale(1); }
    26% { transform: translateX(0) translateY(0) scale(1); }
  }
  @keyframes tmGlassRed {
    0%,100% { transform: translateX(0); }
    50% { transform: translateX(3px); }
  }
  @keyframes tmGlassCyan {
    0%,100% { transform: translateX(0); }
    50% { transform: translateX(-3px); }
  }

  /* ── El tablero por anchos ───────────────────────────────────────────── */
  @media (max-width: 1100px) {
    #gilda-canvas {
      left: 34% !important;
      height: calc(100% - 72px) !important;
      max-width: 34% !important;
    }
  }
  @media (max-width: 900px) {
    #gilda-canvas {
      top: 18% !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      height: 58% !important;
      width: auto !important;
      max-width: none !important;
    }
    #gilda-hud {
      top: 14px !important;
      left: 50% !important;
      transform: translateX(-50%) scale(.9) !important;
      transform-origin: top center;
      gap: 6px !important;
    }
    #gilda-hud-shell {
      flex-wrap: wrap !important;
      justify-content: center !important;
      width: min(100%, 620px) !important;
    }
    /* El copy se atenúa para que el tablero se lea encima. */
    #tm-hero.arcade-on .hf__copy {
      opacity: .34 !important;
      filter: saturate(.74) contrast(.92) brightness(1.08) !important;
    }
    #tm-hero.arcade-on .hf__bodegon {
      opacity: 1 !important;
      filter: none !important;
    }
  }
  @media (max-width: 640px) {
    /* Velo de luz: separa el tablero del fondo sin oscurecer la mesa. */
    #tm-hero.arcade-on::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(228,218,204,.14) 0%, rgba(228,218,204,.03) 34%, rgba(228,218,204,.24) 100%),
        radial-gradient(circle at 64% 78%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 34%);
      z-index: 7;
      pointer-events: none;
    }
    /* En vertical el copy queda justo debajo del canvas: impreso encima no se
       lee ni una cosa ni la otra. */
    #tm-hero.arcade-on .hf__lema,
    #tm-hero.arcade-on .hf__cta { opacity: 0 !important; }
    #tm-hero.arcade-on .hf__hueco-logo {
      opacity: .62 !important;
      filter: saturate(.7) brightness(1.08) contrast(.92) !important;
    }
    #tm-hero.arcade-on #hero-bottle-pixel,
    #tm-hero.arcade-on #hero-bottle-pixel-r,
    #tm-hero.arcade-on #hero-bottle-pixel-c,
    #tm-hero.arcade-on #hero-glass-pixel,
    #tm-hero.arcade-on #hero-glass-pixel-r,
    #tm-hero.arcade-on #hero-glass-pixel-c {
      filter: brightness(1.14) saturate(.82) !important;
    }
    #tm-hero.arcade-on #hero-bottle-shell { opacity: .62 !important; }
    #tm-hero.arcade-on #hero-glass-photo { opacity: 0 !important; }
    #tm-hero.arcade-on #gilda-plate { opacity: 0 !important; pointer-events: none !important; }
    #gilda-canvas {
      top: 104px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: auto !important;
      height: calc(100dvh - 124px) !important;
      aspect-ratio: 2 / 3 !important;
      max-height: calc(100dvh - 124px) !important;
      max-width: min(96vw, 400px) !important;
      z-index: 18 !important;
      filter: drop-shadow(0 14px 24px rgba(32,30,29,.18)) !important;
    }
    #gilda-hud {
      top: 8px !important;
      width: calc(100% - 20px) !important;
      transform: translateX(-50%) !important;
      z-index: 19 !important;
    }
    #gilda-hud-shell {
      width: 100% !important;
      gap: 6px !important;
      padding: 8px !important;
      background: rgba(228,218,204,.72) !important;
      backdrop-filter: blur(8px) !important;
      border-color: rgba(32,30,29,.16) !important;
      box-shadow: 0 10px 22px rgba(32,30,29,.1) !important;
    }
    #gilda-hud-shell > div { padding-right: 0 !important; border-right: none !important; }
    #gilda-hud-shell > div:nth-child(1),
    #gilda-hud-shell > div:nth-child(2),
    #gilda-hud-shell > div:nth-child(3) {
      min-width: 0 !important;
      flex: 1 1 calc(33.333% - 6px) !important;
      justify-content: center !important;
    }
    #gilda-hud-shell > div:nth-child(4) { flex: 1 1 100% !important; min-width: 0 !important; }
    #gilda-hud-shell > div:nth-child(5) { flex: 1 1 auto !important; }
    #gilda-exit { flex: 1 1 100% !important; width: 100% !important; margin-left: 0 !important; }
    #slot-0, #slot-1, #slot-2 { width: 40px !important; height: 40px !important; }
    #gilda-score-val { font-size: 18px !important; }
    #gilda-count-val,
    #gilda-round-val,
    #gilda-combo { font-size: 14px !important; }
    #gilda-plate-hint {
      top: -12px !important;
      padding: 5px 8px !important;
      font-size: 9px !important;
      letter-spacing: 1.2px !important;
    }
    #gilda-plate-pulse { width: 128px !important; }
  }
  @media (max-width: 420px) {
    #gilda-canvas {
      top: 108px !important;
      width: auto !important;
      height: calc(100dvh - 132px) !important;
      max-height: calc(100dvh - 132px) !important;
      max-width: min(96vw, 400px) !important;
      z-index: 18 !important;
    }
    #gilda-hud { width: calc(100% - 12px) !important; }
    #gilda-hud-shell { padding: 8px !important; gap: 6px !important; }
    #gilda-hud [data-arc-label] { font-size: 8px !important; letter-spacing: 1.2px !important; }
    #slot-0, #slot-1, #slot-2 { width: 34px !important; height: 34px !important; }
  }

/* La gilda conserva la misma sombra y los mismos breakpoints del hero original. */
.hf__gilda .hf__sombra {
  position: absolute;
  pointer-events: none;
}
.hf__sombra--gilda {
    bottom: -1px;
    left: 50%;
    width: 158px;
    height: 16px;
    transform: translateX(-34%) scaleX(1.08) scaleY(.66);
    background: radial-gradient(ellipse, rgb(32 30 29 / 42%) 0%, rgb(32 30 29 / 24%) 34%, rgb(32 30 29 / 10%) 58%, rgb(32 30 29 / 0%) 76%);
    mix-blend-mode: multiply;
    filter: blur(.45px);
  }

#gilda-mobile-controls { display: none; }
#go-ov[open] { display: flex; }
.gilda-go-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid rgba(32,30,29,.14);
  background: rgba(245,239,230,.76);
  font-family: 'Gobold', sans-serif;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #983448;
  cursor: pointer;
}
.gilda-go-link-button {
  min-height: 44px;
  padding: 11px 8px;
  border: 0;
  background: transparent;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: rgba(32,30,29,.58);
  cursor: pointer;
}
.gilda-go-input {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(32,30,29,.16);
  background: rgba(245,239,230,.74);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #201e1d;
}
.gilda-go-submit {
  padding: 11px 14px;
  border: 1px solid #F6C851;
  background: #F6C851;
  font-family: 'Gobold', sans-serif;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #201e1d;
  cursor: pointer;
}

@media (max-width: 900px) {
  .hf__gilda { left: 26%; bottom: 24px; }
  .hf__gilda img { height: 92px; }
}

@media (max-width: 640px) {
  #go-ov [data-go-card] {
    width: calc(100% - 20px) !important;
    padding: 18px 16px 14px !important;
  }
  #go-ov [data-go-stats] { gap: 4px !important; }
  #go-ov [data-go-actions] > * {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #go-ov [data-go-secondary-actions],
  #go-ov [data-go-form] { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hf__gilda-pulso,
  .hf__gilda-pista { animation: none; }
  .hf__gilda-pista { opacity: 1; }
  .hf__gilda-boton { transition: none; }
}