.a{--bg:#0b1017;--panel:#151e29;--text:#e5ebf2;--muted:#a6b3c3;--accent:#38bdf8;--ink:#08131d;--line:#304155}
.draft{background:#111a25;border-color:var(--line);color:#b8c9dc}.draft span{color:var(--muted)}
header{background:#0c131d;border-bottom:1px solid #26364a}.a header .wrap{padding-top:12px;padding-bottom:12px}
.brand{gap:14px;letter-spacing:.08em;font-size:22px;min-width:0}.brand-logo{width:80px;height:80px;object-fit:contain;border:1px solid #34465d;border-radius:9px;box-shadow:0 0 16px #38bdf810;flex:none}.brand:hover{text-decoration:none;color:#fff}
header nav [aria-current=page]{color:var(--accent)}
.a .hero{background:radial-gradient(ellipse at 85% 0%,#16335380,transparent 65%),linear-gradient(115deg,#111c2a,#0c131e);border-color:var(--line)}
.a .hero:after{content:'SGT';font-size:110px;letter-spacing:-.04em;top:14px;right:6%;color:#38bdf808;pointer-events:none}
.button{border-color:#38bdf8;box-shadow:0 0 0 transparent;transition:background .18s,border-color .18s,box-shadow .18s}
.button:hover{background:#70d4ff;border-color:#70d4ff;box-shadow:0 0 18px #38bdf822;text-decoration:none}
.button.secondary{background:transparent;border-color:#405773;color:var(--text)}.button.secondary:hover{background:#17293b;border-color:var(--accent)}
.game{transition:transform .2s,border-color .2s,box-shadow .2s}.game:hover,.related-game:hover{border-color:#38bdf8;box-shadow:0 0 18px #38bdf813;text-decoration:none}
.count{background:#0b1017ed;border-color:#3f5a77;color:#d9eafb}.tags span{border-color:#33465f;color:#b1c1d4;background:#0b14204d}
.game-hero{background:radial-gradient(ellipse at 90% 0%,#12375b55,transparent 65%),#111b28;border-color:var(--line)}
.game-intro .game-lead{color:#d6e5f5}.game-hero img{border-color:#3b516d}.game-hero figcaption{color:var(--muted)}
.server-panel dl>div{border-color:var(--line)}.access-label{border-color:#3c5571;color:#b8cde4;background:#101a27}
.join-block{background:#0e1825;border-left-color:var(--accent)}.join-block ol{color:#c8d6e7}
.side-panel{background:#142235;border-color:#344c68}.side-divider{border-color:var(--line)}.community{background:linear-gradient(110deg,#152237,#111b28);border-color:#344c68}
.related-game{transition:border-color .2s,box-shadow .2s}footer{background:#090e15}
@media(max-width:640px){.brand-logo{width:64px;height:64px}.brand{font-size:21px;gap:12px}.a header .wrap{padding-block:14px}.a .hero:after{font-size:85px;top:8px}}
@media(prefers-reduced-motion:reduce){.button,.game,.related-game{transition:none}}
.a header .wrap{padding-top:23px;padding-bottom:23px}.brand{min-height:34px}
.a .hero{background-image:linear-gradient(90deg,#0b1017ed 0%,#0b1017b8 42%,#0b101700 72%,#0b101700 86%,#0b1017 98%),url('assets/sgt-banner-v2.png');background-size:cover;background-position:center}
.a .hero:after{display:none}.a .hero .wrap{padding-block:38px}.a .hero h1{max-width:760px}
.about-community .community{display:grid;grid-template-columns:180px minmax(0,1fr);gap:30px;align-items:center;padding:28px}.about-logo{width:180px;height:180px;object-fit:contain;border:1px solid var(--line);border-radius:8px}.about-community .community>.button{grid-column:2;justify-self:start;margin-top:-12px}.about-community .community p{max-width:760px}.about-intro{color:var(--text)}
@media(max-width:640px){.a header .wrap{padding-block:18px}.a .hero{background-image:linear-gradient(90deg,#0b1017ed,#0b1017c9),url('assets/sgt-banner-v2.png');background-position:70% center}.a .hero .wrap{padding-block:28px}.about-community .community{grid-template-columns:1fr;gap:20px;padding:24px}.about-logo{width:145px;height:145px}.about-community .community>.button{grid-column:auto;margin-top:0}}
html{background:#070b10}
@font-face{font-family:'SGT Teko';src:url('assets/fonts/Teko.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
.a .brand{font-family:'SGT Teko',sans-serif;font-weight:500;font-size:34px;line-height:1;letter-spacing:.045em;min-height:40px;font-synthesis:none}
@media(max-width:760px){.a .brand{font-size:32px}}
body.a{max-width:1240px;margin-inline:auto;min-height:100vh;box-shadow:0 0 0 1px #25324655}
.a .hero{background-color:#0b1017;background-size:100% 100%,calc(100% - 72px) auto;background-repeat:no-repeat;background-position:center,center}
@media(max-width:760px){.a .hero{background-size:100% 100%,calc(100% - 40px) auto}}
.real-game{display:flex;flex-direction:column}.real-game .game-content{display:flex;flex-direction:column;flex:1}.real-game .game-content>p{min-height:45px}.real-game .tags{margin-bottom:18px}.real-game .game-bottom{margin-top:auto;padding-top:8px}.tags .crossplay-tag{color:#7cdbff;border-color:#28627b;background:#122b3c}.crossplay-note{font-size:14px;color:#bfcede;margin:0 0 24px;padding:14px 0}.has-server .count{border-color:#38bdf8}.real-game .eyebrow{font-size:10px;letter-spacing:.12em}
.card-badges{position:absolute;bottom:12px;left:14px;right:14px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}.card-badges .count{position:static}.play-mode{display:inline-block;background:#0b1017ed;border:1px solid #3f5a77;color:#d9eafb;padding:3px 9px;font-size:12px;line-height:1.6}.card-badges .play-mode{background:#0c1a27f5}
.language-bar{background:#0b1017;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.08em}.language-bar .wrap{display:flex;align-items:center;justify-content:flex-end;gap:11px;padding-block:6px}.language-bar a{padding:2px 5px;color:var(--muted)}.language-bar a[aria-current=page]{color:var(--accent);font-weight:bold}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}#muut-pelit{border-top:1px solid var(--line)}


/* Secondary games: smaller cards keep community servers visually prominent. */
#muut-pelit .games{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
#muut-pelit .game img{height:124px}
#muut-pelit .game-content{padding:15px}
#muut-pelit .real-game h3{font-size:21px;margin-top:8px}
#muut-pelit .real-game .eyebrow{font-size:9px;letter-spacing:.08em}
#muut-pelit .game-content>p{font-size:12px;line-height:1.6;min-height:39px;margin:8px 0 12px}
#muut-pelit .tags{font-size:10px;gap:5px;margin-bottom:10px}
#muut-pelit .tags span{padding:2px 5px}
#muut-pelit .card-badges{left:9px;right:9px;bottom:9px;gap:4px}
#muut-pelit .play-mode{font-size:10px;padding:2px 6px}
#muut-pelit .game-bottom{font-size:11px;padding-top:6px}
@media(max-width:1000px){#muut-pelit .games{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){#muut-pelit .games{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){#muut-pelit .games{grid-template-columns:1fr}#muut-pelit .game{display:grid;grid-template-columns:116px minmax(0,1fr)}#muut-pelit .card-art{height:100%;min-height:184px}#muut-pelit .game img{height:100%;position:absolute;inset:0}#muut-pelit .card-badges{left:5px;right:5px;bottom:6px}#muut-pelit .game-content{padding:12px}#muut-pelit .real-game h3{font-size:20px}#muut-pelit .real-game .eyebrow{display:none}}
/* Selected density: five secondary game cards on wide screens. */
#muut-pelit .games{grid-template-columns:repeat(5,minmax(0,1fr))}
#muut-pelit .game img{height:104px}
@media(max-width:1100px){#muut-pelit .games{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){#muut-pelit .games{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){#muut-pelit .games{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){#muut-pelit .games{grid-template-columns:1fr}#muut-pelit .game img{height:100%}}