/* GTA6FAN v1.2.3 — Cinematic scenes for ALL public routes.
   Internal pages reuse verified local artwork. No changes to Leaflet layers,
   wiki filters, account workflows, SEO text or desktop navigation. */
:root {
  --g6-scene-ink:#191621;
  --g6-scene-ivory:#fff5ef;
  --g6-scene-rose:#f3a3ba;
}
.g6-page-mobile-heading,.g6-code-mobile-title { display:none; }

/* ------------------------------------------------------------------
   Legacy route headers (including the live interactive map).
   Their earlier background/shade combinations produced plain purple panels.
   Keep the headline in front of actual scenery and below the fixed header.
   ------------------------------------------------------------------ */
body .page-head.g6-page-scene,
body.g6-legacy-dark .page-head.g6-page-scene {
  --g6-scene-photo:url('/assets/gta6fan-home-scenes/05-marina-residentielle.webp');
  background-color:#201824;
  background-image:
    linear-gradient(90deg,rgba(12,12,22,.76),rgba(12,12,22,.42) 50%,rgba(12,12,22,.10)),
    linear-gradient(0deg,rgba(11,11,22,.48),transparent 70%),
    var(--g6-scene-photo);
  background-position:center,center,center;
  background-size:cover;
  background-repeat:no-repeat;
  isolation:isolate;
  display:flex;
  align-items:center;
  position:relative;
  min-height:clamp(275px,31vw,440px);
  padding-block:clamp(48px,5vw,78px);
  color:var(--g6-scene-ivory);
}
body .page-head.g6-page-scene::before,
body.g6-legacy-dark .page-head.g6-page-scene::before {
  content:none;
  background:none;
}
body .page-head.g6-page-scene > .container {position:relative;z-index:1;width:100%;min-width:0;}
body .page-head.g6-page-scene .breadcrumb {
  color:#ffc1c9;font-weight:800;text-shadow:0 2px 9px #070610a8;
}
body .page-head.g6-page-scene h1 {
  max-width:960px;
  color:var(--g6-scene-ivory);
  font-size:clamp(48px,6.2vw,92px);
  line-height:.96;
  text-shadow:0 3px 20px #0807117a;
  overflow-wrap:anywhere;
}
body .page-head.g6-page-scene p {
  max-width:720px;
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.65;
  color:#f8e9ed;
  text-shadow:0 2px 12px #070610b5;
}
body .page-head.g6-page-scene.g6-page-scene--map {--g6-scene-photo:url('/assets/gta6fan-home-scenes/04-marais-leonida.webp');}
body .page-head.g6-page-scene.g6-page-scene--codes {--g6-scene-photo:url('/assets/gta6fan-visuals/vice-city-controller.webp');}
body .page-head.g6-page-scene.g6-page-scene--solo {--g6-scene-photo:url('/assets/gta6fan-visuals/leonida-story.webp');}
body .page-head.g6-page-scene.g6-page-scene--multi {--g6-scene-photo:url('/assets/gta6fan-visuals/mangrove-boat.webp');}
body .page-head.g6-page-scene.g6-page-scene--universe {--g6-scene-photo:url('/assets/gta6fan-visuals/leonida-bay.webp');}
body .page-head.g6-page-scene.g6-page-scene--vehicles {--g6-scene-photo:url('/assets/gta6fan-visuals/street-car.webp');}
body .page-head.g6-page-scene.g6-page-scene--guides {--g6-scene-photo:url('/assets/gta6fan-home-scenes/02-ville-apres-pluie.webp');}
body .page-head.g6-page-scene.g6-page-scene--news {--g6-scene-photo:url('/assets/gta6fan-home-scenes/06-promenade-plage.webp');}
body .page-head.g6-page-scene.g6-page-scene--buy {--g6-scene-photo:url('/assets/gta6fan-home-scenes/03-nuit-vice-city.webp');}
body .page-head.g6-page-scene.g6-page-scene--search {--g6-scene-photo:url('/assets/gta6fan-home-scenes/05-marina-residentielle.webp');}
body .page-head.g6-page-scene.g6-page-scene--legal {--g6-scene-photo:url('/assets/gta6fan-visuals/skyline-gold.webp');}

/* Editorial listing banners: remove the almost-opaque purple veil. */
.g6-body #g6-main .g6-hero {
  position:relative;
  color:#fff5ef;
  background-position:center 50%;
  background-size:cover;
}
.g6-body #g6-main .g6-hero::before {
  background:linear-gradient(90deg,rgba(15,11,23,.70),rgba(15,11,23,.39) 56%,rgba(15,11,23,.08));
}
.g6-body #g6-main .g6-hero h1 {text-shadow:0 3px 22px #0905137a;}

/* Front-door headers for shop, mobile player, wiki and member hub. */
.g6-body #g6-main .g6m-market-hero {
  isolation:isolate;
  color:#fff4ee;
  background:#1c1924 url('/assets/gta6fan-home-scenes/03-nuit-vice-city.webp') center 54%/cover no-repeat;
}
.g6-body #g6-main .g6m-market-hero::before {
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(15,13,27,.74),rgba(15,13,27,.25) 74%),
    linear-gradient(0deg,rgba(15,13,27,.34),transparent 70%);
}
.g6-body #g6-main .g6m-market-hero .g6m-market-container {position:relative;z-index:1;}
.g6-body #g6-main .g6m-market-hero h1 {text-shadow:0 3px 18px #080512b2;}

body .g6-player-hero {
  isolation:isolate;
  min-height:clamp(255px,31vw,390px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:#1c1924 url('/assets/gta6fan-home-scenes/02-ville-apres-pluie.webp') center 52%/cover no-repeat;
}
body .g6-player-hero::before {
  background:linear-gradient(90deg,rgba(12,11,24,.71),rgba(12,11,24,.23) 80%),
             linear-gradient(0deg,rgba(12,11,24,.38),transparent);
  opacity:1;
}
body .g6-player-hero h1 {color:#fff5ef;text-shadow:0 3px 18px #080613c9;}

.g6-body #g6-main .g6-wiki-home-hero-shade {
  background:linear-gradient(90deg,rgba(17,13,25,.70),rgba(17,13,25,.34) 60%,rgba(17,13,25,.09)),
             linear-gradient(0deg,rgba(14,12,23,.28),transparent 65%);
}
.g6-body #g6-main .g6-portal-hero-shade {
  background:linear-gradient(90deg,rgba(17,13,25,.72),rgba(17,13,25,.37) 55%,rgba(17,13,25,.10));
}
.g6-body #g6-main .g6-wiki-catalogue-page .g6-wiki-hero-shade {
  background:linear-gradient(90deg,rgba(17,13,25,.67),rgba(17,13,25,.34) 58%,rgba(17,13,25,.09)),
             linear-gradient(0deg,rgba(17,13,25,.24),transparent);
}
.g6-body #g6-main .g6-portal-hero h1,
.g6-body #g6-main .g6-wiki-hero h1,
.g6-body #g6-main .g6-wiki-home-hero h1 {text-shadow:0 2px 18px #060411ad;}

/* Article detail headers get visual identity without repeating the page-cover
   image or masking its content. The photo is from the category's local artwork. */
.g6-body #g6-main .g6-claude-detail-header {
  --g6-detail-photo:url('/assets/gta6fan-visuals/marina-day.webp');
  isolation:isolate;
  position:relative;
  overflow:hidden;
  background-color:#211c2b;
  background-image:linear-gradient(90deg,rgba(15,12,25,.87),rgba(15,12,25,.60) 63%,rgba(15,12,25,.24)),
                   var(--g6-detail-photo);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(244,167,187,.34);
  border-radius:9px;
  padding:clamp(25px,3.5vw,48px);
  margin-bottom:24px;
}
.g6-body #g6-main .g6-claude-detail-header h1,
.g6-body #g6-main .g6-claude-detail-header>p {color:#fff6ed;text-shadow:0 2px 14px #0b0918b3;}
.g6-body #g6-main .g6-claude-detail-header>p {margin-bottom:0;}

/* Working map stays a functional map. Only its header and surrounding
   toolbar take the editorial palette; Leaflet tiles and gestures unchanged. */
body.g6-legacy-map .g6-map-top {
  background:#261f2c;
  color:#fff5ed;
  border-bottom:2px solid #e58fa7;
}
body.g6-legacy-map .g6-map-top label,
body.g6-legacy-map .g6-map-top .g6-map-label {color:#fff5ed;}

/* ------------------------------------------------------------------
   Smartphone: show the entire landscape first, with a SHORT title
   positioned on the photograph, description and tools immediately below.
   ------------------------------------------------------------------ */
@media(max-width:760px) {
  body .page-head.g6-page-scene,
  body.g6-legacy-dark .page-head.g6-page-scene {
    min-height:clamp(310px,82vw,380px);
    align-items:flex-end;
    padding:24px 17px 26px;
    background-position:center,center,center;
    background-size:cover;
  }
  body .page-head.g6-page-scene > .container {width:100%;margin:0;max-width:100%;}
  body .page-head.g6-page-scene h1 {font-size:clamp(40px,11.6vw,61px);margin:9px 0 12px;line-height:.95;}
  body .page-head.g6-page-scene p {font-size:14px;line-height:1.5;margin:0;max-width:52ch;}
  body.g6-legacy-map .page-head.g6-page-scene h1 {font-size:clamp(42px,11.3vw,60px);}

  /* Current g6-mobile-image-layout-v119 provides the ratio-preserving
     photographic <section>::before. These declarations only update
     scene assets and bring the headline onto that image. */
  .g6-body #g6-main .g6-hero {
    --mobile-hero-image:url('/assets/gta6fan-home-scenes/05-marina-residentielle.webp');
    --mobile-hero-ratio:1672 / 941;
    background:#1a1722;
    background-image:none;
    min-height:0;
    padding:0 0 22px;
  }
  .g6-body #g6-main .g6-hero--rose {--mobile-hero-image:url('/assets/gta6fan-home-scenes/02-ville-apres-pluie.webp');}
  .g6-body #g6-main .g6-hero--sun {--mobile-hero-image:url('/assets/gta6fan-home-scenes/06-promenade-plage.webp');}
  .g6-body #g6-main .g6-hero--sea {--mobile-hero-image:url('/assets/gta6fan-home-scenes/04-marais-leonida.webp');}
  .g6-body #g6-main .g6-hero--sand {--mobile-hero-image:url('/assets/gta6fan-home-scenes/05-marina-residentielle.webp');}
  .g6-body #g6-main .g6-hero--ink {--mobile-hero-image:url('/assets/gta6fan-home-scenes/03-nuit-vice-city.webp');}
  .g6-body #g6-main .g6-hero::before {
    display:block;
    position:relative;
    inset:auto;
    width:100%;
    aspect-ratio:1672 / 941;
    background-color:#181824;
    background-image:linear-gradient(0deg,rgba(13,11,25,.79),rgba(13,11,25,.07) 65%,transparent),var(--mobile-hero-image);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    box-shadow:none;
  }
  .g6-body #g6-main .g6-page-mobile-heading {
    display:flex;
    position:relative;
    z-index:2;
    width:100%;
    height:56.28vw;
    margin-top:-56.28vw;
    padding:15px 18px 17px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    color:#fff6ed;
    pointer-events:none;
  }
  .g6-body #g6-main .g6-page-mobile-heading .g6-eyebrow {
    margin:0 0 6px;
    font-size:clamp(11px,2.8vw,14px);
    color:#ffb3c5;
    text-shadow:0 2px 9px #0b0918cf;
  }
  .g6-body #g6-main .g6-page-mobile-heading h1 {
    margin:0;
    max-width:100%;
    font:400 clamp(38px,10vw,58px)/.97 Anton,Impact,sans-serif;
    color:#fff5ec;
    text-transform:uppercase;
    text-shadow:0 3px 16px #0b0918d6;
    overflow-wrap:anywhere;
  }
  .g6-body #g6-main .g6-hero > .g6-container > .g6-eyebrow,
  .g6-body #g6-main .g6-hero > .g6-container > h1 {display:none;}
  .g6-body #g6-main .g6-hero > .g6-container {
    padding-top:18px;
    min-width:0;
  }
  .g6-body #g6-main .g6-hero > .g6-container > p:not(.g6-eyebrow) {
    margin:0;
    font-size:15px;
    line-height:1.55;
    color:#f2e4e9;
  }

  /* Cheat codes: existing photo was BELOW a very tall purple text panel.
     Elevate the same artwork into the hero and keep counters below. */
  .g6-body #g6-main .g6-code-hero {
    display:block;
    position:relative;
    overflow:hidden;
    min-height:0;
    background:#191722!important;
    border:0;
  }
  .g6-body #g6-main .g6-code-hero::before {
    content:"";
    display:block!important;
    position:relative;
    inset:auto;
    z-index:0;
    width:100%;
    height:auto;
    aspect-ratio:1672 / 941;
    background-color:#161725!important;
    background-image:
      linear-gradient(0deg,rgba(12,11,24,.82),rgba(12,11,24,.07) 64%,transparent),
      url('/assets/gta6fan-home-scenes/03-nuit-vice-city.webp')!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center!important;
    border:0;
  }
  .g6-body #g6-main .g6-code-hero::after {display:none!important;}
  .g6-body #g6-main .g6-code-mobile-title {
    display:flex;
    position:relative;
    z-index:2;
    height:56.28vw;
    margin-top:-56.28vw;
    width:100%;
    padding:13px 18px 17px;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    color:#fff5ed;
    pointer-events:none;
  }
  .g6-body #g6-main .g6-code-mobile-title .g6-code-eyebrow {
    color:#ffb2c5;
    font-size:clamp(10px,2.8vw,13px);
    margin:0 0 8px;
    text-shadow:0 2px 10px #060410cc;
  }
  .g6-body #g6-main .g6-code-mobile-title h1 {
    font:400 clamp(46px,12vw,71px)/.96 Anton,Impact,sans-serif;
    margin:0;
    color:#fff5ed;
    text-shadow:0 3px 14px #090611d1;
    white-space:normal;
  }
  .g6-body #g6-main .g6-code-mobile-title h1 em {font-style:normal;color:#ff83a2;}
  .g6-body #g6-main .g6-code-hero-grid {
    width:calc(100% - 34px);
    max-width:1240px;
    min-height:0;
    grid-template-columns:1fr;
    gap:0;
    padding:20px 0 27px;
    margin:0 auto;
  }
  .g6-body #g6-main .g6-code-headline {min-width:0;}
  .g6-body #g6-main .g6-code-headline > .g6-code-eyebrow,
  .g6-body #g6-main .g6-code-headline > h1 {display:none;}
  .g6-body #g6-main .g6-code-intro {font-size:14px;line-height:1.6;color:#f3e4ea;margin:0;}
  .g6-body #g6-main .g6-code-hero-art {display:none!important;}
  .g6-body #g6-main .g6-code-hero-facts {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:18px 0 0;
  }
  .g6-body #g6-main .g6-code-hero-facts > span {
    display:flex;
    min-width:0;
    margin:0;
    padding:12px;
    gap:7px;
    white-space:normal;
    color:#fff3eb;
    background:#2b2330;
    border:1px solid rgba(246,176,197,.43);
    border-radius:7px;
    font-size:12px;
  }
  .g6-body #g6-main .g6-code-hero-facts>span strong {color:#ffb1bf;font-size:clamp(20px,6vw,31px);}
  .g6-body #g6-main .g6-code-hero-facts>span:first-child {grid-column:1/-1;}

  /* Shop banners keep copy on the artwork, no monochrome slab. */
  .g6-body #g6-main .g6m-market-hero {
    background-position:center 52%;
    min-height:clamp(320px,88vw,430px);
    padding-block:45px;
    display:flex;
    align-items:flex-end;
  }
  .g6-body #g6-main .g6m-market-hero::before {
    background:linear-gradient(0deg,rgba(11,10,22,.83),rgba(11,10,22,.09) 75%,transparent);
  }
  .g6-body #g6-main .g6m-market-hero .g6m-market-container {width:calc(100% - 34px);margin-inline:auto;}
  .g6-body #g6-main .g6m-market-hero h1 {font-size:clamp(47px,12vw,67px);line-height:.92;}

  body .g6-player-hero {min-height:310px;padding:28px 17px 33px;background-position:center;}
  body .g6-player-hero::before {background:linear-gradient(0deg,rgba(12,10,23,.82),rgba(12,10,23,.08) 78%);}

  .g6-body #g6-main .g6-portal-hero-shade,
  .g6-body #g6-main .g6-wiki-home-hero-shade,
  .g6-body #g6-main .g6-wiki-catalogue-page .g6-wiki-hero-shade {
    background:linear-gradient(0deg,rgba(13,11,23,.76),rgba(13,11,23,.14) 75%);
  }
  .g6-body #g6-main .g6-claude-detail-header {
    padding:25px 18px;
    border-radius:7px;
  }
  .g6-body #g6-main .g6-claude-detail-header h1 {font-size:clamp(35px,9vw,55px);}

  /* Ensure French, English or longer German headings cannot move the page. */
  .g6-body #g6-main .g6-code-hero,
  .g6-body #g6-main .g6-hero,
  .g6-body #g6-main .g6m-market-hero,
  body .page-head.g6-page-scene {max-width:100%;overflow-x:clip;}
}
@media(max-width:375px) {
  .g6-body #g6-main .g6-page-mobile-heading h1 {font-size:clamp(35px,9.3vw,43px);}
  .g6-body #g6-main .g6-code-mobile-title h1 {font-size:clamp(40px,11vw,53px);}
}
@media(prefers-reduced-motion:reduce) {
  .g6-body #g6-main .g6-page-mobile-heading,
  .g6-body #g6-main .g6-code-mobile-title {transition:none;}
}


/* Sparse/empty listings still look editorial rather than a bare night panel. */
.g6-body #g6-main .g6-empty,
.g6-body #g6-main .g6-code-empty,
.g6-body #g6-main .g6m-market-empty {
  background-color:#28212c;
  background-image:linear-gradient(90deg,rgba(17,14,27,.91),rgba(17,14,27,.67)),
    url('/assets/gta6fan-home-scenes/05-marina-residentielle.webp');
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border:1px solid rgba(242,164,187,.40);
  border-radius:9px;
  min-height:180px;
}
.g6-body #g6-main .g6-code-empty {
  background-image:linear-gradient(90deg,rgba(17,14,27,.91),rgba(17,14,27,.67)),
    url('/assets/gta6fan-visuals/vice-city-controller.webp');
}
.g6-body #g6-main .g6-empty h2,
.g6-body #g6-main .g6-empty h3,
.g6-body #g6-main .g6-code-empty h3,
.g6-body #g6-main .g6m-market-empty h2 {color:#fff5eb;}
.g6-body #g6-main .g6-empty p,
.g6-body #g6-main .g6-code-empty p,
.g6-body #g6-main .g6m-market-empty p {color:#e8d4df;}
/* Connection, registration and account pages get the same calm artwork.
   Content panels retain their opaque contrast for accessible forms. */
.g6-body #g6-main .g6-account-area {
  background:#17151e;
  background-image:linear-gradient(112deg,rgba(20,17,30,.96),rgba(20,17,30,.78) 61%,rgba(20,17,30,.49)),
    url('/assets/gta6fan-home-scenes/02-ville-apres-pluie.webp');
  background-size:cover;
  background-position:center top;
}