:root{--bg:#0d1230;--bg-hi:#141a3e;--bg-lo:#080b22;--grid:#34489c;--grid-soft:#263573;--panel:#1a224a9e;--panel-2:#121838a8;--panel-edge:#465aa573;--panel-edge-hi:#6078d2b3;--text:#f0f0e8;--dim:#aaaebe;--accent:#f8c850;--ink-gold:#f8c850;--silver:#c9cbd6;--cream:#f0f0e8;--twitch:#a970ff;--kick:#53fc18;--youtube:#ff5a52;--red:#e85252;--line:#aaaebe1f;--line-2:#aaaebe3d;--tod-glow-a:#606ebe14;--tod-glow-b:#3c4a8c12;--tod-texture:#10163008;--gbc-panel:#1c22408c;--gbc-border:#aaaebe29;--gbc-inner:#aaaebe0f;--gbc-title:linear-gradient(180deg, #ffd970, #f8c850);--gbc-screen:#0c0f2099;--gbc-screen-ink:#f0f0e8;--gbc-bezel:#080a16cc;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--t-fast:.15s;--t-med:.2s;--t-slow:.25s}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:radial-gradient(1200px 800px at 50% -8%, var(--tod-glow-a), transparent 62%), radial-gradient(1000px 760px at 88% 112%, var(--tod-glow-b), transparent 58%), radial-gradient(140% 120% at 50% 0%, transparent 55%, #0407148c 100%), linear-gradient(180deg, var(--bg-hi) 0%, var(--bg) 46%, var(--bg-lo) 100%);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;transition:background 2s;position:relative}body:before{content:"";z-index:-1;pointer-events:none;background: linear-gradient(180deg, transparent 0%, transparent 52%, var(--bg) 52%), repeating-linear-gradient(90deg, var(--grid) 0, var(--grid) 1px, transparent 1px, transparent 46px), repeating-linear-gradient(0deg, var(--grid-soft) 0, var(--grid-soft) 1px, transparent 1px, transparent 46px);transform-origin:50% 0;opacity:.85;background-size:100% 100%,46px 46px,100% 46px;position:fixed;inset:0;transform:perspective(620px)rotateX(60deg)scale(2);-webkit-mask:linear-gradient(#000 0%,#0006 42%,#0000 66%);mask:linear-gradient(#000 0%,#0006 42%,#0000 66%)}body:after{content:"";z-index:-1;pointer-events:none;background:repeating-linear-gradient(90deg, var(--grid) 0, var(--grid) 1px, transparent 1px, transparent 46px), repeating-linear-gradient(0deg, var(--grid-soft) 0, var(--grid-soft) 1px, transparent 1px, transparent 46px);transform-origin:50% 100%;opacity:.6;background-size:46px 46px,100% 46px;position:fixed;inset:0;transform:perspective(620px)rotateX(-60deg)scale(2);-webkit-mask:linear-gradient(#0000 42%,#000000f2 100%);mask:linear-gradient(#0000 42%,#000000f2 100%)}@media (prefers-reduced-motion:reduce),(prefers-contrast:more){body:before,body:after{opacity:.14;transform:none;-webkit-mask:none;mask:none}}body[data-tod=dawn]{--tod-glow-a:#9682d21c;--tod-glow-b:#6078d214;--bg-hi:#182046;--accent:#ffcf66;--line:#96a0d221;--line-2:#96a0d242;--tod-texture:#1e1a3808}body[data-tod=day]{--tod-glow-a:#6ea5f521;--tod-glow-b:#60d0e014;--bg-hi:#1a2452;--accent:#f8c850;--line:#96a8d624;--line-2:#96a8d647;--tod-texture:#141e3c08}body[data-tod=dusk]{--tod-glow-a:#d278781c;--tod-glow-b:#6e5abe17;--bg-hi:#171b44;--accent:#ffbe4d;--line:#b4a0be21;--line-2:#b4a0be42;--tod-texture:#26183008}body[data-tod=night]{--tod-glow-a:#465ab417;--tod-glow-b:#303e8214;--bg-hi:#121740;--accent:#f0c460;--line:#96a0c81f;--line-2:#96a0c83d;--tod-texture:#0c122c08}a{color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.press{font-family:"Press Start 2P",monospace}.wrap{z-index:0;max-width:1180px;margin:0 auto;padding:0 clamp(14px,3vw,24px);position:relative}img.sprite,img.pxa{image-rendering:pixelated}.c-twitch{color:var(--twitch)}.c-kick{color:var(--kick)}.c-youtube{color:var(--youtube)}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px}.live-badge{letter-spacing:2px;border:1px solid var(--line);color:var(--dim);transition:color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out), background var(--t-med) var(--ease-out);border-radius:999px;align-items:center;gap:9px;padding:8px 18px;font-size:13px;font-weight:800;display:inline-flex}.live-badge.on{color:var(--red);background:#e0404012;border-color:#e0404073}.live-badge .dot{background:currentColor;border-radius:50%;width:8px;height:8px}.live-badge.on .dot{animation:1.6s infinite pulse}@keyframes pulse{50%{opacity:.3}}.btn{cursor:pointer;border:1px solid var(--line-2);background:var(--panel);min-height:44px;color:var(--text);transition:transform var(--t-fast) var(--ease-spring), filter var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out);border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:11px 20px;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex}.btn:hover{filter:brightness(1.12);transform:translateY(-2px)scale(1.02);box-shadow:0 6px 18px #00000059}.btn:active{transform:translateY(0)scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.btn.tw,.btn.kk,.btn.yt{color:var(--text);background:var(--panel)}.btn.tw{background:linear-gradient(180deg, #a970ff1f, #a970ff08), var(--panel);border-color:#a970ff73}.btn.kk{background:linear-gradient(180deg, #53fc1814, #53fc1805), var(--panel);border-color:#53fc1859}.btn.yt{background:linear-gradient(180deg, #ff5a521a, #ff5a5208), var(--panel);border-color:#ff5a5273}.btn.tw:hover{border-color:#a970ffa6;box-shadow:0 6px 18px #00000059}.btn.kk:hover{border-color:#53fc1880;box-shadow:0 6px 18px #00000059}.btn.yt:hover{border-color:#ff5a5299;box-shadow:0 6px 18px #00000059}.cmd-chip{color:#101018;vertical-align:middle;background:#ffffde;border:2px solid #3a2a00;border-radius:6px;padding:6px 8px 8px;font-family:"Press Start 2P",monospace;font-size:11px;line-height:1;display:inline-block;box-shadow:0 3px #3a2a00}.tag{color:var(--dim);text-transform:uppercase;letter-spacing:1.5px;font-size:12px}.mono{font-variant-numeric:tabular-nums}.gbc-shell{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid var(--panel-edge);transition:border-color var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease-out);background:linear-gradient(#182046eb,#0d122cf0);border-radius:14px;padding:clamp(14px,2.5vw,20px);position:relative;box-shadow:inset 0 1px #788cd21a,0 12px 32px #00000073,0 2px 8px #0000004d}.gbc-shell:hover{border-color:var(--panel-edge-hi)}.gbc-title{color:#16193a;letter-spacing:1px;background:var(--gbc-title);text-shadow:0 1px #ffffff47;border-radius:8px 8px 4px 4px;flex-wrap:wrap;align-items:center;gap:10px;min-width:0;margin:0 0 14px;padding:9px 14px;font-family:"Press Start 2P",monospace;font-size:clamp(9px,1.6vw,12px);line-height:1.6;display:flex;box-shadow:inset 0 0 0 1px #ffffff2e,0 2px 8px #0000004d}.gbc-title:before{content:"";width:16px;height:16px;image-rendering:pixelated;transform-origin:0;background:url(/rom-ui/ball-caught.png) 50%/contain no-repeat;flex:none;margin-right:6px;transform:scale(1.6)}.gbc-screen{background:var(--gbc-screen);color:var(--gbc-screen-ink);border:1px solid #aaaebe1a;border-radius:12px;padding:12px}.gbc-bezel{background:var(--gbc-bezel);border:1px solid #aaaebe17;border-radius:12px;padding:3px;box-shadow:inset 0 2px 6px #0006}.rise{animation:rise .45s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tick{animation:tick .35s var(--ease-spring) both}@keyframes tick{0%{opacity:0;transform:translateY(6px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.row-lift{transition:transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out)}.row-lift:hover{transform:translate(3px)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}html{scroll-behavior:auto}}.scanlines:after{content:"";pointer-events:none;z-index:9;background:repeating-linear-gradient(to bottom, #0000 0, #0000 2px, var(--tod-texture) 3px, var(--tod-texture) 4px);transition:background 2s;position:fixed;inset:0}.badge-case{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}@media (max-width:520px){.badge-case{grid-template-columns:repeat(4,1fr)}}.badge-slot{aspect-ratio:1;border:1px solid var(--line);transition:transform var(--t-fast) var(--ease-spring), border-color var(--t-fast) var(--ease-out);background:#0000004d;border-radius:10px;justify-content:center;align-items:center;display:flex}.badge-slot:hover{transform:scale(1.08)}.badge-slot img{width:78%;image-rendering:pixelated}.badge-slot.locked img{filter:grayscale()brightness(.4);opacity:.5}.badge-slot.got{background:#f8c8500f;border-color:#f8c85066}.badge-slot.got img{filter:drop-shadow(0 1px 3px #00000080)}.plat-pill{letter-spacing:.5px;text-transform:uppercase;border-radius:999px;align-items:center;gap:7px;padding:3px 9px 3px 6px;font-size:11px;font-weight:700;display:inline-flex}.plat-pill img{width:13px;height:13px}.plat-pill.twitch{color:var(--twitch);background:#a970ff24}.plat-pill.kick{color:var(--kick);background:#53fc181a}.plat-pill.youtube{color:var(--youtube);background:#ff5a521f}.rank-medal{background:var(--panel-2);width:26px;height:26px;color:var(--dim);border-radius:50%;justify-content:center;align-items:center;font-family:"Press Start 2P",monospace;font-size:10px;display:inline-flex}.rank-medal.g1{color:#18181c;background:linear-gradient(#ffd970,#f8c850)}.rank-medal.g2{color:#18181c;background:linear-gradient(#e6e8f2,#aaaebe)}.rank-medal.g3{color:#241000;background:linear-gradient(#e0a06a,#b07038)}.hpbar{width:96px;height:8px;image-rendering:pixelated;background:url(/rom-ui/hpbar.png) 0 0/96px 8px no-repeat;position:relative}.hpbar .fill{max-width:64px;height:4px;transition:width .6s var(--ease-out), background .6s var(--ease-out);background:linear-gradient(#73ffac,#5ad583);position:absolute;top:2px;left:30px}.hpbar .fill.mid{background:linear-gradient(#ffe739,#cead08)}.hpbar .fill.low{background:linear-gradient(#ff8c6b,#de6b5a)}.hero-sprite{image-rendering:pixelated;filter:drop-shadow(0 8px 14px #00000080);animation:3s ease-in-out infinite hero-bob}@keyframes hero-bob{50%{transform:translateY(-6px)}}.livenow-rows{flex-direction:column;gap:8px;display:flex}.livenow-row{background:#0000002e;border:1px solid #ffffff0f;border-radius:6px;align-items:center;gap:10px;padding:8px 10px;display:flex}.livenow-row.is-live{border-color:#f8c85059}.livenow-name{min-width:72px;font-size:14px;font-weight:700}.livenow-chip{letter-spacing:1px;color:#f0f0e8;background:#c02e2e;border-radius:3px;padding:2px 7px;font-size:10px;font-weight:800;animation:1.6s ease-in-out infinite livenow-pulse}@keyframes livenow-pulse{50%{opacity:.55}}@media (prefers-reduced-motion:reduce){.livenow-chip{animation:none}}.livenow-count{color:var(--dim);font-size:12px}.livenow-offline{color:var(--dim);opacity:.7;font-size:12px}.livenow-watch{letter-spacing:.5px;white-space:nowrap;border:1px solid;border-radius:5px;margin-left:auto;padding:5px 10px;font-size:11px;font-weight:800;text-decoration:none}.livenow-watch:hover{background:#ffffff0f}.pcbox-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px;display:grid}.pcbox-slot{aspect-ratio:1;border:1px solid var(--panel-edge);background:radial-gradient(circle at 50% 42%,#6078d229,#080b228c 70%);border-radius:5px;justify-content:center;align-items:center;display:flex;box-shadow:inset 0 1px 3px #0006}.pcbox-slot img{image-rendering:pixelated}.pcbox-egg{font-size:18px}
