.onboarding-page { min-height: 100vh; margin: 0; color: #f4f7fb; background: #070a0f; font-family: "Sora", Inter, system-ui, sans-serif; }
.onboarding-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .28; background: linear-gradient(90deg, transparent 49.8%, rgba(47,128,255,.18) 50%, transparent 50.2%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px); background-size: 100% 100%, 100% 48px; }
.onboarding-topbar { position: relative; z-index: 2; height: 76px; padding: 0 clamp(20px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #252c3a; background: rgba(7,10,15,.9); }
.onboarding-topbar .landing-brand { display: inline-flex; gap: 10px; align-items: center; color: #f4f7fb; text-decoration: none; font-weight: 900; letter-spacing: .12em; }
.onboarding-topbar .landing-brand img { width: 34px; height: 34px; object-fit: contain; }
.onboarding-step-indicator { display: flex; align-items: center; gap: 10px; color: #a7b0c0; font-variant-numeric: tabular-nums; }
.onboarding-step-indicator span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #344055; border-radius: 50%; }
.onboarding-step-indicator span:first-child { color: #fff; border-color: #2f80ff; box-shadow: 0 0 24px rgba(47,128,255,.3); }
.onboarding-step-indicator i { width: 72px; height: 1px; background: #344055; }
.onboarding-quiet-button { border: 0; background: transparent; color: #a7b0c0; cursor: pointer; font: inherit; }
.onboarding-shell { position: relative; z-index: 1; width: min(1220px, calc(100% - 40px)); margin: 0 auto; padding: clamp(54px, 8vh, 96px) 0 64px; }
.onboarding-stage > h1 { max-width: 820px; margin: 12px 0 16px; font-size: clamp(36px, 6vw, 74px); line-height: .98; letter-spacing: 0; }
.onboarding-lead { max-width: 760px; color: #a7b0c0; font-size: clamp(16px, 2vw, 20px); line-height: 1.65; }
.onboarding-game-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.onboarding-game-card { min-width: 0; padding: 0; overflow: hidden; color: #f4f7fb; text-align: left; cursor: pointer; border: 1px solid #252c3a; border-radius: 16px; background: #0d111a; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.onboarding-game-card:hover { transform: translateY(-5px); border-color: #526078; box-shadow: 0 18px 42px rgba(0,0,0,.28); }
.onboarding-game-card.is-selected { border-color: #2f80ff; box-shadow: 0 0 0 1px rgba(47,128,255,.3), 0 18px 48px rgba(47,128,255,.18); }
.onboarding-game-card.is-unavailable:not(.is-selected) { cursor: not-allowed; opacity: .52; filter: saturate(.45); }
.onboarding-game-card.is-unavailable:not(.is-selected):hover { transform: none; border-color: #252c3a; box-shadow: none; }
.onboarding-game-art { position: relative; aspect-ratio: 4/5; display: grid; place-items: end start; padding: 18px; overflow: hidden; background: #141a26; }
.onboarding-game-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 25%, var(--game-glow, rgba(47,128,255,.55)), transparent 42%), linear-gradient(145deg, transparent 12%, rgba(255,255,255,.08) 12.4%, transparent 13%), #10151f; }
.onboarding-game-art[data-theme="dota-red"] { --game-glow: rgba(210,54,54,.68); }
.onboarding-game-art[data-theme="valorant-coral"] { --game-glow: rgba(255,70,85,.72); }
.onboarding-game-art[data-theme="lol-gold"] { --game-glow: rgba(200,155,60,.65); }
.onboarding-game-art[data-theme="pubg-amber"] { --game-glow: rgba(255,159,28,.7); }
.onboarding-game-art b { position: relative; z-index: 1; font-size: clamp(24px, 3vw, 42px); line-height: .92; }
.onboarding-game-copy { min-height: 88px; padding: 15px 16px; display: flex; flex-direction: column; gap: 6px; }
.onboarding-game-copy strong { font-size: 15px; }
.onboarding-game-copy small { color: #6b7280; }
.onboarding-game-check { position: absolute; margin: -54px 0 0 calc(100% - 50px); width: 28px; height: 28px; display: grid; place-items: center; color: #fff; border: 1px solid #344055; border-radius: 50%; background: #141a26; }
.onboarding-game-card { position: relative; }
.onboarding-game-card.is-selected .onboarding-game-check { border-color: #2f80ff; background: #2f80ff; }
.onboarding-actions { margin-top: 30px; display: flex; justify-content: flex-end; gap: 12px; }
.onboarding-actions-split { justify-content: space-between; }
.onboarding-result { min-height: 24px; margin: 18px 0 0; color: #ff7180; }
.onboarding-connection-list { margin-top: 34px; display: grid; gap: 12px; }
.onboarding-connection { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid #252c3a; border-radius: 16px; background: #0d111a; }
.onboarding-connection.is-connected { border-color: rgba(39,209,127,.44); }
.onboarding-provider-mark { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #344055; border-radius: 12px; background: #141a26; font-weight: 900; }
.onboarding-connection small { display: block; margin-bottom: 4px; color: #38bdf8; text-transform: uppercase; font-size: 10px; font-weight: 800; }
.onboarding-connection strong { font-size: 17px; }
.onboarding-connection p { margin: 4px 0 0; color: #6b7280; }
.onboarding-connection-action button, .onboarding-inline-form button { min-height: 42px; padding: 0 16px; border: 1px solid #2f80ff; border-radius: 10px; background: #2f80ff; color: white; cursor: pointer; font: inherit; font-weight: 800; }
.onboarding-connection-action button:disabled { border-color: #252c3a; background: #141a26; color: #6b7280; cursor: not-allowed; }
.onboarding-connected { color: #27d17f; font-weight: 800; }
.onboarding-inline-form { display: flex; gap: 8px; }
.onboarding-inline-form input, .onboarding-inline-form select { min-height: 42px; padding: 0 12px; color: #f4f7fb; border: 1px solid #344055; border-radius: 10px; background: #070a0f; font: inherit; }
.onboarding-empty { padding: 26px; border: 1px dashed #344055; border-radius: 16px; color: #a7b0c0; }
.onboarding-legal { max-width: 920px; margin: 18px 0 0; color: #6b7280; font-size: 11px; line-height: 1.65; }
.is-hidden { display: none !important; }
@media (max-width: 960px) { .onboarding-game-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px) { .onboarding-topbar { padding: 0 18px; } .onboarding-game-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .onboarding-connection { grid-template-columns: 48px 1fr; } .onboarding-connection-action { grid-column: 1/-1; } .onboarding-inline-form { flex-direction: column; } }