/* =========================================================================
   Grand Line Battlegrounds — night / dark mode
   Same layout and elements as the original site, inverted palette:
   the daylight sky becomes a moonlit night.
   ========================================================================= */

/* ------------------------------- fonts --------------------------------- */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Lato-400.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/Lato-700.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/Montserrat-400.woff2) format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/OpenSans-400.woff2) format('woff2'); }
@font-face { font-family: 'FontAwesome'; font-style: normal; font-weight: 400; font-display: block; src: url(fonts/fontawesome.woff2) format('woff2'); }

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.fa-bars:before      { content: "\f0c9"; }
.fa-download:before  { content: "\f019"; }
.fa-windows:before   { content: "\f17a"; }
.fa-android:before   { content: "\f17b"; }
.fa-linux:before     { content: "\f17c"; }
.fa-facebook:before  { content: "\f09a"; }
.fa-instagram:before { content: "\f16d"; }
.fa-play:before      { content: "\f04b"; }

/* ------------------------------- tokens -------------------------------- */
:root {
  --ink:        #04060e;   /* deepest night */
  --ink-2:      #070b1a;
  --panel:      #0c1230;   /* the block that used to be pure white */
  --panel-2:    #090e22;
  --line:       rgba(140, 162, 255, .14);
  --text:       #e7ecff;
  --muted:      #a3adcf;
  --moon:       #9db0ff;   /* moonlight — replaces the daytime teal #48a9cb */
  --moon-lit:   #d8e2ff;
  --sky:        #79c9f0;
  --gold:       #f2c35c;   /* pulled from the logo's treasure */
  --nav-h:      50px;
}

/* ------------------------------- reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; scroll-behavior: smooth; }

body {
  width: 100%;
  height: 100%;
  margin: 0;
  color: var(--text);
  background-color: var(--ink);
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--moon); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}
h1, h2, h3 { text-transform: uppercase; }
.home h1, .home h2, .home h3, .home h4, .home h5, .home h6 { margin: 0 0 35px; }
.light { font-weight: 400; }

.container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.row > [class^="col-"] { padding: 0 15px; width: 100%; }
.text-center { text-align: center; }

/* ============================ night sky ================================= */
.parallax-bg-container {
  display: block;
  position: relative;
  width: 100%;
  height: 24vw;
  margin-top: 40px;
}
/* no top/left on purpose: like the original, the fixed layer keeps its static
   position so the mobile `margin-top: 40px` pushes the sky below the navbar */
.parallax-bg {
  position: fixed;
  width: 100%;
  height: 64vw;
  /* Arte unica (bg.jpeg), ja com a logo e a cena inteira -- por isso nao ha
     mais camada de logo em HTML nem foreground separado.

     Duas declaracoes: a primeira e o fallback para quem nao entende
     image-set(); a segunda sobrescreve nos navegadores que entendem. WebP
     custa bem menos banda na mesma qualidade percebida.

     A versao 2x existe porque `background-size: 100% auto` faz o navegador
     esticar a imagem ate a largura da tela: em monitor grande a arte nativa
     (1195px) seria ampliada pelo browser, que reamostra pior que o Lanczos. */
  background-image: url(img/bg@2x.jpg);
  background-image: -webkit-image-set(url(img/bg@2x.webp) type("image/webp"),
      url(img/bg@2x.jpg) type("image/jpeg"));
  background-image: image-set(url(img/bg@2x.webp) type("image/webp"),
      url(img/bg@2x.jpg) type("image/jpeg"));
  background-position: top center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-color: var(--ink);
}

/* a few stars that breathe on top of the painted sky */
.stars { position: fixed; width: 100%; height: 64vw; pointer-events: none; overflow: hidden; }
.star-layer {
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: transparent;
  animation: twinkle 4.5s ease-in-out infinite;
}
.star-layer-1 {
  box-shadow:
     6vw  4vw 0 0 #fff,  14vw 11vw 0 0 #dfe8ff,  21vw  3vw 0 0 #fff,
    31vw 15vw 0 0 #cfdcff, 42vw  6vw 0 0 #fff,  57vw 12vw 0 0 #e8f0ff,
    68vw  4vw 0 0 #fff,  74vw 17vw 0 0 #cfdcff, 83vw  8vw 0 0 #fff,
    92vw 14vw 0 0 #e8f0ff, 96vw  5vw 0 0 #fff,  47vw 21vw 0 0 #cfdcff;
}
.star-layer-2 {
  width: 1.5px; height: 1.5px;
  animation-duration: 6.5s; animation-delay: -2.2s;
  box-shadow:
     3vw 13vw 0 0 #cfdcff, 11vw  6vw 0 0 #fff,  25vw 19vw 0 0 #e8f0ff,
    37vw  2vw 0 0 #fff,  50vw 17vw 0 0 #cfdcff, 62vw 21vw 0 0 #fff,
    71vw  9vw 0 0 #e8f0ff, 80vw 20vw 0 0 #fff,  88vw  2vw 0 0 #cfdcff,
    97vw 19vw 0 0 #fff,   17vw 23vw 0 0 #e8f0ff;
}
.star-layer-3 {
  width: 2.5px; height: 2.5px;
  animation-duration: 8s; animation-delay: -4.6s;
  box-shadow:
     9vw 19vw 0 0 rgba(255,255,255,.95), 28vw  9vw 0 0 rgba(226,236,255,.9),
    45vw 25vw 0 0 rgba(255,255,255,.85), 66vw 26vw 0 0 rgba(226,236,255,.9),
    86vw 23vw 0 0 rgba(255,255,255,.95),  2vw 26vw 0 0 rgba(226,236,255,.8),
    99vw 28vw 0 0 rgba(255,255,255,.8);
}
@keyframes twinkle {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

/* Cometa: entra pela ESQUERDA e cai para a direita.
   Tres coisas precisam concordar entre si, ou ele parece andar de re:
   - o deslocamento (+46vw, +15vw) da o sentido do voo;
   - o `rotate(18deg)` inclina o rastro no mesmo angulo do voo (atan(15/46) = 18);
   - o gradiente 270deg poe o branco na ponta DIREITA, que e a que vai na frente.
   O transform-origin na direita faz o rastro crescer para tras da cabeca. */
.shooting-star {
  position: absolute;
  top: 5vw; left: 3vw;
  width: 120px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0));
  filter: drop-shadow(0 0 6px rgba(190, 214, 255, .9));
  opacity: 0;
  transform-origin: 100% 50%;
  transform: rotate(18deg);
  animation: shoot 14s linear infinite;
}
@keyframes shoot {
  0%, 82%  { opacity: 0; transform: translate3d(0, 0, 0) rotate(18deg) scaleX(.2); }
  84%      { opacity: 1; }
  93%      { opacity: 0; transform: translate3d(46vw, 15vw, 0) rotate(18deg) scaleX(1); }
  100%     { opacity: 0; transform: translate3d(46vw, 15vw, 0) rotate(18deg) scaleX(1); }
}

.parallax-fg {
  position: relative;
  width: 100%;
  /* 40vw, nao 38vw: a arte e 1920x768 (ratio 0.4), entao com
     `background-size: 100% auto` ela ocupa exatamente 40vw de altura. Numa caixa
     menor ancorada em `bottom`, o que ficava de fora eram os 2vw do topo -- onde
     estao as maos levantadas do Franky, que encostam na linha 0 do PNG. Com 40vw
     a imagem cabe inteira e ainda fecha certinho com os 64vw do fundo (24 + 40). */
  height: 40vw;
  /* Camada da frente: as SILHUETAS DOS PERSONAGENS, nao so terreno. Eu a tinha
     removido junto com o fundo antigo achando que a arte nova cobria tudo --
     ela cobre o cenario, mas nao os personagens. */
  background-image: url(img/fg.png);
  background-image: -webkit-image-set(url(img/fg.webp) type("image/webp"),
      url(img/fg.png) type("image/png"));
  background-image: image-set(url(img/fg.webp) type("image/webp"),
      url(img/fg.png) type("image/png"));
  background-position: bottom center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

/* ============================== navbar ================================== */
.main { position: relative; }

.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  margin-bottom: 0;
  min-height: var(--nav-h);
  text-transform: uppercase;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.navbar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.navbar-header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.navbar-brand {
  display: inline-block;
  padding: 15px 0;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-shadow: 0 0 18px rgba(140, 170, 255, .55);
}
.navbar-brand:hover { color: var(--moon-lit); }
.navbar-toggle {
  order: 2;
  padding: 4px 8px;
  font-size: 16px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(200, 214, 255, .45);
  border-radius: 4px;
  cursor: pointer;
}
.navbar-toggle:hover, .navbar-toggle:focus { background-color: rgba(120, 145, 255, .18); outline: 0; }

.navbar-collapse { width: 100%; max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.navbar-collapse.in { max-height: 320px; }
.nav { display: block; list-style: none; margin: 0; padding: 0 0 8px; }
.nav li a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  letter-spacing: 1px;
  transition: color .25s ease, background .25s ease;
}
.nav li a:hover { color: var(--moon-lit); background-color: rgba(120, 145, 255, .12); }

@media (min-width: 768px) {
  .navbar {
    padding: 20px 0;
    background: transparent;
    border-bottom: none;
    letter-spacing: 1px;
    transition: background .5s ease-in-out, padding .5s ease-in-out, box-shadow .5s ease-in-out;
  }
  .navbar .container { flex-wrap: nowrap; }
  .navbar-header { width: auto; }
  .navbar-toggle { display: none; }
  .navbar-collapse { width: auto; max-height: none; overflow: visible; }
  .nav { display: flex; padding: 0; }
  .nav li a { padding: 15px; position: relative; }
  .nav li a::after {
    content: "";
    position: absolute;
    left: 15px; right: 15px; bottom: 8px;
    height: 1px;
    background: var(--moon);
    box-shadow: 0 0 10px var(--moon);
    transform: scaleX(0);
    transition: transform .25s ease;
  }
  .nav li a:hover::after { transform: scaleX(1); }
  .nav li a:hover { background: transparent; }
  .navbar.top-nav-collapse {
    padding: 0;
    background: rgba(7, 11, 26, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
  }
}

/* ============================== content ================================= */
.main-inner {
  position: relative;
  margin-top: -2px;
  font-size: 18px;
  line-height: 1.5;
  background: linear-gradient(180deg, #070b1a 0%, var(--ink) 45%);
}
@media (min-width: 768px) {
  .main-inner { font-size: 20px; line-height: 1.6; }
}

.section { color: var(--text); padding: 40px 0; }

.main-inner h1 {
  font-size: 36px;
  background: linear-gradient(180deg, #ffffff 0%, #b9c6ff 55%, #8ea3ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(125, 150, 255, .45));
}
.main-inner h2 {
  font-size: 30px;
  color: var(--moon-lit);
}
.main-inner h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--moon), transparent);
  box-shadow: 0 0 12px rgba(157, 176, 255, .8);
}
.section-description h4 {
  margin: 0 0 35px;
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 20px;
  color: var(--muted);
}

/* -------------------------------- video -------------------------------- */
.video-container {
  width: 100%;
  border: 10px solid #060a18;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(140, 162, 255, .18), 0 30px 70px -30px rgba(0, 0, 0, .9);
}
.embed-responsive { position: relative; display: block; height: 0; padding-bottom: 56.25%; overflow: hidden; }
.embed-responsive iframe, .embed-responsive .video-facade {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-facade { padding: 0; background: #05070f; cursor: pointer; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: opacity .3s ease, transform .6s ease; }
.video-facade:hover img { opacity: 1; transform: scale(1.02); }
.play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  color: #fff;
  padding-left: 6px;
  border-radius: 50%;
  border: 1px solid rgba(210, 224, 255, .55);
  background: rgba(20, 28, 70, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 30px rgba(120, 150, 255, .45);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.video-facade:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(60, 80, 180, .6);
  box-shadow: 0 0 46px rgba(140, 170, 255, .75);
}

/* ---------------------------- download block --------------------------- */
/* the original's pure-white section, inverted into a raised night panel */
.alternative-section {
  padding: 60px 0;
  color: var(--text);
  background:
    radial-gradient(900px 320px at 50% 0%, rgba(96, 120, 235, .18), transparent 70%),
    linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.online {
  color: var(--gold);
  text-shadow: 0 0 22px rgba(242, 195, 92, .55);
}

.download-button {
  display: inline-block;
  margin: 10px 0;
  padding: .5em .9em;
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  font-size: clamp(1.15rem, 3.4vw, 3rem);
  color: #fff;
  border-radius: 8px;
  border: 1px solid rgba(180, 200, 255, .38);
  background: linear-gradient(180deg, #4c5ad2 0%, #2b3495 60%, #232a7c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 0 1px rgba(0, 0, 0, .35),
    0 24px 48px -22px rgba(92, 116, 255, .95);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.download-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 0 0 1px rgba(0, 0, 0, .35),
    0 30px 60px -20px rgba(120, 145, 255, 1);
}
.download-button:active { transform: translateY(0); }

.download-button-secondary {
  display: inline-block;
  margin: 12px 0;
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--moon);
  transition: color .2s ease, text-shadow .2s ease;
}
.download-button-secondary:hover {
  color: var(--moon-lit);
  text-shadow: 0 0 18px rgba(157, 176, 255, .8);
}

@media (max-width: 575.98px) {
  .download-button-secondary { font-size: 1.1rem; }
}

/* ---------------------------- requirements ----------------------------- */
#requeriments h4 { color: var(--moon-lit); }
#requeriments h4 .fa { color: var(--moon); margin-right: 6px; }
#requeriments ul { list-style: none; padding: 0; margin: 0 0 30px; }
#requeriments li {
  position: relative;
  padding: 6px 0 6px 24px;
  color: var(--muted);
  font-size: 17px;
}
#requeriments li::before {
  content: "";
  position: absolute;
  left: 4px; top: 15px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--moon);
  box-shadow: 0 0 10px var(--moon);
}
#requeriments strong { color: var(--text); }

/* -------------------------------- footer ------------------------------- */
footer {
  margin-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12, 18, 48, .55), transparent 60%);
}
footer p { margin: 6px 0; color: var(--muted); }
footer a {
  font-size: 18px;
  color: var(--moon);
  transition: all .2s ease-in-out;
}
footer a:hover, footer a:focus { text-decoration: none; color: var(--moon-lit); text-shadow: 0 0 16px rgba(157, 176, 255, .7); }

.soc { overflow: hidden; margin: 0; padding: 24px 0 10px; height: 116px; list-style: none; }
.soc li { display: inline-block; }
.soc li a {
  overflow: hidden;
  text-decoration: none;
  text-align: center;
  display: block;
  position: relative;
  z-index: 1;
  width: 80px; height: 80px; line-height: 80px;
  font-size: 50px;
  border-radius: 10px;
  margin-right: 10px;
  color: #fff;
  border: 1px solid rgba(160, 180, 255, .16);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.soc li a:hover { z-index: 2; transform: translateY(-5px); color: #fff; filter: brightness(1.25); }
.soc-facebook  { background-color: #253a66; box-shadow: 0 14px 30px -18px #3e5b98; }
.soc-instagram { background-color: #5c2273; box-shadow: 0 14px 30px -18px #9b37bd; }
.soc-discord   { background-image: url(img/discord.png); background-size: cover; filter: brightness(.72) saturate(.9); }
.soc li a.soc-discord:hover { filter: brightness(1); }
.soc-facebook:hover  { box-shadow: 0 16px 34px -14px #3e5b98; }
.soc-instagram:hover { box-shadow: 0 16px 34px -14px #9b37bd; }

/* ------------------------------- modal --------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 4, 10, .38);   /* light scrim: the original had none at all */
}
.modal[hidden] { display: none; }
.modal-dialog { width: 100%; max-width: 600px; }
.modal-content {
  background: linear-gradient(180deg, #0e1533, #080d1f);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 40px 90px -30px #000, 0 0 60px -20px rgba(110, 140, 255, .35);
  overflow: hidden;
}
.modal-header { padding: 16px 20px 0; }
.modal-title { margin: 0; color: #ff8a8a; text-align: center; font-size: 20px; }
.modal-body { padding: 16px 20px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.modal-body a { color: var(--moon); }
.modal-footer { padding: 0 20px 20px; text-align: right; }
.btn-danger {
  padding: 9px 18px;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  border: 1px solid rgba(255, 140, 140, .4);
  border-radius: 6px;
  background: linear-gradient(180deg, #a8323f, #7d1f2b);
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}
.btn-danger:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* ------------------------------ responsive ----------------------------- */
@media (min-width: 768px) {
  .parallax-bg-container { margin-top: 0; }
  .row > .col-6  { width: 50%; }
  .row > .col-8  { width: 66.6666%; }
  .row > .col-12 { width: 100%; }
  .row > .offset-2 { margin-left: 16.6666%; }
  .main-inner h1 { font-size: 46px; }
  .main-inner h2 { font-size: 34px; }
  .section { padding: 60px 0; }
}
@media (max-width: 767px) {
  .stars { display: none; }
  .soc li a { width: 62px; height: 62px; line-height: 62px; font-size: 38px; }
  .soc { height: 96px; }
  .main-inner h1 { font-size: 28px; }
  .main-inner h2 { font-size: 24px; }
  .section-description h4 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .star-layer, .shooting-star { animation: none; }
  .shooting-star { display: none; }
  .video-facade img, .download-button, .soc li a { transition: none; }
}

/* ---------------------------------------------------------------------------
   Páginas legais (terms.html / privacy.html) e ajustes do modo teste fechado.
   Anexado ao final para não conflitar com as regras existentes.
--------------------------------------------------------------------------- */

.legal .container { max-width: 820px; text-align: left; }
.legal h1 { margin-bottom: .25em; }
.legal h2 { margin-top: 1.8em; font-size: 1.15em; }
.legal .updated { opacity: .6; font-size: .9em; margin-top: 0; }
.legal ul { margin-left: 1.2em; }
.legal li { margin-bottom: .5em; }
.legal .back { margin-top: 2.5em; }

.status-note { opacity: .75; font-size: .95em; }

/* Redes sociais desativadas: os ícones viram <span>, não <a>. Sem cursor de
   link e sem hover, para não prometer um clique que não existe. */
.soc-disabled span {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}


}