:root{--bg:#080a12;--panel:rgba(255,255,255,.075);--panel2:rgba(255,255,255,.045);--line:rgba(255,255,255,.13);--text:#f7f7fb;--muted:#a7abbd;--purple:#a66cff;--cyan:#5ce1e6;--pink:#ff67ca;--danger:#ff5f76;--shadow:0 22px 60px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:
radial-gradient(circle at 14% 18%,rgba(152,182,255,.17) 0,transparent 30%),
radial-gradient(circle at 84% 16%,rgba(124,224,193,.16) 0,transparent 28%),
radial-gradient(circle at 66% 80%,rgba(255,191,144,.13) 0,transparent 28%),
radial-gradient(circle at 36% 58%,rgba(203,155,255,.12) 0,transparent 34%),
linear-gradient(130deg,#0b1118 0%,#13283a 22%,#17353c 42%,#2d2c49 64%,#4a3650 82%,#183146 100%);
background-size:180% 180%;
animation:naturalGradientShift 58s ease-in-out infinite alternate;
color:var(--text);font-family:Inter,system-ui,sans-serif;min-height:100vh;overflow-x:hidden;position:relative}
.bg-wash{position:fixed;inset:-16%;pointer-events:none;background:
radial-gradient(circle at 18% 24%,rgba(186,204,255,.18),transparent 24%),
radial-gradient(circle at 78% 22%,rgba(159,243,218,.17),transparent 25%),
radial-gradient(circle at 58% 78%,rgba(255,211,173,.14),transparent 26%),
radial-gradient(circle at 42% 46%,rgba(212,172,255,.13),transparent 30%),
radial-gradient(circle at 50% 12%,rgba(129,187,255,.10),transparent 28%);
background-size:170% 170%;
filter:blur(38px);opacity:.94;
animation:bgBreathe 28s ease-in-out infinite alternate,naturalWashShift 72s ease-in-out infinite alternate}
.grain{position:fixed;inset:0;opacity:.022;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.aurora,.mist{position:fixed;border-radius:50%;pointer-events:none}
.aurora{filter:blur(115px);opacity:.18;animation:floatDrift 24s ease-in-out infinite alternate,colorFloat 42s ease-in-out infinite alternate}
.a1{width:460px;height:460px;background:#9db7ff;left:-150px;top:18%}
.a2{width:390px;height:390px;background:#7fe2cb;right:-120px;top:44%;animation-delay:-8s,-12s}
.a3{width:360px;height:360px;background:#f4b0d8;left:43%;top:-130px;animation-delay:-12s,-19s;opacity:.14}
.mist{filter:blur(145px);opacity:.13;animation:mistWave 34s ease-in-out infinite alternate,colorMist 48s ease-in-out infinite alternate}
.m1{width:560px;height:560px;background:rgba(144,170,255,.50);left:10%;top:58%}
.m2{width:500px;height:500px;background:rgba(126,230,200,.42);right:9%;top:69%;animation-delay:-12s,-16s}
.m3{width:470px;height:470px;background:rgba(255,198,160,.34);left:56%;top:20%;animation-delay:-18s,-22s}
@keyframes floatDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(20px,-24px,0) scale(1.05)}100%{transform:translate3d(54px,40px,0) scale(1.1)}}
@keyframes mistWave{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-24px,18px,0) scale(1.06)}100%{transform:translate3d(28px,-20px,0) scale(1.12)}}
@keyframes bgBreathe{0%{transform:scale(1) translateY(0);opacity:.82}100%{transform:scale(1.05) translateY(-10px);opacity:1}}
@keyframes naturalGradientShift{
0%{background-position:0% 45%}
20%{background-position:18% 28%}
45%{background-position:58% 18%}
70%{background-position:96% 54%}
100%{background-position:14% 78%}
}
@keyframes naturalWashShift{
0%{transform:scale(1) translate3d(0,0,0);background-position:0% 0%}
50%{transform:scale(1.04) translate3d(8px,-8px,0);background-position:100% 34%}
100%{transform:scale(1.08) translate3d(-10px,12px,0);background-position:24% 100%}
}
@keyframes colorFloat{
0%{filter:blur(115px) hue-rotate(0deg) saturate(1)}
50%{filter:blur(122px) hue-rotate(16deg) saturate(1.06)}
100%{filter:blur(115px) hue-rotate(-12deg) saturate(1.02)}
}
@keyframes colorMist{
0%{filter:blur(145px) hue-rotate(0deg) saturate(1)}
50%{filter:blur(154px) hue-rotate(20deg) saturate(1.08)}
100%{filter:blur(145px) hue-rotate(-14deg) saturate(1.02)}
}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.045));border:1px solid var(--line);box-shadow:inset 0 1px rgba(255,255,255,.15),var(--shadow);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%)}.topbar{position:sticky;top:14px;z-index:20;width:min(1180px,calc(100% - 28px));margin:14px auto 0;height:66px;border-radius:22px;display:flex;align-items:center;padding:0 16px 0 20px;gap:30px}.brand{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;font-weight:700;white-space:nowrap}.brand b{color:#c7a4ff}.brand-orb{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:linear-gradient(145deg,var(--purple),var(--cyan));box-shadow:0 0 25px rgba(166,108,255,.35);font-weight:800}.brand-orb.tiny{width:26px;height:26px;border-radius:9px}.topbar nav{display:flex;gap:22px;flex:1;justify-content:center}.topbar nav a{color:#c9cad4;text-decoration:none;font-size:13px;font-weight:600;transition:.2s}.topbar nav a:hover{color:white}.avatar-btn{display:flex;align-items:center;gap:8px;background:transparent;color:white;border:0;font-weight:600}.avatar-btn img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.section{width:min(1180px,calc(100% - 32px));margin:0 auto}.hero{min-height:680px;display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;padding:80px 0 60px}.eyebrow{display:block;color:#9feaf0;font-size:11px;font-weight:800;letter-spacing:.16em;margin-bottom:14px}.hero h1,.block h2{margin:0;letter-spacing:-.055em}.hero h1{font-size:clamp(54px,6vw,82px);line-height:.94}.hero h1 span{background:linear-gradient(90deg,#ae82ff,#6de7e4,#ff7cd1);-webkit-background-clip:text;color:transparent}.hero p,.lead{color:var(--muted);line-height:1.7;font-size:17px;max-width:650px}.hero-actions,.inline-actions{display:flex;gap:10px;flex-wrap:wrap}.btn,.icon-btn{border:0;cursor:pointer;text-decoration:none;font:inherit;font-weight:700;border-radius:13px;padding:12px 16px;color:white;transition:transform .18s,box-shadow .18s,background .18s}.btn:hover,.icon-btn:hover{transform:translateY(-2px)}.primary{background:linear-gradient(135deg,#8752ff,#b55cff);box-shadow:0 10px 28px rgba(135,82,255,.25)}.twitch{background:#9146ff;padding:10px 14px}.ghost,.icon-btn{background:rgba(255,255,255,.075);border:1px solid var(--line)}.danger{background:rgba(255,95,118,.16);border:1px solid rgba(255,95,118,.3);color:#ff9aaa}.mini-stats{display:flex;gap:10px;margin-top:32px}.mini-stats div{min-width:116px;padding:13px 15px;border-left:1px solid var(--line)}.mini-stats b{font-size:22px;display:block}.mini-stats span{font-size:11px;color:var(--muted)}
.hero-visual{height:470px;border-radius:34px;position:relative;overflow:hidden}.hero-visual:before{content:'';position:absolute;inset:auto -10% -25% -10%;height:58%;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.06),transparent 62%);filter:blur(20px);pointer-events:none}.window-head{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 16px}.window-head>span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3)}.window-head em{margin-left:auto;color:var(--muted);font-size:9px;letter-spacing:.2em}.pulse-orbit{position:absolute;inset:50px 0 0;display:grid;place-items:center;animation:levitate 5.5s ease-in-out infinite}.pulse-orbit:before,.pulse-orbit:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.11);border-radius:50%;width:300px;height:180px;transform:rotate(-18deg)}.pulse-orbit:after{transform:rotate(52deg);width:330px;height:210px}.planet{position:relative;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#f0e4ff,#8752ff 30%,#141528 75%);box-shadow:0 0 70px rgba(143,84,255,.45);animation:planetPulse 2.7s ease-in-out infinite}.planet:before,.planet:after{content:'';position:absolute;inset:-18px;border-radius:50%;border:1px solid rgba(200,184,255,.22);animation:signalRing 2.7s ease-out infinite}.planet:after{animation-delay:1.35s}.planet span{position:relative;font-size:13px;font-weight:800;letter-spacing:.24em;text-shadow:0 0 16px rgba(255,255,255,.18);animation:liveTextFlicker 2.4s ease-in-out infinite}.satellite{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--cyan);box-shadow:0 0 20px var(--cyan);animation:satellitePulse 2s ease-in-out infinite}.s1{transform:translate(145px,-70px)}.s2{transform:translate(-150px,80px);background:var(--pink);box-shadow:0 0 22px var(--pink);animation-delay:-.6s}.s3{transform:translate(15px,125px);background:white;box-shadow:0 0 18px rgba(255,255,255,.9);animation-delay:-1.1s}.floating-chip{position:absolute;background:rgba(8,10,18,.62);border:1px solid var(--line);backdrop-filter:blur(10px);padding:9px 12px;border-radius:12px;font-size:11px;font-weight:700;animation:chipDrift 6s ease-in-out infinite}.c1{left:24px;top:100px}.c2{right:22px;top:180px;animation-delay:-2s}.c3{left:55px;bottom:38px;animation-delay:-4s}@keyframes levitate{50%{transform:translateY(-10px)}}@keyframes planetPulse{0%,100%{transform:scale(1);box-shadow:0 0 55px rgba(143,84,255,.35)}50%{transform:scale(1.045);box-shadow:0 0 90px rgba(143,84,255,.58)}}@keyframes signalRing{0%{opacity:.55;transform:scale(.92)}70%{opacity:.05;transform:scale(1.34)}100%{opacity:0;transform:scale(1.45)}}@keyframes liveTextFlicker{0%,100%{opacity:1}40%{opacity:.92}55%{opacity:1}62%{opacity:.84}70%{opacity:1}}@keyframes satellitePulse{0%,100%{transform:translate(var(--tx,0),var(--ty,0)) scale(1)}50%{transform:translate(var(--tx,0),var(--ty,0)) scale(1.25)}}@keyframes chipDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}.s1{--tx:145px;--ty:-70px}.s2{--tx:-150px;--ty:80px}.s3{--tx:15px;--ty:125px}
.block{padding:70px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.block h2{font-size:clamp(34px,4vw,52px)}.status-pill{font-size:11px;color:#b8bec9}.status-pill i{display:inline-block;position:relative;width:8px;height:8px;background:#54e09a;border-radius:50%;box-shadow:0 0 12px #54e09a;margin-right:6px;animation:livePulse 1.8s ease-out infinite}.status-pill i:after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(84,224,154,.45);animation:liveHalo 1.8s ease-out infinite}.stream-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stream-card{border-radius:22px;overflow:hidden;background:var(--panel2);border:1px solid var(--line);cursor:pointer;transition:.25s}.stream-card:hover{transform:translateY(-5px);border-color:rgba(166,108,255,.42)}.thumb{aspect-ratio:16/9;background:#111;position:relative;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover}.live-badge{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:7px;background:rgba(240,68,98,.92);border-radius:999px;padding:5px 10px 5px 8px;font-size:10px;font-weight:800;letter-spacing:.08em;box-shadow:0 8px 18px rgba(240,68,98,.22)}.live-badge:before{content:'';width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:liveBadgeBlink 1.55s ease-out infinite}.viewers{position:absolute;bottom:9px;left:9px;background:rgba(0,0,0,.65);padding:4px 7px;border-radius:6px;font-size:10px}.stream-meta{padding:14px}.stream-meta b{display:block;margin-bottom:5px}.stream-meta span{font-size:12px;color:var(--muted)}.empty{padding:30px;border-radius:20px;color:var(--muted);grid-column:1/-1;text-align:center}@keyframes livePulse{0%,100%{transform:scale(1);box-shadow:0 0 10px #54e09a}50%{transform:scale(1.22);box-shadow:0 0 18px #54e09a}}@keyframes liveHalo{0%{opacity:.6;transform:scale(.6)}100%{opacity:0;transform:scale(1.9)}}@keyframes liveBadgeBlink{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.75)}50%{transform:scale(1.18);box-shadow:0 0 0 8px rgba(255,255,255,0)}}
.moderator-section{width:min(1500px,calc(100% - 32px))}
.mod-deck-lead{margin:10px 0 0;max-width:760px;color:var(--muted);font-size:13px;line-height:1.65}
.multi-mod-shell{display:grid;grid-template-columns:235px minmax(0,1fr);gap:14px;align-items:start}
.multi-channel-rail{position:sticky;top:94px;border-radius:24px;padding:16px;max-height:calc(100vh - 112px);overflow:auto}
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:2px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.rail-head .eyebrow{margin-bottom:4px}.rail-head b{font-size:13px}.mod-count{font-size:10px;color:#9feaf0;background:rgba(92,225,230,.08);border:1px solid rgba(92,225,230,.15);padding:5px 7px;border-radius:999px;white-space:nowrap}
.channel-list{display:flex;flex-direction:column;gap:7px}
.channel-button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;background:transparent;color:white;border:1px solid transparent;padding:11px;border-radius:13px;cursor:pointer;transition:.18s}
.channel-button:hover,.channel-button.active{background:rgba(255,255,255,.07);border-color:var(--line)}
.channel-button.active{box-shadow:inset 3px 0 rgba(166,108,255,.75)}
.channel-button-main{min-width:0}.channel-button b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-button small{display:block;color:var(--muted);margin-top:4px}
.channel-open-state{font-size:9px;color:var(--muted);white-space:nowrap}
.channel-button.active .channel-open-state{color:#bba4ff}.live-dot{color:#ff5f76}
.mod-workbench-wrap{min-width:0}.mod-workbench{display:flex;flex-direction:column;gap:14px}
.mod-empty{min-height:360px;border-radius:26px;display:grid;place-content:center;text-align:center;padding:32px}
.mod-empty-orb{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:rgba(166,108,255,.12);border:1px solid rgba(166,108,255,.2);box-shadow:0 0 45px rgba(166,108,255,.13);font-size:24px;color:#bda1ff}
.mod-empty b{font-size:18px}.mod-empty span{max-width:420px;color:var(--muted);font-size:12px;margin-top:7px;line-height:1.55}
.mod-panel{border-radius:26px;overflow:hidden;scroll-margin-top:92px}
.mod-panel-head{min-height:64px;padding:11px 14px 11px 17px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(0,0,0,.1)}
.mod-panel-identity{display:flex;align-items:center;gap:11px}.mod-panel-identity b,.mod-panel-identity span{display:block}.mod-panel-identity>div>span{font-size:10px;color:var(--muted);margin-top:3px}
.mod-panel-live{font-size:9px;font-weight:800;letter-spacing:.09em;color:var(--muted);border:1px solid var(--line);background:rgba(255,255,255,.04);padding:6px 8px;border-radius:999px}
.mod-panel-live.is-live{color:#ff9aaa;border-color:rgba(255,95,118,.28);background:rgba(255,95,118,.1);box-shadow:0 0 20px rgba(255,95,118,.08)}
.mod-panel-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(310px,.7fr);min-height:510px}
.mod-stream-side{min-width:0;padding:14px}.mod-stream-frame{aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#080a10;border:1px solid var(--line)}
.mod-stream-frame iframe{width:100%;height:100%;border:0;display:block}
.mod-send-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}
.mod-control-box{margin-top:10px;padding:11px;border-radius:15px;background:rgba(0,0,0,.14);border:1px solid var(--line)}
.mod-control-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}.mod-control-title b{font-size:11px}.mod-control-title span{font-size:9px;color:var(--muted)}
.mod-action-grid{display:grid;grid-template-columns:minmax(140px,1fr) 125px minmax(150px,1fr) auto;gap:7px}
.mod-chat-side{min-width:0;border-left:1px solid var(--line);background:rgba(0,0,0,.12)}
.pane-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px}.pane-head span{color:var(--muted)}
.mod-chat-side iframe{display:block;width:100%;height:100%;min-height:510px;border:0;background:white}
input,textarea{width:100%;background:rgba(0,0,0,.18);border:1px solid var(--line);color:white;border-radius:12px;padding:12px 13px;font:inherit;outline:none}input:focus,textarea:focus{border-color:rgba(166,108,255,.6);box-shadow:0 0 0 3px rgba(166,108,255,.09)}textarea{min-height:110px;resize:vertical}.two-col{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px}.form-card{padding:18px;border-radius:20px;display:grid;gap:10px;margin-top:25px}.feed{display:flex;flex-direction:column;gap:12px}.post{border-radius:20px;padding:18px}.post-head{display:flex;align-items:center;gap:10px}.post-head img{width:38px;height:38px;border-radius:50%}.post-head small{color:var(--muted);display:block}.post h3{margin:15px 0 7px}.post p{color:#c2c5d0;font-size:13px;line-height:1.6}.tags,.reactions{display:flex;gap:6px;flex-wrap:wrap}.tag{font-size:10px;background:rgba(92,225,230,.09);border:1px solid rgba(92,225,230,.16);padding:5px 8px;border-radius:20px;color:#b7f6f7}.react{background:rgba(255,255,255,.06);border:1px solid var(--line);color:#ddd;border-radius:20px;padding:5px 9px;cursor:pointer}
.rooms-grid,.giveaway-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.room-card,.giveaway-card{padding:18px;border-radius:20px}.room-card h3,.giveaway-card h3{margin:0 0 8px}.room-card p,.giveaway-card p{color:var(--muted);font-size:12px}.room-workspace{margin-top:18px;border-radius:24px;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.board-list,.room-messages{display:flex;flex-direction:column;gap:7px;max-height:330px;overflow:auto}.board-item,.room-msg{padding:10px;border-radius:11px;background:rgba(255,255,255,.05);font-size:12px}.board-item.done{text-decoration:line-through;opacity:.55}.giveaway-form{margin:0 0 18px}.hidden{display:none}.card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.copy-field{font-size:10px;word-break:break-all;color:#9feaf0;background:rgba(0,0,0,.18);padding:8px;border-radius:9px;margin-top:8px}.muted{color:var(--muted);font-size:12px}.toasts{position:fixed;right:18px;bottom:18px;z-index:99;display:flex;flex-direction:column;gap:8px}.toast{width:300px;padding:13px 14px;border-radius:15px;background:rgba(20,22,35,.88);backdrop-filter:blur(20px);border:1px solid var(--line);box-shadow:var(--shadow);animation:toastin .3s ease}.toast b{display:block;font-size:12px}.toast span{font-size:11px;color:var(--muted)}@keyframes toastin{from{transform:translateX(30px);opacity:0}}footer{width:min(1180px,calc(100% - 32px));margin:30px auto 60px;padding-top:25px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:12px;color:#d8d9e1}footer small{margin-left:auto;color:var(--muted)}

.live-watch-section{scroll-margin-top:92px}
.live-watch-shell{border-radius:26px;display:grid;grid-template-columns:minmax(0,1fr) 330px;overflow:hidden}
.live-watch-main{min-width:0;padding:16px}
.live-watch-player{aspect-ratio:16/9;border-radius:18px;background:linear-gradient(145deg,#111421,#0a0c13);display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}
.live-watch-player iframe{width:100%;height:100%;border:0}
.live-watch-player>div{text-align:center;padding:24px}
.live-watch-player b,.live-watch-player span{display:block}
.live-watch-player span{font-size:12px;color:var(--muted);margin-top:8px}
.live-watch-info{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:14px 4px 2px}
.live-watch-info b,.live-watch-info span{display:block}
.live-watch-info>div span{font-size:12px;color:var(--muted);margin-top:5px}
.live-watch-chat{border-left:1px solid var(--line);min-width:0;background:rgba(0,0,0,.12)}
.live-watch-chat iframe{display:block;width:100%;height:100%;min-height:520px;border:0;background:white}
.watch-now{position:absolute;right:10px;bottom:9px;background:rgba(10,12,19,.82);backdrop-filter:blur(12px);padding:6px 9px;border:1px solid rgba(255,255,255,.14);border-radius:8px;font-size:10px;font-weight:800;opacity:0;transform:translateY(4px);transition:.2s}
.stream-card:hover .watch-now,.stream-card:focus .watch-now,.stream-card:focus-visible .watch-now{opacity:1;transform:none}
.stream-card:focus-visible{outline:2px solid rgba(166,108,255,.75);outline-offset:3px}

@media(max-width:980px){.topbar nav{display:none}.hero{grid-template-columns:1fr;gap:25px}.hero-visual{height:390px}.stream-grid,.rooms-grid,.giveaway-grid{grid-template-columns:repeat(2,1fr)}.mod-layout{grid-template-columns:170px 1fr}.chat-pane{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}.chat-pane iframe,.chat-placeholder{height:420px}.two-col{grid-template-columns:1fr}.room-workspace{grid-template-columns:1fr}.live-watch-shell{grid-template-columns:1fr}.live-watch-chat{border-left:0;border-top:1px solid var(--line)}.live-watch-chat iframe{min-height:420px}}
@media(max-width:650px){.topbar{height:60px}.brand span:last-child{font-size:13px}.hero{min-height:auto;padding-top:70px}.hero h1{font-size:50px}.hero-visual{height:330px}.stream-grid,.rooms-grid,.giveaway-grid{grid-template-columns:1fr}.mod-layout{display:block}.channel-rail{border-right:0;border-bottom:1px solid var(--line)}.channel-list{flex-direction:row;overflow:auto}.channel-button{min-width:145px}.mod-actions{grid-template-columns:1fr}.command-strip{flex-direction:column}.section-head{align-items:flex-start;flex-direction:column}.mini-stats{overflow:auto}.pulse-orbit{transform:scale(.8)}.aurora,.mist{opacity:.08}.bg-wash{opacity:.55}body{animation-duration:42s}footer small{display:none}}

.sponsor-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:18px;align-items:start}.sponsor-copy{border-radius:24px;padding:26px;position:sticky;top:90px;overflow:hidden}.sponsor-copy:after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;bottom:-80px;background:radial-gradient(circle,rgba(92,225,230,.18),transparent 68%);pointer-events:none}.sponsor-copy h3{font-size:28px;margin:8px 0 10px}.sponsor-copy p{color:var(--muted);line-height:1.7;font-size:13px}.sponsor-points{display:flex;flex-direction:column;gap:9px;margin-top:20px;font-size:12px;color:#d9dcff}.sponsor-form{margin-top:0;padding:22px}.sponsor-form label{display:grid;gap:7px;font-size:11px;color:#b9bdc9}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sponsor-submit{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:4px}.sponsor-submit small{color:var(--muted);max-width:55%;line-height:1.45}.sponsor-submit button:disabled{opacity:.55;cursor:wait}
@media(max-width:980px){.sponsor-layout{grid-template-columns:1fr}.sponsor-copy{position:relative;top:auto}.form-row{grid-template-columns:1fr}}
@media(max-width:650px){.sponsor-submit{align-items:stretch;flex-direction:column}.sponsor-submit small{max-width:none}}


.btn:disabled,.icon-btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
body.wheel-open{overflow:hidden}
.wheel-modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:22px}
.wheel-modal.hidden{display:none}
.wheel-backdrop{position:absolute;inset:0;background:rgba(3,4,10,.78);backdrop-filter:blur(18px)}
.wheel-dialog{position:relative;width:min(760px,100%);max-height:calc(100vh - 44px);overflow:auto;border-radius:30px;padding:22px;background:rgba(17,19,31,.88);box-shadow:0 36px 100px rgba(0,0,0,.62)}
.wheel-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.wheel-dialog-head h2{margin:0;font-size:clamp(28px,5vw,42px);letter-spacing:-.045em}
.wheel-dialog-head p{margin:7px 0 0;color:var(--muted);font-size:12px}
.wheel-stage{position:relative;width:min(560px,84vw);aspect-ratio:1;margin:18px auto 8px;display:grid;place-items:center;filter:drop-shadow(0 28px 50px rgba(0,0,0,.35))}

.wheel-stage-clickable{cursor:pointer;border-radius:50%;outline:none}
.wheel-stage-clickable:not(:has(.is-spinning)):hover .wheel-spinner{filter:brightness(1.08);transform:scale(1.012)}
.wheel-stage-clickable:focus-visible{outline:2px solid rgba(159,234,240,.9);outline-offset:9px}
.wheel-stage-clickable .wheel-spinner{transition:filter .2s ease,transform .2s ease}
.wheel-stage-clickable .wheel-hub{pointer-events:none}
.wheel-spinner.is-spinning{cursor:wait}
.wheel-spinner{width:100%;height:100%;position:relative;border-radius:50%;will-change:transform}
.wheel-spinner canvas{display:block;width:100%;height:100%;border-radius:50%}
.wheel-pointer{position:absolute;z-index:4;top:-5px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:38px solid #fff;filter:drop-shadow(0 5px 8px rgba(0,0,0,.45))}
.wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:50%;display:grid;place-content:center;text-align:center;background:rgba(9,10,18,.92);border:5px solid rgba(255,255,255,.7);box-shadow:0 0 0 8px rgba(7,8,14,.36),0 14px 35px rgba(0,0,0,.4);color:white}
.wheel-hub span{font-size:9px;letter-spacing:.23em;color:#9feaf0}.wheel-hub b{font-size:16px;letter-spacing:.08em;margin-top:2px}
.wheel-status,.wheel-winner{text-align:center;padding:14px 15px 5px}
.wheel-kicker{display:block;color:#9feaf0;font-size:10px;font-weight:800;letter-spacing:.18em;margin-bottom:7px}
.wheel-status strong{display:block;font-size:19px}.wheel-status small{display:block;color:var(--muted);margin-top:6px}
.wheel-winner{animation:winnerpop .55s cubic-bezier(.18,.85,.22,1.15)}
.wheel-winner .winner-crown{width:52px;height:52px;margin:0 auto 6px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#8752ff,#ff67ca);font-size:23px;box-shadow:0 12px 36px rgba(166,108,255,.3)}
.wheel-winner h3{font-size:clamp(32px,6vw,54px);margin:3px 0;letter-spacing:-.05em;background:linear-gradient(90deg,#b997ff,#6de7e4,#ff8cd8);-webkit-background-clip:text;color:transparent}
.wheel-winner p{color:var(--muted);font-size:12px;margin:0 0 14px}
@keyframes winnerpop{0%{opacity:0;transform:scale(.84)}70%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@media(max-width:650px){.wheel-modal{padding:10px}.wheel-dialog{padding:16px;border-radius:23px}.wheel-stage{width:min(470px,88vw)}.wheel-hub{width:82px;height:82px;border-width:4px}.wheel-hub b{font-size:12px}.wheel-pointer{border-left-width:14px;border-right-width:14px;border-top-width:30px}}
@media(prefers-reduced-motion:reduce){.wheel-winner{animation:none}.wheel-spinner{transition-duration:.01ms!important}}


@media(max-width:1150px){
  .multi-mod-shell{grid-template-columns:190px minmax(0,1fr)}
  .mod-panel-grid{grid-template-columns:1fr}
  .mod-chat-side{border-left:0;border-top:1px solid var(--line)}
  .mod-chat-side iframe{height:460px;min-height:460px}
  .mod-action-grid{grid-template-columns:1fr 120px 1fr}
  .mod-action-grid .btn{grid-column:1/-1}
}
@media(max-width:760px){
  .moderator-section{width:min(100% - 20px,1500px)}
  .multi-mod-shell{grid-template-columns:1fr}
  .multi-channel-rail{position:relative;top:auto;max-height:none}
  .channel-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mod-panel-head{align-items:flex-start}
  .mod-send-row{grid-template-columns:1fr}
  .mod-action-grid{grid-template-columns:1fr}
  .mod-action-grid .btn{grid-column:auto}
  .mod-control-title{align-items:flex-start;flex-direction:column}
}
@media(max-width:500px){
  .channel-list{grid-template-columns:1fr}
  .mod-panel-head{flex-direction:column}
  .mod-panel-head .inline-actions{width:100%}
  .mod-panel-head .inline-actions>*{flex:1;text-align:center}
}

/* Ambient floating ambassadors */
.ambassador-field{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.ambassador-field.hidden{display:none}
.ambassador-floaters{position:absolute;inset:0}
.ambassador-floater{
  position:absolute;
  left:0;
  top:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
  margin:-12px;
  border-radius:24px;
  color:white;
  text-decoration:none;
  pointer-events:auto;
  touch-action:manipulation;
  opacity:var(--amb-opacity,.38);
  transform:translate3d(var(--amb-x),var(--amb-y),0);
  animation:ambassadorDrift var(--amb-duration,18s) ease-in-out infinite alternate;
  animation-delay:var(--amb-delay,0s);
  filter:saturate(.82);
  transition:opacity .25s ease,filter .25s ease,scale .25s ease;
  will-change:transform;
}
.ambassador-floater.is-right{flex-direction:row-reverse}
.ambassador-floater:hover,
.ambassador-floater:focus-visible{
  opacity:.96;
  filter:saturate(1.08);
  scale:1.08;
  animation-play-state:paused;
  outline:none;
}
.ambassador-floater:focus-visible .ambassador-avatar-ring{
  box-shadow:0 10px 35px rgba(0,0,0,.24),0 0 0 3px rgba(92,225,230,.34),0 0 30px rgba(166,108,255,.2);
}
.ambassador-avatar-ring{
  position:relative;
  width:var(--amb-size,62px);
  height:var(--amb-size,62px);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(166,108,255,.55),rgba(92,225,230,.35));
  padding:3px;
  box-shadow:0 10px 35px rgba(0,0,0,.24),0 0 30px rgba(166,108,255,.12);
}
.ambassador-avatar-ring:before{
  content:'';
  position:absolute;
  inset:-7px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  animation:ambassadorHalo 3.8s ease-out infinite;
}
.ambassador-avatar-ring img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  border:2px solid rgba(10,12,20,.8);
}
.ambassador-float-name{
  max-width:120px;
  padding:7px 9px;
  border-radius:12px;
  background:rgba(12,14,24,.46);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 28px rgba(0,0,0,.16);
  opacity:.48;
  transform:translateX(-5px);
  transition:opacity .2s ease,transform .2s ease;
}
.ambassador-floater.is-right .ambassador-float-name{transform:translateX(5px);text-align:right}
.ambassador-floater:hover .ambassador-float-name,
.ambassador-floater:focus-visible .ambassador-float-name{
  opacity:1;
  transform:translateX(0);
}
.ambassador-float-name small,.ambassador-float-name b{display:block}
.ambassador-float-name small{
  color:#9feaf0;
  font-size:7px;
  letter-spacing:.15em;
}
.ambassador-float-name b{
  font-size:10px;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
footer a{color:#9feaf0;text-decoration:none}
footer a:hover{text-decoration:underline}

@keyframes ambassadorDrift{
  0%{
    transform:translate3d(var(--amb-x),var(--amb-y),0) rotate(-1.5deg);
  }
  45%{
    transform:translate3d(calc(var(--amb-x) + var(--amb-dx)),calc(var(--amb-y) + var(--amb-dy)),0) rotate(1.5deg);
  }
  100%{
    transform:translate3d(calc(var(--amb-x) - 12px),calc(var(--amb-y) + 18px),0) rotate(-.7deg);
  }
}
@keyframes ambassadorHalo{
  0%{opacity:.35;transform:scale(.88)}
  75%{opacity:.03;transform:scale(1.25)}
  100%{opacity:0;transform:scale(1.32)}
}

@media(max-width:900px){
  .ambassador-floater{opacity:calc(var(--amb-opacity,.38) * .8)}
  .ambassador-float-name{display:none}
  .ambassador-avatar-ring{
    width:calc(var(--amb-size,62px) * .78);
    height:calc(var(--amb-size,62px) * .78);
  }
}
@media(max-width:650px){
  .ambassador-field{z-index:6}
  .ambassador-floater:nth-child(n+6){display:none}
  .ambassador-avatar-ring{
    width:42px;
    height:42px;
    padding:2px;
  }
}
@media(prefers-reduced-motion:reduce){
  .ambassador-floater,.ambassador-avatar-ring:before{animation:none}
}

@media(prefers-reduced-motion:reduce){body,.bg-wash,.aurora,.mist{animation:none!important;background-position:50% 50%!important}}


/* Theme controls */
.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.theme-toggle{
  min-width:82px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 11px;
  border-radius:13px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.065);
  color:white;
  font:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.theme-toggle:hover{transform:translateY(-2px);border-color:rgba(166,108,255,.42)}
.theme-toggle-icon{font-size:14px}
.theme-toggle-text{white-space:nowrap}

/* Vibrant Dark Mode */
html[data-theme="vibrant-dark"],
body.vibrant-dark{
  color-scheme:dark;
}
body.vibrant-dark{
  --bg:#03040a;
  --panel:rgba(255,255,255,.078);
  --panel2:rgba(255,255,255,.052);
  --line:rgba(255,255,255,.16);
  --text:#fbfbff;
  --muted:#abb0c4;
  --purple:#a955ff;
  --cyan:#38efff;
  --pink:#ff4fcf;
  --danger:#ff456d;
  --shadow:0 24px 70px rgba(0,0,0,.58);

  background:
    radial-gradient(circle at 12% 16%,rgba(92,62,255,.25) 0,transparent 29%),
    radial-gradient(circle at 88% 16%,rgba(0,231,255,.18) 0,transparent 27%),
    radial-gradient(circle at 74% 84%,rgba(255,40,175,.16) 0,transparent 28%),
    radial-gradient(circle at 32% 66%,rgba(70,255,176,.10) 0,transparent 32%),
    linear-gradient(128deg,#020309 0%,#07091a 25%,#081523 47%,#14091d 70%,#030713 100%);
  background-size:190% 190%;
  animation:vibrantDarkShift 64s ease-in-out infinite alternate;
}
body.vibrant-dark .bg-wash{
  background:
    radial-gradient(circle at 16% 20%,rgba(116,76,255,.26),transparent 24%),
    radial-gradient(circle at 82% 22%,rgba(36,225,255,.21),transparent 25%),
    radial-gradient(circle at 63% 78%,rgba(255,55,194,.18),transparent 26%),
    radial-gradient(circle at 38% 54%,rgba(70,255,190,.10),transparent 30%);
  opacity:.94;
  filter:blur(42px) saturate(1.18);
  animation:bgBreathe 30s ease-in-out infinite alternate,vibrantWashShift 78s ease-in-out infinite alternate;
}
body.vibrant-dark .a1{background:#7d42ff;opacity:.25}
body.vibrant-dark .a2{background:#1ce7ff;opacity:.21}
body.vibrant-dark .a3{background:#ff4fca;opacity:.18}
body.vibrant-dark .m1{background:rgba(95,63,255,.58)}
body.vibrant-dark .m2{background:rgba(23,230,255,.44)}
body.vibrant-dark .m3{background:rgba(255,67,190,.40)}

body.vibrant-dark .glass{
  background:linear-gradient(135deg,rgba(255,255,255,.095),rgba(255,255,255,.038));
  border-color:rgba(255,255,255,.15);
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 24px 70px rgba(0,0,0,.55);
  backdrop-filter:blur(26px) saturate(155%);
  -webkit-backdrop-filter:blur(26px) saturate(155%);
}
body.vibrant-dark .brand-orb{
  background:linear-gradient(145deg,#9a49ff,#27efff);
  box-shadow:0 0 32px rgba(132,70,255,.48),0 0 26px rgba(39,239,255,.15);
}
body.vibrant-dark .brand b{color:#cc9cff}
body.vibrant-dark .eyebrow{color:#67f4ff;text-shadow:0 0 18px rgba(56,239,255,.18)}
body.vibrant-dark .hero h1 span{
  background:linear-gradient(90deg,#b65cff,#3cecff,#ff55d3,#73ffb8);
  background-size:220% auto;
  -webkit-background-clip:text;
  color:transparent;
  animation:vibrantTextFlow 12s linear infinite;
}
body.vibrant-dark .primary{
  background:linear-gradient(135deg,#8245ff,#bc46ff 48%,#ec43ca);
  box-shadow:0 12px 34px rgba(139,66,255,.34);
}
body.vibrant-dark .primary:hover{box-shadow:0 14px 42px rgba(164,72,255,.46)}
body.vibrant-dark .twitch{
  background:linear-gradient(135deg,#9146ff,#b04dff);
  box-shadow:0 10px 28px rgba(145,70,255,.25);
}
body.vibrant-dark .ghost,
body.vibrant-dark .icon-btn,
body.vibrant-dark .theme-toggle{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.15);
}
body.vibrant-dark .theme-toggle{
  color:#dffcff;
  box-shadow:inset 0 0 18px rgba(56,239,255,.04),0 0 24px rgba(154,73,255,.07);
}
body.vibrant-dark .theme-toggle:hover{
  border-color:rgba(56,239,255,.34);
  box-shadow:0 0 28px rgba(56,239,255,.09),0 0 24px rgba(169,85,255,.09);
}
body.vibrant-dark input,
body.vibrant-dark textarea{
  background:rgba(0,0,0,.28);
  border-color:rgba(255,255,255,.14);
}
body.vibrant-dark input:focus,
body.vibrant-dark textarea:focus{
  border-color:rgba(56,239,255,.48);
  box-shadow:0 0 0 3px rgba(56,239,255,.07),0 0 22px rgba(169,85,255,.07);
}
body.vibrant-dark .tag{
  color:#aafaff;
  background:rgba(56,239,255,.08);
  border-color:rgba(56,239,255,.17);
}
body.vibrant-dark .status-pill i{
  background:#65ffb2;
  box-shadow:0 0 15px #65ffb2;
}
body.vibrant-dark .live-badge{
  background:linear-gradient(135deg,#ff3f61,#ff416f);
  box-shadow:0 8px 22px rgba(255,63,97,.30);
}
body.vibrant-dark .planet{
  background:radial-gradient(circle at 35% 25%,#f3e5ff,#8a46ff 28%,#161329 72%);
  box-shadow:0 0 82px rgba(147,64,255,.62),0 0 54px rgba(42,227,255,.09);
}
body.vibrant-dark .stream-card:hover,
body.vibrant-dark .channel-button:hover,
body.vibrant-dark .channel-button.active{
  border-color:rgba(56,239,255,.24);
}
body.vibrant-dark .channel-button.active{
  box-shadow:inset 3px 0 #b14cff,0 0 22px rgba(56,239,255,.04);
}
body.vibrant-dark .ambassador-avatar-ring{
  background:linear-gradient(145deg,rgba(164,73,255,.72),rgba(39,239,255,.52),rgba(255,79,207,.48));
  box-shadow:0 12px 38px rgba(0,0,0,.38),0 0 34px rgba(169,85,255,.20);
}
body.vibrant-dark .ambassador-float-name{
  background:rgba(5,7,15,.62);
  border-color:rgba(56,239,255,.13);
}
body.vibrant-dark .copy-field{color:#82f6ff}
body.vibrant-dark footer a{color:#67f4ff}

@keyframes vibrantDarkShift{
  0%{background-position:0% 50%}
  24%{background-position:30% 20%}
  51%{background-position:100% 43%}
  76%{background-position:66% 86%}
  100%{background-position:8% 70%}
}
@keyframes vibrantWashShift{
  0%{transform:scale(1) translate3d(0,0,0);background-position:0% 0%}
  50%{transform:scale(1.045) translate3d(10px,-10px,0);background-position:100% 40%}
  100%{transform:scale(1.08) translate3d(-12px,12px,0);background-position:24% 100%}
}
@keyframes vibrantTextFlow{
  to{background-position:220% center}
}

@media(max-width:650px){
  .topbar-actions{gap:6px}
  .theme-toggle{min-width:42px;width:42px;padding:0}
  .theme-toggle-text{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.vibrant-dark,.body.vibrant-dark .bg-wash,.hero h1 span{animation:none!important}
}


/* Hidden game Easter eggs */
.game-egg{position:fixed;inset:0;z-index:210;pointer-events:none;opacity:0;transition:opacity .35s ease}
.game-egg.is-visible{opacity:1}
.egg-click-target{cursor:default}

/* 117 / sci-fi HUD */
.egg-halo{display:grid;place-items:center;background:radial-gradient(circle at center,rgba(71,255,163,.055),transparent 34%)}
.halo-reticle{
  position:relative;
  width:min(430px,74vw);
  aspect-ratio:1.45;
  display:grid;
  place-items:center;
  color:#8effbd;
  text-align:center;
  filter:drop-shadow(0 0 14px rgba(80,255,166,.22));
  animation:haloHudIn .55s cubic-bezier(.16,.8,.22,1);
}
.halo-reticle:before,.halo-reticle:after{
  content:'';
  position:absolute;
  inset:18%;
  border:1px solid rgba(105,255,179,.34);
  border-radius:50%;
}
.halo-reticle:after{inset:28%;border-style:dashed;animation:haloSpin 7s linear infinite}
.halo-reticle strong{font-size:clamp(64px,10vw,108px);letter-spacing:.08em;font-weight:800;text-shadow:0 0 28px rgba(87,255,171,.27)}
.halo-reticle small{position:absolute;bottom:16%;font-size:9px;letter-spacing:.25em;color:rgba(158,255,201,.75)}
.halo-corner{position:absolute;width:36px;height:36px;border-color:#86ffb9;border-style:solid;opacity:.65}
.hc1{left:4%;top:7%;border-width:2px 0 0 2px}.hc2{right:4%;top:7%;border-width:2px 2px 0 0}.hc3{left:4%;bottom:7%;border-width:0 0 2px 2px}.hc4{right:4%;bottom:7%;border-width:0 2px 2px 0}
.halo-scan{position:absolute;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,#83ffb6,transparent);box-shadow:0 0 12px #83ffb6;animation:haloScan 1.7s ease-in-out infinite}
body.halo-scan-active:after{content:'';position:fixed;inset:0;z-index:205;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(110,255,180,.012) 0 1px,transparent 1px 5px)}
@keyframes haloHudIn{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes haloSpin{to{transform:rotate(360deg)}}
@keyframes haloScan{0%,100%{top:20%;opacity:0}20%{opacity:.8}80%{opacity:.8}100%{top:80%}}

/* Crash-style secret orb burst */
.crash-egg-spin{animation:crashOrbSpin .7s cubic-bezier(.3,.1,.2,1) infinite!important}
.egg-crash{display:grid;place-items:center}
.crash-burst{position:relative;width:min(430px,76vw);aspect-ratio:1;display:grid;place-items:center;text-align:center}
.crash-burst strong{
  position:relative;
  z-index:2;
  font-size:clamp(62px,13vw,126px);
  letter-spacing:-.08em;
  transform:rotate(-6deg);
  color:#ffd65c;
  text-shadow:5px 6px 0 rgba(255,82,78,.65),-3px -3px 0 rgba(116,72,255,.5),0 15px 35px rgba(0,0,0,.4);
  animation:woahPop .65s cubic-bezier(.16,1.2,.28,1);
}
.crash-burst small{position:absolute;bottom:18%;font-size:9px;letter-spacing:.2em;color:#fff0b1;background:rgba(8,10,18,.68);padding:7px 10px;border-radius:999px}
.wumpa-ish-fruit{position:absolute;font-size:28px;left:50%;top:50%;--radius:150px;transform:translate(-50%,-50%) rotate(var(--fruit-angle)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--fruit-angle) * -1));animation:fruitBurst 1.5s ease-out both;animation-delay:calc(var(--fruit-i) * 35ms)}
@keyframes crashOrbSpin{to{transform:rotate(360deg) scale(1.08)}}
@keyframes woahPop{0%{transform:rotate(-12deg) scale(.2);opacity:0}70%{transform:rotate(4deg) scale(1.15)}100%{transform:rotate(-6deg) scale(1)}}
@keyframes fruitBurst{0%{opacity:0;scale:.35}30%{opacity:1;scale:1.2}100%{opacity:0;scale:.9;translate:0 -28px}}

/* Purple dragon flyby */
.egg-spyro{overflow:hidden}
.spyro-flight{position:absolute;left:-22vw;top:26vh;width:140vw;height:48vh;animation:dragonFly 4.1s cubic-bezier(.2,.7,.25,1) forwards}
.spyro-dragon{position:absolute;left:12%;top:35%;font-size:clamp(68px,9vw,120px);filter:drop-shadow(0 0 28px rgba(172,79,255,.45));transform:rotate(-8deg)}
.spyro-trail{position:absolute;left:5%;top:53%;width:31%;height:7px;border-radius:50%;background:linear-gradient(90deg,transparent,#a94cff,#ff72d7,#ffd45e);filter:blur(5px);opacity:.72}
.spyro-spark{position:absolute;color:#ffd86d;text-shadow:0 0 14px #ffca5e;font-size:20px;animation:spyroSpark 1.1s ease-in-out infinite}
.sA{left:9%;top:27%}.sB{left:17%;top:66%;animation-delay:-.4s}.sC{left:25%;top:37%;animation-delay:-.8s}
.spyro-caption{position:absolute;left:11%;top:72%;padding:8px 11px;border-radius:12px;background:rgba(22,11,36,.72);border:1px solid rgba(194,113,255,.25);backdrop-filter:blur(12px);color:white}
.spyro-caption b,.spyro-caption small{display:block}.spyro-caption b{font-size:10px;color:#d6a2ff;letter-spacing:.13em}.spyro-caption small{font-size:9px;color:#c9bed0;margin-top:3px}
@keyframes dragonFly{0%{transform:translateX(0) translateY(8px) rotate(-2deg)}42%{transform:translateX(48vw) translateY(-55px) rotate(3deg)}100%{transform:translateX(122vw) translateY(30px) rotate(-3deg)}}
@keyframes spyroSpark{50%{transform:scale(1.8) rotate(45deg);opacity:.5}}

/* Sly-style sneaky cameo */
.egg-sly{overflow:hidden}
.sly-peek{position:absolute;right:3vw;bottom:0;width:310px;height:300px;animation:slyPeek 3.7s cubic-bezier(.2,.8,.2,1) forwards}
.sly-moon{position:absolute;right:15px;bottom:22px;width:205px;height:205px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#6fbfff,#2450a8 48%,#09162e 75%);box-shadow:0 0 50px rgba(67,139,255,.28);opacity:.32}
.sly-raccoon{position:absolute;right:91px;bottom:76px;font-size:84px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.sly-cane{position:absolute;right:49px;bottom:66px;font-size:95px;color:#75bfff;transform:rotate(-28deg);text-shadow:0 0 18px rgba(84,168,255,.42)}
.sly-caption{position:absolute;right:45px;bottom:22px;text-align:right;background:rgba(5,11,28,.72);border:1px solid rgba(92,171,255,.22);border-radius:12px;padding:8px 10px;backdrop-filter:blur(12px)}
.sly-caption b,.sly-caption small{display:block}.sly-caption b{font-size:9px;letter-spacing:.14em;color:#8ec9ff}.sly-caption small{font-size:9px;color:#aebbd0;margin-top:3px}
.paw{position:absolute;color:#82c4ff;opacity:.55;font-size:30px}.p1{right:235px;bottom:36px}.p2{right:268px;bottom:69px}.p3{right:290px;bottom:108px}
@keyframes slyPeek{0%{transform:translateY(118%);opacity:0}28%{transform:translateY(0);opacity:1}72%{transform:translateY(0);opacity:1}100%{transform:translateY(118%);opacity:0}}

@media(max-width:650px){
  .spyro-flight{top:30vh}
  .spyro-caption{display:none}
  .sly-peek{right:-25px;scale:.8;transform-origin:bottom right}
  .wumpa-ish-fruit{--radius:105px}
}
@media(prefers-reduced-motion:reduce){
  .halo-reticle:after,.halo-scan,.crash-egg-spin,.wumpa-ish-fruit,.spyro-flight,.spyro-spark,.sly-peek{animation:none!important}
  .egg-spyro,.egg-sly{display:none}
}

/* Easter egg reliability + character art */
.pulse-orbit:before,.pulse-orbit:after,.planet:before,.planet:after{pointer-events:none}
#livePulseOrb{position:relative;z-index:3;cursor:pointer;user-select:none;-webkit-user-select:none}
#livePulseOrb:hover{filter:brightness(1.08)}
#livePulseOrb:focus-visible{outline:2px solid rgba(255,214,92,.86);outline-offset:8px}

/* Actual character artwork used for the hidden flybys/cameos. */

/* Easter egg reliability + uploaded character art */
.pulse-orbit:before,.pulse-orbit:after,.planet:before,.planet:after{pointer-events:none}
#livePulseOrb{position:relative;z-index:3;cursor:pointer;user-select:none;-webkit-user-select:none}
#livePulseOrb:hover{filter:brightness(1.08)}
#livePulseOrb:focus-visible{outline:2px solid rgba(255,214,92,.86);outline-offset:8px}

.spyro-dragon{
  position:absolute;
  left:7%;
  top:6%;
  width:355px;
  max-width:30vw;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 28px rgba(172,79,255,.46)) drop-shadow(0 18px 28px rgba(0,0,0,.28));
  transform:rotate(-6deg);
}
.spyro-trail{
  left:10%;
  top:61%;
  width:24%;
}
.sly-raccoon{
  position:absolute;
  right:8px;
  bottom:34px;
  width:235px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.48)) drop-shadow(0 0 25px rgba(76,154,255,.24));
}
.sly-cane{display:none}

@media(max-width:650px){
  .spyro-dragon{width:215px;max-width:52vw;left:4%;top:22%}
  .sly-raccoon{width:190px;right:-6px;bottom:34px}
}


/* StreamSphere signed-up creator marker */
.member-badge{position:absolute;top:10px;right:10px;padding:5px 8px;border-radius:999px;background:rgba(8,10,18,.72);border:1px solid rgba(159,234,240,.22);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#aef7ff;font-size:8px;font-weight:800;letter-spacing:.12em}
.stream-member-line{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.stream-member-line img{width:24px;height:24px;border-radius:8px;object-fit:cover;border:1px solid rgba(255,255,255,.12)}
.stream-member-line b{margin:0}
body.vibrant-dark .member-badge{color:#79f6ff;border-color:rgba(56,239,255,.28);background:rgba(3,5,13,.74);box-shadow:0 0 20px rgba(56,239,255,.06)}


/* ============================================================
   117 SPARTAN MODE
   A full-site sci-fi military HUD transformation.
   ============================================================ */
.halo-site-hud{
  position:fixed;
  inset:0;
  z-index:70;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease,visibility .45s ease;
  color:#aaffc4;
  font-family:Inter,system-ui,sans-serif;
}
.halo-site-hud.active{opacity:1;visibility:visible}
.halo-site-hud:before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(113,255,172,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(113,255,172,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 68%);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 68%);
}
.halo-site-hud:after{
  content:'';
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(180deg,rgba(139,255,187,.012) 0 1px,transparent 1px 5px);
  opacity:.8;
}
.halo-hud-top{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:min(760px,calc(100% - 34px));
  height:42px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 12px;
  border:1px solid rgba(130,255,180,.28);
  background:linear-gradient(90deg,rgba(6,21,18,.84),rgba(10,34,27,.72),rgba(6,21,18,.84));
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 28px rgba(70,255,147,.09);
  pointer-events:auto;
}
.halo-hud-mark{
  display:grid;
  place-items:center;
  min-width:55px;
  height:28px;
  color:#e3ffd9;
  font-size:14px;
  font-weight:800;
  letter-spacing:.16em;
  border-right:1px solid rgba(130,255,180,.22);
}
.halo-hud-status{
  flex:1;
  font-size:9px;
  letter-spacing:.18em;
  color:#9cffbe;
}
.halo-hud-status i{
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:7px;
  border-radius:50%;
  background:#8cffad;
  box-shadow:0 0 12px #8cffad;
  animation:haloModePulse 1.7s ease-in-out infinite;
}
.halo-exit{
  position:absolute;
  right:22px;
  bottom:22px;
  z-index:8;
  pointer-events:auto;
  min-width:104px;
  border:1px solid rgba(156,255,190,.34);
  background:rgba(7,27,21,.88);
  color:#caffd5;
  padding:10px 13px;
  font:inherit;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:0 0 22px rgba(80,255,162,.12),inset 0 0 18px rgba(92,255,170,.04);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.halo-exit:hover{
  transform:translateY(-2px);
  background:rgba(110,255,163,.14);
  border-color:rgba(156,255,190,.52);
  box-shadow:0 0 30px rgba(80,255,162,.18);
}
.halo-frame{
  position:absolute;
  width:92px;
  height:92px;
  border-color:rgba(137,255,183,.42);
  border-style:solid;
}
.hf-tl{top:18px;left:18px;border-width:2px 0 0 2px}
.hf-tr{top:18px;right:18px;border-width:2px 2px 0 0}
.hf-bl{bottom:18px;left:18px;border-width:0 0 2px 2px}
.hf-br{bottom:18px;right:18px;border-width:0 2px 2px 0}
.halo-side-readout{
  position:absolute;
  top:52%;
  display:grid;
  gap:3px;
  font-size:8px;
  letter-spacing:.13em;
  color:rgba(169,255,201,.55);
  writing-mode:vertical-rl;
  text-orientation:mixed;
}
.halo-side-readout b{color:rgba(199,255,215,.78)}
.halo-left-readout{left:16px;transform:translateY(-50%) rotate(180deg)}
.halo-right-readout{right:16px;transform:translateY(-50%)}
.halo-center-reticle{
  position:absolute;
  left:50%;
  top:50%;
  width:88px;
  height:88px;
  transform:translate(-50%,-50%);
  opacity:.11;
}
.halo-center-reticle:before,
.halo-center-reticle:after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  background:#a7ffc6;
  transform:translate(-50%,-50%);
}
.halo-center-reticle:before{width:34px;height:1px}
.halo-center-reticle:after{width:1px;height:34px}
.halo-center-reticle i{
  position:absolute;
  width:22px;
  height:22px;
  border-color:#a7ffc6;
  border-style:solid;
}
.halo-center-reticle i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
.halo-center-reticle i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.halo-center-reticle i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}
.halo-center-reticle i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.halo-hud-bottom{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  width:min(680px,calc(100% - 40px));
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:7px 16px;
  border-top:1px solid rgba(131,255,178,.25);
  color:rgba(178,255,205,.55);
  font-size:7px;
  letter-spacing:.15em;
}

/* Full-page Spartan palette */
body.halo-mode{
  --bg:#020806;
  --panel:rgba(81,118,83,.11);
  --panel2:rgba(51,83,61,.10);
  --line:rgba(147,255,185,.22);
  --text:#edf9e9;
  --muted:#9db2a0;
  --purple:#8dad55;
  --cyan:#66ffd0;
  --pink:#d4b85e;
  --danger:#ff6b64;
  --shadow:0 22px 65px rgba(0,0,0,.58);

  background:
    radial-gradient(circle at 20% 12%,rgba(123,166,70,.16),transparent 26%),
    radial-gradient(circle at 82% 18%,rgba(36,219,164,.10),transparent 28%),
    radial-gradient(circle at 54% 85%,rgba(205,178,80,.07),transparent 28%),
    linear-gradient(150deg,#010604 0%,#06110d 28%,#0b1710 50%,#10160c 72%,#030905 100%);
  background-size:180% 180%;
  animation:haloSiteBreath 42s ease-in-out infinite alternate;
}
body.halo-mode .bg-wash{
  background:
    radial-gradient(circle at 18% 22%,rgba(126,167,75,.18),transparent 23%),
    radial-gradient(circle at 78% 24%,rgba(62,255,189,.10),transparent 25%),
    radial-gradient(circle at 58% 76%,rgba(214,184,88,.08),transparent 26%);
  filter:blur(42px) saturate(.8);
  opacity:.8;
}
body.halo-mode .a1{background:#76993f;opacity:.18}
body.halo-mode .a2{background:#45e4a5;opacity:.14}
body.halo-mode .a3{background:#d4ad45;opacity:.10}
body.halo-mode .m1{background:rgba(99,133,58,.44)}
body.halo-mode .m2{background:rgba(57,221,165,.28)}
body.halo-mode .m3{background:rgba(190,159,60,.22)}
body.halo-mode .grain{opacity:.045}

body.halo-mode .glass{
  background:
    linear-gradient(135deg,rgba(96,136,93,.13),rgba(6,19,14,.62)),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(131,255,179,.018) 38px 39px);
  border-color:rgba(149,255,187,.22);
  box-shadow:
    inset 0 1px rgba(191,255,210,.10),
    inset 0 0 30px rgba(80,255,160,.025),
    0 22px 65px rgba(0,0,0,.52);
  backdrop-filter:blur(22px) saturate(92%);
  -webkit-backdrop-filter:blur(22px) saturate(92%);
}
body.halo-mode .topbar{
  border-radius:4px;
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
}
body.halo-mode .brand-orb{
  border-radius:3px;
  background:linear-gradient(145deg,#617b36,#8ab54c);
  color:#eaffd8;
  box-shadow:0 0 24px rgba(134,184,77,.25);
}
body.halo-mode .brand b{color:#b7d580}
body.halo-mode .topbar nav a{color:#a9b9aa;text-transform:uppercase;letter-spacing:.08em;font-size:11px}
body.halo-mode .topbar nav a:hover{color:#baffd0}
body.halo-mode .eyebrow{
  color:#7fffc1;
  text-shadow:0 0 14px rgba(86,255,177,.14);
}
body.halo-mode .hero h1 span{
  background:linear-gradient(90deg,#c4d98a,#77ffbe,#d9c879);
  -webkit-background-clip:text;
  color:transparent;
  animation:none;
}
body.halo-mode .primary{
  background:linear-gradient(135deg,#4e6730,#6e8e40);
  border:1px solid rgba(200,229,132,.20);
  box-shadow:0 10px 30px rgba(68,106,48,.22);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
body.halo-mode .ghost,
body.halo-mode .icon-btn,
body.halo-mode .theme-toggle{
  border-radius:4px;
  background:rgba(77,110,74,.10);
  border-color:rgba(144,255,184,.20);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
body.halo-mode .twitch{
  background:linear-gradient(135deg,#415a2c,#65853e);
  box-shadow:none;
}
body.halo-mode .hero-visual{
  border-radius:5px;
}
body.halo-mode .planet{
  background:
    radial-gradient(circle at 35% 25%,#d8e9aa,#758b45 28%,#111c13 72%);
  box-shadow:0 0 68px rgba(117,170,78,.38),0 0 34px rgba(86,255,180,.07);
}
body.halo-mode .planet span{
  color:#ecffda;
  text-shadow:0 0 14px rgba(116,255,187,.22);
}
body.halo-mode .pulse-orbit:before,
body.halo-mode .pulse-orbit:after{
  border-color:rgba(128,255,178,.18);
  border-radius:6px;
}
body.halo-mode .stream-card,
body.halo-mode .room-card,
body.halo-mode .giveaway-card,
body.halo-mode .post,
body.halo-mode .mod-panel,
body.halo-mode .mod-empty,
body.halo-mode .sponsor-copy,
body.halo-mode .form-card{
  border-radius:4px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
body.halo-mode .stream-card:hover{
  transform:translateY(-3px);
  border-color:rgba(102,255,191,.36);
  box-shadow:0 0 24px rgba(62,255,173,.05);
}
body.halo-mode .member-badge{
  border-radius:3px;
  color:#a6ffc9;
  background:rgba(4,17,12,.78);
  border-color:rgba(93,255,174,.26);
}
body.halo-mode .live-badge{
  border-radius:2px;
  background:#c65d52;
}
body.halo-mode .status-pill i,
body.halo-mode .live-dot{
  color:#8dffb9;
}
body.halo-mode .status-pill i{
  background:#78ffa9;
  box-shadow:0 0 14px #78ffa9;
}
body.halo-mode input,
body.halo-mode textarea{
  border-radius:3px;
  background:rgba(0,10,7,.34);
  border-color:rgba(128,255,178,.18);
  color:#e5f4df;
}
body.halo-mode input:focus,
body.halo-mode textarea:focus{
  border-color:rgba(103,255,184,.44);
  box-shadow:0 0 0 2px rgba(93,255,177,.06),0 0 22px rgba(72,255,167,.04);
}
body.halo-mode .tag{
  border-radius:2px;
  color:#a9ffc8;
  background:rgba(69,255,171,.06);
  border-color:rgba(75,255,175,.15);
}
body.halo-mode .channel-button,
body.halo-mode .mod-count,
body.halo-mode .copy-field{
  border-radius:3px;
}
body.halo-mode .channel-button.active{
  box-shadow:inset 3px 0 #91ba52;
  border-color:rgba(117,255,178,.20);
}
body.halo-mode .mod-panel-live.is-live{
  color:#aaffc6;
  border-color:rgba(115,255,177,.22);
  background:rgba(82,255,159,.05);
}
body.halo-mode .ambassador-avatar-ring{
  background:linear-gradient(145deg,rgba(111,143,63,.72),rgba(58,233,171,.34),rgba(196,169,65,.30));
  box-shadow:0 12px 38px rgba(0,0,0,.38),0 0 26px rgba(108,166,75,.12);
}
body.halo-mode .ambassador-float-name{
  background:rgba(3,14,10,.68);
  border-color:rgba(112,255,176,.14);
}
body.halo-mode .wheel-dialog{
  border-radius:5px;
  background:rgba(5,16,11,.93);
  border:1px solid rgba(120,255,180,.20);
}
body.halo-mode .wheel-hub{
  border-radius:4px;
  background:rgba(7,18,12,.95);
  border-color:rgba(181,225,130,.55);
}
body.halo-mode footer{
  color:#b9c8b8;
  border-color:rgba(128,255,180,.15);
}
body.halo-mode footer a{color:#83ffc1}

@keyframes haloModePulse{
  0%,100%{opacity:.6;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.2)}
}
@keyframes haloSiteBreath{
  0%{background-position:0% 42%}
  50%{background-position:100% 56%}
  100%{background-position:14% 78%}
}

@media(max-width:720px){
  .halo-hud-top{width:calc(100% - 18px);top:5px}
  .halo-hud-status{font-size:7px;letter-spacing:.11em}
  .halo-hud-mark{min-width:45px}
  .halo-side-readout{display:none}
  .halo-frame{width:48px;height:48px}
  .hf-tl,.hf-tr{top:8px}.hf-bl,.hf-br{bottom:8px}
  .hf-tl,.hf-bl{left:8px}.hf-tr,.hf-br{right:8px}
  .halo-hud-bottom{font-size:6px;bottom:7px;padding-inline:8px}
  body.halo-mode .topbar{top:56px}
}
@media(prefers-reduced-motion:reduce){
  body.halo-mode,
  .halo-hud-status i{animation:none!important}
}


/* ============================================================
   CRASH MODE
   Full-site tropical platformer transformation.
   Trigger: five quick taps on the LIVE orb.
   ============================================================ */
.crash-site-hud{
  position:fixed;
  inset:0;
  z-index:71;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .42s ease,visibility .42s ease;
  color:#fff2b0;
}
.crash-site-hud.active{opacity:1;visibility:visible}
.crash-site-hud:before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 7% 12%,rgba(255,222,75,.09),transparent 9%),
    radial-gradient(circle at 93% 82%,rgba(55,240,221,.07),transparent 11%),
    repeating-linear-gradient(135deg,transparent 0 36px,rgba(255,255,255,.009) 36px 37px);
  pointer-events:none;
}
.crash-hud-top{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  width:min(830px,calc(100% - 30px));
  min-height:48px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:6px 11px;
  border:2px solid rgba(255,206,62,.48);
  background:
    linear-gradient(180deg,rgba(92,39,19,.91),rgba(48,21,13,.88)),
    repeating-linear-gradient(90deg,rgba(255,213,105,.08) 0 2px,transparent 2px 24px);
  border-radius:11px;
  box-shadow:0 7px 0 rgba(52,20,8,.45),0 0 30px rgba(255,117,35,.16);
  pointer-events:auto;
}
.crash-hud-top:before,.crash-hud-top:after{
  content:'';
  position:absolute;
  width:7px;height:7px;border-radius:50%;
  top:6px;
  background:#d99b43;
  box-shadow:0 28px #d99b43;
}
.crash-hud-top:before{left:7px}.crash-hud-top:after{right:7px}
.crash-hud-fruit{
  position:relative;
  width:31px;
  height:31px;
  flex:0 0 31px;
  border-radius:45% 55% 52% 48%;
  transform:rotate(-8deg);
  background:linear-gradient(145deg,#ffec51 5%,#ff9c2f 44%,#ed4a27 78%);
  box-shadow:inset -5px -6px rgba(126,35,19,.24),0 0 14px rgba(255,178,48,.24);
}
.crash-hud-fruit:before{
  content:'';
  position:absolute;
  width:13px;height:8px;
  left:15px;top:-5px;
  border-radius:100% 0 100% 0;
  background:#5dd553;
  transform:rotate(-24deg);
}
.crash-hud-fruit i{
  position:absolute;
  width:4px;height:8px;
  left:13px;top:-5px;
  border-radius:4px;
  background:#5e3d21;
}
.crash-hud-status{
  flex:1;
  color:#ffe675;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-shadow:0 2px #54200b;
}
.crash-hud-crates{
  color:#ffc63f;
  letter-spacing:.08em;
  font-size:13px;
  text-shadow:0 2px rgba(64,22,8,.8);
}
.crash-exit{
  position:absolute;
  right:22px;
  bottom:22px;
  z-index:8;
  pointer-events:auto;
  min-width:116px;
  border:2px solid rgba(255,221,93,.52);
  border-radius:9px;
  background:linear-gradient(#ffae39,#e45e22);
  color:#fff8bd;
  padding:10px 13px;
  font:inherit;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:inset 0 1px rgba(255,255,255,.24),0 5px 0 rgba(98,30,11,.55),0 0 22px rgba(255,139,35,.13);
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.crash-exit:hover{
  filter:brightness(1.09);
  transform:translateY(-2px);
  box-shadow:inset 0 1px rgba(255,255,255,.24),0 6px 0 rgba(98,30,11,.50),0 0 30px rgba(255,139,35,.20);
}
.crash-hud-bottom{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  width:min(690px,calc(100% - 36px));
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:7px 13px;
  border:1px solid rgba(255,216,79,.22);
  border-radius:999px;
  color:rgba(255,237,158,.66);
  background:rgba(55,22,13,.42);
  backdrop-filter:blur(10px);
  font-size:7px;
  font-weight:800;
  letter-spacing:.13em;
}
.crash-corner-crate{
  position:absolute;
  bottom:22px;
  width:58px;height:58px;
  display:grid;
  place-items:center;
  color:#59270e;
  font-size:24px;
  font-weight:900;
  background:
    linear-gradient(45deg,transparent 44%,rgba(82,36,15,.38) 45% 55%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,rgba(82,36,15,.38) 45% 55%,transparent 56%),
    linear-gradient(#f4a83f,#c86324);
  border:5px solid #7b3819;
  box-shadow:inset 0 0 0 2px #ffc45e,0 7px 0 rgba(60,20,8,.36);
  transform:rotate(-5deg);
}
.cc-left{left:22px}.cc-right{right:22px;transform:rotate(6deg)}
.crash-leaf{
  position:absolute;
  width:55px;height:18px;
  border-radius:100% 0 100% 0;
  background:linear-gradient(90deg,#30b963,#8edf55);
  opacity:.42;
  filter:drop-shadow(0 3px rgba(13,75,44,.2));
}
.cl1{left:1%;top:19%;transform:rotate(-38deg)}
.cl2{right:2%;top:29%;transform:rotate(205deg)}
.cl3{left:2%;bottom:23%;transform:rotate(18deg)}
.cl4{right:1%;bottom:17%;transform:rotate(158deg)}

/* Full Crash palette */
body.crash-mode{
  --bg:#111425;
  --panel:rgba(68,36,58,.14);
  --panel2:rgba(51,31,54,.13);
  --line:rgba(255,216,84,.24);
  --text:#fff9df;
  --muted:#d3c5bf;
  --purple:#8e4be8;
  --cyan:#2be8dc;
  --pink:#f653b4;
  --danger:#ef3c35;
  --shadow:0 22px 65px rgba(61,18,17,.42);

  background:
    radial-gradient(circle at 13% 15%,rgba(255,157,44,.35),transparent 25%),
    radial-gradient(circle at 84% 17%,rgba(255,77,128,.23),transparent 27%),
    radial-gradient(circle at 73% 80%,rgba(36,226,204,.18),transparent 27%),
    radial-gradient(circle at 27% 78%,rgba(86,194,72,.16),transparent 30%),
    linear-gradient(145deg,#34152b 0%,#6d2430 22%,#d5582b 43%,#5b3273 67%,#173b57 100%);
  background-size:180% 180%;
  animation:crashSkyShift 54s ease-in-out infinite alternate;
}
body.crash-mode .bg-wash{
  background:
    radial-gradient(circle at 18% 22%,rgba(255,185,53,.30),transparent 23%),
    radial-gradient(circle at 78% 23%,rgba(255,72,153,.18),transparent 24%),
    radial-gradient(circle at 58% 77%,rgba(47,241,218,.17),transparent 26%),
    radial-gradient(circle at 38% 58%,rgba(118,72,219,.14),transparent 27%);
  opacity:.92;
  filter:blur(40px) saturate(1.22);
}
body.crash-mode .a1{background:#ff9b2f;opacity:.24}
body.crash-mode .a2{background:#22e1d7;opacity:.18}
body.crash-mode .a3{background:#ff4f9e;opacity:.18}
body.crash-mode .m1{background:rgba(133,67,221,.45)}
body.crash-mode .m2{background:rgba(41,229,204,.35)}
body.crash-mode .m3{background:rgba(255,148,42,.38)}
body.crash-mode .grain{opacity:.035}

body.crash-mode .glass{
  background:
    linear-gradient(135deg,rgba(86,36,63,.38),rgba(27,19,42,.59)),
    repeating-linear-gradient(135deg,transparent 0 31px,rgba(255,217,93,.014) 31px 32px);
  border-color:rgba(255,214,80,.23);
  box-shadow:inset 0 1px rgba(255,247,191,.14),0 20px 58px rgba(57,17,24,.40);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}
body.crash-mode .topbar{
  border-radius:14px;
  border-width:2px;
  box-shadow:inset 0 1px rgba(255,245,187,.12),0 8px 0 rgba(74,25,20,.16),0 20px 60px rgba(58,16,21,.33);
}
body.crash-mode .brand-orb{
  border-radius:10px;
  background:linear-gradient(145deg,#ffad35,#f1532a 53%,#7538c8);
  color:#fff6c6;
  transform:rotate(-4deg);
  box-shadow:0 0 28px rgba(255,126,38,.32);
}
body.crash-mode .brand b{color:#ffcf49}
body.crash-mode .topbar nav a{
  color:#e9d8c9;
  font-weight:800;
}
body.crash-mode .topbar nav a:hover{color:#ffe65b}
body.crash-mode .eyebrow{
  color:#42f3df;
  text-shadow:0 2px rgba(56,20,54,.5);
}
body.crash-mode .hero h1 span{
  background:linear-gradient(90deg,#ffca36,#ff6836,#ff4faf,#41eadd);
  background-size:180% auto;
  -webkit-background-clip:text;
  color:transparent;
  animation:crashTextFlow 10s linear infinite;
}
body.crash-mode .primary{
  border:2px solid rgba(255,224,99,.24);
  background:linear-gradient(135deg,#ff9e31,#ef592b 58%,#d54260);
  box-shadow:0 7px 0 rgba(102,34,18,.28),0 13px 28px rgba(223,78,29,.24);
}
body.crash-mode .primary:hover{
  transform:translateY(-3px) rotate(-1deg);
  box-shadow:0 9px 0 rgba(102,34,18,.25),0 16px 35px rgba(238,94,34,.30);
}
body.crash-mode .ghost,
body.crash-mode .icon-btn,
body.crash-mode .theme-toggle{
  background:rgba(83,39,66,.34);
  border-color:rgba(255,219,86,.20);
}
body.crash-mode .twitch{
  background:linear-gradient(135deg,#8c48dd,#e44c9b);
  box-shadow:0 7px 0 rgba(72,25,92,.22);
}
body.crash-mode .hero-visual{
  border-radius:24px;
  border-width:2px;
}
body.crash-mode .planet{
  background:
    radial-gradient(circle at 34% 26%,#fff17a,#ff9f2e 29%,#f14e2d 55%,#521d65 82%);
  box-shadow:0 0 72px rgba(255,116,35,.46),0 0 45px rgba(43,232,220,.10);
}
body.crash-mode .planet span{
  color:#fff8ba;
  text-shadow:0 3px #742617,0 0 18px rgba(255,228,79,.28);
  font-size:15px;
}
body.crash-mode .pulse-orbit:before,
body.crash-mode .pulse-orbit:after{
  border-color:rgba(255,219,92,.19);
}
body.crash-mode .floating-chip{
  background:rgba(76,31,55,.58);
  border-color:rgba(255,211,79,.18);
}
body.crash-mode .stream-card,
body.crash-mode .room-card,
body.crash-mode .giveaway-card,
body.crash-mode .post,
body.crash-mode .mod-panel,
body.crash-mode .mod-empty,
body.crash-mode .sponsor-copy,
body.crash-mode .form-card{
  border-width:2px;
  border-color:rgba(255,208,68,.19);
  box-shadow:0 7px 0 rgba(74,24,18,.12),0 18px 48px rgba(58,17,25,.20);
}
body.crash-mode .stream-card:hover{
  transform:translateY(-5px) rotate(-.45deg);
  border-color:rgba(255,220,72,.40);
}
body.crash-mode .member-badge{
  color:#fff19b;
  background:rgba(79,31,24,.78);
  border-color:rgba(255,219,74,.30);
}
body.crash-mode .live-badge{
  background:linear-gradient(135deg,#f43c36,#ff7036);
  box-shadow:0 4px 0 rgba(106,27,22,.28);
}
body.crash-mode .status-pill i{
  background:#55f59d;
  box-shadow:0 0 14px #55f59d;
}
body.crash-mode input,
body.crash-mode textarea{
  background:rgba(47,20,43,.36);
  border-width:2px;
  border-color:rgba(255,211,77,.16);
}
body.crash-mode input:focus,
body.crash-mode textarea:focus{
  border-color:rgba(44,237,218,.46);
  box-shadow:0 0 0 3px rgba(44,237,218,.08);
}
body.crash-mode .tag{
  color:#5ff5df;
  background:rgba(40,229,207,.08);
  border-color:rgba(40,229,207,.18);
}
body.crash-mode .channel-button.active{
  box-shadow:inset 4px 0 #ff9b2d;
  border-color:rgba(255,213,71,.22);
}
body.crash-mode .mod-panel-live.is-live{
  color:#fff09a;
  border-color:rgba(255,203,55,.28);
  background:rgba(255,121,39,.09);
}
body.crash-mode .ambassador-avatar-ring{
  background:linear-gradient(145deg,rgba(255,154,40,.76),rgba(255,67,155,.50),rgba(44,232,215,.46));
  box-shadow:0 12px 38px rgba(0,0,0,.34),0 0 30px rgba(255,123,34,.18);
}
body.crash-mode .ambassador-float-name{
  background:rgba(64,24,47,.66);
  border-color:rgba(255,210,75,.15);
}
body.crash-mode .wheel-dialog{
  background:rgba(54,22,46,.94);
  border:2px solid rgba(255,211,71,.24);
}
body.crash-mode .wheel-hub{
  background:rgba(83,31,45,.96);
  border-color:#ffca48;
}
body.crash-mode footer{
  color:#ead1bf;
  border-color:rgba(255,210,74,.17);
}
body.crash-mode footer a{color:#47eedc}

/* The opening WOAH burst now uses CSS-drawn Wumpa-ish fruit. */
.wumpa-ish-fruit{
  width:27px;height:27px;
  border-radius:44% 56% 52% 48%;
  background:linear-gradient(145deg,#ffe84d 5%,#ff992e 46%,#e8492c 80%);
  box-shadow:inset -4px -5px rgba(105,28,19,.19),0 0 12px rgba(255,156,42,.20);
}
.wumpa-ish-fruit:before{
  content:'';
  position:absolute;
  width:11px;height:7px;
  left:14px;top:-5px;
  border-radius:100% 0 100% 0;
  background:#62d651;
  transform:rotate(-25deg);
}
.wumpa-ish-fruit i{
  position:absolute;
  width:3px;height:7px;
  left:12px;top:-5px;
  border-radius:4px;
  background:#5a361e;
}

body.crash-site-pop .topbar,
body.crash-site-pop .hero-visual{
  animation:crashSitePop .72s cubic-bezier(.17,.84,.22,1.15);
}

@keyframes crashSkyShift{
  0%{background-position:0% 48%}
  46%{background-position:100% 35%}
  100%{background-position:18% 82%}
}
@keyframes crashTextFlow{to{background-position:180% center}}
@keyframes crashSitePop{
  0%{transform:scale(.96) rotate(-.3deg)}
  55%{transform:scale(1.012) rotate(.15deg)}
  100%{transform:scale(1) rotate(0)}
}

@media(max-width:720px){
  .crash-hud-top{top:5px;width:calc(100% - 16px)}
  .crash-hud-status{font-size:7px;letter-spacing:.09em}
  .crash-hud-crates{display:none}
  .crash-corner-crate{display:none}
  .crash-hud-bottom{font-size:6px;bottom:6px}
  body.crash-mode .topbar{top:60px}
}
@media(prefers-reduced-motion:reduce){
  body.crash-mode,
  body.crash-site-pop .topbar,
  body.crash-site-pop .hero-visual{animation:none!important}
}

/* Keep Easter egg exits clear of notifications */
body.halo-mode .toasts,
body.crash-mode .toasts{bottom:78px}

@media(max-width:650px){
  .halo-exit,.crash-exit{
    right:12px;
    bottom:12px;
    min-width:auto;
    padding:10px 12px;
  }
  body.halo-mode .toasts,
  body.crash-mode .toasts{bottom:72px}
}


/* ============================================================
   SPYRO MODE
   Secret: type SPYRO
   ============================================================ */
.spyro-site-hud{
  position:fixed;inset:0;z-index:72;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s ease;
}
.spyro-site-hud.active{opacity:1;visibility:visible}
.spyro-site-hud:before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 14% 18%,rgba(255,210,64,.06),transparent 12%),
    radial-gradient(circle at 83% 30%,rgba(190,94,255,.07),transparent 14%),
    repeating-linear-gradient(45deg,transparent 0 48px,rgba(255,255,255,.008) 48px 49px);
}
.spyro-hud-top{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:min(690px,calc(100% - 30px));min-height:46px;
  display:flex;align-items:center;justify-content:center;gap:15px;
  padding:7px 14px;border:1px solid rgba(255,215,86,.35);border-radius:999px;
  background:linear-gradient(90deg,rgba(54,20,85,.82),rgba(91,36,127,.78),rgba(54,20,85,.82));
  box-shadow:0 0 32px rgba(178,83,255,.13),inset 0 1px rgba(255,232,144,.13);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.spyro-hud-status{color:#f7db7d;font-size:9px;font-weight:800;letter-spacing:.18em;text-shadow:0 0 13px rgba(255,212,82,.18)}
.spyro-gem{
  position:relative;width:18px;height:24px;display:block;
  clip-path:polygon(50% 0,90% 30%,78% 82%,50% 100%,22% 82%,10% 30%);
  transform:rotate(8deg);
}
.sg-purple{background:linear-gradient(145deg,#f0b4ff,#984cff 50%,#4a1685)}
.sg-gold{background:linear-gradient(145deg,#fff2a5,#ffcb38 50%,#c46a17)}
.spyro-exit{
  position:absolute;right:22px;bottom:22px;z-index:9;pointer-events:auto;
  min-width:116px;padding:10px 13px;border-radius:12px;
  border:1px solid rgba(255,220,99,.43);
  background:linear-gradient(135deg,rgba(105,44,161,.94),rgba(62,26,111,.94));
  color:#ffeca4;font:inherit;font-size:9px;font-weight:800;letter-spacing:.09em;cursor:pointer;
  box-shadow:0 0 28px rgba(169,72,255,.18),inset 0 1px rgba(255,236,151,.14);
  transition:.18s ease;
}
.spyro-exit:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 0 38px rgba(185,89,255,.26)}
.spyro-site-character{
  position:absolute;left:-12px;bottom:36px;width:230px;opacity:.72;
  filter:drop-shadow(0 15px 24px rgba(34,9,55,.42)) drop-shadow(0 0 28px rgba(178,75,255,.24));
  animation:spyroSiteHover 5s ease-in-out infinite;
}
.spyro-site-character img{display:block;width:100%;height:auto}
.spyro-site-spark{position:absolute;color:#ffd95a;text-shadow:0 0 13px #ffc941;font-size:20px;animation:spyroSiteSpark 2.6s ease-in-out infinite}
.ss1{left:12%;top:18%}.ss2{right:13%;top:29%;animation-delay:-.8s}.ss3{left:8%;bottom:32%;animation-delay:-1.5s}.ss4{right:10%;bottom:22%;animation-delay:-2.1s}
.spyro-gem-cluster{position:absolute;right:24px;top:20%;display:flex;gap:10px;transform:rotate(8deg);opacity:.5}
.spyro-gem-cluster .gem{display:block;width:22px;height:31px;clip-path:polygon(50% 0,92% 28%,79% 80%,50% 100%,21% 80%,8% 28%);box-shadow:0 0 18px rgba(255,255,255,.2)}
.g1{background:linear-gradient(145deg,#afffff,#23d7ea,#16779c)}.g2{background:linear-gradient(145deg,#ffd5ff,#d965ff,#7e25ba);translate:0 20px}.g3{background:linear-gradient(145deg,#fff09f,#ffc53d,#cb691b);translate:0 -5px}
.spyro-hud-bottom{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  width:min(620px,calc(100% - 36px));display:flex;justify-content:space-between;gap:15px;
  padding:7px 13px;border:1px solid rgba(236,191,84,.20);border-radius:999px;
  color:rgba(255,230,147,.62);background:rgba(54,20,77,.38);backdrop-filter:blur(10px);
  font-size:7px;font-weight:800;letter-spacing:.13em;
}

body.spyro-mode{
  --bg:#12091f;--panel:rgba(101,50,145,.14);--panel2:rgba(65,31,100,.13);
  --line:rgba(242,203,92,.20);--text:#fff9e8;--muted:#cfc1d9;
  --purple:#ad57ff;--cyan:#45e7ef;--pink:#f46bc7;--danger:#ff5e7e;
  --shadow:0 24px 68px rgba(42,10,70,.42);
  background:
    radial-gradient(circle at 16% 13%,rgba(255,198,70,.20),transparent 24%),
    radial-gradient(circle at 82% 18%,rgba(189,86,255,.28),transparent 27%),
    radial-gradient(circle at 66% 84%,rgba(57,221,218,.15),transparent 25%),
    radial-gradient(circle at 30% 74%,rgba(111,74,211,.23),transparent 30%),
    linear-gradient(145deg,#241038 0%,#4f2076 28%,#7e357e 49%,#3b286e 72%,#14253e 100%);
  background-size:185% 185%;
  animation:spyroRealmShift 58s ease-in-out infinite alternate;
}
body.spyro-mode .bg-wash{
  background:
    radial-gradient(circle at 20% 21%,rgba(255,205,76,.18),transparent 22%),
    radial-gradient(circle at 77% 25%,rgba(201,90,255,.25),transparent 26%),
    radial-gradient(circle at 58% 78%,rgba(63,225,225,.15),transparent 25%);
  opacity:.94;filter:blur(42px) saturate(1.18);
}
body.spyro-mode .a1{background:#a14dff;opacity:.24}
body.spyro-mode .a2{background:#42e4ef;opacity:.16}
body.spyro-mode .a3{background:#f2bd55;opacity:.16}
body.spyro-mode .m1{background:rgba(148,70,220,.46)}
body.spyro-mode .m2{background:rgba(55,224,221,.34)}
body.spyro-mode .m3{background:rgba(255,190,72,.30)}
body.spyro-mode .glass{
  background:linear-gradient(135deg,rgba(104,49,145,.31),rgba(30,19,62,.53));
  border-color:rgba(244,207,104,.20);
  box-shadow:inset 0 1px rgba(255,237,168,.12),0 22px 62px rgba(39,12,66,.38);
  backdrop-filter:blur(24px) saturate(148%);-webkit-backdrop-filter:blur(24px) saturate(148%);
}
body.spyro-mode .topbar{border-color:rgba(247,205,83,.28);box-shadow:0 0 36px rgba(166,72,255,.10),0 20px 55px rgba(38,10,59,.28)}
body.spyro-mode .brand-orb{
  background:linear-gradient(145deg,#c061ff,#6f3ac5 55%,#f1ba41);
  color:#fff4a6;box-shadow:0 0 32px rgba(185,76,255,.36);
}
body.spyro-mode .brand b{color:#ffd75a}
body.spyro-mode .eyebrow{color:#ffe079;text-shadow:0 0 14px rgba(255,209,69,.16)}
body.spyro-mode .hero h1 span{
  background:linear-gradient(90deg,#ffd95f,#db75ff,#6ee5ef,#ffd95f);
  background-size:200% auto;-webkit-background-clip:text;color:transparent;
  animation:spyroTextFlow 12s linear infinite;
}
body.spyro-mode .primary{
  background:linear-gradient(135deg,#8f43d8,#bd59ef 52%,#e7a83f);
  box-shadow:0 10px 30px rgba(150,57,217,.30);
}
body.spyro-mode .primary:hover{box-shadow:0 14px 40px rgba(173,72,234,.38)}
body.spyro-mode .ghost,body.spyro-mode .icon-btn,body.spyro-mode .theme-toggle{background:rgba(89,41,130,.27);border-color:rgba(244,207,104,.18)}
body.spyro-mode .planet{
  background:radial-gradient(circle at 34% 26%,#fff1a4,#ba57f2 28%,#6630ab 56%,#20123d 82%);
  box-shadow:0 0 82px rgba(179,75,255,.50),0 0 38px rgba(255,205,71,.12);
}
body.spyro-mode .planet span{color:#fff0a1;text-shadow:0 0 18px rgba(255,211,73,.24)}
body.spyro-mode .stream-card:hover{border-color:rgba(255,211,79,.34);transform:translateY(-5px) rotate(-.25deg)}
body.spyro-mode .live-badge{background:linear-gradient(135deg,#e24e86,#b24cda)}
body.spyro-mode .member-badge{color:#ffe98c;background:rgba(58,24,82,.76);border-color:rgba(255,215,91,.23)}
body.spyro-mode input,body.spyro-mode textarea{background:rgba(47,23,72,.34);border-color:rgba(248,214,108,.16)}
body.spyro-mode input:focus,body.spyro-mode textarea:focus{border-color:rgba(84,229,236,.42);box-shadow:0 0 0 3px rgba(84,229,236,.07)}
body.spyro-mode .tag{color:#89f2f2;background:rgba(67,222,227,.08);border-color:rgba(67,222,227,.17)}
body.spyro-mode .channel-button.active{box-shadow:inset 3px 0 #e4a93e;border-color:rgba(255,216,91,.18)}
body.spyro-mode .ambassador-avatar-ring{background:linear-gradient(145deg,rgba(188,83,255,.75),rgba(65,230,235,.46),rgba(244,192,65,.43))}
body.spyro-mode footer a{color:#ffe279}

/* ============================================================
   SLY COOPER MODE
   Secret: type SLY
   ============================================================ */
.sly-site-hud{
  position:fixed;inset:0;z-index:72;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s ease;color:#a9e5ff;
}
.sly-site-hud.active{opacity:1;visibility:visible}
.sly-site-hud:before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(76,180,255,.018) 50%,transparent 50.2%),
    repeating-linear-gradient(180deg,transparent 0 5px,rgba(101,197,255,.008) 5px 6px);
}
.sly-hud-top{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:min(710px,calc(100% - 30px));min-height:45px;display:flex;align-items:center;gap:12px;
  padding:6px 12px;border:1px solid rgba(83,184,255,.30);border-radius:9px;
  background:linear-gradient(90deg,rgba(5,17,42,.90),rgba(12,37,69,.84),rgba(5,17,42,.90));
  box-shadow:0 0 32px rgba(46,139,255,.12),inset 0 1px rgba(130,210,255,.09);
  backdrop-filter:blur(14px);
}
.sly-cane-mark{font-size:24px;color:#71c4ff;transform:rotate(-26deg);text-shadow:0 0 18px rgba(87,176,255,.35)}
.sly-hud-status{flex:1;font-size:9px;font-weight:800;letter-spacing:.17em;color:#9bdbff}
.sly-hud-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#54eaff;box-shadow:0 0 12px #54eaff;margin-right:6px}
.sly-hud-clock{font-size:10px;letter-spacing:.15em;color:#669dc8}
.sly-exit{
  position:absolute;right:22px;bottom:22px;z-index:9;pointer-events:auto;
  min-width:106px;padding:10px 13px;border:1px solid rgba(83,186,255,.40);border-radius:8px;
  background:rgba(5,20,44,.91);color:#9bdcff;font:inherit;font-size:9px;font-weight:800;letter-spacing:.1em;cursor:pointer;
  box-shadow:0 0 26px rgba(54,153,255,.14),inset 0 0 18px rgba(75,181,255,.04);transition:.18s ease;
}
.sly-exit:hover{transform:translateY(-2px);border-color:rgba(118,205,255,.58);box-shadow:0 0 34px rgba(54,153,255,.22)}
.sly-site-moon{
  position:absolute;right:-55px;top:11%;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle at 38% 35%,rgba(208,238,255,.94),rgba(94,162,220,.70) 38%,rgba(26,64,112,.38) 64%,transparent 72%);
  opacity:.30;filter:drop-shadow(0 0 44px rgba(81,164,255,.25));
}
.sly-site-character{
  position:absolute;left:-2px;bottom:34px;width:230px;opacity:.75;
  filter:drop-shadow(0 16px 25px rgba(0,0,0,.45)) drop-shadow(0 0 27px rgba(74,165,255,.25));
  animation:slySiteSneak 5.5s ease-in-out infinite;
}
.sly-site-character img{width:100%;height:auto;display:block}
.sly-searchlight{position:absolute;top:-18%;width:13vw;height:140vh;transform-origin:top center;opacity:.075;background:linear-gradient(180deg,rgba(130,215,255,.72),rgba(73,162,255,.08) 55%,transparent);filter:blur(6px);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);animation:slySearch 10s ease-in-out infinite alternate}
.sl1{left:18%;transform:rotate(14deg)}.sl2{right:16%;transform:rotate(-18deg);animation-delay:-5s}
.sly-rooftops{position:absolute;left:0;right:0;bottom:0;height:115px;opacity:.28;overflow:hidden}
.roof{position:absolute;bottom:-25px;background:#030b19;border-top:2px solid rgba(76,165,225,.14)}
.r1{left:0;width:29%;height:78px;clip-path:polygon(0 38%,35% 38%,48% 0,62% 38%,100% 38%,100% 100%,0 100%)}
.r2{left:25%;width:31%;height:104px;clip-path:polygon(0 47%,28% 47%,39% 19%,47% 19%,54% 0,61% 19%,72% 47%,100% 47%,100% 100%,0 100%)}
.r3{left:52%;width:27%;height:72px;clip-path:polygon(0 35%,31% 35%,43% 10%,57% 10%,69% 35%,100% 35%,100% 100%,0 100%)}
.r4{right:-3%;width:29%;height:95px;clip-path:polygon(0 46%,24% 46%,39% 0,62% 46%,100% 46%,100% 100%,0 100%)}
.sly-hud-bottom{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  width:min(620px,calc(100% - 36px));display:flex;justify-content:space-between;gap:15px;
  padding:7px 13px;border:1px solid rgba(72,165,232,.18);border-radius:999px;color:rgba(139,208,255,.58);
  background:rgba(4,16,38,.42);backdrop-filter:blur(10px);font-size:7px;font-weight:800;letter-spacing:.13em;
}

body.sly-mode{
  --bg:#030812;--panel:rgba(19,53,91,.14);--panel2:rgba(12,38,70,.13);
  --line:rgba(83,178,242,.19);--text:#edf8ff;--muted:#9db1c4;
  --purple:#5276de;--cyan:#4bd8ff;--pink:#9b67e8;--danger:#ff5e71;
  --shadow:0 24px 68px rgba(0,5,20,.58);
  background:
    radial-gradient(circle at 84% 12%,rgba(119,188,242,.18),transparent 24%),
    radial-gradient(circle at 13% 62%,rgba(62,129,226,.17),transparent 28%),
    radial-gradient(circle at 72% 80%,rgba(87,73,181,.13),transparent 27%),
    linear-gradient(150deg,#020610 0%,#071326 25%,#0b2840 48%,#101a36 72%,#020712 100%);
  background-size:185% 185%;animation:slyNightShift 64s ease-in-out infinite alternate;
}
body.sly-mode .bg-wash{
  background:
    radial-gradient(circle at 82% 18%,rgba(126,201,255,.19),transparent 24%),
    radial-gradient(circle at 18% 55%,rgba(54,134,239,.16),transparent 27%),
    radial-gradient(circle at 61% 78%,rgba(92,77,199,.11),transparent 25%);
  opacity:.90;filter:blur(44px) saturate(1.04);
}
body.sly-mode .a1{background:#336bd6;opacity:.17}
body.sly-mode .a2{background:#3dc7ef;opacity:.15}
body.sly-mode .a3{background:#6349bd;opacity:.11}
body.sly-mode .m1{background:rgba(54,102,195,.36)}
body.sly-mode .m2{background:rgba(51,181,228,.27)}
body.sly-mode .m3{background:rgba(91,70,170,.26)}
body.sly-mode .glass{
  background:linear-gradient(135deg,rgba(23,59,95,.30),rgba(4,17,38,.60));
  border-color:rgba(81,172,233,.18);
  box-shadow:inset 0 1px rgba(145,211,255,.08),0 24px 65px rgba(0,5,20,.53);
  backdrop-filter:blur(25px) saturate(120%);-webkit-backdrop-filter:blur(25px) saturate(120%);
}
body.sly-mode .topbar{border-color:rgba(82,179,241,.24);box-shadow:0 0 32px rgba(56,153,255,.07),0 22px 60px rgba(0,5,18,.42)}
body.sly-mode .brand-orb{
  background:linear-gradient(145deg,#3b77d0,#4bd6ff 60%,#1e437d);color:#e9f8ff;
  box-shadow:0 0 30px rgba(70,172,255,.25);
}
body.sly-mode .brand b{color:#65c7ff}
body.sly-mode .eyebrow{color:#63d5ff;text-shadow:0 0 14px rgba(74,193,255,.16)}
body.sly-mode .hero h1 span{
  background:linear-gradient(90deg,#82dfff,#467bd3,#7e73db,#82dfff);
  background-size:190% auto;-webkit-background-clip:text;color:transparent;animation:slyTextFlow 13s linear infinite;
}
body.sly-mode .primary{
  background:linear-gradient(135deg,#27599e,#347fc4 55%,#4ccce9);
  box-shadow:0 10px 30px rgba(26,101,179,.25);
}
body.sly-mode .primary:hover{box-shadow:0 14px 40px rgba(43,135,211,.31)}
body.sly-mode .ghost,body.sly-mode .icon-btn,body.sly-mode .theme-toggle{background:rgba(18,51,87,.30);border-color:rgba(82,179,241,.17)}
body.sly-mode .planet{
  background:radial-gradient(circle at 35% 25%,#dff7ff,#489bd2 28%,#1d477b 55%,#08142d 82%);
  box-shadow:0 0 75px rgba(63,155,226,.38),0 0 42px rgba(75,215,255,.08);
}
body.sly-mode .stream-card:hover{border-color:rgba(84,190,255,.32);transform:translateY(-5px)}
body.sly-mode .live-badge{background:linear-gradient(135deg,#315fb1,#459fd3)}
body.sly-mode .member-badge{color:#8edfff;background:rgba(4,18,41,.76);border-color:rgba(85,189,255,.20)}
body.sly-mode input,body.sly-mode textarea{background:rgba(3,15,34,.42);border-color:rgba(81,176,238,.15)}
body.sly-mode input:focus,body.sly-mode textarea:focus{border-color:rgba(78,205,255,.42);box-shadow:0 0 0 3px rgba(78,205,255,.06)}
body.sly-mode .tag{color:#91defe;background:rgba(69,190,240,.07);border-color:rgba(69,190,240,.16)}
body.sly-mode .channel-button.active{box-shadow:inset 3px 0 #55c8ff;border-color:rgba(84,184,245,.18)}
body.sly-mode .ambassador-avatar-ring{background:linear-gradient(145deg,rgba(66,130,222,.70),rgba(72,208,241,.43),rgba(82,72,170,.40))}
body.sly-mode footer a{color:#66d2ff}

body.spyro-mode .toasts,body.sly-mode .toasts{bottom:78px}
body.spyro-site-pop .topbar,body.spyro-site-pop .hero-visual{animation:spyroModePop .75s cubic-bezier(.17,.84,.22,1.15)}
body.sly-site-pop .topbar,body.sly-site-pop .hero-visual{animation:slyModePop .72s cubic-bezier(.17,.84,.22,1.15)}

@keyframes spyroRealmShift{0%{background-position:0% 44%}48%{background-position:100% 30%}100%{background-position:18% 82%}}
@keyframes spyroTextFlow{to{background-position:200% center}}
@keyframes spyroSiteHover{50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes spyroSiteSpark{50%{transform:scale(1.7) rotate(45deg);opacity:.45}}
@keyframes spyroModePop{0%{transform:scale(.97)}55%{transform:scale(1.01)}100%{transform:scale(1)}}
@keyframes slyNightShift{0%{background-position:0% 50%}45%{background-position:100% 38%}100%{background-position:16% 78%}}
@keyframes slyTextFlow{to{background-position:190% center}}
@keyframes slySiteSneak{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px) translateX(4px)}}
@keyframes slySearch{0%{rotate:-8deg}100%{rotate:12deg}}
@keyframes slyModePop{0%{filter:brightness(.75);transform:scale(.985)}55%{filter:brightness(1.12);transform:scale(1.006)}100%{filter:none;transform:scale(1)}}

@media(max-width:720px){
  .spyro-hud-top,.sly-hud-top{top:5px;width:calc(100% - 16px)}
  .spyro-site-character{width:150px;left:-16px;bottom:42px}
  .sly-site-character{width:160px;left:-8px;bottom:40px}
  .spyro-gem-cluster{display:none}
  .sly-site-moon{width:190px;height:190px;right:-45px}
  .spyro-exit,.sly-exit{right:12px;bottom:12px;min-width:auto;padding:10px 12px}
  .spyro-hud-bottom,.sly-hud-bottom{font-size:6px;bottom:6px}
  body.spyro-mode .toasts,body.sly-mode .toasts{bottom:72px}
  body.spyro-mode .topbar,body.sly-mode .topbar{top:60px}
}
@media(prefers-reduced-motion:reduce){
  body.spyro-mode,body.sly-mode,
  .spyro-site-character,.spyro-site-spark,.sly-site-character,.sly-searchlight,
  body.spyro-site-pop .topbar,body.spyro-site-pop .hero-visual,
  body.sly-site-pop .topbar,body.sly-site-pop .hero-visual{animation:none!important}
}


/* ============================================================
   STANTON MODE
   Star Citizen-inspired aerospace / quantum HUD transformation
   Secret: type STANTON
   ============================================================ */
.sc-site-hud{
  position:fixed;inset:0;z-index:73;pointer-events:none;
  opacity:0;visibility:hidden;color:#aef5ff;
  transition:opacity .42s ease,visibility .42s ease;
}
.sc-site-hud.active{opacity:1;visibility:visible}
.sc-site-hud:before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 42%,rgba(69,212,255,.016) 42.2% 42.5%,transparent 42.7%),
    linear-gradient(90deg,transparent 49.85%,rgba(72,210,255,.025) 50%,transparent 50.15%),
    linear-gradient(0deg,transparent 49.85%,rgba(72,210,255,.018) 50%,transparent 50.15%),
    repeating-linear-gradient(180deg,transparent 0 4px,rgba(91,212,255,.006) 4px 5px);
}
.sc-hud-top{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:min(820px,calc(100% - 30px));min-height:51px;
  display:grid;grid-template-columns:88px 1fr 100px;align-items:center;gap:10px;
  padding:7px 10px;
  border:1px solid rgba(88,219,255,.32);
  background:linear-gradient(90deg,rgba(3,17,28,.92),rgba(7,36,50,.80),rgba(3,17,28,.92));
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  box-shadow:0 0 34px rgba(46,203,255,.09),inset 0 0 24px rgba(74,221,255,.025);
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
}
.sc-brand-mark{display:flex;align-items:baseline;gap:5px;border-right:1px solid rgba(92,221,255,.20);padding-right:10px}
.sc-brand-mark span{font-size:20px;font-weight:800;letter-spacing:.08em;color:#d8fbff}
.sc-brand-mark small{font-size:7px;color:#eab65e;letter-spacing:.12em}
.sc-hud-center{text-align:center}.sc-hud-center b,.sc-hud-center span{display:block}
.sc-hud-center b{font-size:10px;letter-spacing:.20em;color:#b9f5ff}
.sc-hud-center span{font-size:7px;letter-spacing:.14em;color:#5ebbd1;margin-top:3px}
.sc-hud-readout{text-align:right}.sc-hud-readout span,.sc-hud-readout b{display:block}
.sc-hud-readout span{font-size:6px;letter-spacing:.15em;color:#5795a4}.sc-hud-readout b{font-size:9px;color:#e7bf70;margin-top:2px}
.sc-exit{
  position:absolute;right:22px;bottom:22px;z-index:10;pointer-events:auto;
  min-width:120px;padding:10px 13px;
  border:1px solid rgba(80,220,255,.43);
  background:linear-gradient(180deg,rgba(8,39,52,.95),rgba(3,20,31,.95));
  color:#bdf6ff;font:inherit;font-size:8px;font-weight:800;letter-spacing:.12em;cursor:pointer;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  box-shadow:0 0 28px rgba(44,208,255,.12),inset 0 0 17px rgba(69,218,255,.035);
  transition:.18s ease;
}
.sc-exit:hover{transform:translateY(-2px);border-color:rgba(111,235,255,.66);box-shadow:0 0 38px rgba(44,208,255,.20)}
.sc-reticle{
  position:absolute;left:50%;top:50%;width:270px;height:270px;transform:translate(-50%,-50%);
  opacity:.22;
}
.scr{position:absolute;width:58px;height:58px;border-color:#6fdff8;border-style:solid}
.scr.a{left:0;top:0;border-width:1px 0 0 1px}.scr.b{right:0;top:0;border-width:1px 1px 0 0}
.scr.c{left:0;bottom:0;border-width:0 0 1px 1px}.scr.d{right:0;bottom:0;border-width:0 1px 1px 0}
.sc-reticle i{position:absolute;left:50%;top:50%;width:7px;height:7px;border:1px solid #86ebff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 15px rgba(87,220,255,.35)}
.sc-radar{
  position:absolute;left:24px;bottom:78px;width:155px;height:155px;border-radius:50%;
  border:1px solid rgba(82,211,243,.25);opacity:.54;
  background:radial-gradient(circle at center,rgba(54,210,231,.035),transparent 60%);
}
.sc-radar-ring{position:absolute;border:1px solid rgba(74,201,233,.16);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.sc-radar-ring.r1{width:68%;height:68%}.sc-radar-ring.r2{width:38%;height:38%}.sc-radar-ring.r3{width:8%;height:8%}
.sc-radar:before,.sc-radar:after{content:'';position:absolute;background:rgba(77,205,237,.16)}
.sc-radar:before{width:1px;height:100%;left:50%}.sc-radar:after{height:1px;width:100%;top:50%}
.sc-radar-sweep{position:absolute;left:50%;top:50%;width:49%;height:1px;transform-origin:left center;background:linear-gradient(90deg,#67dcf3,transparent);box-shadow:0 0 9px rgba(70,215,241,.4);animation:scRadarSweep 5.5s linear infinite}
.sc-contact{position:absolute;width:5px;height:5px;border-radius:50%;background:#dfb45e;box-shadow:0 0 8px rgba(237,186,82,.5)}
.sc-contact.c1{left:28%;top:36%}.sc-contact.c2{right:24%;top:58%}.sc-contact.c3{left:48%;bottom:18%}
.sc-route{position:absolute;right:25px;top:22%;width:215px;height:205px;opacity:.52}
.sc-navpoint{position:absolute;color:#8deaff;font-size:7px;letter-spacing:.12em;white-space:nowrap}
.sc-navpoint i{display:inline-block;width:7px;height:7px;border:1px solid #73dbef;transform:rotate(45deg);margin-right:6px;box-shadow:0 0 10px rgba(77,214,240,.25)}
.np1{left:0;top:8%}.np2{right:0;top:45%}.np3{left:28%;bottom:2%}
.sc-navline{position:absolute;height:1px;background:linear-gradient(90deg,rgba(78,214,240,.05),rgba(78,214,240,.46),rgba(78,214,240,.05));transform-origin:left center}
.nl1{width:145px;left:42px;top:27%;rotate:18deg}.nl2{width:130px;right:30px;top:60%;rotate:122deg}
.sc-side-readout{position:absolute;top:40%;display:grid;grid-template-columns:auto auto auto;gap:2px 8px;align-items:end;opacity:.42}
.sc-left-readout{left:24px}.sc-right-readout{right:24px}
.sc-side-readout span{grid-column:1/-1;color:#62b5c8;font-size:6px;letter-spacing:.14em;margin-top:7px}
.sc-side-readout b{font-size:13px;color:#b8f3ff;letter-spacing:.05em}.sc-side-readout small{font-size:6px;color:#5a99a7;padding-bottom:2px}
.sc-right-readout b{color:#e3ba67}
.sc-hud-bottom{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  width:min(720px,calc(100% - 36px));display:flex;justify-content:space-between;gap:15px;
  padding:7px 13px;border:1px solid rgba(75,206,237,.18);
  color:rgba(120,211,231,.62);background:rgba(3,18,28,.48);
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,9px 100%,0 50%);
  backdrop-filter:blur(10px);font-size:7px;font-weight:700;letter-spacing:.11em;
}
.sc-quantum{color:#e0b967}.sc-quantum i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#efc66a;box-shadow:0 0 9px rgba(239,198,106,.55);margin-right:5px;animation:scQuantumBlink 1.8s ease-in-out infinite}

/* Intro sequence */
.egg-star-citizen{display:grid;place-items:center;background:radial-gradient(circle,rgba(37,197,235,.04),transparent 36%)}
.sc-boot-sequence{position:relative;width:min(460px,78vw);aspect-ratio:1;display:grid;place-items:center}
.sc-boot-ring{position:absolute;border:1px solid rgba(90,228,255,.28);border-radius:50%}
.br1{inset:8%;animation:scBootSpin 5s linear infinite}.br2{inset:20%;border-style:dashed;animation:scBootSpin 3.4s linear reverse infinite}.br3{inset:34%;border-color:rgba(230,187,95,.34)}
.sc-boot-core{text-align:center}.sc-boot-core b,.sc-boot-core small{display:block}
.sc-boot-core b{font-size:clamp(34px,7vw,64px);letter-spacing:.21em;color:#baf4ff;text-shadow:0 0 26px rgba(65,214,246,.25)}
.sc-boot-core small{font-size:8px;letter-spacing:.18em;color:#d8b267;margin-top:8px}
.sc-boot-line{position:absolute;width:44%;height:1px;background:linear-gradient(90deg,transparent,#62d8ee,transparent);top:50%}
.bl1{left:-7%}.bl2{right:-7%}

body.star-citizen-mode{
  --bg:#02080c;--panel:rgba(10,48,61,.13);--panel2:rgba(5,35,47,.13);
  --line:rgba(77,205,236,.18);--text:#eafcff;--muted:#87aeb9;
  --purple:#416f9a;--cyan:#5de3ff;--pink:#ca9860;--danger:#ff6b5f;
  --shadow:0 24px 68px rgba(0,7,12,.62);
  background:
    radial-gradient(circle at 18% 13%,rgba(46,173,209,.14),transparent 25%),
    radial-gradient(circle at 83% 17%,rgba(224,169,78,.08),transparent 24%),
    radial-gradient(circle at 67% 83%,rgba(28,115,151,.13),transparent 27%),
    radial-gradient(circle at 28% 72%,rgba(59,103,139,.11),transparent 30%),
    linear-gradient(145deg,#010508 0%,#04111a 25%,#071d27 47%,#08151d 71%,#02070c 100%);
  background-size:185% 185%;animation:scSpaceShift 72s ease-in-out infinite alternate;
}
body.star-citizen-mode .bg-wash{
  background:
    radial-gradient(circle at 20% 21%,rgba(44,184,218,.14),transparent 22%),
    radial-gradient(circle at 77% 25%,rgba(230,171,74,.07),transparent 25%),
    radial-gradient(circle at 58% 78%,rgba(42,126,163,.13),transparent 25%);
  opacity:.82;filter:blur(45px) saturate(1.02);
}
body.star-citizen-mode .grain{opacity:.035}
body.star-citizen-mode .a1{background:#2c8eab;opacity:.14}
body.star-citizen-mode .a2{background:#47d6ec;opacity:.12}
body.star-citizen-mode .a3{background:#c99352;opacity:.08}
body.star-citizen-mode .m1{background:rgba(36,116,147,.28)}
body.star-citizen-mode .m2{background:rgba(49,190,215,.22)}
body.star-citizen-mode .m3{background:rgba(201,145,69,.14)}
body.star-citizen-mode .glass{
  background:
    linear-gradient(135deg,rgba(12,53,67,.27),rgba(2,17,25,.60)),
    repeating-linear-gradient(90deg,transparent 0 48px,rgba(77,205,236,.008) 48px 49px);
  border-color:rgba(75,201,231,.18);
  box-shadow:inset 0 1px rgba(125,227,247,.07),0 24px 68px rgba(0,7,12,.56);
  backdrop-filter:blur(25px) saturate(115%);-webkit-backdrop-filter:blur(25px) saturate(115%);
}
body.star-citizen-mode .topbar{
  border-radius:5px;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  border-color:rgba(76,209,239,.22);
}
body.star-citizen-mode .brand-orb{
  border-radius:4px;background:linear-gradient(145deg,#164f66,#49c9df);
  color:#d8fbff;box-shadow:0 0 26px rgba(55,197,224,.18);
}
body.star-citizen-mode .brand b{color:#67ddf2}
body.star-citizen-mode .topbar nav a{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#86aab3}
body.star-citizen-mode .topbar nav a:hover{color:#bdf5ff}
body.star-citizen-mode .eyebrow{color:#e0b363;text-shadow:0 0 12px rgba(223,176,90,.12)}
body.star-citizen-mode .hero h1 span{
  background:linear-gradient(90deg,#b8f4ff,#58d6ed,#e0b36d,#b8f4ff);
  background-size:190% auto;-webkit-background-clip:text;color:transparent;animation:scTextFlow 16s linear infinite;
}
body.star-citizen-mode .primary{
  border:1px solid rgba(77,208,237,.25);border-radius:5px;
  background:linear-gradient(135deg,#0a5a70,#1590a7 56%,#28788d);
  box-shadow:0 0 22px rgba(31,174,204,.15);
}
body.star-citizen-mode .primary:hover{box-shadow:0 0 34px rgba(42,198,225,.22)}
body.star-citizen-mode .ghost,body.star-citizen-mode .icon-btn,body.star-citizen-mode .theme-toggle{
  border-radius:4px;background:rgba(8,41,54,.35);border-color:rgba(78,204,233,.16);
}
body.star-citizen-mode .twitch{border-radius:4px;background:linear-gradient(135deg,#493b70,#655180)}
body.star-citizen-mode .hero-visual{border-radius:7px}
body.star-citizen-mode .planet{
  background:radial-gradient(circle at 35% 25%,#c9f9ff,#48b6ca 28%,#185a6c 55%,#06151e 82%);
  box-shadow:0 0 75px rgba(55,197,222,.27),0 0 35px rgba(219,171,82,.05);
}
body.star-citizen-mode .planet span{color:#c9f8ff;font-size:12px;letter-spacing:.28em}
body.star-citizen-mode .floating-chip{border-radius:4px;background:rgba(5,28,38,.64);border-color:rgba(75,198,227,.14)}
body.star-citizen-mode .stream-card,
body.star-citizen-mode .room-card,
body.star-citizen-mode .giveaway-card,
body.star-citizen-mode .post,
body.star-citizen-mode .mod-panel,
body.star-citizen-mode .mod-empty,
body.star-citizen-mode .sponsor-copy,
body.star-citizen-mode .form-card{
  border-radius:6px;border-color:rgba(76,201,232,.16);
}
body.star-citizen-mode .stream-card:hover{border-color:rgba(91,221,248,.32);transform:translateY(-4px)}
body.star-citizen-mode .live-badge{border-radius:3px;background:#d75b4e;box-shadow:none}
body.star-citizen-mode .member-badge{border-radius:3px;color:#9deaff;background:rgba(2,21,29,.78);border-color:rgba(83,209,238,.20)}
body.star-citizen-mode input,body.star-citizen-mode textarea{
  border-radius:4px;background:rgba(2,18,26,.48);border-color:rgba(79,199,227,.14);
}
body.star-citizen-mode input:focus,body.star-citizen-mode textarea:focus{border-color:rgba(83,220,248,.38);box-shadow:0 0 0 2px rgba(83,220,248,.05)}
body.star-citizen-mode .tag{border-radius:3px;color:#8ee5f5;background:rgba(49,184,209,.06);border-color:rgba(66,198,222,.15)}
body.star-citizen-mode .channel-button{border-radius:4px}
body.star-citizen-mode .channel-button.active{box-shadow:inset 2px 0 #65dff2;border-color:rgba(76,204,235,.16)}
body.star-citizen-mode .mod-panel-live{border-radius:3px}
body.star-citizen-mode .mod-panel-live.is-live{color:#ecc476;border-color:rgba(230,181,95,.22);background:rgba(215,157,68,.06)}
body.star-citizen-mode .ambassador-avatar-ring{border-radius:8px;background:linear-gradient(145deg,rgba(53,166,194,.54),rgba(213,162,75,.22))}
body.star-citizen-mode .ambassador-avatar-ring img{border-radius:6px}
body.star-citizen-mode .ambassador-float-name{border-radius:4px;background:rgba(3,23,32,.70);border-color:rgba(77,205,235,.13)}
body.star-citizen-mode .wheel-dialog{border-radius:7px;background:rgba(4,21,30,.95);border:1px solid rgba(79,207,236,.18)}
body.star-citizen-mode .wheel-hub{background:#061b24;border-color:#5bd7ea}
body.star-citizen-mode footer a{color:#72dff1}
body.star-citizen-mode .toasts{bottom:78px}
body.sc-site-boot .topbar,body.sc-site-boot .hero-visual{animation:scInterfaceBoot .85s cubic-bezier(.17,.84,.22,1)}

@keyframes scRadarSweep{to{transform:rotate(360deg)}}
@keyframes scQuantumBlink{50%{opacity:.45}}
@keyframes scBootSpin{to{transform:rotate(360deg)}}
@keyframes scSpaceShift{0%{background-position:0% 45%}46%{background-position:100% 34%}100%{background-position:17% 80%}}
@keyframes scTextFlow{to{background-position:190% center}}
@keyframes scInterfaceBoot{0%{filter:brightness(.55) contrast(1.2);transform:scale(.99)}45%{filter:brightness(1.18) contrast(1.05)}100%{filter:none;transform:scale(1)}}

@media(max-width:720px){
  .sc-hud-top{top:5px;width:calc(100% - 16px);grid-template-columns:64px 1fr}
  .sc-hud-readout{display:none}
  .sc-brand-mark span{font-size:16px}
  .sc-hud-center b{font-size:8px}.sc-hud-center span{font-size:6px}
  .sc-exit{right:12px;bottom:12px;min-width:auto;padding:10px 12px}
  .sc-radar{width:105px;height:105px;left:10px;bottom:66px}
  .sc-route,.sc-side-readout{display:none}
  .sc-reticle{width:190px;height:190px}
  .sc-hud-bottom{font-size:5px;bottom:6px}
  body.star-citizen-mode .topbar{top:60px}
  body.star-citizen-mode .toasts{bottom:72px}
}
@media(prefers-reduced-motion:reduce){
  body.star-citizen-mode,.sc-radar-sweep,.sc-quantum,.sc-boot-ring,
  body.sc-site-boot .topbar,body.sc-site-boot .hero-visual{animation:none!important}
}


/* ============================================================
   StreamSphere Orb
   Brand mark: sphere + orbit + stream signal + play accent
   ============================================================ */
.brand-orb{
  --brand-a:#a955ff;
  --brand-b:#38efff;
  --brand-c:#ff4fcf;
  --brand-d:#73ffb8;
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:50%;
  overflow:visible;
  background:
    radial-gradient(circle at 34% 27%,rgba(255,255,255,.54),transparent 13%),
    linear-gradient(135deg,var(--brand-a),var(--brand-b),var(--brand-c),var(--brand-d),var(--brand-a));
  background-size:320% 320%;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.32),
    inset -5px -7px 12px rgba(21,9,45,.16),
    0 0 25px color-mix(in srgb,var(--brand-a) 38%,transparent),
    0 7px 18px rgba(0,0,0,.18);
  color:white;
  font-weight:900;
  transform:none;
  animation:streamSphereColorShift 9s ease-in-out infinite;
}
.brand-orb:before{
  content:'';
  position:absolute;
  inset:4px;
  z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(circle at 31% 26%,rgba(255,255,255,.28),transparent 18%),
    radial-gradient(circle at 64% 70%,rgba(0,0,0,.17),transparent 44%);
  pointer-events:none;
}
.brand-core-mark{
  position:relative;
  z-index:3;
  display:block;
  font-size:17px;
  line-height:1;
  font-weight:950;
  font-style:italic;
  letter-spacing:-.11em;
  translate:-1px 0;
  color:#fff;
  text-shadow:0 1px 4px rgba(9,4,24,.38);
}
.brand-orbit{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:46px;
  height:17px;
  border:1.5px solid rgba(255,255,255,.68);
  border-left-color:rgba(255,255,255,.16);
  border-right-color:rgba(255,255,255,.92);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-31deg);
  box-shadow:0 0 8px rgba(255,255,255,.12);
  pointer-events:none;
}
.brand-signal-dot{
  position:absolute;
  z-index:4;
  width:6px;
  height:6px;
  right:-4px;
  top:7px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;
  background:var(--brand-b);
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--brand-b) 16%,transparent),
    0 0 12px color-mix(in srgb,var(--brand-b) 70%,transparent);
  animation:streamSphereSignal 2.2s ease-in-out infinite;
}
.brand-play-mark{
  position:absolute;
  z-index:4;
  left:8px;
  bottom:6px;
  width:0;
  height:0;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  border-left:5px solid rgba(255,255,255,.88);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.24));
  opacity:.82;
}
.brand-orb.tiny{
  width:28px;
  height:28px;
  flex-basis:28px;
  border-radius:50%;
}
.brand-orb.tiny .brand-core-mark{font-size:13px}
.brand-orb.tiny .brand-orbit{width:36px;height:13px}
.brand-orb.tiny .brand-signal-dot{width:5px;height:5px;right:-3px;top:5px}
.brand-orb.tiny .brand-play-mark{left:6px;bottom:5px;border-top-width:2px;border-bottom-width:2px;border-left-width:4px}

/* Secret modes retain one recognizable StreamSphere mark, but recolor its universe. */
body.vibrant-dark .brand-orb{
  --brand-a:#9848ff;--brand-b:#2beeff;--brand-c:#ff49cc;--brand-d:#6affae;
  border-radius:50%;transform:none;
}
body.halo-mode .brand-orb{
  --brand-a:#597232;--brand-b:#91c75a;--brand-c:#6ca852;--brand-d:#b9e477;
  border-radius:50%;transform:none;color:white;
}
body.crash-mode .brand-orb{
  --brand-a:#ffad35;--brand-b:#ff632d;--brand-c:#8e43d7;--brand-d:#32ddd0;
  border-radius:50%;transform:none;color:white;
}
body.spyro-mode .brand-orb{
  --brand-a:#b65bff;--brand-b:#7140c8;--brand-c:#f2b946;--brand-d:#65e6e9;
  border-radius:50%;transform:none;color:white;
}
body.sly-mode .brand-orb{
  --brand-a:#336dc5;--brand-b:#55d6ff;--brand-c:#584fae;--brand-d:#79c9ff;
  border-radius:50%;transform:none;color:white;
}
body.star-citizen-mode .brand-orb{
  --brand-a:#164f66;--brand-b:#4ad0e6;--brand-c:#d6a75e;--brand-d:#66e3ef;
  border-radius:50%;transform:none;color:white;
}

/* A little extra identity in the wordmark. */
.brand > span:last-child{
  letter-spacing:-.015em;
}
.brand > span:last-child b{
  position:relative;
}
.brand > span:last-child b:after{
  content:'';
  position:absolute;
  left:1px;
  right:0;
  bottom:-3px;
  height:1px;
  background:linear-gradient(90deg,var(--brand-a,#a955ff),var(--brand-b,#38efff),transparent);
  opacity:.65;
}

@keyframes streamSphereColorShift{
  0%{background-position:0% 50%;filter:hue-rotate(0deg)}
  35%{background-position:58% 42%;filter:hue-rotate(8deg)}
  70%{background-position:100% 56%;filter:hue-rotate(-6deg)}
  100%{background-position:0% 50%;filter:hue-rotate(0deg)}
}
@keyframes streamSphereSignal{
  0%,100%{transform:scale(.88);opacity:.70}
  50%{transform:scale(1.14);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .brand-orb,.brand-signal-dot{animation:none!important}
}


/* ============================================================
   StreamSphere stacked wordmark
   Reference direction: large StreamSphere + spaced HUB beneath
   ============================================================ */
.brand.brand-stacked{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:max-content;
}
.brand-wordmark{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:142px;
  line-height:1;
  translate:0 1px;
}
.brand-name{
  display:block;
  white-space:nowrap;
  font-size:19px;
  line-height:.95;
  font-weight:760;
  letter-spacing:-.055em;
  color:#10173e;
  text-shadow:0 1px 0 rgba(255,255,255,.12);
}
.brand-name > span{
  background:linear-gradient(90deg,#1f43ff 0%,#284eff 34%,#683eff 69%,#a335ff 100%);
  background-size:180% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:streamSphereWordShift 10s ease-in-out infinite alternate;
}
.brand-hub{
  display:block;
  margin-top:5px;
  padding-left:.48em;
  font-size:7px;
  line-height:1;
  font-weight:850;
  letter-spacing:.48em;
  text-transform:uppercase;
  background:linear-gradient(90deg,#7a2cff,#df43ff,#2e8cff,#40e8e0,#7a2cff);
  background-size:300% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 8px rgba(126,63,255,.12));
  animation:streamSphereHubShift 5.5s linear infinite;
}

/* Dark surfaces need the first half of the wordmark brighter. */
body.vibrant-dark .brand-name,
body.halo-mode .brand-name,
body.crash-mode .brand-name,
body.spyro-mode .brand-name,
body.sly-mode .brand-name,
body.star-citizen-mode .brand-name{
  color:#f5f7ff;
}

/* Theme-aware HUB color travel. */
body.halo-mode .brand-hub{
  background-image:linear-gradient(90deg,#9ee36e,#5ef2a4,#c8f990,#71b85a,#9ee36e);
}
body.crash-mode .brand-hub{
  background-image:linear-gradient(90deg,#ffb131,#ff5d2d,#f7429a,#32e3d6,#ffb131);
}
body.spyro-mode .brand-hub{
  background-image:linear-gradient(90deg,#f5c451,#b85dff,#7a47db,#58e5e8,#f5c451);
}
body.sly-mode .brand-hub{
  background-image:linear-gradient(90deg,#65d8ff,#3575c9,#7466dd,#8ce8ff,#65d8ff);
}
body.star-citizen-mode .brand-hub{
  background-image:linear-gradient(90deg,#62ddf3,#d5aa63,#6ee8ef,#4bb9d2,#62ddf3);
}

/* Remove the old underline treatment from this richer wordmark. */
.brand.brand-stacked > .brand-wordmark:last-child b:after,
.brand.brand-stacked > span:last-child b:after{
  display:none!important;
}

@keyframes streamSphereWordShift{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}
@keyframes streamSphereHubShift{
  to{background-position:300% center}
}

@media(max-width:760px){
  .brand.brand-stacked{gap:9px}
  .brand-wordmark{min-width:119px}
  .brand-name{font-size:16px}
  .brand-hub{font-size:6px;margin-top:4px;letter-spacing:.44em}
}

@media(max-width:520px){
  .brand-wordmark{min-width:102px}
  .brand-name{font-size:14px}
  .brand-hub{font-size:5.5px;letter-spacing:.40em}
}

@media(prefers-reduced-motion:reduce){
  .brand-name > span,.brand-hub{animation:none!important}
}


/* ============================================================
   Animated StreamSphere corner logo
   ============================================================ */
.brand.brand-stacked .brand-orb{
  animation:
    streamSphereColorShift 9s ease-in-out infinite,
    streamSphereOrbFloat 4.8s ease-in-out infinite;
  transform-origin:center;
  will-change:transform,filter,background-position;
}
.brand.brand-stacked .brand-orbit{
  animation:streamSphereOrbitSpin 5.8s linear infinite;
  transform-origin:center;
  will-change:transform;
}
.brand.brand-stacked .brand-signal-dot{
  animation:
    streamSphereSignal 2.2s ease-in-out infinite,
    streamSphereSignalTravel 5.8s linear infinite;
  transform-origin:center;
}
.brand.brand-stacked .brand-play-mark{
  animation:streamSpherePlayPulse 3.2s ease-in-out infinite;
}
.brand.brand-stacked:hover .brand-orb{
  animation-duration:6s,3.2s;
}
.brand.brand-stacked:hover .brand-orbit{
  animation-duration:3.8s;
}

@keyframes streamSphereOrbFloat{
  0%,100%{transform:translateY(0) rotate(-1deg) scale(1)}
  25%{transform:translateY(-1.5px) rotate(1deg) scale(1.015)}
  50%{transform:translateY(-3px) rotate(-.5deg) scale(1.025)}
  75%{transform:translateY(-1px) rotate(1.2deg) scale(1.01)}
}
@keyframes streamSphereOrbitSpin{
  from{transform:translate(-50%,-50%) rotate(-31deg)}
  to{transform:translate(-50%,-50%) rotate(329deg)}
}
@keyframes streamSphereSignalTravel{
  0%{translate:0 0}
  25%{translate:1px -1px}
  50%{translate:0 1px}
  75%{translate:-1px 0}
  100%{translate:0 0}
}
@keyframes streamSpherePlayPulse{
  0%,100%{opacity:.72;filter:drop-shadow(0 1px 2px rgba(0,0,0,.24));transform:scale(.94)}
  50%{opacity:1;filter:drop-shadow(0 0 6px rgba(255,255,255,.55));transform:scale(1.08)}
}

/* Keep the animation feeling intentional in each Easter egg universe. */
body.halo-mode .brand.brand-stacked .brand-orbit{animation-duration:7.2s}
body.crash-mode .brand.brand-stacked .brand-orb{animation-duration:7s,3.8s}
body.spyro-mode .brand.brand-stacked .brand-orb{animation-duration:8s,4.2s}
body.sly-mode .brand.brand-stacked .brand-orbit{animation-duration:6.8s}
body.star-citizen-mode .brand.brand-stacked .brand-orbit{animation-duration:4.6s}

@media(prefers-reduced-motion:reduce){
  .brand.brand-stacked .brand-orb,
  .brand.brand-stacked .brand-orbit,
  .brand.brand-stacked .brand-signal-dot,
  .brand.brand-stacked .brand-play-mark{
    animation:none!important;
  }
}


/* ============================================================
   Animated footer StreamSphere logo
   ============================================================ */
footer .brand-orb.tiny{
  animation:
    streamSphereColorShift 10s ease-in-out infinite,
    streamSphereFooterFloat 5.8s ease-in-out infinite;
  transform-origin:center;
  will-change:transform,filter,background-position;
}
footer .brand-orb.tiny .brand-orbit{
  animation:streamSphereOrbitSpin 7.4s linear infinite;
  transform-origin:center;
}
footer .brand-orb.tiny .brand-signal-dot{
  animation:
    streamSphereSignal 2.5s ease-in-out infinite,
    streamSphereSignalTravel 6.4s linear infinite;
}
footer .brand-orb.tiny .brand-play-mark{
  animation:streamSpherePlayPulse 3.8s ease-in-out infinite;
}

footer:hover .brand-orb.tiny{
  animation-duration:7s,4.2s;
}
footer:hover .brand-orb.tiny .brand-orbit{
  animation-duration:5.2s;
}

@keyframes streamSphereFooterFloat{
  0%,100%{transform:translateY(0) rotate(-.5deg) scale(1)}
  50%{transform:translateY(-2px) rotate(.8deg) scale(1.02)}
}

/* Footer orb follows the active Easter egg universe too. */
body.halo-mode footer .brand-orb.tiny .brand-orbit{animation-duration:8.2s}
body.crash-mode footer .brand-orb.tiny{animation-duration:8s,4.7s}
body.spyro-mode footer .brand-orb.tiny{animation-duration:9s,5s}
body.sly-mode footer .brand-orb.tiny .brand-orbit{animation-duration:7.8s}
body.star-citizen-mode footer .brand-orb.tiny .brand-orbit{animation-duration:5.4s}

@media(prefers-reduced-motion:reduce){
  footer .brand-orb.tiny,
  footer .brand-orb.tiny .brand-orbit,
  footer .brand-orb.tiny .brand-signal-dot,
  footer .brand-orb.tiny .brand-play-mark{
    animation:none!important;
  }
}


/* ============================================================
   HALO MODE // FULL SITE REWORK
   ============================================================ */
body.halo-mode main{
  width:min(1500px,calc(100% - 34px));
  margin-inline:auto;
  padding-top:106px;
}
body.halo-mode .topbar{
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:min(1480px,calc(100% - 28px));
  padding:12px 18px;
  border:1px solid rgba(154,255,190,.26);
  background:
    linear-gradient(90deg,rgba(6,21,14,.88),rgba(9,34,21,.76),rgba(6,21,14,.88)),
    repeating-linear-gradient(90deg,transparent 0 28px,rgba(154,255,190,.015) 28px 29px);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
}
body.halo-mode .topbar nav{
  gap:10px;
  flex-wrap:wrap;
}
body.halo-mode .topbar nav a{
  padding:8px 10px;
  border:1px solid rgba(154,255,190,.09);
  background:rgba(92,255,170,.03);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
}
body.halo-mode .topbar nav a:hover{
  background:rgba(92,255,170,.08);
  border-color:rgba(154,255,190,.20);
}
body.halo-mode .hero.section{
  position:relative;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:22px;
  padding:30px;
  border:1px solid rgba(156,255,190,.16);
  background:
    linear-gradient(135deg,rgba(7,23,18,.36),rgba(8,18,14,.22));
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  overflow:hidden;
}
body.halo-mode .hero.section:before{
  content:'UNSC OPERATIONS GRID';
  position:absolute;
  top:12px;
  right:18px;
  color:rgba(170,255,198,.56);
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
}
body.halo-mode .hero-copy,
body.halo-mode .hero-visual{
  position:relative;
  min-height:420px;
  padding:24px;
  border:1px solid rgba(154,255,190,.14);
  background:
    linear-gradient(135deg,rgba(5,18,14,.72),rgba(8,24,17,.42));
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
}
body.halo-mode .hero-copy:before{
  content:'TACTICAL COMMAND DECK';
  display:block;
  margin-bottom:14px;
  color:#aff5c0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
}
body.halo-mode .hero-copy h1{
  text-transform:uppercase;
  letter-spacing:.03em;
  max-width:12ch;
}
body.halo-mode .hero-copy h1 span{
  background:linear-gradient(90deg,#ddffd4,#8dffb7,#a6f7df);
  -webkit-background-clip:text;
  color:transparent;
}
body.halo-mode .hero-copy p{
  max-width:56ch;
  color:#bdd7c6;
}
body.halo-mode .hero-actions{
  gap:12px;
}
body.halo-mode .hero-actions .btn{
  text-transform:uppercase;
  letter-spacing:.12em;
}
body.halo-mode .mini-stats{
  margin-top:22px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
body.halo-mode .mini-stats > div{
  padding:14px 16px;
  border:1px solid rgba(154,255,190,.10);
  background:rgba(92,255,170,.035);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
body.halo-mode .hero-visual{
  box-shadow:inset 0 0 0 1px rgba(154,255,190,.04),0 30px 80px rgba(0,0,0,.35);
}
body.halo-mode .hero-visual:before{
  content:'MOTION / LIVE / MODERATION';
  position:absolute;
  top:16px;
  left:20px;
  color:rgba(170,255,198,.48);
  font-size:9px;
  font-weight:800;
  letter-spacing:.19em;
}
body.halo-mode .hero-visual:after{
  content:'';
  position:absolute;
  inset:22px;
  border:1px dashed rgba(154,255,190,.08);
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  pointer-events:none;
}
body.halo-mode .window-head{
  border-bottom:1px solid rgba(154,255,190,.10);
}
body.halo-mode .window-head em{
  color:#b6ffc8;
  letter-spacing:.2em;
  text-transform:uppercase;
}
body.halo-mode .pulse-orbit{
  scale:1.02;
}
body.halo-mode .floating-chip{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:10px;
}
body.halo-mode .section.block{
  position:relative;
  padding:24px;
  border:1px solid rgba(154,255,190,.14);
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
}
body.halo-mode .section.block:before{
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid rgba(154,255,190,.04);
  clip-path:inherit;
  pointer-events:none;
}
body.halo-mode .section-head h2,
body.halo-mode .section-head h3{
  text-transform:uppercase;
  letter-spacing:.05em;
}
body.halo-mode .feed .post,
body.halo-mode .rooms-grid > *,
body.halo-mode .giveaway-grid > *,
body.halo-mode .live-watch-shell,
body.halo-mode .channel-rail,
body.halo-mode .mod-empty,
body.halo-mode .sponsor-copy,
body.halo-mode .form-card,
body.halo-mode .stream-card{
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}
body.halo-mode .status-pill,
body.halo-mode .btn,
body.halo-mode .icon-btn,
body.halo-mode input,
body.halo-mode textarea{
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  border-radius:0;
}
body.halo-mode input,
body.halo-mode textarea{
  font-size:14px;
}
body.halo-mode .mod-workbench{
  gap:16px;
}
body.halo-mode .live-watch-player,
body.halo-mode .chat-placeholder{
  background:
    linear-gradient(135deg,rgba(9,26,19,.75),rgba(5,14,11,.58));
}
.halo-hud-top{
  width:min(920px,calc(100% - 34px));
  display:grid;
  grid-template-columns:76px 1fr auto;
  gap:14px;
  align-items:center;
}
.halo-hud-core{
  display:grid;
  gap:4px;
}
.halo-kicker{
  color:rgba(184,255,205,.46);
  font-size:8px;
  letter-spacing:.2em;
  font-weight:800;
}
.halo-status-bars{
  display:flex;
  align-items:center;
  gap:6px;
}
.halo-status-bars i{
  width:18px;
  height:8px;
  border:1px solid rgba(154,255,190,.18);
  background:linear-gradient(90deg,rgba(90,255,160,.08),rgba(154,255,190,.35));
}
.halo-side-dock{
  position:absolute;
  top:120px;
  width:220px;
  padding:14px 16px;
  border:1px solid rgba(154,255,190,.16);
  background:linear-gradient(135deg,rgba(7,22,15,.78),rgba(4,15,10,.60));
  color:#d5ffe0;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}
.halo-dock-left{left:18px}
.halo-dock-right{right:18px}
.halo-dock-title{
  margin-bottom:12px;
  color:#b4ffca;
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
}
.halo-dock-row{
  display:grid;
  gap:4px;
  padding:8px 0;
  border-top:1px solid rgba(154,255,190,.07);
}
.halo-dock-row:first-of-type{border-top:0;padding-top:0}
.halo-dock-row span{
  font-size:8px;
  color:rgba(182,255,202,.46);
  letter-spacing:.16em;
}
.halo-dock-row b{
  font-size:12px;
  letter-spacing:.04em;
  color:#effff2;
}
.halo-objective-panel{
  position:absolute;
  left:50%;
  bottom:62px;
  transform:translateX(-50%);
  width:min(720px,calc(100% - 520px));
  padding:14px 18px;
  border:1px solid rgba(154,255,190,.14);
  background:linear-gradient(90deg,rgba(7,24,15,.72),rgba(8,34,21,.62),rgba(7,24,15,.72));
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  text-align:center;
}
.halo-objective-kicker{
  display:block;
  margin-bottom:5px;
  color:rgba(182,255,202,.48);
  font-size:8px;
  font-weight:800;
  letter-spacing:.18em;
}
.halo-objective-panel b{
  color:#edfff1;
  font-size:13px;
  line-height:1.45;
}
body.halo-mode .toasts{bottom:86px}
@media(max-width:1100px){
  body.halo-mode .hero.section{grid-template-columns:1fr}
  body.halo-mode .hero-copy,
  body.halo-mode .hero-visual{min-height:auto}
  .halo-side-dock{display:none}
  .halo-objective-panel{position:static;transform:none;width:auto;margin:24px 18px 70px}
}
@media(max-width:760px){
  body.halo-mode main{padding-top:96px;width:calc(100% - 16px)}
  body.halo-mode .topbar{width:calc(100% - 14px);padding:10px 12px}
  body.halo-mode .topbar nav{display:none}
  .halo-hud-top{grid-template-columns:56px 1fr}
  .halo-status-bars{display:none}
  .halo-objective-panel{margin:18px 12px 64px}
}

/* ============================================================
   STAR CITIZEN / STANTON MODE // FULL SITE REWORK
   ============================================================ */
body.star-citizen-mode main{
  width:min(1550px,calc(100% - 30px));
  margin-inline:auto;
  padding-top:108px;
}
body.star-citizen-mode .topbar{
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:min(1500px,calc(100% - 24px));
  padding:12px 18px;
  border:1px solid rgba(88,219,255,.22);
  background:
    linear-gradient(90deg,rgba(2,16,24,.92),rgba(6,29,40,.83),rgba(2,16,24,.92)),
    repeating-linear-gradient(90deg,transparent 0 36px,rgba(88,219,255,.010) 36px 37px);
  clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px),0 22px);
}
body.star-citizen-mode .topbar nav{
  gap:10px;
  flex-wrap:wrap;
}
body.star-citizen-mode .topbar nav a{
  padding:8px 10px;
  border:1px solid rgba(86,214,249,.10);
  background:rgba(64,188,222,.03);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:10px;
}
body.star-citizen-mode .topbar nav a:hover{
  background:rgba(66,196,232,.08);
  border-color:rgba(96,224,255,.20);
}
body.star-citizen-mode .hero.section{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  padding:28px;
  border:1px solid rgba(87,214,249,.14);
  background:
    linear-gradient(145deg,rgba(3,15,22,.46),rgba(4,22,31,.23));
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  overflow:hidden;
}
body.star-citizen-mode .hero.section:before{
  content:'STANTON FLIGHT DECK';
  position:absolute;
  top:12px;
  right:18px;
  color:rgba(121,229,255,.48);
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
}
body.star-citizen-mode .hero-copy,
body.star-citizen-mode .hero-visual{
  position:relative;
  min-height:430px;
  padding:24px;
  border:1px solid rgba(88,219,255,.12);
  background:linear-gradient(135deg,rgba(4,17,27,.78),rgba(5,22,33,.50));
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
}
body.star-citizen-mode .hero-copy:before{
  content:'CIVILIAN NETWORK / SHIP CONTROL';
  display:block;
  margin-bottom:14px;
  color:#9feaff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.22em;
}
body.star-citizen-mode .hero-copy h1{
  text-transform:uppercase;
  letter-spacing:.03em;
  max-width:13ch;
}
body.star-citizen-mode .hero-copy h1 span{
  background:linear-gradient(90deg,#c8faff,#6ae5ff,#e4b46a);
  -webkit-background-clip:text;
  color:transparent;
}
body.star-citizen-mode .hero-copy p{
  color:#a8c5cf;
  max-width:58ch;
}
body.star-citizen-mode .hero-actions .btn{
  text-transform:uppercase;
  letter-spacing:.12em;
}
body.star-citizen-mode .mini-stats{
  margin-top:22px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
body.star-citizen-mode .mini-stats > div{
  padding:14px 16px;
  border:1px solid rgba(88,219,255,.10);
  background:rgba(73,190,223,.032);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
body.star-citizen-mode .hero-visual{
  box-shadow:inset 0 0 0 1px rgba(88,219,255,.03),0 30px 80px rgba(0,0,0,.38);
}
body.star-citizen-mode .hero-visual:before{
  content:'QUANTUM TRAFFIC / LIVE GRID / CREATOR ROUTES';
  position:absolute;
  top:16px;
  left:20px;
  color:rgba(126,232,255,.48);
  font-size:9px;
  font-weight:800;
  letter-spacing:.19em;
}
body.star-citizen-mode .hero-visual:after{
  content:'';
  position:absolute;
  inset:24px;
  border:1px dashed rgba(88,219,255,.08);
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  pointer-events:none;
}
body.star-citizen-mode .window-head em{
  color:#b7f6ff;
  letter-spacing:.19em;
  text-transform:uppercase;
}
body.star-citizen-mode .pulse-orbit{
  scale:1.06;
}
body.star-citizen-mode .planet{
  box-shadow:0 0 95px rgba(74,214,243,.30),0 0 30px rgba(220,178,89,.08);
}
body.star-citizen-mode .floating-chip{
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:10px;
}
body.star-citizen-mode .section.block{
  position:relative;
  padding:24px;
  border:1px solid rgba(88,219,255,.12);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
}
body.star-citizen-mode .section.block:before{
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid rgba(88,219,255,.04);
  clip-path:inherit;
  pointer-events:none;
}
body.star-citizen-mode .section-head h2,
body.star-citizen-mode .section-head h3{
  text-transform:uppercase;
  letter-spacing:.06em;
}
body.star-citizen-mode .feed .post,
body.star-citizen-mode .rooms-grid > *,
body.star-citizen-mode .giveaway-grid > *,
body.star-citizen-mode .live-watch-shell,
body.star-citizen-mode .channel-rail,
body.star-citizen-mode .mod-empty,
body.star-citizen-mode .sponsor-copy,
body.star-citizen-mode .form-card,
body.star-citizen-mode .stream-card{
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
}
body.star-citizen-mode .status-pill,
body.star-citizen-mode .btn,
body.star-citizen-mode .icon-btn,
body.star-citizen-mode input,
body.star-citizen-mode textarea{
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  border-radius:0;
}
body.star-citizen-mode .live-watch-player,
body.star-citizen-mode .chat-placeholder{
  background:linear-gradient(145deg,rgba(2,18,26,.75),rgba(6,25,36,.56));
}
.sc-cockpit-arch{
  position:absolute;
  top:48px;
  bottom:52px;
  width:92px;
  border:1px solid rgba(85,217,250,.12);
  background:linear-gradient(180deg,rgba(16,74,92,.16),rgba(4,18,25,.02));
  opacity:.35;
}
.sc-left-arch{
  left:14px;
  clip-path:polygon(100% 0,0 10%,0 90%,100% 100%,75% 78%,75% 22%);
}
.sc-right-arch{
  right:14px;
  clip-path:polygon(0 0,100% 10%,100% 90%,0 100%,25% 78%,25% 22%);
}
.sc-mfd{
  position:absolute;
  top:128px;
  width:220px;
  padding:14px 16px;
  border:1px solid rgba(89,219,255,.16);
  background:linear-gradient(145deg,rgba(3,18,29,.80),rgba(5,25,35,.66));
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}
.sc-mfd-left{left:18px}
.sc-mfd-right{right:18px}
.sc-mfd-head{
  margin-bottom:10px;
  color:#b9f5ff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
}
.sc-mfd-row{
  display:grid;
  gap:4px;
  padding:8px 0;
  border-top:1px solid rgba(88,219,255,.07);
}
.sc-mfd-row:first-of-type{border-top:0;padding-top:0}
.sc-mfd-row span{
  color:rgba(126,232,255,.46);
  font-size:8px;
  letter-spacing:.16em;
}
.sc-mfd-row b{
  color:#f5f7f9;
  font-size:12px;
}
.sc-jump-card{
  position:absolute;
  left:50%;
  bottom:64px;
  transform:translateX(-50%);
  width:min(760px,calc(100% - 520px));
  padding:14px 18px;
  border:1px solid rgba(88,219,255,.16);
  background:linear-gradient(90deg,rgba(3,18,29,.82),rgba(7,30,42,.66),rgba(3,18,29,.82));
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  text-align:center;
}
.sc-jump-card span{
  display:block;
  margin-bottom:5px;
  color:rgba(126,232,255,.48);
  font-size:8px;
  font-weight:800;
  letter-spacing:.18em;
}
.sc-jump-card b{
  color:#eef9ff;
  font-size:13px;
  line-height:1.45;
}
body.star-citizen-mode .toasts{bottom:86px}
@media(max-width:1180px){
  body.star-citizen-mode .hero.section{grid-template-columns:1fr}
  body.star-citizen-mode .hero-copy,
  body.star-citizen-mode .hero-visual{min-height:auto}
  .sc-mfd,.sc-cockpit-arch{display:none}
  .sc-jump-card{position:static;transform:none;width:auto;margin:24px 18px 70px}
}
@media(max-width:760px){
  body.star-citizen-mode main{padding-top:96px;width:calc(100% - 16px)}
  body.star-citizen-mode .topbar{width:calc(100% - 14px);padding:10px 12px}
  body.star-citizen-mode .topbar nav{display:none}
  .sc-jump-card{margin:18px 12px 64px}
}


/* ============================================================
   Easter egg top HUD auto-fade
   Shows briefly on activation, then clears the top of the site.
   Exit controls remain visible in the bottom-right.
   ============================================================ */
.halo-hud-top,
.crash-hud-top,
.spyro-hud-top,
.sly-hud-top,
.sc-hud-top{
  transform-origin:top center;
}

.egg-topbar-fade{
  animation:easterEggTopHudFade 4.2s cubic-bezier(.2,.75,.25,1) forwards!important;
}

@keyframes easterEggTopHudFade{
  0%{
    opacity:0;
    translate:0 -14px;
    filter:blur(5px);
  }
  10%{
    opacity:1;
    translate:0 0;
    filter:blur(0);
  }
  68%{
    opacity:1;
    translate:0 0;
    filter:blur(0);
  }
  100%{
    opacity:0;
    translate:0 -10px;
    filter:blur(2px);
    visibility:hidden;
    pointer-events:none;
  }
}

/* The full theme remains active after the top strip disappears. */
body.halo-mode .halo-exit,
body.crash-mode .crash-exit,
body.spyro-mode .spyro-exit,
body.sly-mode .sly-exit,
body.star-citizen-mode .sc-exit{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

@media(prefers-reduced-motion:reduce){
  .egg-topbar-fade{
    animation:easterEggTopHudFadeReduced 3.4s linear forwards!important;
  }
  @keyframes easterEggTopHudFadeReduced{
    0%,72%{opacity:1;visibility:visible}
    100%{opacity:0;visibility:hidden;pointer-events:none}
  }
}


/* ============================================================
   Center the main top navigation in every Easter egg theme
   ============================================================ */
body.halo-mode .topbar,
body.crash-mode .topbar,
body.spyro-mode .topbar,
body.sly-mode .topbar,
body.star-citizen-mode .topbar{
  position:fixed;
}

body.halo-mode .topbar nav,
body.crash-mode .topbar nav,
body.spyro-mode .topbar nav,
body.sly-mode .topbar nav,
body.star-citizen-mode .topbar nav{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:58%;
  margin:0;
  z-index:2;
}

body.halo-mode .topbar .brand,
body.crash-mode .topbar .brand,
body.spyro-mode .topbar .brand,
body.sly-mode .topbar .brand,
body.star-citizen-mode .topbar .brand{
  position:relative;
  z-index:3;
}

body.halo-mode .topbar-actions,
body.crash-mode .topbar-actions,
body.spyro-mode .topbar-actions,
body.sly-mode .topbar-actions,
body.star-citizen-mode .topbar-actions{
  position:relative;
  z-index:3;
  margin-left:auto;
}

/* Keep the centered navigation usable on narrower layouts. */
@media(max-width:1180px){
  body.halo-mode .topbar nav,
  body.crash-mode .topbar nav,
  body.spyro-mode .topbar nav,
  body.sly-mode .topbar nav,
  body.star-citizen-mode .topbar nav{
    max-width:48%;
    gap:6px;
  }

  body.halo-mode .topbar nav a,
  body.crash-mode .topbar nav a,
  body.spyro-mode .topbar nav a,
  body.sly-mode .topbar nav a,
  body.star-citizen-mode .topbar nav a{
    padding-left:7px;
    padding-right:7px;
    font-size:9px;
  }
}

@media(max-width:900px){
  body.halo-mode .topbar nav,
  body.crash-mode .topbar nav,
  body.spyro-mode .topbar nav,
  body.sly-mode .topbar nav,
  body.star-citizen-mode .topbar nav{
    display:none;
  }
}


/* ============================================================
   Halo Mission Board + Stanton Quantum Tasking auto-fade
   ============================================================ */
.halo-objective-panel,
.sc-jump-card{
  will-change:opacity,translate,filter;
}

.egg-briefing-fade{
  animation:easterEggBriefingFade 7.2s cubic-bezier(.2,.72,.25,1) forwards!important;
}

@keyframes easterEggBriefingFade{
  0%{
    opacity:0;
    translate:0 12px;
    filter:blur(5px);
    visibility:visible;
  }
  10%{
    opacity:1;
    translate:0 0;
    filter:blur(0);
  }
  72%{
    opacity:1;
    translate:0 0;
    filter:blur(0);
  }
  100%{
    opacity:0;
    translate:0 8px;
    filter:blur(2px);
    visibility:hidden;
    pointer-events:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .egg-briefing-fade{
    animation:easterEggBriefingFadeReduced 6.4s linear forwards!important;
  }

  @keyframes easterEggBriefingFadeReduced{
    0%,78%{
      opacity:1;
      visibility:visible;
    }
    100%{
      opacity:0;
      visibility:hidden;
      pointer-events:none;
    }
  }
}


/* ============================================================
   True centered top navigation for Crash / Spyro / Sly modes
   Centers both the whole menu bar and the navigation itself.
   ============================================================ */
body.crash-mode .topbar,
body.spyro-mode .topbar,
body.sly-mode .topbar{
  position:fixed;
  left:50%;
  right:auto;
  top:14px;
  transform:translateX(-50%);
  width:min(1240px,calc(100% - 28px));
  margin:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:18px;
}

body.crash-mode .topbar .brand,
body.spyro-mode .topbar .brand,
body.sly-mode .topbar .brand{
  justify-self:start;
  min-width:0;
}

body.crash-mode .topbar nav,
body.spyro-mode .topbar nav,
body.sly-mode .topbar nav{
  position:static;
  left:auto;
  top:auto;
  transform:none;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:none;
  margin:0;
  gap:18px;
}

body.crash-mode .topbar-actions,
body.spyro-mode .topbar-actions,
body.sly-mode .topbar-actions{
  justify-self:end;
  margin-left:0;
}

/* Keep all links balanced around the exact center point. */
body.crash-mode .topbar nav a,
body.spyro-mode .topbar nav a,
body.sly-mode .topbar nav a{
  text-align:center;
  white-space:nowrap;
}

@media(max-width:1180px){
  body.crash-mode .topbar,
  body.spyro-mode .topbar,
  body.sly-mode .topbar{
    width:calc(100% - 20px);
    gap:10px;
  }

  body.crash-mode .topbar nav,
  body.spyro-mode .topbar nav,
  body.sly-mode .topbar nav{
    gap:7px;
  }

  body.crash-mode .topbar nav a,
  body.spyro-mode .topbar nav a,
  body.sly-mode .topbar nav a{
    padding-left:6px;
    padding-right:6px;
    font-size:9px;
  }
}

@media(max-width:900px){
  body.crash-mode .topbar,
  body.spyro-mode .topbar,
  body.sly-mode .topbar{
    display:flex;
    width:calc(100% - 14px);
  }

  body.crash-mode .topbar nav,
  body.spyro-mode .topbar nav,
  body.sly-mode .topbar nav{
    display:none;
  }

  body.crash-mode .topbar-actions,
  body.spyro-mode .topbar-actions,
  body.sly-mode .topbar-actions{
    margin-left:auto;
  }
}


/* ============================================================
   Sponsorship ticket contact center
   ============================================================ */
.sponsor-ticket-center{
  margin-top:18px;
  padding:22px;
  border-radius:26px;
}
.ticket-center-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:16px;
}
.ticket-center-head h3{margin:3px 0 5px;font-size:24px;letter-spacing:-.035em}
.ticket-center-head p{margin:0;color:var(--muted);font-size:12px}
.creator-ticket-shell{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  min-height:480px;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:rgba(5,7,16,.08);
}
.creator-ticket-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:10px;
  border-right:1px solid var(--line);
  max-height:640px;
  overflow:auto;
}
.creator-ticket-item{
  width:100%;
  display:grid;
  gap:7px;
  padding:13px;
  border:1px solid transparent;
  border-radius:15px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  text-align:left;
  cursor:pointer;
  font:inherit;
  transition:.18s ease;
}
.creator-ticket-item:hover{background:rgba(255,255,255,.065);transform:translateY(-1px)}
.creator-ticket-item.active{
  border-color:rgba(166,108,255,.24);
  background:linear-gradient(135deg,rgba(166,108,255,.12),rgba(92,225,230,.055));
}
.creator-ticket-item.has-unread{box-shadow:inset 3px 0 var(--cyan)}
.creator-ticket-item-top{display:flex;align-items:center;justify-content:space-between;gap:9px}
.creator-ticket-item b{font-size:12px}
.creator-ticket-item > span:not(.creator-ticket-item-top):not(.creator-ticket-meta){font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creator-ticket-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted)}
.creator-ticket-meta small:last-child{font-size:8px}
.ticket-unread-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(92,225,230,.7)}
.ticket-status{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  font-size:8px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.ticket-status-submitted{color:#b9d8ff;background:rgba(92,143,255,.08)}
.ticket-status-reviewing{color:#c9b5ff;background:rgba(166,108,255,.09)}
.ticket-status-waiting_creator{color:#ffe1a2;background:rgba(255,181,71,.09)}
.ticket-status-approved{color:#9df0c7;background:rgba(80,215,153,.09)}
.ticket-status-declined{color:#ff9eb0;background:rgba(255,95,118,.08)}
.ticket-status-closed{color:#aeb3c2;background:rgba(154,160,178,.08)}
.creator-ticket-conversation{
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008));
}
.ticket-conversation-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.ticket-creator-summary{display:flex;align-items:center;gap:11px;min-width:0}
.ticket-creator-summary img{width:46px;height:46px;border-radius:13px;object-fit:cover}
.ticket-creator-summary h4{margin:0 0 5px;font-size:18px}
.ticket-creator-summary > div > span:last-child{display:block;color:var(--muted);font-size:10px;max-width:620px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ticket-intake{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:12px 0;
}
.ticket-intake > div{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.ticket-intake span,.ticket-intake b{display:block}
.ticket-intake span{font-size:8px;color:var(--muted);letter-spacing:.10em;text-transform:uppercase;margin-bottom:4px}
.ticket-intake b{font-size:11px;overflow-wrap:anywhere}
.ticket-messages{
  flex:1;
  min-height:260px;
  max-height:390px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:8px 4px 12px;
}
.ticket-message{
  width:min(78%,650px);
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:rgba(255,255,255,.045);
}
.ticket-message.from-creator{align-self:flex-end;background:linear-gradient(135deg,rgba(166,108,255,.14),rgba(166,108,255,.06));border-color:rgba(166,108,255,.16)}
.ticket-message.from-admin{align-self:flex-start;background:linear-gradient(135deg,rgba(92,225,230,.12),rgba(92,225,230,.04));border-color:rgba(92,225,230,.15)}
.ticket-message-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.ticket-message-meta b{font-size:10px}
.ticket-message-meta span{font-size:8px;color:var(--muted)}
.ticket-message p{margin:0;font-size:12px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.ticket-reply-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:end;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.ticket-reply-form textarea{min-height:68px;max-height:160px;margin:0}
.ticket-closed-note,.ticket-empty{
  padding:14px;
  border:1px dashed rgba(255,255,255,.10);
  border-radius:13px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}
.ticket-empty-large{margin:auto;text-align:center;max-width:360px}
body.vibrant-dark .creator-ticket-item.active{border-color:rgba(56,239,255,.22);background:linear-gradient(135deg,rgba(169,85,255,.14),rgba(56,239,255,.055))}
body.halo-mode .creator-ticket-shell,
body.halo-mode .creator-ticket-item,
body.halo-mode .ticket-message,
body.halo-mode .ticket-intake > div,
body.star-citizen-mode .creator-ticket-shell,
body.star-citizen-mode .creator-ticket-item,
body.star-citizen-mode .ticket-message,
body.star-citizen-mode .ticket-intake > div{border-radius:0}
@media(max-width:900px){
  .creator-ticket-shell{grid-template-columns:1fr}
  .creator-ticket-list{border-right:0;border-bottom:1px solid var(--line);max-height:260px}
}
@media(max-width:620px){
  .ticket-center-head{flex-direction:column}
  .ticket-conversation-head{flex-direction:column}
  .ticket-intake{grid-template-columns:1fr}
  .ticket-message{width:92%}
  .ticket-reply-form{grid-template-columns:1fr}
}


/* ============================================================
   Ambassador live priority
   ============================================================ */
.stream-card.ambassador-live-card{
  position:relative;
  border-color:rgba(255,199,88,.24);
  box-shadow:
    0 20px 50px rgba(46,35,10,.08),
    inset 0 0 0 1px rgba(255,220,125,.025);
}

.stream-card.ambassador-live-card:hover{
  border-color:rgba(255,205,94,.48);
  box-shadow:
    0 24px 60px rgba(50,36,8,.12),
    0 0 32px rgba(255,200,80,.07);
}

.member-badge.ambassador-live-badge{
  color:#ffe59a;
  border-color:rgba(255,210,103,.30);
  background:linear-gradient(135deg,rgba(42,28,5,.82),rgba(86,55,9,.70));
  box-shadow:0 0 22px rgba(255,194,67,.10);
}

.stream-live-name{
  min-width:0;
}

.stream-live-name b{
  margin-bottom:2px;
}

.stream-live-name small{
  display:block;
  color:#c89e48;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.vibrant-dark .stream-card.ambassador-live-card{
  border-color:rgba(255,215,94,.27);
  box-shadow:
    0 20px 55px rgba(0,0,0,.28),
    0 0 28px rgba(255,201,74,.055);
}

body.vibrant-dark .member-badge.ambassador-live-badge{
  color:#ffe69d;
  border-color:rgba(255,218,108,.31);
  background:rgba(42,27,4,.80);
}

body.halo-mode .member-badge.ambassador-live-badge{
  color:#e8ffc5;
  border-color:rgba(202,255,130,.28);
  background:rgba(18,41,12,.82);
}

body.crash-mode .member-badge.ambassador-live-badge{
  color:#fff1a5;
  border-color:rgba(255,219,82,.32);
  background:rgba(92,44,9,.82);
}

body.spyro-mode .member-badge.ambassador-live-badge{
  color:#fff0a6;
  border-color:rgba(255,222,98,.34);
  background:rgba(70,34,90,.82);
}

body.sly-mode .member-badge.ambassador-live-badge{
  color:#bdefff;
  border-color:rgba(87,202,255,.31);
  background:rgba(4,25,50,.84);
}

body.star-citizen-mode .member-badge.ambassador-live-badge{
  color:#ffd58a;
  border-color:rgba(232,175,81,.30);
  background:rgba(33,25,12,.82);
}


/* ============================================================
   Upgraded LIVE PULSE: fun, more realistic ringworld-style orb
   ============================================================ */
.pulse-orbit{
  inset:42px 0 0;
  perspective:1200px;
}

.live-world{
  position:relative;
  width:410px;
  height:290px;
  display:grid;
  place-items:center;
  animation:liveWorldFloat 7.5s ease-in-out infinite;
  filter:drop-shadow(0 22px 44px rgba(12,16,32,.24));
}

.planet{
  position:relative;
  z-index:3;
  width:170px;
  height:170px;
  overflow:hidden;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 34% 27%,rgba(255,247,255,.92) 0 9%,rgba(245,223,255,.75) 10%,transparent 21%),
    radial-gradient(circle at 38% 34%,rgba(165,96,255,.30),transparent 46%),
    radial-gradient(circle at 58% 63%,rgba(65,38,122,.22),transparent 38%),
    linear-gradient(145deg,#68d2ff 0%,#5f80ff 18%,#6e4cff 44%,#201735 72%,#090c1a 100%);
  box-shadow:
    inset -22px -28px 36px rgba(0,0,0,.36),
    inset 16px 12px 26px rgba(255,255,255,.15),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 90px rgba(109,94,255,.46),
    0 14px 38px rgba(11,14,30,.42);
  transform-style:preserve-3d;
  animation:planetPulseEnhanced 4.2s ease-in-out infinite;
}

.planet:before,
.planet:after{
  content:'';
  position:absolute;
  inset:-22px;
  border-radius:50%;
  border:1px solid rgba(193,215,255,.20);
  animation:signalRingEnhanced 3.4s ease-out infinite;
}

.planet:after{
  animation-delay:1.7s;
}

.planet span{
  position:relative;
  z-index:8;
  font-size:13px;
  font-weight:900;
  letter-spacing:.28em;
  color:#f7fbff;
  text-shadow:
    0 0 12px rgba(255,255,255,.22),
    0 0 28px rgba(135,239,255,.22);
  animation:liveTextShimmer 3s ease-in-out infinite;
}

.planet-atmosphere,
.planet-clouds,
.planet-glint,
.planet-continent{
  position:absolute;
  pointer-events:none;
}

.planet-atmosphere{
  inset:-2px;
  z-index:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,rgba(255,255,255,.18),transparent 24%),
    radial-gradient(circle at 50% 50%,transparent 58%,rgba(142,218,255,.28) 69%,rgba(112,159,255,.16) 76%,transparent 84%);
  mix-blend-mode:screen;
  animation:atmosphereDrift 9s linear infinite;
}

.planet-continent{
  z-index:2;
  display:block;
  background:linear-gradient(145deg,rgba(172,255,186,.90),rgba(70,204,160,.92) 62%,rgba(20,111,103,.94));
  border-radius:53% 47% 50% 50% / 42% 58% 46% 54%;
  box-shadow:
    inset 0 -3px 7px rgba(2,28,36,.22),
    0 0 18px rgba(73,232,199,.10);
  filter:saturate(1.06);
}

.continent-a{
  width:60px;
  height:30px;
  left:30px;
  top:54px;
  transform:rotate(-12deg);
}
.continent-b{
  width:36px;
  height:20px;
  right:34px;
  top:70px;
  transform:rotate(18deg);
}
.continent-c{
  width:50px;
  height:24px;
  left:58px;
  bottom:40px;
  transform:rotate(14deg);
  opacity:.92;
}

.planet-clouds{
  inset:14px;
  z-index:4;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 28% 36%,rgba(255,255,255,.22) 0 12%,transparent 18%),
    radial-gradient(ellipse at 66% 42%,rgba(255,255,255,.18) 0 10%,transparent 18%),
    radial-gradient(ellipse at 48% 70%,rgba(255,255,255,.16) 0 10%,transparent 18%);
  mix-blend-mode:screen;
  filter:blur(4px);
  animation:cloudSpin 15s linear infinite;
}

.planet-glint{
  inset:0;
  z-index:5;
  border-radius:50%;
  background:
    linear-gradient(118deg,transparent 34%,rgba(255,255,255,.30) 46%,rgba(255,255,255,.12) 52%,transparent 61%);
  transform:translateX(-118%) rotate(7deg);
  animation:glintSweep 5.2s ease-in-out infinite;
}

.ringworld{
  position:absolute;
  left:50%;
  top:50%;
  width:292px;
  height:104px;
  border-radius:50%;
  pointer-events:none;
  transform-style:preserve-3d;
  animation:ringTilt 8s ease-in-out infinite;
}

.ring-back{
  z-index:1;
  transform:translate(-50%,-50%) rotate(-18deg);
  border-top:2px solid rgba(121,239,255,.24);
  border-left:2px solid rgba(103,162,255,.18);
  border-right:2px solid rgba(90,128,255,.16);
  border-bottom:2px solid rgba(58,72,122,.10);
  box-shadow:
    0 0 32px rgba(105,204,255,.10),
    inset 0 0 22px rgba(130,177,255,.06);
  opacity:.95;
}

.ring-front{
  z-index:6;
  width:302px;
  height:110px;
  transform:translate(-50%,-50%) rotate(-18deg);
  border-top:2px solid rgba(170,243,255,.40);
  border-bottom:4px solid rgba(214,247,255,.68);
  border-left:3px solid rgba(116,171,255,.28);
  border-right:3px solid rgba(140,199,255,.30);
  box-shadow:
    0 0 35px rgba(130,227,255,.18),
    inset 0 0 28px rgba(255,255,255,.10);
  clip-path:inset(49% -20% -10% -20%);
  opacity:.98;
}

.ring-front:before,
.ring-back:before{
  content:'';
  position:absolute;
  inset:11px 13px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
}

.micro-moon{
  position:absolute;
  z-index:2;
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#f5ffff,#9bd9ff 40%,#5775d2 80%,#1b2549);
  box-shadow:0 0 18px rgba(179,230,255,.42);
}

.moon-a{
  right:54px;
  top:70px;
  animation:moonOrbitA 7.5s linear infinite;
}
.moon-b{
  left:70px;
  bottom:62px;
  width:8px;
  height:8px;
  opacity:.82;
  animation:moonOrbitB 9s linear infinite;
}

.orbital-spark{
  position:absolute;
  z-index:7;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff6cc;
  box-shadow:0 0 16px rgba(255,247,204,.8);
}

.spark-a{
  right:90px;
  top:112px;
  animation:sparkTravelA 4.8s linear infinite;
}
.spark-b{
  left:92px;
  top:120px;
  width:4px;
  height:4px;
  background:#9cf4ff;
  box-shadow:0 0 14px rgba(156,244,255,.74);
  animation:sparkTravelB 6.2s linear infinite;
}

.satellite{
  z-index:8;
}

.floating-chip{
  z-index:9;
}

@keyframes liveWorldFloat{
  0%,100%{transform:translateY(0) rotateX(0deg)}
  50%{transform:translateY(-12px) rotateX(2deg)}
}

@keyframes planetPulseEnhanced{
  0%,100%{
    transform:translateZ(0) scale(1);
    box-shadow:
      inset -22px -28px 36px rgba(0,0,0,.36),
      inset 16px 12px 26px rgba(255,255,255,.15),
      0 0 0 1px rgba(255,255,255,.06),
      0 0 78px rgba(109,94,255,.42),
      0 14px 38px rgba(11,14,30,.42);
  }
  50%{
    transform:translateZ(0) scale(1.038);
    box-shadow:
      inset -24px -28px 38px rgba(0,0,0,.38),
      inset 18px 13px 28px rgba(255,255,255,.18),
      0 0 0 1px rgba(255,255,255,.08),
      0 0 112px rgba(108,185,255,.52),
      0 18px 52px rgba(11,14,30,.50);
  }
}

@keyframes signalRingEnhanced{
  0%{opacity:.6;transform:scale(.92)}
  70%{opacity:.08;transform:scale(1.34)}
  100%{opacity:0;transform:scale(1.46)}
}

@keyframes liveTextShimmer{
  0%,100%{opacity:1;letter-spacing:.28em}
  50%{opacity:.92;letter-spacing:.31em}
}

@keyframes cloudSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes atmosphereDrift{
  0%,100%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.018)}
}

@keyframes glintSweep{
  0%,15%{transform:translateX(-118%) rotate(7deg);opacity:0}
  28%{opacity:1}
  52%{transform:translateX(118%) rotate(7deg);opacity:.55}
  100%{transform:translateX(118%) rotate(7deg);opacity:0}
}

@keyframes ringTilt{
  0%,100%{transform:translate(-50%,-50%) rotate(-18deg) scale(1)}
  50%{transform:translate(-50%,-50%) rotate(-15deg) scale(1.015)}
}

@keyframes moonOrbitA{
  0%{transform:translate(0,0) scale(1)}
  25%{transform:translate(18px,-10px) scale(1.06)}
  50%{transform:translate(6px,-20px) scale(.92)}
  75%{transform:translate(-14px,-8px) scale(1.02)}
  100%{transform:translate(0,0) scale(1)}
}

@keyframes moonOrbitB{
  0%{transform:translate(0,0)}
  33%{transform:translate(-10px,8px)}
  66%{transform:translate(8px,-6px)}
  100%{transform:translate(0,0)}
}

@keyframes sparkTravelA{
  0%{transform:translate(-18px,-8px) scale(.8);opacity:0}
  14%{opacity:1}
  65%{transform:translate(22px,8px) scale(1.1);opacity:.85}
  100%{transform:translate(42px,12px) scale(.6);opacity:0}
}

@keyframes sparkTravelB{
  0%{transform:translate(26px,-8px) scale(.7);opacity:0}
  18%{opacity:1}
  64%{transform:translate(-24px,10px) scale(1);opacity:.8}
  100%{transform:translate(-44px,14px) scale(.6);opacity:0}
}

body.vibrant-dark .planet{
  background:
    radial-gradient(circle at 34% 27%,rgba(255,250,255,.96) 0 10%,rgba(255,226,255,.80) 11%,transparent 22%),
    radial-gradient(circle at 34% 48%,rgba(117,245,255,.22),transparent 40%),
    radial-gradient(circle at 58% 63%,rgba(117,49,179,.25),transparent 38%),
    linear-gradient(145deg,#28dddf 0%,#4b8dff 20%,#8b56ff 48%,#281952 74%,#090d1d 100%);
}

body.halo-mode .planet,
body.star-citizen-mode .planet,
body.crash-mode .planet,
body.spyro-mode .planet,
body.sly-mode .planet{
  overflow:visible;
}

@media(max-width:900px){
  .live-world{
    width:320px;
    height:240px;
  }

  .planet{
    width:142px;
    height:142px;
  }

  .ring-back,
  .ring-front{
    width:246px;
    height:88px;
  }

  .ring-front{width:254px;height:92px}
  .moon-a{right:38px;top:62px}
  .moon-b{left:58px;bottom:54px}
}

@media(prefers-reduced-motion:reduce){
  .live-world,
  .planet,
  .planet:before,
  .planet:after,
  .planet-clouds,
  .planet-glint,
  .ringworld,
  .micro-moon,
  .orbital-spark{
    animation:none!important;
  }
}


/* ============================================================
   LIVE PULSE refinement pass: cleaner, slimmer, less chunky
   ============================================================ */
.live-world{
  width:380px;
  height:270px;
  filter:drop-shadow(0 14px 28px rgba(10,14,28,.18));
}

.planet{
  width:156px;
  height:156px;
  background:
    radial-gradient(circle at 33% 24%,rgba(255,252,255,.88) 0 8%,rgba(255,233,255,.55) 9%,transparent 19%),
    radial-gradient(circle at 36% 30%,rgba(121,222,255,.14),transparent 34%),
    radial-gradient(circle at 62% 68%,rgba(39,36,86,.18),transparent 34%),
    linear-gradient(148deg,#64d4ff 0%,#5e92ff 24%,#745aff 50%,#251a49 75%,#0a0d1b 100%);
  box-shadow:
    inset -18px -22px 28px rgba(0,0,0,.26),
    inset 10px 10px 18px rgba(255,255,255,.10),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 56px rgba(96,116,255,.28),
    0 10px 28px rgba(8,11,24,.28);
  animation:planetPulsePolished 5.2s ease-in-out infinite;
}

.planet:before,
.planet:after{
  inset:-18px;
  border-width:1px;
  border-color:rgba(190,214,255,.15);
  animation:signalRingPolished 3.8s ease-out infinite;
}

.planet:after{
  animation-delay:1.9s;
}

.planet span{
  font-size:12px;
  letter-spacing:.24em;
  text-shadow:
    0 0 10px rgba(255,255,255,.18),
    0 0 18px rgba(135,239,255,.12);
}

.planet-atmosphere{
  inset:-1px;
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.12),transparent 22%),
    radial-gradient(circle at 50% 50%,transparent 62%,rgba(142,218,255,.18) 71%,rgba(112,159,255,.10) 77%,transparent 84%);
}

.planet-continent{
  background:linear-gradient(145deg,rgba(155,255,183,.76),rgba(68,198,159,.82) 64%,rgba(17,102,98,.90));
  box-shadow:
    inset 0 -2px 5px rgba(2,28,36,.16),
    0 0 12px rgba(73,232,199,.06);
}

.continent-a{
  width:52px;
  height:25px;
  left:31px;
  top:57px;
}

.continent-b{
  width:31px;
  height:17px;
  right:36px;
  top:73px;
}

.continent-c{
  width:42px;
  height:20px;
  left:61px;
  bottom:42px;
}

.planet-clouds{
  inset:16px;
  filter:blur(3px);
  opacity:.82;
}

.planet-glint{
  background:
    linear-gradient(118deg,transparent 37%,rgba(255,255,255,.20) 47%,rgba(255,255,255,.08) 53%,transparent 60%);
  animation:glintSweepPolished 7s ease-in-out infinite;
}

.ringworld{
  width:268px;
  height:92px;
}

.ring-back{
  border-top:1px solid rgba(121,239,255,.18);
  border-left:1px solid rgba(103,162,255,.12);
  border-right:1px solid rgba(90,128,255,.10);
  border-bottom:1px solid rgba(58,72,122,.06);
  box-shadow:
    0 0 18px rgba(105,204,255,.05),
    inset 0 0 12px rgba(130,177,255,.04);
}

.ring-front{
  width:276px;
  height:96px;
  border-top:1px solid rgba(170,243,255,.26);
  border-bottom:2px solid rgba(214,247,255,.46);
  border-left:2px solid rgba(116,171,255,.16);
  border-right:2px solid rgba(140,199,255,.16);
  box-shadow:
    0 0 16px rgba(130,227,255,.10),
    inset 0 0 16px rgba(255,255,255,.05);
  clip-path:inset(49% -20% -10% -20%);
}

.ring-front:before,
.ring-back:before{
  inset:10px 12px;
  border-color:rgba(255,255,255,.06);
}

.micro-moon{
  width:9px;
  height:9px;
  box-shadow:0 0 10px rgba(179,230,255,.24);
}

.moon-a{
  right:58px;
  top:77px;
}

.moon-b{
  left:73px;
  bottom:64px;
  width:6px;
  height:6px;
  opacity:.68;
}

.orbital-spark{
  opacity:.7;
}

.spark-a{
  right:98px;
  top:116px;
}

.spark-b{
  left:98px;
  top:122px;
  opacity:.56;
}

.satellite{
  width:12px;
  height:12px;
  box-shadow:0 0 14px currentColor;
}

.s1{--tx:133px;--ty:-63px;transform:translate(133px,-63px)}
.s2{--tx:-138px;--ty:74px;transform:translate(-138px,74px)}
.s3{--tx:14px;--ty:116px;transform:translate(14px,116px)}

@keyframes planetPulsePolished{
  0%,100%{
    transform:scale(1);
    box-shadow:
      inset -18px -22px 28px rgba(0,0,0,.26),
      inset 10px 10px 18px rgba(255,255,255,.10),
      0 0 0 1px rgba(255,255,255,.05),
      0 0 50px rgba(96,116,255,.26),
      0 10px 28px rgba(8,11,24,.28);
  }
  50%{
    transform:scale(1.022);
    box-shadow:
      inset -19px -23px 30px rgba(0,0,0,.28),
      inset 11px 11px 18px rgba(255,255,255,.12),
      0 0 0 1px rgba(255,255,255,.06),
      0 0 70px rgba(112,178,255,.34),
      0 14px 34px rgba(8,11,24,.32);
  }
}

@keyframes signalRingPolished{
  0%{opacity:.42;transform:scale(.95)}
  72%{opacity:.04;transform:scale(1.26)}
  100%{opacity:0;transform:scale(1.34)}
}

@keyframes glintSweepPolished{
  0%,16%{transform:translateX(-118%) rotate(7deg);opacity:0}
  26%{opacity:.72}
  52%{transform:translateX(118%) rotate(7deg);opacity:.34}
  100%{transform:translateX(118%) rotate(7deg);opacity:0}
}

@media(max-width:900px){
  .live-world{
    width:300px;
    height:225px;
  }

  .planet{
    width:132px;
    height:132px;
  }

  .ring-back{
    width:222px;
    height:78px;
  }

  .ring-front{
    width:230px;
    height:82px;
  }

  .moon-a{right:43px;top:65px}
  .moon-b{left:60px;bottom:56px}
}

body.vibrant-dark .planet{
  background:
    radial-gradient(circle at 33% 24%,rgba(255,252,255,.9) 0 8%,rgba(255,233,255,.62) 9%,transparent 19%),
    radial-gradient(circle at 36% 30%,rgba(69,245,255,.16),transparent 34%),
    radial-gradient(circle at 62% 68%,rgba(77,31,143,.18),transparent 34%),
    linear-gradient(148deg,#24dddd 0%,#4f8bff 24%,#9259ff 50%,#281a52 75%,#090d1d 100%);
}


/* ============================================================
   Full rework: Halo Array-inspired LIVE pulse
   ============================================================ */
.halo-array-world{
  position:relative;
  width:410px;
  height:290px;
  display:grid;
  place-items:center;
  isolation:isolate;
  filter:drop-shadow(0 18px 38px rgba(9,13,26,.22));
  animation:arrayWorldFloat 8.2s ease-in-out infinite;
}

.array-aura{
  position:absolute;
  inset:52px 78px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(102,243,255,.12) 0 24%, rgba(77,138,255,.08) 34%, transparent 68%);
  filter:blur(14px);
  z-index:0;
  animation:arrayAuraPulse 5.5s ease-in-out infinite;
}

.array-ring{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-18deg);
  border-radius:50%;
  pointer-events:none;
}

.ring-shadow{
  z-index:1;
  width:318px;
  height:114px;
  border:1px solid rgba(112,154,255,.10);
  box-shadow:
    0 0 18px rgba(104,164,255,.05),
    inset 0 0 18px rgba(255,255,255,.03);
  opacity:.9;
  animation:arrayRingDrift 10s ease-in-out infinite;
}

.ring-body{
  z-index:2;
  width:308px;
  height:106px;
  overflow:hidden;
  border:
    2px solid rgba(190,238,255,.26);
  box-shadow:
    0 0 24px rgba(124,214,255,.12),
    inset 0 0 24px rgba(255,255,255,.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  animation:arrayRingDrift 10s ease-in-out infinite;
}

.array-inner-surface{
  position:absolute;
  inset:18px 12px;
  border-radius:50%;
  background:
    repeating-linear-gradient(90deg,
      rgba(116,86,170,.20) 0 12px,
      rgba(116,86,170,.16) 12px 18px,
      rgba(84,61,132,.18) 18px 22px),
    linear-gradient(180deg,
      rgba(19,54,61,.0) 0 28%,
      rgba(108,255,181,.30) 30% 34%,
      rgba(168,255,190,.72) 36% 42%,
      rgba(67,176,128,.82) 42% 50%,
      rgba(63,154,118,.88) 50% 56%,
      rgba(82,105,176,.55) 57% 60%,
      rgba(79,95,151,.38) 60% 65%,
      rgba(18,16,42,.18) 66% 100%);
  box-shadow:
    inset 0 5px 12px rgba(255,255,255,.06),
    inset 0 -8px 14px rgba(0,0,0,.18);
  opacity:.98;
  animation:innerTerrainShift 12s linear infinite;
}

.array-grid-lines{
  position:absolute;
  inset:13px 10px;
  border-radius:50%;
  background:
    repeating-linear-gradient(90deg, transparent 0 17px, rgba(255,255,255,.065) 17px 18px),
    linear-gradient(180deg, transparent 0 34%, rgba(255,255,255,.06) 36% 37%, transparent 39% 61%, rgba(255,255,255,.05) 63% 64%, transparent 66% 100%);
  mix-blend-mode:screen;
  opacity:.6;
}

.array-light-sweep{
  position:absolute;
  inset:6px;
  border-radius:50%;
  background:linear-gradient(112deg, transparent 35%, rgba(255,255,255,.26) 48%, rgba(255,255,255,.08) 53%, transparent 60%);
  transform:translateX(-130%);
  animation:arraySweep 6.4s ease-in-out infinite;
}

.ring-front{
  z-index:6;
  width:316px;
  height:112px;
  border-top:2px solid rgba(180,241,255,.26);
  border-bottom:3px solid rgba(221,249,255,.55);
  border-left:2px solid rgba(126,181,255,.16);
  border-right:2px solid rgba(126,181,255,.16);
  clip-path:inset(49% -10% -10% -10%);
  box-shadow:
    0 0 22px rgba(131,220,255,.14),
    inset 0 0 18px rgba(255,255,255,.05);
  animation:arrayRingDrift 10s ease-in-out infinite;
}

.halo-core{
  z-index:4;
  width:118px;
  height:118px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.84) 0 8%, rgba(239,248,255,.38) 9%, transparent 18%),
    radial-gradient(circle at 54% 62%, rgba(65,188,255,.10), transparent 38%),
    linear-gradient(145deg, #a5f0ff 0%, #7ec5ff 18%, #5b6cff 50%, #19204d 76%, #0a0f20 100%);
  box-shadow:
    inset -15px -18px 26px rgba(0,0,0,.28),
    inset 10px 10px 16px rgba(255,255,255,.11),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 42px rgba(101,161,255,.24),
    0 8px 22px rgba(7,10,22,.24);
  animation:haloCorePulse 5.8s ease-in-out infinite;
}

.halo-core .planet-atmosphere{
  inset:-1px;
  border-radius:50%;
  background:
    radial-gradient(circle at 33% 21%, rgba(255,255,255,.12), transparent 21%),
    radial-gradient(circle at 50% 50%, transparent 62%, rgba(138,215,255,.22) 71%, rgba(103,160,255,.12) 78%, transparent 85%);
  mix-blend-mode:screen;
}

.halo-core .planet-clouds{
  inset:13px;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 31% 34%, rgba(255,255,255,.18) 0 11%, transparent 17%),
    radial-gradient(ellipse at 66% 44%, rgba(255,255,255,.14) 0 9%, transparent 15%),
    radial-gradient(ellipse at 51% 70%, rgba(255,255,255,.12) 0 8%, transparent 14%);
  filter:blur(3px);
  opacity:.84;
  animation:cloudSpin 15s linear infinite;
}

.halo-core .planet-glint{
  inset:0;
  border-radius:50%;
  background:linear-gradient(118deg, transparent 38%, rgba(255,255,255,.18) 48%, rgba(255,255,255,.06) 53%, transparent 59%);
  transform:translateX(-120%) rotate(7deg);
  animation:glintSweepPolished 6.8s ease-in-out infinite;
}

.core-latitude{
  position:absolute;
  left:50%;
  border-radius:50%;
  border:1px solid rgba(207,245,255,.16);
  pointer-events:none;
  transform:translateX(-50%) rotate(-16deg);
  mix-blend-mode:screen;
}

.core-lat-a{
  bottom:33px;
  width:104px;
  height:24px;
}

.core-lat-b{
  top:30px;
  width:78px;
  height:16px;
  opacity:.55;
}

.halo-core span{
  position:relative;
  z-index:5;
  font-size:12px;
  font-weight:900;
  letter-spacing:.28em;
  color:#f8fdff;
  text-shadow:
    0 0 10px rgba(255,255,255,.16),
    0 0 16px rgba(141,240,255,.14);
}

.array-node{
  position:absolute;
  z-index:7;
  width:11px;
  height:11px;
  border-radius:3px;
  background:linear-gradient(145deg, #d9f7ff, #7edaff 55%, #3877d7);
  box-shadow:0 0 14px rgba(129,224,255,.28);
  transform:rotate(45deg);
  animation:nodePulse 4.4s ease-in-out infinite;
}

.node-a{ right:74px; top:80px; }
.node-b{ left:82px; bottom:74px; animation-delay:1.2s; }
.node-c{ right:108px; bottom:70px; width:8px; height:8px; opacity:.8; animation-delay:.6s; }

.array-shard{
  position:absolute;
  z-index:7;
  width:18px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(162,240,255,.9), rgba(255,255,255,0));
  opacity:.62;
}

.shard-a{
  left:76px;
  top:98px;
  transform:rotate(-20deg);
  animation:shardDriftA 5.2s ease-in-out infinite;
}

.shard-b{
  right:84px;
  bottom:92px;
  transform:rotate(14deg);
  animation:shardDriftB 6.2s ease-in-out infinite;
}

.satellite{
  z-index:8;
}

@keyframes arrayWorldFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

@keyframes arrayAuraPulse{
  0%,100%{opacity:.75; transform:scale(1)}
  50%{opacity:1; transform:scale(1.04)}
}

@keyframes arrayRingDrift{
  0%,100%{transform:translate(-50%,-50%) rotate(-18deg) scale(1)}
  50%{transform:translate(-50%,-50%) rotate(-16deg) scale(1.01)}
}

@keyframes innerTerrainShift{
  from{background-position:0 0, 0 0}
  to{background-position:28px 0, 0 0}
}

@keyframes arraySweep{
  0%,18%{transform:translateX(-130%); opacity:0}
  28%{opacity:.72}
  54%{transform:translateX(125%); opacity:.35}
  100%{transform:translateX(125%); opacity:0}
}

@keyframes haloCorePulse{
  0%,100%{
    transform:scale(1);
    box-shadow:
      inset -15px -18px 26px rgba(0,0,0,.28),
      inset 10px 10px 16px rgba(255,255,255,.11),
      0 0 0 1px rgba(255,255,255,.06),
      0 0 42px rgba(101,161,255,.24),
      0 8px 22px rgba(7,10,22,.24);
  }
  50%{
    transform:scale(1.022);
    box-shadow:
      inset -16px -18px 27px rgba(0,0,0,.30),
      inset 11px 11px 17px rgba(255,255,255,.12),
      0 0 0 1px rgba(255,255,255,.07),
      0 0 56px rgba(113,195,255,.28),
      0 10px 26px rgba(7,10,22,.26);
  }
}

@keyframes nodePulse{
  0%,100%{opacity:.78; transform:rotate(45deg) scale(1)}
  50%{opacity:1; transform:rotate(45deg) scale(1.12)}
}

@keyframes shardDriftA{
  0%,100%{transform:translateX(0) rotate(-20deg); opacity:.36}
  50%{transform:translateX(12px) rotate(-20deg); opacity:.7}
}

@keyframes shardDriftB{
  0%,100%{transform:translateX(0) rotate(14deg); opacity:.32}
  50%{transform:translateX(-10px) rotate(14deg); opacity:.66}
}

@media(max-width:900px){
  .halo-array-world{
    width:320px;
    height:235px;
  }

  .ring-shadow{
    width:254px;
    height:92px;
  }

  .ring-body{
    width:246px;
    height:84px;
  }

  .ring-front{
    width:252px;
    height:90px;
  }

  .halo-core{
    width:102px;
    height:102px;
  }

  .node-a{ right:52px; top:69px; }
  .node-b{ left:60px; bottom:59px; }
  .node-c{ right:84px; bottom:58px; }
}

@media(prefers-reduced-motion:reduce){
  .halo-array-world,
  .array-aura,
  .array-ring,
  .array-inner-surface,
  .array-light-sweep,
  .halo-core,
  .halo-core .planet-clouds,
  .halo-core .planet-glint,
  .array-node,
  .array-shard{
    animation:none!important;
  }
}


/* ============================================================
   Ticket sender identity
   ============================================================ */
.ticket-message-meta{
  align-items:flex-start;
}

.ticket-sender{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.ticket-sender-avatar{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
  font-size:9px;
  font-weight:900;
}

.ticket-sender > div{
  min-width:0;
}

.ticket-sender b{
  display:block;
  margin-top:3px;
  font-size:11px;
  line-height:1.1;
}

.ticket-role-badge{
  display:inline-flex;
  width:max-content;
  padding:3px 6px;
  border-radius:999px;
  font-size:6px;
  font-weight:900;
  letter-spacing:.12em;
}

.ticket-role-badge.is-admin{
  color:#9ff5f6;
  border:1px solid rgba(92,225,230,.18);
  background:rgba(92,225,230,.08);
}

.ticket-role-badge.is-streamer{
  color:#d8c1ff;
  border:1px solid rgba(166,108,255,.18);
  background:rgba(166,108,255,.08);
}

.ticket-reply-form{
  display:block;
}

.ticket-reply-identity{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  color:var(--muted);
  font-size:9px;
}

.ticket-reply-identity b{
  color:var(--text);
  font-size:10px;
}

.ticket-reply-composer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:end;
}

@media(max-width:620px){
  .ticket-reply-composer{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   LIVE PULSE rework: enlarged StreamSphere logo orb
   Mirrors the top-left brand mark instead of a separate planet.
   ============================================================ */
.live-logo-pulse{
  inset:50px 0 0;
  display:grid;
  place-items:center;
  perspective:none;
}

.live-logo-stage{
  position:relative;
  width:360px;
  height:300px;
  display:grid;
  place-items:center;
  isolation:isolate;
  animation:liveLogoStageFloat 6.8s ease-in-out infinite;
}

.hero-brand-orb{
  --brand-a:#a955ff;
  --brand-b:#38efff;
  --brand-c:#ff4fcf;
  --brand-d:#73ffb8;

  position:relative;
  z-index:5;
  width:172px;
  height:172px;
  flex:0 0 172px;
  border-radius:50%;
  cursor:pointer;
  overflow:visible;
  background:
    radial-gradient(circle at 33% 25%,rgba(255,255,255,.62),transparent 12%),
    linear-gradient(135deg,var(--brand-a),var(--brand-b),var(--brand-c),var(--brand-d),var(--brand-a));
  background-size:320% 320%;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,.28),
    inset -22px -28px 40px rgba(21,9,45,.18),
    0 0 68px color-mix(in srgb,var(--brand-a) 30%,transparent),
    0 24px 52px rgba(0,0,0,.22);
  animation:
    streamSphereColorShift 9s ease-in-out infinite,
    heroLogoBreath 4.8s ease-in-out infinite;
  transform-origin:center;
  will-change:transform,filter,background-position;
}

.hero-brand-orb:before{
  inset:17px;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.30),transparent 17%),
    radial-gradient(circle at 65% 72%,rgba(0,0,0,.18),transparent 44%);
}

.hero-brand-orb .brand-core-mark{
  z-index:6;
  font-size:30px;
  font-weight:950;
  letter-spacing:.22em;
  translate:3px 0;
  text-shadow:
    0 3px 10px rgba(9,4,24,.38),
    0 0 24px rgba(255,255,255,.09);
}

.hero-brand-orb .brand-orbit{
  z-index:4;
  width:228px;
  height:84px;
  border-width:3px;
  border-left-color:rgba(255,255,255,.14);
  border-right-color:rgba(255,255,255,.90);
  box-shadow:
    0 0 20px rgba(255,255,255,.10),
    0 0 40px color-mix(in srgb,var(--brand-b) 12%,transparent);
  animation:heroBrandOrbitSpin 7.2s linear infinite;
}

.hero-brand-orb .brand-signal-dot{
  z-index:7;
  width:22px;
  height:22px;
  right:-21px;
  top:30px;
  border-width:2px;
  box-shadow:
    0 0 0 8px color-mix(in srgb,var(--brand-b) 12%,transparent),
    0 0 28px color-mix(in srgb,var(--brand-b) 68%,transparent);
  animation:
    streamSphereSignal 2.2s ease-in-out infinite,
    heroSignalHover 5.4s ease-in-out infinite;
}

.hero-brand-orb .brand-play-mark{
  z-index:7;
  left:37px;
  bottom:28px;
  border-top-width:12px;
  border-bottom-width:12px;
  border-left-width:20px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.24));
  animation:streamSpherePlayPulse 3.2s ease-in-out infinite;
}

.live-logo-echo{
  position:absolute;
  left:50%;
  top:50%;
  z-index:1;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
}

.echo-one{
  width:238px;
  height:238px;
  border:1px solid rgba(158,185,255,.10);
  box-shadow:0 0 40px rgba(115,129,255,.05);
  animation:liveLogoEchoOne 4.8s ease-out infinite;
}

.echo-two{
  width:292px;
  height:292px;
  border:1px solid rgba(133,232,255,.07);
  animation:liveLogoEchoTwo 4.8s ease-out infinite 1.4s;
}

.live-logo-status{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(8,10,18,.40);
  backdrop-filter:blur(10px);
  color:rgba(255,255,255,.72);
  font-size:8px;
  font-weight:850;
  letter-spacing:.17em;
}

.live-logo-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
  animation:streamSphereSignal 2.2s ease-in-out infinite;
}

.hero-brand-orb:hover{
  animation-duration:7s,3.4s;
}

.hero-brand-orb:hover .brand-orbit{
  animation-duration:4.6s;
}

.hero-brand-orb:focus-visible{
  outline:2px solid rgba(117,232,255,.68);
  outline-offset:10px;
}

/* Match the header logo's universe in every site mode. */
body.vibrant-dark .hero-brand-orb{
  --brand-a:#9848ff;
  --brand-b:#2beeff;
  --brand-c:#ff49cc;
  --brand-d:#6affae;
}

body.halo-mode .hero-brand-orb{
  --brand-a:#597232;
  --brand-b:#91c75a;
  --brand-c:#6ca852;
  --brand-d:#b9e477;
}

body.crash-mode .hero-brand-orb{
  --brand-a:#ffad35;
  --brand-b:#ff632d;
  --brand-c:#8e43d7;
  --brand-d:#32ddd0;
}

body.spyro-mode .hero-brand-orb{
  --brand-a:#b65bff;
  --brand-b:#7140c8;
  --brand-c:#f2b946;
  --brand-d:#65e6e9;
}

body.sly-mode .hero-brand-orb{
  --brand-a:#336dc5;
  --brand-b:#55d6ff;
  --brand-c:#584fae;
  --brand-d:#79c9ff;
}

body.star-citizen-mode .hero-brand-orb{
  --brand-a:#164f66;
  --brand-b:#4ad0e6;
  --brand-c:#d6a75e;
  --brand-d:#66e3ef;
}

/* Prevent old planet-specific theme rules from affecting the new hero logo. */
body.halo-mode .hero-brand-orb,
body.crash-mode .hero-brand-orb,
body.spyro-mode .hero-brand-orb,
body.sly-mode .hero-brand-orb,
body.star-citizen-mode .hero-brand-orb{
  overflow:visible;
  border-radius:50%;
}

@keyframes liveLogoStageFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

@keyframes heroLogoBreath{
  0%,100%{transform:scale(1) rotate(-.4deg)}
  50%{transform:scale(1.035) rotate(.5deg)}
}

@keyframes heroBrandOrbitSpin{
  from{transform:translate(-50%,-50%) rotate(-31deg)}
  to{transform:translate(-50%,-50%) rotate(329deg)}
}

@keyframes heroSignalHover{
  0%,100%{translate:0 0}
  50%{translate:2px -2px}
}

@keyframes liveLogoEchoOne{
  0%{opacity:.55;transform:translate(-50%,-50%) scale(.88)}
  70%{opacity:.06;transform:translate(-50%,-50%) scale(1.14)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.22)}
}

@keyframes liveLogoEchoTwo{
  0%{opacity:.30;transform:translate(-50%,-50%) scale(.90)}
  72%{opacity:.035;transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}
}

@media(max-width:900px){
  .live-logo-stage{
    width:300px;
    height:250px;
  }

  .hero-brand-orb{
    width:142px;
    height:142px;
    flex-basis:142px;
  }

  .hero-brand-orb:before{inset:14px}

  .hero-brand-orb .brand-core-mark{
    font-size:24px;
    letter-spacing:.18em;
    translate:2px 0;
  }

  .hero-brand-orb .brand-orbit{
    width:190px;
    height:70px;
    border-width:2.5px;
  }

  .hero-brand-orb .brand-signal-dot{
    width:18px;
    height:18px;
    right:-18px;
    top:25px;
  }

  .hero-brand-orb .brand-play-mark{
    left:31px;
    bottom:24px;
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:17px;
  }

  .echo-one{width:202px;height:202px}
  .echo-two{width:246px;height:246px}
}

@media(prefers-reduced-motion:reduce){
  .live-logo-stage,
  .hero-brand-orb,
  .hero-brand-orb .brand-orbit,
  .hero-brand-orb .brand-signal-dot,
  .hero-brand-orb .brand-play-mark,
  .live-logo-echo,
  .live-logo-status i{
    animation:none!important;
  }
}


/* ============================================================
   Collab discovery roster
   ============================================================ */
.collab-section{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:54px;
  align-items:start;
}

.collab-compose{
  position:sticky;
  top:112px;
}

.collab-discovery{
  min-width:0;
}

.collab-roster-head,
.collab-requests-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.collab-roster-head{
  margin-bottom:12px;
}

.collab-roster-head h3{
  margin:4px 0 0;
  font-size:22px;
  letter-spacing:-.03em;
}

.collab-count{
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font-size:9px;
  font-weight:800;
}

.collab-creator-roster{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:26px;
}

.collab-person{
  padding:14px;
  border-radius:18px;
  min-width:0;
}

.collab-person-main{
  display:flex;
  align-items:center;
  gap:10px;
}

.collab-person-avatar-wrap,
.collab-post-avatar-wrap{
  position:relative;
  flex:0 0 auto;
}

.collab-person-avatar{
  width:42px;
  height:42px;
  display:block;
  border-radius:13px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
}

.collab-post-avatar-wrap img{
  width:38px;
  height:38px;
  display:block;
  border-radius:50%;
  object-fit:cover;
}

.collab-looking-dot{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#70efaa;
  border:2px solid rgba(12,14,24,.92);
  box-shadow:0 0 10px rgba(112,239,170,.55);
  animation:collabLookingPulse 2.6s ease-in-out infinite;
}

.collab-person-copy{
  min-width:0;
  flex:1;
}

.collab-person-name{
  min-width:0;
}

.collab-person-name b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

.collab-person-name span,
.collab-request-author-line span{
  display:inline-flex;
  margin-top:4px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(112,239,170,.075);
  border:1px solid rgba(112,239,170,.15);
  color:#a8f6c8;
  font-size:6px;
  font-weight:900;
  letter-spacing:.10em;
}

.collab-person-copy small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:8px;
}

.collab-open-count{
  padding:4px 7px;
  border-radius:999px;
  background:rgba(166,108,255,.08);
  border:1px solid rgba(166,108,255,.14);
  color:#d7c0ff;
  font-size:7px;
  font-weight:850;
}

.collab-person-idea{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
}

.collab-person-idea span{
  display:block;
  color:var(--muted);
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.collab-person-idea b{
  display:block;
  margin-top:4px;
  font-size:10px;
  line-height:1.35;
}

.collab-person-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}

.collab-person-tags span{
  padding:4px 6px;
  border-radius:999px;
  background:rgba(92,225,230,.06);
  border:1px solid rgba(92,225,230,.12);
  color:#b7f6f7;
  font-size:7px;
}

.collab-person-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}

.collab-person-actions .btn{
  padding:7px 9px;
  font-size:8px;
}

.collab-requests-head{
  margin:0 0 10px;
  padding-top:4px;
}

.collab-request-author-line{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}

.collab-request-author-line span{
  margin-top:0;
}

.collab-request-card{
  scroll-margin-top:130px;
}

.collab-request-focus{
  animation:collabRequestFocus 1.8s ease-out;
}

@keyframes collabLookingPulse{
  0%,100%{transform:scale(1);opacity:.88}
  50%{transform:scale(1.18);opacity:1}
}

@keyframes collabRequestFocus{
  0%{box-shadow:0 0 0 0 rgba(112,239,170,.0)}
  22%{box-shadow:0 0 0 3px rgba(112,239,170,.18),0 0 32px rgba(112,239,170,.08)}
  100%{box-shadow:0 0 0 0 rgba(112,239,170,.0)}
}

@media(max-width:980px){
  .collab-section{
    grid-template-columns:1fr;
    gap:34px;
  }

  .collab-compose{
    position:static;
  }
}

@media(max-width:650px){
  .collab-creator-roster{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .collab-looking-dot,
  .collab-request-focus{
    animation:none!important;
  }
}


/* ============================================================
   Collab Board 2.0: named responses + private creator chats
   ============================================================ */
.collab-response-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:14px;
}

.collab-response-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  font:inherit;
  cursor:pointer;
  transition:.18s ease;
}

.collab-response-btn > span{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  font-size:10px;
  font-weight:950;
}

.collab-response-btn b{
  font-size:9px;
}

.collab-response-btn small{
  min-width:18px;
  padding:2px 5px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:7px;
  text-align:center;
}

.collab-response-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.16);
}

.collab-response-btn.is-down.active{
  border-color:rgba(105,239,169,.34);
  background:rgba(105,239,169,.10);
  color:#b9ffd5;
}

.collab-response-btn.is-maybe.active{
  border-color:rgba(255,203,99,.34);
  background:rgba(255,203,99,.09);
  color:#ffe0a0;
}

.collab-owner-response-note{
  color:var(--muted);
  font-size:8px;
  letter-spacing:.04em;
}

.collab-chat-owner-btn{
  margin-left:auto;
}

.collab-response-roster{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.055);
}

.collab-response-group{
  min-width:0;
  padding:10px;
  border-radius:14px;
  background:rgba(255,255,255,.022);
  border:1px solid rgba(255,255,255,.045);
}

.collab-response-group-head{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
}

.collab-response-group-head b{
  font-size:8px;
}

.collab-response-group-head small{
  margin-left:auto;
  color:var(--muted);
  font-size:7px;
}

.response-dot{
  width:7px;
  height:7px;
  border-radius:50%;
}

.response-dot.down{
  background:#6fefaa;
  box-shadow:0 0 10px rgba(111,239,170,.35);
}

.response-dot.maybe{
  background:#ffd06f;
  box-shadow:0 0 10px rgba(255,208,111,.28);
}

.collab-responder-list{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.collab-responder-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:27px;
  padding:4px 7px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:var(--text);
  font:inherit;
  font-size:7px;
}

button.collab-responder-chip{
  cursor:pointer;
}

button.collab-responder-chip:hover{
  border-color:rgba(100,225,255,.18);
  background:rgba(100,225,255,.055);
}

.collab-responder-chip img{
  width:18px;
  height:18px;
  border-radius:50%;
  object-fit:cover;
}

.collab-responder-chip small{
  color:var(--cyan);
  font-size:6px;
  font-weight:850;
}

.collab-no-responses{
  color:var(--muted);
  font-size:7px;
}

.collab-chat-panel{
  margin-top:16px;
  padding:16px;
  border-radius:20px;
  scroll-margin-top:110px;
}

.collab-chat-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.collab-chat-head h3{
  margin:4px 0 3px;
  font-size:17px;
}

.collab-chat-head p{
  margin:0;
  color:var(--muted);
  font-size:8px;
}

.collab-chat-head p b{
  color:var(--text);
}

.collab-chat-identity{
  display:flex;
  align-items:center;
  gap:9px;
  margin:12px 0;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:13px;
  background:rgba(255,255,255,.025);
}

.collab-chat-identity img{
  width:36px;
  height:36px;
  border-radius:11px;
  object-fit:cover;
}

.collab-chat-identity span,
.collab-chat-replying-as span{
  display:block;
  color:var(--muted);
  font-size:6px;
  letter-spacing:.12em;
}

.collab-chat-identity b{
  display:block;
  margin-top:2px;
  font-size:10px;
}

.collab-chat-identity small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:7px;
}

.collab-chat-messages{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:350px;
  overflow:auto;
  padding:6px 2px 12px;
}

.collab-chat-message{
  width:min(82%,560px);
  padding:9px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.055);
}

.collab-chat-message.mine{
  align-self:flex-end;
  background:rgba(157,93,255,.085);
  border-color:rgba(157,93,255,.13);
}

.collab-chat-message.theirs{
  align-self:flex-start;
  background:rgba(61,211,225,.055);
  border-color:rgba(61,211,225,.10);
}

.collab-chat-message-meta{
  display:flex;
  align-items:center;
  gap:6px;
}

.collab-chat-message-meta img{
  width:20px;
  height:20px;
  border-radius:50%;
  object-fit:cover;
}

.collab-chat-message-meta b{
  font-size:8px;
}

.collab-chat-message-meta span{
  margin-left:auto;
  color:var(--muted);
  font-size:6px;
}

.collab-chat-message p{
  margin:6px 0 0;
  white-space:pre-wrap;
  font-size:9px;
  line-height:1.55;
}

.collab-chat-empty,
.collab-chat-loading{
  padding:28px 12px;
  color:var(--muted);
  text-align:center;
  font-size:9px;
}

.collab-chat-composer{
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
}

.collab-chat-replying-as{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:7px;
}

.collab-chat-replying-as b{
  font-size:8px;
}

.collab-chat-compose-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:end;
}

.collab-chat-compose-row textarea{
  min-height:74px;
  resize:vertical;
}

@media(max-width:700px){
  .collab-response-roster{
    grid-template-columns:1fr;
  }

  .collab-chat-owner-btn{
    margin-left:0;
  }

  .collab-chat-compose-row{
    grid-template-columns:1fr;
  }

  .collab-chat-message{
    width:92%;
  }
}


/* Collab response interaction reliability */
.collab-response-btn:disabled{
  cursor:wait;
  opacity:.62;
  transform:none;
}

.collab-response-btn[data-busy="1"]{
  position:relative;
}

.collab-response-btn[data-busy="1"]::after{
  content:'';
  width:9px;
  height:9px;
  margin-left:2px;
  border:1px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:collabResponseSpin .65s linear infinite;
}

@keyframes collabResponseSpin{
  to{transform:rotate(360deg)}
}


/* ============================================================
   Steam account linking + collab game matching
   ============================================================ */
.steam-link-card{
  margin-top:12px;
  padding:13px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.steam-link-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.steam-link-main > div:last-child{
  min-width:0;
}

.steam-mark{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:
    radial-gradient(circle at 32% 25%,rgba(255,255,255,.15),transparent 24%),
    linear-gradient(145deg,rgba(81,156,213,.34),rgba(19,54,84,.55));
  border:1px solid rgba(118,190,235,.18);
  color:#d8f1ff;
  font-size:7px;
  font-weight:900;
  letter-spacing:.08em;
}

.steam-linked-avatar{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:13px;
  object-fit:cover;
  border:1px solid rgba(118,190,235,.18);
}

.steam-link-main b{
  display:block;
  font-size:10px;
}

.steam-link-main p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:8px;
  line-height:1.45;
}

.steam-link-main code{
  color:#cfeeff;
  font-size:8px;
}

.steam-connected-label{
  display:block;
  margin-bottom:3px;
  color:#8dd8ff;
  font-size:6px;
  font-weight:900;
  letter-spacing:.13em;
}

.steam-btn{
  flex:0 0 auto;
  background:linear-gradient(135deg,rgba(62,127,180,.88),rgba(24,67,104,.95));
  border-color:rgba(128,198,240,.22);
}

.steam-link-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}

.steam-link-actions .btn{
  padding:7px 9px;
  font-size:8px;
}

.steam-setup-pill{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,193,83,.07);
  border:1px solid rgba(255,193,83,.14);
  color:#ffd58b;
  font-size:6px;
  font-weight:900;
  letter-spacing:.09em;
}

.steam-private-note{
  width:100%;
  margin-top:8px;
  padding:8px 9px;
  border-radius:11px;
  background:rgba(255,193,83,.05);
  border:1px solid rgba(255,193,83,.10);
  color:var(--muted);
  font-size:7px;
  line-height:1.45;
}

.steam-link-card:has(.steam-private-note){
  flex-wrap:wrap;
}

.steam-mini-link{
  border-color:rgba(104,185,232,.13);
}

.collab-steam-match{
  margin-top:12px;
  padding:10px 11px;
  border-radius:14px;
  border:1px solid rgba(97,181,230,.10);
  background:
    linear-gradient(135deg,rgba(51,115,159,.07),rgba(16,32,50,.035));
  display:flex;
  align-items:center;
  gap:9px;
}

.collab-steam-match.is-empty{
  opacity:.78;
}

.collab-steam-match.is-private{
  border-color:rgba(255,193,83,.10);
  background:rgba(255,193,83,.035);
}

.steam-match-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(74,151,202,.08);
  font-size:13px;
}

.steam-match-copy{
  min-width:0;
  flex:1;
}

.steam-match-copy b,
.collab-steam-match > div b{
  display:block;
  font-size:9px;
}

.steam-match-copy small,
.collab-steam-match > div small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:7px;
  line-height:1.35;
}

.steam-match-label{
  display:block;
  margin-bottom:2px;
  color:#83d4ff;
  font-size:5.5px;
  font-weight:900;
  letter-spacing:.13em;
}

.steam-profile-link,
.steam-match-open{
  flex:0 0 auto;
  color:#9fddff;
  font-size:7px;
  font-weight:800;
  text-decoration:none;
}

details.collab-steam-match{
  display:block;
  padding:0;
  overflow:hidden;
}

details.collab-steam-match > summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 11px;
  cursor:pointer;
}

details.collab-steam-match > summary::-webkit-details-marker{
  display:none;
}

details.collab-steam-match[open] .steam-match-open{
  opacity:.55;
}

.steam-common-game-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  padding:9px 10px 10px;
  border-top:1px solid rgba(255,255,255,.045);
}

.steam-common-game-list a{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 8px;
  border-radius:9px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.045);
  color:var(--text);
  text-decoration:none;
  font-size:7px;
}

.steam-common-game-list a:hover{
  border-color:rgba(99,195,241,.13);
  background:rgba(99,195,241,.045);
}

.steam-common-game-list a span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.steam-common-game-list a small{
  flex:0 0 auto;
  color:#8ed8ff;
  font-size:6px;
}

.steam-more-games{
  grid-column:1/-1;
  padding:5px;
  color:var(--muted);
  text-align:center;
  font-size:6.5px;
}

@media(max-width:720px){
  .steam-link-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .steam-link-actions{
    justify-content:flex-start;
  }

  .steam-common-game-list{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   Collab Game Library
   ============================================================ */
.collab-game-library{
  margin-bottom:28px;
  padding:16px;
  border-radius:22px;
}

.collab-game-library-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.collab-game-library-head h3{
  margin:4px 0 3px;
  font-size:22px;
  letter-spacing:-.035em;
}

.collab-game-library-head p{
  margin:0;
  max-width:520px;
  color:var(--muted);
  font-size:8px;
  line-height:1.5;
}

.collab-game-library-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
  align-items:end;
  margin-top:13px;
}

.collab-game-search span{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.collab-game-search input{
  width:100%;
}

.collab-game-filter{
  min-height:39px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font-size:8px;
  cursor:pointer;
}

.collab-game-filter input{
  accent-color:var(--cyan);
}

.collab-game-library-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.collab-game-library-stats span{
  padding:5px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  color:var(--muted);
  font-size:7px;
}

.collab-game-library-stats b{
  color:var(--text);
}

.collab-game-library-stats .is-ready{
  color:#9cedbe;
  border-color:rgba(112,239,170,.10);
  background:rgba(112,239,170,.04);
}

.collab-game-library-stats .is-warning{
  color:#ffd58b;
  border-color:rgba(255,193,83,.10);
  background:rgba(255,193,83,.04);
}

.collab-game-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:12px;
}

.collab-game-grid > .empty{
  grid-column:1/-1;
  padding:22px;
  text-align:center;
  color:var(--muted);
  font-size:8px;
}

.collab-game-card{
  min-width:0;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.055);
  background:linear-gradient(145deg,rgba(56,126,170,.045),rgba(255,255,255,.018));
}

.collab-game-card-top{
  display:flex;
  align-items:center;
  gap:9px;
}

.collab-game-symbol{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.13),transparent 25%),
    linear-gradient(145deg,rgba(68,158,210,.24),rgba(70,66,157,.20));
  border:1px solid rgba(111,191,234,.10);
  color:#d7f2ff;
  font-size:14px;
  font-weight:900;
}

.collab-game-card-copy{
  min-width:0;
  flex:1;
}

.collab-game-title-row{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.collab-game-title-row b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}

.collab-game-card-copy > small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:7px;
}

.collab-game-owned{
  flex:0 0 auto;
  padding:3px 5px;
  border-radius:999px;
  color:#aef1c8;
  background:rgba(112,239,170,.055);
  border:1px solid rgba(112,239,170,.10);
  font-size:5px;
  font-weight:900;
  letter-spacing:.07em;
}

.collab-game-open{
  flex:0 0 auto;
  padding:4px 6px;
  border-radius:999px;
  color:#d9c2ff;
  background:rgba(166,108,255,.06);
  border:1px solid rgba(166,108,255,.11);
  font-size:6px;
  font-weight:850;
}

.collab-game-owners{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.045);
}

.collab-game-avatar-stack{
  display:flex;
  flex:0 0 auto;
  padding-left:5px;
}

.collab-game-owner{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  margin-left:-5px;
  overflow:hidden;
  border-radius:50%;
  border:2px solid rgba(13,15,25,.90);
  background:#222638;
  color:white;
  font-size:6px;
  font-weight:900;
}

.collab-game-owner img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.collab-game-owner.extra{
  background:rgba(255,255,255,.08);
  color:var(--muted);
}

.collab-game-owners > span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--muted);
  font-size:6.5px;
}

.collab-game-actions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}

.collab-game-actions .btn{
  padding:6px 8px;
  font-size:7px;
}

.collab-selected-game{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
  padding:8px 9px;
  border-radius:12px;
  border:1px solid rgba(88,194,236,.12);
  background:rgba(88,194,236,.045);
}

.collab-selected-game > div{
  min-width:0;
}

.collab-selected-game span{
  display:block;
  color:#8fdcff;
  font-size:5.5px;
  font-weight:900;
  letter-spacing:.12em;
}

.collab-selected-game b{
  display:block;
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
}

.collab-request-game{
  display:flex;
  align-items:center;
  gap:8px;
  margin:11px 0 5px;
  padding:8px 9px;
  border-radius:12px;
  background:rgba(59,139,190,.045);
  border:1px solid rgba(95,190,235,.09);
  color:var(--text);
  text-decoration:none;
}

.collab-request-game > span{
  font-size:15px;
}

.collab-request-game > div{
  min-width:0;
  flex:1;
}

.collab-request-game small{
  display:block;
  color:#83d5ff;
  font-size:5.5px;
  font-weight:900;
  letter-spacing:.11em;
}

.collab-request-game b{
  display:block;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
}

.collab-request-game i{
  flex:0 0 auto;
  color:var(--muted);
  font-size:6px;
  font-style:normal;
}

@media(max-width:780px){
  .collab-game-grid{
    grid-template-columns:1fr;
  }

  .collab-game-library-controls{
    grid-template-columns:1fr;
  }

  .collab-game-filter{
    min-height:36px;
  }
}


/* ============================================================
   Giveaway manual refresh
   ============================================================ */
.giveaway-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.giveaway-refresh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.giveaway-refresh-btn:disabled{
  opacity:.65;
  cursor:wait;
}

.giveaway-refresh-spinner{
  width:10px;
  height:10px;
  display:inline-block;
  border:1.5px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:giveawayRefreshSpin .65s linear infinite;
}

@keyframes giveawayRefreshSpin{
  to{transform:rotate(360deg)}
}

@media(max-width:620px){
  .giveaway-head-actions{
    width:100%;
    justify-content:flex-start;
  }
}


/* ============================================================
   Desktop + Phone responsive pass
   ============================================================ */
.mobile-nav-toggle,
.mobile-nav-backdrop{
  display:none;
}

html{
  scroll-padding-top:100px;
}

body{
  -webkit-text-size-adjust:100%;
}

button,
a,
input,
textarea,
select{
  touch-action:manipulation;
}

@media (hover:none), (pointer:coarse){
  .stream-card .watch-now{
    opacity:1;
    transform:none;
  }

  .btn:hover,
  .icon-btn:hover,
  .theme-toggle:hover,
  .stream-card:hover,
  .creator-ticket-item:hover,
  .collab-response-btn:hover{
    transform:none;
  }
}

@media(max-width:980px){
  html{
    scroll-padding-top:88px;
  }

  body.mobile-nav-open{
    overflow:hidden;
  }

  .topbar{
    z-index:130;
  }

  .mobile-nav-toggle{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-content:center;
    gap:4px;
    padding:0;
    border:1px solid var(--line);
    border-radius:13px;
    background:rgba(255,255,255,.065);
    color:white;
    cursor:pointer;
  }

  .mobile-nav-toggle span{
    width:17px;
    height:1.5px;
    display:block;
    border-radius:999px;
    background:currentColor;
    transition:transform .2s ease,opacity .2s ease;
  }

  body.mobile-nav-open .mobile-nav-toggle span:nth-child(1){
    transform:translateY(5.5px) rotate(45deg);
  }

  body.mobile-nav-open .mobile-nav-toggle span:nth-child(2){
    opacity:0;
  }

  body.mobile-nav-open .mobile-nav-toggle span:nth-child(3){
    transform:translateY(-5.5px) rotate(-45deg);
  }

  .mobile-nav-backdrop{
    position:fixed;
    inset:0;
    z-index:118;
    display:block;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    border:0;
    background:rgba(2,4,10,.56);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    transition:opacity .2s ease,visibility .2s ease;
  }

  body.mobile-nav-open .mobile-nav-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .topbar nav{
    position:fixed;
    top:92px;
    left:14px;
    right:14px;
    z-index:131;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:5px;
    max-height:calc(100dvh - 110px);
    overflow:auto;
    padding:10px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(10,12,22,.93);
    box-shadow:0 24px 70px rgba(0,0,0,.45);
    backdrop-filter:blur(26px) saturate(145%);
    -webkit-backdrop-filter:blur(26px) saturate(145%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px) scale(.985);
    transform-origin:top center;
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
  }

  body.mobile-nav-open .topbar nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }

  .topbar nav a{
    width:100%;
    min-height:46px;
    display:flex;
    align-items:center;
    padding:0 13px;
    border-radius:12px;
    color:var(--text);
    font-size:14px;
  }

  .topbar nav a:hover,
  .topbar nav a:focus-visible{
    background:rgba(255,255,255,.07);
  }

  .hero{
    min-height:auto;
  }

  .live-watch-shell{
    overflow:visible;
  }

  .creator-ticket-shell{
    min-height:0;
  }
}

@media(max-width:760px){
  :root{
    --mobile-edge:12px;
  }

  html{
    scroll-padding-top:80px;
  }

  body{
    padding-bottom:env(safe-area-inset-bottom);
  }

  .section,
  .moderator-section{
    width:calc(100% - (var(--mobile-edge) * 2));
  }

  .block{
    padding:48px 0;
  }

  .topbar{
    top:8px;
    width:calc(100% - 16px);
    height:60px;
    margin:8px auto 0;
    padding:0 9px 0 12px;
    gap:8px;
    border-radius:18px;
  }

  .topbar .brand{
    min-width:0;
    gap:8px;
  }

  .brand-wordmark{
    min-width:0;
  }

  .topbar-actions{
    gap:5px;
  }

  .mobile-nav-toggle,
  .theme-toggle{
    width:40px;
    min-width:40px;
    height:40px;
    border-radius:12px;
  }

  .topbar nav{
    top:78px;
    left:8px;
    right:8px;
    max-height:calc(100dvh - 90px - env(safe-area-inset-bottom));
  }

  body.crash-mode .topbar nav{
    top:128px;
  }

  .avatar-btn{
    min-height:40px;
    min-width:40px;
    padding:3px;
    border-radius:12px;
    cursor:pointer;
  }

  .avatar-btn img{
    width:34px;
    height:34px;
  }

  .avatar-btn span{
    display:none;
  }

  #accountArea .twitch{
    min-height:40px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    font-size:12px;
    border-radius:12px;
  }

  .hero{
    grid-template-columns:1fr;
    gap:24px;
    padding:68px 0 42px;
  }

  .hero-copy{
    min-width:0;
  }

  .hero h1{
    font-size:clamp(42px,13vw,58px);
    line-height:.96;
  }

  .hero p,
  .lead{
    font-size:15px;
    line-height:1.62;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .hero-actions .btn{
    min-width:0;
    text-align:center;
  }

  .mini-stats{
    width:100%;
    gap:0;
    margin-top:24px;
    overflow:visible;
  }

  .mini-stats div{
    flex:1;
    min-width:0;
    padding:10px 8px;
  }

  .mini-stats b{
    font-size:19px;
  }

  .mini-stats span{
    font-size:9px;
  }

  .hero-visual{
    height:320px;
    border-radius:25px;
  }

  .live-logo-pulse{
    transform:none!important;
  }

  .live-logo-stage{
    width:min(300px,100%);
    height:244px;
  }

  .floating-chip{
    font-size:9px;
    padding:7px 9px;
  }

  .c1{
    left:12px;
    top:80px;
  }

  .c2{
    right:12px;
    top:155px;
  }

  .c3{
    left:18px;
    bottom:22px;
  }

  .section-head{
    gap:13px;
    margin-bottom:18px;
  }

  .section-head h2,
  .block h2{
    font-size:clamp(31px,10vw,42px);
  }

  .section-head > .inline-actions{
    width:100%;
    align-items:stretch;
  }

  .section-head > .inline-actions .btn,
  .section-head > .inline-actions .icon-btn{
    flex:1 1 135px;
  }

  .status-pill{
    line-height:1.4;
  }

  .stream-grid,
  .rooms-grid,
  .giveaway-grid{
    grid-template-columns:1fr;
    gap:11px;
  }

  .stream-card,
  .room-card,
  .giveaway-card,
  .post{
    border-radius:18px;
  }

  .stream-meta{
    padding:13px;
  }

  .stream-meta b{
    font-size:15px;
  }

  .watch-now{
    padding:7px 9px;
  }

  .live-watch-main{
    padding:10px;
  }

  .live-watch-player{
    border-radius:14px;
  }

  .live-watch-info{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    padding:11px 2px 2px;
  }

  .live-watch-chat iframe{
    min-height:360px;
    height:55dvh;
  }

  .pane-head{
    padding:12px;
  }

  /* Moderator deck becomes a touch-friendly vertical workspace. */
  .multi-mod-shell{
    display:block;
  }

  .multi-channel-rail{
    position:relative;
    top:auto;
    max-height:none;
    padding:12px;
    border-radius:19px;
    margin-bottom:11px;
    overflow:hidden;
  }

  .channel-list{
    display:flex;
    flex-direction:row;
    gap:7px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 1px 6px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
  }

  .channel-button{
    min-width:160px;
    width:160px;
    min-height:54px;
    flex:0 0 160px;
    scroll-snap-align:start;
    padding:9px;
  }

  .mod-panel{
    border-radius:20px;
  }

  .mod-panel-head{
    padding:11px;
  }

  .mod-panel-grid{
    grid-template-columns:1fr;
    min-height:0;
  }

  .mod-stream-side{
    padding:9px;
  }

  .mod-stream-frame{
    border-radius:14px;
  }

  .mod-send-row,
  .mod-action-grid{
    grid-template-columns:1fr;
  }

  .mod-action-grid .btn{
    grid-column:auto;
  }

  .mod-chat-side{
    border-left:0;
    border-top:1px solid var(--line);
  }

  .mod-chat-side iframe{
    height:440px;
    min-height:440px;
  }

  .mod-control-box{
    padding:10px;
  }

  /* Collab board and Steam library. */
  .collab-section{
    gap:28px;
  }

  .collab-compose{
    position:static;
  }

  .form-card,
  .post,
  .collab-game-library,
  .collab-chat-panel{
    padding:14px;
    border-radius:18px;
  }

  .collab-game-library-head,
  .collab-roster-head,
  .collab-requests-head{
    align-items:flex-start;
  }

  .collab-game-library-head h3,
  .collab-roster-head h3{
    font-size:20px;
  }

  .collab-game-grid,
  .collab-creator-roster{
    grid-template-columns:1fr;
  }

  .collab-game-card{
    padding:11px;
  }

  .collab-game-title-row{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }

  .collab-game-owners{
    align-items:flex-start;
  }

  .collab-game-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .collab-game-actions .btn{
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .collab-person-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .collab-response-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .collab-response-btn{
    min-height:44px;
    justify-content:center;
  }

  .collab-chat-owner-btn,
  .collab-owner-response-note{
    grid-column:1/-1;
  }

  .collab-response-roster{
    grid-template-columns:1fr;
  }

  .collab-chat-message{
    width:92%;
  }

  .collab-chat-message-meta{
    flex-wrap:wrap;
  }

  .collab-chat-message-meta span{
    width:100%;
    margin-left:26px;
  }

  .collab-chat-compose-row{
    grid-template-columns:1fr;
  }

  .steam-link-card{
    align-items:stretch;
  }

  .steam-link-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .steam-link-actions .btn,
  .steam-link-card > .btn{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  details.collab-steam-match > summary{
    align-items:flex-start;
  }

  /* Rooms and giveaways. */
  .room-workspace{
    grid-template-columns:1fr;
    padding:13px;
    border-radius:18px;
  }

  .command-strip{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
  }

  .giveaway-head-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .giveaway-head-actions .btn{
    min-height:44px;
  }

  .giveaway-card{
    padding:15px;
  }

  .giveaway-card .card-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .giveaway-card .card-actions .btn{
    min-height:42px;
    text-align:center;
  }

  .giveaway-card .card-actions .danger{
    grid-column:1/-1;
  }

  /* Sponsorship + ticket messaging. */
  .sponsor-layout{
    grid-template-columns:1fr;
  }

  .sponsor-copy{
    position:relative;
    top:auto;
    padding:18px;
    border-radius:19px;
  }

  .sponsor-form{
    padding:15px;
  }

  .sponsor-submit{
    align-items:stretch;
    flex-direction:column;
  }

  .sponsor-submit small{
    max-width:none;
  }

  .creator-ticket-shell{
    grid-template-columns:1fr;
    border-radius:17px;
  }

  .creator-ticket-list{
    max-height:230px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .creator-ticket-conversation{
    padding:12px;
  }

  .ticket-intake{
    grid-template-columns:1fr;
  }

  .ticket-message{
    width:94%;
    padding:10px;
  }

  .ticket-message-meta{
    align-items:flex-start;
  }

  .ticket-reply-composer{
    grid-template-columns:1fr;
  }

  /* Forms use 16px text on mobile so Safari doesn't zoom on focus. */
  input,
  textarea,
  select{
    min-height:44px;
    font-size:16px;
    border-radius:11px;
  }

  textarea{
    min-height:104px;
  }

  input[type="date"],
  input[type="datetime-local"]{
    min-width:0;
  }

  .btn,
  .icon-btn{
    min-height:44px;
    padding:10px 13px;
  }

  .form-card > .btn{
    width:100%;
  }

  .card-actions{
    gap:7px;
  }

  .toasts{
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
  }

  .toast{
    width:100%;
  }

  .wheel-modal{
    align-items:center;
    padding:
      calc(8px + env(safe-area-inset-top))
      8px
      calc(8px + env(safe-area-inset-bottom));
  }

  .wheel-dialog{
    width:100%;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding:13px;
    border-radius:20px;
  }

  .wheel-dialog-head{
    gap:10px;
  }

  .wheel-stage{
    width:min(86vw,430px);
  }

  footer{
    width:calc(100% - 24px);
    margin:18px auto calc(28px + env(safe-area-inset-bottom));
    padding-top:18px;
    flex-wrap:wrap;
  }

  footer small{
    display:block!important;
    width:100%;
    margin-left:0;
    line-height:1.7;
  }

  .ambassador-floater:nth-child(n+4){
    display:none;
  }

  /* Public giveaway signup page also inherits style.css. */
  #giveawayPublic{
    width:100%!important;
    padding:20px!important;
    border-radius:22px!important;
  }

  #giveawayPublic h1{
    font-size:clamp(34px,11vw,44px)!important;
    overflow-wrap:anywhere;
  }
}

@media(max-width:480px){
  :root{
    --mobile-edge:10px;
  }

  .topbar{
    width:calc(100% - 12px);
    padding-left:9px;
  }

  .topbar .brand-wordmark{
    display:none;
  }

  .topbar .brand-orb{
    width:38px;
    height:38px;
  }

  .topbar-actions{
    margin-left:auto;
  }

  #accountArea .twitch{
    padding:0 9px;
    font-size:11px;
  }

  .hero{
    padding-top:58px;
  }

  .hero h1{
    font-size:clamp(38px,13vw,50px);
  }

  .hero-actions{
    grid-template-columns:1fr;
  }

  .hero-visual{
    height:292px;
  }

  .live-logo-stage{
    transform:scale(.90);
  }

  .floating-chip.c2{
    display:none;
  }

  .mini-stats span{
    font-size:8px;
  }

  .section-head > .inline-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .section-head > .inline-actions > *{
    width:100%;
  }

  .channel-button{
    min-width:148px;
    width:148px;
    flex-basis:148px;
  }

  .mod-panel-head{
    flex-direction:column;
  }

  .mod-panel-head .inline-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .collab-game-library-head,
  .collab-roster-head,
  .collab-requests-head{
    flex-direction:column;
    gap:8px;
  }

  .collab-game-actions,
  .collab-person-actions,
  .collab-response-actions,
  .steam-link-actions,
  .giveaway-head-actions,
  .giveaway-card .card-actions{
    grid-template-columns:1fr;
  }

  .collab-game-actions .btn,
  .collab-person-actions .btn,
  .steam-link-actions .btn,
  .giveaway-card .card-actions .btn,
  .giveaway-card .card-actions .danger{
    grid-column:auto;
  }

  .collab-steam-match,
  details.collab-steam-match > summary{
    flex-wrap:wrap;
  }

  .steam-profile-link,
  .steam-match-open{
    width:100%;
    padding-left:37px;
  }

  .ticket-center-head{
    flex-direction:column;
  }

  .ticket-conversation-head{
    flex-direction:column;
  }

  .ticket-message{
    width:100%;
  }

  .ticket-message-meta{
    flex-direction:column;
    gap:5px;
  }

  .wheel-dialog-head h2{
    font-size:27px;
  }
}

@media(prefers-reduced-motion:reduce){
  .mobile-nav-toggle span,
  .topbar nav,
  .mobile-nav-backdrop{
    transition:none!important;
  }
}


/* ============================================================
   HUNT Easter egg: Dead by Daylight-inspired horror trial
   Original CSS artwork, no game assets required.
   ============================================================ */
.dbd-site-hud{
  position:fixed;
  inset:0;
  z-index:165;
  display:block;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .5s ease,visibility .5s ease;
}

.dbd-site-hud.active{
  visibility:visible;
  opacity:1;
}

.dbd-site-hud::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 48%,transparent 0 24%,rgba(0,0,0,.10) 43%,rgba(0,0,0,.60) 100%),
    repeating-linear-gradient(104deg,transparent 0 35px,rgba(165,14,17,.018) 36px 37px,transparent 38px 71px);
  mix-blend-mode:multiply;
}

.dbd-site-hud::after{
  content:'';
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    radial-gradient(circle at 14% 18%,rgba(255,255,255,.26) 0 1px,transparent 1.3px),
    radial-gradient(circle at 73% 42%,rgba(255,255,255,.18) 0 1px,transparent 1.4px),
    radial-gradient(circle at 32% 75%,rgba(255,255,255,.20) 0 1px,transparent 1.2px);
  background-size:79px 91px,113px 103px,137px 121px;
  animation:dbdAshFall 13s linear infinite;
}

.dbd-fog-layer{
  position:absolute;
  left:-20%;
  width:140%;
  height:34%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,rgba(173,182,177,.18),rgba(70,77,72,.09) 42%,transparent 70%);
  filter:blur(24px);
  opacity:.48;
}

.dbd-fog-layer.fog-a{
  bottom:-8%;
  animation:dbdFogDriftA 14s ease-in-out infinite alternate;
}

.dbd-fog-layer.fog-b{
  bottom:17%;
  opacity:.24;
  animation:dbdFogDriftB 19s ease-in-out infinite alternate;
}

.dbd-fog-layer.fog-c{
  top:7%;
  opacity:.10;
  animation:dbdFogDriftA 23s ease-in-out infinite alternate-reverse;
}

.dbd-hud-top{
  position:absolute;
  left:50%;
  top:16px;
  z-index:5;
  width:min(720px,calc(100% - 32px));
  min-height:54px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:13px;
  padding:8px 12px;
  transform:translateX(-50%);
  border:1px solid rgba(184,190,181,.12);
  border-bottom-color:rgba(139,17,20,.35);
  background:linear-gradient(180deg,rgba(15,15,14,.88),rgba(6,7,7,.70));
  box-shadow:0 18px 40px rgba(0,0,0,.28),inset 0 -1px rgba(148,18,21,.17);
  backdrop-filter:blur(13px);
}

.dbd-tally-mark{
  width:44px;
  height:35px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  transform:skew(-8deg);
}

.dbd-tally-mark i{
  width:3px;
  height:31px;
  display:block;
  border-radius:100% 0 100% 0;
  background:linear-gradient(180deg,#e4e3d9,#aaa79d 55%,#6b6962);
  box-shadow:0 0 7px rgba(220,221,210,.11);
  transform:rotate(8deg);
}

.dbd-tally-mark i:nth-child(2){transform:rotate(4deg) translateY(2px)}
.dbd-tally-mark i:nth-child(3){transform:rotate(10deg) translateY(-1px)}
.dbd-tally-mark i:nth-child(4){transform:rotate(5deg) translateY(2px)}

.dbd-hud-title span,
.dbd-generator-status span{
  display:block;
  color:rgba(213,212,199,.48);
  font-size:6px;
  font-weight:850;
  letter-spacing:.17em;
}

.dbd-hud-title b{
  display:block;
  margin-top:2px;
  color:#e9e7dc;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-shadow:0 0 14px rgba(255,255,255,.08);
}

.dbd-generator-status{
  text-align:right;
}

.dbd-generator-status b{
  display:flex;
  justify-content:flex-end;
  gap:4px;
  margin-top:5px;
}

.dbd-generator-status b i{
  width:10px;
  height:10px;
  border-radius:2px;
  border:1px solid rgba(205,205,191,.22);
  background:rgba(130,15,18,.32);
  box-shadow:0 0 9px rgba(174,20,22,.11);
}

.dbd-exit{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:12;
  min-height:40px;
  padding:0 12px;
  border:1px solid rgba(178,30,32,.35);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(41,8,9,.90),rgba(13,6,6,.96));
  color:#e6d8d3;
  font:800 8px/1 inherit;
  letter-spacing:.14em;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 0 24px rgba(131,12,15,.14);
}

.dbd-exit:hover{
  background:rgba(106,13,16,.45);
}

.dbd-trial-card{
  position:absolute;
  top:50%;
  z-index:4;
  width:184px;
  padding:11px;
  transform:translateY(-50%);
  border:1px solid rgba(167,170,158,.09);
  background:rgba(7,8,8,.60);
  backdrop-filter:blur(12px);
  color:#d8d5c9;
  opacity:.62;
}

.dbd-trial-left{left:16px}
.dbd-trial-right{right:16px}

.dbd-card-kicker{
  display:block;
  padding-bottom:7px;
  margin-bottom:7px;
  border-bottom:1px solid rgba(138,19,22,.22);
  color:#9d1f21;
  font-size:6px;
  font-weight:900;
  letter-spacing:.15em;
}

.dbd-trial-card > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:5px 0;
}

.dbd-trial-card small{
  color:rgba(216,213,201,.40);
  font-size:5.5px;
  letter-spacing:.08em;
}

.dbd-trial-card b{
  font-size:6px;
  letter-spacing:.07em;
}

.dbd-danger-readout{
  color:#bd2b2d!important;
  animation:dbdHeartbeatText 1.15s ease-in-out infinite;
}

.dbd-bottom-hud{
  position:absolute;
  left:50%;
  bottom:18px;
  z-index:5;
  width:min(800px,calc(100% - 190px));
  display:flex;
  justify-content:space-between;
  gap:14px;
  transform:translateX(-50%);
  color:rgba(219,216,204,.28);
  font-size:5.5px;
  font-weight:800;
  letter-spacing:.13em;
}

.dbd-heartbeat{
  color:rgba(181,33,36,.70);
}

.dbd-heartbeat i{
  width:6px;
  height:6px;
  display:inline-block;
  margin-right:5px;
  border-radius:50%;
  background:#a71c20;
  box-shadow:0 0 13px rgba(183,25,29,.48);
  animation:dbdHeartbeatDot 1.15s ease-in-out infinite;
}

.dbd-hook{
  position:absolute;
  z-index:2;
  top:-4px;
  width:80px;
  height:270px;
  opacity:.28;
}

.dbd-hook-left{left:5%;transform:rotate(-4deg)}
.dbd-hook-right{right:6%;transform:scaleX(-1) rotate(-6deg)}

.hook-chain{
  position:absolute;
  left:35px;
  top:0;
  width:8px;
  height:150px;
  background:repeating-linear-gradient(180deg,#343631 0 6px,transparent 6px 11px);
  filter:drop-shadow(0 1px 1px black);
}

.hook-metal{
  position:absolute;
  left:28px;
  top:140px;
  width:30px;
  height:85px;
  border-right:9px solid #393a35;
  border-bottom:9px solid #393a35;
  border-radius:0 0 30px 0;
  transform:rotate(17deg);
}

.dbd-scratch-field .scratch{
  position:absolute;
  z-index:1;
  width:3px;
  height:120px;
  background:linear-gradient(180deg,transparent,#a8181b 20%,#ef3e41 48%,#741012 77%,transparent);
  box-shadow:0 0 8px rgba(207,28,31,.21);
  opacity:0;
  transform:rotate(24deg);
  animation:dbdScratchFlash 4.5s ease-in-out infinite;
}

.dbd-scratch-field .s1{left:8%;top:31%;animation-delay:.2s}
.dbd-scratch-field .s2{left:10%;top:34%;height:95px;animation-delay:.31s}
.dbd-scratch-field .s3{left:12%;top:29%;height:135px;animation-delay:.42s}
.dbd-scratch-field .s4{right:11%;top:54%;animation-delay:2.1s}
.dbd-scratch-field .s5{right:9%;top:51%;height:88px;animation-delay:2.24s}
.dbd-scratch-field .s6{right:7%;top:55%;height:145px;animation-delay:2.38s}
.dbd-scratch-field .s7{left:48%;bottom:2%;height:95px;animation-delay:3.25s}

body.dbd-mode{
  --bg:#080908;
  --card:rgba(18,18,16,.72);
  --card-strong:rgba(13,14,13,.91);
  --line:rgba(187,185,169,.095);
  --text:#dfddd2;
  --muted:#7d7e75;
  --purple:#8f1e21;
  --pink:#bc2528;
  --cyan:#a9aaa2;
  --mint:#8d9186;
  background:
    radial-gradient(circle at 20% 8%,rgba(105,15,17,.16),transparent 24%),
    radial-gradient(circle at 78% 31%,rgba(66,68,61,.11),transparent 31%),
    linear-gradient(160deg,#090a09,#050606 48%,#0b0909);
  color:#dfddd2;
}

body.dbd-mode::selection{
  color:white;
  background:#7f1518;
}

body.dbd-mode .topbar{
  border-color:rgba(181,181,166,.10);
  border-bottom-color:rgba(132,18,20,.23);
  border-radius:3px;
  background:rgba(9,10,9,.86);
  box-shadow:0 16px 42px rgba(0,0,0,.26),inset 0 -1px rgba(127,15,18,.12);
}

body.dbd-mode .topbar nav a{
  color:#a4a49a;
  letter-spacing:.05em;
}

body.dbd-mode .topbar nav a:hover{
  color:#e1ded2;
  background:rgba(123,17,19,.12);
}

body.dbd-mode .brand-orb,
body.dbd-mode .hero-brand-orb{
  --brand-a:#261719!important;
  --brand-b:#7d1518!important;
  --brand-c:#171917!important;
  --brand-d:#8f2425!important;
  border-color:rgba(206,203,190,.12)!important;
  box-shadow:
    inset 0 2px 8px rgba(255,255,255,.06),
    inset -18px -24px 35px rgba(0,0,0,.50),
    0 0 38px rgba(140,20,23,.18)!important;
  filter:saturate(.80) contrast(1.12);
}

body.dbd-mode .brand-orbit{
  border-right-color:rgba(218,214,199,.68)!important;
  border-left-color:rgba(132,19,22,.22)!important;
}

body.dbd-mode .brand-signal-dot{
  background:#9c2023!important;
  box-shadow:0 0 18px rgba(174,29,32,.54)!important;
}

body.dbd-mode .brand-play-mark{
  border-left-color:#c9c6b9!important;
}

body.dbd-mode .brand-name span,
body.dbd-mode .hero h1 span{
  color:#a6282a;
  background:none;
  -webkit-text-fill-color:currentColor;
}

body.dbd-mode .brand-hub,
body.dbd-mode .eyebrow{
  color:#8e2426;
}

body.dbd-mode .glass,
body.dbd-mode .hero-visual,
body.dbd-mode .form-card,
body.dbd-mode .post,
body.dbd-mode .stream-card,
body.dbd-mode .room-card,
body.dbd-mode .giveaway-card,
body.dbd-mode .collab-game-card,
body.dbd-mode .creator-ticket-shell,
body.dbd-mode .mod-panel,
body.dbd-mode .multi-channel-rail{
  border-color:rgba(181,179,164,.085)!important;
  border-radius:3px!important;
  background:
    linear-gradient(148deg,rgba(26,26,23,.74),rgba(10,11,10,.82))!important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.20),
    inset 0 1px rgba(255,255,255,.018),
    inset 0 -1px rgba(120,14,17,.08)!important;
  backdrop-filter:blur(11px) saturate(80%);
}

body.dbd-mode .hero-visual{
  overflow:hidden;
}

body.dbd-mode .hero-visual::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(118deg,transparent 0 43%,rgba(121,14,17,.08) 44% 44.5%,transparent 45% 100%),
    repeating-linear-gradient(90deg,transparent 0 53px,rgba(255,255,255,.006) 54px 55px);
}

body.dbd-mode .window-head{
  border-bottom-color:rgba(132,18,20,.17);
  background:rgba(4,5,4,.58);
}

body.dbd-mode .window-head span{
  background:#461214;
  box-shadow:none;
}

body.dbd-mode .window-head em{
  color:#8e8e84;
}

body.dbd-mode .live-logo-status{
  border-radius:2px;
  border-color:rgba(128,17,20,.22);
  background:rgba(7,8,7,.68);
}

body.dbd-mode .live-logo-status i{
  background:#9a1d20;
  box-shadow:0 0 12px rgba(166,24,27,.55);
}

body.dbd-mode .floating-chip{
  border-color:rgba(145,19,22,.15);
  border-radius:2px;
  background:rgba(8,9,8,.78);
  color:#99998f;
}

body.dbd-mode .btn,
body.dbd-mode .icon-btn,
body.dbd-mode .theme-toggle,
body.dbd-mode .mobile-nav-toggle{
  border-radius:2px!important;
  border-color:rgba(177,174,159,.10);
  background:rgba(18,18,16,.74);
  color:#c9c7bc;
  box-shadow:none;
}

body.dbd-mode .btn.primary{
  border-color:rgba(155,25,28,.31);
  background:linear-gradient(180deg,rgba(119,18,21,.68),rgba(54,10,12,.78));
  color:#eee9df;
}

body.dbd-mode .btn.danger{
  border-color:rgba(152,27,29,.27);
  background:rgba(76,10,12,.47);
  color:#cfb0ac;
}

body.dbd-mode .btn:hover,
body.dbd-mode .icon-btn:hover{
  border-color:rgba(174,31,34,.33);
  background:rgba(111,18,21,.27);
}

body.dbd-mode input,
body.dbd-mode textarea,
body.dbd-mode select{
  border-color:rgba(180,177,162,.09)!important;
  border-radius:2px!important;
  background:rgba(5,6,5,.68)!important;
  color:#d7d4c8!important;
  box-shadow:inset 0 0 18px rgba(0,0,0,.16);
}

body.dbd-mode input:focus,
body.dbd-mode textarea:focus,
body.dbd-mode select:focus{
  border-color:rgba(151,28,30,.40)!important;
  box-shadow:0 0 0 3px rgba(142,20,23,.07)!important;
}

body.dbd-mode input::placeholder,
body.dbd-mode textarea::placeholder{
  color:#65665f;
}

body.dbd-mode .section-head h2,
body.dbd-mode .block h2,
body.dbd-mode .hero h1,
body.dbd-mode h3{
  color:#dcd9cc;
  text-shadow:0 8px 28px rgba(0,0,0,.25);
}

body.dbd-mode .stream-card::after,
body.dbd-mode .post::after,
body.dbd-mode .giveaway-card::after,
body.dbd-mode .room-card::after,
body.dbd-mode .collab-game-card::after{
  content:'';
  position:absolute;
  inset:auto 8% -1px 8%;
  height:1px;
  background:linear-gradient(90deg,transparent,#781315,transparent);
  opacity:.42;
}

body.dbd-mode .stream-card,
body.dbd-mode .post,
body.dbd-mode .giveaway-card,
body.dbd-mode .room-card,
body.dbd-mode .collab-game-card{
  position:relative;
}

body.dbd-mode .live-badge,
body.dbd-mode .collab-game-open,
body.dbd-mode .collab-looking-dot,
body.dbd-mode .ticket-status,
body.dbd-mode .status-pill{
  border-color:rgba(151,26,29,.22)!important;
  background:rgba(93,13,15,.22)!important;
  color:#c48684!important;
  box-shadow:none!important;
}

body.dbd-mode .tag,
body.dbd-mode .collab-person-tags span,
body.dbd-mode .steam-match-label{
  border-color:rgba(132,21,24,.13)!important;
  background:rgba(112,15,18,.08)!important;
  color:#a7807d!important;
}

body.dbd-mode .collab-response-btn.is-down.active,
body.dbd-mode .collab-response-btn.is-maybe.active{
  border-color:rgba(160,29,32,.31);
  background:rgba(111,15,18,.19);
  color:#d8c4bf;
}

body.dbd-mode .response-dot.down,
body.dbd-mode .response-dot.maybe{
  background:#971d20;
  box-shadow:0 0 9px rgba(150,22,25,.35);
}

body.dbd-mode .collab-chat-message.mine,
body.dbd-mode .collab-chat-message.theirs{
  border-color:rgba(137,21,24,.14);
  background:rgba(83,12,14,.10);
}

body.dbd-mode .steam-mark,
body.dbd-mode .collab-game-symbol,
body.dbd-mode .steam-match-icon{
  filter:grayscale(.85) sepia(.25) hue-rotate(315deg) saturate(1.35);
}

body.dbd-mode footer{
  color:#77786f;
  border-top-color:rgba(126,17,20,.18);
}

body.dbd-mode footer a{
  color:#a87470;
}

body.dbd-mode .toasts{
  z-index:180;
}

body.dbd-mode .toast{
  border-radius:2px;
  border-color:rgba(141,19,22,.27);
  background:rgba(8,9,8,.94);
  color:#d5d1c6;
}

body.dbd-trial-enter main{
  animation:dbdTrialBoot .95s cubic-bezier(.25,.7,.2,1);
}

body.dbd-mode::-webkit-scrollbar-thumb{
  background:#541315;
}

body.dbd-mode .topbar nav{
  border-radius:2px;
  background:rgba(8,9,8,.96);
  border-color:rgba(147,20,23,.15);
}

/* Intro card before the jump scare */
.egg-dbd{
  z-index:238;
  background:
    radial-gradient(circle at 50% 50%,rgba(92,10,12,.22),transparent 37%),
    rgba(0,0,0,.56);
}

.dbd-egg-intro{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}

.dbd-intro-copy{
  position:relative;
  z-index:3;
  text-align:center;
  color:#ddd9cd;
  animation:dbdIntroPulse 1.5s ease-in-out both;
}

.dbd-intro-copy small{
  display:block;
  color:#781619;
  font-size:8px;
  font-weight:900;
  letter-spacing:.36em;
}

.dbd-intro-copy strong{
  display:block;
  margin:5px 0;
  font-size:clamp(72px,14vw,160px);
  line-height:.85;
  letter-spacing:-.06em;
  color:#e4e0d4;
  text-shadow:
    4px 3px 0 #471012,
    -2px -1px 0 #111,
    0 0 40px rgba(101,10,13,.28);
  filter:contrast(1.2);
}

.dbd-intro-copy span{
  color:#85867e;
  font-size:8px;
  font-weight:800;
  letter-spacing:.23em;
}

.dbd-intro-scratch{
  position:absolute;
  width:5px;
  height:44vh;
  min-height:240px;
  max-height:500px;
  background:linear-gradient(180deg,transparent,#8c171a 14%,#d73639 48%,#671012 84%,transparent);
  box-shadow:0 0 18px rgba(177,24,27,.23);
  transform:rotate(18deg) scaleY(.1);
  transform-origin:center;
  animation:dbdIntroSlash .55s cubic-bezier(.2,.8,.2,1) forwards;
}

.dbd-intro-scratch.is1{left:42%;animation-delay:.03s}
.dbd-intro-scratch.is2{left:47%;animation-delay:.10s}
.dbd-intro-scratch.is3{left:52%;animation-delay:.17s}
.dbd-intro-scratch.is4{left:57%;animation-delay:.24s}

/* Full-screen original screaming figure */
.dbd-jumpscare{
  position:fixed;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
  opacity:0;
  background:#020202;
}

.dbd-jumpscare.active{
  visibility:visible;
  opacity:1;
}

.dbd-jumpscare.leaving{
  opacity:0;
  transition:opacity .34s ease;
}

.dbd-jump-flash{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center,rgba(255,255,247,.88),rgba(142,19,21,.65) 24%,rgba(9,0,0,.97) 68%);
  animation:dbdJumpFlash .48s steps(2,end) both;
}

.dbd-screamer{
  position:relative;
  z-index:3;
  width:min(66vw,560px);
  aspect-ratio:.82;
  transform-origin:center;
  animation:dbdScreamerRush 1.28s cubic-bezier(.13,.83,.15,1) both;
  filter:drop-shadow(0 0 48px rgba(0,0,0,.85));
}

.dbd-scream-face{
  position:absolute;
  left:50%;
  top:12%;
  width:58%;
  height:69%;
  transform:translateX(-50%);
  overflow:hidden;
  border-radius:48% 48% 43% 43% / 39% 39% 57% 57%;
  background:
    radial-gradient(circle at 34% 31%,rgba(255,255,247,.62) 0 4%,transparent 5%),
    radial-gradient(circle at 50% 32%,#dbd7ca 0,#bdb8aa 36%,#77756c 72%,#373936 100%);
  box-shadow:
    inset 0 -25px 55px rgba(0,0,0,.56),
    inset 24px 0 40px rgba(0,0,0,.25),
    inset -22px 0 38px rgba(0,0,0,.30),
    0 0 1px 1px rgba(231,228,214,.22);
}

.dbd-face-shadow{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.27),transparent 30% 66%,rgba(0,0,0,.36)),
    radial-gradient(circle at 50% 67%,transparent 0 24%,rgba(0,0,0,.16) 40%,transparent 53%);
}

.dbd-scream-hair{
  position:absolute;
  z-index:-1;
  left:50%;
  top:1%;
  width:83%;
  height:86%;
  transform:translateX(-50%);
  border-radius:49% 49% 28% 28%;
  background:
    repeating-linear-gradient(99deg,#090909 0 8px,#161411 9px 14px,#050505 15px 22px);
  filter:blur(.6px);
}

.dbd-scream-hair.hair-front{
  z-index:4;
  width:69%;
  height:54%;
  top:3%;
  background:
    linear-gradient(111deg,#080807 0 14%,transparent 15% 74%,#060606 75%),
    linear-gradient(78deg,transparent 0 76%,#11100e 77%);
  pointer-events:none;
}

.dbd-scream-neck{
  position:absolute;
  z-index:-2;
  left:50%;
  bottom:4%;
  width:24%;
  height:34%;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#44443f,#aaa596 44%,#6d6a62 73%,#30312e);
}

.dbd-eye{
  position:absolute;
  top:31%;
  width:24%;
  height:13%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,#020202 0 39%,#1b1715 41% 54%,rgba(74,62,56,.6) 63%,transparent 72%);
  box-shadow:0 -9px 15px rgba(0,0,0,.30);
}

.dbd-eye i{
  position:absolute;
  left:50%;
  top:45%;
  width:7px;
  height:7px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#e7e0cd;
  box-shadow:0 0 7px rgba(255,244,220,.35);
}

.dbd-eye.eye-left{left:15%;transform:rotate(-5deg)}
.dbd-eye.eye-right{right:15%;transform:rotate(5deg)}

.dbd-nose{
  position:absolute;
  left:50%;
  top:43%;
  width:10%;
  height:19%;
  transform:translateX(-50%);
  border-radius:48%;
  box-shadow:inset -7px -2px 8px rgba(0,0,0,.29);
}

.dbd-mouth{
  position:absolute;
  left:50%;
  top:62%;
  width:25%;
  height:27%;
  transform:translateX(-50%);
  overflow:hidden;
  border-radius:44% 46% 51% 49% / 32% 33% 66% 67%;
  background:
    radial-gradient(ellipse at center,#020202 0 57%,#26090a 60% 74%,#5d1b1d 77%);
  box-shadow:
    0 0 0 3px rgba(72,39,35,.37),
    0 -5px 12px rgba(0,0,0,.36);
  animation:dbdMouthQuiver .13s steps(2,end) infinite;
}

.dbd-mouth .teeth{
  position:absolute;
  left:15%;
  width:70%;
  height:9%;
  background:repeating-linear-gradient(90deg,#c8c3b2 0 8%,#77736a 9% 11%);
  opacity:.78;
}

.dbd-mouth .teeth-top{top:4%}
.dbd-mouth .teeth-bottom{bottom:5%}

.dbd-blood-trail{
  position:absolute;
  top:39%;
  width:3px;
  height:31%;
  background:linear-gradient(180deg,#551012,#921a1d 62%,transparent);
  opacity:.70;
}

.dbd-blood-trail.blood-a{left:29%;transform:rotate(4deg)}
.dbd-blood-trail.blood-b{right:26%;height:19%;opacity:.44;transform:rotate(-3deg)}

.dbd-jump-caption{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:5%;
  transform:translateX(-50%);
  text-align:center;
  color:#e9e4d9;
  animation:dbdCaptionPop .42s .52s both;
}

.dbd-jump-caption b{
  display:block;
  font-size:clamp(52px,12vw,118px);
  line-height:.82;
  letter-spacing:-.05em;
  text-shadow:4px 3px #631316;
}

.dbd-jump-caption span{
  display:block;
  margin-top:9px;
  color:#a52a2c;
  font-size:8px;
  font-weight:900;
  letter-spacing:.34em;
}

/* Site entry shock */
body.dbd-trial-enter{
  animation:dbdBodyShock .38s steps(3,end) both;
}

@keyframes dbdAshFall{
  from{background-position:0 -110px,0 -100px,0 -90px}
  to{background-position:20px 120px,-18px 140px,15px 150px}
}

@keyframes dbdFogDriftA{
  from{transform:translateX(-4%) scaleX(.94)}
  to{transform:translateX(7%) scaleX(1.05)}
}

@keyframes dbdFogDriftB{
  from{transform:translateX(7%) scaleX(1.08)}
  to{transform:translateX(-5%) scaleX(.95)}
}

@keyframes dbdHeartbeatDot{
  0%,100%{transform:scale(.76);opacity:.52}
  9%{transform:scale(1.35);opacity:1}
  18%{transform:scale(.83);opacity:.62}
  26%{transform:scale(1.16);opacity:.94}
  39%{transform:scale(.76);opacity:.48}
}

@keyframes dbdHeartbeatText{
  0%,100%{opacity:.55}
  10%,27%{opacity:1}
  18%,42%{opacity:.68}
}

@keyframes dbdScratchFlash{
  0%,74%,100%{opacity:0;transform:translate(0,0) rotate(24deg)}
  78%{opacity:.16}
  82%{opacity:.82;transform:translate(8px,-7px) rotate(24deg)}
  88%{opacity:.28}
}

@keyframes dbdTrialBoot{
  0%{opacity:.35;filter:contrast(1.9) brightness(.32);transform:scale(1.012)}
  22%{opacity:1;filter:contrast(1.15) brightness(.72);transform:scale(.997)}
  40%{filter:contrast(1.5) brightness(.48)}
  100%{filter:none;transform:none}
}

@keyframes dbdBodyShock{
  0%{filter:brightness(2.2) contrast(1.5)}
  35%{filter:brightness(.25) contrast(1.8)}
  70%{filter:brightness(.9) contrast(1.2)}
  100%{filter:none}
}

@keyframes dbdIntroPulse{
  0%{opacity:0;transform:scale(.91);filter:blur(9px)}
  30%{opacity:1;filter:none}
  74%{transform:scale(1)}
  100%{opacity:.16;transform:scale(1.025)}
}

@keyframes dbdIntroSlash{
  0%{opacity:0;transform:rotate(18deg) scaleY(.04)}
  28%{opacity:1}
  100%{opacity:.45;transform:rotate(18deg) scaleY(1)}
}

@keyframes dbdJumpFlash{
  0%{filter:brightness(3);opacity:1}
  18%{filter:brightness(.12);opacity:.94}
  35%{filter:brightness(1.8);opacity:1}
  52%{filter:brightness(.35)}
  100%{filter:brightness(.65)}
}

@keyframes dbdScreamerRush{
  0%{transform:scale(.20) translateY(12%);filter:blur(9px) contrast(1.9)}
  16%{transform:scale(.30) translate(-3%,5%) rotate(-2deg);filter:blur(5px) contrast(1.7)}
  31%{transform:scale(.58) translate(2%,-2%) rotate(2deg);filter:blur(2px) contrast(1.45)}
  44%{transform:scale(1.10) translate(-2%,1%) rotate(-1deg);filter:none}
  55%{transform:scale(.98) translate(1%,-1%) rotate(1deg)}
  66%{transform:scale(1.15) translate(-1%,0) rotate(-1.2deg)}
  100%{transform:scale(1.28) translate(0,-2%);filter:contrast(1.14)}
}

@keyframes dbdMouthQuiver{
  0%{transform:translateX(-50%) rotate(-1deg) scaleX(.96)}
  100%{transform:translateX(-50%) rotate(1deg) scaleX(1.04)}
}

@keyframes dbdCaptionPop{
  from{opacity:0;transform:translateX(-50%) translateY(15px) scale(.86)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

@media(max-width:900px){
  .dbd-trial-card{
    display:none;
  }

  .dbd-bottom-hud{
    width:calc(100% - 32px);
  }

  .dbd-hook{
    opacity:.16;
  }
}

@media(max-width:650px){
  .dbd-hud-top{
    top:74px;
    width:calc(100% - 20px);
    grid-template-columns:auto 1fr;
  }

  .dbd-generator-status{
    display:none;
  }

  .dbd-tally-mark{
    width:34px;
  }

  .dbd-bottom-hud{
    bottom:72px;
    justify-content:center;
  }

  .dbd-bottom-hud > span:not(.dbd-heartbeat){
    display:none;
  }

  .dbd-exit{
    right:10px;
    bottom:10px;
    left:10px;
    width:calc(100% - 20px);
    min-height:44px;
  }

  .dbd-screamer{
    width:min(92vw,500px);
  }

  .dbd-jump-caption{
    bottom:8%;
  }
}

@media(prefers-reduced-motion:reduce){
  .dbd-site-hud::after,
  .dbd-fog-layer,
  .dbd-scratch-field .scratch,
  .dbd-danger-readout,
  .dbd-heartbeat i,
  .dbd-intro-copy,
  .dbd-intro-scratch,
  .dbd-screamer,
  .dbd-mouth,
  body.dbd-trial-enter,
  body.dbd-trial-enter main{
    animation:none!important;
  }

  .dbd-jumpscare .dbd-screamer{
    transform:scale(1);
  }
}


/* ============================================================
   Multi Moderator Deck: Player + Chat / Chat Only
   ============================================================ */
.channel-button{
  display:block;
  padding:7px;
}

.channel-channel-main{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:4px;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.channel-mode-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-top:7px;
}

.channel-mode-btn{
  min-height:29px;
  padding:5px 6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  font:750 9px/1 inherit;
  cursor:pointer;
  transition:.16s ease;
}

.channel-mode-btn:hover{
  color:var(--text);
  background:rgba(255,255,255,.07);
}

.channel-mode-btn.active{
  color:#d7cbff;
  border-color:rgba(166,108,255,.28);
  background:rgba(166,108,255,.11);
}

.channel-button.mode-chat{
  box-shadow:inset 3px 0 rgba(92,225,230,.68);
}

.channel-button.mode-chat .channel-open-state{
  color:#8fe5e8;
}

.mod-workbench{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:start;
}

.mod-empty,
.mod-panel-full{
  grid-column:1/-1;
}

.mod-panel-chat-only{
  min-width:0;
  grid-column:auto;
}

.mod-panel-head-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}

.mod-view-switch{
  display:inline-grid;
  grid-template-columns:auto auto;
  gap:3px;
  padding:3px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(0,0,0,.13);
}

.mod-view-switch button{
  min-height:31px;
  padding:6px 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  font:800 9px/1 inherit;
  cursor:pointer;
}

.mod-view-switch button.active{
  color:white;
  background:rgba(166,108,255,.18);
  box-shadow:inset 0 0 0 1px rgba(166,108,255,.18);
}

.mod-chat-only-side{
  border-left:0;
  min-height:610px;
}

.mod-chat-only-side iframe{
  min-height:565px;
  height:565px;
}

.mod-panel-chat-only .pane-head{
  background:rgba(0,0,0,.08);
}

body.vibrant-dark .channel-mode-btn.active,
body.vibrant-dark .mod-view-switch button.active{
  color:white;
}

@media(max-width:1180px){
  .mod-workbench{
    grid-template-columns:1fr;
  }

  .mod-panel-chat-only,
  .mod-panel-full,
  .mod-empty{
    grid-column:1;
  }

  .mod-chat-only-side iframe{
    height:520px;
    min-height:520px;
  }
}

@media(max-width:760px){
  .channel-mode-actions{
    grid-template-columns:1fr 1fr;
  }

  .channel-mode-btn{
    min-height:36px;
    font-size:10px;
  }

  .mod-panel-head-tools{
    width:100%;
    display:grid;
    grid-template-columns:1fr auto auto;
  }

  .mod-view-switch{
    width:100%;
  }

  .mod-view-switch button{
    min-height:38px;
  }

  .mod-chat-only-side{
    min-height:0;
  }

  .mod-chat-only-side iframe{
    height:62dvh;
    min-height:420px;
    max-height:680px;
  }
}

@media(max-width:480px){
  .mod-panel-head-tools{
    grid-template-columns:1fr 1fr;
  }

  .mod-view-switch{
    grid-column:1/-1;
  }

  .mod-panel-head-tools .icon-btn{
    width:100%;
    justify-content:center;
  }
}


/* ============================================================
   STREAMSPHERE // AFTERDARK
   Original standalone virtual music-festival Easter egg.
   ============================================================ */
body.afterdark-mode{
  overflow:hidden!important;
}

.afterdark-site{
  --ad-bg:#070810;
  --ad-panel:rgba(14,16,29,.72);
  --ad-panel-strong:rgba(10,12,22,.91);
  --ad-line:rgba(255,255,255,.11);
  --ad-text:#f5f7ff;
  --ad-muted:#9fa8bf;
  --ad-cyan:#62e9ff;
  --ad-violet:#985fff;
  --ad-pink:#ff5fb9;
  --ad-orange:#ffb35e;
  --ad-green:#79f0b1;
  position:fixed;
  inset:0;
  z-index:9000;
  display:none;
  overflow-x:hidden;
  overflow-y:auto;
  color:var(--ad-text);
  color-scheme:dark;
  background:
    radial-gradient(circle at 50% 26%,rgba(107,73,255,.12),transparent 26%),
    radial-gradient(circle at 74% 15%,rgba(255,77,180,.08),transparent 23%),
    linear-gradient(180deg,#080914 0%,#0a0d18 48%,#090b13 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  isolation:isolate;
}

.afterdark-site.active{
  display:block;
}

.afterdark-site *{
  box-sizing:border-box;
}

.afterdark-site button,
.afterdark-site a{
  font:inherit;
}

.afterdark-site button:focus-visible{
  outline:2px solid var(--ad-cyan);
  outline-offset:3px;
}

.ad-atmosphere{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,7,15,.06),rgba(5,6,13,.36) 72%,rgba(3,5,10,.88)),
    radial-gradient(circle at 50% 18%,rgba(121,91,255,.16),transparent 30%);
}

.ad-sky-glow{
  position:absolute;
  left:50%;
  top:8%;
  width:72vw;
  height:55vh;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at center,rgba(93,113,255,.16),rgba(239,70,190,.055) 43%,transparent 70%);
  filter:blur(40px);
  animation:adSkyBreath 8s ease-in-out infinite alternate;
}

.ad-stars{
  position:absolute;
  inset:0;
  opacity:.44;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(104,225,255,.78) 0 1px,transparent 1.4px);
  background-size:91px 91px,137px 137px;
  background-position:12px 17px,48px 71px;
}

.ad-stars-b{
  opacity:.18;
  transform:scale(1.15);
  animation:adStarDrift 34s linear infinite;
}

.ad-city-back,
.ad-city-front{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:flex-end;
}

.ad-city-back{
  height:41%;
  opacity:.37;
  gap:1.3vw;
  padding:0 1vw;
}

.ad-city-back i{
  flex:1;
  min-width:36px;
  height:var(--h,50%);
  background:
    repeating-linear-gradient(90deg,transparent 0 10px,rgba(99,210,255,.06) 10px 12px),
    repeating-linear-gradient(180deg,transparent 0 14px,rgba(255,215,146,.09) 14px 16px),
    linear-gradient(180deg,#1a2032,#0f1320);
  border-top:1px solid rgba(255,255,255,.05);
  box-shadow:0 -20px 70px rgba(71,78,255,.035);
}

.ad-city-back i:nth-child(1){--h:43%}
.ad-city-back i:nth-child(2){--h:74%}
.ad-city-back i:nth-child(3){--h:56%}
.ad-city-back i:nth-child(4){--h:88%}
.ad-city-back i:nth-child(5){--h:49%}
.ad-city-back i:nth-child(6){--h:68%}
.ad-city-back i:nth-child(7){--h:37%}
.ad-city-back i:nth-child(8){--h:81%}
.ad-city-back i:nth-child(9){--h:58%}
.ad-city-back i:nth-child(10){--h:91%}
.ad-city-back i:nth-child(11){--h:46%}
.ad-city-back i:nth-child(12){--h:70%}
.ad-city-back i:nth-child(13){--h:52%}
.ad-city-back i:nth-child(14){--h:77%}

.ad-city-front{
  height:23%;
  gap:2px;
  opacity:.72;
}

.ad-city-front i{
  flex:1;
  height:var(--h,55%);
  background:
    repeating-linear-gradient(90deg,transparent 0 16px,rgba(84,228,255,.08) 16px 18px),
    linear-gradient(180deg,#13182a,#090c14);
  border-top:1px solid rgba(113,230,255,.05);
}

.ad-city-front i:nth-child(1){--h:65%}
.ad-city-front i:nth-child(2){--h:93%}
.ad-city-front i:nth-child(3){--h:52%}
.ad-city-front i:nth-child(4){--h:77%}
.ad-city-front i:nth-child(5){--h:43%}
.ad-city-front i:nth-child(6){--h:88%}
.ad-city-front i:nth-child(7){--h:58%}
.ad-city-front i:nth-child(8){--h:74%}
.ad-city-front i:nth-child(9){--h:48%}
.ad-city-front i:nth-child(10){--h:84%}

.ad-haze{
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:3%;
  height:31%;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(143,80,255,.16),transparent 58%),
    radial-gradient(ellipse at 25% 90%,rgba(72,227,255,.07),transparent 45%),
    radial-gradient(ellipse at 78% 85%,rgba(255,82,187,.08),transparent 45%);
  filter:blur(26px);
  animation:adHazeShift 12s ease-in-out infinite alternate;
}

.ad-searchlight{
  position:absolute;
  bottom:-9%;
  width:10vw;
  min-width:90px;
  height:74vh;
  transform-origin:50% 100%;
  clip-path:polygon(45% 100%,55% 100%,100% 0,0 0);
  opacity:.08;
  mix-blend-mode:screen;
  filter:blur(3px);
  background:linear-gradient(180deg,transparent,rgba(100,225,255,.64));
}

.asl1{left:7%;animation:adSearchA 9s ease-in-out infinite alternate}
.asl2{left:29%;animation:adSearchB 11s ease-in-out infinite alternate;background:linear-gradient(180deg,transparent,rgba(255,84,195,.54))}
.asl3{right:27%;animation:adSearchA 10s -4s ease-in-out infinite alternate;background:linear-gradient(180deg,transparent,rgba(164,93,255,.58))}
.asl4{right:5%;animation:adSearchB 8s -2s ease-in-out infinite alternate;background:linear-gradient(180deg,transparent,rgba(255,190,90,.46))}

.ad-header{
  position:sticky;
  top:0;
  z-index:30;
  min-height:78px;
  display:grid;
  grid-template-columns:minmax(210px,1fr) auto minmax(250px,1fr);
  align-items:center;
  gap:20px;
  padding:12px clamp(18px,3vw,48px);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(7,8,17,.92),rgba(7,8,17,.72));
  box-shadow:0 12px 34px rgba(0,0,0,.18);
  backdrop-filter:blur(22px) saturate(125%);
  -webkit-backdrop-filter:blur(22px) saturate(125%);
}

.ad-brand{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  cursor:pointer;
}

.ad-brand-orb{
  position:relative;
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.82),transparent 12%),
    conic-gradient(from 210deg,var(--ad-violet),var(--ad-cyan),var(--ad-pink),var(--ad-orange),var(--ad-violet));
  box-shadow:
    inset -7px -8px 14px rgba(18,18,44,.30),
    0 0 25px rgba(129,90,255,.23);
}

.ad-brand-orb b{
  z-index:2;
  font-size:21px;
  font-weight:950;
  font-style:italic;
}

.ad-brand-orb i{
  position:absolute;
  inset:-5px;
  border:1px solid rgba(255,255,255,.42);
  border-left-color:transparent;
  border-radius:50%;
  transform:rotate(-24deg) scaleY(.58);
  animation:adBrandOrbit 7s linear infinite;
}

.ad-brand-copy{
  display:grid;
  text-align:left;
  line-height:1;
}

.ad-brand-copy small{
  color:var(--ad-muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.24em;
}

.ad-brand-copy strong{
  margin-top:4px;
  font-size:18px;
  font-weight:950;
  letter-spacing:.06em;
  background:linear-gradient(90deg,#fff,var(--ad-cyan) 48%,#d7b7ff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.ad-nav{
  justify-self:center;
  display:flex;
  gap:5px;
  padding:5px;
  border:1px solid var(--ad-line);
  border-radius:999px;
  background:rgba(255,255,255,.035);
}

.ad-nav button{
  min-height:34px;
  padding:0 13px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#8f99b3;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
  transition:.18s ease;
}

.ad-nav button:hover{
  color:#fff;
}

.ad-nav button.active{
  color:#fff;
  background:
    linear-gradient(135deg,rgba(107,225,255,.13),rgba(150,91,255,.17),rgba(255,86,188,.10));
  box-shadow:inset 0 0 0 1px rgba(163,135,255,.17);
}

.ad-header-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:13px;
}

.ad-clock{
  display:grid;
  text-align:right;
}

.ad-clock span{
  color:#6f7a94;
  font-size:6px;
  font-weight:900;
  letter-spacing:.18em;
}

.ad-clock b{
  margin-top:3px;
  font:800 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#dce5f8;
  letter-spacing:.06em;
}

.ad-exit,
.ad-primary,
.ad-secondary{
  min-height:39px;
  border-radius:10px;
  font-weight:900;
  letter-spacing:.06em;
  cursor:pointer;
  transition:.18s ease;
}

.ad-exit{
  padding:0 13px;
  border:1px solid rgba(255,105,173,.20);
  background:rgba(255,74,155,.075);
  color:#ff9ec7;
  font-size:8px;
}

.ad-exit:hover{
  background:rgba(255,74,155,.14);
  color:#fff;
  transform:translateY(-1px);
}

.ad-main{
  position:relative;
  z-index:2;
  width:min(1480px,calc(100% - 44px));
  min-height:calc(100vh - 138px);
  margin:0 auto;
  padding:44px 0 68px;
}

.ad-panel{
  display:none;
  animation:adPanelIn .45s cubic-bezier(.2,.8,.2,1) both;
}

.ad-panel.active{
  display:block;
}

.ad-festival-hero{
  min-height:690px;
  display:grid;
  grid-template-columns:minmax(360px,.88fr) minmax(520px,1.28fr);
  align-items:center;
  gap:clamp(28px,5vw,80px);
}

.ad-hero-copy{
  position:relative;
  z-index:4;
}

.ad-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#a6b2ca;
  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
}

.ad-kicker i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ad-green);
  box-shadow:0 0 14px rgba(121,240,177,.55);
  animation:adLivePulse 1s ease-in-out infinite alternate;
}

.ad-hero-copy h1{
  margin:18px 0 22px;
  font-size:clamp(58px,7.2vw,116px);
  line-height:.78;
  letter-spacing:-.075em;
  font-weight:950;
}

.ad-hero-copy h1 span{
  background:linear-gradient(92deg,var(--ad-cyan),#b77cff 45%,var(--ad-pink) 72%,var(--ad-orange));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 28px rgba(139,86,255,.14));
}

.ad-hero-copy p{
  max-width:620px;
  color:#a9b2c5;
  font-size:15px;
  line-height:1.75;
}

.ad-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.ad-primary{
  padding:0 18px;
  border:1px solid rgba(255,255,255,.16);
  color:#08101a;
  background:linear-gradient(115deg,#73edff,#ad86ff 52%,#ff76bd);
  box-shadow:0 12px 30px rgba(126,88,255,.18);
}

.ad-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 17px 38px rgba(126,88,255,.26);
}

.ad-secondary{
  padding:0 17px;
  border:1px solid var(--ad-line);
  color:#d9e0ef;
  background:rgba(255,255,255,.045);
}

.ad-secondary:hover{
  color:white;
  background:rgba(255,255,255,.08);
  transform:translateY(-1px);
}

.ad-mini-stats{
  display:flex;
  gap:10px;
  margin-top:32px;
}

.ad-mini-stats div{
  min-width:112px;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.027);
  backdrop-filter:blur(8px);
}

.ad-mini-stats b{
  display:block;
  color:#f4f7ff;
  font-size:19px;
}

.ad-mini-stats span{
  display:block;
  margin-top:4px;
  color:#6f7890;
  font-size:6px;
  font-weight:900;
  letter-spacing:.12em;
}

.ad-mainstage-wrap{
  position:relative;
  min-width:0;
}

.ad-stage-label{
  position:absolute;
  z-index:8;
  left:14px;
  top:-14px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:rgba(8,10,18,.73);
  backdrop-filter:blur(12px);
}

.ad-stage-label span{
  color:var(--ad-cyan);
  font-size:6px;
  font-weight:900;
  letter-spacing:.18em;
}

.ad-stage-label b{
  font-size:8px;
  letter-spacing:.10em;
}

.ad-stage-scene{
  position:relative;
  height:540px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:25px;
  background:
    radial-gradient(circle at 50% 44%,rgba(139,89,255,.16),transparent 25%),
    radial-gradient(circle at 50% 78%,rgba(255,82,190,.09),transparent 27%),
    linear-gradient(180deg,rgba(15,18,33,.87),rgba(7,8,15,.98));
  box-shadow:
    inset 0 1px rgba(255,255,255,.05),
    0 38px 80px rgba(0,0,0,.25),
    0 0 90px rgba(98,78,255,.055);
}

.ad-stage-scene::before{
  content:'';
  position:absolute;
  left:12%;
  right:12%;
  top:13%;
  bottom:12%;
  border-radius:50%;
  border:1px solid rgba(112,225,255,.06);
  box-shadow:
    0 0 0 60px rgba(158,88,255,.015),
    0 0 0 120px rgba(255,80,183,.009);
}

.ad-stage-truss{
  position:absolute;
  z-index:7;
  background:
    repeating-linear-gradient(90deg,#263044 0 9px,#101521 9px 17px);
  border:1px solid rgba(255,255,255,.07);
}

.top-truss{
  left:10%;
  right:10%;
  top:8%;
  height:18px;
  display:flex;
  justify-content:space-around;
  align-items:center;
}

.top-truss i{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#39445a;
  box-shadow:0 0 13px rgba(112,222,255,.18);
  animation:adRigBlink 1.8s ease-in-out infinite alternate;
}

.top-truss i:nth-child(2n){box-shadow:0 0 13px rgba(255,91,194,.18);animation-delay:-.7s}
.top-truss i:nth-child(3n){box-shadow:0 0 13px rgba(255,187,91,.16);animation-delay:-1.1s}

.left-truss,
.right-truss{
  top:8%;
  bottom:8%;
  width:14px;
  background:
    repeating-linear-gradient(180deg,#263044 0 10px,#101521 10px 19px);
}

.left-truss{left:10%}
.right-truss{right:10%}

.ad-stage-screen{
  position:absolute;
  z-index:5;
  top:26%;
  width:19%;
  height:25%;
  display:grid;
  place-items:center;
  align-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(135deg,rgba(77,225,255,.10),rgba(148,78,255,.08)),
    rgba(8,11,20,.82);
  box-shadow:0 0 34px rgba(99,130,255,.07);
  overflow:hidden;
}

.screen-left{left:13%;transform:perspective(400px) rotateY(8deg)}
.screen-right{right:13%;transform:perspective(400px) rotateY(-8deg)}

.ad-stage-screen small{
  color:#78839c;
  font-size:6px;
  font-weight:900;
  letter-spacing:.18em;
}

.ad-stage-screen b{
  margin-top:4px;
  font-size:clamp(24px,3vw,42px);
  line-height:1;
  letter-spacing:-.06em;
}

.ad-stage-screen i{
  width:68%;
  height:3px;
  margin-top:10px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--ad-cyan),var(--ad-violet),var(--ad-pink));
  animation:adMeter 1s ease-in-out infinite alternate;
}

.ad-orb{
  position:absolute;
  z-index:12;
  left:50%;
  top:43%;
  width:174px;
  height:174px;
  padding:0;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.26);
  border-radius:50%;
  background:
    radial-gradient(circle at 29% 22%,rgba(255,255,255,.86),transparent 10%),
    radial-gradient(circle at 69% 73%,rgba(11,13,27,.42),transparent 42%),
    conic-gradient(from 215deg,#6cecff,#7066ff,#d05eff,#ff5ab4,#ffb65f,#71f0d0,#6cecff);
  box-shadow:
    inset -22px -25px 38px rgba(18,13,43,.34),
    inset 0 4px 9px rgba(255,255,255,.22),
    0 0 0 8px rgba(124,105,255,.025),
    0 0 55px rgba(111,105,255,.24),
    0 0 95px rgba(255,85,188,.10);
  cursor:pointer;
  animation:adOrbFloat 4s ease-in-out infinite;
}

.ad-orb::after{
  content:'';
  position:absolute;
  inset:15%;
  border-radius:50%;
  background:
    repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.08) 7px 9px,transparent 9px 14px);
  mask-image:linear-gradient(180deg,transparent 0 38%,black 44% 74%,transparent 83%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0 38%,black 44% 74%,transparent 83%);
  animation:adOrbWave .65s steps(5,end) infinite alternate;
}

.ad-orb-core{
  position:absolute;
  z-index:4;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  color:#fff;
  text-shadow:0 3px 15px rgba(15,15,35,.38);
}

.ad-orb-core b{
  font-size:54px;
  line-height:.85;
  font-weight:950;
  font-style:italic;
}

.ad-orb-core small{
  margin-top:7px;
  font-size:7px;
  font-weight:950;
  letter-spacing:.28em;
}

.ad-orb-ring{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  pointer-events:none;
}

.ring-a{
  width:218px;
  height:76px;
  transform:translate(-50%,-50%) rotate(-28deg);
  border-left-color:transparent;
  animation:adRingA 8s linear infinite;
}

.ring-b{
  width:208px;
  height:68px;
  transform:translate(-50%,-50%) rotate(34deg);
  border-right-color:rgba(106,232,255,.78);
  border-left-color:rgba(255,101,191,.18);
  animation:adRingB 10s linear infinite reverse;
}

.ring-c{
  width:205px;
  height:205px;
  border-color:rgba(155,112,255,.13);
  transform:translate(-50%,-50%);
  animation:adRingPulse 1.7s ease-out infinite;
}

.ad-orb-eq{
  position:absolute;
  left:50%;
  bottom:-46px;
  transform:translateX(-50%);
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:31px;
}

.ad-orb-eq i{
  width:4px;
  height:var(--eh,18px);
  border-radius:99px;
  background:linear-gradient(180deg,#fff,var(--ad-cyan) 52%,var(--ad-violet));
  animation:adEq .55s ease-in-out infinite alternate;
}

.ad-orb-eq i:nth-child(1){--eh:10px;animation-delay:-.1s}
.ad-orb-eq i:nth-child(2){--eh:22px;animation-delay:-.3s}
.ad-orb-eq i:nth-child(3){--eh:16px;animation-delay:-.2s}
.ad-orb-eq i:nth-child(4){--eh:29px;animation-delay:-.45s}
.ad-orb-eq i:nth-child(5){--eh:19px;animation-delay:-.15s}
.ad-orb-eq i:nth-child(6){--eh:27px;animation-delay:-.34s}
.ad-orb-eq i:nth-child(7){--eh:13px;animation-delay:-.08s}
.ad-orb-eq i:nth-child(8){--eh:24px;animation-delay:-.4s}
.ad-orb-eq i:nth-child(9){--eh:11px;animation-delay:-.22s}

.ad-laser-bank{
  position:absolute;
  z-index:9;
  left:50%;
  top:42%;
  width:100%;
  height:100%;
  pointer-events:none;
}

.ad-laser-bank i{
  position:absolute;
  left:50%;
  top:0;
  width:4px;
  height:330px;
  transform-origin:50% 0;
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);
  opacity:.36;
  mix-blend-mode:screen;
  filter:blur(.6px);
}

.laser-left i{
  background:linear-gradient(180deg,var(--ad-cyan),rgba(98,233,255,0));
}

.laser-right i{
  background:linear-gradient(180deg,var(--ad-pink),rgba(255,95,185,0));
}

.laser-left i:nth-child(1){transform:rotate(104deg);animation:adLaserL 2.8s ease-in-out infinite alternate}
.laser-left i:nth-child(2){transform:rotate(118deg);animation:adLaserL 3.4s -.4s ease-in-out infinite alternate}
.laser-left i:nth-child(3){transform:rotate(132deg);animation:adLaserL 2.5s -.8s ease-in-out infinite alternate}
.laser-left i:nth-child(4){transform:rotate(145deg);animation:adLaserL 3.1s -1.1s ease-in-out infinite alternate}
.laser-left i:nth-child(5){transform:rotate(158deg);animation:adLaserL 2.7s -.2s ease-in-out infinite alternate}
.laser-left i:nth-child(6){transform:rotate(171deg);animation:adLaserL 3.5s -.6s ease-in-out infinite alternate}

.laser-right i:nth-child(1){transform:rotate(-104deg);animation:adLaserR 2.8s ease-in-out infinite alternate}
.laser-right i:nth-child(2){transform:rotate(-118deg);animation:adLaserR 3.4s -.4s ease-in-out infinite alternate}
.laser-right i:nth-child(3){transform:rotate(-132deg);animation:adLaserR 2.5s -.8s ease-in-out infinite alternate}
.laser-right i:nth-child(4){transform:rotate(-145deg);animation:adLaserR 3.1s -1.1s ease-in-out infinite alternate}
.laser-right i:nth-child(5){transform:rotate(-158deg);animation:adLaserR 2.7s -.2s ease-in-out infinite alternate}
.laser-right i:nth-child(6){transform:rotate(-171deg);animation:adLaserR 3.5s -.6s ease-in-out infinite alternate}

.ad-beam{
  position:absolute;
  z-index:3;
  bottom:-13%;
  width:90px;
  height:110%;
  transform-origin:50% 100%;
  clip-path:polygon(47% 100%,53% 100%,100% 0,0 0);
  opacity:.075;
  filter:blur(4px);
  mix-blend-mode:screen;
}

.adb1{left:7%;transform:rotate(-17deg);background:linear-gradient(180deg,rgba(99,231,255,0),var(--ad-cyan));animation:adBeamA 7s ease-in-out infinite alternate}
.adb2{left:29%;transform:rotate(8deg);background:linear-gradient(180deg,rgba(150,93,255,0),var(--ad-violet));animation:adBeamB 6s -2s ease-in-out infinite alternate}
.adb3{right:28%;transform:rotate(-6deg);background:linear-gradient(180deg,rgba(255,92,186,0),var(--ad-pink));animation:adBeamA 8s -4s ease-in-out infinite alternate}
.adb4{right:6%;transform:rotate(18deg);background:linear-gradient(180deg,rgba(255,180,91,0),var(--ad-orange));animation:adBeamB 7s -3s ease-in-out infinite alternate}

.ad-drone-show{
  position:absolute;
  z-index:5;
  left:50%;
  top:11%;
  width:150px;
  height:74px;
  transform:translateX(-50%);
  opacity:.46;
}

.ad-drone-show i{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 9px var(--ad-cyan);
  animation:adDroneTwinkle 1.7s ease-in-out infinite alternate;
}

.ad-drone-show i:nth-child(1){left:12%;top:34%}
.ad-drone-show i:nth-child(2){left:22%;top:20%;animation-delay:-.3s}
.ad-drone-show i:nth-child(3){left:32%;top:14%;animation-delay:-.6s}
.ad-drone-show i:nth-child(4){left:41%;top:24%;animation-delay:-.9s}
.ad-drone-show i:nth-child(5){left:31%;top:43%;animation-delay:-1.2s}
.ad-drone-show i:nth-child(6){left:42%;top:56%;animation-delay:-.2s}
.ad-drone-show i:nth-child(7){left:54%;top:47%;animation-delay:-.5s}
.ad-drone-show i:nth-child(8){left:64%;top:60%;animation-delay:-.8s}
.ad-drone-show i:nth-child(9){left:72%;top:48%;animation-delay:-1.1s}
.ad-drone-show i:nth-child(10){left:66%;top:30%;animation-delay:-.4s}
.ad-drone-show i:nth-child(11){left:54%;top:24%;animation-delay:-.7s}
.ad-drone-show i:nth-child(12){left:78%;top:18%;animation-delay:-1s}
.ad-drone-show i:nth-child(13){left:86%;top:30%;animation-delay:-.1s}
.ad-drone-show i:nth-child(14){left:76%;top:71%;animation-delay:-.5s}
.ad-drone-show i:nth-child(15){left:57%;top:76%;animation-delay:-.9s}
.ad-drone-show i:nth-child(16){left:38%;top:73%;animation-delay:-1.2s}

.ad-drone-show b{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.06);
  font-size:62px;
  font-weight:950;
  font-style:italic;
}

.ad-pyro-bank{
  position:absolute;
  z-index:14;
  bottom:16%;
  width:80px;
  height:110px;
  opacity:.26;
}

.pyro-left{left:8%}
.pyro-right{right:8%}

.ad-pyro-bank i{
  position:absolute;
  left:50%;
  bottom:0;
  width:7px;
  height:82px;
  transform-origin:50% 100%;
  border-radius:50% 50% 20% 20%;
  background:linear-gradient(180deg,rgba(255,255,255,0),#ffdc7b 48%,#ff6c70);
  filter:blur(2px);
  animation:adPyroIdle 4.2s ease-in-out infinite;
}

.ad-pyro-bank i:nth-child(1){transform:rotate(-20deg)}
.ad-pyro-bank i:nth-child(2){height:101px;animation-delay:-1.2s}
.ad-pyro-bank i:nth-child(3){transform:rotate(20deg);animation-delay:-2.1s}

.ad-crowd{
  position:absolute;
  z-index:18;
  left:-1%;
  right:-1%;
  bottom:-6px;
  height:112px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  overflow:hidden;
}

.ad-crowd i{
  width:11px;
  height:var(--ch,48px);
  border-radius:50% 50% 4px 4px;
  background:linear-gradient(180deg,#161827,#07080d);
  transform-origin:50% 100%;
  animation:adCrowdBounce .72s var(--cd) ease-in-out infinite alternate;
}

.ad-crowd i:nth-child(4n){--ch:62px}
.ad-crowd i:nth-child(5n){--ch:55px}
.ad-crowd i:nth-child(7n){--ch:69px}
.ad-crowd i:nth-child(9n){--ch:42px}

.ad-stage-marquee{
  position:absolute;
  z-index:20;
  left:50%;
  bottom:19px;
  width:82%;
  min-height:35px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:13px;
  padding:7px 11px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;
  background:rgba(6,8,15,.78);
  backdrop-filter:blur(12px);
}

.ad-stage-marquee span{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:5px;
  color:#9ba5ba;
  font-size:6px;
  font-weight:900;
  letter-spacing:.13em;
}

.ad-stage-marquee span i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ad-pink);
  box-shadow:0 0 9px rgba(255,95,185,.6);
}

.ad-stage-marquee b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#e7ebf6;
  font-size:7px;
  font-weight:900;
  letter-spacing:.09em;
}

.ad-event-ticker{
  min-height:52px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:15px;
  margin-top:18px;
  padding:8px 10px 8px 15px;
  border:1px solid var(--ad-line);
  border-radius:12px;
  background:rgba(9,11,20,.72);
  backdrop-filter:blur(14px);
}

.ad-event-ticker>span{
  color:var(--ad-cyan);
  font-size:6px;
  font-weight:950;
  letter-spacing:.18em;
}

.ad-event-ticker div{
  min-width:0;
  overflow:hidden;
}

.ad-event-ticker b{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#b6bfd3;
  font-size:8px;
  letter-spacing:.08em;
}

.ad-event-ticker button{
  min-height:31px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:rgba(255,255,255,.035);
  color:#8994aa;
  font-size:7px;
  font-weight:900;
  cursor:pointer;
}

.ad-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}

.ad-section-head>div{
  max-width:720px;
}

.ad-section-head span{
  color:var(--ad-cyan);
  font-size:7px;
  font-weight:950;
  letter-spacing:.20em;
}

.ad-section-head h2{
  margin:7px 0 8px;
  font-size:clamp(42px,5vw,72px);
  line-height:.9;
  letter-spacing:-.055em;
}

.ad-section-head p{
  color:#939db2;
  line-height:1.65;
}

.ad-lineup-banner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-height:47px;
  margin-bottom:14px;
  padding:10px 14px;
  border:1px solid var(--ad-line);
  border-radius:11px;
  background:
    linear-gradient(90deg,rgba(94,226,255,.05),rgba(144,87,255,.07),rgba(255,80,182,.045));
}

.ad-lineup-banner span{
  color:#758198;
  font-size:7px;
  font-weight:950;
  letter-spacing:.17em;
}

.ad-lineup-banner b{
  color:#cbd4e5;
  font-size:8px;
  letter-spacing:.10em;
}

.ad-lineup-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.ad-stage-card{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--ad-line);
  border-radius:17px;
  background:linear-gradient(160deg,rgba(19,22,38,.88),rgba(9,11,21,.86));
  box-shadow:0 18px 38px rgba(0,0,0,.14);
  transition:.2s ease;
}

.ad-stage-card:hover{
  transform:translateY(-4px);
  border-color:rgba(111,219,255,.19);
  box-shadow:0 24px 48px rgba(0,0,0,.22),0 0 28px rgba(97,117,255,.05);
}

.ad-stage-thumb{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(135deg,#192144,#441d52);
}

.ad-stage-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:saturate(.86) brightness(.78);
  transition:.25s ease;
}

.ad-stage-card:hover .ad-stage-thumb img{
  transform:scale(1.025);
  filter:saturate(1) brightness(.88);
}

.ad-stage-thumb::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 44%,rgba(5,7,13,.78)),
    linear-gradient(120deg,rgba(96,227,255,.05),transparent 44%,rgba(255,80,188,.07));
}

.ad-live-chip,
.ad-stage-number,
.ad-amb-chip{
  position:absolute;
  z-index:3;
}

.ad-live-chip{
  left:10px;
  top:10px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:5px 7px;
  border-radius:7px;
  background:rgba(237,49,103,.83);
  color:#fff;
  font-size:7px;
  font-weight:950;
}

.ad-live-chip i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff;
  animation:adLivePulse 1s infinite alternate;
}

.ad-stage-number{
  right:10px;
  top:10px;
  color:rgba(255,255,255,.77);
  font:900 22px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}

.ad-amb-chip{
  left:10px;
  bottom:10px;
  padding:4px 6px;
  border:1px solid rgba(255,205,94,.25);
  border-radius:5px;
  color:#ffd67e;
  background:rgba(37,27,13,.62);
  font-size:6px;
  font-weight:950;
  letter-spacing:.10em;
}

.ad-stage-card-copy{
  padding:15px;
}

.ad-stage-card-copy small{
  color:#758197;
  font-size:6px;
  font-weight:900;
  letter-spacing:.12em;
}

.ad-stage-card-copy h3{
  margin:6px 0 6px;
  font-size:22px;
  letter-spacing:-.03em;
}

.ad-stage-card-copy p{
  min-height:40px;
  margin:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  color:#929caf;
  font-size:11px;
  line-height:1.55;
}

.ad-watch-stage{
  width:100%;
  min-height:36px;
  margin-top:12px;
  border:1px solid rgba(107,228,255,.13);
  border-radius:9px;
  color:#bcecf5;
  background:rgba(83,218,245,.055);
  font-size:7px;
  font-weight:950;
  letter-spacing:.11em;
  cursor:pointer;
}

.ad-watch-stage:hover{
  color:#071017;
  background:linear-gradient(90deg,var(--ad-cyan),#a992ff);
}

.ad-stage-offline{
  padding:0;
}

.ad-placeholder-stage{
  display:grid;
  place-items:center;
  align-content:center;
  background:
    radial-gradient(circle at 50% 50%,rgba(101,230,255,.16),transparent 36%),
    linear-gradient(135deg,#161b32,#281830);
}

.ad-placeholder-stage.alt{
  background:
    radial-gradient(circle at 50% 50%,rgba(255,101,190,.13),transparent 36%),
    linear-gradient(135deg,#18182d,#2d1b26);
}

.ad-placeholder-stage span{
  color:#65718b;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}

.ad-placeholder-stage b{
  margin-top:5px;
  font-size:28px;
}

.ad-loading-card{
  grid-column:1/-1;
  min-height:240px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  border:1px solid var(--ad-line);
  border-radius:17px;
  background:rgba(11,13,24,.69);
}

.ad-loading-card i{
  width:31px;
  height:31px;
  margin-bottom:13px;
  border:2px solid rgba(255,255,255,.08);
  border-top-color:var(--ad-cyan);
  border-radius:50%;
  animation:adSpin .8s linear infinite;
}

.ad-loading-card b{
  font-size:10px;
  letter-spacing:.13em;
}

.ad-loading-card span{
  margin-top:6px;
  color:#778299;
  font-size:9px;
}

.ad-loading-card.error b{
  color:#ff91b9;
}

.ad-city-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.55fr);
  gap:18px;
}

.ad-city-map{
  position:relative;
  min-height:620px;
  overflow:hidden;
  border:1px solid var(--ad-line);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 50%,rgba(91,104,255,.08),transparent 34%),
    linear-gradient(145deg,rgba(15,20,35,.97),rgba(7,9,18,.97));
  box-shadow:inset 0 0 80px rgba(70,78,255,.035);
}

.ad-map-grid{
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:
    linear-gradient(rgba(121,174,218,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(121,174,218,.10) 1px,transparent 1px);
  background-size:38px 38px;
  transform:perspective(700px) rotateX(3deg);
}

.ad-map-river{
  position:absolute;
  left:9%;
  top:-10%;
  width:27%;
  height:125%;
  border-left:16px solid rgba(70,218,255,.09);
  border-right:4px solid rgba(70,218,255,.05);
  transform:rotate(21deg);
  filter:blur(.2px);
}

.ad-map-road{
  position:absolute;
  height:3px;
  background:rgba(230,239,255,.07);
  box-shadow:0 0 8px rgba(89,215,255,.03);
}

.road-a{left:-5%;right:9%;top:38%;transform:rotate(-9deg)}
.road-b{left:19%;right:-8%;top:69%;transform:rotate(12deg)}
.road-c{left:51%;top:4%;bottom:3%;width:3px;height:auto;transform:rotate(5deg)}

.ad-zone{
  position:absolute;
  width:124px;
  min-height:73px;
  padding:9px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
  color:#b9c3d5;
  background:rgba(12,15,27,.82);
  text-align:left;
  box-shadow:0 8px 20px rgba(0,0,0,.13);
  cursor:pointer;
  transition:.18s ease;
}

.ad-zone:hover,
.ad-zone.active{
  border-color:rgba(102,228,255,.24);
  background:
    linear-gradient(135deg,rgba(72,220,255,.09),rgba(151,87,255,.10)),
    rgba(12,15,27,.88);
  transform:translateY(-2px);
}

.ad-zone i{
  display:block;
  width:8px;
  height:8px;
  margin-bottom:7px;
  border-radius:50%;
  background:#64728b;
  box-shadow:0 0 0 4px rgba(255,255,255,.02);
}

.ad-zone.active i{
  background:var(--ad-cyan);
  box-shadow:0 0 15px rgba(98,233,255,.48);
}

.ad-zone b{
  display:block;
  color:#e8edf7;
  font-size:10px;
}

.ad-zone span{
  display:block;
  margin-top:2px;
  color:#657089;
  font-size:6px;
  font-weight:900;
  letter-spacing:.10em;
}

.zone-nexus{left:43%;top:40%}
.zone-neon{left:17%;top:23%}
.zone-rooftop{right:10%;top:16%}
.zone-mod{right:19%;bottom:16%}
.zone-arcade{left:11%;bottom:14%}
.zone-vip{left:54%;top:12%}

.ad-zone-card{
  align-self:start;
  position:sticky;
  top:106px;
  padding:25px;
  border:1px solid var(--ad-line);
  border-radius:19px;
  background:linear-gradient(160deg,rgba(18,21,37,.94),rgba(8,10,19,.92));
  box-shadow:0 20px 44px rgba(0,0,0,.17);
}

.ad-zone-card>span{
  color:var(--ad-cyan);
  font-size:7px;
  font-weight:950;
  letter-spacing:.15em;
}

.ad-zone-card h3{
  margin:9px 0 10px;
  font-size:30px;
  line-height:.95;
  letter-spacing:-.04em;
}

.ad-zone-card p{
  min-height:115px;
  color:#929caf;
  font-size:12px;
  line-height:1.7;
}

.ad-zone-bars{
  height:44px;
  display:flex;
  align-items:flex-end;
  gap:5px;
  margin:18px 0;
}

.ad-zone-bars i{
  flex:1;
  height:var(--zbh,35%);
  border-radius:4px 4px 1px 1px;
  background:linear-gradient(180deg,var(--ad-cyan),var(--ad-violet));
  animation:adZoneBar .8s ease-in-out infinite alternate;
}

.ad-zone-bars i:nth-child(1){--zbh:45%}
.ad-zone-bars i:nth-child(2){--zbh:78%;animation-delay:-.2s}
.ad-zone-bars i:nth-child(3){--zbh:56%;animation-delay:-.4s}
.ad-zone-bars i:nth-child(4){--zbh:94%;animation-delay:-.6s}
.ad-zone-bars i:nth-child(5){--zbh:67%;animation-delay:-.3s}

.ad-zone-card .ad-primary{
  width:100%;
}

.ad-afterhours-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
}

.ad-ah-card{
  min-height:270px;
  padding:23px;
  border:1px solid var(--ad-line);
  border-radius:18px;
  background:
    radial-gradient(circle at 100% 0,rgba(121,91,255,.07),transparent 34%),
    linear-gradient(150deg,rgba(18,21,36,.89),rgba(8,10,19,.91));
  box-shadow:0 18px 38px rgba(0,0,0,.13);
}

.ad-ah-card>span{
  color:#748198;
  font-size:7px;
  font-weight:950;
  letter-spacing:.17em;
}

.ad-ah-card h3{
  margin:8px 0 10px;
  font-size:29px;
  letter-spacing:-.04em;
}

.ad-ah-card p,
.ad-ah-card li{
  color:#929caf;
  font-size:11px;
  line-height:1.68;
}

.ad-avatars{
  display:flex;
  margin-top:26px;
}

.ad-avatars i{
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  margin-left:-7px;
  border:3px solid #111421;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#4de6ff,#855fff 58%,#ff60b8);
  font-size:9px;
  font-weight:950;
  font-style:normal;
}

.ad-avatars i:first-child{margin-left:0}
.ad-avatars i:nth-child(2){background:linear-gradient(145deg,#ff60b8,#875fff)}
.ad-avatars i:nth-child(3){background:linear-gradient(145deg,#ffba5f,#ff5e96)}
.ad-avatars i:nth-child(4){background:#24283a;color:#8e98ae}

.ad-chaos-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:20px;
}

.ad-chaos-buttons button{
  min-height:59px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
  color:#c9d2e3;
  background:rgba(255,255,255,.035);
  font-size:8px;
  font-weight:950;
  letter-spacing:.08em;
  cursor:pointer;
  transition:.18s ease;
}

.ad-chaos-buttons button:hover{
  border-color:rgba(110,226,255,.18);
  background:linear-gradient(135deg,rgba(88,220,255,.08),rgba(154,87,255,.09),rgba(255,84,187,.06));
  color:white;
  transform:translateY(-2px);
}

.ad-event-log{
  max-height:160px;
  overflow:auto;
  margin-top:14px;
  padding-right:5px;
}

.ad-event-log p{
  margin:0;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
  color:#8d98ad;
  font-size:9px;
}

.ad-event-log p b{
  margin-right:8px;
  color:#5edff5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

.ad-rules-card ul{
  margin:16px 0 0;
  padding-left:18px;
}

.ad-rules-card li{
  margin:8px 0;
}

.ad-footer{
  position:relative;
  z-index:3;
  min-height:60px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:12px clamp(18px,3vw,48px);
  border-top:1px solid rgba(255,255,255,.07);
  color:#59657c;
  background:rgba(5,7,13,.68);
  font-size:6px;
  font-weight:900;
  letter-spacing:.12em;
}

.ad-footer>span:last-child{
  text-align:right;
}

.ad-footer div{
  display:flex;
  align-items:center;
  gap:7px;
  color:#78849b;
  text-align:center;
}

.ad-footer i{
  color:#414a60;
}

.ad-footer kbd{
  padding:3px 5px;
  border:1px solid rgba(255,255,255,.12);
  border-bottom-color:rgba(255,255,255,.20);
  border-radius:5px;
  color:#b9c4d5;
  background:#121623;
  box-shadow:0 2px #080a10;
  font:900 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Event-state effects */
.afterdark-site.bass-drop .ad-stage-scene{
  animation:adStageKick .32s cubic-bezier(.18,.7,.22,1) 3;
}

.afterdark-site.bass-drop .ad-orb{
  animation:adBassOrb .28s cubic-bezier(.2,.8,.2,1) 4!important;
}

.afterdark-site.bass-drop .ad-laser-bank i{
  opacity:.72;
  filter:blur(.25px) brightness(1.45);
}

.afterdark-site.bass-drop .ad-stage-screen,
.afterdark-site.event-flash .ad-stage-screen{
  filter:brightness(1.35);
}

.afterdark-site.crowd-wave .ad-crowd i{
  animation:adCrowdWave 1.2s calc(var(--ci) * .018s) cubic-bezier(.2,.8,.2,1) 1!important;
}

.afterdark-site.pyro-hit .ad-pyro-bank{
  opacity:1;
}

.afterdark-site.pyro-hit .ad-pyro-bank i{
  animation:adPyroBlast .52s ease-out 2!important;
}

.afterdark-site.overdrive .ad-stage-scene{
  box-shadow:
    inset 0 1px rgba(255,255,255,.09),
    0 38px 90px rgba(0,0,0,.26),
    0 0 110px rgba(112,92,255,.14),
    0 0 145px rgba(255,81,188,.08);
  animation:adOverdriveStage .23s ease-in-out 9 alternate;
}

.afterdark-site.overdrive .ad-laser-bank i{
  opacity:.92;
  filter:blur(0) brightness(1.6);
}

.afterdark-site.overdrive .ad-searchlight{
  opacity:.18;
}

.afterdark-site.overdrive .ad-orb{
  animation:adOverdriveOrb .22s ease-in-out 10 alternate!important;
}

.ad-confetti-burst{
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  overflow:hidden;
}

.ad-confetti-burst i{
  position:absolute;
  left:50%;
  top:43%;
  width:7px;
  height:13px;
  border-radius:2px;
  background:hsl(calc(var(--i) * 31deg) 90% 67%);
  animation:adConfetti 2.1s var(--d) cubic-bezier(.1,.6,.3,1) both;
}

/* Entry / exit screens */
.egg-afterdark{
  z-index:9100;
  background:
    radial-gradient(circle at 50% 50%,rgba(120,83,255,.18),transparent 29%),
    radial-gradient(circle at 50% 68%,rgba(255,81,188,.10),transparent 31%),
    #070812;
}

.ad-entry-scene{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  overflow:hidden;
  text-align:center;
}

.ad-entry-logo{
  position:relative;
  z-index:3;
  width:88px;
  height:88px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.86),transparent 11%),
    conic-gradient(var(--ad-cyan,#62e9ff),#9060ff,#ff5fb9,#ffb35e,#62e9ff);
  color:#fff;
  box-shadow:0 0 54px rgba(127,88,255,.25);
  animation:adEntryLogo .8s cubic-bezier(.2,.8,.2,1) both;
}

.ad-entry-logo b{
  font-size:39px;
  font-style:italic;
  font-weight:950;
}

.ad-entry-ring{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:adEntryRing 1.4s ease-out both;
}

.er1{width:260px;height:260px}
.er2{width:500px;height:500px;animation-delay:.12s}
.er3{width:760px;height:760px;animation-delay:.24s}

.ad-entry-scene small{
  position:relative;
  z-index:3;
  color:#8290a9;
  font-size:8px;
  font-weight:950;
  letter-spacing:.30em;
}

.ad-entry-scene>strong{
  position:relative;
  z-index:3;
  margin:8px 0 13px;
  font-size:clamp(68px,12vw,152px);
  line-height:.75;
  letter-spacing:-.075em;
  background:linear-gradient(90deg,#67eaff,#a678ff 45%,#ff64b8 72%,#ffb65f);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 28px rgba(128,81,255,.18));
  animation:adEntryWord 1s .08s cubic-bezier(.2,.8,.2,1) both;
}

.ad-entry-scene>span:last-child{
  position:relative;
  z-index:3;
  color:#8d99af;
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
}

.egg-afterdark-exit{
  z-index:9100;
  background:
    radial-gradient(circle at 50% 50%,rgba(94,214,255,.10),transparent 28%),
    linear-gradient(180deg,#090b16,#101426 58%,#070911);
}

.ad-exit-scene{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  overflow:hidden;
}

.ad-exit-scene::before{
  content:'';
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:0;
  height:42%;
  background:
    linear-gradient(90deg,transparent 0 3%,#111522 3% 9%,transparent 9% 12%,#0c101c 12% 20%,transparent 20% 23%,#141827 23% 34%,transparent 34% 39%,#0e1220 39% 48%,transparent 48% 52%,#131726 52% 61%,transparent 61% 66%,#0d111d 66% 77%,transparent 77% 82%,#141827 82% 91%,transparent 91%),
    linear-gradient(180deg,transparent,#05070c);
  opacity:.85;
}

.ad-exit-line{
  position:absolute!important;
  left:10%;
  right:10%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--ad-cyan,#62e9ff),#a46dff,#ff68ba,transparent);
  box-shadow:0 0 24px rgba(113,173,255,.24);
  animation:adExitLine 1.1s ease-out both;
}

.ad-exit-scene small,
.ad-exit-scene strong,
.ad-exit-scene>span:last-child{
  position:relative;
  z-index:3;
}

.ad-exit-scene small{
  color:#7d8aa2;
  font-size:8px;
  font-weight:950;
  letter-spacing:.27em;
}

.ad-exit-scene strong{
  margin:9px 0 14px;
  color:#fff;
  font-size:clamp(58px,9vw,118px);
  line-height:.78;
  letter-spacing:-.065em;
  text-shadow:0 0 40px rgba(112,99,255,.14);
  animation:adExitCopy 1s ease-out both;
}

.ad-exit-scene>span:last-child{
  color:#7f8ba2;
  font-size:7px;
  font-weight:900;
  letter-spacing:.15em;
}

/* Responsive AFTERDARK */
@media(max-width:1180px){
  .ad-header{
    grid-template-columns:1fr auto;
  }

  .ad-nav{
    grid-row:2;
    grid-column:1/-1;
    justify-self:stretch;
    justify-content:center;
  }

  .ad-festival-hero{
    grid-template-columns:1fr;
    padding-top:16px;
  }

  .ad-hero-copy{
    max-width:840px;
  }

  .ad-mainstage-wrap{
    width:min(850px,100%);
    margin:0 auto;
  }

  .ad-lineup-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ad-city-layout{
    grid-template-columns:1fr;
  }

  .ad-zone-card{
    position:relative;
    top:auto;
  }
}

@media(max-width:760px){
  .ad-header{
    position:sticky;
    min-height:auto;
    grid-template-columns:1fr auto;
    gap:10px;
    padding:10px 13px;
  }

  .ad-brand-orb{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  .ad-brand-copy strong{
    font-size:14px;
  }

  .ad-clock{
    display:none;
  }

  .ad-exit{
    min-height:38px;
    padding:0 9px;
    font-size:7px;
  }

  .ad-nav{
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
    border-radius:11px;
  }

  .ad-nav::-webkit-scrollbar{
    display:none;
  }

  .ad-nav button{
    flex:0 0 auto;
    min-height:36px;
  }

  .ad-main{
    width:calc(100% - 24px);
    padding:30px 0 48px;
  }

  .ad-festival-hero{
    min-height:auto;
    gap:38px;
  }

  .ad-hero-copy h1{
    font-size:clamp(58px,18vw,94px);
  }

  .ad-hero-copy p{
    font-size:13px;
  }

  .ad-mini-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
  }

  .ad-mini-stats div{
    min-width:0;
  }

  .ad-stage-scene{
    height:460px;
    border-radius:19px;
  }

  .ad-orb{
    width:138px;
    height:138px;
  }

  .ad-orb-core b{
    font-size:44px;
  }

  .ring-a,
  .ring-b{
    width:174px;
  }

  .ring-c{
    width:168px;
    height:168px;
  }

  .ad-stage-screen{
    width:23%;
  }

  .screen-left{left:11%}
  .screen-right{right:11%}

  .ad-crowd{
    height:91px;
  }

  .ad-crowd i:nth-child(n+40){
    display:none;
  }

  .ad-event-ticker{
    grid-template-columns:1fr auto;
  }

  .ad-event-ticker>span{
    display:none;
  }

  .ad-section-head{
    display:grid;
    align-items:start;
  }

  .ad-lineup-grid{
    grid-template-columns:1fr;
  }

  .ad-lineup-banner{
    display:grid;
  }

  .ad-city-map{
    min-height:500px;
  }

  .ad-zone{
    width:105px;
    min-height:64px;
  }

  .zone-nexus{left:38%;top:41%}
  .zone-neon{left:7%;top:23%}
  .zone-rooftop{right:4%;top:14%}
  .zone-mod{right:8%;bottom:16%}
  .zone-arcade{left:5%;bottom:13%}
  .zone-vip{left:47%;top:10%}

  .ad-afterhours-grid{
    grid-template-columns:1fr;
  }

  .ad-footer{
    grid-template-columns:1fr;
    text-align:center;
  }

  .ad-footer>span:last-child{
    text-align:center;
  }

  .ad-footer div{
    justify-content:center;
    flex-wrap:wrap;
  }
}

@media(max-width:480px){
  .ad-brand-copy small{
    font-size:6px;
  }

  .ad-brand-copy strong{
    font-size:12px;
  }

  .ad-header-actions{
    gap:5px;
  }

  .ad-exit{
    padding:0 7px;
    font-size:6px;
  }

  .ad-hero-actions{
    display:grid;
  }

  .ad-primary,
  .ad-secondary{
    width:100%;
  }

  .ad-mini-stats div{
    padding:9px 7px;
  }

  .ad-mini-stats b{
    font-size:16px;
  }

  .ad-stage-scene{
    height:405px;
  }

  .ad-stage-screen{
    top:22%;
    height:20%;
  }

  .ad-stage-screen b{
    font-size:19px;
  }

  .ad-drone-show{
    display:none;
  }

  .ad-stage-marquee{
    width:92%;
  }

  .ad-city-map{
    min-height:570px;
  }

  .ad-zone{
    width:96px;
    padding:7px;
  }

  .zone-nexus{left:34%;top:42%}
  .zone-neon{left:3%;top:25%}
  .zone-rooftop{right:3%;top:15%}
  .zone-mod{right:4%;bottom:18%}
  .zone-arcade{left:4%;bottom:14%}
  .zone-vip{left:41%;top:10%}

  .ad-chaos-buttons{
    grid-template-columns:1fr;
  }
}

/* Motion */
@keyframes adSkyBreath{to{transform:translateX(-50%) scale(1.08);opacity:.82}}
@keyframes adStarDrift{to{transform:scale(1.15) translateY(40px)}}
@keyframes adHazeShift{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
@keyframes adSearchA{from{transform:rotate(-25deg)}to{transform:rotate(18deg)}}
@keyframes adSearchB{from{transform:rotate(24deg)}to{transform:rotate(-18deg)}}
@keyframes adBrandOrbit{to{transform:rotate(336deg) scaleY(.58)}}
@keyframes adPanelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes adLivePulse{from{opacity:.45;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}
@keyframes adRigBlink{from{filter:brightness(.65)}to{filter:brightness(1.35)}}
@keyframes adMeter{from{transform:scaleX(.36)}to{transform:scaleX(1)}}
@keyframes adOrbFloat{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-7px)}}
@keyframes adOrbWave{from{transform:scaleY(.65)}to{transform:scaleY(1.12)}}
@keyframes adRingA{to{transform:translate(-50%,-50%) rotate(332deg)}}
@keyframes adRingB{to{transform:translate(-50%,-50%) rotate(394deg)}}
@keyframes adRingPulse{0%{opacity:.45;transform:translate(-50%,-50%) scale(.92)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.34)}}
@keyframes adEq{from{transform:scaleY(.35);opacity:.5}to{transform:scaleY(1.08);opacity:1}}
@keyframes adLaserL{from{opacity:.14;filter:blur(1px)}to{opacity:.48;filter:blur(.25px) brightness(1.2)}}
@keyframes adLaserR{from{opacity:.13;filter:blur(1px)}to{opacity:.46;filter:blur(.25px) brightness(1.2)}}
@keyframes adBeamA{from{transform:rotate(-22deg)}to{transform:rotate(17deg)}}
@keyframes adBeamB{from{transform:rotate(20deg)}to{transform:rotate(-15deg)}}
@keyframes adDroneTwinkle{from{opacity:.28;transform:scale(.8)}to{opacity:1;transform:scale(1.25)}}
@keyframes adPyroIdle{0%,83%,100%{opacity:0;transform:scaleY(.2)}88%{opacity:.6;transform:scaleY(.85)}93%{opacity:.25;transform:scaleY(1)}}
@keyframes adCrowdBounce{from{transform:scaleY(.92) rotate(-1deg)}to{transform:scaleY(1.06) rotate(1deg)}}
@keyframes adZoneBar{from{transform:scaleY(.45);opacity:.5}to{transform:scaleY(1);opacity:1}}
@keyframes adSpin{to{transform:rotate(360deg)}}
@keyframes adStageKick{50%{transform:scale(1.008);filter:brightness(1.08)}}
@keyframes adBassOrb{from{transform:translate(-50%,-50%) scale(.96)}to{transform:translate(-50%,-50%) scale(1.07);filter:brightness(1.15)}}
@keyframes adCrowdWave{0%,100%{transform:translateY(0)}45%{transform:translateY(-28px) scaleY(1.1)}}
@keyframes adPyroBlast{0%{opacity:0;transform:scaleY(.1)}35%{opacity:1}100%{opacity:0;transform:scaleY(1.3)}}
@keyframes adOverdriveStage{from{filter:brightness(.94) saturate(1)}to{filter:brightness(1.18) saturate(1.25)}}
@keyframes adOverdriveOrb{from{transform:translate(-50%,-50%) scale(.96)}to{transform:translate(-50%,-50%) scale(1.11);filter:brightness(1.2)}}
@keyframes adConfetti{
  0%{transform:translate(-50%,-50%) scale(.7) rotate(0);opacity:0}
  12%{opacity:1}
  100%{transform:translate(calc(-50% + var(--x)*8px),75vh) rotate(var(--r));opacity:0}
}
@keyframes adEntryLogo{from{opacity:0;transform:scale(.4) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes adEntryRing{from{opacity:.45;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
@keyframes adEntryWord{from{opacity:0;letter-spacing:.08em;transform:scale(.84)}to{opacity:1;letter-spacing:-.075em;transform:scale(1)}}
@keyframes adExitLine{from{opacity:0;transform:scaleX(.05)}to{opacity:1;transform:scaleX(1)}}
@keyframes adExitCopy{from{opacity:0;transform:translateY(15px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}

.afterdark-site.site-enter .ad-header{
  animation:adHeaderEnter .8s .15s cubic-bezier(.2,.8,.2,1) both;
}

.afterdark-site.site-enter .ad-main{
  animation:adMainEnter .9s .22s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes adHeaderEnter{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes adMainEnter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .afterdark-site *,
  .afterdark-site *::before,
  .afterdark-site *::after,
  .egg-afterdark *,
  .egg-afterdark-exit *{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
}


/* ============================================================
   AFTERDARK RADIO + live audio reactivity
   ============================================================ */
.afterdark-site{
  --ad-energy:0;
  --ad-bass:0;
  --ad-mid:0;
  --ad-high:0;
  --ad-beat-duration:.465s;
}

.ad-music-dock{
  position:fixed;
  z-index:42;
  right:18px;
  bottom:76px;
  width:min(390px,calc(100vw - 36px));
  padding:10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0,rgba(151,91,255,.10),transparent 38%),
    linear-gradient(150deg,rgba(13,16,28,.92),rgba(6,8,15,.92));
  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.055);
  backdrop-filter:blur(20px) saturate(125%);
  -webkit-backdrop-filter:blur(20px) saturate(125%);
  transition:.2s ease;
}

.ad-music-dock::before{
  content:'';
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:inherit;
  padding:1px;
  background:
    linear-gradient(
      110deg,
      color-mix(in srgb,var(--ad-cyan) 35%,transparent),
      color-mix(in srgb,var(--ad-violet) 28%,transparent),
      color-mix(in srgb,var(--ad-pink) 27%,transparent)
    );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

.ad-music-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  padding:0 3px 7px;
}

.ad-radio-state{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  color:#aab5ca;
}

.ad-radio-state i{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--ad-cyan);
  box-shadow:0 0 10px color-mix(in srgb,var(--ad-cyan) 62%,transparent);
}

.ad-radio-state b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:6px;
  font-weight:950;
  letter-spacing:.12em;
}

#adAfterdarkDummy{}

#afterdarkBroadcastLock{
  flex:0 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#68748c;
  font-size:5.5px;
  font-weight:950;
  letter-spacing:.08em;
  text-align:right;
}

#afterdarkBroadcastLock.is-live-lock{
  color:#ff8cac;
  text-shadow:0 0 10px rgba(255,81,139,.12);
}

.ad-music-main{
  display:grid;
  grid-template-columns:34px 42px minmax(0,1fr) 34px;
  align-items:center;
  gap:7px;
}

.ad-track-btn,
.ad-play-btn{
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.09);
  color:#dce5f4;
  background:rgba(255,255,255,.035);
  cursor:pointer;
  transition:.16s ease;
}

.ad-track-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  font-size:19px;
  line-height:1;
}

.ad-play-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  color:#081018;
  background:
    linear-gradient(135deg,var(--ad-cyan),var(--ad-violet) 58%,var(--ad-pink));
  box-shadow:0 6px 18px color-mix(in srgb,var(--ad-violet) 18%,transparent);
  font-size:13px;
  font-weight:950;
}

.ad-track-btn:hover,
.ad-play-btn:hover:not(:disabled){
  transform:translateY(-1px);
  filter:brightness(1.12);
}

.ad-play-btn:disabled{
  cursor:not-allowed;
  color:#d8b1bd;
  background:rgba(255,79,137,.09);
  border-color:rgba(255,103,150,.14);
  box-shadow:none;
}

.ad-track-meta{
  min-width:0;
  display:grid;
}

.ad-track-meta>small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#78849b;
  font-size:5.5px;
  font-weight:950;
  letter-spacing:.13em;
}

.ad-track-meta>b{
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f2f6ff;
  font-size:10px;
  letter-spacing:.02em;
}

.ad-progress-row{
  display:grid;
  grid-template-columns:29px minmax(0,1fr) 29px;
  align-items:center;
  gap:6px;
  margin-top:5px;
}

.ad-progress-row span{
  color:#68758d;
  font:800 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
}

.ad-progress-row span:last-child{
  text-align:right;
}

.ad-progress-row input,
.ad-volume-row input{
  appearance:none;
  -webkit-appearance:none;
  height:4px;
  margin:0;
  border-radius:999px;
  outline:0;
  cursor:pointer;
}

.ad-progress-row input{
  --ad-progress:0%;
  background:
    linear-gradient(
      90deg,
      var(--ad-cyan) 0,
      var(--ad-violet) var(--ad-progress),
      rgba(255,255,255,.10) var(--ad-progress),
      rgba(255,255,255,.10) 100%
    );
}

.ad-volume-row input{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--ad-cyan) 72%,white) 0,
      var(--ad-violet) 100%
    );
  opacity:.74;
}

.ad-progress-row input::-webkit-slider-thumb,
.ad-volume-row input::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:11px;
  height:11px;
  border:2px solid rgba(255,255,255,.86);
  border-radius:50%;
  background:var(--ad-violet);
  box-shadow:0 0 8px color-mix(in srgb,var(--ad-violet) 40%,transparent);
}

.ad-progress-row input::-moz-range-thumb,
.ad-volume-row input::-moz-range-thumb{
  width:8px;
  height:8px;
  border:2px solid rgba(255,255,255,.86);
  border-radius:50%;
  background:var(--ad-violet);
}

.ad-volume-row{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 34px;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.055);
}

.ad-volume-row button{
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:8px;
  color:#dce5f3;
  background:rgba(255,255,255,.035);
  cursor:pointer;
}

.ad-volume-row span{
  color:#717d94;
  font:850 6px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-align:right;
}

/* Live-broadcast priority lock. */
.afterdark-site.broadcast-live-lock .ad-music-dock{
  border-color:rgba(255,99,145,.20);
  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.055),
    0 0 30px rgba(255,72,127,.045);
}

.afterdark-site.broadcast-live-lock .ad-radio-state i{
  background:#ff658f;
  box-shadow:0 0 12px rgba(255,80,132,.48);
  animation:adBroadcastLockPulse .9s ease-in-out infinite alternate;
}

/* Actual analyser values control the festival lighting. */
.afterdark-site.music-reactive.music-playing .ad-orb-eq i{
  animation:none!important;
  transform-origin:50% 100%;
  transition:transform 42ms linear,opacity 42ms linear;
}

.afterdark-site.music-playing .ad-stage-scene{
  filter:
    brightness(calc(1 + var(--ad-energy) * .10))
    saturate(calc(1 + var(--ad-energy) * .16));
}

.afterdark-site.music-playing .ad-stage-scene::after{
  content:'';
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--ad-violet) calc(8% + var(--ad-bass) * 20%),transparent),transparent 35%),
    radial-gradient(circle at 28% 58%,color-mix(in srgb,var(--ad-cyan) calc(5% + var(--ad-high) * 18%),transparent),transparent 30%),
    radial-gradient(circle at 73% 58%,color-mix(in srgb,var(--ad-pink) calc(5% + var(--ad-mid) * 16%),transparent),transparent 31%);
  opacity:calc(.36 + var(--ad-energy) * .62);
  mix-blend-mode:screen;
}

.afterdark-site.music-playing .ad-orb{
  filter:
    brightness(calc(1 + var(--ad-bass) * .23))
    saturate(calc(1 + var(--ad-energy) * .34));
  box-shadow:
    inset -22px -25px 38px rgba(18,13,43,.34),
    inset 0 4px 9px rgba(255,255,255,.22),
    0 0 0 calc(8px + var(--ad-bass) * 10px) color-mix(in srgb,var(--ad-violet) 5%,transparent),
    0 0 calc(45px + var(--ad-bass) * 62px) color-mix(in srgb,var(--ad-violet) 28%,transparent),
    0 0 calc(70px + var(--ad-high) * 70px) color-mix(in srgb,var(--ad-pink) 13%,transparent);
}

.afterdark-site.music-playing .ad-laser-bank i{
  opacity:calc(.12 + var(--ad-high) * .72);
  filter:blur(calc(1px - var(--ad-high) * .72px))
         brightness(calc(.95 + var(--ad-high) * .62));
}

.afterdark-site.music-playing .ad-searchlight{
  opacity:calc(.045 + var(--ad-high) * .15);
}

.afterdark-site.music-playing .ad-stage-screen{
  filter:brightness(calc(.92 + var(--ad-mid) * .48));
}

.afterdark-site.music-playing .ad-stage-screen i{
  animation:none!important;
  transform-origin:left center;
  transform:scaleX(calc(.24 + var(--ad-mid) * .78));
}

.afterdark-site.music-playing .ad-drone-show{
  opacity:calc(.24 + var(--ad-high) * .72);
}

.afterdark-site.music-playing .ad-crowd{
  transform:translateY(calc(var(--ad-bass) * -5px));
}

.afterdark-site.music-playing .ad-haze{
  opacity:calc(.72 + var(--ad-energy) * .28);
  filter:blur(calc(30px - var(--ad-bass) * 8px));
}

.afterdark-site.music-playing .ad-radio-state i{
  animation:adRadioBeat var(--ad-beat-duration) ease-in-out infinite alternate;
}

/* Strong bass peak detected by the analyser. */
.afterdark-site.music-beat .ad-orb{
  transform:translate(-50%,-50%) scale(1.055)!important;
}

.afterdark-site.music-beat .ad-stage-truss{
  filter:brightness(1.18);
}

.afterdark-site.music-beat .ad-stage-screen{
  box-shadow:
    0 0 28px color-mix(in srgb,var(--ad-cyan) 10%,transparent),
    inset 0 0 22px color-mix(in srgb,var(--ad-violet) 8%,transparent);
}

.afterdark-site.music-beat .ad-crowd{
  margin-bottom:3px;
}

/* Paused for a live broadcaster: the stage settles into broadcast mode. */
.afterdark-site.broadcast-live-lock .ad-orb-eq i{
  animation:none!important;
  transform:scaleY(.18)!important;
  opacity:.28!important;
}

.afterdark-site.broadcast-live-lock .ad-laser-bank i{
  opacity:.08!important;
}

.afterdark-site.broadcast-live-lock .ad-stage-screen.screen-left{
  border-color:rgba(255,91,132,.19);
}

.afterdark-site.broadcast-live-lock .screen-left small{
  color:#ff8fae;
}

@keyframes adRadioBeat{
  from{transform:scale(.80);opacity:.48}
  to{transform:scale(1.25);opacity:1}
}

@keyframes adBroadcastLockPulse{
  from{opacity:.45;transform:scale(.78)}
  to{opacity:1;transform:scale(1.22)}
}

@media(max-width:1180px){
  .ad-music-dock{
    bottom:72px;
  }
}

@media(max-width:760px){
  .ad-music-dock{
    right:10px;
    bottom:10px;
    width:min(360px,calc(100vw - 20px));
    border-radius:14px;
  }

  .ad-footer{
    padding-bottom:154px;
  }
}

@media(max-width:420px){
  .ad-music-dock{
    padding:8px;
  }

  .ad-music-main{
    grid-template-columns:31px 39px minmax(0,1fr) 31px;
    gap:5px;
  }

  .ad-track-btn{
    width:31px;
    height:31px;
  }

  .ad-play-btn{
    width:39px;
    height:39px;
  }

  .ad-track-meta>b{
    font-size:9px;
  }

  #afterdarkBroadcastLock{
    max-width:135px;
  }
}

@media(prefers-reduced-motion:reduce){
  .afterdark-site.music-playing .ad-radio-state i,
  .afterdark-site.broadcast-live-lock .ad-radio-state i{
    animation:none!important;
  }
}


/* ============================================================
   AFTERDARK smoother analyser + full-screen bass laser system
   ============================================================ */
.afterdark-site{
  --ad-impact:0;
  --ad-impact-x:50%;
  --ad-impact-y:50%;
}

/* Keep the normal audio-reactive surfaces fluid. */
.afterdark-site.music-playing .ad-stage-scene,
.afterdark-site.music-playing .ad-orb,
.afterdark-site.music-playing .ad-laser-bank i,
.afterdark-site.music-playing .ad-searchlight,
.afterdark-site.music-playing .ad-stage-screen,
.afterdark-site.music-playing .ad-drone-show,
.afterdark-site.music-playing .ad-crowd,
.afterdark-site.music-playing .ad-haze{
  transition:
    filter 90ms linear,
    opacity 90ms linear,
    transform 90ms cubic-bezier(.2,.7,.3,1),
    box-shadow 110ms linear;
}

.afterdark-site.music-reactive.music-playing .ad-orb-eq i{
  transition:none!important;
  will-change:transform,opacity;
}

.afterdark-site.music-playing .ad-crowd i{
  animation-duration:calc(.80s - var(--ad-energy) * .18s);
}

.afterdark-site.music-playing .ad-orb{
  animation-duration:calc(4.2s - var(--ad-bass) * .85s);
}

/* Fixed layer reaches across every AFTERDARK view, not only the main stage. */
.ad-fullscreen-fx{
  position:fixed;
  inset:0;
  z-index:24;
  overflow:hidden;
  pointer-events:none;
  opacity:1;
  mix-blend-mode:screen;
}

.ad-full-flash{
  position:absolute;
  inset:0;
  opacity:0;
  background:
    radial-gradient(
      circle at var(--ad-impact-x) var(--ad-impact-y),
      rgba(255,255,255,.24),
      color-mix(in srgb,var(--ad-cyan) 17%,transparent) 16%,
      color-mix(in srgb,var(--ad-violet) 9%,transparent) 34%,
      transparent 58%
    );
}

.ad-full-ring{
  position:absolute;
  left:var(--ad-impact-x);
  top:var(--ad-impact-y);
  width:16vmin;
  height:16vmin;
  border:2px solid color-mix(in srgb,var(--ad-cyan) 65%,white);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.3);
  box-shadow:
    0 0 26px color-mix(in srgb,var(--ad-cyan) 34%,transparent),
    inset 0 0 20px color-mix(in srgb,var(--ad-violet) 18%,transparent);
}

.ad-full-ring.ring-two{
  border-color:color-mix(in srgb,var(--ad-pink) 52%,white);
}

.ad-full-lasers{
  position:absolute;
  inset:0;
  opacity:0;
  filter:brightness(calc(.9 + var(--ad-impact) * .45));
}

.ad-full-lasers i{
  position:absolute;
  width:7px;
  height:125vmax;
  transform-origin:50% 0;
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
  filter:blur(.45px);
  opacity:.78;
}

.ad-full-lasers-left i{
  left:-1vw;
  top:78vh;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--ad-cyan) 88%,white),
      color-mix(in srgb,var(--ad-cyan) 38%,transparent) 34%,
      transparent 78%
    );
}

.ad-full-lasers-right i{
  right:-1vw;
  top:78vh;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--ad-pink) 84%,white),
      color-mix(in srgb,var(--ad-pink) 34%,transparent) 35%,
      transparent 79%
    );
}

.ad-full-lasers-top i{
  left:50%;
  top:-5vh;
  height:116vmax;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--ad-violet) 78%,white),
      color-mix(in srgb,var(--ad-violet) 31%,transparent) 35%,
      transparent 78%
    );
}

.ad-full-lasers-left i:nth-child(1){transform:rotate(-77deg)}
.ad-full-lasers-left i:nth-child(2){transform:rotate(-69deg)}
.ad-full-lasers-left i:nth-child(3){transform:rotate(-61deg)}
.ad-full-lasers-left i:nth-child(4){transform:rotate(-53deg)}
.ad-full-lasers-left i:nth-child(5){transform:rotate(-45deg)}
.ad-full-lasers-left i:nth-child(6){transform:rotate(-37deg)}
.ad-full-lasers-left i:nth-child(7){transform:rotate(-29deg)}

.ad-full-lasers-right i:nth-child(1){transform:rotate(77deg)}
.ad-full-lasers-right i:nth-child(2){transform:rotate(69deg)}
.ad-full-lasers-right i:nth-child(3){transform:rotate(61deg)}
.ad-full-lasers-right i:nth-child(4){transform:rotate(53deg)}
.ad-full-lasers-right i:nth-child(5){transform:rotate(45deg)}
.ad-full-lasers-right i:nth-child(6){transform:rotate(37deg)}
.ad-full-lasers-right i:nth-child(7){transform:rotate(29deg)}

.ad-full-lasers-top i:nth-child(1){transform:translateX(-50%) rotate(-35deg)}
.ad-full-lasers-top i:nth-child(2){transform:translateX(-50%) rotate(-17deg)}
.ad-full-lasers-top i:nth-child(3){transform:translateX(-50%) rotate(0)}
.ad-full-lasers-top i:nth-child(4){transform:translateX(-50%) rotate(17deg)}
.ad-full-lasers-top i:nth-child(5){transform:translateX(-50%) rotate(35deg)}

.ad-bass-horizon{
  position:absolute;
  left:-15%;
  right:-15%;
  top:50%;
  height:2px;
  opacity:0;
  transform:scaleX(.15);
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ad-cyan) 24%,
      white 50%,
      var(--ad-pink) 76%,
      transparent
    );
  box-shadow:
    0 0 14px color-mix(in srgb,var(--ad-cyan) 38%,transparent),
    0 0 30px color-mix(in srgb,var(--ad-pink) 22%,transparent);
}

/* Kick impact. Short, bright, and synced to the actual analyser transient. */
.afterdark-site.bass-impact .ad-full-flash{
  animation:adFullFlash 360ms cubic-bezier(.1,.68,.22,1) both;
}

.afterdark-site.bass-impact .ad-full-ring.ring-one{
  animation:adFullRing 430ms cubic-bezier(.12,.72,.24,1) both;
}

.afterdark-site.bass-impact .ad-full-ring.ring-two{
  animation:adFullRing 430ms 38ms cubic-bezier(.12,.72,.24,1) both;
}

.afterdark-site.bass-impact .ad-bass-horizon{
  animation:adBassHorizon 330ms cubic-bezier(.12,.75,.2,1) both;
}

/* Three alternating laser choreography patterns keep successive kicks alive. */
.afterdark-site.bass-impact-a .ad-full-lasers-left,
.afterdark-site.bass-impact-b .ad-full-lasers-right,
.afterdark-site.bass-impact-c .ad-full-lasers-top{
  animation:adFullLaserHit 390ms cubic-bezier(.08,.76,.18,1) both;
}

.afterdark-site.bass-impact-a .ad-full-lasers-right,
.afterdark-site.bass-impact-b .ad-full-lasers-top,
.afterdark-site.bass-impact-c .ad-full-lasers-left{
  animation:adFullLaserAccent 390ms 34ms cubic-bezier(.08,.76,.18,1) both;
}

.afterdark-site.bass-impact-a .ad-full-lasers-top,
.afterdark-site.bass-impact-b .ad-full-lasers-left,
.afterdark-site.bass-impact-c .ad-full-lasers-right{
  animation:adFullLaserGhost 380ms 70ms cubic-bezier(.08,.76,.18,1) both;
}

/* Bass can also push existing scenery globally. */
.afterdark-site.bass-impact .ad-atmosphere{
  filter:
    brightness(calc(1 + var(--ad-impact) * .10))
    saturate(calc(1 + var(--ad-impact) * .10));
}

.afterdark-site.bass-impact .ad-header{
  box-shadow:
    0 12px 34px rgba(0,0,0,.18),
    0 0 22px color-mix(in srgb,var(--ad-cyan) 8%,transparent);
}

.afterdark-site.bass-impact .ad-music-dock{
  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    inset 0 1px rgba(255,255,255,.055),
    0 0 calc(18px + var(--ad-impact) * 20px)
      color-mix(in srgb,var(--ad-violet) 10%,transparent);
}

@keyframes adFullFlash{
  0%{opacity:0}
  10%{opacity:calc(.34 + var(--ad-impact) * .28)}
  100%{opacity:0}
}

@keyframes adFullRing{
  0%{
    opacity:calc(.35 + var(--ad-impact) * .40);
    transform:translate(-50%,-50%) scale(.22);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(calc(4.8 + var(--ad-impact) * 1.7));
  }
}

@keyframes adBassHorizon{
  0%{opacity:0;transform:scaleX(.10)}
  22%{opacity:calc(.42 + var(--ad-impact) * .38);transform:scaleX(.92)}
  100%{opacity:0;transform:scaleX(1.18)}
}

@keyframes adFullLaserHit{
  0%{opacity:0;filter:brightness(.8)}
  14%{opacity:calc(.42 + var(--ad-impact) * .42);filter:brightness(1.55)}
  62%{opacity:calc(.18 + var(--ad-impact) * .16)}
  100%{opacity:0;filter:brightness(.92)}
}

@keyframes adFullLaserAccent{
  0%{opacity:0}
  18%{opacity:calc(.22 + var(--ad-impact) * .28)}
  100%{opacity:0}
}

@keyframes adFullLaserGhost{
  0%{opacity:0}
  22%{opacity:calc(.10 + var(--ad-impact) * .16)}
  100%{opacity:0}
}

/* Let the strongest stage beat feel tighter without harsh jerks. */
.afterdark-site.music-beat .ad-orb{
  transition:transform 70ms cubic-bezier(.14,.78,.22,1)!important;
  transform:translate(-50%,-50%) scale(calc(1.025 + var(--ad-impact) * .018))!important;
}

.afterdark-site.music-beat .ad-crowd{
  transform:translateY(calc(-4px - var(--ad-impact) * 3px))!important;
}

/* Pause state kills full-screen festival effects immediately. */
.afterdark-site.broadcast-live-lock .ad-fullscreen-fx,
.afterdark-site:not(.music-playing) .ad-fullscreen-fx{
  opacity:0;
}

@media(max-width:760px){
  .ad-full-lasers i{
    width:5px;
    opacity:.68;
  }

  .ad-full-lasers-left i:nth-child(even),
  .ad-full-lasers-right i:nth-child(even){
    display:none;
  }

  .ad-full-ring{
    width:22vmin;
    height:22vmin;
  }
}

@media(prefers-reduced-motion:reduce){
  .afterdark-site .ad-fullscreen-fx{
    display:none!important;
  }
}


/* ============================================================
   AFTERDARK live-broadcast music player auto-hide
   The radio disappears while any tracked broadcaster is live.
   ============================================================ */
.afterdark-site .ad-music-dock{
  transition:
    opacity .32s ease,
    transform .38s cubic-bezier(.2,.8,.2,1),
    visibility .32s ease,
    filter .32s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.afterdark-site.broadcast-live-lock .ad-music-dock{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(24px) scale(.96)!important;
  filter:blur(6px)!important;
}

/* When the broadcaster goes offline the panel smoothly returns. */
.afterdark-site:not(.broadcast-live-lock) .ad-music-dock{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

@media(max-width:760px){
  .afterdark-site.broadcast-live-lock .ad-music-dock{
    transform:translateY(32px) scale(.96)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .afterdark-site .ad-music-dock{
    transition:none!important;
  }
}


/* ============================================================
   AFTERDARK main orb wordmark
   ============================================================ */
.afterdark-site .ad-orb-core b{
  max-width:76%;
  font-size:clamp(13px,1.5vw,20px);
  line-height:1;
  letter-spacing:-.045em;
  font-style:normal;
  font-weight:950;
  text-align:center;
  white-space:nowrap;
  text-shadow:
    0 2px 12px rgba(10,12,28,.42),
    0 0 18px rgba(255,255,255,.12);
}

.afterdark-site .ad-orb-core small{
  margin-top:7px;
  letter-spacing:.24em;
}

@media(max-width:760px){
  .afterdark-site .ad-orb-core b{
    font-size:clamp(12px,3vw,17px);
  }
}


/* ============================================================
   AFTERDARK BOOMING VISUAL ENGINE
   Faster music response + strong-drop MEGA BASS choreography.
   ============================================================ */

/* Normal audio movement is stronger, while analyser smoothing keeps it fluid. */
.afterdark-site.music-playing .ad-orb{
  transform-origin:center;
  filter:
    brightness(calc(1 + var(--ad-bass) * .34))
    saturate(calc(1 + var(--ad-energy) * .46));
}

.afterdark-site.music-playing .ad-stage-scene{
  filter:
    brightness(calc(1 + var(--ad-energy) * .17))
    saturate(calc(1 + var(--ad-energy) * .25));
}

.afterdark-site.music-playing .ad-laser-bank i{
  opacity:calc(.14 + var(--ad-high) * .84);
  filter:
    blur(calc(.85px - var(--ad-high) * .68px))
    brightness(calc(.95 + var(--ad-high) * .88));
}

.afterdark-site.music-playing .ad-searchlight{
  opacity:calc(.05 + var(--ad-high) * .21);
}

.afterdark-site.music-playing .ad-stage-screen{
  filter:brightness(calc(.92 + var(--ad-mid) * .62));
}

.afterdark-site.music-playing .ad-crowd{
  transform:translateY(calc(var(--ad-bass) * -8px));
}

.afterdark-site.music-playing .ad-haze{
  opacity:calc(.68 + var(--ad-energy) * .32);
  filter:
    blur(calc(31px - var(--ad-bass) * 11px))
    brightness(calc(.96 + var(--ad-energy) * .22));
}

.afterdark-site.music-playing .ad-drone-show{
  opacity:calc(.20 + var(--ad-high) * .80);
  filter:brightness(calc(.88 + var(--ad-high) * .55));
}

/* Bass cannons sit just outside the viewport and explode inward. */
.ad-bass-cannons{
  position:absolute;
  top:0;
  bottom:0;
  width:18vw;
  min-width:150px;
  opacity:0;
}

.ad-bass-cannons-left{left:-4vw}
.ad-bass-cannons-right{right:-4vw}

.ad-bass-cannons i{
  position:absolute;
  top:50%;
  width:12px;
  height:86vmax;
  transform-origin:50% 0;
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
  filter:blur(.4px);
}

.ad-bass-cannons-left i{
  left:12%;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.94),
    color-mix(in srgb,var(--ad-cyan) 86%,white) 3%,
    color-mix(in srgb,var(--ad-cyan) 28%,transparent) 38%,
    transparent 78%
  );
}

.ad-bass-cannons-right i{
  right:12%;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.94),
    color-mix(in srgb,var(--ad-pink) 82%,white) 3%,
    color-mix(in srgb,var(--ad-pink) 26%,transparent) 38%,
    transparent 78%
  );
}

.ad-bass-cannons-left i:nth-child(1){transform:rotate(-72deg)}
.ad-bass-cannons-left i:nth-child(2){transform:rotate(-56deg)}
.ad-bass-cannons-left i:nth-child(3){transform:rotate(-40deg)}
.ad-bass-cannons-left i:nth-child(4){transform:rotate(-24deg)}

.ad-bass-cannons-right i:nth-child(1){transform:rotate(72deg)}
.ad-bass-cannons-right i:nth-child(2){transform:rotate(56deg)}
.ad-bass-cannons-right i:nth-child(3){transform:rotate(40deg)}
.ad-bass-cannons-right i:nth-child(4){transform:rotate(24deg)}

.ad-bass-starburst{
  position:absolute;
  left:var(--ad-impact-x);
  top:var(--ad-impact-y);
  width:1px;
  height:1px;
  opacity:0;
}

.ad-bass-starburst i{
  position:absolute;
  left:0;
  top:0;
  width:5px;
  height:58vmax;
  transform-origin:50% 0;
  background:linear-gradient(
    180deg,
    white,
    color-mix(in srgb,var(--ad-violet) 72%,white) 3%,
    color-mix(in srgb,var(--ad-violet) 18%,transparent) 32%,
    transparent 68%
  );
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
  filter:blur(.35px);
}

.ad-bass-starburst i:nth-child(1){transform:rotate(0deg)}
.ad-bass-starburst i:nth-child(2){transform:rotate(45deg)}
.ad-bass-starburst i:nth-child(3){transform:rotate(90deg)}
.ad-bass-starburst i:nth-child(4){transform:rotate(135deg)}
.ad-bass-starburst i:nth-child(5){transform:rotate(180deg)}
.ad-bass-starburst i:nth-child(6){transform:rotate(225deg)}
.ad-bass-starburst i:nth-child(7){transform:rotate(270deg)}
.ad-bass-starburst i:nth-child(8){transform:rotate(315deg)}

.ad-bass-floor-glow{
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-18vh;
  height:48vh;
  opacity:0;
  border-radius:50%;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(255,255,255,.20),
      color-mix(in srgb,var(--ad-cyan) 25%,transparent) 22%,
      color-mix(in srgb,var(--ad-violet) 18%,transparent) 43%,
      color-mix(in srgb,var(--ad-pink) 8%,transparent) 60%,
      transparent 72%
    );
  filter:blur(18px);
}

/* Ordinary kick hits are now more physical. */
.afterdark-site.bass-impact .ad-full-lasers{
  filter:brightness(calc(1 + var(--ad-impact) * .50));
}

.afterdark-site.bass-impact .ad-stage-scene{
  transform:scale(calc(1 + var(--ad-impact) * .0035));
}

.afterdark-site.bass-impact .ad-city-back,
.afterdark-site.bass-impact .ad-city-front{
  filter:brightness(calc(1 + var(--ad-impact) * .10));
}

.afterdark-site.bass-impact .ad-crowd i{
  filter:brightness(calc(1 + var(--ad-impact) * .10));
}

/* MEGA BASS only fires on stronger detected drops/kicks. */
.afterdark-site.bass-mega .ad-bass-cannons{
  animation:adMegaCannons 610ms cubic-bezier(.08,.72,.16,1) both;
}

.afterdark-site.bass-mega .ad-bass-starburst{
  animation:adMegaStarburst 530ms cubic-bezier(.08,.72,.16,1) both;
}

.afterdark-site.bass-mega .ad-bass-floor-glow{
  animation:adMegaFloorGlow 650ms cubic-bezier(.08,.72,.16,1) both;
}

.afterdark-site.bass-mega .ad-full-flash{
  animation:adMegaFlash 500ms cubic-bezier(.08,.72,.16,1) both!important;
}

.afterdark-site.bass-mega .ad-full-ring.ring-one{
  animation:adMegaRing 620ms cubic-bezier(.08,.7,.16,1) both!important;
}

.afterdark-site.bass-mega .ad-full-ring.ring-two{
  animation:adMegaRing 620ms 42ms cubic-bezier(.08,.7,.16,1) both!important;
}

.afterdark-site.bass-mega .ad-orb{
  box-shadow:
    inset -22px -25px 38px rgba(18,13,43,.34),
    inset 0 4px 9px rgba(255,255,255,.25),
    0 0 0 calc(10px + var(--ad-impact) * 9px)
      color-mix(in srgb,var(--ad-cyan) 8%,transparent),
    0 0 calc(70px + var(--ad-impact) * 75px)
      color-mix(in srgb,var(--ad-violet) 40%,transparent),
    0 0 calc(110px + var(--ad-impact) * 100px)
      color-mix(in srgb,var(--ad-pink) 22%,transparent)!important;
}

.afterdark-site.bass-mega .ad-main{
  animation:adMegaCameraPunch 330ms cubic-bezier(.12,.76,.2,1) both;
}

.afterdark-site.bass-mega .ad-stage-screen{
  border-color:color-mix(in srgb,var(--ad-cyan) 40%,rgba(255,255,255,.15));
  filter:brightness(1.45) saturate(1.22)!important;
}

.afterdark-site.bass-mega .ad-city-front{
  filter:brightness(1.24) saturate(1.18);
}

.afterdark-site.bass-mega .ad-drone-show{
  opacity:1!important;
  filter:brightness(1.42)!important;
}

@keyframes adMegaCannons{
  0%{opacity:0;filter:brightness(.8)}
  8%{opacity:.98;filter:brightness(1.75)}
  36%{opacity:calc(.48 + var(--ad-impact) * .24)}
  100%{opacity:0;filter:brightness(1)}
}

@keyframes adMegaStarburst{
  0%{opacity:0;transform:scale(.18) rotate(-9deg)}
  10%{opacity:calc(.60 + var(--ad-impact) * .18)}
  100%{opacity:0;transform:scale(1.45) rotate(8deg)}
}

@keyframes adMegaFloorGlow{
  0%{opacity:0;transform:scaleY(.45)}
  12%{opacity:calc(.52 + var(--ad-impact) * .20);transform:scaleY(.95)}
  100%{opacity:0;transform:scaleY(1.22)}
}

@keyframes adMegaFlash{
  0%{opacity:0}
  7%{opacity:calc(.48 + var(--ad-impact) * .19)}
  17%{opacity:.12}
  100%{opacity:0}
}

@keyframes adMegaRing{
  0%{
    opacity:calc(.55 + var(--ad-impact) * .20);
    transform:translate(-50%,-50%) scale(.12);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(calc(6.6 + var(--ad-impact) * 2));
  }
}

@keyframes adMegaCameraPunch{
  0%{transform:scale(1)}
  14%{transform:scale(calc(1 + var(--ad-impact) * .0045))}
  38%{transform:scale(.998)}
  100%{transform:scale(1)}
}

@media(max-width:760px){
  .ad-bass-cannons{
    width:22vw;
    min-width:90px;
  }

  .ad-bass-cannons i{
    width:7px;
  }

  .ad-bass-cannons i:nth-child(2),
  .ad-bass-cannons i:nth-child(4){
    display:none;
  }

  .ad-bass-starburst i:nth-child(even){
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .ad-bass-cannons,
  .ad-bass-starburst,
  .ad-bass-floor-glow{
    display:none!important;
  }

  .afterdark-site.bass-mega .ad-main{
    animation:none!important;
  }
}


/* ============================================================
   StreamSphere performance pass
   Skip expensive off-screen painting while preserving layout.
   ============================================================ */
@supports (content-visibility:auto){
  body:not(.afterdark-mode) main > .section.block{
    content-visibility:auto;
    contain-intrinsic-size:auto 760px;
  }

  .stream-card,
  .mod-panel,
  .ad-stage-card,
  .ad-ah-card{
    contain:layout paint style;
  }
}

/* Let the browser isolate frequently animated AFTERDARK layers. */
.afterdark-site .ad-fullscreen-fx,
.afterdark-site .ad-stage-scene,
.afterdark-site .ad-orb{
  contain:layout paint style;
}

/* On narrow screens, large blur layers are the biggest GPU tax.
   Keep the visual atmosphere, but make those filters cheaper. */
@media(max-width:760px){
  body:not(.afterdark-mode) .bg-wash{
    filter:blur(18px);
  }

  body:not(.afterdark-mode) .aurora,
  body:not(.afterdark-mode) .mist{
    filter:blur(26px);
  }

  .afterdark-site .ad-haze{
    filter:blur(20px);
  }

  .afterdark-site .ad-sky-glow{
    filter:blur(28px);
  }
}


/* ============================================================
   AFTERDARK LIVE CREATOR STAGE
   Twitch player + chat stay inside the festival.
   ============================================================ */
.ad-live-stage-shell{
  width:100%;
}

.ad-live-stage-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  margin-bottom:18px;
}

.ad-live-stage-head>div:first-child{
  min-width:0;
}

.ad-live-stage-head span{
  color:var(--ad-cyan);
  font-size:7px;
  font-weight:950;
  letter-spacing:.18em;
}

.ad-live-stage-head h2{
  margin:6px 0 7px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(40px,5vw,72px);
  line-height:.9;
  letter-spacing:-.055em;
}

.ad-live-stage-head p{
  margin:0;
  color:#8d98ad;
  font-size:11px;
  letter-spacing:.04em;
}

.ad-live-stage-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}

.ad-live-stage-layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(320px,.52fr);
  gap:14px;
  min-height:660px;
}

.ad-live-stage-player,
.ad-live-stage-chat{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 0,color-mix(in srgb,var(--ad-violet) 8%,transparent),transparent 32%),
    linear-gradient(160deg,rgba(14,17,30,.92),rgba(7,9,17,.94));
  box-shadow:0 22px 50px rgba(0,0,0,.18);
}

.ad-live-stage-player{
  position:relative;
  padding:10px;
}

.ad-live-stage-badge{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  padding:0 4px 8px;
  color:#9ba7bd;
}

.ad-live-stage-badge i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff507e;
  box-shadow:0 0 14px rgba(255,80,126,.55);
  animation:adLivePulse .9s ease-in-out infinite alternate;
}

.ad-live-stage-badge span{
  font-size:7px;
  font-weight:950;
  letter-spacing:.15em;
}

.ad-live-stage-frame-wrap{
  position:relative;
  aspect-ratio:16/9;
  min-height:390px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:
    radial-gradient(circle at 50% 50%,rgba(94,220,255,.08),transparent 32%),
    #05070d;
}

.ad-live-stage-frame{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

.ad-live-stage-overlay{
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--ad-violet) 24%,transparent),transparent 35%),
    linear-gradient(180deg,rgba(5,7,14,.58),rgba(5,7,14,.86));
  opacity:1;
  transition:opacity .35s ease,visibility .35s ease;
}

.ad-live-stage-overlay.is-hidden{
  opacity:0;
  visibility:hidden;
}

.ad-live-stage-overlay span{
  color:#8592aa;
  font-size:7px;
  font-weight:950;
  letter-spacing:.22em;
}

.ad-live-stage-overlay b{
  margin-top:7px;
  max-width:82%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:clamp(30px,4vw,56px);
  line-height:.9;
  letter-spacing:-.045em;
  text-shadow:
    0 0 28px color-mix(in srgb,var(--ad-violet) 24%,transparent),
    0 0 55px color-mix(in srgb,var(--ad-cyan) 12%,transparent);
}

.ad-live-stage-now{
  min-height:73px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 5px 2px;
}

.ad-live-stage-now>div{
  min-width:0;
  display:grid;
}

.ad-live-stage-now small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ad-cyan);
  font-size:6px;
  font-weight:950;
  letter-spacing:.12em;
}

.ad-live-stage-now b{
  margin-top:4px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#e7edf8;
  font-size:13px;
}

.ad-live-stage-now>span{
  flex:0 0 auto;
  color:#7d899e;
  font-size:7px;
  font-weight:950;
  letter-spacing:.10em;
}

.ad-live-stage-chat{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}

.ad-live-chat-head{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 13px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}

.ad-live-chat-head span{
  color:var(--ad-cyan);
  font-size:6px;
  font-weight:950;
  letter-spacing:.13em;
}

.ad-live-chat-head b{
  max-width:70%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#a8b2c5;
  font-size:7px;
  letter-spacing:.08em;
}

.ad-live-chat-frame{
  width:100%;
  min-height:610px;
  height:100%;
  display:block;
  border:0;
  background:#0e0e10;
}

/* The live-stage view still participates in the festival lighting. */
.afterdark-site.music-playing .ad-live-stage-player,
.afterdark-site.music-playing .ad-live-stage-chat{
  border-color:
    color-mix(
      in srgb,
      rgba(255,255,255,.10),
      var(--ad-violet) calc(var(--ad-energy) * 12%)
    );
}

.afterdark-site.bass-impact .ad-live-stage-player{
  box-shadow:
    0 22px 50px rgba(0,0,0,.18),
    0 0 calc(18px + var(--ad-impact) * 15px)
      color-mix(in srgb,var(--ad-violet) 8%,transparent);
}

.afterdark-site.bass-mega .ad-live-stage-player{
  border-color:color-mix(in srgb,var(--ad-cyan) 24%,rgba(255,255,255,.12));
}

@media(max-width:1100px){
  .ad-live-stage-layout{
    grid-template-columns:1fr;
  }

  .ad-live-stage-chat{
    min-height:520px;
  }

  .ad-live-chat-frame{
    min-height:500px;
  }
}

@media(max-width:760px){
  .ad-live-stage-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .ad-live-stage-actions{
    width:100%;
    justify-content:stretch;
  }

  .ad-live-stage-actions .ad-primary,
  .ad-live-stage-actions .ad-secondary{
    flex:1 1 180px;
  }

  .ad-live-stage-frame-wrap{
    min-height:0;
  }

  .ad-live-stage-now{
    align-items:flex-start;
    flex-direction:column;
  }

  .ad-live-stage-chat{
    min-height:72dvh;
  }

  .ad-live-chat-frame{
    min-height:68dvh;
  }
}

@media(max-width:480px){
  .ad-live-stage-head h2{
    white-space:normal;
  }

  .ad-live-stage-player{
    padding:7px;
  }

  .ad-live-stage-actions{
    display:grid;
  }

  .ad-live-stage-actions .ad-primary,
  .ad-live-stage-actions .ad-secondary{
    width:100%;
  }
}




/* ============================================================
   AFTERDARK NEXUS MAIN STAGE LIVE TAKEOVER
   The exact right-side STAGE 01 box becomes the Twitch stream.
   ============================================================ */

/* The Twitch layer lives inside the existing .ad-stage-scene. */
.ad-stage-live-layer{
  position:absolute;
  z-index:30;
  inset:8.5% 10.5% 9%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:7px;
  background:#05070d;
  box-shadow:
    0 18px 44px rgba(0,0,0,.28),
    0 0 38px color-mix(in srgb,var(--ad-violet) 8%,transparent);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.985);
  transition:
    opacity .42s ease,
    transform .48s cubic-bezier(.2,.8,.2,1),
    visibility .42s ease;
}

/* Keep the stage's outer truss/frame visible around the actual stream. */
.ad-stage-live-player{
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#05070d;
}

/* LIVE: fade the stream into the exact Nexus Main Stage box. */
.ad-stage-scene.stage-live-active .ad-stage-live-layer{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:scale(1);
}

/* LIVE: fade away the planet/orb and every decorative object behind it. */
.ad-stage-scene .ad-stage-screen,
.ad-stage-scene .ad-orb,
.ad-stage-scene .ad-drone-show,
.ad-stage-scene .ad-pyro-bank,
.ad-stage-scene .ad-beam,
.ad-stage-scene .ad-laser-bank,
.ad-stage-scene .ad-crowd,
.ad-stage-scene::before{
  transition:
    opacity .42s ease,
    filter .42s ease,
    visibility .42s ease,
    transform .42s ease;
}

.ad-stage-scene.stage-live-active .ad-stage-screen,
.ad-stage-scene.stage-live-active .ad-orb,
.ad-stage-scene.stage-live-active .ad-drone-show,
.ad-stage-scene.stage-live-active .ad-pyro-bank,
.ad-stage-scene.stage-live-active .ad-beam,
.ad-stage-scene.stage-live-active .ad-laser-bank,
.ad-stage-scene.stage-live-active .ad-crowd{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  filter:blur(5px)!important;
}

/* Keep only the physical STAGE 01 truss frame around the broadcast. */
.ad-stage-scene.stage-live-active .ad-stage-truss{
  z-index:36;
  opacity:.90;
}

/* Do not let music/bass effects cover the Twitch picture when a broadcaster
   has taken over the main stage. The global AFTERDARK ambience can remain. */
.ad-stage-scene.stage-live-active::after{
  opacity:0!important;
}

.ad-stage-scene.stage-live-active .ad-stage-live-layer{
  box-shadow:
    0 18px 44px rgba(0,0,0,.30),
    0 0 42px color-mix(in srgb,var(--ad-cyan) 7%,transparent);
}

/* When the stream ends, removing .stage-live-active reverses these
   transitions and the original orb/screens/crowd stage comes back. */

@media(max-width:760px){
  .ad-stage-live-layer{
    inset:8.5% 8.5% 10%;
    border-radius:6px;
  }
}

@media(prefers-reduced-motion:reduce){
  .ad-stage-live-layer,
  .ad-stage-scene .ad-stage-screen,
  .ad-stage-scene .ad-orb,
  .ad-stage-scene .ad-drone-show,
  .ad-stage-scene .ad-pyro-bank,
  .ad-stage-scene .ad-beam,
  .ad-stage-scene .ad-laser-bank,
  .ad-stage-scene .ad-crowd{
    transition:none!important;
  }
}


/* ============================================================
   Featured Streamers
   Manually posted creators, separate from Ambassadors.
   ============================================================ */
.ambassador-floater.featured-streamer-floater .ambassador-avatar-ring{
  background:
    linear-gradient(145deg,
      rgba(78,224,255,.62),
      rgba(109,116,255,.48) 48%,
      rgba(233,91,255,.45));
  box-shadow:
    0 10px 35px rgba(0,0,0,.24),
    0 0 30px rgba(81,210,255,.13);
}

.ambassador-floater.featured-streamer-floater .ambassador-avatar-ring:before{
  border-color:rgba(101,221,255,.18);
  box-shadow:0 0 20px rgba(92,191,255,.07);
}

.ambassador-floater.featured-streamer-floater .ambassador-float-name small{
  color:#85dfff;
}

body.vibrant-dark .ambassador-floater.featured-streamer-floater .ambassador-avatar-ring{
  background:
    linear-gradient(145deg,
      rgba(57,210,255,.68),
      rgba(112,91,255,.56),
      rgba(228,78,255,.46));
}

.stream-card.featured-live-card{
  position:relative;
  border-color:rgba(86,211,255,.18);
  box-shadow:
    0 20px 50px rgba(18,44,65,.07),
    inset 0 0 0 1px rgba(109,218,255,.02);
}

.stream-card.featured-live-card:hover{
  border-color:rgba(103,221,255,.38);
  box-shadow:
    0 24px 60px rgba(12,44,68,.11),
    0 0 30px rgba(90,200,255,.06);
}

.member-badge.featured-live-badge{
  color:#bceeff;
  border-color:rgba(94,216,255,.26);
  background:linear-gradient(135deg,rgba(8,39,53,.80),rgba(45,31,79,.74));
  box-shadow:0 0 20px rgba(77,203,255,.08);
}

.stream-live-name small.featured-live-note{
  color:#76cfe9;
}

body.vibrant-dark .stream-card.featured-live-card{
  border-color:rgba(83,218,255,.23);
}

body.vibrant-dark .member-badge.featured-live-badge{
  color:#c7f4ff;
  border-color:rgba(92,224,255,.28);
  background:rgba(10,38,57,.80);
}

.ad-stage-card.ad-featured-stage{
  border-color:color-mix(in srgb,var(--ad-cyan) 16%,rgba(255,255,255,.10));
}

.ad-amb-chip.ad-featured-chip{
  color:#aeefff;
  border-color:rgba(94,218,255,.25);
  background:rgba(8,36,53,.70);
}


/* ============================================================
   STREAMSPHERE AMBASSADOR SPOTLIGHT
   Ambassadors no longer float with Featured Streamers.
   ============================================================ */
.ambassador-spotlight-section{
  position:relative;
  z-index:9;
  overflow:visible;
}

.ambassador-spotlight-section.hidden{
  display:none!important;
}

.ambassador-spotlight-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:16px;
}

.ambassador-spotlight-head>div:first-child{
  max-width:720px;
}

.ambassador-spotlight-head h2{
  margin-bottom:7px;
}

.ambassador-spotlight-head p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.ambassador-spotlight-status{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:33px;
  padding:0 11px;
  border:1px solid rgba(181,137,255,.16);
  border-radius:999px;
  background:rgba(140,93,255,.055);
  color:#806ba2;
  font-size:7px;
  font-weight:950;
  letter-spacing:.13em;
}

.ambassador-spotlight-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#9e7cff;
  box-shadow:0 0 11px rgba(139,99,255,.28);
}

.ambassador-spotlight-status.has-live{
  color:#c29d50;
  border-color:rgba(236,185,80,.24);
  background:rgba(207,157,55,.07);
}

.ambassador-spotlight-status.has-live i{
  background:#ffca66;
  box-shadow:0 0 13px rgba(255,191,71,.46);
  animation:ambassadorLivePulse .9s ease-in-out infinite alternate;
}

.ambassador-spotlight-hero{
  --amb-gold:#e5bd6c;
  --amb-gold-soft:#f5dca3;
  position:relative;
  min-height:330px;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(22px,3vw,40px);
  border-color:rgba(185,143,255,.17);
  background:
    radial-gradient(circle at 8% 50%,rgba(136,93,255,.11),transparent 34%),
    radial-gradient(circle at 90% 8%,rgba(72,210,255,.07),transparent 30%),
    rgba(255,255,255,.60);
  box-shadow:
    0 26px 70px rgba(67,44,109,.10),
    inset 0 1px rgba(255,255,255,.60);
}

body.vibrant-dark .ambassador-spotlight-hero{
  background:
    radial-gradient(circle at 8% 50%,rgba(135,87,255,.16),transparent 36%),
    radial-gradient(circle at 90% 8%,rgba(63,214,255,.09),transparent 30%),
    rgba(10,12,22,.76);
  border-color:rgba(170,128,255,.22);
}

.ambassador-spotlight-hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(110deg,
      transparent 0 38%,
      rgba(255,255,255,.12) 46%,
      transparent 54% 100%);
  transform:translateX(-110%);
  animation:ambassadorPremiumSweep 10s ease-in-out infinite;
}

.ambassador-hero-backdrop{
  position:absolute;
  z-index:-3;
  inset:0;
  opacity:0;
  background:
    linear-gradient(90deg,rgba(10,10,20,.95) 0%,rgba(10,10,20,.76) 42%,rgba(10,10,20,.36) 70%,rgba(10,10,20,.62)),
    var(--amb-hero-image) center/cover no-repeat;
  transform:scale(1.035);
  transition:opacity .35s ease,transform 7s ease;
}

.ambassador-spotlight-hero.is-live .ambassador-hero-backdrop{
  opacity:.88;
  transform:scale(1);
}

.ambassador-spotlight-hero.is-live{
  color:white;
  border-color:rgba(232,190,96,.34);
  background:
    linear-gradient(115deg,rgba(11,10,19,.90),rgba(19,13,30,.78) 45%,rgba(13,18,29,.62));
  box-shadow:
    0 30px 90px rgba(47,28,76,.24),
    0 0 0 1px rgba(245,202,106,.07),
    0 0 45px rgba(178,123,255,.08);
}

.ambassador-spotlight-hero.is-live::after{
  content:'';
  position:absolute;
  z-index:-2;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 21% 50%,rgba(233,190,95,.13),transparent 26%),
    linear-gradient(100deg,rgba(139,89,255,.10),transparent 48%);
}

.ambassador-hero-profile{
  min-height:245px;
  display:flex;
  align-items:center;
  gap:clamp(24px,4vw,52px);
}

.ambassador-hero-avatar-wrap{
  position:relative;
  width:clamp(126px,15vw,186px);
  height:clamp(126px,15vw,186px);
  flex:0 0 auto;
  display:grid;
  place-items:center;
}

.ambassador-hero-avatar-wrap img{
  position:relative;
  z-index:3;
  width:76%;
  height:76%;
  object-fit:cover;
  border:3px solid rgba(255,255,255,.80);
  border-radius:50%;
  box-shadow:
    0 18px 44px rgba(43,27,73,.18),
    0 0 0 7px rgba(140,95,255,.07);
}

.ambassador-spotlight-hero.is-live .ambassador-hero-avatar-wrap img{
  border-color:rgba(255,226,158,.90);
  box-shadow:
    0 20px 52px rgba(0,0,0,.32),
    0 0 0 7px rgba(229,189,108,.10),
    0 0 38px rgba(221,177,89,.14);
}

.ambassador-hero-orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(141,94,255,.23);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.ambassador-hero-orbit.orbit-one{
  width:92%;
  height:92%;
  border-left-color:transparent;
  animation:ambassadorOrbitOne 13s linear infinite;
}

.ambassador-hero-orbit.orbit-two{
  width:104%;
  height:56%;
  border-color:rgba(75,207,238,.20);
  border-right-color:transparent;
  transform:translate(-50%,-50%) rotate(-27deg);
  animation:ambassadorOrbitTwo 10s linear infinite reverse;
}

.ambassador-spotlight-hero.is-live .ambassador-hero-orbit{
  border-color:rgba(239,194,101,.30);
  border-left-color:transparent;
}

.ambassador-live-dot{
  position:absolute;
  z-index:6;
  right:11%;
  bottom:18%;
  width:17px;
  height:17px;
  border:4px solid rgba(12,12,20,.90);
  border-radius:50%;
  background:#ff496f;
  box-shadow:0 0 16px rgba(255,61,105,.58);
  animation:ambassadorLivePulse .8s ease-in-out infinite alternate;
}

.ambassador-hero-copy{
  position:relative;
  z-index:4;
  min-width:0;
  max-width:720px;
}

.ambassador-premium-tag{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 9px;
  border:1px solid rgba(205,163,77,.24);
  border-radius:999px;
  color:#ae7d27;
  background:rgba(224,178,77,.08);
  font-size:7px;
  font-weight:950;
  letter-spacing:.13em;
}

.ambassador-spotlight-hero.is-live .ambassador-premium-tag{
  color:#ffdfa0;
  border-color:rgba(241,199,106,.29);
  background:rgba(225,173,73,.09);
}

.ambassador-hero-copy h3{
  margin:12px 0 10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(38px,5vw,72px);
  line-height:.86;
  letter-spacing:-.06em;
}

.ambassador-hero-copy p{
  max-width:650px;
  margin:11px 0 0;
  color:var(--muted);
  line-height:1.58;
}

.ambassador-spotlight-hero.is-live .ambassador-hero-copy p{
  color:#c6c0d3;
}

.ambassador-live-line,
.ambassador-offline-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  min-height:27px;
}

.ambassador-live-line b{
  padding:5px 8px;
  border-radius:7px;
  color:#fff;
  background:#ec3f68;
  box-shadow:0 0 18px rgba(236,63,104,.18);
  font-size:7px;
  letter-spacing:.10em;
}

.ambassador-live-line span{
  color:#c6bfd0;
  font-size:8px;
  font-weight:850;
}

.ambassador-offline-line{
  color:#8f819f;
  font-size:7px;
  font-weight:900;
  letter-spacing:.10em;
}

.ambassador-offline-line i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#a08cab;
}

.ambassador-hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

.ambassador-live-priority,
.ambassador-partner-note{
  font-size:7px;
  font-weight:950;
  letter-spacing:.12em;
}

.ambassador-live-priority{
  color:#f5d28e;
}

.ambassador-partner-note{
  color:#9384a1;
}

.ambassador-hero-signature{
  position:absolute;
  z-index:-1;
  right:clamp(22px,4vw,58px);
  bottom:20px;
  display:grid;
  justify-items:end;
  opacity:.065;
  pointer-events:none;
  user-select:none;
}

.ambassador-hero-signature span{
  font-size:clamp(82px,13vw,190px);
  font-weight:950;
  font-style:italic;
  line-height:.65;
  letter-spacing:-.12em;
}

.ambassador-hero-signature b{
  margin-top:14px;
  font-size:11px;
  letter-spacing:.32em;
}

.ambassador-spotlight-rail{
  display:flex;
  gap:10px;
  margin-top:11px;
  padding:2px 1px 5px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}

.ambassador-mini-card{
  flex:1 1 210px;
  min-width:210px;
  min-height:82px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px;
  scroll-snap-align:start;
  border:1px solid rgba(123,90,158,.10);
  border-radius:15px;
  color:var(--text);
  text-align:left;
  background:rgba(255,255,255,.42);
  cursor:pointer;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

body.vibrant-dark .ambassador-mini-card{
  color:#f3effb;
  background:rgba(16,17,29,.72);
  border-color:rgba(185,145,255,.10);
}

.ambassador-mini-card:hover{
  transform:translateY(-2px);
  border-color:rgba(153,105,235,.22);
  box-shadow:0 12px 30px rgba(75,47,111,.08);
}

.ambassador-mini-card.active{
  border-color:rgba(213,170,84,.28);
  background:
    linear-gradient(135deg,rgba(230,188,100,.08),rgba(130,88,207,.07)),
    rgba(255,255,255,.48);
}

body.vibrant-dark .ambassador-mini-card.active{
  background:
    linear-gradient(135deg,rgba(225,180,87,.08),rgba(135,88,220,.09)),
    rgba(16,17,29,.78);
}

.ambassador-mini-card.is-live{
  border-color:rgba(235,183,80,.24);
}

.ambassador-mini-avatar{
  position:relative;
  width:52px;
  height:52px;
}

.ambassador-mini-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.72);
  border-radius:50%;
}

.ambassador-mini-card.is-live .ambassador-mini-avatar img{
  border-color:#e8be69;
}

.ambassador-mini-avatar i{
  position:absolute;
  right:-1px;
  bottom:3px;
  width:11px;
  height:11px;
  border:3px solid rgba(15,15,24,.92);
  border-radius:50%;
  background:#ff496e;
  box-shadow:0 0 10px rgba(255,73,110,.48);
}

.ambassador-mini-copy{
  min-width:0;
  display:grid;
}

.ambassador-mini-copy small,
.ambassador-mini-copy b,
.ambassador-mini-copy em{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ambassador-mini-copy small{
  color:#9573b5;
  font-size:6px;
  font-weight:950;
  letter-spacing:.10em;
}

.ambassador-mini-card.is-live .ambassador-mini-copy small{
  color:#d7a94c;
}

.ambassador-mini-copy b{
  margin-top:3px;
  font-size:12px;
}

.ambassador-mini-copy em{
  margin-top:2px;
  color:var(--muted);
  font-size:7px;
  font-style:normal;
}

.ambassador-mini-arrow{
  color:#9a86ad;
  font-size:22px;
}

.ambassador-spotlight-swap{
  animation:ambassadorSpotlightSwap .48s cubic-bezier(.2,.8,.2,1) both;
}

/* Once an ambassador is in the Spotlight, legacy ambassador floaters are
   intentionally suppressed. Featured Streamers keep their floaters. */
.ambassador-floater.ambassador-type-floater{
  display:none!important;
}

@keyframes ambassadorPremiumSweep{
  0%,70%,100%{transform:translateX(-115%);opacity:0}
  77%{opacity:1}
  90%{transform:translateX(115%);opacity:.65}
}

@keyframes ambassadorOrbitOne{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes ambassadorOrbitTwo{
  to{transform:translate(-50%,-50%) rotate(333deg)}
}

@keyframes ambassadorLivePulse{
  from{opacity:.45;transform:scale(.84)}
  to{opacity:1;transform:scale(1.14)}
}

@keyframes ambassadorSpotlightSwap{
  from{opacity:.72;transform:translateY(6px) scale(.994)}
  to{opacity:1;transform:none}
}

@media(max-width:900px){
  .ambassador-hero-profile{
    align-items:flex-start;
  }

  .ambassador-hero-signature{
    opacity:.045;
  }
}

@media(max-width:700px){
  .ambassador-spotlight-head{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }

  .ambassador-spotlight-hero{
    min-height:0;
    padding:22px 17px;
  }

  .ambassador-hero-profile{
    flex-direction:column;
    gap:15px;
  }

  .ambassador-hero-avatar-wrap{
    width:120px;
    height:120px;
  }

  .ambassador-hero-copy h3{
    white-space:normal;
  }

  .ambassador-hero-signature{
    right:15px;
    bottom:15px;
  }

  .ambassador-mini-card{
    flex:0 0 min(78vw,290px);
  }
}

@media(max-width:480px){
  .ambassador-hero-actions{
    display:grid;
  }

  .ambassador-hero-actions .btn{
    width:100%;
  }

  .ambassador-hero-signature{
    display:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .ambassador-spotlight-hero::before,
  .ambassador-hero-orbit,
  .ambassador-live-dot,
  .ambassador-spotlight-status i,
  .ambassador-spotlight-swap{
    animation:none!important;
  }
}