/* ==================================================================
   MASSELIART — folha de estilo única para todo o site.
   Editar aqui muda as quatro páginas de uma vez.
   ================================================================== */

:root{
  --ink:#000000;             /* preto do site */
  --bone:#ffffff;            /* texto */
  --mute:rgba(255,255,255,.64);
  --relic:#98dab5;           /* verde menta — NecroDungeon */
  --straw:#e8c66a;           /* amarelo-palha — Settlers of Pineshore */
  --accent:var(--relic);     /* cada página redefine este */
  --rule:rgba(255,255,255,.14);
  --serif:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --wrap:1280px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- cabeçalho ---------- */
.bar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:16px clamp(20px,5vw,64px);
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.bar .mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.bar .mark img{width:36px;height:auto}
.bar .mark span{font-size:15px;letter-spacing:.14em;color:var(--mute)}
.nav{display:flex;align-items:center;gap:clamp(16px,3vw,40px)}
.nav a{
  font-size:16px;letter-spacing:.08em;text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.nav a:hover,.nav a:focus-visible{color:var(--accent);border-color:var(--accent)}
.nav a[aria-current]{color:var(--accent);border-color:var(--rule)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:86vh;
  display:grid;place-items:center;text-align:center;
  padding:clamp(72px,12vh,150px) clamp(20px,6vw,72px);
  overflow:hidden;
}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.06)}
.hero .veil{position:absolute;inset:0}
.hero > .inner{position:relative;z-index:2}
.hero-logo{width:min(720px,84vw);margin:0 auto 36px}
.creed{list-style:none;display:grid;gap:5px}
.creed li{font-size:clamp(16px,1.5vw,21px);color:rgba(255,255,255,.84);letter-spacing:.03em}
.creed li:last-child{color:var(--bone)}

/* ---------- faixas alternadas ---------- */
.band{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(28px,6vw,88px);
  padding:clamp(80px,13vh,150px) 0;
  border-top:1px solid rgba(255,255,255,.07);
}
.band .art{
  position:relative;min-height:clamp(300px,44vh,500px);
  background-size:cover;background-position:center;
}
.band .art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,0) 52%,#000 100%)}
.band:nth-of-type(even){direction:rtl}
.band:nth-of-type(even) > *{direction:ltr}
.band:nth-of-type(even) .art::after{
  background:linear-gradient(270deg,rgba(0,0,0,0) 52%,#000 100%)}
.band .copy{padding-inline:clamp(20px,4vw,56px);max-width:58ch}

.marker{
  display:flex;align-items:center;gap:14px;margin-bottom:22px;
  font-style:italic;font-size:15px;color:var(--accent);letter-spacing:.04em;
}
.marker::after{content:"";flex:1;height:1px;background:var(--rule)}

h2{
  font-weight:400;font-size:clamp(34px,4.4vw,60px);
  line-height:1.07;letter-spacing:-.015em;color:var(--accent);
  margin-bottom:20px;
}
.band p + p{margin-top:16px}

/* ---------- fecho ---------- */
.close{
  position:relative;text-align:center;overflow:hidden;
  padding:clamp(100px,17vh,190px) clamp(20px,6vw,72px);
  border-top:1px solid rgba(255,255,255,.07);
}
.close .bg{position:absolute;inset:0;background-size:cover;background-position:center 60%}
.close .veil{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.55),#000 74%)}
.close > .inner{position:relative;z-index:2}
.close h2{font-size:clamp(38px,6vw,86px);line-height:1.02;color:var(--bone);margin-bottom:40px}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 32px;border:1px solid var(--accent);color:var(--accent);
  text-decoration:none;font-size:18px;letter-spacing:.06em;
  background:rgba(0,0,0,.4);
  transition:background .2s ease,color .2s ease;
}
.btn:hover,.btn:focus-visible{background:var(--accent);color:#000}
.btn svg{width:21px;height:21px;fill:currentColor}

/* ---------- home: cartões dos jogos ---------- */
.games{display:grid}
.game{
  position:relative;min-height:74vh;display:grid;place-items:center;
  text-align:center;padding:clamp(56px,9vh,110px) clamp(20px,6vw,72px);
  overflow:hidden;text-decoration:none;
  border-top:1px solid rgba(255,255,255,.07);
}
.game .bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .6s ease}
.game .veil{position:absolute;inset:0}
.game > .inner{position:relative;z-index:2}
.game:hover .bg,.game:focus-visible .bg{transform:scale(1.04)}
.game img{width:min(520px,72vw);margin:0 auto 20px}
.game .line{font-size:clamp(15px,1.4vw,19px);color:rgba(255,255,255,.86)}
.game .more{
  display:inline-block;margin-top:22px;font-size:15px;letter-spacing:.1em;
  padding-bottom:3px;border-bottom:1px solid currentColor;
}
.game.necro{--accent:var(--relic)}
.game.necro .more{color:var(--relic)}
.game.pine{--accent:var(--straw)}
.game.pine .more{color:var(--straw)}

/* ---------- rodapé ---------- */
footer{
  padding:48px clamp(20px,6vw,72px) 60px;text-align:center;
  border-top:1px solid var(--rule);color:var(--mute);font-size:15px;
}
footer a{color:var(--bone);text-decoration:none;border-bottom:1px solid var(--rule)}
footer a:hover{color:var(--accent)}
footer .sig{margin-top:10px;font-size:13px}

/* ---------- celular ---------- */
@media (max-width:860px){
  .band{grid-template-columns:1fr;gap:30px;padding:68px 0}
  .band:nth-of-type(even){direction:ltr}
  .band .art{min-height:250px}
  .band .art::after,.band:nth-of-type(even) .art::after{
    background:linear-gradient(180deg,rgba(0,0,0,0) 45%,#000 100%)}
  .band .copy{max-width:none}
  .bar{flex-wrap:wrap;gap:12px}
  .bar .mark span{display:none}
  .nav a{font-size:15px}
  .game{min-height:56vh}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .game .bg{transition:none}
}

/* ---------- texto substituto quando um logo não carrega ---------- */
.wordmark{
  display:block;font-size:clamp(30px,5vw,58px);line-height:1.05;
  letter-spacing:.02em;color:var(--bone);margin-bottom:20px;
}
.wordmark.big{font-size:clamp(38px,7vw,80px);margin-bottom:34px}
.wordmark.small{
  display:inline;font-size:15px;letter-spacing:.16em;
  color:var(--mute);margin:0;
}

/* ---------- titulo invisivel, so para buscadores e leitores de tela ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}