.discover-page { --discover-gold:#f8d66d; --discover-muted:#b7bfd4; max-width:1200px; margin:auto; padding:36px 24px 72px; color:#f6f7fc; }
.discover-page *, .discover-page *::before, .discover-page *::after { box-sizing:border-box; }
.discover-page h1, .discover-page h2, .discover-page h3 { color:#f6f7fc; text-shadow:none; }
.discover-page p { color:var(--discover-muted); line-height:1.65; }
.discover-hero { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:36px; padding:32px 0 56px; }
.discover-eyebrow { display:block; color:var(--discover-gold); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:20px; }
.discover-hero h1 { font:800 clamp(36px,4.6vw,62px)/1.08 system-ui,sans-serif; letter-spacing:-.045em; margin:0 0 24px; max-width:640px; }
.discover-hero h1 span { color:var(--discover-gold); display:block; }
.discover-hero-copy>p { font-size:17px; max-width:520px; margin:0 0 26px; }
.discover-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.discover-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:50px; padding:13px 22px; border-radius:12px; background:var(--discover-gold); color:#16172a; border:1px solid var(--discover-gold); font-size:15px; font-weight:750; text-decoration:none; transition:transform .2s,background .2s; }
.discover-button:hover { background:#ffe69a; color:#16172a; transform:translateY(-2px); }
.discover-button--quiet { color:#f6f7fc; background:rgba(255,255,255,.035); border-color:#454b66; }
.discover-button--quiet:hover { background:#242a45; color:#fff; }
.discover-page a:focus-visible { outline:3px solid #fff; outline-offset:5px; }
.discover-signin { display:flex; flex-wrap:wrap; gap:6px; margin-top:17px; font-size:13px; color:var(--discover-muted); }
.discover-signin a { color:#f6f7fc; text-decoration:underline; text-underline-offset:4px; }
.discover-lobby { position:relative; min-height:390px; padding:36px 24px 28px; border:1px solid #42415e; border-radius:28px; background:radial-gradient(ellipse at 50% 38%,#38304f 0, #15192d 65%); box-shadow:0 24px 65px #0003; overflow:hidden; }
.discover-lobby::before { content:''; position:absolute; inset:20px; border:1px solid #ffffff0c; border-radius:20px; pointer-events:none; }
.discover-lobby-header { position:relative; display:flex; justify-content:space-between; gap:15px; align-items:center; color:#eeeaf9; font-size:12px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; }
.discover-lobby-mark { display:flex; gap:4px; }
.discover-lobby-mark i { width:6px; height:6px; border-radius:50%; background:var(--discover-gold); }
.discover-squad { display:flex; justify-content:center; align-items:flex-end; gap:14px; height:210px; margin:10px 0 22px; position:relative; }
.discover-slot { --slot:#b69bff; width:110px; height:142px; border:1px solid #b69bff55; border-radius:60px 60px 18px 18px; background:linear-gradient(0deg,#b69bff17,transparent); position:relative; }
.discover-slot::before { content:''; position:absolute; width:34px; height:34px; border-radius:50%; background:var(--slot); top:30px; left:calc(50% - 17px); }
.discover-slot::after { content:''; position:absolute; width:66px; height:47px; border-radius:35px 35px 10px 10px; background:var(--slot); top:74px; left:calc(50% - 33px); opacity:.7; }
.discover-slot--you { --slot:var(--discover-gold); height:172px; border-color:#f8d66d77; background:linear-gradient(0deg,#f8d66d22,transparent); }
.discover-slot--you::before { width:42px; height:42px; top:33px; left:calc(50% - 21px); }
.discover-slot--you::after { width:76px; height:57px; top:87px; left:calc(50% - 38px); }
.discover-slot--third { --slot:#86c9c0; border-color:#86c9c055; background:linear-gradient(0deg,#86c9c017,transparent); }
.discover-lobby-title { position:relative; display:block; text-align:center; font-size:22px; font-weight:700; letter-spacing:-.02em; }
.discover-lobby-tags { position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:16px; }
.discover-lobby-tags span { padding:5px 10px; border:1px solid #ffffff20; border-radius:7px; font-size:11px; color:#d3d6e5; }
.discover-intro { border-top:1px solid #ffffff1c; padding-top:30px; margin-bottom:24px; display:flex; gap:24px; justify-content:space-between; align-items:flex-end; }
.discover-intro h2, .discover-tool-heading h2 { font:650 clamp(24px,3vw,32px)/1.2 system-ui,sans-serif; letter-spacing:-.03em; margin:0; }
.discover-intro p { margin:0; max-width:410px; font-size:14px; }
.discover-play-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:52px; }
.discover-play-card { display:flex; flex-direction:column; padding:26px; border:1px solid #3b4058; border-radius:20px; background:#14192ce8; }
.discover-play-icon { display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; margin-bottom:28px; color:var(--discover-gold); background:#f8d66d12; }
.discover-play-card:nth-child(2) .discover-play-icon { color:#bca6ff; background:#bca6ff12; }
.discover-play-card:nth-child(3) .discover-play-icon { color:#8dd3c7; background:#8dd3c712; }
.discover-play-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.discover-play-card h3 { margin:0 0 12px; font:700 22px/1.25 system-ui,sans-serif; letter-spacing:-.025em; }
.discover-play-card p { margin:0 0 24px; font-size:14px; }
.discover-play-link { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#f6f7fc; margin-top:auto; padding-top:18px; border-top:1px solid #ffffff14; font-size:13px; font-weight:650; text-decoration:none; }
.discover-play-link:hover { color:var(--discover-gold); }
.discover-tool-heading { margin-bottom:22px; }
.discover-tool-heading p { margin:9px 0 0; font-size:14px; }
.discover-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.discover-feature { padding:20px; border:1px solid #ffffff1c; border-radius:14px; background:#101528d9; scroll-margin-top:150px; }
.discover-feature-head { display:flex; gap:12px; align-items:flex-start; }
.discover-feature-icon { font-size:19px; line-height:1.5; flex-shrink:0; }
.discover-feature-head h3 { margin:0 0 7px; font:650 16px/1.35 system-ui,sans-serif; }
.discover-feature-head p { font-size:13px; margin:0; }
.discover-feature-actions { margin:15px 0 0 31px; }
.discover-feature-actions a { color:#c9b8ff; font-size:13px; font-weight:600; text-decoration:none; }
.discover-feature-actions a:hover { text-decoration:underline; text-underline-offset:4px; }
.discover-permission-note { margin:7px 0 0!important; color:#ddd3b1!important; font-size:12px!important; }
.discover-final { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:32px; border:1px solid #f8d66d44; border-radius:20px; background:linear-gradient(110deg,#2d2940,#171b2e); margin-top:36px; }
.discover-final h2 { font:700 clamp(23px,3vw,30px)/1.2 system-ui,sans-serif; letter-spacing:-.025em; margin:0 0 9px; }
.discover-final p { font-size:14px; margin:0; }
@media(max-width:1000px) { .discover-hero { gap:24px; } .discover-play-card { padding:22px; } .discover-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .discover-page { padding:24px 18px 48px; } .discover-hero { grid-template-columns:1fr; padding:12px 0 32px; gap:30px; } .discover-hero h1 { font-size:clamp(36px,7vw,52px); } .discover-hero-copy>p { font-size:16px; } .discover-lobby { min-height:320px; padding:26px 20px 22px; } .discover-squad { height:175px; margin:0 0 16px; } .discover-intro { align-items:flex-start; flex-direction:column; gap:12px; } .discover-play-grid { grid-template-columns:1fr; gap:14px; margin-bottom:36px; } .discover-play-icon { margin-bottom:18px; } .discover-play-card p { margin-bottom:18px; } .discover-final { flex-direction:column; align-items:flex-start; padding:24px; } }
@media(max-width:450px) { .discover-feature-grid { grid-template-columns:1fr; } .discover-actions { align-items:stretch; flex-direction:column; } .discover-slot { width:80px; } .discover-squad { gap:10px; } .discover-lobby-title { font-size:20px; } .discover-final .discover-button { width:100%; } }
@media(prefers-reduced-motion:reduce) { .discover-button { transition:none; } .discover-button:hover { transform:none; } }