/* Xenon site layer (xenon.js): scrollable dock, notifications, side windows
   (links, stealth, premium), live events, game of the day, Hall /
   Staff / TV pages, Settings "Look". Colours come from --x-* so a theme
   (Settings > Look) restyles all of it. */
:root{--x-panel:rgba(12,22,40,.62);--x-panel2:rgba(30,45,80,.82);--x-border:rgba(150,185,255,.2);--x-accent:#7c9cff;--x-accent2:#c084fc;--x-text:#eef3ff;--x-muted:rgba(216,231,255,.62);--x-glow:rgba(124,156,255,.35);--x-radius:18px;--x-blur:14px}
@font-face{font-family:'xn-pusab';src:url('/wp-content/xn/fonts/pusab.otf') format('opentype');font-display:swap}

/* ---------- dock: scrolls sideways instead of a More page ---------- */
/* Same look as before the new buttons: the original width, just scrolling
   sideways (wheel or swipe) for the rest. */
html body .sp-dock{max-width:min(940px,calc(100vw - 24px)) !important;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:smooth}
.sp-dock::-webkit-scrollbar{display:none}
.sp-dock-item{flex:0 0 auto}
.sp-dock-item[data-staff]{display:none !important}
html.xn-staff .sp-dock-item[data-staff]{display:flex !important}
.sp-dock-item[data-tv]{position:relative}
html.xn-tv-live .sp-dock-item[data-tv]::after{content:'LIVE';position:absolute;top:4px;right:8px;padding:0 4px;border-radius:5px;background:#ef4444;color:#fff;font:800 8px/1.5 system-ui,sans-serif;letter-spacing:.06em;animation:xn-blink 1.6s ease-in-out infinite}
@keyframes xn-blink{50%{opacity:.45}}
@media (max-width:560px){html.xn-tv-live .sp-dock-item[data-tv]::after{content:'';width:7px;height:7px;padding:0;border-radius:50%}}

/* ---------- bell + notifications ---------- */
.xn-bell{position:relative;cursor:pointer;font:inherit}
.xn-bell svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.xn-bell-n{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#ef4444;color:#fff;font:800 10px/17px system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px rgba(5,8,16,.9)}
.xn-bell-n[hidden]{display:none}
.xn-notes{position:fixed;top:3.6rem;right:1rem;z-index:9700;width:min(360px,calc(100vw - 24px));max-height:min(70vh,560px);overflow:auto;padding:.5rem;border-radius:var(--x-radius);background:rgba(10,14,26,.94);border:1px solid var(--x-border);box-shadow:0 24px 60px rgba(0,0,0,.6);color:var(--x-text);text-align:left;font-family:inherit}
.xn-notes[hidden]{display:none}
.xn-notes-h{display:flex;align-items:center;justify-content:space-between;padding:.35rem .5rem .55rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--x-muted)}
.xn-notes-h button{background:none;border:0;color:var(--x-muted);font:inherit;font-size:.68rem;cursor:pointer;letter-spacing:0;text-transform:none}
.xn-note{display:flex;gap:.65rem;padding:.6rem .55rem;border-radius:12px;cursor:pointer;color:inherit;text-decoration:none}
.xn-note:hover{background:rgba(255,255,255,.06)}
.xn-note.unread{background:rgba(124,156,255,.1)}
.xn-note .ic{flex:0 0 30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;background:rgba(255,255,255,.07)}
.xn-note b{display:block;font-size:.82rem;font-weight:650}
.xn-note p{margin:.1rem 0 0;font-size:.74rem;color:var(--x-muted);line-height:1.35}
.xn-note small{display:block;margin-top:.2rem;font-size:.64rem;color:rgba(216,231,255,.38)}
.xn-note .go{margin-top:.4rem;padding:.3rem .8rem;border:0;border-radius:999px;background:linear-gradient(90deg,#ec4899,#f59e0b);color:#fff;font:700 .7rem system-ui,sans-serif;cursor:pointer}
.xn-empty{padding:1.2rem;text-align:center;color:var(--x-muted);font-size:.78rem}
.xn-toasts{position:fixed;right:16px;bottom:7.2rem;z-index:9750;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none}
.xn-toast{pointer-events:auto;display:flex;gap:.6rem;align-items:flex-start;width:min(330px,calc(100vw - 32px));padding:.7rem .8rem;border-radius:14px;background:rgba(12,18,34,.95);border:1px solid var(--x-border);box-shadow:0 16px 40px rgba(0,0,0,.55);color:var(--x-text);cursor:pointer;text-align:left;animation:xn-tin .35s cubic-bezier(.2,.9,.3,1.2)}
.xn-toast.out{opacity:0;transform:translateX(30px);transition:all .3s ease}
.xn-toast .ic{font-size:18px;line-height:1.2}
.xn-toast b{display:block;font-size:.8rem}
.xn-toast p{margin:.15rem 0 0;font-size:.72rem;color:var(--x-muted)}
@keyframes xn-tin{from{opacity:0;transform:translateX(40px) scale(.96)}}
html.ugs-playing .xn-toasts,html.xn-popout .xn-toasts{display:none}

/* ---------- home side windows ---------- */
.xn-card{position:fixed;z-index:60;border-radius:var(--x-radius);background:var(--x-panel);border:1px solid var(--x-border);backdrop-filter:blur(var(--x-blur));-webkit-backdrop-filter:blur(var(--x-blur));box-shadow:0 18px 48px rgba(0,0,0,.45);color:var(--x-text);text-align:left;font-family:inherit;animation:xn-cin .6s cubic-bezier(.22,.61,.36,1) both}
@keyframes xn-cin{from{opacity:0;transform:translateY(12px)}}
html.xn-locked .xn-card,html.ugs-playing .xn-card,html.xn-popout .xn-card{display:none !important}
.xn-card-x{position:absolute;top:8px;right:8px;width:24px;height:24px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:var(--x-muted);cursor:pointer;font-size:14px;line-height:1}
.xn-card-x:hover{background:rgba(255,255,255,.16);color:#fff}
.xn-btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.48rem .95rem;border:1px solid var(--x-border);border-radius:999px;background:rgba(255,255,255,.08);color:var(--x-text);font:600 .74rem system-ui,sans-serif;cursor:pointer;text-decoration:none;transition:background .15s ease,transform .15s ease}
.xn-btn:hover{background:rgba(255,255,255,.16)}
.xn-btn.main{background:linear-gradient(90deg,var(--x-accent),var(--x-accent2));border-color:transparent;color:#fff}
.xn-btn.main:hover{transform:translateY(-1px);filter:brightness(1.1)}
.xn-btn.warn{background:rgba(239,68,68,.25);border-color:rgba(239,68,68,.5)}
.xn-btn[disabled]{opacity:.5;cursor:default}
.xn-mini{background:none;border:0;color:var(--x-muted);font:inherit;font-size:.66rem;cursor:pointer;padding:.2rem 0;text-decoration:underline}
.xn-stealth{right:clamp(14px,2.4vw,40px);top:calc(50% - 205px);width:214px;padding:1rem}
.xn-stealth-h{display:flex;align-items:center;gap:.55rem;margin:0 1.5rem .7rem 0}
.xn-stealth-h svg{width:20px;height:20px;fill:none;stroke:var(--x-accent);stroke-width:1.8}
.xn-stealth-h b{font-size:.95rem;letter-spacing:.04em}
.xn-switch{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;padding:.62rem .8rem;border-radius:999px;border:1px solid var(--x-border);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02));color:var(--x-text);font:600 .78rem system-ui,sans-serif;cursor:pointer}
.xn-switch i{position:relative;flex:0 0 34px;height:19px;border-radius:999px;background:rgba(255,255,255,.18);transition:background .2s ease}
.xn-switch i::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .2s ease}
.xn-switch.on i{background:#22c55e}
.xn-switch.on i::after{transform:translateX(15px)}
.xn-stealth p{margin:.6rem .1rem 0;font-size:.66rem;line-height:1.4;color:var(--x-muted)}
.xn-stealth-opts{display:none;margin-top:.6rem;gap:.45rem;flex-direction:column}
.xn-stealth.open .xn-stealth-opts{display:flex}
.xn-sel{width:100%;padding:.42rem .6rem;border-radius:10px;border:1px solid var(--x-border);background:rgba(0,0,0,.35);color:#fff;font:12px system-ui,sans-serif}
.xn-check{display:flex;gap:.45rem;align-items:center;font-size:.7rem;color:var(--x-muted);cursor:pointer}
.xn-prem{right:clamp(14px,2.4vw,40px);top:calc(50% + 10px);width:214px;padding:.9rem 1rem;cursor:pointer;background:linear-gradient(135deg,rgba(245,197,66,.22),rgba(255,138,61,.12) 50%,rgba(124,58,237,.18)),var(--x-panel);border-color:rgba(245,197,66,.45)}
.xn-prem b{display:flex;align-items:center;gap:.4rem;font-size:.9rem;color:#ffd975}
.xn-prem p{margin:.35rem 0 0;font-size:.7rem;line-height:1.4;color:var(--x-muted)}
.xn-prem:hover{border-color:#f5c542;box-shadow:0 18px 48px rgba(245,197,66,.2)}
@media (max-width:1180px){.xn-stealth,.xn-prem{width:184px}}
/* Folded (× pressed, or no room beside the search bar): a small tab that
   opens it again. */
.xn-fold-t{display:none}
.xn-card.xn-fold{width:auto;padding:.5rem .8rem;top:auto;bottom:6.6rem;transform:none;animation:none}
.xn-card.xn-fold>*:not(.xn-fold-t){display:none !important}
.xn-card.xn-fold .xn-fold-t{display:block;font:700 .72rem system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.xn-stealth.xn-fold{right:12px;bottom:9.4rem}
.xn-prem.xn-fold{right:12px;bottom:6.6rem}

/* ---------- sheets (popups) ---------- */
.xnx-sheet{position:fixed;inset:0;z-index:9800;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,5,12,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s ease}
.xnx-sheet.in{opacity:1}
.xnx-box{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:1.3rem;border-radius:22px;background:rgba(12,16,30,.97);border:1px solid var(--x-border);box-shadow:0 30px 80px rgba(0,0,0,.6);color:var(--x-text);text-align:left;font-family:system-ui,sans-serif}
.xnx-box h2{margin:0 0 .3rem;font-size:1.25rem}
.xnx-box h3{margin:1.1rem 0 .4rem;font-size:.9rem}
.xnx-box p{margin:.3rem 0;font-size:.82rem;line-height:1.5;color:var(--x-muted)}
.xnx-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:16px}
.xn-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:.45rem 0 .2rem}
.xn-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f5c542,#ff8a3d);transition:width .6s ease}
.xn-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.xn-input{flex:1 1 180px;min-width:0;padding:.55rem .75rem;border-radius:12px;border:1px solid var(--x-border);background:rgba(0,0,0,.35);color:#fff;font:13px system-ui,sans-serif;outline:none}
.xn-input:focus{border-color:var(--x-accent)}
.xn-perks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem;margin-top:.5rem}
.xn-perk{padding:.6rem .7rem;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(245,197,66,.2);font-size:.74rem}
.xn-perk b{display:block;color:#ffd975;font-size:.78rem}
.xn-premium-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;background:linear-gradient(90deg,#f5c542,#ff8a3d);color:#2a1700;font:800 .7rem system-ui,sans-serif}

/* ---------- live events ---------- */
#xn-event{position:fixed;inset:0;z-index:9650;pointer-events:none;width:100vw;height:100vh;opacity:0;transition:opacity .8s ease;mix-blend-mode:screen}
#xn-event.on{opacity:1}
.xn-event-banner{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:9660;padding:.5rem 1.1rem;border-radius:999px;background:rgba(10,8,24,.8);border:1px solid rgba(192,132,252,.6);color:#fff;font:700 .8rem system-ui,sans-serif;letter-spacing:.06em;box-shadow:0 0 30px rgba(192,132,252,.5);pointer-events:none;animation:xn-tin .4s ease}
html.ugs-playing #xn-event{opacity:.0 !important}

/* ---------- game of the day ---------- */
.xn-gotd{display:flex;align-items:center;gap:1rem;width:min(920px,92vw);padding:.8rem;border-radius:20px;background:linear-gradient(120deg,rgba(124,58,237,.3),rgba(14,165,233,.18)),var(--x-panel);border:1px solid rgba(192,132,252,.45);color:var(--x-text);text-decoration:none;text-align:left;box-shadow:0 16px 40px rgba(0,0,0,.35);transition:transform .18s ease,box-shadow .18s ease;box-sizing:border-box}
.xn-gotd:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(124,58,237,.35)}
.xn-gotd-art{flex:0 0 84px;height:84px;border-radius:16px;overflow:hidden;background:#111;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.4rem}
.xn-gotd-art img{width:100%;height:100%;object-fit:cover}
.xn-gotd small{display:block;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#d8b4fe}
.xn-gotd b{display:block;font-size:1.25rem;margin:.15rem 0}
.xn-gotd span{font-size:.74rem;color:var(--x-muted)}
.xn-gotd .xn-btn{margin-left:auto;flex:0 0 auto}
.xn-gotd-mini{display:inline-flex;align-items:center;gap:.5rem;margin:0 auto 1rem;padding:.4rem .9rem .4rem .4rem;border-radius:999px;background:linear-gradient(90deg,rgba(124,58,237,.35),rgba(14,165,233,.2));border:1px solid rgba(192,132,252,.45);color:#fff;text-decoration:none;font-size:.74rem;cursor:pointer}
.xn-gotd-mini img,.xn-gotd-mini i{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#222;flex:0 0 26px}
.xn-gotd-wrap{display:flex;justify-content:center}

/* ---------- pop-out chat window ---------- */
html.xn-popout .sp-dock,html.xn-popout .sp-topright,html.xn-popout .sp-statusbar,html.xn-popout .xn-banner,html.xn-popout .sp-rainfx{display:none !important}
html.xn-popout .sp-page{padding:0 !important}
.xn-popbtn{margin-left:.4rem}

/* ---------- shared page shell for Hall / Staff / TV ---------- */
.xp-wrap{width:min(1100px,94vw);margin:0 auto;padding:1rem 0 9rem;color:var(--x-text);text-align:left;font-family:system-ui,sans-serif}
.xp-wrap h1{margin:.2rem 0 .3rem;font-size:clamp(1.6rem,4vw,2.4rem);text-align:center}
.xp-sub{text-align:center;color:var(--x-muted);font-size:.85rem;margin:0 0 1.4rem}
.xp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:1rem;align-items:start}
.xp-box{padding:1rem 1.1rem;border-radius:var(--x-radius);background:var(--x-panel);border:1px solid var(--x-border);backdrop-filter:blur(var(--x-blur));-webkit-backdrop-filter:blur(var(--x-blur))}
.xp-box h2{margin:0 0 .7rem;font-size:1rem;display:flex;align-items:center;gap:.45rem}
.xp-box label{display:block;margin:.5rem 0 .25rem;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--x-muted)}
.xp-box .xn-input,.xp-box select{width:100%;box-sizing:border-box}
.xp-box select{padding:.5rem .6rem;border-radius:12px;border:1px solid var(--x-border);background:rgba(0,0,0,.35);color:#fff;font:13px system-ui,sans-serif}
.xp-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.xp-msg{margin-top:.5rem;font-size:.75rem;color:#86efac;min-height:1em}
.xp-msg.err{color:#fca5a5}
.xp-wide{grid-column:1/-1}
.xp-lb{width:100%;border-collapse:collapse;font-size:.82rem}
.xp-lb td{padding:.5rem .4rem;border-bottom:1px solid rgba(255,255,255,.06)}
.xp-lb td:first-child{width:2.2rem;font-weight:800;color:var(--x-muted)}
.xp-lb tr:nth-child(1) td:first-child{color:#ffd75e}
.xp-lb tr:nth-child(2) td:first-child{color:#d6dde8}
.xp-lb tr:nth-child(3) td:first-child{color:#e6a05c}
.xp-lb .t{text-align:right;font-variant-numeric:tabular-nums;color:#fff;font-weight:650}
.xp-lb .g{font-size:.68rem;color:var(--x-muted)}
.xp-tagpill{display:inline-block;margin-left:.35rem;padding:0 .45rem;border-radius:999px;font-size:.62rem;font-weight:800;vertical-align:middle;color:#fff;background:linear-gradient(90deg,var(--tc,#7c5cff),var(--tc2,#7c5cff))}
.xp-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.6rem}
.xp-fame{padding:.8rem;border-radius:14px;background:linear-gradient(160deg,rgba(255,215,94,.16),rgba(255,255,255,.03));border:1px solid rgba(255,215,94,.35)}
.xp-fame b{display:block;font-size:.92rem}
.xp-fame span{font-size:.72rem;color:var(--x-muted)}
.xp-staff{display:flex;flex-wrap:wrap;gap:.5rem}
.xp-staff div{padding:.45rem .7rem;border-radius:12px;background:rgba(255,255,255,.05);font-size:.8rem}
.xp-role{display:inline-block;margin-left:.35rem;padding:0 .45rem;border-radius:6px;font-size:.62rem;font-weight:800}
.xp-role.owner{background:linear-gradient(90deg,#ffd75e,#ff9f1c);color:#2a1700}
.xp-role.supreme{background:linear-gradient(90deg,#00e5ff,#7c3aed,#ff2bd6);color:#fff;font-family:'xn-pusab',system-ui,sans-serif}
.xp-role.superadmin{background:#ff4d6d;color:#fff}
.xp-role.admin{background:#2fd08f;color:#03150d}
.xp-people{max-height:360px;overflow:auto;margin-top:.5rem}
.xp-person{display:flex;align-items:center;gap:.5rem;padding:.4rem .3rem;border-bottom:1px solid rgba(255,255,255,.05);font-size:.8rem}
.xp-person .on{width:8px;height:8px;border-radius:50%;background:#555;flex:0 0 8px}
.xp-person .on.y{background:#22c55e}
.xp-person button{margin-left:auto}
.xp-tagrow{display:flex;align-items:center;gap:.4rem;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.05);flex-wrap:wrap}
.xp-perms{display:flex;flex-wrap:wrap;gap:.25rem .7rem;width:100%;font-size:.68rem;color:var(--x-muted)}
.xp-perms label{display:flex;align-items:center;gap:.25rem;margin:0;text-transform:none;letter-spacing:0;font-size:.68rem}
.xp-only{padding:3rem 1rem;text-align:center;color:var(--x-muted)}
/* TV */
.xt-stage{position:relative;width:min(1100px,94vw);aspect-ratio:16/9;margin:0 auto;border-radius:20px;overflow:hidden;background:#000;border:1px solid var(--x-border);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.xt-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.xt-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;color:var(--x-muted);background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,#141a2c,#05070e)}
.xt-off b{font-size:1.3rem;color:#fff}
.xt-now{display:flex;align-items:center;gap:.6rem;justify-content:center;margin:.9rem 0}
.xt-live{padding:.15rem .5rem;border-radius:6px;background:#ef4444;color:#fff;font:800 .68rem system-ui,sans-serif;letter-spacing:.1em;animation:xn-blink 1.6s infinite}
/* Settings: Look */
.xl-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.6rem}
.xl-theme{position:relative;padding:0;border-radius:14px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:none;color:#fff;text-align:left;font:inherit}
.xl-theme.on{border-color:#fff}
.xl-theme .sw{height:58px;display:flex}
.xl-theme .sw i{flex:1}
.xl-theme .nm{display:block;padding:.4rem .5rem;font-size:.72rem;font-weight:700;background:rgba(0,0,0,.55)}
.xl-theme .lock{position:absolute;top:6px;right:6px;padding:0 .4rem;border-radius:6px;background:rgba(0,0,0,.7);font-size:.6rem}
.xl-cursors{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:.5rem}
.xl-cur{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.55rem .3rem;border-radius:12px;border:2px solid transparent;background:rgba(255,255,255,.05);cursor:pointer;color:var(--x-muted);font:600 .6rem system-ui,sans-serif;text-align:center}
.xl-cur.on{border-color:#fff;color:#fff}
.xl-cur img{width:32px;height:32px;image-rendering:auto}

/* ---------- fixes after the first look ---------- */
/* The block theme colours every <button>; ours keep their own look. */
.xn-btn{background:rgba(255,255,255,.08) !important;color:var(--x-text) !important;border:1px solid var(--x-border) !important;box-shadow:none}
.xn-btn.main{background:linear-gradient(90deg,var(--x-accent),var(--x-accent2)) !important;border-color:transparent !important;color:#fff !important;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.xn-btn.warn{background:rgba(239,68,68,.25) !important;border-color:rgba(239,68,68,.5) !important}
.xn-popbtn{flex:0 0 auto !important;width:auto !important;margin-left:auto !important;padding:.35rem .8rem !important;font-size:.7rem !important}
.xn-note .go{background:linear-gradient(90deg,#ec4899,#f59e0b) !important;color:#fff !important}
.xn-event-banner{top:66px}

/* ---------- chat on a Chromebook ---------- */
/* Fill the screen between the top pills and the taskbar instead of a fixed
   72vh box the taskbar overlapped. */
html.xn-chat body .dc-shell{position:relative;height:calc(100vh - 196px) !important;min-height:340px;max-height:980px;width:min(1440px,96vw) !important;margin:60px auto 136px !important}
/* The member list slides in (people button in the header) instead of eating
   a column the messages need. */
@media (max-width:1440px){
  html.xn-chat body .dc-side{position:absolute;right:0;top:0;bottom:0;z-index:3;transform:translateX(100%);transition:transform .18s ease;background:rgba(9,15,28,.97) !important}
  html.xn-chat body .dc-side.open{transform:none}
  html.xn-chat body .dc-members-btn{display:block}
}
/* The pop-out window is all chat. */
html.xn-popout body .dc-shell{height:100vh !important;max-height:none;width:100vw !important;margin:0 !important;border-radius:0 !important;border:0 !important}
html.xn-popout main,html.xn-popout .wp-site-blocks{padding:0 !important;margin:0 !important}
html.xn-popout .entry-content{margin:0 !important}

/* ---------- taskbar scroll notifier ---------- */
.xn-dock-arrow{position:fixed;z-index:51;width:30px;height:30px;padding:0 0 2px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(12,22,40,.82) !important;border:1px solid rgba(150,185,255,.32) !important;color:#eef3ff !important;font:700 20px/1 system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(0,0,0,.5);transition:background .15s ease}
.xn-dock-arrow:hover{background:rgba(30,45,80,.95) !important}
.xn-dock-arrow[hidden]{display:none !important}
.xn-dock-arrow.nudge{animation:xn-nudge 1.4s ease-in-out infinite}
@keyframes xn-nudge{50%{transform:translateX(4px)}}
html.xn-tv-live .xn-dock-arrow.right::after{content:'';position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px rgba(5,8,16,.9)}
html.ugs-playing .xn-dock-arrow,html.xn-popout .xn-dock-arrow,html.xn-locked .xn-dock-arrow,html.mv-on .xn-dock-arrow{display:none !important}