:root{--bg: #0b0a1f;--bg-2: #14122e80;--panel: #1b1942;--panel-2: #221f52;--ink: #fff4ff;--ink-dim: #b6aee6;--ink-faint: #6f67a8;--line: #353063;--accent: #00e5ff;--accent2: #ff4dd8;--good: #5dffa0;--warn: #ffd23f;--bad: #ff5d6c;--radius: 20px;--shadow: 0 22px 60px -22px rgba(0, 0, 0, .85);--display: "Bungee", "Arial Black", system-ui, sans-serif;--font: "Baloo 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", monospace;--spring: cubic-bezier(.34, 1.56, .64, 1);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(1100px 640px at 82% -12%,#34216e 0%,transparent 55%),radial-gradient(900px 620px at -12% 112%,#5a1b6e 0%,transparent 52%),radial-gradient(700px 700px at 50% 50%,#16143a 0%,transparent 70%),var(--bg);color:var(--ink);font-family:var(--font);font-weight:600;-webkit-font-smoothing:antialiased;overflow-x:hidden}body:before{content:"";position:fixed;inset:-20%;z-index:-2;background:radial-gradient(420px 420px at 20% 30%,rgba(0,229,255,.12),transparent 60%),radial-gradient(460px 460px at 80% 70%,rgba(255,77,216,.12),transparent 60%),radial-gradient(380px 380px at 60% 20%,rgba(255,210,63,.08),transparent 60%);animation:drift 26s ease-in-out infinite alternate;pointer-events:none}body:after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;background:repeating-linear-gradient(to bottom,#0000 0 2px,#0000000f 3px),radial-gradient(120% 120% at 50% 50%,transparent 62%,rgba(0,0,0,.42) 100%);mix-blend-mode:multiply}@keyframes drift{0%{transform:translate3d(-2%,-1%,0) scale(1.02)}to{transform:translate3d(2%,2%,0) scale(1.06)}}#app{min-height:100%;position:relative;z-index:1}button{font-family:inherit}a{color:inherit;text-decoration:none}.btn{appearance:none;border:none;background:var(--panel-2);color:var(--ink);padding:.7rem 1.3rem;border-radius:14px;font-family:var(--font);font-weight:800;font-size:1rem;letter-spacing:.01em;cursor:pointer;box-shadow:0 5px #0c0a24,0 10px 18px -8px #000000b3;transition:transform .07s ease,box-shadow .07s ease,filter .15s ease}.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(4px);box-shadow:0 1px #0c0a24,0 4px 10px -6px #000000b3}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#120627;box-shadow:0 5px #6c1a63,0 12px 26px -10px var(--accent)}.btn-primary:active{box-shadow:0 1px #6c1a63,0 6px 14px -8px var(--accent)}.btn-ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--line)}.btn-ghost:active{transform:translateY(2px)}.hub{max-width:1200px;margin:0 auto;padding:clamp(1.4rem,4vw,3.2rem) clamp(1rem,4vw,2rem) 4rem}.hub-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;margin-bottom:2.6rem}.hub-badge{font-family:var(--mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#120627;background:var(--warn);padding:.34rem .85rem;border-radius:999px;font-weight:700;transform:rotate(-2deg);box-shadow:0 4px #a8791b;animation:bob 3s ease-in-out infinite}@keyframes bob{50%{transform:rotate(-2deg) translateY(-4px)}}.hub-title{font-family:var(--display);font-size:clamp(2.6rem,9vw,6rem);line-height:.96;margin:.2rem 0 0;letter-spacing:.01em;background:linear-gradient(100deg,#00e5ff,#ffd23f 38%,#ff4dd8 70%,#7c4dff);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35)) drop-shadow(0 0 24px rgba(255,77,216,.35));animation:marquee-hue 8s linear infinite}@keyframes marquee-hue{to{background-position:250% 0}}.hub-sub{color:var(--ink-dim);font-size:clamp(1rem,2.3vw,1.18rem);max-width:48ch;margin:0}.hub-meta{margin-top:.8rem;display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}.hub-meta span{font-family:var(--mono);font-size:.78rem;color:var(--ink-dim);background:var(--bg-2);border:1px solid var(--line);padding:.3rem .7rem;border-radius:999px}.hub-meta b{color:var(--ink)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:1.3rem}.card{position:relative;display:flex;flex-direction:column;gap:.45rem;padding:1.15rem 1.2rem 1.3rem;min-height:212px;border-radius:var(--radius);border:2px solid var(--line);background:linear-gradient(165deg,var(--panel),var(--panel-2));overflow:hidden;cursor:pointer;transform:rotate(var(--rot, 0deg));box-shadow:0 10px 0 -2px #0c0a24,var(--shadow);opacity:0;animation:pop-in .5s var(--spring) forwards;animation-delay:calc(var(--i, 0) * 55ms);transition:transform .22s var(--spring),border-color .2s ease,box-shadow .22s ease}@keyframes pop-in{0%{opacity:0;transform:rotate(var(--rot, 0deg)) translateY(22px) scale(.92)}to{opacity:1;transform:rotate(var(--rot, 0deg)) translateY(0) scale(1)}}.card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 6%,var(--card-accent, var(--accent)) 0%,transparent 46%);opacity:.2;transition:opacity .2s ease}.card:after{content:"";position:absolute;top:-60%;left:-120%;width:60%;height:220%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:rotate(8deg);transition:left .5s ease;pointer-events:none}.card:hover{transform:rotate(0) translateY(-8px) scale(1.035);border-color:var(--card-accent, var(--accent));box-shadow:0 14px 0 -2px #0c0a24,0 30px 50px -20px var(--card-accent, #000)}.card:hover:before{opacity:.4}.card:hover:after{left:130%}.card:focus-visible{outline:3px solid var(--card-accent, var(--accent));outline-offset:3px}.card-glyph{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,var(--card-accent),var(--card-accent2));box-shadow:0 8px #00000040,0 12px 26px -12px var(--card-accent);transition:transform .3s var(--spring)}.card:hover .card-glyph{animation:wiggle .5s ease}@keyframes wiggle{25%{transform:rotate(-9deg) scale(1.08)}60%{transform:rotate(7deg) scale(1.08)}}.card-glyph svg{width:38px;height:38px}.card-genre{position:absolute;top:1.1rem;right:1.1rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#120627;font-weight:700;padding:.28rem .6rem;border-radius:999px;background:var(--card-accent, var(--accent))}.card-title{font-family:var(--display);font-size:1.18rem;margin:.5rem 0 0;position:relative;letter-spacing:.005em}.card-tag{color:var(--ink-dim);font-size:.92rem;font-weight:600;line-height:1.32;margin:0;flex:1;position:relative}.card-foot{font-family:var(--mono);font-size:.7rem;color:var(--ink-faint);position:relative;display:flex;align-items:center;gap:.4rem;text-transform:uppercase;letter-spacing:.08em}.card-foot:before{content:"▶";color:var(--card-accent);font-size:.62rem}.card-play{position:absolute;bottom:1.15rem;right:1.1rem;font-family:var(--display);font-size:.72rem;color:#120627;background:var(--card-accent, var(--accent));padding:.3rem .7rem;border-radius:999px;transform:translateY(140%);opacity:0;transition:transform .25s var(--spring),opacity .2s ease;box-shadow:0 4px #0000004d}.card:hover .card-play{transform:translateY(0);opacity:1}.hub-foot{margin-top:3.2rem;color:var(--ink-faint);font-size:.84rem;text-align:center}.shell{display:flex;flex-direction:column;height:100dvh}.shell-bar{display:flex;align-items:center;gap:.8rem;padding:.65rem clamp(.8rem,3vw,1.4rem);border-bottom:2px solid var(--line);background:#0b0a1fb8;backdrop-filter:blur(10px);z-index:5}.shell-back{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:12px;color:var(--ink);font-weight:800;font-size:.92rem;cursor:pointer;background:var(--panel-2);box-shadow:0 4px #0c0a24;transition:transform .07s ease,box-shadow .07s ease}.shell-back:hover{filter:brightness(1.1)}.shell-back:active{transform:translateY(3px);box-shadow:0 1px #0c0a24}.shell-title{font-family:var(--display);font-size:1.02rem;letter-spacing:.01em}.shell-genre{font-family:var(--mono);font-size:.66rem;color:var(--accent);text-transform:uppercase;letter-spacing:.14em}.shell-spacer{flex:1}.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:none;background:var(--panel-2);color:var(--ink);cursor:pointer;font-size:1.1rem;box-shadow:0 4px #0c0a24;transition:transform .07s ease,box-shadow .07s ease}.icon-btn:active{transform:translateY(3px);box-shadow:0 1px #0c0a24}.shell-stage{flex:1;position:relative;min-height:0;display:flex;overflow:hidden}.game-root{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}.hud{display:flex;gap:.7rem;flex-wrap:wrap;padding:.6rem .9rem;background:var(--bg-2);border-bottom:2px solid var(--line)}.hud-stat{display:flex;flex-direction:column;line-height:1.05;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.35rem .8rem}.hud-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}.hud-value{font-family:var(--display);font-size:1.05rem;font-variant-numeric:tabular-nums}.ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#070614bd;backdrop-filter:blur(7px);z-index:20;padding:1rem}.ov-card{background:linear-gradient(165deg,var(--panel),var(--panel-2));border:2px solid var(--line);border-radius:var(--radius);padding:2rem;max-width:400px;width:100%;text-align:center;display:flex;flex-direction:column;gap:.7rem;box-shadow:0 12px 0 -2px #0c0a24,var(--shadow);animation:ov-pop .35s var(--spring)}@keyframes ov-pop{0%{opacity:0;transform:translateY(16px) scale(.94)}}.ov-title{font-family:var(--display);margin:0;font-size:1.7rem;background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}.ov-line{margin:0;color:var(--ink-dim)}.ov-card .btn{margin-top:.7rem}.center-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1rem;text-align:center}.loading{color:var(--ink-dim);font-family:var(--mono)}@media(prefers-reduced-motion:reduce){*,body:before{animation:none!important}.card{opacity:1}}@media(max-width:560px){.hud{gap:.5rem}.hud-value{font-size:.95rem}}.hub-trophy{margin-top:.4rem;text-decoration:none}.ach-toast-host{position:fixed;top:14px;right:14px;z-index:10000;display:flex;flex-direction:column;gap:10px;pointer-events:none}.ach-toast{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem .7rem .7rem;border-radius:14px;background:linear-gradient(165deg,var(--panel),var(--panel-2));border:2px solid var(--warn);box-shadow:0 6px 0 -2px #0c0a24,var(--shadow);transform:translate(140%);opacity:0;transition:transform .4s var(--spring),opacity .3s ease}.ach-toast.show{transform:translate(0);opacity:1}.ach-toast-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:1.4rem;background:linear-gradient(135deg,var(--warn),#ff8a3f);box-shadow:0 4px #0000004d}.ach-toast-kicker{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--warn)}.ach-toast-title{font-family:var(--display);font-size:.98rem}.records{max-width:1100px;margin:0 auto;padding:clamp(1rem,4vw,2.4rem) clamp(1rem,4vw,2rem) 4rem}.rec-bar{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}.rec-title{font-family:var(--display);font-size:clamp(1.6rem,5vw,2.6rem);margin:0;background:linear-gradient(110deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}.rec-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin-bottom:2rem}.rec-stat{display:flex;flex-direction:column;gap:.2rem;padding:1rem;border-radius:14px;border:2px solid var(--line);background:linear-gradient(165deg,var(--panel),var(--panel-2));box-shadow:0 6px 0 -2px #0c0a24}.rec-stat-value{font-family:var(--display);font-size:1.5rem}.rec-stat-label{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}.rec-h2{font-family:var(--display);font-size:1.2rem;margin:2rem 0 1rem}.rec-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem}.rec-game{display:block;padding:1rem;border-radius:14px;border:2px solid var(--line);background:linear-gradient(165deg,var(--panel),var(--panel-2));box-shadow:0 6px 0 -2px #0c0a24;transition:transform .15s var(--spring),border-color .2s ease}.rec-game:hover{transform:translateY(-3px);border-color:var(--card-accent, var(--accent))}.rec-game-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}.rec-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--card-accent),var(--card-accent2))}.rec-game-name{font-family:var(--display);font-size:.95rem}.rec-metrics{display:flex;flex-direction:column;gap:.3rem}.rec-metric{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}.rec-metric-label{font-size:.82rem;color:var(--ink-dim)}.rec-metric-value{font-family:var(--display);font-size:.95rem;font-variant-numeric:tabular-nums}.rec-empty{font-size:.82rem;color:var(--ink-faint);font-style:italic}.ach-section{margin-bottom:1.6rem}.ach-section-title{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 .7rem}.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem}.ach-card{display:flex;align-items:flex-start;gap:.7rem;padding:.8rem;border-radius:14px;border:2px solid var(--line);background:var(--panel);opacity:.7}.ach-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.3rem}.ach-titlerow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.ach-tier{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.12rem .4rem;border-radius:999px}.ach-tier-locked{color:var(--ink-faint);border:1px solid var(--line)}.ach-card.is-unlocked{opacity:1;border-color:var(--warn);background:linear-gradient(165deg,var(--panel),var(--panel-2))}.ach-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:1.3rem;background:var(--panel-2);filter:grayscale(1)}.ach-card.is-unlocked .ach-icon{filter:none;background:linear-gradient(135deg,var(--warn),#ff8a3f);box-shadow:0 3px #0000004d}.ach-name{font-family:var(--display);font-size:.86rem}.ach-desc{font-size:.78rem;color:var(--ink-dim);line-height:1.25}.ach-progress{display:flex;align-items:center;gap:8px;margin-top:.1rem}.ach-progress-track{flex:1;height:5px;border-radius:3px;background:var(--bg-2);overflow:hidden}.ach-progress-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .3s ease}.ach-progress-text{font-family:var(--mono);font-size:.62rem;color:var(--ink-faint);white-space:nowrap}