/* ============================================================
   The website's own pages - The app (desktop.php), About
   (about.php), Privacy (privacy.php), a private lobby's link
   (p.php) - and the Discord button the landing page shares with
   them. Sits on landing.css, whose sections, headings and download
   button these reuse; in the new look's frame like it.
   ============================================================ */

/* ---------------- the download and Discord, side by side ---------------- */
.s-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.s-ctas .l-link{align-self:center}
.s-discord{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 26px;border-radius:10px;
  background:#5865F2;color:#fff;text-decoration:none;box-shadow:0 10px 28px rgba(88,101,242,.3);
  transition:filter .12s,transform .08s}
.s-discord span{font:900 calc(18px * var(--display-scale) / 1.3)/1 var(--font-display);letter-spacing:.08em;text-transform:uppercase}
.s-discord .dc-ico{width:20px;height:20px}
.s-discord:hover{filter:brightness(1.08)}
.s-discord:active{transform:translateY(1px)}

/* ---------------- a page's own hero: one gradient card ---------------- */
.s-hero{position:relative;overflow:hidden;padding:32px 34px 34px;border-radius:16px;border:1px solid var(--line2);
  background:
    radial-gradient(55% 80% at 100% 0%, color-mix(in srgb, var(--l-volt) 26%, transparent), transparent 70%),
    radial-gradient(45% 70% at 0% 100%, rgba(var(--acc-rgb),.16), transparent 70%),
    var(--surf)}
.s-hero > .l-in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.s-hero h1{font:900 clamp(2.5rem,4.8vw,4.4rem)/.9 var(--font-display);text-transform:uppercase;letter-spacing:.01em;margin:0}
.s-hero h1 span{display:block}
.s-hero .l-lede{max-width:64ch}

/* ---------------- screenshots ---------------- */
.s-shot{margin:0;display:flex;flex-direction:column;gap:10px}
.s-shot a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line2);
  box-shadow:0 24px 60px rgba(0,0,0,.45);transition:transform .2s, border-color .2s}
.s-shot a:hover{transform:translateY(-3px);border-color:rgba(var(--acc-rgb),.6)}
.s-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.s-shot figcaption{display:flex;flex-direction:column;gap:3px}
.s-shot figcaption b{font:800 calc(18px * var(--display-scale) / 1.3)/1.1 var(--font-display);text-transform:uppercase;letter-spacing:.03em}
.s-shot figcaption span{font-size:14px;color:var(--ink2);line-height:1.55}
.s-big{width:100%}
.s-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
.s-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){.s-grid,.s-grid.three{grid-template-columns:1fr}}

/* ---------------- lists of short facts: cards ---------------- */
.s-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:12px}
.s-points li{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;border:1px solid var(--line2);border-radius:12px;background:var(--surf)}
.s-points h3{margin:0;font:800 calc(17px * var(--display-scale) / 1.3)/1.1 var(--font-display);text-transform:uppercase;letter-spacing:.03em}
.s-points p{margin:0;color:var(--ink2);font-size:13.5px;line-height:1.55}

/* ---------------- questions ---------------- */
.s-faq{display:flex;flex-direction:column;gap:8px;max-width:84ch}
.s-faq details{border:1px solid var(--line2);border-radius:12px;background:var(--surf)}
.s-faq summary{cursor:pointer;padding:14px 18px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"+";color:var(--pink);font-family:var(--font-mono)}
.s-faq details[open] summary::after{content:"\2212"}
.s-faq details p{margin:0;padding:0 18px 16px;color:var(--ink2);line-height:1.6;font-size:14px}

/* ---------------- long text: About, Privacy ---------------- */
.s-prose{max-width:78ch;display:flex;flex-direction:column;gap:14px;font-size:15px;line-height:1.7;color:var(--ink2)}
.s-prose h2{margin:22px 0 0;font:900 calc(26px * var(--display-scale) / 1.3)/1.05 var(--font-display);letter-spacing:.03em;
  color:var(--ink);scroll-margin-top:90px}
.s-prose h2:first-child{margin-top:0}
.s-prose h3{margin:8px 0 0;font:800 calc(18px * var(--display-scale) / 1.3)/1.1 var(--font-display);letter-spacing:.03em;color:var(--ink)}
.s-prose p,.s-prose ul{margin:0}
.s-prose ul{padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.s-prose li::marker{color:var(--pink)}
.s-prose b{color:var(--ink)}
.s-prose a{color:var(--ink);text-decoration-color:var(--pink);text-underline-offset:3px}
.s-prose code{font-family:var(--font-mono);font-size:.88em;color:var(--ink)}
.s-updated{font:600 12px var(--font-mono);color:var(--mut);letter-spacing:.06em}
.s-toc{display:flex;flex-wrap:wrap;gap:6px}
.s-toc a{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:14px;
  background:rgba(244,236,255,.06);border:1px solid rgba(244,236,255,.10);font-size:12.5px;font-weight:600;color:var(--ink2);text-decoration:none}
.s-toc a:hover{background:rgba(244,236,255,.11);color:var(--ink)}
/* Text beside a card of facts (About), or a page of long text in a card */
.l-band > .l-in.s-two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.s-two > div{padding:24px;border-radius:12px;border:1px solid var(--line2);background:var(--surf)}
.s-two > .s-prose,.s-prose.s-page{max-width:none}
@media(max-width:1000px){.l-band > .l-in.s-two{grid-template-columns:1fr}}
.s-page{padding:26px 28px;border-radius:12px;border:1px solid var(--line2);background:var(--surf)}
.l-facts a{color:var(--ink);text-decoration-color:var(--pink);text-underline-offset:3px}
.l-facts a:hover{color:var(--pink)}

/* The guide (guide.php): steps, tables, and a section to jump to */
.s-prose ol{margin:0;padding-left:1.5em;display:flex;flex-direction:column;gap:8px}
.s-prose ol li::marker{color:var(--pink);font-family:var(--font-mono);font-weight:700}
.s-prose h3[id],.l-band[id]{scroll-margin-top:90px}
.s-prose .eyebrow{margin:0}
.s-prose table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.s-prose th,.s-prose td{padding:8px 12px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}
.s-prose thead th{font:700 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.s-prose tbody th{padding-top:16px;color:var(--ink);font-weight:800}
.s-prose td.mono{font-family:var(--font-mono);color:var(--ink);white-space:nowrap}
.s-roles td.mono{text-align:center}
.s-roles thead th:not(:first-child){text-align:center}
/* A wide table scrolls inside its card on a phone rather than the page sideways */
@media(max-width:700px){.s-prose table{display:block;overflow-x:auto}}

/* The guide's frame (guide.php, assets/guide.js): the index down the side,
   the search over the page, a page per server. A server has its colour:
   the 5v5 the accent, Unranked the CT blue, Practice the go green. */
.l-in.g-wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start}
.g-5v5{--g-rgb:var(--acc-rgb)}
.g-unranked{--g-rgb:var(--ct-rgb)}
.g-practice{--g-rgb:var(--ok-rgb)}
.g-side{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto;padding:16px 14px;border-radius:12px;
  border:1px solid var(--line2);background:var(--surf)}
.g-index summary{list-style:none;cursor:pointer;font:700 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.g-index summary::-webkit-details-marker{display:none}
.g-home{display:block;margin:0 0 8px;font-size:13px;font-weight:700;color:var(--ink2);text-decoration:none}
.g-home.on,.g-home:hover{color:var(--ink)}
.g-toc,.g-subs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.g-toc a{display:flex;gap:8px;align-items:baseline;padding:6px 8px;border-radius:8px;font-size:13.5px;line-height:1.35;color:var(--ink2);text-decoration:none}
.g-toc a:hover{background:rgba(244,236,255,.06);color:var(--ink)}
.g-toc > li.on > a{background:rgba(var(--acc-rgb),.14);color:var(--ink);font-weight:700}
.g-subs{margin:4px 0 6px 14px;padding-left:8px;border-left:1px solid var(--line2)}
.g-subs a{font-size:12.5px;padding:4px 8px}
.g-num{font:700 .82em var(--font-mono);color:var(--pink);min-width:2.2em;flex:none}
.g-staffp > a::after{content:"staff";margin-left:auto;padding-left:6px;font:700 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--warn)}
.g-contents .g-staffp > a::after{margin-left:8px}

.g-main{min-width:0;display:flex;flex-direction:column;gap:14px}
.g-search{position:relative}
.g-search input[type=search]{width:100%;height:48px;padding:0 48px 0 16px;font-size:15px;border-radius:12px}
.g-key{position:absolute;right:14px;top:14px;font:700 12px var(--font-mono);padding:1px 7px;border-radius:5px;
  border:1px solid var(--line2);color:var(--mut);pointer-events:none}
.g-search input:focus ~ .g-key,.g-search input:not(:placeholder-shown) ~ .g-key{display:none}
.g-results{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);max-height:min(70vh,560px);overflow:auto;
  border-radius:12px;border:1px solid var(--line2);background:var(--bg);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.g-res{display:flex;flex-direction:column;gap:4px;padding:11px 14px;border-bottom:1px solid var(--line2);text-decoration:none;color:var(--ink2)}
.g-res:last-child{border-bottom:0}
.g-res.on,.g-res:hover{background:rgba(var(--acc-rgb),.12)}
.g-res-none{padding:14px;color:var(--ink2);font-size:14px}
.g-hit-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;color:var(--ink)}
.g-hit-top i{font-style:normal;font-size:12px;color:var(--mut)}
.g-snip{font-size:13px;line-height:1.5;color:var(--ink2)}
.g-main mark,.g-results mark{background:rgba(var(--acc-rgb),.30);color:var(--ink);border-radius:3px;padding:0 2px}
.g-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;vertical-align:middle;
  font:700 10.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:rgb(var(--g-rgb,var(--acc-rgb)));border:1px solid rgba(var(--g-rgb,var(--acc-rgb)),.5);background:rgba(var(--g-rgb,var(--acc-rgb)),.12)}

.g-head{display:flex;flex-direction:column;gap:10px;padding:22px 24px;border-radius:12px;border:1px solid var(--line2);background:var(--surf)}
.g-head.g-server{border-top:3px solid rgb(var(--g-rgb))}
.g-head .eyebrow{margin:0}
.g-title{margin:0;font:900 clamp(1.7rem,3vw,2.5rem)/1 var(--font-display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.g-title .g-tag{font-size:11px;height:22px}
.g-blurb{margin:0;color:var(--ink2);line-height:1.6;max-width:72ch}
.g-sec{scroll-margin-top:90px}
.g-sec h2 .g-num{font-size:.62em;vertical-align:.18em}
.g-sec:target{animation:g-flash 1.8s ease-out}
@keyframes g-flash{from{box-shadow:0 0 0 2px rgba(var(--acc-rgb),.75)}to{box-shadow:0 0 0 2px rgba(var(--acc-rgb),0)}}
.g-staff{border-left:3px solid var(--warn)}
.g-staff > .eyebrow{color:var(--warn)}

.g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px}
.g-card{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:12px;border:1px solid var(--line2);
  border-top:3px solid rgb(var(--g-rgb));background:var(--surf);text-decoration:none;color:var(--ink2);transition:transform .15s,border-color .15s}
.g-card:hover{transform:translateY(-2px);border-color:rgba(var(--g-rgb),.7)}
.g-card-top{display:flex;align-items:center;gap:8px}
.g-card b{font:800 calc(20px * var(--display-scale) / 1.3)/1.05 var(--font-display);text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.g-card span{font-size:13.5px;line-height:1.55}
.g-card i{font-style:normal;font:600 11px var(--font-mono);color:var(--mut);margin-top:auto}

.s-prose .g-contents,.s-prose .g-contents ol{list-style:none;padding-left:0;gap:4px}
.s-prose .g-contents > li{display:block}
.s-prose .g-contents ol{margin:6px 0 10px 2.2em}
.g-contents a{text-decoration:none}
.g-contents a:hover{text-decoration:underline}
.g-az{columns:3 220px;column-gap:28px}
.g-letter{break-inside:avoid;margin-bottom:14px}
.g-letter h3{margin:0 0 6px;color:var(--pink)}
.s-prose .g-letter ul{list-style:none;padding:0;gap:3px;font-size:13.5px;line-height:1.5}

.s-prose .g-hits,.g-hits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.g-hits a{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:12px;border:1px solid var(--line2);
  background:var(--surf);text-decoration:none}
.g-hits a:hover{border-color:rgba(var(--acc-rgb),.6)}

.g-pn{display:flex;gap:12px;margin-top:6px}
.g-pn a{display:flex;flex-direction:column;gap:3px;padding:12px 16px;border-radius:12px;border:1px solid var(--line2);
  background:var(--surf);text-decoration:none;color:var(--ink)}
.g-pn a:hover{border-color:rgba(var(--acc-rgb),.6)}
.g-pn i{font:600 11px var(--font-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.g-next{margin-left:auto;text-align:right}

@media(max-width:900px){
  .l-in.g-wrap{grid-template-columns:1fr}
  .g-side{position:static;max-height:none}
  .g-key{display:none}
}

/* ---------------- credits (credits.php, on pug.css's cards) ---------------- */
.cred{background:rgba(244,236,255,.03);border-color:var(--line2);border-radius:10px}
.credlic,.credmod{border-radius:6px;padding:2px 6px}
.credname{letter-spacing:.03em}

/* On a phone the pages keep a 16px gutter and nothing scrolls sideways */
@media(max-width:600px){
  .s-hero{padding:22px 18px 24px}
  .s-discord,.l-cta{width:100%}
  .l-cta{height:auto;min-height:56px;padding:12px 20px;text-align:center}
  .s-two > div,.s-page{padding:18px}
}