/* Leonida Gang — floating cinematic navigation V2 (approved homepage mock-up).
   Decorative glass navigation is real HTML, not an image of buttons.
   Keep homepage photo and functional search; internal pages retain a legible header.
   Loaded after older desktop/mobile CSS so it intentionally wins the cascade. */
body.lg-home-floating-nav { position: relative; }

/* Header floats OVER the hero; the solid dark bar and bottom dividing line are gone. */
body.lg-home-floating-nav .header {
  position: absolute; inset: 0 0 auto; z-index: 95;
  display: grid;
  grid-template-columns: clamp(250px,20.5vw,355px) minmax(0,1fr) auto auto auto;
  align-items: center;
  gap: clamp(8px,.85vw,15px);
  width: 100%; min-width: 0; max-width: 100%;
  height: auto; min-height: 0;
  padding: clamp(18px,2vw,31px) clamp(22px,2.8vw,52px);
  background: transparent; border: 0; box-shadow: none;
  color: #fff7f3;
}
body.lg-home-floating-nav .header::after { display: none; }
body.lg-home-floating-nav .header .logo {
  display: flex; align-items: center; justify-self: start;
  min-width: 0; max-width: 100%; margin: 0; padding: 0;
}
body.lg-home-floating-nav .header .logo .lg-brand-picture {
  display: flex; max-width: 100%; overflow: visible;
}
body.lg-home-floating-nav .header .logo .lg-brand-picture img {
  display: block; width: 100%; max-width: 355px; max-height: none;
  height: auto; object-fit: contain;
  filter: drop-shadow(0 4px 2px rgba(14,10,29,.85))
          drop-shadow(0 9px 14px rgba(10,9,25,.55));
}
body.lg-home-floating-nav .header .logo:hover .lg-brand-picture img {
  filter: drop-shadow(0 5px 2px rgba(14,10,29,.9))
          drop-shadow(0 9px 18px rgba(250,116,165,.34));
}
/* One continuous glass navigation pill, with Histoire featured like the reference. */
body.lg-home-floating-nav .header .lg-nav-capsule {
  display: flex; align-items: center; justify-content: space-between;
  min-width: 0; width: 100%; gap: clamp(5px,.6vw,12px);
  padding: 5px clamp(7px,.8vw,15px);
  border-radius: 100px;
  background: rgba(24,22,47,.68);
  border: 1px solid rgba(246,207,229,.63);
  box-shadow: 0 8px 29px rgba(10,13,36,.23),
              inset 0 1px 0 rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(15px) saturate(125%);
  backdrop-filter: blur(15px) saturate(125%);
}
body.lg-home-floating-nav .header .mode-tabs {
  display: flex; flex: 0 0 auto; align-items: center; gap: 2px;
  margin: 0; padding: 0; border: 0; border-radius: 100px;
  background: transparent; box-shadow: none;
}
body.lg-home-floating-nav .header .mode-tabs a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 37px; margin: 0; padding: 8px clamp(9px,.75vw,14px);
  background: transparent; border: 1px solid transparent; border-radius: 100px;
  color: #fff0f0; white-space: nowrap; text-decoration: none;
  font: 900 clamp(12px,.88vw,15px)/1 'Barlow Condensed',Impact,sans-serif;
  letter-spacing: .035em; text-transform: uppercase;
}
body.lg-home-floating-nav .header .mode-tabs a:first-child {
  border-color: #f6a4c4;
  background: linear-gradient(115deg,rgba(133,54,130,.94),rgba(83,37,105,.9));
  box-shadow: inset 0 0 0 1px rgba(255,205,232,.16), 0 0 11px rgba(241,113,179,.18);
  color: #fff8f7;
}
body.lg-home-floating-nav .header .mode-tabs a:hover {
  background: #eaa6c1; border-color:#f7c2d9; color:#241728;
}
body.lg-home-floating-nav .header .nav-links {
  display: flex; flex: 1 1 auto; align-items: center; justify-content: space-around;
  min-width: 0; margin: 0; padding: 0; gap: clamp(2px,.3vw,9px);
  white-space: nowrap;
}
body.lg-home-floating-nav .header .nav-links a {
  display: inline-block; flex: 0 1 auto; margin: 0;
  padding: 10px clamp(2px,.3vw,7px);
  border: 0; border-radius: 9px;
  color: #fff7f1; text-decoration: none;
  font: 900 clamp(12px,.85vw,15px)/1 'Barlow Condensed',Impact,sans-serif;
  letter-spacing: .02em; text-transform: uppercase;
}
body.lg-home-floating-nav .header .nav-links a:hover,
body.lg-home-floating-nav .header .nav-links a:focus-visible {
  background: rgba(255,194,220,.18); color: #ffe3ed;
}
body.lg-home-floating-nav .header .g6-account-entry--legacy,
body.lg-home-floating-nav .header .menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; gap: 9px; white-space: nowrap;
  margin: 0; padding: 0 15px; height: 47px; min-height: 47px;
  border: 1px solid rgba(255,204,230,.7); border-radius: 100px;
  background: rgba(36,28,53,.72); color: #fff4f0;
  box-shadow: 0 8px 24px rgba(10,12,30,.22);
  font: 900 14px/1 'Barlow Condensed',Impact,sans-serif;
  letter-spacing:.04em; text-transform:uppercase;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.lg-home-floating-nav .header .g6-account-entry--legacy:hover,
body.lg-home-floating-nav .header .menu-btn:hover {
  background: rgba(119,64,111,.82); border-color:#ffd7e1; color:#fff;
}
body.lg-home-floating-nav .header .g6-lang-switch {
  display: flex; align-items:center; gap:8px; flex: 0 0 auto;
  width: auto; min-width: 0; max-width: none;
  height: 47px; margin: 0; padding: 5px 9px 5px 13px;
  border: 1px solid rgba(226,203,235,.50); border-radius: 100px;
  background: rgba(28,36,61,.68); color: #fff5f4;
  box-shadow: 0 8px 24px rgba(10,12,30,.22);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.lg-home-floating-nav .header .g6-lang-switch .g6-lang-label {
  display: inline-flex; align-items:center; flex: 0 0 auto;
  margin:0; color:#ffedf1; white-space:nowrap;
}
body.lg-home-floating-nav .header .g6-lang-switch .g6-lang-label span {
  display: inline; font-size:12px;
}
body.lg-home-floating-nav .header .g6-lang-switch select {
  display: block; min-width: 96px; max-width: 130px; height: 35px;
  margin: 0; padding: 5px 22px 5px 8px;
  border: 1px solid rgba(255,221,235,.49); border-radius: 9px;
  background: rgba(23,22,40,.76); color: #fff8f4;
  font: 700 12px 'Public Sans',Arial,sans-serif;
}
body.lg-home-floating-nav .header .menu-btn { padding: 0 13px; }
body.lg-home-floating-nav .header .menu-btn .g6-ui-icon { width: 17px; height: 17px; }
body.lg-home-floating-nav .header a:focus-visible,
body.lg-home-floating-nav .header button:focus-visible,
body.lg-home-floating-nav .header select:focus-visible {
  outline: 3px solid #ffc6df; outline-offset: 3px;
}

/* The photograph begins at viewport top, below the transparent floating controls. */
body.lg-home-floating-nav .hero {
  min-height: clamp(765px,48vw,850px);
  background-position: center 50%;
}
body.lg-home-floating-nav .hero::before {
  background:
    linear-gradient(90deg,rgba(11,17,31,.57),rgba(11,17,31,.26) 34%,rgba(11,17,31,.02) 73%),
    linear-gradient(180deg,rgba(10,15,33,.30),transparent 22%),
    linear-gradient(0deg,rgba(8,9,20,.27),transparent 49%);
}
body.lg-home-floating-nav .hero .hero-inner {
  padding-top: clamp(190px,13.5vw,260px);
  padding-bottom: clamp(35px,3.5vw,58px);
}

/* Tablet and small laptop: keep brand and useful controls; remaining links in Menu. */
@media (max-width: 1450px) and (min-width: 861px) {
  body.lg-home-floating-nav .header { grid-template-columns: clamp(225px,19vw,300px) minmax(0,1fr) auto auto auto; gap:8px; padding-inline:22px; }
  body.lg-home-floating-nav .header .nav-links {gap:2px}
  body.lg-home-floating-nav .header .nav-links a {font-size:12px;padding-inline:3px}
  body.lg-home-floating-nav .header .mode-tabs a {font-size:12px;padding-inline:8px}
  body.lg-home-floating-nav .header .g6-account-entry--legacy {padding-inline:10px}
  body.lg-home-floating-nav .header .g6-lang-switch {padding:5px 6px}
  body.lg-home-floating-nav .header .g6-lang-switch select {min-width:80px;max-width:106px}
}
@media (max-width: 1240px) and (min-width: 861px) {
  body.lg-home-floating-nav .header {grid-template-columns:minmax(220px,1fr) auto auto auto auto}
  body.lg-home-floating-nav .header .lg-nav-capsule {width:auto}
  body.lg-home-floating-nav .header .nav-links {display:none}
  body.lg-home-floating-nav .header .lg-brand-picture img {max-width:285px}
  body.lg-home-floating-nav .hero .hero-inner {padding-top:175px}
}

/* Mobile: logo LG, transparent photo overlay and native functional select.
   Preserve the existing five-control, single-row mobile grid. */
@media (max-width: 860px) {
  body.lg-home-floating-nav .header {
    position:absolute;top:0;left:0;right:0;z-index:95;
    display:grid;grid-template-columns:minmax(61px,1fr) max-content 36px 36px 36px;
    grid-template-areas:"brand modes account language menu";
    align-items:center;column-gap:5px;
    width:100%;max-width:100%;height:62px;min-height:62px;
    margin:0;padding:7px 10px;
    background:transparent;box-shadow:none;border:0;
  }
  body.lg-home-floating-nav .header .logo .lg-brand-picture img {
    width:56px;max-width:56px;height:46px;max-height:46px;
    filter:drop-shadow(0 3px 6px #090b20b0);
  }
  body.lg-home-floating-nav .header .lg-nav-capsule {
    grid-area:modes;display:inline-flex;justify-content:center;
    width:auto;max-width:100%;min-width:0;
    padding:2px;border:1px solid rgba(255,208,230,.51);
    border-radius:999px;background:rgba(22,19,40,.69);
  }
  body.lg-home-floating-nav .header .mode-tabs {
    display:flex;gap:2px;padding:0;border:0;
    background:transparent;margin:0;
  }
  body.lg-home-floating-nav .header .mode-tabs a {
    min-height:29px;padding:5px 8px;font-size:11px;
  }
  body.lg-home-floating-nav .header .nav-links { display:none; }
  body.lg-home-floating-nav .header .g6-account-entry--legacy,
  body.lg-home-floating-nav .header .menu-btn {
    width:36px;height:36px;min-width:36px;min-height:36px;
    justify-self:center;margin:0;padding:0;
    border-radius:10px;background:rgba(25,20,42,.76);
    font-size:0;
  }
  body.lg-home-floating-nav .header .g6-account-entry--legacy {grid-area:account}
  body.lg-home-floating-nav .header .g6-account-entry--legacy span {display:none}
  body.lg-home-floating-nav .header .g6-lang-switch {
    grid-area:language;width:36px;height:36px;min-height:36px;
    max-width:36px;margin:0;padding:0;justify-content:center;
    border-radius:10px;background:rgba(25,20,42,.76);
  }
  body.lg-home-floating-nav .header .g6-lang-switch .g6-lang-label {display:none}
  body.lg-home-floating-nav .header .g6-mobile-lang-code {display:block}
  body.lg-home-floating-nav .header .g6-lang-switch select {
    position:absolute;inset:0;opacity:0;z-index:2;
    display:block;width:100%;height:100%;min-width:0;max-width:none;
    border:0;padding:0;cursor:pointer;
  }
  body.lg-home-floating-nav .header .menu-btn {grid-area:menu}
  body.lg-home-floating-nav .hero {min-height:0}
  /* At <=760px the existing photo lives in .hero::before: never replace its background. */
  body.lg-home-floating-nav .hero .hero-inner {padding-top:22px}
}
@media (max-width: 360px) {
  body.lg-home-floating-nav .header {
    grid-template-columns:minmax(48px,1fr) max-content 32px 32px 32px;
    column-gap:4px;height:58px;min-height:58px;padding:6px 8px;
  }
  body.lg-home-floating-nav .header .logo .lg-brand-picture img {width:47px;max-width:47px;height:40px}
  body.lg-home-floating-nav .header .mode-tabs a {font-size:10px;padding-inline:6px;min-height:27px}
  body.lg-home-floating-nav .header .g6-account-entry--legacy,
  body.lg-home-floating-nav .header .menu-btn,
  body.lg-home-floating-nav .header .g6-lang-switch {
    width:32px;height:32px;min-width:32px;min-height:32px;max-width:32px;
  }
}
/* Under 760px the existing mobile composition renders its photo on ::before.
   The desktop text-contrast gradient must NOT cover or replace that photo. */
@media (max-width: 760px) {
  body.g6-home-inworld.lg-home-floating-nav .hero::before {
    background: #17212b url('/assets/gta6fan-home-scenes/01-boulevard-jour.webp') center / 100% 100% no-repeat;
  }
}
/* Non-home inner pages: modest, visible brand upgrade; no content overlay. */
@media (min-width: 1250px) {
  .g6-body .g6-header.g6-header--premium .g6-brand .lg-brand-picture img {
    width:clamp(170px,12vw,208px);max-height:62px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.lg-home-floating-nav .header a,
  body.lg-home-floating-nav .header button {transition:none}
}