/* ========================================================================== */
/* =================== START HOW TO PLAY SECTION — SEND THIS ================= */
/* ========================================================================== */

.section__content--howto {
  position: relative;
  width: min(100%, 1580px);
  height: 100%;
  margin: 0 auto;
  padding:
    clamp(82px, 7vh, 108px)
    clamp(22px, 2vw, 34px)
    clamp(82px, 7vh, 108px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  transform: none;
  box-sizing: border-box;
}

.howto-shell {
  --howto-main-rgb: 98, 195, 255;
  --howto-secondary-rgb: 221, 114, 255;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(290px, 0.34fr) minmax(0, 1fr);
  gap: clamp(16px, 1.4vw, 24px);
  padding: clamp(18px, 1.5vw, 24px);
  border-radius: clamp(20px, 1.6vw, 30px);
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(7,12,25,0.94), rgba(4,8,17,0.96)),
    radial-gradient(circle at 78% 24%, rgba(var(--howto-main-rgb), 0.13), transparent 30%),
    radial-gradient(circle at 14% 76%, rgba(var(--howto-secondary-rgb), 0.10), transparent 28%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.025),
    0 0 24px rgba(0,0,0,0.2),
    0 0 54px rgba(var(--howto-main-rgb), 0.10);
  overflow: hidden;
}

.howto-shell::before,
.howto-shell::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.howto-shell::before {
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 18%,
      transparent 36%,
      transparent 68%,
      rgba(255,255,255,0.03) 100%);
}

.howto-shell::after {
  inset: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: calc(clamp(20px, 1.6vw, 30px) - 10px);
}

.howto-shell__scan {
  position: absolute;
  inset: -24% -28%;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(
      92deg,
      transparent 0%,
      transparent 40%,
      rgba(255,255,255,0.03) 47%,
      rgba(var(--howto-main-rgb), 0.16) 50%,
      rgba(255,255,255,0.08) 53%,
      transparent 60%,
      transparent 100%
    );
  filter: blur(14px);
  mix-blend-mode: screen;
}

.howto-shell.is-switching .howto-shell__scan {
  animation: howtoShellScan 720ms cubic-bezier(.16,.84,.22,1) 1;
}

/* ===== LINEA NEON sul bordo della card generale (SOLO mobile) =====
   Percorre il contorno della .howto-shell col COLORE del pulsante/accesso selezionato
   (--howto-title-glow-a/b cambiano per [data-access]). Due segmenti contrapposti (~180°). */
@property --howto-ring {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes howtoRing { to { --howto-ring: 360deg; } }

.howto-shell__border { display: none; }
@media (max-width: 768px) {
  .howto-shell__border {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    padding: 1.6px;
    overflow: hidden;                 /* ritaglia il layer ruotante alla forma (arrotondata) della card */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter:
      drop-shadow(0 0 5px rgba(var(--howto-title-glow-a, 98,195,255), 0.55))
      drop-shadow(0 0 12px rgba(var(--howto-title-glow-b, 221,114,255), 0.30));
    transition: filter 400ms ease;
  }
  /* COMPOSITOR: il conic è FISSO; a ruotare è questo layer via transform → gira sul
     COMPOSITOR (niente repaint/ricalcolo @property per-frame sul main thread = fluido
     su iOS). La mask statica del genitore lo ritaglia all'anello del bordo. Il layer è
     sovradimensionato (250%) e centrato così, ruotando, copre sempre tutta la card. */
  .howto-shell__border::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%;
    height: 250%;
    background: conic-gradient(
      from 0deg,
      transparent 0deg, transparent 34deg,
      rgba(var(--howto-title-glow-a, 98,195,255), 0.95) 64deg,
      #ffffff 78deg,
      rgba(var(--howto-title-glow-b, 221,114,255), 0.90) 96deg,
      transparent 126deg, transparent 214deg,
      rgba(var(--howto-title-glow-a, 98,195,255), 0.95) 244deg,
      #ffffff 258deg,
      rgba(var(--howto-title-glow-b, 221,114,255), 0.90) 276deg,
      transparent 306deg, transparent 360deg
    );
    transform: translate(-50%, -50%) rotate(0deg);
    animation: howtoRingSpin 6s linear infinite;
    will-change: transform;
  }
}
/* rotazione del layer (compositor) — equivalente visivo all'animazione dell'angolo */
@keyframes howtoRingSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.howto-nav,
.howto-panel {
  position: relative;
  z-index: 2;
  min-height: 0;
}

.howto-nav {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(16px, 1.2vw, 22px);
  padding: clamp(10px, 0.8vw, 14px);
  border-radius: clamp(16px, 1.2vw, 22px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02)),
    radial-gradient(circle at 0% 0%, rgba(var(--howto-secondary-rgb), 0.12), transparent 52%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}

.howto-nav__header {
  display: grid;
  gap: 10px;
  align-content: start;
}

.howto-kicker {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  padding: 0.45em 0.95em 0.38em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.56rem, 0.48vw + 0.12vh, 0.82rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.howto-main-title {
  margin: 0;
  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(1.55rem, 1.45vw + 1vh, 2.9rem);
  line-height: 0.92;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #eef6ff;
  text-shadow:
    0 0 6px rgba(255,255,255,0.68),
    0 0 16px rgba(var(--howto-main-rgb), 0.36),
    0 0 28px rgba(var(--howto-secondary-rgb), 0.22);
}

.howto-nav__grid {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  align-content: stretch;
  gap: 10px;
}

.howto-access-btn {
  position: relative;
  min-height: 0;
  height: 100%;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  /* su pulsanti molto bassi (schermi corti) il contenuto può superare la content-box:
     align-content:center centra comunque la riga invece di lasciarla in alto → numero e
     testo restano SEMPRE centrati verticalmente nel pulsante a ogni dimensione schermo */
  align-content: center;
  gap: 10px;
  text-align: left;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    radial-gradient(circle at 0% 50%, rgba(var(--howto-main-rgb), 0.10), transparent 56%);
  color: rgba(238,244,255,0.92);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease,
    color 180ms ease;
  overflow: hidden;
}

.howto-access-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
  opacity: 0;
  transform: translateX(-120%);
}

.howto-access-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--howto-main-rgb), 0.28);
  box-shadow:
    0 0 16px rgba(var(--howto-main-rgb), 0.10),
    inset 0 0 0 1px rgba(255,255,255,0.02);
}

.howto-access-btn:hover::before {
  opacity: 1;
  animation: howtoButtonSweep 700ms ease 1;
}

.howto-access-btn.is-active {
  border-color: rgba(var(--howto-main-rgb), 0.62);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)),
    linear-gradient(90deg, rgba(var(--howto-main-rgb), 0.16), rgba(var(--howto-secondary-rgb), 0.08)),
    radial-gradient(circle at 0% 50%, rgba(var(--howto-main-rgb), 0.34), transparent 62%);
  box-shadow:
    0 0 20px rgba(var(--howto-main-rgb), 0.22),
    0 0 42px rgba(var(--howto-main-rgb), 0.16),
    0 0 64px rgba(var(--howto-secondary-rgb), 0.12),
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 18px rgba(var(--howto-main-rgb), 0.08);
  color: rgba(255,255,255,1);
  transform: translateY(-1px) scale(1.012);
  overflow: hidden;
}

/* vecchio arco su ::after (conic animato via @property + pulse di filter = main thread):
   disattivato, sostituito dall'elemento .howto-access-btn__arc in compositor (sotto). */
.howto-access-btn.is-active::after { display: none; }

/* ARCO del pulsante attivo — COMPOSITOR (fluido su iOS).
   Elemento dedicato (iniettato via JS). Il conic è FISSO e a ruotare è il layer
   ::before via transform (compositor); il "pulse" è di SOLA opacità, con drop-shadow
   STATICO → niente animazione di @property né di filter sul main thread. */
.howto-access-btn__arc {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  padding: 1.5px;
  overflow: hidden;                 /* ritaglia il layer ruotante alla forma del pulsante */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter:                           /* STATICO (non animato) */
    drop-shadow(0 0 6px rgba(var(--howto-main-rgb), 0.34))
    drop-shadow(0 0 14px rgba(var(--howto-secondary-rgb), 0.14));
}
.howto-access-btn.is-active .howto-access-btn__arc {
  display: block;
  animation: howtoArcGlow 1.8s ease-in-out infinite;   /* pulse di sola opacità (compositor) */
}
.howto-access-btn__arc::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, transparent 36deg,
    rgba(var(--howto-main-rgb), 0.95) 64deg,
    rgba(255,255,255,0.98) 78deg,
    rgba(var(--howto-secondary-rgb), 0.92) 92deg,
    transparent 118deg, transparent 360deg
  );
  transform: translate(-50%, -50%) rotate(0deg);
  animation: howtoActiveArcSpin 2.4s linear infinite;
  will-change: transform;
}
@keyframes howtoActiveArcSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes howtoArcGlow { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }

.howto-access-btn.is-active::before {
  opacity: 1;
  animation:
    howtoButtonSweep 1.4s cubic-bezier(.22,1,.36,1) infinite,
    howtoActiveInnerFlicker 2.1s ease-in-out infinite;
}

.howto-access-btn.is-active .howto-access-btn__index {
  color: rgba(255,255,255,1);
  border-color: rgba(var(--howto-main-rgb), 0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)),
    radial-gradient(circle at 50% 50%, rgba(var(--howto-main-rgb), 0.22), transparent 78%);
  box-shadow:
    0 0 10px rgba(var(--howto-main-rgb), 0.22),
    0 0 24px rgba(var(--howto-main-rgb), 0.12),
    inset 0 0 8px rgba(255,255,255,0.06);
  transform: scale(1.08);
  position: relative;
  z-index: 3;
}

.howto-access-btn.is-active .howto-access-btn__label {
  color: rgba(255,255,255,1);
  letter-spacing: 0.11em;
  text-shadow:
    0 0 6px rgba(var(--howto-main-rgb), 0.48),
    0 0 14px rgba(var(--howto-main-rgb), 0.26),
    0 0 24px rgba(var(--howto-secondary-rgb), 0.14);
  transform: translateX(1px);
  position: relative;
  z-index: 3;
}

.howto-access-btn__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* dimensione FLUIDA e SEMPRE QUADRATA: scala con lo schermo e su pulsanti bassi
     non viene più schiacciata (prima height:30px in un'area da ~21px → rettangolo).
     !important per vincere sugli override a px fissi dei breakpoint. aspect-ratio +
     flex-shrink:0 mantengono il quadrato; align-self:center evita lo stiramento. */
  width: clamp(20px, 3.6vw, 34px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0;
  align-self: center !important;
  border-radius: 10px;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.58rem, 1.1vw, 0.78rem) !important;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    background 220ms ease;
}

.howto-access-btn.is-active .howto-access-btn__index {
  color: rgba(255,255,255,1);
  border-color: rgba(var(--howto-main-rgb), 0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)),
    radial-gradient(circle at 50% 50%, rgba(var(--howto-main-rgb), 0.22), transparent 78%);
  box-shadow:
    0 0 10px rgba(var(--howto-main-rgb), 0.22),
    0 0 24px rgba(var(--howto-main-rgb), 0.12),
    inset 0 0 8px rgba(255,255,255,0.06);
  transform: scale(1.08);
}

.howto-access-btn__label {
  min-width: 0;
  display: block;
  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(0.8rem, 0.62vw + 0.14vh, 1.02rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: manual;
  transition:
    transform 220ms ease,
    text-shadow 220ms ease,
    color 220ms ease,
    letter-spacing 220ms ease;
}

.howto-access-btn.is-active .howto-access-btn__label {
  color: rgba(255,255,255,1);
  letter-spacing: 0.11em;
  text-shadow:
    0 0 6px rgba(var(--howto-main-rgb), 0.48),
    0 0 14px rgba(var(--howto-main-rgb), 0.26),
    0 0 24px rgba(var(--howto-secondary-rgb), 0.14);
  transform: translateX(1px);
}

.howto-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(14px, 1vw, 18px);
  min-width: 0;
  padding: clamp(14px, 1vw, 18px);
  border-radius: clamp(16px, 1.2vw, 22px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.018)),
    radial-gradient(circle at 100% 0%, rgba(var(--howto-main-rgb), 0.10), transparent 48%);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
  min-height: 0;
  transition: gap 700ms cubic-bezier(.22,1,.36,1);
}

.howto-panel.is-media-focus {
  gap: 0;
}

.howto-panel {
  position: relative;
  overflow: hidden;
}

.howto-panel__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  max-height: 220px;
}
.howto-panel__counter {
  grid-column: 3;
  justify-self: end;
}

.howto-panel__title-wrap {
  min-width: 0;
}
.howto-panel__title-wrap {
  grid-column: 2;
  text-align: center;
}
.howto-panel__eyebrow {
  justify-self: center;
}

.howto-panel__title {
  text-align: center;
}
.howto-panel__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 1.8em;
  padding: 0.36em 0.9em 0.28em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.035);
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.5rem, 0.42vw + 0.12vh, 0.76rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(214,228,255,0.84);
}

.howto-panel__title {
  margin: 12px 0 0;
  font-family: "Space Age", "Orbitron", sans-serif;
  font-size: clamp(1.9rem, 2vw + 1vh, 4rem);
  line-height: 0.92;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #eef6ff;
  text-shadow:
    0 0 6px rgba(255,255,255,0.68),
    0 0 18px rgba(var(--howto-main-rgb), 0.36),
    0 0 30px rgba(var(--howto-secondary-rgb), 0.22);
  word-break: break-word;
}

.howto-panel__counter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.55em 0.95em 0.48em;
  border-radius: 999px;
  border: 1px solid rgba(var(--howto-main-rgb), 0.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    radial-gradient(circle at 50% 50%, rgba(var(--howto-main-rgb), 0.12), transparent 78%);
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.62rem, 0.52vw + 0.12vh, 0.88rem);
  letter-spacing: 0.16em;
  color: rgba(241,246,255,0.95);
  box-shadow:
    0 0 12px rgba(var(--howto-main-rgb), 0.08),
    inset 0 0 6px rgba(255,255,255,0.03);
}

.howto-panel__counter-separator {
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--howto-secondary-rgb),0.7), rgba(var(--howto-main-rgb),0.7));
  box-shadow: 0 0 8px rgba(var(--howto-main-rgb), 0.18);
}

.howto-panel__copy-wrap {
  position: relative;

  height: clamp(120px, 18vh, 210px);

  padding: clamp(10px, 0.7vw, 14px);

  border-radius: 18px;

  border: 1px solid rgba(255,255,255,0.06);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.03),
      rgba(255,255,255,0.018)
    ),
    radial-gradient(
      circle at 0% 0%,
      rgba(var(--howto-secondary-rgb), 0.08),
      transparent 46%
    );

  overflow: hidden;
}
.howto-panel__copy-wrap::before {
  content: "";

  position: absolute;

  left: 16px;
  right: 16px;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(var(--howto-main-rgb), 0.44),
      transparent
    );
}

.howto-panel__copy {
  width: 100%;
  height: 100%;

  margin: 0;

  padding: clamp(2px, 0.25vw, 5px);

  text-align: center;

  display: block;

  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;

  font-size: clamp(0.62rem, 0.34vw + 0.22vh, 0.88rem);

  line-height: 1.02;

  letter-spacing: 0.012em;

  color: rgba(238,244,255,0.96);

  text-shadow:
    0 0 3px rgba(255,255,255,0.16),
    0 0 12px rgba(var(--howto-main-rgb), 0.12);

  white-space: normal;

  overflow: hidden;

  box-sizing: border-box;
}

.howto-panel__word {
  display: inline-block;

  white-space: normal;

  margin-right: 0.28em;

  opacity: 0;

  filter:
    blur(6px)
    brightness(1.48);

  transform:
    translateX(var(--howto-word-offset, 0px))
    scale(1.018);

  animation:
    howtoWordExpandIn 430ms cubic-bezier(.16,.84,.22,1) forwards;

  animation-delay: var(--howto-word-delay, 0ms);
}

.howto-panel__word.is-hot {
  color: #ffffff;

  text-shadow:
    0 0 5px rgba(255,255,255,0.78),
    0 0 12px rgba(116,255,120,0.85),
    0 0 22px rgba(116,255,120,0.56),
    0 0 34px rgba(221,114,255,0.32);
}

@keyframes howtoWordExpandIn {
  0% {
    opacity: 0;

    filter:
      blur(6px)
      brightness(1.48);

    transform:
      translateX(var(--howto-word-offset, 0px))
      scale(1.02);
  }

  100% {
    opacity: 1;

    filter:
      blur(0)
      brightness(1);

    transform:
      translateX(0)
      scale(1);
  }
}

.howto-media-frame {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: clamp(18px, 1.2vw, 24px);
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015)),
    radial-gradient(circle at 50% 50%, rgba(var(--howto-main-rgb), 0.08), transparent 60%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 0 24px rgba(0,0,0,0.14);
  overflow: hidden;
  isolation: isolate;
  z-index: 3;
  transition:
  transform 0.7s cubic-bezier(.22,.61,.36,1),
  inset 0.7s cubic-bezier(.22,.61,.36,1),
  border-radius 0.7s cubic-bezier(.22,.61,.36,1),
  box-shadow 0.7s cubic-bezier(.22,.61,.36,1);
  transform-origin: center center;
  will-change: min-height, transform;
}

.howto-media-glow {
  position: absolute;
  inset: 12% 16%;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--howto-main-rgb), 0.18), transparent 54%);
  filter: blur(34px);
  opacity: 0.9;
}

.howto-media-ratio {
  position: relative;
  z-index: 2;
  width: min(100%, max(0px, calc(100% - 2px)));
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border-radius: inherit;
  transition:
    border-radius 520ms cubic-bezier(.22,1,.36,1),
    box-shadow 320ms ease;
  will-change: border-radius;
}

.howto-media-ratio::before,
.howto-media-ratio::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

.howto-media-ratio::before {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 18%, transparent 82%, rgba(255,255,255,0.04)),
    linear-gradient(90deg, rgba(255,255,255,0.03), transparent 18%, transparent 82%, rgba(255,255,255,0.03));
  mix-blend-mode: screen;
}

.howto-media-ratio::after {
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(var(--howto-main-rgb), 0.06) 50%, transparent 100%);
  opacity: 0;
}

.howto-shell.is-switching .howto-media-ratio::after {
  animation: howtoImageSweep 620ms ease 1;
}

.howto-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--howto-media-y, 50%);
  opacity: 1;
  filter:
    brightness(0.42)
    saturate(0.92)
    contrast(1.08)
    blur(10px);
  transform: scale(1);
  transition:
    transform 700ms cubic-bezier(.22,1,.36,1),
    filter 380ms ease,
    object-position 420ms cubic-bezier(.22,1,.36,1),
    opacity 320ms ease;
  will-change: transform, filter, object-position;
}

/* OVERLAY "NOISE" (webp) — su DESKTOP nascosto (l'immagine è nascosta dal blur).
   Su MOBILE (dove il blur è disattivato per la GPU) copre l'immagine in stato idle
   con un pattern di rumore leggero; a focus (immagine ingrandita) sfuma via. */
.howto-media-noise {
  position: absolute;
  inset: 0;
  z-index: 4;                 /* sopra l'img, sotto l'idle-hint (z-index 6) */
  pointer-events: none;
  border-radius: inherit;
  background-image: url("../assets/howto-noise.webp");
  background-repeat: repeat;
  background-size: 128px 128px;
  background: rgba(25, 25, 25, 0.9);
  opacity: 0;
  transition: opacity 300ms ease;
  display: none;
}
@media (max-width: 768px) {
  .howto-media-noise { display: block; opacity: 1; }
  .howto-panel.is-media-focus .howto-media-noise { opacity: 0; }
}

.howto-media-img.is-image-out {
  animation: howtoImageOut 220ms ease forwards;
}

.howto-media-img.is-image-in {
  animation: howtoImageIn 420ms cubic-bezier(.16,.84,.22,1) forwards;
}

.howto-panel__title.is-switch-out,
.howto-panel__copy.is-switch-out,
.howto-panel__eyebrow.is-switch-out,
.howto-panel__counter.is-switch-out {
  animation: howtoTextOut 180ms ease forwards;
}

.howto-panel__title.is-switch-in,
.howto-panel__copy.is-switch-in,
.howto-panel__eyebrow.is-switch-in,
.howto-panel__counter.is-switch-in {
  animation: howtoTextIn 420ms cubic-bezier(.16,.84,.22,1) forwards;
}

#how-to-play.is-active .howto-shell {
  animation: howtoCardIntro 1.4s cubic-bezier(.22,1,.36,1) both 0.06s;
}

@keyframes howtoCardIntro {
  0% {
    opacity: 0;
    transform: translateY(56px) scale(0.95);
    filter: blur(10px) brightness(1.14);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0) brightness(1);
  }
}

@keyframes howtoButtonSweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes howtoShellScan {
  0% {
    opacity: 0;
    transform: translateX(-36%) rotate(10deg);
  }
  18% { opacity: 0.95; }
  100% {
    opacity: 0;
    transform: translateX(36%) rotate(10deg);
  }
}

@keyframes howtoImageSweep {
  0% { opacity: 0; transform: translateY(18%); }
  25% { opacity: 0.28; }
  100% { opacity: 0; transform: translateY(-18%); }
}

@keyframes howtoImageOut {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0.42) saturate(0.92) contrast(1.08) blur(10px);
  }
  100% {
    opacity: 0;
    transform: scale(1.03);
    filter: brightness(0.42) saturate(0.92) contrast(1.08) blur(10px);
  }
}

@keyframes howtoImageIn {
  0% {
    opacity: 0;
    transform: scale(1.04);
    filter: brightness(0.42) saturate(0.92) contrast(1.08) blur(10px);
  }
  60% {
    opacity: 1;
    transform: scale(1.008);
    filter: brightness(0.42) saturate(0.92) contrast(1.08) blur(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0.42) saturate(0.92) contrast(1.08) blur(10px);
  }
}

/* Animazione SEMPLICE di cambio testo: spostamento dal basso verso l'alto + fade.
   Il testo uscente sale e svanisce; quello entrante arriva da sotto salendo a posto. */
@keyframes howtoTextOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px);
  }
}

@keyframes howtoTextIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes howtoActiveArcRotate {
  0% {
    --howto-active-arc-angle: 0deg;
  }
  100% {
    --howto-active-arc-angle: 360deg;
  }
}

@keyframes howtoActiveArcPulse {
  0%, 100% {
    opacity: 0.82;
    filter:
      drop-shadow(0 0 4px rgba(var(--howto-main-rgb), 0.28))
      drop-shadow(0 0 10px rgba(var(--howto-main-rgb), 0.18))
      drop-shadow(0 0 16px rgba(var(--howto-secondary-rgb), 0.10));
  }
  50% {
    opacity: 1;
    filter:
      drop-shadow(0 0 6px rgba(var(--howto-main-rgb), 0.40))
      drop-shadow(0 0 14px rgba(var(--howto-main-rgb), 0.28))
      drop-shadow(0 0 24px rgba(var(--howto-secondary-rgb), 0.16));
  }
}

@keyframes howtoActiveInnerFlicker {
  0%, 100% {
    opacity: 0.32;
  }
  50% {
    opacity: 0.68;
  }
}

/* ==================== HOW TO PLAY — MEDIA FOCUS EXPAND ==================== */

.howto-panel__head,
.howto-panel__copy-wrap {
  position: relative;
  z-index: 2;
  transition:
    opacity 260ms ease,
    transform 520ms cubic-bezier(.22,1,.36,1),
    filter 260ms ease,
    max-height 700ms cubic-bezier(.22,1,.36,1),
    padding-top 700ms cubic-bezier(.22,1,.36,1),
    padding-bottom 700ms cubic-bezier(.22,1,.36,1),
    margin-top 700ms cubic-bezier(.22,1,.36,1),
    margin-bottom 700ms cubic-bezier(.22,1,.36,1),
    border-width 520ms ease;
  overflow: hidden;
}

/* estado expandido */
.howto-panel.is-media-focus .howto-panel__head,
.howto-panel.is-media-focus .howto-panel__copy-wrap {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  filter: blur(3px);
}

.howto-panel.is-media-focus .howto-panel__head {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.howto-panel.is-media-focus .howto-panel__copy-wrap {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  overflow: hidden;
}

.howto-panel.is-media-focus .howto-media-frame {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  min-height: 100%;

  z-index: 5;

  transform: translateZ(0);

  animation: howtoMediaExpandSmooth 0.7s cubic-bezier(.22,.61,.36,1);
}

.howto-panel.is-media-focus .howto-media-ratio {
  border-radius: 22px;
  box-shadow:
    0 0 18px rgba(255,255,255,0.06),
    0 0 36px rgba(var(--howto-main-rgb), 0.18);
}

.howto-panel.is-media-focus .howto-media-img {
  transform: scale(1.015);
  filter: brightness(1) saturate(1) contrast(1.04) blur(0);
}

.howto-panel.is-media-focus .howto-media-glow {
  opacity: 1;
}

/* en móvil o táctil mejor no activarlo */
@media (hover: none), (pointer: coarse) {
  .howto-panel__head,
  .howto-panel__copy-wrap,
  .howto-media-frame,
  .howto-media-ratio,
  .howto-media-img {
    transition-duration: 0ms !important;
  }

  .howto-panel.is-media-focus .howto-panel__head,
  .howto-panel.is-media-focus .howto-panel__copy-wrap {
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
  }

  .howto-panel.is-media-focus .howto-media-frame,
  .howto-panel.is-media-focus .howto-media-ratio,
  .howto-panel.is-media-focus .howto-media-img {
    height: auto;
    min-height: 0;
    transform: none;
    filter: none;
  }
}

/* ==================== HOW TO PLAY — MEDIA IDLE OVERLAY ==================== */

.howto-media-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,8,17,0.18), rgba(4,8,17,0.22)),
    radial-gradient(circle at 50% 50%, rgba(var(--howto-main-rgb), 0.10), transparent 62%);
  opacity: 1;
  transition: opacity 320ms cubic-bezier(.22,1,.36,1);
  backdrop-filter: none;
}

.howto-media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 1;
  transition: opacity 280ms cubic-bezier(.22,1,.36,1);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04), transparent 24%);
}

.howto-media-ratio::before,
.howto-media-ratio::after {
  pointer-events: none;
}

.howto-media-idle-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1vw, 16px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 1;
  transition:
    opacity 260ms ease,
    transform 420ms cubic-bezier(.22,1,.36,1),
    filter 260ms ease;
  will-change: opacity, transform, filter;
  text-align: center;
}

.howto-media-idle-hint__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62em 1.15em 0.5em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(180deg, rgba(8,12,24,0.72), rgba(8,12,24,0.48)),
    radial-gradient(circle at 50% 50%, rgba(var(--howto-main-rgb), 0.14), transparent 78%);
  box-shadow:
    0 0 10px rgba(var(--howto-main-rgb), 0.12),
    0 0 24px rgba(var(--howto-secondary-rgb), 0.08),
    inset 0 0 8px rgba(255,255,255,0.04);
  font-family: "Orbitron", sans-serif;
  font-size: clamp(0.62rem, 0.48vw + 0.14vh, 0.9rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,248,255,0.96);
  text-shadow:
    0 0 6px rgba(var(--howto-main-rgb), 0.34),
    0 0 14px rgba(var(--howto-secondary-rgb), 0.16);
  white-space: nowrap;
}

.howto-media-idle-hint__cursor {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(8,12,24,0.68), rgba(8,12,24,0.42)),
    radial-gradient(circle at 50% 50%, rgba(var(--howto-main-rgb), 0.12), transparent 78%);
  box-shadow:
    0 0 10px rgba(var(--howto-main-rgb), 0.10),
    inset 0 0 6px rgba(255,255,255,0.04);
}

.howto-media-idle-hint__cursor::before {
  content: "☞";
  display: block;
  font-size: 1.22rem;
  line-height: 1;
  color: rgba(255,255,255,0.96);
  text-shadow:
    0 0 6px rgba(var(--howto-main-rgb), 0.34),
    0 0 12px rgba(var(--howto-secondary-rgb), 0.16);
  animation: howtoIdleCursorSide 1.2s ease-in-out infinite;
}

/* Stato "aperto" tramite classe (vale anche su touch, gestito da JS) */
.howto-panel.is-media-focus .howto-media-img {
  filter:
    brightness(1)
    saturate(1)
    contrast(1.04)
    blur(0);
}

.howto-panel.is-media-focus .howto-media-frame::before,
.howto-panel.is-media-focus .howto-media-frame::after {
  opacity: 0;
}

.howto-panel.is-media-focus .howto-media-idle-hint {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  filter: blur(6px);
}

/* Le stesse regole su HOVER solo in modalità desktop (allineato alla logica JS
   "coarse": tap-mode quando larghezza ≤768px o touch). Su touch il :hover resta
   "appiccicoso" dopo il tap: senza questo gate, chiudendo lo zoom con la X la
   patina blur e l'hint sparivano (il :hover li annullava). */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .howto-media-frame:hover .howto-media-img {
    filter:
      brightness(1)
      saturate(1)
      contrast(1.04)
      blur(0);
  }

  .howto-media-frame:hover::before,
  .howto-media-frame:hover::after {
    opacity: 0;
  }

  .howto-media-frame:hover .howto-media-idle-hint {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
    filter: blur(6px);
  }
}

@keyframes howtoIdleCursorSide {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@media (max-width: 1220px) {
  .howto-shell {
    grid-template-columns: minmax(260px, 0.38fr) minmax(0, 1fr);
  }

  .howto-nav__grid {
    gap: 8px;
  }

  .howto-access-btn {
    min-height: 58px;
    padding: 10px 12px;
  }
}

@media (max-width: 980px) {
  .section__content--howto {
    padding-top: clamp(76px, 6.8vh, 96px);
    padding-bottom: clamp(76px, 6.8vh, 96px);
  }

  .howto-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .howto-nav {
    gap: 14px;
  }

  .howto-nav__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .howto-panel__head {
    grid-template-columns: 1fr;
  }

  .howto-panel__counter {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .section__content--howto {
    padding-left: 14px;
    padding-right: 14px;
  }

  .howto-shell {
    padding: 14px;
    gap: 12px;
  }

  .howto-nav,
  .howto-panel {
    padding: 12px;
  }

  .howto-nav__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .howto-access-btn {
    min-height: 54px;
    border-radius: 14px;
  }

  .howto-panel__copy-wrap {
    min-height: 0;
  }

  .howto-panel__copy {
    font-size: 0.98rem;
  }
}

@media (max-width: 560px) {
  .howto-nav__header {
    gap: 8px;
  }

  .howto-main-title {
    font-size: clamp(1.35rem, 7vw, 2.15rem);
  }

  .howto-nav__grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .howto-access-btn {
    min-height: 50px;
    padding: 9px 10px;
    gap: 8px;
  }

  .howto-access-btn__index {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 0.72rem;
  }

  .howto-access-btn__label {
    font-size: 0.74rem;
  }

  .howto-panel__title {
    font-size: clamp(1.55rem, 8vw, 2.45rem);
  }
}

@media (max-height: 940px) {
  .section__content--howto {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .howto-shell {
    gap: 14px;
    padding: 14px;
    grid-template-columns: minmax(248px, 0.33fr) minmax(0, 1fr);
  }

  .howto-nav,
  .howto-panel {
    padding: 12px;
  }

  .howto-nav {
    gap: 12px;
  }

  .howto-nav__header {
    gap: 8px;
  }

  .howto-nav__grid {
    gap: 8px;
  }

  .howto-access-btn {
    min-height: 54px;
    padding: 9px 10px;
    gap: 8px;
    border-radius: 14px;
  }

  .howto-access-btn__index {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 0.72rem;
  }

  .howto-access-btn__label {
    font-size: clamp(0.74rem, 0.42vw + 0.14vh, 0.92rem);
  }

  .howto-panel {
    gap: 12px;
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .howto-panel__head {
    gap: 12px;
  }

  .howto-panel__title {
    margin-top: 10px;
    font-size: clamp(1.6rem, 1.38vw + 0.8vh, 3rem);
  }

  .howto-panel__copy-wrap {
    min-height: 0;
    padding: 12px 14px;
  }

  .howto-panel__copy {
    font-size: clamp(0.92rem, 0.52vw + 0.22vh, 1.04rem);
    line-height: 1.42;
  }
}

@media (max-height: 820px) {
  .section__content--howto {
    padding-top: 66px;
    padding-bottom: 66px;
  }

  .howto-shell {
    gap: 12px;
    padding: 12px;
    grid-template-columns: minmax(224px, 0.31fr) minmax(0, 1fr);
  }

  .howto-nav,
  .howto-panel {
    padding: 10px;
  }

  .howto-nav {
    gap: 10px;
  }

  .howto-main-title {
    font-size: clamp(1.35rem, 1.1vw + 0.8vh, 2.2rem);
  }

  .howto-nav__grid {
    gap: 7px;
  }

  .howto-access-btn {
    min-height: 48px;
    padding: 8px 9px;
    gap: 7px;
  }

  .howto-access-btn__index {
    width: 28px;
    height: 28px;
    font-size: 0.66rem;
  }

  .howto-access-btn__label {
    font-size: clamp(0.68rem, 0.34vw + 0.12vh, 0.82rem);
  }

  .howto-panel {
    gap: 10px;
  }

  .howto-panel__title {
    margin-top: 8px;
    font-size: clamp(1.42rem, 1.12vw + 0.62vh, 2.38rem);
  }

  .howto-panel__counter {
    gap: 8px;
    padding: 0.46em 0.82em 0.4em;
    font-size: clamp(0.54rem, 0.34vw + 0.12vh, 0.74rem);
  }

  .howto-panel__copy-wrap {
    padding: 10px 12px;
    border-radius: 16px;
  }

  .howto-panel__copy {
    font-size: clamp(0.86rem, 0.4vw + 0.18vh, 0.96rem);
    line-height: 1.34;
  }

  .howto-media-frame {
    border-radius: 16px;
  }
}

@media (max-height: 720px) {
  .section__content--howto {
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .howto-shell {
    gap: 10px;
    padding: 10px;
    grid-template-columns: minmax(206px, 0.29fr) minmax(0, 1fr);
  }

  .howto-nav,
  .howto-panel {
    padding: 9px;
  }

  .howto-kicker,
  .howto-panel__eyebrow {
    padding-left: 0.75em;
    padding-right: 0.75em;
    letter-spacing: 0.12em;
  }

  .howto-main-title {
    font-size: clamp(1.16rem, 0.92vw + 0.7vh, 1.86rem);
  }

  .howto-nav__grid {
    gap: 6px;
  }

  .howto-access-btn {
    min-height: 42px;
    padding: 7px 8px;
    gap: 6px;
    border-radius: 12px;
  }

  .howto-access-btn__index {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 0.58rem;
  }

  .howto-access-btn__label {
    font-size: clamp(0.6rem, 0.28vw + 0.1vh, 0.74rem);
    letter-spacing: 0.06em;
  }

  .howto-panel {
    gap: 8px;
  }

  .howto-panel__head {
    gap: 10px;
  }

  .howto-panel__title {
    margin-top: 6px;
    font-size: clamp(1.22rem, 0.92vw + 0.54vh, 1.96rem);
  }

  .howto-panel__counter {
    gap: 7px;
    padding: 0.38em 0.72em 0.34em;
    font-size: 0.62rem;
  }

  .howto-panel__counter-separator {
    width: 12px;
  }

  .howto-panel__copy-wrap {
    padding: 9px 10px;
    border-radius: 14px;
  }

  .howto-panel__copy {
    font-size: 0.82rem;
    line-height: 1.28;
  }

  .howto-media-frame {
    border-radius: 14px;
  }
}

@media (max-height: 640px) {
  .section__content--howto {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .howto-shell {
    gap: 8px;
    padding: 8px;
    grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
  }

  .howto-nav,
  .howto-panel {
    padding: 8px;
  }

  .howto-nav__header {
    gap: 6px;
  }

  .howto-kicker,
  .howto-panel__eyebrow {
    min-height: 1.55em;
    font-size: 0.5rem;
  }

  .howto-main-title {
    font-size: clamp(1.02rem, 0.8vw + 0.52vh, 1.58rem);
  }

  .howto-nav__grid {
    gap: 5px;
  }

  .howto-access-btn {
    min-height: 38px;
    padding: 6px 7px;
    gap: 5px;
    border-radius: 11px;
  }

  .howto-access-btn__index {
    width: 22px;
    height: 22px;
    font-size: 0.52rem;
  }

  .howto-access-btn__label {
    font-size: 0.56rem;
    letter-spacing: 0.04em;
  }

  .howto-panel {
    gap: 7px;
  }

  .howto-panel__head {
    gap: 8px;
  }

  .howto-panel__title {
    margin-top: 5px;
    font-size: clamp(1.05rem, 0.72vw + 0.46vh, 1.64rem);
  }

  .howto-panel__counter {
    gap: 6px;
    padding: 0.34em 0.62em 0.3em;
    font-size: 0.56rem;
  }

  .howto-panel__copy-wrap {
    padding: 8px 9px;
  }

  .howto-panel__copy {
    font-size: 0.76rem;
    line-height: 1.2;
  }
}

@media (max-width: 760px), (max-height: 560px) {
  .section__content--howto {
    align-items: stretch;
  }

  .howto-shell {
    height: auto;
  }

  .section#how-to-play {
    overflow: auto;
  }
}

/* NB: su mobile/touch manteniamo la patina coprente (overlay scuro + blur) a
   riposo come nella versione desktop; si pulisce solo quando l'immagine è in
   zoom (.is-media-focus). L'hint "TAP TO DISCOVER" resta visibile. */

/* ===== FIX FINAL HTP TEXT FIT + PREMIUM HOLOGRAPHIC TEXT STYLE ===== */

.howto-panel {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

.howto-panel__copy-wrap {
  position: relative;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;

  padding: clamp(10px, 0.75vw, 14px) !important;

  border-color: rgba(var(--howto-main-rgb), 0.13) !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.014)
    ),
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--howto-main-rgb), 0.09),
      transparent 46%
    ) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.022),
    inset 0 0 20px rgba(var(--howto-main-rgb), 0.035),
    0 0 18px rgba(var(--howto-main-rgb), 0.045);
}

/* DESKTOP: il contenitore testo ha altezza fissa (riga di griglia) e il blocco testo
   la riempie. Se il testo non riempie l'area, va CENTRATO verticalmente invece di
   partire dall'alto → si centra il contenuto DENTRO .howto-panel__copy. */
@media (min-width: 769px) {
  /* la wrap centra verticalmente il suo contenuto */
  .howto-panel__copy-wrap {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
  }
  /* la copy resta un blocco (testo a capo normale, full width) ma dimensionata sul
     CONTENUTO (non più height:100%) così, se è più corta del contenitore, la wrap la
     centra verticalmente invece di lasciarla in alto */
  .howto-panel .howto-panel__copy {
    height: auto !important;
    flex: 0 0 auto !important;
  }
}

.howto-panel__copy-wrap::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 1px;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(var(--howto-main-rgb), 0.48),
      rgba(255,255,255,0.62),
      rgba(var(--howto-main-rgb), 0.48),
      transparent
    );

  box-shadow:
    0 0 8px rgba(var(--howto-main-rgb), 0.26),
    0 0 16px rgba(var(--howto-main-rgb), 0.12);
}

.howto-panel__copy {
  width: 100%;
  height: auto !important;
  max-height: none !important;

  margin: 0;
  padding: clamp(2px, 0.2vw, 4px) !important;

  display: block !important;

  font-family: "Rajdhani", system-ui, sans-serif;
  font-weight: 700;

  font-size: clamp(0.68rem, 0.42vw + 0.24vh, 0.96rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.012em;

  text-align: center;
  white-space: normal;

  overflow: visible !important;

  color: rgba(224,238,255,0.88);

  text-shadow:
    0 0 2px rgba(0,0,0,0.95),
    0 0 7px rgba(var(--howto-main-rgb), 0.12);

  box-sizing: border-box;
}

/* Texto base: elegante, frío, nada arcoíris */
.howto-panel__word {
  display: inline !important;
  margin-right: 0 !important;
  white-space: normal !important;

  color: rgba(220,236,255,0.84);

  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 0 7px rgba(var(--howto-main-rgb), 0.10);

  transition:
    color 240ms ease,
    text-shadow 240ms ease,
    filter 240ms ease;
}

/* Pequeños acentos premium, muy controlados */
.howto-panel__word:nth-child(14n + 4),
.howto-panel__word:nth-child(19n + 8),
.howto-panel__word:nth-child(23n + 12) {
  color: rgba(245,250,255,0.98);

  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 0 5px rgba(255,255,255,0.34),
    0 0 12px rgba(var(--howto-main-rgb), 0.28);
}

/* Puntos de energía, pocos y finos */
.howto-panel__word:nth-child(31n + 6) {
  color: rgba(155,220,255,0.96);

  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 0 8px rgba(var(--howto-main-rgb), 0.34),
    0 0 18px rgba(var(--howto-main-rgb), 0.16);
}

/* Las palabras centrales de la animación sí pueden brillar más */
.howto-panel__word.is-hot {
  color: #ffffff !important;

  filter: brightness(1.12);

  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 0 5px rgba(255,255,255,0.52),
    0 0 12px rgba(var(--howto-main-rgb), 0.48),
    0 0 24px rgba(var(--howto-secondary-rgb), 0.20) !important;
}

/* Niente più animazione "scatter" per-parola all'ingresso: le parole compaiono
   subito e statiche; il movimento (dal basso verso l'alto + fade) lo fa il blocco
   intero via .howto-panel__copy.is-switch-in/out → animazione semplice. */
.howto-panel__word {
  opacity: 1 !important;
  transform: none !important;
  filter: none;
  animation: none !important;
}

/* Hover muy sutil, tipo panel activo */
.howto-panel__copy:hover .howto-panel__word {
  color: rgba(232,244,255,0.92);
}

.howto-panel__copy:hover .howto-panel__word:nth-child(14n + 4),
.howto-panel__copy:hover .howto-panel__word:nth-child(19n + 8),
.howto-panel__copy:hover .howto-panel__word:nth-child(23n + 12) {
  color: #ffffff;

  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 0 6px rgba(255,255,255,0.42),
    0 0 14px rgba(var(--howto-main-rgb), 0.34);
}

.howto-media-frame {
  min-height: 0 !important;
}
/* ===== HOW TO PLAY — UNIQUE NEON GRADIENT TITLES ===== */

.howto-shell {
  --howto-title-a: #ffffff;
  --howto-title-b: var(--howto-main-rgb);
  --howto-title-c: var(--howto-secondary-rgb);
  --howto-title-glow-a: 98, 195, 255;
  --howto-title-glow-b: 221, 114, 255;
}

/* 01 — EXPEDITIONS */
.howto-shell[data-access="1"] {
  --howto-title-gradient:
    linear-gradient(90deg, #ffffff 0%, #7fd7ff 38%, #dd72ff 100%);
  --howto-title-glow-a: 98, 195, 255;
  --howto-title-glow-b: 221, 114, 255;
}

/* 02 — MINERS */
.howto-shell[data-access="2"] {
  --howto-title-gradient:
    linear-gradient(90deg, #ffffff 0%, #74ff78 42%, #31d7ff 100%);
  --howto-title-glow-a: 116, 255, 120;
  --howto-title-glow-b: 49, 215, 255;
}

/* 03 — SPACESHIPS */
.howto-shell[data-access="3"] {
  --howto-title-gradient:
    linear-gradient(90deg, #ffffff 0%, #62c3ff 40%, #5d7cff 100%);
  --howto-title-glow-a: 98, 195, 255;
  --howto-title-glow-b: 93, 124, 255;
}

/* 04 — SPACESHOP */
.howto-shell[data-access="4"] {
  --howto-title-gradient:
    linear-gradient(90deg, #ffffff 0%, #ffd84d 42%, #ff8a2b 100%);
  --howto-title-glow-a: 255, 216, 77;
  --howto-title-glow-b: 255, 138, 43;
}

/* 05 — FLEETS */
.howto-shell[data-access="5"] {
  --howto-title-gradient:
    linear-gradient(90deg, #ffffff 0%, #8fffff 36%, #74ff78 100%);
  --howto-title-glow-a: 143, 255, 255;
  --howto-title-glow-b: 116, 255, 120;
}

/* 06 — MARKET */
.howto-shell[data-access="6"] {
  --howto-title-gradient:
    linear-gradient(90deg, #ffffff 0%, #ffdf7d 42%, #74ff78 100%);
  --howto-title-glow-a: 255, 223, 125;
  --howto-title-glow-b: 116, 255, 120;
}

/* 07 — RANKING */
.howto-shell[data-access="7"] {
  --howto-title-gradient:
    linear-gradient(90deg, #ffffff 0%, #ffef9a 38%, #ffd84d 100%);
  --howto-title-glow-a: 255, 239, 154;
  --howto-title-glow-b: 255, 216, 77;
}

/* 08 — REFERRALS */
.howto-shell[data-access="8"] {
  --howto-title-gradient:
    linear-gradient(90deg, #ffffff 0%, #dd72ff 42%, #ff68cc 100%);
  --howto-title-glow-a: 221, 114, 255;
  --howto-title-glow-b: 255, 104, 204;
}

/* 09 — SPACE ROULETTE */
.howto-shell[data-access="9"] {
  --howto-title-gradient:
    linear-gradient(90deg, #ffffff 0%, #ff68cc 34%, #62c3ff 100%);
  --howto-title-glow-a: 255, 104, 204;
  --howto-title-glow-b: 98, 195, 255;
}

/* 10 — JACKPOT */
.howto-shell[data-access="10"] {
  --howto-title-gradient:
    linear-gradient(90deg, #ffffff 0%, #ffd84d 32%, #ff2bbf 100%);
  --howto-title-glow-a: 255, 216, 77;
  --howto-title-glow-b: 255, 43, 191;
}

/* 11 — PVP GAMES */
.howto-shell[data-access="11"] {
  --howto-title-gradient:
    linear-gradient(90deg, #ffffff 0%, #ff4d6d 36%, #7d5cff 100%);
  --howto-title-glow-a: 255, 77, 109;
  --howto-title-glow-b: 125, 92, 255;
}

/* 12 — VAULT */
.howto-shell[data-access="12"] {
  --howto-title-gradient:
    linear-gradient(90deg, #ffffff 0%, #74ff78 34%, #ffd84d 100%);
  --howto-title-glow-a: 116, 255, 120;
  --howto-title-glow-b: 255, 216, 77;
}

.howto-panel__title {
  position: relative;

  color: transparent !important;

  background: var(--howto-title-gradient);
  background-size: 180% 100%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;

  text-shadow:
    0 0 2px rgba(255,255,255,0.42),
    0 0 10px rgba(var(--howto-title-glow-a), 0.44),
    0 0 22px rgba(var(--howto-title-glow-b), 0.30),
    0 0 42px rgba(var(--howto-title-glow-a), 0.16);

  filter:
    drop-shadow(0 0 4px rgba(var(--howto-title-glow-a), 0.28))
    drop-shadow(0 0 12px rgba(var(--howto-title-glow-b), 0.18));

  animation:
    howtoTitleGradientFlow 4.8s ease-in-out infinite,
    howtoTitleNeonBreath 2.8s ease-in-out infinite;
}

.howto-panel__title::after {
  content: attr(id);
  display: none;
}

.howto-panel__title-wrap {
  position: relative;
}

.howto-panel__title-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;

  width: min(72%, 360px);
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(var(--howto-title-glow-a), 0.72),
      rgba(255,255,255,0.9),
      rgba(var(--howto-title-glow-b), 0.72),
      transparent
    );

  box-shadow:
    0 0 8px rgba(var(--howto-title-glow-a), 0.42),
    0 0 18px rgba(var(--howto-title-glow-b), 0.24);

  opacity: 0.9;
  pointer-events: none;
}

@keyframes howtoTitleGradientFlow {
  0%, 100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

@keyframes howtoTitleNeonBreath {
  0%, 100% {
    filter:
      drop-shadow(0 0 4px rgba(var(--howto-title-glow-a), 0.24))
      drop-shadow(0 0 12px rgba(var(--howto-title-glow-b), 0.16));
  }

  50% {
    filter:
      drop-shadow(0 0 7px rgba(var(--howto-title-glow-a), 0.42))
      drop-shadow(0 0 20px rgba(var(--howto-title-glow-b), 0.26));
  }
}
/* ===== HOW TO PLAY — FIX TITLE GLOW CLIPPING ===== */

.howto-panel__head {
  overflow: visible;
  padding-bottom: 18px;
  margin-bottom: -8px;
}

.howto-panel__title-wrap {
  overflow: visible;
  padding-bottom: 16px;
}

.howto-panel__title {
  overflow: visible;
  padding-bottom: 0.18em;
}

.howto-panel__title-wrap::after {
  bottom: 2px;
}

/* ===== HOW TO PLAY — SCI-FI TITLE HUD FULL AREA ===== */

.howto-panel__title-wrap {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
}

/* alas laterales completas */
.howto-panel__title-wrap::before,
.howto-panel__title-wrap::after {
  content: "";
  position: absolute;
  top: 50%;

  width: clamp(90px, 14vw, 260px);
  height: 54px;

  pointer-events: none;
  opacity: 0.86;

  transform: translateY(-45%);

  background:
    radial-gradient(circle at 8% 50%, rgba(255,255,255,0.95) 0 2px, rgba(var(--howto-title-glow-a),0.72) 3px 6px, transparent 7px),
    radial-gradient(circle at 28% 22%, rgba(var(--howto-title-glow-a),0.95) 0 1.5px, transparent 4px),
    radial-gradient(circle at 58% 78%, rgba(var(--howto-title-glow-b),0.95) 0 1.5px, transparent 4px),
    radial-gradient(circle at 86% 50%, rgba(255,255,255,0.98) 0 2px, rgba(var(--howto-title-glow-b),0.78) 3px 7px, transparent 8px),

    linear-gradient(90deg, transparent 0%, rgba(var(--howto-title-glow-a),0.20) 8%, rgba(var(--howto-title-glow-a),0.72) 28%, rgba(255,255,255,0.88) 50%, rgba(var(--howto-title-glow-b),0.72) 72%, rgba(var(--howto-title-glow-b),0.20) 92%, transparent 100%),

    linear-gradient(90deg, transparent 0%, rgba(var(--howto-title-glow-a),0.45) 18%, transparent 46%, rgba(var(--howto-title-glow-b),0.42) 78%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(var(--howto-title-glow-b),0.38) 22%, transparent 52%, rgba(var(--howto-title-glow-a),0.38) 82%, transparent 100%),

    linear-gradient(135deg, transparent 0 47%, rgba(var(--howto-title-glow-a),0.50) 48% 50%, transparent 51%),
    linear-gradient(45deg, transparent 0 50%, rgba(var(--howto-title-glow-b),0.42) 51% 53%, transparent 54%);

  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 2px,
    72% 1px,
    66% 1px,
    96px 28px,
    88px 24px;

  background-position:
    center,
    center,
    center,
    center,
    center 50%,
    center 20%,
    center 80%,
    34% 24%,
    66% 78%;

  background-repeat: no-repeat;

  filter: none;

  animation:
    howtoHudFullPulse 3.2s ease-in-out infinite,
    howtoHudFullMove 3.8s ease-in-out infinite alternate;

  z-index: -1;
}

.howto-panel__title-wrap::before {
  right: calc(100% + clamp(16px, 1.6vw, 34px));
}

.howto-panel__title-wrap::after {
  left: calc(100% + clamp(16px, 1.6vw, 34px));
  transform: translateY(-45%) scaleX(-1);
}

/* títulos largos: HUDs más compactos */
.howto-shell[data-access="9"] .howto-panel__title-wrap::before,
.howto-shell[data-access="9"] .howto-panel__title-wrap::after,
.howto-shell[data-access="11"] .howto-panel__title-wrap::before,
.howto-shell[data-access="11"] .howto-panel__title-wrap::after {
  width: clamp(70px, 9vw, 160px);
}

/* en pantallas estrechas, quitamos HUDs para que no invadan */
@media (max-width: 1320px) {
  .howto-panel__title-wrap::before,
  .howto-panel__title-wrap::after {
    width: clamp(60px, 8vw, 140px);
  }
}

/* evita que el HUD derecho “pinte” glow rectangular sobre el panel */
.howto-panel__title-wrap::before,
.howto-panel__title-wrap::after {
  mix-blend-mode: screen;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    );
}

/* nodos pegados al título */
.howto-panel__title::before,
.howto-panel__title::after {
  content: "";
  display: block;

  position: absolute;
  top: 50%;

  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: rgba(255,255,255,0.96);

  box-shadow:
    0 0 6px rgba(var(--howto-title-glow-a),0.85),
    0 0 16px rgba(var(--howto-title-glow-b),0.46);

  transform: translateY(-48%);
  pointer-events: none;

  animation: howtoTitleNodePulse 1.8s ease-in-out infinite;
}

.howto-panel__title::before {
  left: -24px;
}

.howto-panel__title::after {
  right: -24px;
  animation-delay: 0.9s;
}

.howto-panel__title-wrap > .howto-panel__title {
  position: relative;
}

@keyframes howtoHudFullPulse {
  0%, 100% {
    opacity: 0.52;
  }

  50% {
    opacity: 0.92;
  }
}

/* movimiento rebote, sin corte */
@keyframes howtoHudFullMove {
  0% {
    background-position:
      center,
      center,
      center,
      center,
      center 50%,
      center 20%,
      center 80%,
      24% 24%,
      76% 78%;
  }

  100% {
    background-position:
      center,
      center,
      center,
      center,
      center 50%,
      center 20%,
      center 80%,
      44% 24%,
      56% 78%;
  }
}

@keyframes howtoTitleNodePulse {
  0%, 100% {
    opacity: 0.55;
    transform: translateY(-48%) scale(0.82);
  }

  50% {
    opacity: 1;
    transform: translateY(-48%) scale(1.18);
  }
}

@media (max-width: 980px) {
  .howto-panel__title-wrap::before,
  .howto-panel__title-wrap::after,
  .howto-panel__title::before,
  .howto-panel__title::after {
    display: none;
  }
}
/* ========================================================================== */
/* ==================== END HOW TO PLAY SECTION — SEND THIS ================== */
/* ========================================================================== */

/* ==========================================================================
   FASE 6 — HOW TO PLAY
   ========================================================================== */

/* (A) TUTTE LE LARGHEZZE: il container del testo e quello del media
   ("hover/touch to discover") hanno la STESSA altezza, proporzionale allo schermo.
   Le due righe inferiori del pannello diventano due tracce 1fr uguali; lo scroll
   del testo, se necessario, è interno (non taglia). In hover/focus il media si
   espande come prima (regole .is-media-focus invariate). */
.howto-panel {
  grid-template-rows: auto 1fr 1fr !important;
}
.howto-panel:not(.is-media-focus) .howto-panel__copy-wrap {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}
.howto-panel__copy {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* (B) MOBILE (≤768px) — tutto in una schermata, NIENTE scroll globale.
   Card superiore (nav) ~50% dello schermo, card inferiore (testo + media) ~50%. */
@media (max-width: 768px) {
  .section#how-to-play.is-active {
    overflow: hidden !important;
  }
  .section__content--howto {
    height: 100% !important;
    min-height: 0 !important;
    align-items: stretch !important;
    padding-top: clamp(40px, 6vh, 62px) !important;
    padding-bottom: clamp(18px, 3vh, 34px) !important;
  }
  .howto-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); /* nav 50% / panel 50% */
    height: 100% !important;
    min-height: 0;
    overflow: hidden;
  }

  /* ===== NAV (card superiore): compatta, testi e pulsanti più piccoli ===== */
  .howto-nav {
    min-height: 0;
    overflow: hidden;
    gap: 8px;
    padding: 10px;
  }
  .howto-nav__header { gap: 6px; }
  .howto-kicker {
    font-size: 0.54rem;
    padding: 0.3em 0.7em 0.26em;
  }
  .howto-main-title {
    font-size: clamp(0.95rem, 4.4vw, 1.5rem);
  }
  .howto-nav__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    height: 100%;
    align-content: stretch;
    gap: 6px;
  }
  .howto-access-btn {
    height: 100%;
    min-height: 0;
    padding: 4px 8px;
    gap: 6px;
    border-radius: 10px;
  }
  .howto-access-btn__index {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    font-size: 0.52rem;
  }
  .howto-access-btn__label {
    font-size: clamp(0.54rem, 2.5vw, 0.72rem);
    letter-spacing: 0.02em;
  }

  /* ===== PANEL (card inferiore): titolo (al posto eyebrow) + testo + media =====
     Le righe del pannello sono ereditate da (A): auto 1fr 1fr → il container del
     testo e quello del media hanno la stessa altezza, entrambi visibili senza scroll. */
  .howto-panel {
    gap: 6px !important;
    padding: 10px;
    min-height: 0;
    overflow: hidden;
  }
  .howto-panel__eyebrow {
    display: none !important;
  }
  /* head a griglia: titolo nello spazio a sinistra (centrato, senza sovrapporsi),
     counter a destra; entrambi centrati verticalmente sulla stessa riga, così il
     titolo è allineato verticalmente a howToPlayCurrent. */
  .howto-panel__head {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    max-height: none;
    padding-bottom: 0 !important;
    margin-bottom: 12px !important;   /* spazio tra titolo/counter e il container testi */
  }
  .howto-panel__title-wrap {
    grid-column: 1 !important;
    align-self: center !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-width: 0;
    min-height: 0 !important;
    padding: 0 !important;        /* il padding-bottom 16px sfasava il titolo in alto */
  }
  .howto-panel__counter {
    grid-column: 2 !important;
    align-self: center !important;
    justify-self: end !important;
  }
  .howto-panel__title {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible;
    text-overflow: ellipsis;
    letter-spacing: 0.04em;
    line-height: 1 !important;
    font-size: clamp(0.72rem, 3.6vw, 1.02rem) !important;
  }
  .howto-panel__copy {
    font-size: clamp(0.62rem, 2.7vw, 0.82rem) !important;
    line-height: 1.16 !important;
  }

  /* press & hold "tap to discover": il testo dell'altro container è nascosto
     (regole .is-media-focus) e il media occupa TUTTO lo spazio verticale della
     card; immagine a pieno riempimento (cover) per lo zoom/pan */
  .howto-panel.is-media-focus .howto-media-ratio {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* in zoom: immagine INTERA (aspetto naturale, niente crop), pan libero
     (touch-action none); il clamp la tiene dentro al pannello (article.howto-panel)
     senza scoprire spazio vuoto. Movimento 1:1 col dito. */
  .howto-media-frame {
    touch-action: none;
  }
  .howto-panel.is-media-zoom .howto-media-img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: none !important;   /* il pan segue il dito senza ritardo */
  }

  /* "TAP TO DISCOVER": hint visibile sul media anche su mobile */
  .howto-media-idle-hint {
    display: flex !important;
  }
}

/* X di chiusura (in alto a destra dell'immagine zoomata), stile neon.
   Visibile solo quando l'immagine è in zoom; un tap riporta a "tap to discover". */
.howto-media-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 9;
  width: 30px;
  height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(var(--howto-main-rgb, 98,195,255), 0.7);
  background:
    linear-gradient(180deg, rgba(8,12,24,0.62), rgba(8,12,24,0.42)),
    radial-gradient(circle at 50% 50%, rgba(var(--howto-main-rgb, 98,195,255), 0.18), transparent 78%);
  color: #eaf5ff;
  font-family: "Orbitron", sans-serif;
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow:
    0 0 8px rgba(var(--howto-main-rgb, 98,195,255), 0.55),
    0 0 18px rgba(var(--howto-secondary-rgb, 221,114,255), 0.3),
    inset 0 0 6px rgba(var(--howto-main-rgb, 98,195,255), 0.25);
  text-shadow:
    0 0 6px rgba(var(--howto-main-rgb, 98,195,255), 0.95),
    0 0 12px rgba(var(--howto-secondary-rgb, 221,114,255), 0.5);
}
.howto-panel.is-media-zoom .howto-media-close {
  display: flex;
}