:root{color-scheme:dark;--bg:#111214;--panel:#1c1e21;--line:#303338;--muted:#bec1c5;--lime:#c8f462;--gold:#e8ba72;--text:#f6f7f7}
*{box-sizing:border-box}
html{scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
.skip{position:absolute;left:-1000px;padding:12px;background:var(--lime);color:#111}
.skip:focus{left:12px;top:12px;z-index:8}
.site-header{border-bottom:1px solid var(--line);background:#161719}
.top{width:min(100% - 36px,1270px);margin:auto;min-height:68px;display:flex;align-items:center;gap:24px;position:relative}
.brand{font-size:24px;font-weight:950;font-style:italic;letter-spacing:-.055em;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-height:44px}
.brand span span{color:var(--lime)}
.brand img{flex:none}
.desktop-nav,.actions,.hero-buttons{display:flex;align-items:center;gap:10px}
.desktop-nav{margin-left:18px;gap:24px}
.desktop-nav a{font-weight:680;color:var(--muted);font-size:14px}
.desktop-nav a:hover,.drawer-panel a:hover{color:var(--lime)}
.actions{margin-left:auto}
.button,.menu-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:9px;padding:9px 16px;font-weight:800;font-size:14px;white-space:nowrap}
.button-primary{background:var(--lime);color:#111711;border:1px solid var(--lime)}
.button-primary:hover{background:#daf98d}
.button-secondary,.menu-button{background:#212325;border:1px solid #44474a;color:var(--text)}
.button-secondary:hover,.menu-button:hover{border-color:var(--lime)}
.drawer{display:none}
.menu-button{cursor:pointer;list-style:none;width:44px;padding:0}
.menu-button::-webkit-details-marker{display:none}
.drawer-panel{position:absolute;z-index:5;top:calc(100% + 5px);right:0;left:0;display:grid;gap:3px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#202224;box-shadow:0 18px 30px #0009}
.drawer-panel a{min-height:44px;display:flex;align-items:center;padding:8px 12px;border-radius:8px}
.lobby{width:min(100% - 36px,1230px);margin:0 auto}
.crumbs{display:flex;gap:8px;align-items:center;margin:14px 0 10px;color:var(--muted);font-size:13px}
.crumbs [aria-current]{color:#e4e6e8}
.hero{position:relative;isolation:isolate;min-height:355px;display:flex;align-items:center;overflow:hidden;border-radius:19px;border:1px solid #424036;background:#141618}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;z-index:-2}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#101214 1%,#111315d4 33%,#1113153b 68%,transparent)}
.hero-copy{padding:clamp(22px,5vw,62px);max-width:540px}
.kicker{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;margin:0 0 7px}
h1,h2,p{margin:0}
h1{font-size:clamp(32px,5.1vw,66px);line-height:1.04;letter-spacing:-.055em;text-wrap:balance}
.hero-copy>p:not(.kicker){font-size:17px;line-height:1.55;max-width:36ch;margin:15px 0 22px;color:#e0e1e2}
.hero-buttons{flex-wrap:wrap}
.rail{display:flex;gap:12px;overflow-x:auto;scrollbar-color:#616555 #1b1d1f;scroll-snap-type:x proximity;padding-bottom:8px}
.categories{margin:20px 0 8px}
.categories a{flex:none;min-height:44px;display:flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid var(--line);border-radius:9px;background:var(--panel);font-size:14px;font-weight:750;scroll-snap-align:start}
.categories a span{color:var(--lime)}
.categories a:hover{border-color:var(--lime)}
.shelf{padding-top:14px;margin-bottom:22px}
.section-title{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-bottom:12px}
.section-title h2,.help h2{font-size:clamp(23px,3vw,31px);line-height:1.17;letter-spacing:-.035em}
.rail-hint{color:var(--muted);white-space:nowrap}
.game-card{position:relative;flex:1 0 140px;min-width:140px;min-height:155px;aspect-ratio:1/1.05;border:1px solid var(--line);border-radius:11px;overflow:hidden;scroll-snap-align:start;background:#252625}
.game-art{position:absolute;inset:0;background-image:url('/assets/collections.webp');background-size:300% 200%;background-position:var(--x) var(--y)}
.game-card:after{position:absolute;content:"";inset:0;background:linear-gradient(0deg,#090b10 3%,#090b10bb 23%,transparent 62%)}
.game-card:hover{border-color:var(--lime)}
.game-label{position:absolute;z-index:1;bottom:10px;left:11px;right:7px;font-size:14px;font-weight:800;text-shadow:0 1px 2px black}
.live-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.live-card{min-height:120px;background:linear-gradient(135deg,#211e2b,#282023 64%,#33291f);border:1px solid #3c3639;border-radius:11px;padding:17px;display:grid;align-content:center;gap:5px}
.live-card strong{font-size:18px;letter-spacing:-.02em}
.live-card span{color:var(--muted);font-size:14px}
.help{padding:18px 0 24px}
.help h2{margin-bottom:14px}
.help details{border-top:1px solid var(--line);padding:0}
.help summary{cursor:pointer;min-height:44px;padding:12px 3px;font-weight:740}
.help details p{color:var(--muted);padding:0 3px 14px;max-width:80ch}
footer{border-top:1px solid var(--line);padding:22px 0 26px;color:var(--muted);font-size:14px}
footer p{margin:7px 0}
footer p a{color:var(--lime);text-decoration:underline}
@media(max-width:799px){
 .top,.lobby{width:calc(100% - 24px)}
 .top{gap:8px;min-height:59px}
 .desktop-nav,.actions .button-primary{display:none}
 .drawer{display:block}
 .top>.brand{font-size:21px}
 .top>.brand img{width:26px;height:26px}
 .actions .button{padding-inline:10px}
 .hero{min-height:330px;align-items:flex-end;border-radius:13px}
 .hero-image{object-position:68% 29%}
 .hero:before{background:linear-gradient(0deg,#111315 3%,#111315ee 21%,#11131577 47%,transparent 76%)}
 .hero-copy{padding:15px}
 .hero-copy>p:not(.kicker){font-size:14px;margin:9px 0 12px}
 .hero-copy .kicker{font-size:10px}
 .hero-copy h1{font-size:clamp(29px,8vw,39px)}
 .hero-buttons .button{padding-inline:12px}
 .categories{margin-top:13px}
 .game-card{flex-basis:136px;min-width:136px;min-height:147px}
 .live-grid{grid-template-columns:minmax(0,1fr)}
 .live-card{min-height:86px}
}
.drawer:not([open]) .drawer-panel{display:none}