:root{--void:#0b0a1a;--panel:#171334;--panel-hi:#221c4a;--line:#3b3170;--ink:#f0ecff;--dim:#9d95c9;--accent:#2ee6ff;--coin:#ffc61a;--danger:#ff2e6b;--shadow:#0000008c;--step:8px}body.theme-red{--accent:#ff4d4d}body.theme-purple{--accent:#bc13fe}body.theme-green{--accent:#39ff14}body.theme-orange{--accent:#ff9f00}*{box-sizing:border-box}body{color:var(--ink);background-color:var(--void);background-image:radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%), linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);background-size:100% 620px, var(--step) var(--step), var(--step) var(--step);background-repeat:no-repeat,repeat,repeat;background-attachment:fixed;margin:0;padding:0 16px 64px;font-family:Space Grotesk,system-ui,-apple-system,sans-serif}body:before{content:"";z-index:9999;pointer-events:none;background:repeating-linear-gradient(0deg,#00000042 0 1px,#0000 1px 3px);position:fixed;inset:0}body:after{content:"";z-index:9998;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,#0000 55%,#0000008c 100%);position:fixed;inset:0}.container{max-width:1240px;margin:0 auto}.marquee{text-align:center;background:linear-gradient(180deg, var(--panel-hi), var(--panel));border:3px solid var(--line);box-shadow:0 0 0 3px var(--void), 0 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent), 0 8px 0 0 var(--shadow), 0 0 48px -4px color-mix(in srgb, var(--accent) 42%, transparent);margin:40px 0 24px;padding:28px 24px 22px;position:relative}.marquee h1{letter-spacing:.04em;color:var(--ink);text-shadow:3px 3px 0 color-mix(in srgb, var(--accent) 88%, transparent), 6px 6px 0 var(--shadow);margin:0;font-family:Silkscreen,Courier New,monospace;font-size:clamp(1.15rem,5.2vw,3.4rem);font-weight:700;line-height:1.15}.marquee-sub{letter-spacing:.24em;text-transform:uppercase;color:var(--dim);margin:18px 0 0;font-family:Silkscreen,Courier New,monospace;font-size:.6rem}.marquee-sub b{color:var(--accent);font-weight:400}.controlbar{z-index:100;background:var(--void);border-bottom:2px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;padding:12px 0;display:flex;position:sticky;top:0;box-shadow:0 6px 0 -2px #0006}#searchBar{min-width:0;color:var(--ink);background:var(--panel);border:2px solid var(--line);outline:none;flex:220px;padding:12px 14px;font-family:inherit;font-size:.9rem}#searchBar::placeholder{color:var(--dim)}#searchBar:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent)}.btn{letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--panel-hi);border:2px solid var(--line);box-shadow:0 4px 0 0 var(--shadow);cursor:pointer;align-items:center;gap:8px;padding:12px 14px;font-family:Silkscreen,Courier New,monospace;font-size:.6rem;text-decoration:none;transition:transform 80ms steps(2,end),box-shadow 80ms steps(2,end),border-color 80ms steps(2,end);display:inline-flex}.btn:hover{border-color:var(--accent)}.btn:active{box-shadow:0 0 0 0 var(--shadow);transform:translateY(4px)}.btn-random{color:var(--accent)}.btn-theme{color:var(--ink)}.btn-panic{color:var(--danger);border-color:color-mix(in srgb, var(--danger) 55%, var(--line))}.btn-panic:hover{border-color:var(--danger)}.btn:before{content:"";background:currentColor;width:8px;height:8px}.section-title{letter-spacing:.18em;text-transform:uppercase;color:var(--dim);align-items:center;gap:10px;margin:36px 0 14px;font-family:Silkscreen,Courier New,monospace;font-size:.7rem;font-weight:400;display:flex}.section-title:before{content:"";background:var(--mark,var(--accent));width:10px;height:10px;box-shadow:0 0 12px -2px var(--mark,var(--accent))}.section-title.is-fav{--mark:var(--coin)}.section-title.is-hot{--mark:var(--danger)}.grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;display:grid}.game-card{height:110px;color:var(--ink);background:var(--panel);border:2px solid var(--line);box-shadow:0 3px 0 0 var(--shadow);flex-direction:column;padding:14px;transition:transform 90ms steps(3,end),box-shadow 90ms steps(3,end),border-color 90ms steps(2,end);display:flex;position:relative;overflow:hidden}.game-card:hover{border-color:var(--accent);box-shadow:0 6px 0 0 var(--shadow), inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);transform:translateY(-3px)}.card-body{cursor:pointer;flex-direction:column;height:100%;display:flex}.card-body:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.game-name{-webkit-line-clamp:2;overflow-wrap:anywhere;-webkit-box-orient:vertical;margin-bottom:6px;padding-right:26px;font-size:.9rem;font-weight:500;line-height:1.3;display:-webkit-box;overflow:hidden}.play-count{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--dim);font-size:.68rem}.launch-btn{letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:auto;font-family:Silkscreen,Courier New,monospace;font-size:.55rem;transition:color 90ms steps(2,end)}.game-card:hover .launch-btn{color:var(--accent)}.fav-btn{z-index:5;width:34px;height:34px;color:var(--line);cursor:pointer;background:0 0;border:none;padding:0;font-size:1.05rem;line-height:1;transition:color 90ms steps(2,end),transform 90ms steps(2,end);position:absolute;top:4px;right:4px}.fav-btn:hover{color:var(--dim);transform:scale(1.15)}.fav-btn.active{color:var(--coin);text-shadow:0 0 12px color-mix(in srgb, var(--coin) 60%, transparent)}.fav-btn:focus-visible{outline:2px solid var(--accent);outline-offset:0}.loader-container{text-align:center;flex-direction:column;grid-column:1/-1;justify-content:center;align-items:center;height:46vh;display:flex}.loader-container h3{letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 8px;font-family:Silkscreen,Courier New,monospace;font-size:.85rem;font-weight:400}.loader-container p{color:var(--dim);margin:0;font-size:.85rem}.loader-container.is-error h3{color:var(--danger)}.pixel-loader{gap:8px;margin-bottom:20px;display:flex}.pixel-loader span{background:var(--accent);width:14px;height:14px;box-shadow:0 0 14px -2px var(--accent);animation:.9s steps(2,end) infinite blink}.pixel-loader span:nth-child(2){animation-delay:.15s}.pixel-loader span:nth-child(3){animation-delay:.3s}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:.15}}.no-results{text-align:center;background:var(--panel);border:2px dashed var(--line);grid-column:1/-1;padding:32px 24px}.no-results h3{letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 8px;font-family:Silkscreen,Courier New,monospace;font-size:.8rem;font-weight:400}.no-results p{color:var(--dim);margin:0;font-size:.85rem}body.is-searching #favSection,body.is-searching #trendingSection{display:none!important}@keyframes rainbow{0%{filter:hue-rotate()}to{filter:hue-rotate(360deg)}}body.psychedelic{background-color:#000;animation:2s linear infinite rainbow}body.psychedelic .game-card{box-shadow:0 3px 0 0 var(--shadow), inset 0 0 0 1px #fff;border-color:#fff}.potato-rain{z-index:9990;pointer-events:none;position:fixed;inset:0;overflow:hidden}.potato{top:-8vh;left:var(--x,50%);line-height:1;animation-name:potato-fall;animation-timing-function:steps(24,end);animation-fill-mode:both;position:absolute}@keyframes potato-fall{0%{opacity:0;transform:translateY(0)rotate(0)}8%{opacity:1}to{transform:translateY(118vh) rotate(var(--spin,360deg));opacity:1}}@keyframes potato-settle{0%{opacity:0;transform:scale(.8)}20%,70%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.marquee{box-shadow:0 0 0 3px var(--void), 0 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent), 0 8px 0 0 var(--shadow)}.potato{top:var(--y,45%)!important;animation-name:potato-settle!important;animation-duration:2.6s!important;animation-timing-function:ease!important}}@media (width<=620px){body{padding:0 12px 48px}.marquee{margin-top:24px;padding:20px 16px 16px}.grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}.game-card{height:116px;padding:12px}.btn{flex:auto;justify-content:center}}
