:root {
  --neo-bg: #05060a;
  --neo-panel: #0c0e16;
  --neo-panel-2: #111521;
  --neo-line: rgba(255,255,255,.09);
  --neo-soft: rgba(255,255,255,.58);
  --neo-faint: rgba(255,255,255,.34);
  --neo-coral: #ff5b3d;
  --neo-mint: #36f1c7;
  --neo-violet: #896cff;
  --neo-gold: #ffc857;
  --glow-coral: 0 0 34px rgba(255,91,61,.35);
  --glow-mint: 0 0 34px rgba(54,241,199,.3);
  --platform-max: 1480px;
}

html { background: var(--neo-bg); }
body {
  color: #f6f7fb;
  background:
    radial-gradient(circle at 60% -10%, rgba(137,108,255,.12), transparent 35%),
    radial-gradient(circle at 10% 55%, rgba(255,91,61,.08), transparent 30%),
    var(--neo-bg);
}
body::selection { background: var(--neo-mint); color: #05060a; }

.ambient-world { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient-orb { position: absolute; width: 46vw; aspect-ratio: 1; border-radius: 50%; filter: blur(110px); opacity: .11; animation: ambientFloat 18s ease-in-out infinite alternate; }
.orb-one { background: var(--neo-coral); left: -20%; top: -12%; }
.orb-two { background: var(--neo-violet); right: -18%; top: 28%; animation-delay: -7s; animation-duration: 23s; }
.orb-three { width: 30vw; background: var(--neo-mint); left: 35%; bottom: -20%; animation-delay: -12s; }
.ambient-grid {
  position: absolute; left: -20%; right: -20%; bottom: -20%; height: 65%;
  background-image: linear-gradient(rgba(54,241,199,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(54,241,199,.075) 1px, transparent 1px);
  background-size: 54px 54px; mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 65%, transparent);
  transform: perspective(450px) rotateX(66deg); transform-origin: center top; animation: gridDrive 9s linear infinite;
}
.ambient-noise { position: absolute; inset: 0; opacity: .16; background-image: repeating-radial-gradient(circle at 0 0,rgba(255,255,255,.07) 0 1px,transparent 1px 5px),repeating-linear-gradient(115deg,transparent 0 17px,rgba(255,255,255,.025) 18px,transparent 19px 33px); background-size: 7px 7px,37px 37px; mix-blend-mode: soft-light; }
.cursor-glow { position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(54,241,199,.075), transparent 68%); transform: translate(-50%,-50%); transition: left .12s ease-out, top .12s ease-out; }
@keyframes ambientFloat { to { transform: translate3d(12vw, 8vh, 0) scale(1.15); } }
@keyframes gridDrive { to { background-position: 0 54px, 0 54px; } }

.app-shell { position: relative; overflow: hidden; }
.topbar {
  height: 74px;
  padding: 0 max(24px, calc((100vw - var(--platform-max)) / 2));
  background: rgba(5,6,10,.72); border-color: var(--neo-line); color: white;
  box-shadow: 0 14px 45px rgba(0,0,0,.25); backdrop-filter: blur(22px) saturate(145%);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(54,241,199,.5), rgba(137,108,255,.45), transparent); transform: scaleX(.72); }
.brand { color: white; letter-spacing: -.04em; }
.brand > span:last-child { display: grid; line-height: 1; }
.brand small { margin-top: 3px; color: var(--neo-mint); font: 500 6px/1 "DM Mono",monospace; letter-spacing: .34em; }
.brand-mark { border-radius: 10px; transform: rotate(-3deg); background: linear-gradient(135deg, var(--neo-coral), #ff805e); box-shadow: var(--glow-coral); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.brand:hover .brand-mark { transform: rotate(8deg) scale(1.08); }
.main-nav { gap: 8px; height: auto; padding: 5px; border: 1px solid var(--neo-line); border-radius: 40px; background: rgba(255,255,255,.035); }
.main-nav a { min-height: 34px; padding: 0 17px; border-radius: 20px; color: rgba(255,255,255,.45); font-size: 11px; transition: .25s ease; }
.main-nav a::after { display: none; }
.main-nav a.active, .main-nav a:hover { background: rgba(255,255,255,.1); color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.network-state { display: flex; align-items: center; gap: 7px; color: var(--neo-faint); font: 500 7px/1 "DM Mono", monospace; letter-spacing: .16em; }
.network-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--neo-mint); box-shadow: 0 0 11px var(--neo-mint); animation: onlinePulse 1.8s ease-in-out infinite; }
@keyframes onlinePulse { 50% { opacity: .35; transform: scale(.7); } }
.status-chip, .icon-btn { border-color: var(--neo-line); color: rgba(255,255,255,.65); background: rgba(255,255,255,.035); border-radius: 10px; }
.status-chip:hover, .icon-btn:hover { background: rgba(255,255,255,.1); color: white; border-color: rgba(54,241,199,.3); }
.status-chip.connected { color: var(--neo-mint); }
.profile-button { color: white; }
.profile-label small { color: var(--neo-mint); }
.avatar { background: linear-gradient(145deg,#252b3b,#11141d); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 18px rgba(137,108,255,.17), 0 8px 20px rgba(0,0,0,.2); }

main > section { padding-left: max(24px, calc((100vw - var(--platform-max)) / 2)); padding-right: max(24px, calc((100vw - var(--platform-max)) / 2)); }
.hero {
  min-height: min(850px, calc(100vh - 32px)); grid-template-columns: .82fr 1.18fr;
  border: 0; position: relative;
}
.hero::before { content: "RETROCODE // PLAY WITHOUT LIMITS"; position: absolute; left: 24px; bottom: 80px; color: rgba(255,255,255,.14); font: 500 7px/1 "DM Mono",monospace; letter-spacing: .28em; writing-mode: vertical-rl; }
.hero-copy { padding-top: 110px; }
.live-season { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 27px; padding: 7px 10px; border: 1px solid var(--neo-line); border-radius: 20px; background: rgba(255,255,255,.03); color: var(--neo-faint); font: 500 7px/1 "DM Mono",monospace; letter-spacing: .12em; }
.live-season span { display: flex; align-items: center; gap: 5px; color: var(--neo-coral); }
.live-season span i { width: 5px; height: 5px; background: var(--neo-coral); border-radius: 50%; box-shadow: 0 0 8px var(--neo-coral); }
.live-season b { font-weight: 500; color: var(--neo-mint); }
.eyebrow { color: rgba(255,255,255,.43); }
.eyebrow span { background: linear-gradient(90deg,var(--neo-coral),var(--neo-violet)); box-shadow: 0 0 13px rgba(255,91,61,.5); }
.hero h1 { color: white; font-size: clamp(72px,6.4vw,108px); letter-spacing: -.085em; text-transform: uppercase; filter: drop-shadow(0 16px 36px rgba(0,0,0,.35)); }
.hero h1 em { display: inline-block; color: transparent; background: linear-gradient(90deg,var(--neo-coral),#ff9765 45%,var(--neo-violet)); -webkit-background-clip: text; background-clip: text; animation: titleGradient 5s ease infinite alternate; }
.hero h1 small { display: inline-block; margin-left: 13px; color: rgba(255,255,255,.58); font: 500 clamp(15px,1.5vw,24px)/1 "DM Mono",monospace; letter-spacing: -.06em; text-transform: lowercase; transform: translateY(-8px); }
@keyframes titleGradient { to { filter: hue-rotate(18deg) drop-shadow(0 0 15px rgba(255,91,61,.25)); } }
.hero-lede { color: rgba(255,255,255,.55); max-width: 550px; }
.primary-button { border-radius: 12px; overflow: hidden; box-shadow: 0 10px 34px rgba(255,91,61,.2); transform: translateZ(0); transition: transform .25s ease, box-shadow .25s ease; }
.primary-button span { background: linear-gradient(120deg,var(--neo-coral),#ff714b); color: white; position: relative; overflow: hidden; }
.primary-button span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 25%,rgba(255,255,255,.32) 50%,transparent 75%); transform: translateX(-130%); animation: buttonShine 3.7s ease-in-out infinite; }
.primary-button b { background: #f9fafc; color: #07080d; }
.primary-button:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 16px 42px rgba(255,91,61,.32); }
.primary-button:hover span { background: linear-gradient(120deg,#ff714b,var(--neo-coral)); }
.primary-button:hover b { background: var(--neo-mint); color: #05060a; }
.primary-button span i { position: relative; z-index: 1; font-style: normal; margin-right: 9px; font-size: 9px; }
@keyframes buttonShine { 55%,100% { transform: translateX(130%); } }
.text-button { color: rgba(255,255,255,.68); border-color: rgba(255,255,255,.28); }
.animated-link { position: relative; border: 0; }
.animated-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg,var(--neo-mint),var(--neo-violet)); transform-origin: left; transition: transform .3s ease; }
.animated-link:hover::after { animation: linkLine .7s ease; }
.animated-link i { margin-left: 7px; font-style: normal; transition: transform .25s ease; }
.animated-link:hover i { transform: translate(4px,4px); }
@keyframes linkLine { 50% { transform: scaleX(.2); } }
.hero-stats { gap: 15px; margin-top: 58px; }
.hero-stats div { grid-template-columns: auto 1fr; column-gap: 10px; min-width: 130px; padding: 13px 17px; border: 1px solid var(--neo-line) !important; border-radius: 13px; background: rgba(255,255,255,.025); backdrop-filter: blur(10px); transition: transform .25s ease,border-color .25s ease; }
.hero-stats div:hover { transform: translateY(-4px); border-color: rgba(54,241,199,.25) !important; }
.hero-stats .stat-icon { grid-row: 1 / 3; align-self: center; color: var(--neo-mint); font: 500 19px/1 "DM Mono",monospace; text-shadow: 0 0 16px rgba(54,241,199,.65); }
.hero-stats strong { color: white; font-size: 16px; }
.hero-stats span { color: var(--neo-faint); font-size: 7px; }

.hero-visual { min-height: 720px; height: 88%; align-self: center; margin-right: 0; background: radial-gradient(circle at 48% 42%, rgba(137,108,255,.12), transparent 35%); overflow: visible; perspective: 1200px; }
.hero-visual::before { content: ""; position: absolute; inset: 9% 2% 4%; border-radius: 40%; background: radial-gradient(ellipse at center, rgba(54,241,199,.08), transparent 65%); filter: blur(20px); }
.hero-visual::after { right: 1%; top: 15%; color: rgba(255,255,255,.13); }
.hero-grid { inset: 17% -12% 5%; opacity: .5; background-size: 44px 44px; border-radius: 50%; mask-image: radial-gradient(ellipse,#000 20%,transparent 70%); animation: gridPulse 6s ease-in-out infinite; }
@keyframes gridPulse { 50% { opacity: .72; transform: perspective(600px) rotateX(59deg) scale(1.58); } }
.stage-ring { position: absolute; left: 43%; top: 43%; border: 1px solid rgba(54,241,199,.2); border-radius: 50%; transform: translate(-50%,-50%) rotateX(68deg); animation: ringSpin 13s linear infinite; }
.ring-a { width: 520px; height: 520px; border-style: dashed; }
.ring-b { width: 370px; height: 370px; border-color: rgba(255,91,61,.26); animation-direction: reverse; animation-duration: 9s; }
@keyframes ringSpin { to { transform: translate(-50%,-50%) rotateX(68deg) rotateZ(360deg); } }
.stage-hud { position: absolute; z-index: 5; display: flex; gap: 13px; color: rgba(255,255,255,.3); font: 500 7px/1 "DM Mono",monospace; letter-spacing: .15em; }
.stage-hud b { color: var(--neo-mint); font-weight: 500; }
.hud-top { left: 10%; top: 7%; }.hud-side { right: 4%; bottom: 9%; writing-mode: vertical-rl; }
.feature-card { border-radius: 20px; overflow: hidden; transform-style: preserve-3d; box-shadow: 0 34px 90px rgba(0,0,0,.48); transition: transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease; }
.feature-card:hover { transform: translateY(-12px) rotateY(-4deg) rotateX(3deg); box-shadow: 0 44px 100px rgba(0,0,0,.55),var(--glow-coral); }
.feature-main { width: 53%; height: 54%; left: 13%; top: 18%; border: 1px solid rgba(255,255,255,.18); background: linear-gradient(145deg,#ff6849,#bb3021); box-shadow: 30px 30px 80px rgba(0,0,0,.48),14px 14px 0 rgba(54,241,199,.72); animation: mainCardFloat 5.8s ease-in-out infinite; }
@keyframes mainCardFloat { 50% { transform: translateY(-11px) rotateY(2deg); } }
.mini-game { background: radial-gradient(circle at 55% 42%,rgba(255,255,255,.16),transparent 46%),linear-gradient(155deg,rgba(255,255,255,.08),transparent); }
.mini-game b { box-shadow: 0 0 25px white,-35px 26px 8px -4px rgba(255,255,255,.34),-70px 52px 13px -5px rgba(255,255,255,.16); }
.feature-meta { background: rgba(4,5,8,.18); backdrop-filter: blur(15px); }
.feature-meta span i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; background: var(--neo-mint); border-radius: 50%; box-shadow: 0 0 8px var(--neo-mint); }
.feature-meta strong { text-shadow: 0 8px 20px rgba(0,0,0,.24); }
.feature-side { border-radius: 16px; right: 4%; box-shadow: 0 26px 60px rgba(0,0,0,.36); }
.feature-side.top { background: linear-gradient(145deg,#252b42,#151827); animation: sideFloat 5s ease-in-out infinite alternate; }
.feature-side.bottom { background: linear-gradient(145deg,#20352e,#101d19); animation: sideFloat 6.5s -2s ease-in-out infinite alternate; }
@keyframes sideFloat { to { transform: translateY(-13px) rotateY(-5deg); } }
.visual-caption { color: rgba(255,255,255,.26); }

.platform-rail { padding-top: 35px; padding-bottom: 105px; position: relative; }
.platform-rail::before { content: ""; position: absolute; left: 4%; right: 4%; top: 0; height: 1px; background: linear-gradient(90deg,transparent,var(--neo-line),transparent); }
.rail-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 25px; }
.rail-heading h2 { margin: 3px 0 0; font-size: 28px; letter-spacing: -.05em; }
.rail-kicker { color: var(--neo-mint); font: 500 7px/1 "DM Mono",monospace; letter-spacing: .18em; }
.rail-controls { display: flex; gap: 8px; }
.rail-controls button { width: 38px; height: 38px; border: 1px solid var(--neo-line); border-radius: 50%; color: white; background: rgba(255,255,255,.03); cursor: pointer; transition: .25s ease; }
.rail-controls button:hover { color: #05060a; background: var(--neo-mint); border-color: var(--neo-mint); transform: scale(1.08); }
.rail-track { display: flex; gap: 15px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 8px 8px 24px; margin: 0 -8px; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-game { flex: 0 0 min(340px,78vw); min-height: 145px; display: grid; grid-template-columns: auto 80px 1fr; gap: 16px; align-items: center; position: relative; overflow: hidden; padding: 21px; border: 1px solid var(--neo-line); border-radius: 18px; color: white; text-align: left; background: linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.015)); cursor: pointer; transform: perspective(800px) rotateX(0); transition: .35s cubic-bezier(.2,.8,.2,1); }
.rail-game::before { content: ""; position: absolute; width: 170px; height: 170px; right: -70px; top: -80px; border-radius: 50%; background: var(--rail-color); filter: blur(55px); opacity: .22; transition: opacity .3s ease,transform .5s ease; }
.rail-game::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%); transform: translateX(-120%); transition: transform .65s ease; }
.rail-game:hover { transform: perspective(800px) rotateX(3deg) translateY(-8px); border-color: color-mix(in srgb,var(--rail-color) 42%,transparent); box-shadow: 0 22px 55px rgba(0,0,0,.35); }
.rail-game:hover::before { opacity: .4; transform: scale(1.3); }.rail-game:hover::after { transform: translateX(120%); }
.rail-coral{--rail-color:var(--neo-coral)}.rail-mint{--rail-color:var(--neo-mint)}.rail-violet{--rail-color:var(--neo-violet)}.rail-gold{--rail-color:var(--neo-gold)}
.rail-index { color: rgba(255,255,255,.24); font: 500 8px/1 "DM Mono",monospace; align-self: start; }
.rail-symbol { width: 70px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 15px; color: var(--rail-color); background: rgba(255,255,255,.045); box-shadow: inset 0 0 25px color-mix(in srgb,var(--rail-color) 12%,transparent),0 12px 25px rgba(0,0,0,.22); font: 500 30px/1 "DM Mono",monospace; font-style: normal; text-shadow: 0 0 18px var(--rail-color); transition: transform .4s ease; }
.rail-game:hover .rail-symbol { transform: rotateY(180deg) scale(1.08); }
.rail-game div { display: grid; gap: 3px; position: relative; z-index: 1; }
.rail-game small { color: var(--rail-color); font: 500 7px/1 "DM Mono",monospace; letter-spacing: .12em; }
.rail-game strong { font-size: 15px; }
.rail-game em { margin-top: 10px; color: rgba(255,255,255,.38); font: 500 7px/1 "DM Mono",monospace; font-style: normal; }

.library-section { padding-top: 100px; padding-bottom: 120px; background: linear-gradient(180deg,rgba(12,14,22,.75),rgba(5,6,10,.4)); border-top: 1px solid var(--neo-line); border-bottom: 1px solid var(--neo-line); position: relative; }
.library-section::before { content: "LIBRARY"; position: absolute; right: 2%; top: 4%; color: rgba(255,255,255,.018); font-size: clamp(90px,15vw,240px); font-weight: 800; letter-spacing: -.09em; pointer-events: none; }
.section-heading { position: relative; z-index: 1; }
.section-heading h2 { color: white; font-size: clamp(42px,4.6vw,69px); }
.section-heading h2 em { color: rgba(255,255,255,.28); font-style: normal; }
.view-toggle { border-color: var(--neo-line); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.03); }
.view-toggle button { color: rgba(255,255,255,.4); }.view-toggle button + button { border-color: var(--neo-line); }
.view-toggle button.active { background: rgba(255,255,255,.12); color: var(--neo-mint); }
.library-toolbar { position: sticky; top: 74px; z-index: 25; margin-bottom: 38px; padding: 13px; border: 1px solid var(--neo-line); border-radius: 16px; background: rgba(9,11,17,.8); backdrop-filter: blur(23px) saturate(150%); box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.search-box { height: 45px; border-color: var(--neo-line); border-radius: 10px; background: rgba(255,255,255,.04); color: white; }
.search-box input { color: white; }.search-box input::placeholder { color: rgba(255,255,255,.28); }
.filter-tabs button { color: rgba(255,255,255,.37); border-radius: 9px; transition: .2s ease; }
.filter-tabs button:hover { color: white; background: rgba(255,255,255,.055); }
.filter-tabs button.active { color: #05060a; background: var(--neo-mint); box-shadow: 0 0 20px rgba(54,241,199,.18); }
.select-wrap > span { color: var(--neo-faint); }
.select-wrap select { color: white; border-color: var(--neo-line); border-radius: 9px; background: #11141d; }
.game-grid { grid-template-columns: repeat(4,1fr); gap: 35px 18px; perspective: 1400px; }
.game-card { --rx:0deg; --ry:0deg; transform-style: preserve-3d; opacity: 0; transform: translateY(25px); animation: cardEnter .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--card-index,0) * 35ms); }
@keyframes cardEnter { to { opacity:1; transform:translateY(0); } }
.game-cover { aspect-ratio: 1.34; border: 1px solid var(--neo-line); border-radius: 18px; background: linear-gradient(145deg,#171a25,#090b11); box-shadow: 0 18px 45px rgba(0,0,0,.32); transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); transform-style: preserve-3d; transition: transform .15s ease-out,box-shadow .35s ease,border-color .35s ease; }
.game-cover::before { opacity: .26; background-size: 28px 28px; mask-image: linear-gradient(#000,transparent 80%); transform: translateZ(1px); }
.game-cover::after { right: 14px; top: 14px; color: rgba(255,255,255,.3); transform: translateZ(25px); }
.game-card:hover .game-cover { border-color: color-mix(in srgb,var(--game-accent,var(--neo-mint)) 45%,transparent); box-shadow: 0 28px 60px rgba(0,0,0,.44),0 0 35px color-mix(in srgb,var(--game-accent,var(--neo-mint)) 18%,transparent); }
.game-cover > .cover-art::before { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; border: 1px solid currentColor; opacity: .16; box-shadow: 0 0 55px currentColor,inset 0 0 40px currentColor; animation: coverRing 7s linear infinite; }
@keyframes coverRing { to { transform: rotate(360deg) scale(1.08); } }
.cover-art { color: var(--game-accent,var(--neo-mint)); font-size: clamp(34px,4vw,59px); text-shadow: 0 0 26px currentColor,8px 14px 0 rgba(0,0,0,.22); transform: translateZ(35px); filter: none; transition: transform .4s cubic-bezier(.2,.8,.2,1),text-shadow .4s ease; }
.game-cover:hover .cover-art { transform: translateZ(60px) scale(1.08) rotate(-2deg); text-shadow: 0 0 38px currentColor,10px 18px 0 rgba(0,0,0,.25); }
.cover-art small { color: rgba(255,255,255,.53); text-shadow: none; }
.play-badge { width: 58px; height: 58px; background: rgba(246,247,251,.93); color: #05060a; box-shadow: 0 12px 35px rgba(0,0,0,.4),0 0 0 8px rgba(255,255,255,.05); transform: translate(-50%,-50%) translateZ(80px) scale(.6); }
.game-cover:hover .play-badge { transform: translate(-50%,-50%) translateZ(80px) scale(1); }
.favorite-btn { background: rgba(5,6,10,.5); border-color: rgba(255,255,255,.12); backdrop-filter: blur(10px); transform: translateZ(70px); }
.favorite-btn.active { color: var(--neo-gold); box-shadow: 0 0 18px rgba(255,200,87,.28); }
.game-info { color: white; }
.game-topline h3 { font-size: 14px; }
.players-tag { border: 0; color: var(--neo-mint); background: rgba(54,241,199,.08); border-radius: 6px; }
.game-info p,.score-line { color: rgba(255,255,255,.35); }.score-line strong { color: rgba(255,255,255,.86); }
.game-grid.list-view .game-card { border-color: var(--neo-line); }
.empty-state p { color: var(--neo-soft); }

.ranking-section { padding-top: 110px; padding-bottom: 120px; background: transparent; position: relative; }
.ranking-section::before { content: ""; position: absolute; width: 70vw; height: 70vw; border-radius: 50%; left: -40vw; top: -20vw; background: rgba(137,108,255,.08); filter: blur(100px); pointer-events: none; }
.podium { border: 1px solid var(--neo-line); border-radius: 20px; background: linear-gradient(145deg,#111523,#080a10); overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.podium::before { content: ""; position: absolute; width: 300px; height: 300px; background: var(--neo-violet); filter: blur(100px); opacity: .12; }
.podium-player { position: relative; z-index: 1; }
.podium-player .avatar { border-color: rgba(255,255,255,.25); }
.podium-player:nth-child(2) .avatar { box-shadow: 0 0 0 5px rgba(255,91,61,.1),var(--glow-coral); animation: crownFloat 2.5s ease-in-out infinite; }
@keyframes crownFloat { 50% { transform: translateY(-6px); } }
.podium-player small { color: var(--neo-mint); }
.podium-step { background: rgba(255,255,255,.06); border-radius: 10px 10px 0 0; }
.podium-player:nth-child(2) .podium-step { background: linear-gradient(180deg,var(--neo-coral),#8d241b); }
.ranking-table-wrap { border: 1px solid var(--neo-line); border-radius: 20px; background: rgba(12,14,22,.74); box-shadow: 0 30px 70px rgba(0,0,0,.2); overflow: hidden; }
.ranking-table th,.ranking-table td { border-color: var(--neo-line); }
.ranking-table th { color: var(--neo-faint); }.ranking-table td { color: rgba(255,255,255,.8); }
.ranking-table tbody tr { transition: background .2s ease,transform .2s ease; }
.ranking-table tbody tr:hover { background: rgba(255,255,255,.04); transform: translateX(3px); }
.ranking-table td:first-child { color: var(--neo-mint); }
.no-scores { color: var(--neo-faint); }

footer { background: #030407; border-top: 1px solid var(--neo-line); }
footer p,footer nav { color: rgba(255,255,255,.35); }

dialog::backdrop { background: rgba(1,2,4,.82); backdrop-filter: blur(18px) saturate(120%); }
.auth-dialog,.panel-dialog { color: white; border: 1px solid var(--neo-line); border-radius: 22px; background: rgba(9,11,18,.96); box-shadow: 0 50px 130px rgba(0,0,0,.68),0 0 0 1px rgba(255,255,255,.03); }
.auth-art { background: radial-gradient(circle at 50% 40%,rgba(137,108,255,.18),transparent 38%),linear-gradient(145deg,#0c101a,#05060a); }
.auth-noise { opacity: .5; animation: gridPulse 7s ease-in-out infinite; }
.auth-panel { background: linear-gradient(145deg,rgba(20,23,34,.96),rgba(8,10,16,.98)); }
.auth-panel h2 { color: white; }.auth-subtitle,.secure-note { color: var(--neo-soft); }
.auth-tabs { border-color: var(--neo-line); }.auth-tabs button { color: var(--neo-faint); }.auth-tabs button.active { color: white; border-color: var(--neo-coral); }
.auth-form input:not([type=checkbox]) { color: white; border-color: var(--neo-line); border-radius: 10px; background: rgba(255,255,255,.045); }
.auth-form input:not([type=checkbox]):focus { border-color: rgba(54,241,199,.4); box-shadow: 0 0 0 3px rgba(54,241,199,.07); }
.auth-form label { color: rgba(255,255,255,.72); }
.form-message { color: var(--neo-coral); }
.dialog-header,.dialog-footer { border-color: var(--neo-line); }
.close-button { color: white; border-color: var(--neo-line); border-radius: 10px; }.close-button:hover { background: var(--neo-coral); }
.settings-nav { border-color: var(--neo-line); }.settings-nav button { color: var(--neo-faint); }.settings-nav button.active { color: white; background: rgba(255,255,255,.055); border-color: var(--neo-coral); }
.settings-content p,.setting-row label small { color: var(--neo-soft); }
.keymap,.key-row,.setting-row { border-color: var(--neo-line); }
.key-row span { color: var(--neo-soft); }
kbd,.key-button { color: white; border-color: rgba(255,255,255,.15); background: #171b27; box-shadow: 0 2px 0 rgba(0,0,0,.5); }
.gamepad-help { border: 1px solid var(--neo-line); border-radius: 14px; background: linear-gradient(145deg,#131725,#090b12); }
.account-card { color: white; background: rgba(255,255,255,.035); border-color: var(--neo-line); border-radius: 14px; }
.secondary-button { color: white; border-color: var(--neo-line); border-radius: 10px; }.secondary-button:hover { background: white;color:#05060a; }
.profile-hero { background: radial-gradient(circle at 20% 50%,rgba(255,91,61,.25),transparent 35%),#0b0d14; }.profile-stats,.profile-stats div,.recent-score { border-color: var(--neo-line); }.recent-score time { color: var(--neo-faint); }

.game-dialog { background: #030407; }
.game-shell { background: radial-gradient(circle at 40% 40%,rgba(137,108,255,.07),transparent 45%),#030407; }
.game-header { background: rgba(8,10,16,.88); border-color: var(--neo-line); backdrop-filter: blur(15px); }
.game-header-score strong { text-shadow: 0 0 18px rgba(54,241,199,.55); }
.canvas-wrap { margin: 14px; border: 1px solid rgba(54,241,199,.14); border-radius: 18px; background: #030407; box-shadow: inset 0 0 80px rgba(54,241,199,.035),0 25px 70px rgba(0,0,0,.45); overflow: hidden; }
.canvas-wrap::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025),inset 0 0 55px rgba(0,0,0,.38); }
.canvas-wrap::after { content: ""; position: absolute; left: 0; right: 0; top: -15%; height: 12%; z-index: 4; pointer-events: none; background: linear-gradient(transparent,rgba(54,241,199,.06),transparent); animation: screenScan 5s linear infinite; }
@keyframes screenScan { to { top: 115%; } }
#gameCanvas { filter: saturate(1.12) contrast(1.04); }
.game-start-overlay,.pause-overlay,.game-over-overlay { background: radial-gradient(circle,rgba(15,19,31,.68),rgba(2,3,6,.96)); backdrop-filter: blur(8px); }
.game-start-overlay h3 { color: white; text-shadow: 0 0 26px rgba(54,241,199,.45),5px 5px 0 rgba(255,91,61,.75); }
.mode-switch,.difficulty-switch { display: flex; border: 1px solid var(--neo-line); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.025); }
.mode-switch button,.difficulty-switch button { color: rgba(255,255,255,.45); border: 0; background: transparent; cursor: pointer; text-transform: uppercase; font: 500 8px/1 "DM Mono",monospace; transition: .2s ease; }
.mode-switch button.active,.difficulty-switch button.active { color: #05060a; background: var(--neo-mint); box-shadow: 0 0 24px rgba(54,241,199,.22); }
.difficulty-wrap { width: min(470px,90vw); margin: 5px 0 17px; }
.difficulty-heading { display: flex; justify-content: space-between; margin-bottom: 8px; color: rgba(255,255,255,.4); font: 500 7px/1 "DM Mono",monospace; text-transform: uppercase; letter-spacing: .1em; }
.difficulty-heading b { color: var(--neo-mint); font-weight: 500; }
.difficulty-switch button { flex: 1; padding: 11px 9px; }
.difficulty-switch button:hover:not(.active) { color: white; background: rgba(255,255,255,.05); }
.game-sidebar { background: rgba(10,12,19,.9); border-color: var(--neo-line); }
.game-sidebar section,.game-footer { border-color: var(--neo-line); }
.your-best { background: linear-gradient(145deg,rgba(54,241,199,.09),transparent); }
.game-over-overlay > strong { color: white; text-shadow: 0 0 26px rgba(54,241,199,.4); }
.next-level-banner { display: flex !important; align-items: center; gap: 10px; margin: 0 0 20px; padding: 10px 14px; border: 1px solid rgba(54,241,199,.2); border-radius: 11px; background: rgba(54,241,199,.07); color: white; text-align: left; animation: levelUp 1.2s ease-in-out infinite alternate; }
.next-level-banner[hidden] { display: none !important; }
.next-level-banner i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: var(--neo-mint); color: #05060a; font-style: normal; }
.next-level-banner span { display: grid; color: rgba(255,255,255,.55); font-size: 9px; }.next-level-banner strong { color: var(--neo-mint); font: 500 7px/1.6 "DM Mono",monospace; letter-spacing: .11em; }
@keyframes levelUp { to { box-shadow: 0 0 25px rgba(54,241,199,.12); transform: translateY(-2px); } }

.toast { border-radius: 12px; background: rgba(12,15,23,.94); border: 1px solid var(--neo-line); border-left: 3px solid var(--neo-mint); backdrop-filter: blur(15px); }

.reveal { opacity: 0; transform: translateY(40px); transition: opacity .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (max-width: 1180px) {
  .network-state { display:none; }
  .hero { grid-template-columns: .9fr 1.1fr; }
  .hero h1 { font-size: clamp(64px,7.5vw,90px); }
  .feature-main { left: 7%; width: 58%; }
  .game-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 820px) {
  .ambient-orb { opacity:.16; }
  .topbar { background: rgba(5,6,10,.9); }
  .hero { min-height: auto; display:block; padding:0; }
  .hero-copy { padding: 75px 24px 50px; }
  .hero h1 { font-size: clamp(58px,15vw,86px); }
  .hero h1 small { display:block; margin:15px 0 0; transform:none; }
  .hero-visual { min-height:590px; height:590px; margin:0; overflow:hidden; }
  .feature-main { width:60%;left:7%; }
  .platform-rail { padding:45px 24px 80px; }
  .library-section,.ranking-section { padding-left:24px;padding-right:24px; }
  .library-toolbar { top:67px; }
  .game-grid { grid-template-columns:repeat(2,1fr); }
  .game-body { grid-template-columns:1fr; }
  .canvas-wrap { margin:8px; }
}
@media (max-width: 540px) {
  .topbar { height:64px; }
  .brand small { display:none; }
  .hero-copy { padding:58px 18px 42px; }
  .live-season b { display:none; }
  .hero h1 { font-size:56px; }
  .hero h1 small { font-size:14px; }
  .hero-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
  .hero-stats div { min-width:0;padding:10px 7px;column-gap:5px; }
  .hero-stats .stat-icon { display:none; }
  .hero-stats strong { font-size:13px; }.hero-stats span{font-size:6px;}
  .hero-visual { min-height:470px;height:470px; }
  .feature-main { width:70%;height:58%; }
  .stage-ring { opacity:.6; }
  .rail-heading h2 { font-size:23px; }
  .rail-controls { display:none; }
  .rail-game { flex-basis:83vw;grid-template-columns:auto 58px 1fr;padding:15px;min-height:120px; }
  .rail-symbol { width:55px; }
  .library-section,.ranking-section { padding-left:15px;padding-right:15px; }
  .section-heading h2 { font-size:38px; }
  .game-grid { gap:24px 9px; }
  .game-cover { border-radius:13px; }
  .game-topline h3 { font-size:12px; }
  .players-tag { font-size:6px; }
  .difficulty-wrap { width:90vw; }
  .difficulty-switch button { padding:10px 4px;font-size:7px; }
  .game-start-overlay > p:not(.game-kicker) { margin:13px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-world,.stage-ring,.game-cover > .cover-art::before,.canvas-wrap::after { animation:none !important; }
}