/* Sayonara_Alice.exe — navbar module v30 */

.nav-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  color: #aef7ff;
  font-size: 1.2rem;
  line-height: 1;
  text-shadow: 0 0 8px rgba(0, 220, 255, .55);
  filter: drop-shadow(0 0 5px rgba(0, 191, 255, .38));
  animation: navIconIdle 3.6s ease-in-out infinite;
}

.logo-lily-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: #dffcff;
  font-size: 1.45rem;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.28), rgba(0,220,255,.16) 45%, transparent 72%);
  text-shadow: 0 0 10px rgba(0, 220, 255, .82), 0 0 22px rgba(64,114,255,.42);
  animation: logoLilyFloatV25 4.8s ease-in-out infinite;
}

.navbar .nav-links { gap: clamp(10px, 1.25vw, 22px); }
.navbar.compact { width: min(560px, calc(100vw - 28px)); }
.navbar.compact .nav-links { gap: clamp(12px, 1.5vw, 20px) !important; }
.navbar.compact .nav-link { width: 38px !important; height: 38px !important; }

.has-submenu { position: relative; }
.nav-submenu-button { border: 0; font: inherit; background: transparent; }

.nav-submenu {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  min-width: 178px;
  padding: .55rem;
  margin: 0;
  list-style: none;
  border-radius: 18px;
  border: 1px solid rgba(0, 191, 255, .22);
  background: linear-gradient(135deg, rgba(0, 0, 0, .74), rgba(0, 28, 44, .58));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 18px rgba(0, 191, 255, .12), 0 16px 36px rgba(0, 0, 0, .42);
  /* Closed means closed: invisible, uninteractive, out of the focus order and
     off the hit-test surface. `opacity: 0` alone left a 330x334 panel — 38% of
     a landscape phone viewport — sitting live over the page at z-index 26000,
     with its three links still reachable by Tab. `visibility` is transitioned
     with a zero-duration delay so it flips only after the fade has finished. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px) scale(.97);
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
  z-index: 26000;
  /* Il pannello non deve mai finire sotto il bordo inferiore. Il ramo touch
     aveva gia' questa protezione con i propri valori; qui la riceve anche il
     desktop, nella stessa forma, perche' una finestra bassa esiste anche li'.
     A 800px di altezza non vincola nulla -- il pannello e' alto 344 e il tetto
     vale 708 -- e ogni ramo piu' specifico piu' avanti nel file continua a
     sovrascrivere il proprio `max-height` come prima. */
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Keyboard and the JS class open the panel everywhere. `:focus-within` still
   works with a hidden panel because it is satisfied by the button itself,
   which lives outside it — the panel becomes visible first, and only then are
   its own links focusable. */
.has-submenu:focus-within .nav-submenu,
.has-submenu.submenu-open .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity .24s ease, transform .24s ease, visibility 0s;
}

/* Hover opens the panel only where hover is a real, reversible state. On
   Chrome Android `:hover` sticks after a tap, so this rule kept the panel
   fully live — opacity 1 and pointer-events auto — after the user had
   dismissed it. That was the transparent surface covering the section below. */
@media (hover: hover) and (pointer: fine) {
  .has-submenu:hover .nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
    transition: opacity .24s ease, transform .24s ease, visibility 0s;
  }
}

.nav-submenu a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .58rem .7rem;
  color: #dffaff;
  text-decoration: none;
  border-radius: 12px;
  font-size: .86rem;
  transition: background .2s ease, transform .2s ease, filter .2s ease;
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible {
  background: rgba(0, 191, 255, .10);
  transform: translateX(2px);
  filter: drop-shadow(0 0 8px rgba(0, 191, 255, .32));
  outline: none;
}

.submenu-icon {
  display: inline-flex;
  min-width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 191, 255, .08);
  border: 1px solid rgba(0, 191, 255, .18);
  color: #9ef4ff;
  font-size: .72rem;
}

.audio-toggle[aria-pressed="true"] .nav-mini-icon {
  color: #fff;
  text-shadow: 0 0 12px rgba(0, 245, 255, .95), 0 0 28px rgba(64,114,255,.52);
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .navbar { max-width: calc(100vw - 24px); }
  .navbar .nav-links { gap: 10px !important; }
  .nav-submenu { left: 0; transform: translateY(-6px) scale(.97); }
  .has-submenu:hover .nav-submenu,
  .has-submenu:focus-within .nav-submenu,
  .has-submenu.submenu-open .nav-submenu { transform: translateY(0) scale(1); }
}


/* ======================================================
   NAVBAR v31 — mobile submenu fit
====================================================== */
@media (hover: none) and (pointer: coarse) {
  .navbar { max-width: calc(100vw - 24px); }
  .has-submenu { position: static; }

  .nav-submenu {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 74px;
    width: auto;
    min-width: 0;
    max-width: calc(100vw - 24px);
    max-height: min(52vh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(.55rem, 2.6vw, .85rem);
    border-radius: 20px;
    transform: translateY(-8px) scale(.98);
    transform-origin: top center;
  }

  .has-submenu.submenu-open .nav-submenu,
  .has-submenu:focus-within .nav-submenu {
    transform: translateY(0) scale(1);
  }

  .nav-submenu a {
    min-height: 44px;
    padding: .72rem .78rem;
    font-size: clamp(.88rem, 3.5vw, 1rem);
  }

  .submenu-icon {
    min-width: 28px;
    height: 28px;
    font-size: .78rem;
  }
}

@media (max-width: 720px) and (hover: hover) and (pointer: fine) {
  .nav-submenu { max-width: min(260px, calc(100vw - 28px)); }
}


/* ======================================================
   v32 — restore beautiful blue lily + About/Sound submenu
====================================================== */
.logo-lily-mini { display: none !important; }

.logo-lily {
  position: relative;
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 7px rgba(0, 230, 255, .72)) drop-shadow(0 0 18px rgba(64, 114, 255, .34));
  animation: logoLilyFloatV25 4.8s ease-in-out infinite;
}

.logo-lily-svg { width: 40px; height: 40px; overflow: visible; }

.logo-lily-halo circle {
  fill: rgba(0, 210, 255, .06);
  stroke: rgba(0, 220, 255, .18);
  stroke-width: 1.2;
  transform-origin: 40px 40px;
  animation: logoHaloBreathV25 4.8s ease-in-out infinite;
}

.logo-petal {
  fill: url(#lilyPetalBlueV32);
  stroke: rgba(225, 255, 255, .82);
  stroke-width: 1.85;
  stroke-linejoin: round;
  transform-origin: 40px 40px;
  animation: logoPetalBloomV25 5.2s ease-in-out infinite;
}

.logo-lily-core {
  fill: url(#lilyCoreGlowV32);
  animation: logoCorePulseV25 2.9s ease-in-out infinite;
}

.navbar.compact .logo-short,
.navbar.compact .logo-lily { display: inline-flex; }

.navbar:not(.compact) .logo-lily { display: none; }

.navbar.compact .logo:hover .logo-lily,
.navbar.compact .logo:focus-visible .logo-lily,
.navbar.compact .logo.logo-proximity .logo-lily {
  filter: drop-shadow(0 0 11px rgba(0, 245, 255, .98)) drop-shadow(0 0 26px rgba(64, 114, 255, .54));
}

.submenu-audio-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .58rem .7rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #dffaff;
  font: inherit;
  text-align: left;
  transition: background .2s ease, transform .2s ease, filter .2s ease;
}

.submenu-audio-toggle:hover,
.submenu-audio-toggle:focus-visible {
  background: rgba(0, 191, 255, .10);
  transform: translateX(2px);
  filter: drop-shadow(0 0 8px rgba(0, 191, 255, .32));
  outline: none;
}

.submenu-audio-toggle[aria-pressed="true"] .submenu-icon {
  color: #fff;
  box-shadow: 0 0 12px rgba(0, 230, 255, .65);
}

.sound-state {
  margin-left: auto;
  font-size: .72rem;
  opacity: .72;
  color: #9ef4ff;
}

/* ======================================================
   v33 — readable animated SVG nav icons + submenu title fix + darker navbar contrast
====================================================== */
.navbar {
  background: linear-gradient(135deg, rgba(2, 11, 18, .82), rgba(0, 23, 34, .58)) !important;
  border-color: rgba(0, 210, 255, .18) !important;
}

.navbar.compact {
  background: linear-gradient(135deg, rgba(3, 14, 23, .86), rgba(0, 34, 50, .64)) !important;
  box-shadow: 0 0 22px rgba(0, 210, 255, .15), inset 0 0 18px rgba(0, 191, 255, .045), 0 16px 38px rgba(0, 0, 0, .42) !important;
}

.nav-mini-icon { display: none !important; }

.nav-svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #8ff4ff;
  filter: drop-shadow(0 0 5px rgba(0, 220, 255, .45)) drop-shadow(0 0 12px rgba(64, 114, 255, .18));
  transform-origin: center;
  animation: navSvgFloatV33 3.8s ease-in-out infinite, navSvgGlowV33 2.9s ease-in-out infinite;
}

.nav-link:hover .nav-svg,
.nav-link:focus-visible .nav-svg,
.nav-link.proximity-hot .nav-svg,
.has-submenu.submenu-open > .nav-link .nav-svg {
  color: #ffffff;
  animation: navSvgHoverV33 .62s ease-out both, navSvgGlowV33 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(0, 235, 255, .92)) drop-shadow(0 0 20px rgba(64, 114, 255, .38));
}

.nav-svg-spark { animation: navSparkV33 2.4s ease-in-out infinite; stroke-width: 2.4; }

.nav-svg-line {
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
  animation: navScanLineV33 3.2s ease-in-out infinite;
}
.scan-b { animation-delay: .25s; }

.nav-svg circle { animation: navNodePulseV33 2.8s ease-in-out infinite; transform-origin: center; }
.nav-svg rect { animation: navFramePulseV33 3.4s ease-in-out infinite; }

.nav-link-portal .nav-svg {
  color: #c8f6ff;
}

.nav-link-portal .portal-orbit {
  transform-box: fill-box;
  transform-origin: center;
  animation: navPortalOrbitV43 8s linear infinite;
}

/* niente doppia finestrella: se c'è un submenu aperto/hover, nascondo il vecchio tooltip del pulsante */
.navbar.compact .has-submenu:hover > .nav-link .nav-label,
.navbar.compact .has-submenu:focus-within > .nav-link .nav-label,
.navbar.compact .has-submenu.submenu-open > .nav-link .nav-label {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(-8px) !important;
  pointer-events: none !important;
}

.submenu-title {
  padding: .35rem .7rem .48rem;
  margin: 0 0 .25rem;
  color: #9ef4ff;
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .78;
  border-bottom: 1px solid rgba(0, 191, 255, .16);
  text-shadow: 0 0 8px rgba(0, 220, 255, .32);
}

.nav-submenu {
  background: linear-gradient(135deg, rgba(3, 15, 24, .86), rgba(0, 38, 56, .68)) !important;
  border-color: rgba(0, 210, 255, .26) !important;
}

@keyframes navSvgFloatV33 {
  0%, 100% { transform: translateY(0) scale(.98); }
  50% { transform: translateY(-1.5px) scale(1.035); }
}
@keyframes navSvgGlowV33 {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; }
}
@keyframes navSvgHoverV33 {
  0% { transform: translateY(0) scale(.96); }
  45% { transform: translateY(-2px) scale(1.16) rotate(-2deg); }
  100% { transform: translateY(0) scale(1.04); }
}
@keyframes navSparkV33 {
  0%, 72%, 100% { opacity: .25; transform: scale(.85); }
  82% { opacity: 1; transform: scale(1.20); }
}
@keyframes navScanLineV33 {
  0%, 44% { stroke-dashoffset: 25; opacity: .28; }
  56% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 25; opacity: .28; }
}
@keyframes navNodePulseV33 {
  0%, 100% { opacity: .76; }
  50% { opacity: 1; }
}
@keyframes navFramePulseV33 {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}

@keyframes navPortalOrbitV43 {
  to { transform: rotate(360deg); }
}


/* ======================================================
   v34 — submenu usability + mobile centering/adaptability
====================================================== */

/* Desktop: bridge between button and submenu so hover doesn't drop in the gap.
   It exists to keep a pointer journey alive, so it is inert by default and
   only becomes interactive where that journey is possible. On touch it was an
   invisible 110x18 strip hanging below the navbar that won the hit test over
   the page content on three of the four menu items. */
.has-submenu::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: max(110px, 100%);
  height: 18px;
  transform: translateX(-50%);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .has-submenu::after { pointer-events: auto; }
}

/* Keep dropdown open via class too, not only hover */
.has-submenu.submenu-open .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Better desktop dropdown layout */
.nav-submenu {
  box-sizing: border-box;
  overflow-x: hidden;
}

.submenu-title {
  text-align: center;
  padding: .38rem .7rem .55rem;
  margin: 0 0 .34rem;
  letter-spacing: .12em;
}

.nav-submenu a,
.submenu-audio-toggle {
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.submenu-icon {
  flex: 0 0 auto;
}

/* Mobile/tablet: centered modal-like dropdown with no horizontal overflow */
@media (hover: none) and (pointer: coarse) {
  html, body {
    overflow-x: hidden;
  }

  .has-submenu {
    position: static;
  }

  .has-submenu::after {
    display: none;
  }

  .nav-submenu {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: clamp(72px, 12vh, 96px) !important;

    width: min(92vw, 420px) !important;
    min-width: 0 !important;
    max-width: 92vw !important;

    max-height: min(56vh, 380px);
    overflow-y: auto;
    overflow-x: hidden;

    padding: clamp(.7rem, 3vw, 1rem) !important;
    border-radius: 22px !important;

    transform: translateX(-50%) translateY(-8px) scale(.98) !important;
    transform-origin: top center;
  }

  .has-submenu.submenu-open .nav-submenu,
  .has-submenu:focus-within .nav-submenu {
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }

  .submenu-title {
    text-align: center;
    padding: .35rem .4rem .65rem;
    margin-bottom: .45rem;
    font-size: clamp(.76rem, 3vw, .9rem);
  }

  .nav-submenu a,
  .submenu-audio-toggle {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    min-height: 46px;
    padding: .76rem .7rem;
    font-size: clamp(.88rem, 3.6vw, 1rem);
    white-space: normal;
  }

  .submenu-icon {
    min-width: 28px;
    height: 28px;
  }

  .sound-state {
    margin-left: .35rem;
  }
}

/* Desktop narrow windows: keep dropdown inside viewport */
@media (max-width: 720px) and (hover: hover) and (pointer: fine) {
  html, body {
    overflow-x: hidden;
  }

  .nav-submenu {
    width: min(88vw, 280px);
    min-width: 0;
    max-width: 88vw;
    overflow-x: hidden;
  }
}


/* ======================================================
   v35 — submenu title top-center + 3-column grid
====================================================== */

/* Tendina più larga e ordinata: titolo sopra, voci sotto in griglia */
.nav-submenu {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: .55rem .7rem;
  align-items: stretch;
  justify-items: stretch;

  min-width: min(460px, calc(100vw - 32px));
  padding: .78rem .85rem .85rem !important;
}

/* Titolo sempre in alto, centrale, su tutta la riga */
.submenu-title {
  grid-column: 1 / -1;
  text-align: center !important;
  justify-self: stretch;
  padding: .2rem .6rem .65rem !important;
  margin: 0 0 .18rem !important;

  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Ogni voce occupa una cella della griglia */
.nav-submenu li:not(.submenu-title) {
  min-width: 0;
}

/* Link/bottoni come piccole card centrali */
.nav-submenu a,
.submenu-audio-toggle {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .34rem;

  padding: .62rem .52rem !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.12;
}

/* Icone sopra al testo, più leggibili */
.submenu-icon {
  min-width: 26px;
  width: 26px;
  height: 26px;
  margin: 0;
}

.sound-state {
  margin-left: 0 !important;
  font-size: .68rem;
}

/* Se ci sono poche voci, la griglia resta visivamente centrata */
.nav-submenu li:nth-last-child(2):nth-child(2),
.nav-submenu li:nth-last-child(2):nth-child(2) ~ li {
  justify-self: center;
}

/* Desktop: submenu sotto il bottone, ma più stabile e leggibile */
.has-submenu.submenu-open .nav-submenu,
.has-submenu:hover .nav-submenu,
.has-submenu:focus-within .nav-submenu {
  transform: translateX(-50%) translateY(0) scale(1);
}

/* Mobile/tablet: massimo 2 colonne, poi 1 se strettissimo */
@media (hover: none) and (pointer: coarse) {
  .nav-submenu {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(92vw, 420px) !important;
    min-width: 0 !important;
    max-width: 92vw !important;
    gap: .6rem;
  }

  .submenu-title {
    font-size: clamp(.78rem, 3vw, .92rem);
    padding-bottom: .7rem !important;
  }

  .nav-submenu a,
  .submenu-audio-toggle {
    min-height: 54px;
    padding: .72rem .55rem !important;
  }
}

@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
  .nav-submenu {
    grid-template-columns: 1fr !important;
  }
}

/* Desktop con finestra piccola: 2 colonne per non uscire */
@media (max-width: 720px) and (hover: hover) and (pointer: fine) {
  .nav-submenu {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(88vw, 360px);
    min-width: 0;
  }
}


/* ======================================================
   v36 — adaptive submenu columns by item count
====================================================== */

/* Default remains 3 columns only for 3+ entries */
.nav-submenu.submenu-count-1 {
  grid-template-columns: minmax(140px, 220px) !important;
  min-width: min(250px, calc(100vw - 32px)) !important;
}

.nav-submenu.submenu-count-2 {
  grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
  min-width: min(340px, calc(100vw - 32px)) !important;
}

.nav-submenu.submenu-count-3 {
  grid-template-columns: repeat(3, minmax(92px, 1fr)) !important;
  min-width: min(460px, calc(100vw - 32px)) !important;
}

/* Mobile/tablet: 2 items stay 2 columns, 1 stays 1, 3+ becomes 2 columns */
@media (hover: none) and (pointer: coarse) {
  .nav-submenu.submenu-count-1 {
    grid-template-columns: 1fr !important;
    width: min(82vw, 280px) !important;
  }

  .nav-submenu.submenu-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(92vw, 360px) !important;
  }

  .nav-submenu.submenu-count-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(92vw, 420px) !important;
  }
}

@media (max-width: 390px) and (hover: none) and (pointer: coarse) {
  .nav-submenu.submenu-count-2,
  .nav-submenu.submenu-count-3 {
    grid-template-columns: 1fr !important;
  }
}


/* ======================================================
   v37 — prevent right-edge submenu overflow
====================================================== */

/* General safety: dropdowns never wider than viewport */
.nav-submenu {
  max-width: calc(100vw - 32px) !important;
  box-sizing: border-box;
}

/* JS-applied alignment classes */
.nav-submenu.align-right {
  left: auto !important;
  right: 0 !important;
  transform: translateY(-6px) scale(.97) !important;
}

.has-submenu:hover .nav-submenu.align-right,
.has-submenu:focus-within .nav-submenu.align-right,
.has-submenu.submenu-open .nav-submenu.align-right {
  transform: translateY(0) scale(1) !important;
}

.nav-submenu.align-left {
  left: 0 !important;
  right: auto !important;
  transform: translateY(-6px) scale(.97) !important;
}

.has-submenu:hover .nav-submenu.align-left,
.has-submenu:focus-within .nav-submenu.align-left,
.has-submenu.submenu-open .nav-submenu.align-left {
  transform: translateY(0) scale(1) !important;
}

/* About is almost always near the right edge: align it right by default on desktop */
.about-menu .nav-submenu {
  left: auto !important;
  right: 0 !important;
  transform: translateY(-6px) scale(.97) !important;
}

.about-menu:hover .nav-submenu,
.about-menu:focus-within .nav-submenu,
.about-menu.submenu-open .nav-submenu {
  transform: translateY(0) scale(1) !important;
}

/* About e' una matrice intenzionale di tre righe: due destinazioni,
   due azioni, due configurazioni. */
.about-menu .nav-submenu {
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  width: min(580px, calc(100vw - 32px));
  min-width: min(580px, calc(100vw - 32px)) !important;
}

/* In mobile/touch we still want centered modal behavior, not right-aligned */
@media (hover: none) and (pointer: coarse) {
  .about-menu .nav-submenu,
  .nav-submenu.align-right,
  .nav-submenu.align-left {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(-8px) scale(.98) !important;
  }

  .about-menu.submenu-open .nav-submenu,
  .about-menu:focus-within .nav-submenu,
  .has-submenu.submenu-open .nav-submenu.align-right,
  .has-submenu:focus-within .nav-submenu.align-right,
  .has-submenu.submenu-open .nav-submenu.align-left,
  .has-submenu:focus-within .nav-submenu.align-left {
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }

  .about-menu .nav-submenu {
    width: min(94vw, 580px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: min(calc(100dvh - 92px), 430px);
  }
}


/* ======================================================
   v38 — About submenu centered when navbar is compact
====================================================== */

/* In compact mode About must open centered under its own icon, not stuck to the left */
.navbar.compact .about-menu .nav-submenu {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 74px !important;
  width: min(580px, calc(100vw - 32px)) !important;
  transform: translateX(-50%) translateY(-6px) scale(.97) !important;
}

/* Open state: same centered positioning */
.navbar.compact .about-menu:hover .nav-submenu,
.navbar.compact .about-menu:focus-within .nav-submenu,
.navbar.compact .about-menu.submenu-open .nav-submenu {
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Safety: if viewport is very narrow, keep it inside the screen */
@media (max-width: 520px) and (hover: hover) and (pointer: fine) {
  .navbar.compact .about-menu .nav-submenu {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    width: min(94vw, 580px) !important;
    max-width: 94vw !important;
    transform: translateX(-50%) translateY(-6px) scale(.97) !important;
  }

  .navbar.compact .about-menu:hover .nav-submenu,
  .navbar.compact .about-menu:focus-within .nav-submenu,
  .navbar.compact .about-menu.submenu-open .nav-submenu {
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }
}

/* ======================================================
   v42 — About archive matrix + shared configuration row
====================================================== */

.language-row {
  min-width: 0;
}

.about-system-menu > .submenu-title {
  grid-column: 1 / -1;
}

.about-system-menu > li:not(.submenu-title) {
  min-width: 0;
}

.about-channel > a,
.about-channel > button {
  min-height: 50px;
  box-sizing: border-box;
}

.about-config-row {
  align-self: stretch;
}

.language-control {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(72px, 96px) auto;
  align-items: center;
  gap: .55rem;
  min-height: 58px;
  padding: .5rem .58rem;
  border-radius: 14px;
  background: rgba(0, 191, 255, .055);
  border: 1px solid rgba(0, 191, 255, .13);
  color: #dffaff;
}

.language-label {
  min-width: 0;
  font-size: .8rem;
}

.language-select,
.visual-intensity-menu-select {
  min-width: 0;
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  color-scheme: dark;
  color: #dffcff;
  background: rgba(0, 10, 16, .68);
  border: 1px solid rgba(0, 220, 255, .20);
  border-radius: 10px;
  padding: .38rem .45rem;
  outline: none;
  font: 800 .72rem/1 "Courier New", ui-monospace, monospace;
  letter-spacing: .04em;
  cursor: pointer;
}

.language-select:focus,
.visual-intensity-menu-select:focus {
  border-color: rgba(0, 230, 255, .48);
  box-shadow: 0 0 12px rgba(0, 220, 255, .16);
}

.language-flag {
  font-size: 1.05rem;
}

.visual-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, 104px);
  align-items: center;
  gap: .45rem;
  min-height: 58px;
  box-sizing: border-box;
  padding: .36rem .42rem .36rem .18rem;
  border: 1px solid rgba(0, 191, 255, .13);
  border-radius: 14px;
  background: rgba(0, 191, 255, .055);
}

.nav-submenu .visual-control-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  min-height: 46px;
  padding: .42rem .5rem;
  box-sizing: border-box;
  line-height: 1.18;
  white-space: nowrap;
}

.visual-control-link > span:last-child {
  min-width: 0;
}

.about-menu .nav-submenu {
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
}

.about-menu .language-row {
  grid-column: auto;
}

@media (max-width: 520px) {
  .about-menu .nav-submenu {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .about-system-menu {
    gap: .28rem;
  }

  .about-menu .about-config-row {
    grid-column: 1 / -1;
  }

  .language-control {
    grid-template-columns: 26px minmax(0, 1fr) minmax(104px, 128px) auto;
    grid-template-areas: "icon label select flag";
    gap: .35rem .42rem;
    padding: .4rem .46rem;
  }

  .language-control .submenu-icon { grid-area: icon; }
  .language-control .language-label { grid-area: label; font-size: .76rem; }
  .language-control .language-select { grid-area: select; }
  .language-control .language-flag { grid-area: flag; font-size: .9rem; }

  .visual-control {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 128px);
    gap: .42rem;
    padding: .34rem .42rem .34rem .18rem;
  }

  .nav-submenu .visual-control-link {
    min-height: 44px;
    padding: .38rem .46rem;
    font-size: .76rem;
  }

  .language-select,
  .visual-intensity-menu-select {
    min-height: 46px;
    font-size: .74rem;
  }
}

@media (max-width: 340px) {
  .about-menu .nav-submenu {
    top: 68px;
    max-height: calc(100dvh - 78px);
    padding: .48rem;
  }

  .about-channel > a,
  .about-channel > button {
    padding-inline: .44rem;
    font-size: .78rem;
  }

  .language-control .language-label {
    font-size: .7rem;
    line-height: 1.15;
    white-space: nowrap;
  }

  .language-control {
    grid-template-columns: 24px minmax(0, 1fr) minmax(92px, 112px) auto;
    gap: .28rem;
  }

  .visual-control {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 112px);
  }

  .nav-submenu .visual-control-link {
    font-size: .7rem;
    padding-inline: .36rem;
  }
}