/* WTIL RP · community visual system v6
   Design-only override. No LiveKit/authroom logic is changed. */
:root{--bg:#070b15;--panel:#12182b;--panel2:#171d33;--text:#f8f9ff;--muted:#a6b2cd;--border:#343d64;--violet:#b58aff;--cyan:#56d6f9;--accent:#ee5fae;--pink:#f76ebc;--focus:#51e6ff}
html{scroll-padding-top:98px}body{background:radial-gradient(ellipse at 6% 22%,#13274c3f,transparent 30%),radial-gradient(ellipse at 90% 0%,#4b205e3d,transparent 30%),#070b15;color:var(--text)}
::selection{background:#a475e7;color:#fff}a,button{ -webkit-tap-highlight-color:transparent }button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.ambient{position:absolute;height:950px;background:radial-gradient(ellipse 35% 55% at 75% 10%,#e0449224,transparent),radial-gradient(ellipse 55% 70% at 14% 35%,#175f9b26,transparent)}
/* Top navigation; name button / dropdown replaces the legacy link. */
.nav{background:#080c19e8;border-top:3px solid transparent;border-image:linear-gradient(90deg,#65c9ee,#876df1,#ff62b2) 1;border-bottom:1px solid #5660833b;box-shadow:0 8px 28px #0006;z-index:100;isolation:isolate}
.nav-inner{max-width:1290px;padding:13px 29px;min-height:83px;gap:22px}
.logo{gap:13px;flex-shrink:0}.logo .flag.flag-art{width:59px;height:59px;padding:2px;border:1px solid #bb97ffb0;border-radius:15px;background:linear-gradient(145deg,#f583db,#527dff);transform:none;overflow:hidden;box-shadow:0 0 18px #9d6cff38;display:block}
.logo .flag-art img{width:100%;height:100%;display:block;border-radius:11px;object-fit:cover;object-position:center 56%}
.logo strong{font:900 29px/1.05 Heebo,Arial,sans-serif;letter-spacing:.7px;color:#fff;text-shadow:0 0 20px #d769ff2b;direction:ltr;text-align:right}.logo .brand-rp{color:#f37dbf;font-size:.58em;letter-spacing:1px}.logo small{display:block;margin-top:5px;font-size:9px;letter-spacing:2.05px;color:#abc5db}
.nav nav{display:flex;align-items:center;gap:8px}.nav nav a{padding:11px 16px;border-radius:10px;color:#bbc6e0;transition:color .18s,background .18s,box-shadow .18s;font-weight:800;font-size:14px}.nav nav a:hover{color:#fff;background:#a279df1f;box-shadow:inset 0 -2px #cf77ff6c}.nav nav a[aria-current=page]{background:#8857ce26;color:#eac9ff;box-shadow:inset 0 -2px #c783ff}
.nav-account{position:relative;z-index:150;margin-inline-start:0;flex-shrink:0}.nav-account .nav-account-trigger{appearance:none;color:#fff;background:#171e33;border:1px solid #526182;box-shadow:inset 0 1px #ffffff10,0 5px 14px #0003;padding:9px 13px;border-radius:13px;font:800 13px Heebo,Arial,sans-serif;min-height:44px;display:flex;gap:10px;transition:background .2s,border-color .2s;direction:rtl}.nav-account .nav-account-trigger:hover,.nav-account .nav-account-trigger.is-open{background:#222946;border-color:#bb84f9}.nav-account .account-avatar{font-size:13px;width:24px;height:24px;border-radius:9px;background:#9968ed33;display:grid;place-items:center}.nav-account .menu-chevron{opacity:.65;transition:transform .18s}.nav-account .is-open .menu-chevron{transform:rotate(180deg)}.nav-account .live-dot{width:7px;height:7px}
.nav-account-menu{position:absolute;left:0;top:calc(100% + 13px);width:266px;z-index:999;background:linear-gradient(150deg,#20253e,#11182d 75%);border:1px solid #69618d;border-radius:16px;box-shadow:0 20px 50px #01020bcc,0 0 0 5px #8e59f60c;padding:7px;animation:wtMenu .17s ease both}
@keyframes wtMenu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.nav-account-menu::before{content:'';position:absolute;top:-7px;left:27px;width:12px;height:12px;background:#20253e;border-top:1px solid #69618d;border-right:1px solid #69618d;transform:rotate(-45deg)}
.account-menu-head{padding:12px 13px 14px;border-bottom:1px solid #ffffff17;margin-bottom:6px;display:flex;flex-direction:column;gap:1px}.account-menu-head small{color:#a6add0;font-size:11px}.account-menu-head strong{font-size:17px;line-height:1.5;word-break:break-word;direction:ltr;text-align:right}.account-online{display:flex;align-items:center;gap:8px;color:#82eac8;font-weight:700;font-size:10px;margin-top:4px}
.nav-account-menu a,.nav-account-menu button{width:100%;display:flex;align-items:center;gap:11px;padding:12px 11px;border:0;border-radius:10px;text-align:right;color:#e6eeff;background:transparent;font:800 12px Heebo,Arial,sans-serif;box-shadow:none;cursor:pointer}.nav-account-menu a:hover,.nav-account-menu button:hover{background:#b389ff20}.nav-account-menu button{border-top:1px solid #ffffff15;color:#ffabbc;border-radius:8px}.account-menu-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#9763c02a;font-size:17px}.menu-arrow{margin-inline-start:auto;color:#d59cf8;font-size:23px}.nav-account-menu button:disabled{opacity:.5;cursor:wait}
/* Main landing; same semantic sections, enriched by artwork and atmosphere. */
main{max-width:1220px}main .hero{position:relative;isolation:isolate;min-height:610px;padding:92px 33px 82px;border-bottom:1px solid #303f62;gap:48px;overflow:visible}
.hero:before{content:'';position:absolute;z-index:-2;inset:0 calc(50% - 50vw) 0;pointer-events:none;background:linear-gradient(90deg,#070b16e8 4%,#080b1caf 48%,#070b16e6 100%),linear-gradient(180deg,#09101c10 42%,#070b15 98%),url('/assets/wtil-city-night.webp') center 54%/cover no-repeat;opacity:.89}
.hero:after{content:'';position:absolute;z-index:-1;left:-4%;right:-4%;bottom:0;height:135px;background:linear-gradient(0deg,#070b15,transparent);pointer-events:none}
.hero .eyebrow{color:#d8b6ff;letter-spacing:2.1px;font-size:12px;justify-content:flex-end}.hero h1{max-width:605px;color:#fff;font-weight:900;letter-spacing:-1.3px;text-shadow:0 8px 30px #000a,0 0 30px #8c51ba20}.hero h1::after{width:100px;height:4px;border-radius:9px;background:linear-gradient(90deg,#ff7cb5,#ba76ff,#5bcaf8);box-shadow:0 1px 18px #ea77f557}
.hero .lede{max-width:580px;font-size:18px;color:#d4dcef;line-height:2;text-shadow:0 3px 14px #000}
.btn{border-radius:11px;min-height:52px}.btn-primary{background:linear-gradient(105deg,#bd83ff 0%,#73c6ef 100%);color:#0c1730;box-shadow:0 9px 30px #9866eb32}.btn-primary:hover{filter:brightness(1.08);box-shadow:0 11px 34px #a26bef58}.btn-ghost{border-color:#837ead;background:#141d31ce;box-shadow:inset 0 1px #ffffff0f}.btn-ghost:hover{background:#232848}
.stats{border-top:1px solid #7890b053;margin-top:48px}.stats strong{font-size:26px;text-shadow:0 2px 13px #0a143e}.stats span{font-size:12px;color:#c0cce0}
.hero-media{width:min(100%,435px);filter:drop-shadow(0 22px 42px #000d)}.hero-media img{border:2px solid #b67aff89;border-radius:21px;transform:rotate(-2deg);box-shadow:0 0 0 6px #b37bfb0a}.image-backdrop{inset:-12px;background:linear-gradient(130deg,#d86de3,#63d2ff);transform:rotate(3deg);opacity:.6;border-radius:21px}.hero-sticker{bottom:-15px;right:-6px;background:#10152be8;border:1px solid #a88bc9aa;box-shadow:0 10px 24px #000a;letter-spacing:1.6px;color:#ebc6ff}
.section{border-bottom-color:#30375173}.section-head h2{color:#f7f6ff}.section-head>p{color:#aebbd1}.section-head .kicker,.kicker{color:#73daff}
.page-cards{gap:19px}.page-cards a{background:linear-gradient(145deg,#1b2540ed,#111a2bef);border:1px solid #47517c;border-radius:17px;position:relative;overflow:hidden;box-shadow:0 11px 26px #0002}.page-cards a::before{content:'';position:absolute;inset:auto 0 0;height:4px;background:linear-gradient(90deg,#db69bc,#9679e8,#60cdf2);transform:scaleX(.24);transform-origin:right;transition:transform .25s}.page-cards a:hover{border-color:#ab7cef;box-shadow:0 12px 38px #0006;transform:translateY(-4px)}.page-cards a:hover:before{transform:scaleX(1)}.page-cards a:nth-child(1){background:linear-gradient(135deg,#152b47cc,#1b2440eb),url('/assets/wtil-patrol.webp') center/cover}.page-cards a:nth-child(2){background:linear-gradient(135deg,#102842cb,#1a1737eb),url('/assets/wtil-city-night.webp') center/cover}.page-cards a:nth-child(3){background:linear-gradient(135deg,#21233e,#17253c)}.page-cards a:nth-child(4){background:linear-gradient(135deg,#1e213c,#132335)}.page-cards a>span{color:#8adcff}.page-cards h3{font-size:27px;margin-top:11px}.page-cards p{color:#d1d8ed}
.page-head{position:relative;padding:80px 27px 47px;border-bottom:1px solid #2d3853;isolation:isolate}.page-head:before{content:'';position:absolute;inset:0 calc(50% - 50vw) 0;z-index:-2;background:linear-gradient(270deg,#080d19a8,#0a0d19db 63%,#070b15f5),url('/assets/wtil-city-night.webp') center 45%/cover}.page-head .kicker{justify-content:flex-end}.page-head h1{color:#fefcff;text-shadow:0 6px 25px #000a}.page-head p{color:#c6d0e7}
.system-card{border:1px solid #51567c;background:linear-gradient(135deg,#19223b,#121a2b);border-radius:17px;box-shadow:0 13px 30px #0002;transition:border-color .2s,transform .2s}.system-card:hover{border-color:#b78bfa;transform:translateY(-3px)}.system-media{background:linear-gradient(160deg,#292658,#153856)}.system-placeholder{background:linear-gradient(145deg,#33235d,#18426b);text-shadow:0 3px 18px #0006}.system-body small{color:#80ccec}.system-body h2{color:#fff}.system-body p,.system-details{color:#bfcbe5}.gallery figure{border:1px solid #424f75;box-shadow:0 12px 29px #0004;border-radius:16px}.gallery figure:hover{border-color:#be91ff}
.about-box{border-color:#766293;background:linear-gradient(120deg,#2a2152,#111f35),url('/assets/wtil-city-night.webp') center/cover}.about-box span{color:#ccacf9}.about-box strong{color:#fff}.connect{position:relative;overflow:hidden;border-color:#735d9a;background:linear-gradient(105deg,#121527f5,#151128c9),url('/assets/wtil-city-night.webp') center/cover;box-shadow:0 22px 64px #0005}.connect h1{color:#fff}.connect .ip-wrap{border-color:#9c76d0;box-shadow:0 6px 33px #0007}.ip-wrap button{background:#9d84ec}.ip-wrap button:hover{background:#c5a3ff}
/* Player account stays wired to its existing forms, tabs, voice SDK and backend */
.wtil-widget{border:1px solid #525780!important;border-radius:20px!important;background:linear-gradient(145deg,#181e36f6,#101629f6)!important;box-shadow:0 15px 60px #0005,inset 0 1px #ffffff0e}.wtil-widget .widget-kicker{color:#7bd3f5}.wtil-widget .wtil-account-tabs{background:#101629!important;border-color:#4d547b!important}.wtil-widget .wtil-account-tabs button{border-radius:10px!important;transition:filter .2s}.wtil-widget .wtil-account-tabs button.active{background:linear-gradient(105deg,#9e64d6,#4dbae2)!important;color:#061020!important}.wtil-widget .voice-card,.wtil-widget #profileDetails{background:#19233bea!important;border:1px solid #495578!important;border-radius:14px!important}.wtil-widget .room-grid>*{background:#101b2e!important;border-color:#4f607d!important}.wtil-widget button.widget-primary{background:linear-gradient(105deg,#bc8af5,#5dc6e9)!important;color:#09162a!important;border-radius:10px!important}.wtil-widget .wtil-room-status{border-radius:12px!important}.wtil-widget .profile-facts .fact{background:#121f35;border-color:#495578}.wtil-widget .profile-audio-settings{background:#111e33;border-color:#46557b}.wtil-widget .joined-room{border-color:#5b658f}.wtil-widget .room-invitation{border-color:#536789}
/* Storytelling details, footer, accessible navigation */
footer{background:linear-gradient(100deg,#0b1122,#171329);border-top:1px solid #4a4260;margin-top:4px}footer strong{color:#f8f2ff}footer a{color:#b8bde0}footer a:hover{color:#a4e6ff}
@media(max-width:920px){.nav-inner{flex-wrap:wrap;gap:8px 16px}.nav nav{display:flex!important;order:3;width:100%;overflow-x:auto;gap:3px;padding:4px 0;white-space:nowrap;scrollbar-width:none}.nav nav a{padding:8px 12px;font-size:12px}.nav-account{margin-inline-start:auto}.nav-account-menu{left:0}.hero:before{background-position:center}}
@media(max-width:650px){.nav-inner{padding:10px 14px;min-height:70px}.logo .flag.flag-art{width:47px;height:47px}.logo strong{font-size:22px}.logo .brand-rp{font-size:.52em}.logo small{font-size:7px;letter-spacing:1.2px}.nav-account .nav-account-trigger{min-height:38px;max-width:190px;padding:6px 9px;gap:5px;font-size:11px}.nav-account .account-avatar{display:none}.nav-account #navAccountText{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nav-account-menu{width:min(275px,calc(100vw - 26px));right:auto;left:0}.hero{padding:48px 0 42px!important;min-height:0!important;gap:35px!important}.hero:before{opacity:.56}.hero-media{max-width:290px}.hero-copy{width:100%}.hero h1{font-size:clamp(35px,9vw,51px);letter-spacing:-1px}.hero .lede{font-size:15px}.hero-sticker{font-size:8px;bottom:-12px}.stats{gap:20px;margin-top:35px}.stats strong{font-size:19px}.page-head{padding:51px 0 30px}.page-cards h3{font-size:23px}.page-cards a{padding:22px}.wtil-widget{border-radius:13px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
