/* GmV landing: everything below the hero. Soft surfaces instead of outlines - panels, cards and rows sit
   on quiet darker tiles with rounded corners and room around them; monospaced data labels. Calm on
   purpose: the flight above is the show. */
:root{
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tile:rgba(236,230,218,.035);
  --tile-2:rgba(236,230,218,.06);
  --tile-hover:rgba(236,230,218,.075);
  --track:rgba(236,230,218,.08);
  --r:14px;
  --us:#4f7de0;
  --nva:#e0443a;
}

/* the ground the sections sit on: fine film grain, and a slow change of light down the page - a green
   jungle morning under the flight, neutral through the stats, a warm dusk by the forum and footer */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .9 0 0 0 0 .85 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.page{padding-bottom:clamp(90px,13vh,160px);
  background:var(--grain),
    radial-gradient(90% 1100px at 12% 0,rgba(64,96,58,.2),rgba(64,96,58,0) 70%),
    radial-gradient(80% 1200px at 92% 100%,rgba(214,96,38,.13),rgba(214,96,38,0) 70%),
    linear-gradient(180deg,#070908 0,#050607 30%,#060606 60%,#0b0806 100%)}

/* small shared pieces */
[hidden]{display:none!important}
.mono{display:block;font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-45)}
.text-link{color:var(--bone-70);text-decoration:underline;text-decoration-color:rgba(236,230,218,.25);text-underline-offset:5px;transition:color .2s,text-decoration-color .2s}
.text-link:hover{color:var(--bone);text-decoration-color:var(--accent)}

/* the status line under the hero */
.ticker{padding:14px 0;border:0;background:rgba(236,230,218,.025);font:500 11.5px/1 var(--mono);letter-spacing:.16em;color:var(--bone-45)}
.ticker-track{animation-duration:70s}
.ticker-track span{gap:0 22px;padding-right:22px}
.ticker-track i{width:5px;height:5px;border-radius:50%;transform:none;background:var(--accent)}

/* sections */
.sec{position:relative;max-width:1400px;margin:0 auto;padding:clamp(88px,13vh,160px) var(--gutter) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 40px;margin-bottom:clamp(28px,3.6vw,48px)}
.sec-label{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin:0;font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-45)}
.sec-label span{color:var(--accent)}
.sec-label i{display:none}
.sec-label em{font-style:normal;margin-left:auto;color:var(--bone-45);white-space:nowrap}
.sec-title{margin:0;font:700 clamp(38px,4.6vw,68px)/.92 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.sec-sub{margin:0;max-width:30rem;justify-self:end;color:var(--bone-70);font-size:clamp(15px,1.05vw,17px);line-height:1.55}
.sec-more{margin:26px 0 0}
.panel-note{margin:0 0 16px;color:var(--bone-45);font-size:.95rem}
.panel-note b{color:var(--bone);font-weight:500}

/* 01 the server */
.server-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(16px,2vw,28px)}
.server-map{position:relative;margin:0;min-height:clamp(340px,36vw,540px);border-radius:var(--r);overflow:hidden;background:#0b0d0c}
.server-map img{position:absolute;left:0;top:-4%;width:100%;height:108%;object-fit:cover;filter:saturate(.8) contrast(1.05) brightness(.82)}
.server-map figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.6vw,36px);
  background:linear-gradient(0deg,rgba(5,6,7,.92) 0%,rgba(5,6,7,.5) 55%,rgba(5,6,7,0) 100%)}
.server-map figcaption strong{font:700 clamp(34px,3.8vw,60px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.server-panel{display:flex;flex-direction:column;gap:22px;padding:clamp(22px,2.4vw,34px);border-radius:var(--r);background:var(--tile)}
.server-status{display:flex;align-items:center;gap:12px;margin:0;font:600 1.2rem/1.2 var(--display);letter-spacing:.03em}
.server-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.server-facts div{padding:14px 16px;border-radius:10px;background:var(--tile-2)}
.server-facts dt{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-45)}
.server-facts dd{margin:9px 0 0;font:600 clamp(20px,1.8vw,28px)/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{padding:7px 13px;border:0;border-radius:999px;background:var(--tile-2);color:var(--bone);font:500 13px/1 var(--body);cursor:pointer;transition:background .2s}
.chip:hover{background:var(--tile-hover)}
.chip.t1{box-shadow:inset 3px 0 0 var(--nva)}
.chip.t2{box-shadow:inset 3px 0 0 var(--us)}
.chip-more{color:var(--bone-45)}
.address-row{display:flex;gap:10px;margin-top:10px}
.address-row code{flex:1;min-width:0;display:flex;align-items:center;padding:0 16px;min-height:50px;border-radius:10px;background:rgba(0,0,0,.32);
  font:500 clamp(15px,1.25vw,19px)/1 var(--mono);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.server-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 26px;margin:auto 0 0;padding-top:6px}
.spec div{display:flex;justify-content:space-between;gap:12px;font:400 12.5px/1.3 var(--mono);color:var(--bone-45)}
.spec dd{margin:0;color:var(--bone-70);text-align:right}

/* 02 stats */
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:999px;background:var(--tile)}
.tab{padding:.62em 1.15em;border:0;border-radius:999px;background:none;color:var(--bone-45);font:600 1rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:color .2s,background .2s}
.tab:hover:not(.is-active){color:var(--bone)}
.tab.is-active{background:var(--bone);color:var(--ink)}
.podium{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.podium li{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;min-height:210px;padding:clamp(20px,2.4vw,30px);border-radius:var(--r);background:var(--tile)}
.podium li:first-child{background:linear-gradient(150deg,rgba(255,106,43,.16),rgba(255,106,43,.02) 60%),var(--tile)}
.podium .insignia{position:absolute;top:18px;left:clamp(20px,2.4vw,30px);width:auto;height:54px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.podium li:nth-child(n+2) .insignia{height:46px;top:22px;opacity:.92}
.podium .place{position:absolute;top:18px;right:20px;font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--bone-45)}
.podium li:first-child .place{color:var(--accent-2)}
.podium a{font:700 clamp(22px,2.2vw,32px)/1 var(--display);color:var(--bone);text-decoration:none;overflow-wrap:anywhere;transition:color .2s}
.podium a:hover{color:var(--accent-2)}
.podium .is-empty{grid-column:1/-1;min-height:0;color:var(--bone-45)}
.facts{display:flex;gap:26px}
.facts b{display:block;font:600 1.35rem/1 var(--display);font-variant-numeric:tabular-nums}
.facts i{display:block;margin-top:6px;font:400 10.5px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-45)}
.ranks{list-style:none;margin:0;padding:0;counter-reset:rank 3;display:grid;gap:4px}
.ranks li{counter-increment:rank;display:grid;grid-template-columns:3rem minmax(0,1fr) repeat(3,minmax(64px,120px));align-items:center;gap:12px;padding:13px 18px;border-radius:10px;transition:background .2s}
.ranks li:nth-child(odd){background:rgba(236,230,218,.022)}
.ranks li:hover{background:var(--tile-2)}
.ranks li::before{content:counter(rank,decimal-leading-zero);font:400 12px/1 var(--mono);color:var(--bone-45)}
.ranks a{font:600 1.15rem/1.1 var(--display);letter-spacing:.02em;color:var(--bone);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranks a:hover{color:var(--accent-2)}
.ranks span{text-align:right;font:500 14px/1.1 var(--mono);font-variant-numeric:tabular-nums;color:var(--bone-70)}
.ranks span.is-lead{color:var(--bone)}
.ranks small{display:block;margin-top:4px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-45)}
.weapon-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.weapon-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:18px 20px;border-radius:12px;background:var(--tile)}
.weapon-list li:has(.w-icon){grid-template-columns:clamp(84px,9vw,120px) minmax(0,1fr) auto;align-items:center}
.weapon-list .w-icon{height:30px;background:var(--bone-70);-webkit-mask:var(--i) left center/contain no-repeat;mask:var(--i) left center/contain no-repeat}
.weapon-list b{font:600 1.15rem/1.1 var(--display);letter-spacing:.02em}
.weapon-list span{font:500 14px/1.1 var(--mono);color:var(--bone-70)}
.weapon-list .bar{grid-column:1/-1;height:4px;border-radius:2px;background:var(--track);overflow:hidden}
.weapon-list .bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--accent)}
.panel-lookup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.panel-lookup > div{padding:clamp(18px,2vw,26px);border-radius:var(--r);background:var(--tile)}
.lookup-form{display:flex;gap:10px}
.lookup-form input{flex:1;min-width:0;height:50px;padding:0 16px;border:0;border-radius:10px;background:rgba(0,0,0,.32);color:var(--bone);font:400 16px/1 var(--body)}
.lookup-form input:focus{outline:2px solid rgba(236,230,218,.35);outline-offset:0}
.lookup-results,.picks ol{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.picks .mono{margin-bottom:4px}
.lookup-results button,.picks button{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;padding:12px 12px;border:0;border-radius:10px;background:none;color:var(--bone);text-align:left;font:inherit;cursor:pointer;transition:background .2s}
.lookup-results button:hover,.picks button:hover{background:var(--tile-2)}
.lookup-results b,.picks b{font:600 1.1rem/1.15 var(--display);letter-spacing:.02em;min-width:0;overflow-wrap:anywhere}
.lookup-results small,.picks small{display:block;margin-top:4px;font:400 12px/1.3 var(--body);letter-spacing:0;color:var(--bone-45)}
.lookup-results span,.picks span{font:500 13px/1 var(--mono);color:var(--bone-70);white-space:nowrap}
.lookup-results .note{padding:14px 12px;color:var(--bone-45)}

/* 03 the scene */
.scene-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.tonight-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;align-content:start}
.tonight-list a{display:grid;grid-template-columns:10px minmax(0,1.4fr) minmax(0,1fr) 110px;align-items:center;gap:16px;padding:14px 18px;border-radius:12px;background:var(--tile);color:inherit;text-decoration:none;transition:background .2s}
.tonight-list a:hover{background:var(--tile-2)}
.tonight-list .mark{width:6px;height:6px;border-radius:50%;background:rgba(236,230,218,.2)}
.tonight-list .is-own{background:linear-gradient(90deg,rgba(255,106,43,.12),rgba(255,106,43,0) 60%),var(--tile)}
.tonight-list .is-own .mark{background:var(--accent);box-shadow:0 0 0 4px rgba(255,106,43,.18)}
.tonight-list .name{min-width:0;font:600 1.08rem/1.15 var(--display);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.tonight-list .name small{display:block;margin-top:4px;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-45)}
.tonight-list a:hover .name{color:var(--accent-2)}
.tonight-list .tn-map{min-width:0;color:var(--bone-70);font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tonight-list .count{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.tonight-list .count b{font:500 14px/1 var(--mono);font-variant-numeric:tabular-nums}
.tonight-list .count b span{color:var(--bone-45)}
.tonight-list .count .bar{width:100%;height:4px;border-radius:2px;background:var(--track);overflow:hidden}
.tonight-list .count .bar i{display:block;height:100%;border-radius:2px;background:var(--bone-70)}
.tonight-list .is-own .count .bar i{background:var(--accent)}
.tonight-list .empty{padding:18px;color:var(--bone-45)}
/* stretched to the server list's height: title at the top, note at the bottom, the chart centred between */
.heat{display:flex;flex-direction:column;margin:0;padding:clamp(20px,2.2vw,30px);border-radius:var(--r);background:var(--tile)}
.heat .heat-grid{margin-top:auto}
.heat .heat-note{margin-top:auto;padding-top:18px}
.heat figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px;padding-bottom:18px}
.heat figcaption strong{font:600 1.05rem/1.2 var(--display);letter-spacing:.03em}
.heat-grid{display:grid;grid-template-columns:34px repeat(24,minmax(0,1fr));gap:3px;align-items:center}
.heat-grid .d{font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-45)}
.heat-grid i{display:block;aspect-ratio:1;border-radius:3px;background:rgba(255,106,43,.04);transition:background .7s ease calc(var(--h,0) * 45ms)}
.heat.is-in .heat-grid i{background:rgba(255,106,43,var(--a,.05))}
.heat-hours{display:flex;justify-content:space-between;margin:8px 0 0 37px;font:400 10px/1 var(--mono);color:var(--bone-45)}
.heat-note{margin:0;font-size:.85rem;line-height:1.5;color:var(--bone-45)}

/* 04 maps */
.map-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.map{position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--tile);transition:background .3s,transform .4s var(--ease)}
.map:hover,.map:focus-within{background:var(--tile-2);transform:translateY(-3px)}
.map-art{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0b0d0c}
.map-art > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.2) sepia(.15) contrast(1.08) brightness(.82);transition:transform 1s var(--ease)}
.map:hover .map-art > img{transform:scale(1.045)}
.map-body{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px}
.map h3{margin:0;font:700 1.35rem/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.map h3 a{color:inherit;text-decoration:none}
.map h3 a::after{content:"";position:absolute;inset:0}
.map p{margin:0;font:400 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-45)}
.split{display:flex;gap:3px;height:4px}
.split i{border-radius:2px}
.split .red{background:var(--nva)}
.split .blue{background:var(--us)}
.legend{display:flex;justify-content:space-between;font:400 11px/1 var(--mono);letter-spacing:.08em;color:var(--bone-45)}

/* 05 forum */
.topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.topic{height:100%;display:flex;flex-direction:column;gap:10px;padding:20px 22px;border-radius:12px;background:var(--tile);color:inherit;text-decoration:none;transition:background .2s}
.topic:hover{background:var(--tile-2)}
.topic-cat{display:flex;align-items:center;gap:8px;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-45)}
.topic-cat i{width:6px;height:6px;border-radius:50%}
.topic h3{margin:0;font:600 1.25rem/1.2 var(--display);letter-spacing:.02em;transition:color .2s}
.topic:hover h3{color:var(--accent-2)}
.topic-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:auto;font-size:.85rem;color:var(--bone-45)}
.topic-meta img{width:20px;height:20px;border-radius:50%}
.topic-meta b{font-weight:500;color:var(--bone-70)}
.forum-empty{padding:18px 0;color:var(--bone-45)}

/* footer */
.foot{border:0;padding:0 var(--gutter);background:var(--grain),linear-gradient(0deg,rgba(214,96,38,.05),rgba(236,230,218,.02)),#0b0806}
.foot-inner{max-width:1400px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 40px;padding:40px 0 calc(40px + env(safe-area-inset-bottom,0px))}
.foot-brand{display:flex;align-items:center;gap:14px}
.foot-brand strong{display:block;font:700 1.45rem/1 var(--display);letter-spacing:.03em}
.foot-brand span{display:block;margin-top:5px;font:400 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-45)}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 28px}
.foot-links a{font:600 1.05rem/1 var(--display);letter-spacing:.04em;color:var(--bone-70);text-decoration:none;transition:color .2s}
.foot-links a:hover{color:var(--bone)}
.foot-copy{margin:0;font:400 11.5px/1 var(--mono);letter-spacing:.06em;color:var(--bone-45)}

/* sections come in once, gently */
.js-reveal{opacity:0;transform:translateY(22px)}

/* ---- tablets */
@media (max-width:1100px){
  .server-grid,.scene-grid{grid-template-columns:minmax(0,1fr)}
  .server-map{min-height:clamp(280px,50vw,440px)}
  .map-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ---- phones */
@media (max-width:760px){
  .sec{padding-top:clamp(72px,11vh,110px)}
  .sec-head{grid-template-columns:minmax(0,1fr)}
  .sec-sub{justify-self:start}
  .sec-head > .btn{justify-self:start}
  .tabs{width:100%;border-radius:14px}
  .tab{flex:1 1 auto;padding:.7em .5em;font-size:.95rem;border-radius:10px}
  .podium{grid-template-columns:minmax(0,1fr);gap:10px}
  .podium li{min-height:0;padding:22px 20px 22px 84px}
  .podium .insignia,.podium li:nth-child(n+2) .insignia{top:50%;left:22px;height:44px;transform:translateY(-50%)}
  .ranks li{grid-template-columns:2.4rem minmax(0,1fr) 76px 64px;padding:12px 14px}
  .ranks li span:nth-of-type(3){display:none}
  .weapon-list,.panel-lookup,.topics{grid-template-columns:minmax(0,1fr)}
  .map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .map-body{padding:14px}
  .map h3{font-size:1.1rem}
  .tonight-list a{grid-template-columns:8px minmax(0,1fr) 86px;gap:12px;padding:14px}
  .tonight-list .tn-map{display:none}
  .spec{grid-template-columns:minmax(0,1fr)}
  .server-facts{gap:8px}
  .server-facts div{padding:12px}
  .foot-inner{flex-direction:column;align-items:center;gap:18px;text-align:center}
  .foot-brand{flex-direction:column;gap:10px}
  .foot-links{justify-content:center}
}
/* phones: map cards as compact rows - a small picture beside the name, rounds and win split */
@media (max-width:560px){
  .map-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .map{flex-direction:row;align-items:stretch}
  .map:hover,.map:focus-within{transform:none}
  .map-art{flex:0 0 36%;aspect-ratio:auto;min-height:104px}
  .map-body{flex:1;min-width:0;justify-content:center;gap:7px;padding:12px 14px}
  .map h3{font-size:1.05rem}
  .map p{font-size:10.5px}
}
@media (max-width:480px){
  .address-row code{padding:0 12px;font-size:14px}
  .address-row .btn{flex:none;padding-left:1.1em;padding-right:1.1em}
  .heat-grid{grid-template-columns:28px repeat(24,minmax(0,1fr));gap:2px}
  .heat-hours{margin-left:30px}
}
@media (prefers-reduced-motion:reduce){
  .js-reveal{opacity:1;transform:none}
}