:root{
  --bg:#061016;
  --panel:#09141b;
  --panel2:#0d1b24;
  --line:#274353;
  --line-soft:rgba(129,174,198,.25);
  --text:#f4f6f7;
  --muted:#9eb0bb;
  --blue:#8ec9f3;
  --gold:#e3b868;
  --green:#54e56e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  background:
    linear-gradient(rgba(4,16,23,.88),rgba(4,16,23,.88)),
    url("/assets/hero-bg.png") center center / cover fixed no-repeat;
}
a{color:inherit;text-decoration:none}
button{font:inherit}

#top,
#games,
#about{
  scroll-margin-top:70px;
}

.topbar{
  height:58px;padding:0 3.2vw;display:grid;grid-template-columns:220px 1fr 180px;
  align-items:center;position:sticky;top:0;z-index:50;background:#071118;
  border-bottom:1px solid #243642
}
.brand{display:flex;flex-direction:column;line-height:1}
.brand-main{font-family:Cinzel,serif;font-size:23px;letter-spacing:.08em}
.brand-sub{margin-top:5px;font-size:7px;letter-spacing:.28em;color:#9dafb9}
nav{display:flex;justify-content:center;gap:42px;height:100%;align-items:center}
nav a{font-size:12px;letter-spacing:.11em;color:#a9bac5;position:relative;height:100%;display:flex;align-items:center}
nav a:hover,nav a.active{color:#f6d797}
nav a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:#e4b55f}
.discord-link{font-size:11px;letter-spacing:.08em;color:#9fd0ff;text-align:right}

/* .hero{
  min-height:490px;position:relative;overflow:hidden;border-bottom:1px solid #1c3340;
  background:
    radial-gradient(circle at 14% 28%,rgba(232,148,65,.26),transparent 22%),
    radial-gradient(circle at 84% 50%,rgba(237,85,34,.26),transparent 20%),
    linear-gradient(180deg,#21313a 0%,#0d202a 44%,#071319 100%)
} */
/*  .hero{
  min-height:490px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid #1c3340;

  background:
    linear-gradient(
      180deg,
      rgba(3,10,14,.18) 0%,
      rgba(3,10,14,.28) 55%,
      rgba(3,10,14,.82) 100%
    ),
    url("/assets/hero-bg.png") center center / cover no-repeat;
} */
.hero{
  min-height:490px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid #1c3340;

  background:
    linear-gradient(
      180deg,
      rgba(3,10,14,.18) 0%,
      rgba(3,10,14,.28) 55%,
      rgba(3,10,14,.82) 100%
    ),
    url("/assets/hero-bg.png") center center / cover fixed no-repeat;
}
/* .hero:before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;
  background:
    linear-gradient(150deg,transparent 0 20%,#10232c 20.5% 34%,transparent 34.5%),
    linear-gradient(30deg,transparent 0 65%,#101c23 65.5% 78%,transparent 78.5%);
  opacity:.8
} */
/* .mountains{
  position:absolute;inset:34px 18% auto;height:265px;
  clip-path:polygon(0 100%,10% 70%,18% 80%,31% 42%,39% 62%,51% 9%,61% 55%,72% 28%,84% 70%,100% 45%,100% 100%);
  background:linear-gradient(180deg,#43515a,#1b2a32 48%,#0d1920);
  opacity:.92
}
.hero-art-left,.hero-art-right{position:absolute;filter:drop-shadow(0 16px 20px rgba(0,0,0,.45))}
.hero-art-left{
  left:5%;top:105px;width:260px;height:70px;transform:rotate(-14deg);
  background:linear-gradient(12deg,transparent 0 18%,#293842 19% 54%,#485762 55% 69%,transparent 70%);
  clip-path:polygon(0 45%,52% 34%,72% 0,78% 3%,70% 36%,100% 42%,100% 58%,68% 61%,75% 94%,69% 100%,52% 64%,0 56%)
}
.hero-art-right{
  right:3%;bottom:65px;width:320px;height:112px;background:#1c282f;
  clip-path:polygon(0 46%,15% 36%,34% 34%,46% 15%,72% 7%,100% 31%,100% 67%,72% 69%,56% 92%,25% 94%,8% 72%);
  transform:rotate(-4deg)
}
.hero-art-right:after{
  content:"";position:absolute;width:230px;height:14px;background:#263841;right:-160px;top:28px;transform:rotate(-8deg)
} */
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,7,10,.02),rgba(3,10,14,.28) 65%,#061117 100%)}

.hero-center{position:relative;z-index:2;text-align:center;padding-top:130px}
.hero-center h1{
  margin:0;font-family:Cinzel,serif;font-size:clamp(72px,10vw,138px);
  letter-spacing:.055em;line-height:.85;color:#e7e8e8;text-shadow:0 8px 28px #000;
  -webkit-text-stroke:1px #7c858a
}
.community-line{margin:18px 0 0;letter-spacing:.42em;font-size:15px}
.tagline{margin:27px 0 0;letter-spacing:.4em;font-size:14px;color:#d1d8dc}
.hero-side{position:absolute;z-index:3;display:flex;flex-direction:column;gap:8px;font-size:10px;letter-spacing:.38em;color:#abc0cd}
.hero-side.left{left:4%;bottom:98px}
.hero-side.right{right:4%;top:26px;text-align:left}
.hero-values{position:absolute;z-index:3;left:4%;bottom:30px;display:flex;gap:42px;font-size:11px;letter-spacing:.08em}
.hero-discord{
  position:absolute;z-index:3;right:4%;bottom:22px;width:260px;padding:15px 18px;border:1px solid #5d8ca7;
  display:flex;justify-content:center;gap:28px;font-size:12px;letter-spacing:.05em;background:rgba(5,15,21,.58)
}
.hero-discord:hover{background:#0d2330}

.section{padding:28px 3.2vw 18px;border-bottom:1px solid #1f3440;background:rgba(6,17,23,.94)}
.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section h2,.server-status-section h2{font-size:15px;letter-spacing:.23em;font-weight:600;margin:0}
.carousel-controls{display:flex;align-items:center;gap:12px}
.carousel-controls span{font-size:8px;letter-spacing:.22em;color:#90a7b4}
.carousel-controls button{
  width:40px;height:40px;border:1px solid #4e7083;background:#07151d;color:white;border-radius:50%;font-size:18px;cursor:pointer
}

.game-carousel{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,23.5%);
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:12px;
  scrollbar-width:none
}
.game-carousel::-webkit-scrollbar{display:none}
.feature-card{scroll-snap-align:start;border:1px solid #385363;border-radius:7px;overflow:hidden;background:#08141b;min-height:320px}
.card-image{height:145px;position:relative;display:flex;align-items:flex-start;padding:16px;background:#1e2d36}
.card-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,10,14,.25))}
.wt-bg{
  background:
    linear-gradient(180deg,rgba(3,10,14,.03) 0%,rgba(3,10,14,.12) 55%,rgba(3,10,14,.62) 100%),
    url("/assets/warthunder-bg.png") center center / cover no-repeat;
}
.valheim-bg{
  background:
    linear-gradient(180deg,rgba(3,10,14,.03) 0%,rgba(3,10,14,.12) 55%,rgba(3,10,14,.62) 100%),
    url("/assets/valheim-bg.png") center center / cover no-repeat;
}
.arma-bg{background:linear-gradient(150deg,#4b5559,#293b42 55%,#162127)}
.dcs-bg{background:linear-gradient(150deg,#6a8395,#3c596d 55%,#1b2b35)}
.minecraft-bg{background:linear-gradient(150deg,#607b51,#3b5b3d 56%,#273526)}
.logo-text{position:relative;z-index:2;margin-top:auto;font-family:Cinzel,serif;font-size:24px;font-weight:700;text-shadow:0 3px 6px #000}
.logo-text.serif{font-size:27px;color:#f1c88e}
.card-badge{
  position:absolute;z-index:3;right:11px;top:11px;padding:6px 8px;border-radius:10px;font-size:9px;font-weight:700;
  background:#0d1c24;border:1px solid #31546a
}
.card-badge.green{color:#6ef17d}.card-badge.blue{color:#b4d9f6}.card-badge.amber{color:#ffc85f}.card-badge.muted{color:#c6d0d5}
.card-content{
  padding:14px;
  display:flex;
  flex-direction:column;
  height:175px;
}

.card-content .outline-button{
  margin-top:auto;
}
.stat-pair,
.server-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-bottom:15px;
  gap:0;
  min-height:0;
}

.stat-pair>div+div,
.server-info>div+div{
  border-left:1px solid #1f3541;
  padding-left:16px;
}

.stat-pair span,
.server-info>div>span{
  display:block;
  color:#a7bac5;
  font-size:12px;
  margin-bottom:7px;
}

.stat-pair strong,
.server-info strong{
  font-size:20px;
}

.server-info strong{
  display:flex;
  align-items:baseline;
  gap:4px;
}

/* Players-siffran måste skriva över label-regeln ovan */
.server-info strong #valheimPlayers,
.server-info strong #valheimPlayersMax{
  display:inline;
  font-size:20px;
  color:inherit;
  margin:0;
}

.server-info small{
  font-size:20px;
  color:inherit;
  margin:0;
}

.server-info code{
  font-family:Inter,monospace;
  color:#b8d6e7;
  font-size:14px;
  font-weight:600;
}

.stat-pair span,
.server-info span{
  display:block;
  color:#a7bac5;
  font-size:12px;
  margin-bottom:7px;
}

.stat-pair strong{
  font-size:20px;
}

.server-info{
  display:grid;
  gap:14px;
  margin-bottom:14px;
  min-height:88px;
}

.server-info strong{
  display:flex;
  align-items:baseline;
  gap:4px;
  font-size:20px;
}

.server-info small{
  font-size:20px;
  color:inherit;
  margin-left:0;
}

.server-info p{
  margin:0;
  color:#c3cbd0;
  font-size:12px;
  line-height:1.45;
}

.small-status{
  font-size:13px!important;
}

.server-info code{
  font-family:Inter,monospace;
  color:#b8d6e7;
  font-size:14px;
  font-weight:600;
}
.outline-button{
  display:block;width:100%;padding:11px;border:1px solid #69879a;text-align:center;background:transparent;color:#f4f7f8;
  font-size:11px;font-weight:600;letter-spacing:.04em;cursor:pointer
}
.outline-button:hover{background:#102530}
.outline-button:disabled{opacity:.48;cursor:default}
.dots{display:flex;justify-content:center;gap:8px;margin:2px 0 0}.dots i{width:7px;height:7px;border-radius:50%;background:#41515b}.dots .selected{background:#e5ad4e;box-shadow:0 0 9px #e5ad4e}

.dashboard{
  display:grid;grid-template-columns:1.2fr 1.35fr .9fr;gap:0;border-bottom:1px solid #1d3340;background:rgba(6,17,23,.94)
}
.panel{min-height:310px;padding:25px 3.2vw 22px;border-right:1px solid #1f3440;background:linear-gradient(180deg,#07141b,#061117)}
.panel h3{font-size:14px;letter-spacing:.18em;margin:0 0 16px}
.about-panel{position:relative;overflow:hidden}
.about-panel p{max-width:430px;color:#b9c5cb;line-height:1.55;font-size:12px}
.mini-values{display:flex;gap:21px;margin:18px 0;color:#c8d3d8;font-size:9px}
.about-discord{width:210px}
.quote{position:absolute;right:28px;bottom:20px;text-align:center;font-size:24px;font-family:Georgia,serif;font-style:italic;color:#dce2e5;opacity:.78;transform:rotate(-6deg)}
.panel-title{display:flex;justify-content:space-between;align-items:center}
.panel-title a{font-size:8px;color:#82c7f3;letter-spacing:.12em}
.event-list{
  display:grid;
  gap:7px;
  max-height:220px;
  overflow-y:auto;
  padding-right:6px;
  scrollbar-width:thin;
  scrollbar-color:#4e7083 transparent;
}

.event-list::-webkit-scrollbar{
  width:6px;
}

.event-list::-webkit-scrollbar-track{
  background:transparent;
}

.event-list::-webkit-scrollbar-thumb{
  background:#4e7083;
  border-radius:6px;
}

.event-list::-webkit-scrollbar-thumb:hover{
  background:#698fa5;
}
.event-row{display:grid;grid-template-columns:50px 48px 1fr;gap:10px;align-items:center;border:1px solid #284554;padding:7px}
.date-box{height:45px;display:grid;place-items:center;border-right:1px solid #284554;color:#d9e2e6;font-size:10px;white-space:pre-line;text-align:center}
.event-time{font-size:10px;color:#a9bac4}
.event-row strong{font-size:18px}.event-row span{display:block;font-size:13px;color:#91a4ae;margin-top:4px}
.events-button{margin-top:11px}
.community-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}
.community-stats div{text-align:center}.community-stats strong{display:block;font-size:26px}.community-stats span{font-size:9px;color:#a7b6bf}
.community-quote{text-align:center;font-family:Georgia,serif;font-size:21px;font-style:italic;line-height:1.45;margin-top:30px;opacity:.82;transform:rotate(-4deg)}

.server-status-section{padding:24px 3.2vw 28px;background:rgba(6,17,23,.94);border-bottom:1px solid #1f3440}
.server-status-carousel{display:flex;gap:14px;overflow-x:auto;padding-bottom:5px}
.status-card{
  min-width:500px;display:grid;grid-template-columns:1.2fr .8fr .6fr auto;gap:18px;align-items:center;padding:17px;
  border:1px solid #345363;background:#08151d
}
.status-card>div:first-child{display:flex;flex-direction:column;gap:4px}
.eyebrow{font-size:8px;letter-spacing:.18em;color:#8eb8d0}
.status-inline{display:flex;gap:8px;align-items:center;font-size:11px;color:#a8bac4}
.status-dot{width:8px;height:8px;border-radius:50%;background:#6d7e88}.status-dot.online{background:#55e56c;box-shadow:0 0 9px #55e56c}.status-dot.offline{background:#e56a6a}
.status-card span{font-size:9px;color:#9fb0ba}.status-card strong{font-size:13px}.status-card small{font-size:10px;color:#95a9b5;margin-left:4px}
.status-card button{padding:9px 11px;background:transparent;border:1px solid #4f7388;color:white;cursor:pointer}

.closing{position:relative;height:190px;background:rgba(5,14,19,.35);overflow:hidden}
.closing-scene{display:none}
.closing-text{position:absolute;bottom:16px;left:0;right:0;text-align:center;display:flex;justify-content:center;gap:22px;font-size:8px;letter-spacing:.34em;color:#9fb3bf}
footer{height:72px;padding:0 3.2vw;display:flex;justify-content:space-between;align-items:center;background:#061017;border-top:1px solid #233946;color:#8ea4b1}
footer div{display:flex;align-items:center;gap:16px}footer strong{font-family:Cinzel,serif;color:#edf1f3;letter-spacing:.12em}footer span{font-size:8px;letter-spacing:.24em}

.toast{position:fixed;right:22px;bottom:22px;z-index:100;background:#dcb363;color:#071016;padding:10px 14px;font-weight:700;opacity:0;transform:translateY(9px);transition:.18s}
.toast.show{opacity:1;transform:none}

@media(max-width:1050px){
  .topbar{grid-template-columns:180px 1fr 140px}.topbar nav{gap:22px}
  .game-carousel{grid-auto-columns:minmax(250px,42%)}
  .dashboard{grid-template-columns:1fr 1fr}.community-panel{grid-column:1/-1}
}
@media(max-width:760px){
  .topbar{grid-template-columns:1fr auto;height:62px}.topbar nav{display:none}.discord-link{display:none}
  .hero{min-height:540px}.hero-center{padding-top:170px}.hero-center h1{font-size:72px}.tagline{font-size:9px;letter-spacing:.24em}
  .hero-side.left,.hero-side.right,.hero-values{display:none}.hero-discord{left:50%;right:auto;transform:translateX(-50%);width:250px}
  .game-carousel{grid-auto-columns:84%}.dashboard{grid-template-columns:1fr}.panel{border-right:0;border-bottom:1px solid #1f3440}
  .quote{display:none}.status-card{min-width:86vw;grid-template-columns:1fr 1fr}.closing-text{gap:9px;letter-spacing:.14em}
}


/* Original-style SNAPS hero logo */
.hero-logo {
  display: block;
  width: min(760px, 74vw);
  height: auto;
  margin: 0 auto;
  filter:
    drop-shadow(0 10px 18px rgba(0,0,0,.72))
    drop-shadow(0 2px 2px rgba(0,0,0,.8));
  user-select: none;
  pointer-events: none;
}

@media(max-width:760px){
  .hero-logo {
    width: min(620px, 88vw);
  }
}


/* Community Spotlight */
.spotlight-panel{
  padding:25px 2vw 22px;
}
.spotlight-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.spotlight-heading h3{margin-bottom:16px}
.spotlight-heading span{
  color:#8ea8b7;
  font-size:9px;
  letter-spacing:.13em;
}
.spotlight-stage{
  position:relative;
  min-height:235px;
  height:235px;
  overflow:hidden;
  border:1px solid #284554;
  background:
    radial-gradient(circle at 50% 40%,rgba(73,110,130,.18),transparent 48%),
    linear-gradient(145deg,#10212b,#071117 65%);
}
.spotlight-stage img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.spotlight-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  min-height:100%;
  color:#a7bac5;
}

.spotlight-empty strong{
  color:#e4b55f;
  font-size:16px;
  letter-spacing:.08em;
}

.spotlight-empty span{
  font-size:14px;
  opacity:.85;
}
.spotlight-overlay{
  position:absolute;
  inset:auto 0 0;
  min-height:105px;
  padding:36px 17px 14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  background:linear-gradient(transparent,rgba(2,8,12,.94));
}
.spotlight-overlay>div{
  min-width:0;
}
.spotlight-game{
  display:block;
  color:#e3b868;
  font-size:8px;
  letter-spacing:.2em;
  margin-bottom:5px;
}
.spotlight-overlay strong{
  display:block;
  max-width:210px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
}
.spotlight-overlay small{
  display:block;
  margin-top:4px;
  color:#9db0ba;
  font-size:9px;
}
.spotlight-overlay blockquote{
  margin:0;
  max-width:125px;
  text-align:right;
  color:#d8dfe2;
  font:italic 15px/1.25 Georgia,serif;
}
.spotlight-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:48px;
  border:1px solid rgba(126,166,188,.42);
  background:rgba(3,10,14,.62);
  color:#fff;
  font-size:25px;
  cursor:pointer;
  opacity:.75;
}
.spotlight-arrow:hover{opacity:1;background:rgba(9,27,37,.9)}
.spotlight-arrow.prev{left:8px}
.spotlight-arrow.next{right:8px}

@media(max-width:1050px){
  .spotlight-panel{grid-column:1/-1}
  .spotlight-stage{height:330px}
}
@media(max-width:760px){
  .spotlight-stage{height:260px}
  .spotlight-overlay blockquote{display:none}
}