:root { color-scheme:dark; --bg:var(--c_shared_101116, #101116); --surface:var(--c_shared_191b22, #191b22); --raised:var(--c_shared_20232c, #20232c); --line:var(--c_shared_2b2e38, #2b2e38); --text:var(--c_shared_f5f6f8, #f5f6f8); --muted:var(--c_shared_9a9fad, #9a9fad); --mint:var(--c_shared_65f3b2, #65f3b2); font-family:"Segoe UI",system-ui,-apple-system,sans-serif; font-synthesis:none; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:100px; } body { margin:0; min-width:320px; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; } a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; } button,a { -webkit-tap-highlight-color:transparent; } [hidden] { display:none!important; } :focus-visible { outline:2px solid var(--mint); outline-offset:4px; } ::selection { background:var(--mint); color:var(--bg); } .icon { display:block; flex:none; width:20px; height:20px; } .skip-link { position:fixed; z-index:100; top:-90px; left:20px; padding:14px; background:var(--mint); color:var(--bg); border-radius:8px; } .skip-link:focus { top:12px; }
/* Persistent navigation */
.sidebar { position:fixed; z-index:30; inset:0 auto 0 0; width:230px; display:flex; flex-direction:column; padding:27px 17px 20px; border-right:1px solid var(--line); background:var(--c_shared_14161c, #14161c); } .brand { display:block; margin:0 7px 43px; } .brand img { display:block; width:182px; height:auto; } .sidebar__caption { margin:0 13px 14px; color:var(--c_shared_737987, #737987); font-size:10px; font-weight:650; letter-spacing:.12em; } .sidebar__nav { display:grid; gap:5px; } .sidebar__link { display:flex; gap:13px; align-items:center; min-height:46px; padding:0 13px; border-radius:8px; color:var(--c_shared_a7acb8, #a7acb8); font-size:13px; font-weight:550; } .sidebar__link:hover { background:var(--raised); color:var(--c_shared_ffffff, #fff); } .sidebar__link.is-current { background:rgb(var(--c_shared_65f3b2-rgb, 101 243 178) / 0.07450980392156863); color:var(--mint); } .sidebar__demo { display:grid; gap:13px; margin:38px 8px 20px; padding-top:24px; border-top:1px solid var(--line); } .sidebar__demo>.icon { color:var(--mint); width:25px; height:25px; } .sidebar__demo strong { font-size:17px; font-weight:600; line-height:1.4; letter-spacing:-.03em; } .sidebar__demo p { margin:0; color:var(--muted); font-size:11px; line-height:1.7; max-width:165px; } .sidebar__demo>a { display:flex; align-items:center; gap:10px; color:var(--c_shared_d2d6df, #d2d6df); font-size:11px; } .sidebar__demo>a .icon { width:16px; } .sidebar__bottom { margin-top:auto; padding:19px 8px 0; border-top:1px solid var(--line); } .sidebar__account { display:flex; align-items:center; gap:11px; } .avatar { display:grid; place-items:center; flex:none; width:36px; height:36px; background:var(--c_shared_253c32, #253c32); color:var(--c_shared_b9f3d6, #b9f3d6); border:1px solid var(--c_shared_395245, #395245); border-radius:50%; font-size:11px; font-weight:650; } .sidebar__account strong,.sidebar__account small { display:block; } .sidebar__account strong { font-size:12px; font-weight:600; } .sidebar__account small { color:var(--muted); margin-top:4px; font-size:10px; } .logout { display:flex; align-items:center; gap:10px; width:100%; padding:16px 0 0; background:none; border:0; color:var(--c_shared_858c9b, #858c9b); font-size:11px; } .logout .icon { width:16px; height:16px; } .logout:hover { color:var(--c_shared_ffffff, #fff); }
.main-shell { margin-left:230px; } .topbar { position:sticky; z-index:25; top:0; display:flex; align-items:center; justify-content:space-between; gap:25px; min-height:82px; padding:15px 40px; background:rgb(var(--c_shared_14161c-rgb, 20 22 28) / 0.9607843137254902); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); } .topbar__brand { display:none; } .topbar__brand img { display:block; width:164px; height:auto; } .catalog__search { display:flex; align-items:center; gap:12px; width:360px; max-width:100%; min-height:42px; padding:0 13px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--c_shared_777f8e, #777f8e); } .catalog__search input { width:100%; min-width:0; padding:10px 0; background:none; border:0; outline:0; font-size:12px; color:var(--text); } .catalog__search input::placeholder { color:var(--c_shared_8c929f, #8c929f); } .catalog__search:focus-within { border-color:rgb(var(--c_shared_65f3b2-rgb, 101 243 178) / 0.5411764705882353); } .catalog__search kbd { padding:1px 7px; border:1px solid var(--c_shared_343843, #343843); border-radius:4px; font:11px inherit; } .topbar__actions { display:flex; align-items:center; gap:17px; flex:none; } .deposit-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 16px; min-height:40px; border-radius:7px; background:var(--mint); color:var(--c_shared_102b1e, #102b1e); font-size:12px; font-weight:700; } .deposit-button .icon { width:16px; height:16px; } .deposit-button:hover { background:var(--c_shared_a4ffcf, #a4ffcf); } .wallet-switcher { position:relative; } .wallet-switcher summary { display:flex; align-items:center; gap:14px; min-height:40px; list-style:none; cursor:pointer; } .wallet-switcher summary::-webkit-details-marker { display:none; } .wallet-switcher summary small { display:block; color:var(--c_shared_949eab, #949eab); font-size:8px; font-weight:650; letter-spacing:.03em; } .wallet-switcher summary strong { display:block; margin-top:3px; color:var(--c_shared_f7f8fa, #f7f8fa); font-size:15px; font-weight:650; white-space:nowrap; } .wallet-switcher summary>.icon { width:14px; color:var(--c_shared_969ba6, #969ba6); } .wallet-switcher__menu { position:absolute; top:calc(100% + 21px); right:0; width:328px; max-width:calc(100vw - 30px); padding:20px; border:1px solid var(--c_shared_393f49, #393f49); border-radius:12px; background:var(--surface); box-shadow:0 15px 50px rgb(var(--c_shared_000000-rgb, 0 0 0) / 0.4); } .wallet-switcher__caption { display:block; margin-bottom:15px; font-size:14px; font-weight:600; } .wallet-switcher__menu button { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; padding:13px 12px; margin:7px 0; color:var(--text); border:1px solid var(--line); border-radius:8px; background:var(--raised); text-align:left; } .wallet-switcher__menu button[aria-pressed=true] { background:var(--c_shared_20332c, #20332c); border-color:rgb(var(--c_shared_65f3b2-rgb, 101 243 178) / 0.6666666666666666); } .wallet-switcher__menu strong,.wallet-switcher__menu small { display:block; } .wallet-switcher__menu strong { font-size:12px; } .wallet-switcher__menu small { margin-top:5px; font-size:10px; color:var(--muted); } .wallet-switcher__menu b { font-size:12px; white-space:nowrap; } .wallet-switcher__menu p { color:var(--muted); font-size:10px; margin:15px 0; } .wallet-switcher__menu>a { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--line); font-size:11px; color:var(--mint); } .wallet-switcher__menu>a .icon { width:16px; }
/* The games are the visual identity of the lobby. */
.content { max-width:1580px; margin:0 auto; padding:34px 40px 0; } .lobby-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; } .lobby-heading p { color:var(--muted); font-size:12px; margin:0 0 7px; } .lobby-heading h1 { margin:0; font-size:clamp(22px,2.2vw,32px); line-height:1.2; font-weight:650; letter-spacing:-.035em; } .lobby-heading>a { display:flex; align-items:center; gap:12px; font-size:11px; color:var(--c_shared_b5bbc5, #b5bbc5); padding-bottom:3px; } .lobby-heading>a .icon { width:16px; } .featured { display:grid; grid-template-columns:minmax(0,1.85fr) minmax(0,1fr); gap:18px; min-height:340px; } .featured__main { min-width:0; } .featured__side { display:grid; grid-template-rows:1fr 1fr; gap:16px; } .spotlight { display:block; position:relative; overflow:hidden; height:100%; min-height:340px; border-radius:13px; background:var(--c_shared_192433, #192433); border:1px solid rgb(var(--c_shared_ffffff-rgb, 255 255 255) / 0.07058823529411765); isolation:isolate; } .spotlight>img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .45s; } .spotlight:hover>img { transform:scale(1.025); } .spotlight::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgb(var(--c_shared_041522-rgb, 4 21 34) / 0.8509803921568627) 0%,rgb(var(--c_shared_071623-rgb, 7 22 35) / 0.47843137254901963) 50%,rgb(var(--c_shared_061528-rgb, 6 21 40) / 0.0196078431372549) 100%),linear-gradient(0deg,rgb(var(--c_shared_04111b-rgb, 4 17 27) / 0.4666666666666667),transparent 60%); } .spotlight__copy { display:flex; flex-direction:column; align-items:flex-start; height:100%; padding:30px; max-width:66%; } .spotlight__tag { display:block; color:var(--c_shared_dfedf8, #dfedf8); font-size:10px; font-weight:650; text-transform:uppercase; letter-spacing:.1em; } .spotlight h2 { margin:auto 0 11px; padding-top:30px; font-size:clamp(29px,3.15vw,46px); font-weight:750; line-height:1; letter-spacing:-.045em; } .spotlight p { margin:0 0 23px; font-size:12px; line-height:1.6; color:var(--c_shared_d1dce9, #d1dce9); max-width:240px; } .spotlight__action { display:flex; align-items:center; gap:20px; padding:12px 17px; background:var(--c_shared_ffffff, #fff); color:var(--c_shared_171e25, #171e25); font-size:12px; font-weight:650; border-radius:7px; } .spotlight__action svg { width:14px; height:14px; } .spotlight--small { min-height:0; } .spotlight--small::before { background:linear-gradient(90deg,rgb(var(--c_shared_0a1122-rgb, 10 17 34) / 0.8784313725490196) 0,rgb(var(--c_shared_121423-rgb, 18 20 35) / 0.3333333333333333) 80%); } .spotlight--small .spotlight__copy { padding:21px; max-width:75%; } .spotlight--small h2 { font-size:23px; padding-top:12px; margin:auto 0 8px; } .spotlight--small p { display:none; } .spotlight--small .spotlight__tag { font-size:8px; opacity:.8; letter-spacing:.06em; } .spotlight--small .spotlight__action { padding:0; background:none; color:var(--c_shared_ffffff, #fff); font-size:10px; gap:12px; } .spotlight--small .spotlight__action svg { width:13px; }
.catalog { margin-top:37px; scroll-margin-top:104px; } .section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:23px; } .section-heading h2 { margin:0; font-size:24px; font-weight:650; letter-spacing:-.035em; } .section-heading p { color:var(--muted); font-size:11px; margin:6px 0 0; } .catalog-count { flex:none; color:var(--c_shared_a8afbb, #a8afbb); font-size:11px; padding:6px 11px; border:1px solid var(--line); border-radius:6px; } .category-filters { display:flex; gap:8px; overflow:auto; padding-bottom:3px; margin-bottom:21px; scrollbar-width:none; } .category-chip { display:flex; align-items:center; gap:10px; flex:none; border:1px solid var(--line); background:var(--c_shared_191b22, #191b22); padding:10px 14px; border-radius:7px; color:var(--c_shared_aab0bd, #aab0bd); font-size:11px; font-weight:550; } .category-chip>span { font-size:10px; color:var(--c_shared_737d8b, #737d8b); } .category-chip:hover { border-color:var(--c_shared_59616f, #59616f); color:var(--c_shared_ffffff, #fff); } .category-chip[aria-pressed=true] { color:var(--c_shared_10291d, #10291d); background:var(--mint); border-color:var(--mint); font-weight:650; } .category-chip[aria-pressed=true]>span { color:var(--c_shared_1d6944, #1d6944); } .games-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:21px; } .game-card { min-width:0; overflow:hidden; border:1px solid var(--line); background:var(--surface); border-radius:11px; transition:transform .18s,border-color .18s; } .game-card:hover { transform:translateY(-3px); border-color:var(--c_shared_505a68, #505a68); } .game-card__visual { aspect-ratio:16/10; background:var(--c_shared_202c38, #202c38); overflow:hidden; } .game-card__art { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s; } .game-card:hover .game-card__art { transform:scale(1.03); } .game-card__body { padding:18px; } .game-card__category { color:var(--c_shared_8e97a5, #8e97a5); font-size:9px; letter-spacing:.015em; } .game-card h3 { margin:6px 0 6px; font-size:20px; line-height:1.25; font-weight:650; letter-spacing:-.03em; } .game-card p { min-height:34px; margin:0 0 17px; max-width:285px; color:var(--c_shared_999fab, #999fab); font-size:11px; line-height:1.55; } .game-card [data-game-action] { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:38px; padding:0 12px; border:1px solid var(--c_shared_383d47, #383d47); border-radius:6px; background:var(--c_shared_242831, #242831); color:var(--c_shared_eef1f6, #eef1f6); font-size:11px; font-weight:600; transition:background .15s,color .15s,border-color .15s; } .game-card [data-game-action]:after { content:'→'; font-size:17px; font-weight:400; } .game-card [data-game-action]:hover { background:var(--mint); color:var(--c_shared_102b1e, #102b1e); border-color:var(--mint); } .catalog__empty { padding:45px 20px; text-align:center; border:1px dashed var(--line); border-radius:10px; } .catalog__empty>.icon { margin:auto; color:var(--c_shared_738092, #738092); width:30px; height:30px; } .catalog__empty p { color:var(--muted); font-size:13px; } .catalog__empty button { padding:9px 15px; border:1px solid var(--c_shared_454e59, #454e59); border-radius:6px; background:var(--raised); color:var(--c_shared_dce2ec, #dce2ec); font-size:12px; }
.account-strip { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:36px 0; padding:25px 26px; border:1px solid var(--line); background:var(--c_shared_171a21, #171a21); border-radius:10px; } .account-strip>div { display:flex; align-items:center; gap:18px; } .account-strip>div>.icon { width:26px; height:26px; color:var(--mint); } .account-strip strong,.account-strip small { display:block; } .account-strip strong { font-size:14px; font-weight:600; } .account-strip small { font-size:11px; color:var(--muted); margin-top:7px; } .account-strip>a { display:flex; align-items:center; gap:16px; flex:none; font-size:11px; color:var(--c_shared_c5cbd6, #c5cbd6); } .account-strip>a .icon { width:16px; } .footer { display:flex; align-items:center; gap:22px; padding:28px 0 32px; border-top:1px solid var(--line); } .footer img { display:block; width:115px; height:auto; } .footer>span { font-size:10px; color:var(--c_shared_686f7f, #686f7f); } .footer>a:last-child { margin-left:auto; color:var(--c_shared_929aab, #929aab); font-size:10px; }
.notice { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px; margin-bottom:20px; border:1px solid var(--c_shared_675331, #675331); background:var(--c_shared_30291d, #30291d); color:var(--c_shared_f4d99d, #f4d99d); border-radius:8px; font-size:12px; } .notice button { border:1px solid var(--c_shared_736035, #736035); border-radius:5px; background:transparent; color:inherit; padding:7px 12px; white-space:nowrap; } .demo-notice { display:flex; align-items:center; gap:16px; padding:16px 18px; margin-bottom:25px; border:1px solid var(--c_shared_394d62, #394d62); background:var(--c_shared_192331, #192331); border-radius:9px; } .mode-tag { background:var(--c_shared_2a3c54, #2a3c54); color:var(--c_shared_bed8fa, #bed8fa); font-size:9px; font-weight:650; letter-spacing:.08em; padding:6px 8px; border-radius:4px; } .demo-notice strong { font-size:12px; font-weight:600; } .demo-notice p { margin:4px 0 0; font-size:11px; line-height:1.5; color:var(--c_shared_a1afc3, #a1afc3); } .demo-notice button { display:flex; align-items:center; gap:12px; margin-left:auto; flex:none; border:0; background:none; color:var(--c_shared_dbe9fa, #dbe9fa); font-size:11px; } .demo-notice button .icon { width:16px; } html[data-wallet-mode=demo] .wallet-switcher summary small { color:var(--c_shared_a1c7f2, #a1c7f2); } .mobile-nav { display:none; }
@media(min-width:1750px) { .featured { min-height:395px; } .spotlight { min-height:395px; } .spotlight--small { min-height:0; } .game-card__visual { aspect-ratio:16/9; } }
@media(max-width:1240px) { .sidebar { width:206px; padding-inline:13px; } .brand img { width:168px; } .main-shell { margin-left:206px; } .topbar { padding-inline:25px; gap:20px; } .content { padding:28px 25px 0; } .catalog__search { width:290px; } .games-grid { gap:16px; } .game-card__body { padding:15px; } .game-card h3 { font-size:18px; } .featured { grid-template-columns:1.8fr 1fr; gap:14px; min-height:320px; } .spotlight { min-height:320px; } .spotlight--small { min-height:0; } .spotlight__copy { padding:25px; max-width:74%; } .spotlight--small .spotlight__copy { padding:17px; max-width:90%; } .spotlight--small h2 { font-size:20px; } .topbar__actions { gap:13px; } }
@media(max-width:1050px) { .sidebar { display:none; } .main-shell { margin-left:0; } .topbar__brand { display:block; } .topbar .catalog__search { width:245px; } .topbar__actions { gap:15px; } .content { padding-top:25px; padding-bottom:70px; } .mobile-nav { position:fixed; z-index:30; bottom:0; left:0; right:0; display:flex; justify-content:space-evenly; padding:11px 15px max(11px,env(safe-area-inset-bottom)); background:rgb(var(--c_shared_171920-rgb, 23 25 32) / 0.9607843137254902); border-top:1px solid var(--c_shared_30343d, #30343d); backdrop-filter:blur(16px); } .mobile-nav a { display:grid; justify-items:center; gap:5px; min-width:60px; font-size:9px; color:var(--c_shared_8f98a7, #8f98a7); } .mobile-nav a[aria-current] { color:var(--mint); } .mobile-nav .icon { width:21px; height:21px; } }
@media(max-width:760px) { .topbar { flex-wrap:wrap; gap:15px; padding:16px 20px 13px; } .topbar .catalog__search { order:3; width:100%; min-height:39px; } .catalog__search kbd { display:none; } .topbar__brand img { width:151px; } .topbar__account { display:none; } .topbar__actions { gap:15px; } .content { padding-inline:20px; } .featured { grid-template-columns:1fr; gap:13px; } .featured__main .spotlight { min-height:310px; } .featured__side { grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:13px; } .spotlight--small { min-height:150px; } .spotlight__copy { max-width:65%; } .spotlight h2 { font-size:37px; } .spotlight--small h2 { font-size:23px; } .lobby-heading>a { display:none; } .lobby-heading h1 { font-size:26px; } .games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .demo-notice { flex-wrap:wrap; gap:10px; } .demo-notice>div { flex:1; } .demo-notice button { margin-left:60px; } .account-strip { padding:22px; } .account-strip>a { font-size:10px; gap:8px; } .section-heading { margin-bottom:20px; } .catalog { scroll-margin-top:160px; } }
@media(max-width:480px) { html { scroll-padding-top:165px; } .topbar { padding:14px 16px 11px; gap:13px; } .topbar__brand img { width:127px; } .topbar__actions { gap:12px; } .deposit-button { min-height:34px; padding:0 10px; font-size:10px; gap:4px; } .deposit-button .icon { display:none; } .wallet-switcher summary { min-height:34px; gap:5px; } .wallet-switcher summary small { font-size:8px; max-width:84px; } .wallet-switcher summary strong { font-size:12px; } .wallet-switcher summary>.icon { width:11px; } .wallet-switcher__menu { top:calc(100% + 15px); right:0; width:290px; } .content { padding:22px 16px 70px; } .lobby-heading { margin-bottom:19px; } .lobby-heading p { font-size:11px; } .lobby-heading h1 { font-size:23px; } .featured__main .spotlight { min-height:300px; } .spotlight__copy { padding:23px; max-width:78%; } .spotlight h2 { font-size:36px; max-width:160px; } .spotlight p { font-size:11px; max-width:175px; } .spotlight__tag { font-size:8px; } .spotlight__action { font-size:11px; padding:11px 14px; } .featured__side { gap:11px; } .spotlight--small { min-height:145px; border-radius:9px; } .spotlight--small .spotlight__copy { padding:15px; max-width:100%; } .spotlight--small h2 { font-size:21px; max-width:120px; margin-bottom:9px; } .spotlight--small .spotlight__tag { font-size:7px; letter-spacing:0; } .spotlight--small .spotlight__action { font-size:9px; gap:8px; } .catalog { margin-top:29px; } .section-heading h2 { font-size:22px; } .section-heading p { font-size:10px; max-width:230px; } .catalog-count { font-size:9px; padding:5px 8px; } .category-filters { margin-right:-16px; padding-right:16px; gap:7px; margin-bottom:17px; } .category-chip { padding:9px 11px; font-size:10px; gap:7px; } .games-grid { gap:13px 11px; } .game-card { border-radius:9px; } .game-card__visual { aspect-ratio:1.2; } .game-card__body { padding:12px 11px; } .game-card__category { font-size:7px; } .game-card h3 { font-size:16px; margin:5px 0 10px; letter-spacing:-.035em; } .game-card p { display:none; } .game-card [data-game-action] { min-height:35px; font-size:9px; padding:0 9px; gap:6px; } .account-strip { display:block; padding:20px; margin-block:28px; } .account-strip>div { gap:14px; } .account-strip strong { font-size:12px; } .account-strip small { font-size:10px; line-height:1.6; } .account-strip>a { margin:17px 0 0 40px; color:var(--mint); font-size:11px; } .footer { gap:10px; padding:23px 0; } .footer img { width:100px; } .footer>span { display:none; } .footer>a:last-child { font-size:9px; } .demo-notice { padding:14px; } .demo-notice p { font-size:10px; } .demo-notice button { font-size:10px; margin-left:0; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition:none!important; } }
.featured--single{grid-template-columns:1fr}.featured__side:has(>.spotlight:only-child){grid-template-rows:1fr}