:root { --bg:#090d18; --surface:#111827; --surface-2:#182132; --line:rgba(255,255,255,.1); --text:#f5f7fb; --muted:#9aa5b8; --accent:#d8ff36; --accent-dark:#172000; --shell:1360px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font:400 15px/1.5 Inter,Arial,sans-serif; } a { color:inherit; text-decoration:none; } button,input { font:inherit; } .shell { width:min(calc(100% - 64px),var(--shell)); margin:auto; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .skip-link { position:absolute; left:1rem; top:-4rem; z-index:20; background:var(--accent); color:#000; padding:.7rem 1rem; } .skip-link:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(9,13,24,.88); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); } .header-inner { height:76px; display:flex; align-items:center; gap:42px; } .brand { display:inline-flex; align-items:center; flex-shrink:0; } .brand img { display:block; max-height:32px; max-width:172px; width:auto; } .primary-nav { display:flex; gap:28px; height:100%; align-items:center; } .primary-nav a { color:var(--muted); height:100%; display:grid; align-items:center; font-size:.9rem; font-weight:600; position:relative; } .primary-nav a:hover,.primary-nav .is-active { color:var(--text); } .primary-nav .is-active:after { content:""; height:3px; background:var(--accent); position:absolute; inset:auto 0 0; } .header-actions { margin-left:auto; display:flex; align-items:center; gap:14px; } .icon-button,.menu-button { border:0; background:transparent; color:var(--text); cursor:pointer; padding:9px; } .icon-button svg,.game-search svg { fill:none; stroke:currentColor; stroke-width:1.8; width:21px; height:21px; }.login-button { border:1px solid rgba(216,255,54,.68); color:var(--accent); padding:9px 18px; border-radius:4px; font-size:.85rem; font-weight:700; } .login-button:hover { background:var(--accent); color:#101600; }.menu-button { display:none; }.menu-button span { display:block; width:21px; height:2px; margin:4px; background:currentColor; }
.hero { min-height:580px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; isolation:isolate; background:linear-gradient(90deg,#090d18 0%,rgba(9,13,24,.77) 38%,rgba(9,13,24,.1) 100%),linear-gradient(0deg,#090d18,transparent 45%),var(--hero-image),linear-gradient(135deg,#1f293d,#29355a); background-size:cover; background-position:center; }.hero:after { content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background:radial-gradient(circle at 76% 32%,rgba(216,255,54,.18),transparent 25%); }.hero-content { padding:104px 0 76px; }.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; margin:0 0 10px; }.hero h1,.section-heading h2 { font-family:"Barlow Condensed",Arial,sans-serif; text-transform:uppercase; letter-spacing:.015em; }.hero h1 { font-size:clamp(3.5rem,7vw,6.6rem); max-width:640px; line-height:.86; margin:0; }.hero-copy { max-width:525px; color:#d4d9e1; margin:22px 0 30px; font-size:1rem; }.hero-actions { display:flex; gap:12px; }.button { font-weight:700; padding:13px 21px; border-radius:3px; transition:.2s ease; }.button-primary { background:var(--accent); color:var(--accent-dark); }.button-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(216,255,54,.25); }.button-primary span { padding-left:10px; }.button-quiet { border:1px solid rgba(255,255,255,.45); }.button-quiet:hover { background:rgba(255,255,255,.1); }.hero-pager { display:flex; gap:8px; padding-bottom:26px; }.hero-pager button { border:0; width:29px; height:3px; background:rgba(255,255,255,.4); padding:0; cursor:pointer; }.hero-pager .is-current { background:var(--accent); }
.search-panel { border-bottom:1px solid var(--line); background:#0d1321; padding:24px 0; }.game-search { display:flex; align-items:center; max-width:690px; height:50px; background:#192234; border:1px solid #263249; border-radius:4px; color:var(--muted); }.game-search svg { margin:0 14px 0 17px; flex:0 0 auto; }.game-search input { background:transparent; border:0; outline:0; color:var(--text); min-width:0; flex:1; }.game-search input::placeholder { color:#7f899a; }.game-search button { height:100%; border:0; border-left:1px solid #2d394d; background:transparent; color:var(--accent); padding:0 21px; font-weight:700; cursor:pointer; }.game-search button:hover { background:rgba(216,255,54,.08); }
.content-section { padding-top:78px; }.content-section:last-child { padding-bottom:94px; }.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:25px; }.section-heading h2 { font-size:2.35rem; line-height:.9; margin:0; }.section-heading a { color:var(--accent); font-size:.82rem; font-weight:700; }.section-heading a span { padding-left:5px; }.category-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }.category-card { min-height:148px; padding:18px; border:1px solid var(--line); display:flex; flex-direction:column; position:relative; overflow:hidden; transition:transform .2s,border-color .2s; background:linear-gradient(135deg,rgba(255,255,255,.07),transparent),#131c2c; }.category-card:before { content:""; position:absolute; width:130px; height:130px; right:-45px; top:-48px; border-radius:50%; background:var(--cat-color); opacity:.24; filter:blur(4px); }.category-card:hover { transform:translateY(-4px); border-color:var(--cat-color); }.category-icon { color:var(--cat-color); font-size:2rem; line-height:1; }.category-card > span:nth-child(2) { margin-top:auto; font-weight:700; }.category-card small { color:var(--muted); font-size:.72rem; margin-top:2px; }.card-action { --cat-color:#e4ff42; }.card-puzzle { --cat-color:#49c6ff; }.card-racing { --cat-color:#fb7b3b; }.card-sports { --cat-color:#ffcf3c; }.card-arcade { --cat-color:#e165e9; }.card-adventure { --cat-color:#69e0b5; }
.game-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }.game-card { min-width:0; background:var(--surface); border:1px solid transparent; transition:.2s ease; }.game-card:hover { transform:translateY(-5px); border-color:rgba(216,255,54,.65); box-shadow:0 13px 30px rgba(0,0,0,.34); }.game-art { height:0; padding-bottom:132%; position:relative; overflow:hidden; background:var(--card-image),linear-gradient(145deg,#344765,#151e30); background-size:cover; background-position:center; }.game-art:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 48%); }.badge,.ranking,.play-icon { position:absolute; z-index:1; }.badge { top:11px; left:11px; background:var(--accent); color:#172000; padding:3px 7px; text-transform:uppercase; font-size:.62rem; font-weight:800; }.ranking { top:9px; left:10px; font:700 2.4rem/.8 "Barlow Condensed",sans-serif; color:rgba(255,255,255,.9); text-shadow:0 2px 7px #000; }.play-icon { display:grid; place-items:center; width:39px; height:39px; left:50%; top:50%; transform:translate(-50%,-50%) scale(.8); border-radius:50%; background:var(--accent); color:#152000; font-size:.7rem; padding-left:2px; opacity:0; transition:.2s; }.game-card:hover .play-icon { opacity:1; transform:translate(-50%,-50%) scale(1); }.game-meta { padding:13px 12px 15px; }.game-meta h3 { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:0 0 4px; font-size:.92rem; }.game-meta p { color:var(--muted); margin:0; font-size:.72rem; }.game-meta p span { color:var(--accent); padding:0 2px; }
.site-footer { border-top:1px solid var(--line); padding:46px 0; background:#070b14; }.footer-inner { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:20px 38px; }.footer-inner > p { color:var(--muted); margin:0; font-size:.82rem; }.footer-links { display:flex; flex-wrap:wrap; gap:20px; font-size:.78rem; color:var(--muted); }.footer-links a:hover { color:var(--text); }.copyright { grid-column:1/-1; border-top:1px solid var(--line); padding-top:22px; }
@media (max-width:1000px) { .category-grid { grid-template-columns:repeat(3,1fr); }.game-grid { grid-template-columns:repeat(4,1fr); }.game-grid .optional-card { display:none; } }
@media (max-width:700px) { .shell { width:min(calc(100% - 32px),var(--shell)); }.header-inner { height:64px; gap:14px; }.brand img { max-height:27px; max-width:138px; }.primary-nav,.search-toggle { display:none; }.menu-button { display:block; }.login-button { padding:7px 13px; font-size:.78rem; }.hero { min-height:560px; background-position:65% center; }.hero-content { padding:100px 0 62px; }.hero h1 { font-size:4rem; max-width:330px; }.hero-copy { max-width:330px; font-size:.91rem; }.content-section { padding-top:54px; }.section-heading h2 { font-size:2rem; }.category-grid { grid-template-columns:repeat(2,1fr); gap:10px; }.category-card { min-height:122px; }.game-grid { display:flex; overflow:auto; gap:12px; margin-right:-16px; padding-right:16px; scrollbar-width:none; }.game-grid::-webkit-scrollbar { display:none; }.game-card { flex:0 0 156px; }.game-grid .optional-card { display:block; }.game-art { padding-bottom:137%; }.search-panel { padding:16px 0; }.game-search { height:46px; }.game-search button { padding:0 14px; }.footer-inner { grid-template-columns:1fr; gap:17px; }.copyright { grid-column:auto; }.footer-links { gap:15px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition:none!important; } }