/* VoidVision · Psychedelic skin.
   Loaded last. Changes colour, surface, motion and decoration only:
   no grid, size or placement rules are altered, so the layout stays intact. */
@property --psy-a{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--teal:#2ec5ff;--pink:#ff3cd7;--neon-pink:#ff3cd7;--neon-blue:#2ec5ff;--neon-violet:#8a5cff;--ink:#f3f0ff;--ink-dim:#b7b3d9;--black:#030308;--glass:rgba(6,5,14,.84);--glass-2:rgba(10,8,22,.9);--psy-ring:conic-gradient(from var(--psy-a),#ff3cd7,#8a5cff,#2ec5ff,#8a5cff,#ff3cd7);background:#030308;color:var(--ink)}
html{background:#030308}
/* Body goes transparent so the live field (z-index -2) shows through. */
body,body[data-backdrop]{background:transparent!important}

/* Live background canvases. */
.psy-field,.psy-still{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;pointer-events:none;display:block}
.psy-wipe{position:fixed;inset:0;width:100vw;height:100vh;z-index:60;pointer-events:none;mix-blend-mode:screen}
.aura{background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0 9deg,#ff3cd705 9deg 10deg),radial-gradient(ellipse at 50% 50%,transparent 55%,#030308 100%);animation:psy-spin 120s linear infinite;inset:-25%}

/* Chrome / title bar. */
header{background:linear-gradient(90deg,#05040bee,#08061aee);border-bottom:0;color:#cfc8f0;position:relative}
header:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#ff3cd7,#8a5cff,#2ec5ff,transparent);opacity:.85}
.signal{background:#ff3cd7;box-shadow:0 0 10px #ff3cd7,0 0 22px #2ec5ff;animation:psy-signal 2.4s ease-in-out infinite}

/* Generic controls. */
button{color:#ece8ff;background:#0b0a18;border-color:#8a5cff55;transition:border-color .25s,background .35s,transform .25s,box-shadow .35s,color .25s}
button:hover:not(:disabled){border-color:#2ec5ff;background:#120f28;box-shadow:0 0 0 1px #2ec5ff33,0 0 18px #2ec5ff33,0 0 32px #ff3cd71f}
button:focus-visible,input:focus-visible,summary:focus-visible{outline-color:#ff3cd7}
input,select{background:#05050c;border-color:#8f6cffb3;color:var(--ink);caret-color:#ff3cd7;transition:border-color .25s,box-shadow .25s}
input:focus{border-color:#2ec5ff;box-shadow:0 0 0 1px #2ec5ff55,0 0 16px #2ec5ff22}
.primary{background:linear-gradient(110deg,#ff3cd7,#8a5cff 45%,#2ec5ff 90%);background-size:220% 100%;background-position:0 0;border-color:transparent;color:#fff;box-shadow:0 0 18px #ff3cd744;text-shadow:0 1px 2px #0008}
.primary:hover:not(:disabled){background:linear-gradient(110deg,#ff3cd7,#8a5cff 45%,#2ec5ff 90%);background-size:220% 100%;background-position:100% 0;border-color:transparent;box-shadow:0 0 22px #2ec5ff66,0 0 40px #ff3cd744}
.eyebrow{color:#2ec5ff;text-shadow:0 0 10px #2ec5ff66}
.muted{color:var(--ink-dim)}

/* Neon conic border for the main surfaces (padding-box glass + border-box ring). */
.login-box,.social-panel,.inbox-panel,.home-promos{border:1px solid transparent!important;background:linear-gradient(var(--glass),var(--glass)) padding-box,var(--psy-ring) border-box!important;animation:none!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.home-promos{box-shadow:0 18px 50px #000a,0 0 34px #8a5cff26}
.featured-game{background:#05040c}
.home-promo-controls{border-top-color:#8a5cff33;background:#05040ccc}
.home-promo-status{color:#c9c3ea}
.home-promo-controls>button{background:#0b0a18;border-color:#8a5cff55}
.home-promo-dots button{background:#4a4470}
.home-promo-dots button[aria-pressed=true]{background:#ff3cd7;box-shadow:0 0 10px #ff3cd7,0 0 18px #2ec5ff66}
.studio-promo{background:radial-gradient(ellipse at 95% 15%,#2ec5ff33,transparent 60%),radial-gradient(ellipse at 10% 100%,#ff3cd72a,transparent 60%),#06050f}
.studio-promo-copy p{color:#cdc8ec}
.studio-promo-tile{background:linear-gradient(140deg,#2ec5ff1f,#ff3cd722);border-color:#8a5cff55}
.studio-promo-apps button{background:#0b0a18cc;border-color:#8a5cff44}
#play-game{border-color:#ff3cd7;color:#fff;background:linear-gradient(115deg,#c01f9e,#6a3fd8 50%,#1270ad);background-size:200% 100%;box-shadow:0 6px 0 #1a0628,0 14px 28px #000a,0 0 26px #ff3cd755,inset 0 1px #ffffff88;text-shadow:2px 2px 0 #1a0628}
#play-game:before{opacity:.45;background:repeating-conic-gradient(from 20deg at 50% 50%,#ffffff2e 0deg 8deg,transparent 8deg 20deg,#2ec5ff40 20deg 28deg,transparent 28deg 45deg)}
#play-game:hover{background-position:100% 0;box-shadow:0 7px 0 #1a0628,0 16px 36px #000a,0 0 34px #2ec5ff77,0 0 50px #ff3cd744,inset 0 1px #fff}
#game-launch-options{border-color:#8a5cff88}
#game-launch-menu{background:#06050ff7;border-color:#ff3cd7;box-shadow:0 10px 40px #000c,0 0 24px #ff3cd733}
#game-launch-menu button{background:#100d24;color:#ece8ff}
#game-launch-menu button:hover:not(:disabled){background:linear-gradient(90deg,#2ec5ff22,#ff3cd71a)}
#game-launch-path{color:#9fdcff}
.featured-game:after{border:0;animation:none;background:repeating-linear-gradient(115deg,transparent 0 46px,#ff3cd70a 47px 48px,transparent 49px 94px,#2ec5ff0a 95px 96px);mix-blend-mode:screen}
.feature-scrim{background:linear-gradient(90deg,#030308f2,#06041480 58%,#0300120d)}

/* Sign-in screen. */
.login-art:before{background:radial-gradient(ellipse at 35% 25%,#2ec5ff1c,transparent 55%),radial-gradient(ellipse at 80% 70%,#ff3cd722,transparent 55%);animation:psy-blob 18s ease-in-out infinite}
.logo-orbits i{border-color:#2ec5ff38;box-shadow:0 0 0 12px #2ec5ff06,0 0 0 24px #ff3cd705,0 0 0 38px #8a5cff04}
.logo-orbits i:nth-child(2){border-color:#ff3cd73a}
.logo-orbits i:nth-child(3){border-color:#8a5cff40}
#hub-iris{filter:drop-shadow(0 0 18px #ff3cd733) drop-shadow(0 0 30px #2ec5ff22)}
.login-art h1{color:#fbf8ff;text-shadow:3px 3px 0 #ff3cd7,-3px -2px 0 #2ec5ff,0 0 26px #8a5cff88;animation:identity-reveal .8s ease-out both,psy-split 7s ease-in-out .8s infinite}
.login-art h1 span{color:transparent;background:linear-gradient(100deg,#7fe0ff,#2ec5ff 30%,#b28cff 60%,#ff7ce3);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:psy-slide 12s linear infinite}
.login-tag{color:#ff9ee9;text-shadow:0 0 14px #ff3cd788}
.login-delay{color:#c3bde6}
.login-box{box-shadow:0 26px 70px #000c,0 0 40px #ff3cd71c,0 0 70px #2ec5ff12!important}
.login-box:before{background:linear-gradient(#2ec5ff,#ff3cd7);box-shadow:0 0 14px #ff3cd788}
.terminal-bar{background:#0a0817e6;border-bottom-color:#8a5cff44}
.terminal-bar>span:first-child{color:#2ec5ff}
.terminal-bar>span:last-child{color:#ff3cd7}
.login-box h2{color:#e9f8ff;text-shadow:0 0 16px #2ec5ff66}
.login-box h2:before{color:#ff3cd7}
.login-box h2:after{color:#2ec5ff}
.login-box label{color:#c9c3ea}
.login-box label:not(.remember):before{color:#8a5cff}
.login-box input:not([type=checkbox]){background:#2ec5ff07;border-bottom-color:#8a5cff88;box-shadow:inset 3px 0 #ff3cd755;color:#f2f6ff}
.login-box input:not([type=checkbox]):focus{outline-color:#2ec5ff99;background:#2ec5ff10;box-shadow:inset 3px 0 #2ec5ff,0 0 18px #2ec5ff22}
.login-box .primary{background:linear-gradient(90deg,#ff3cd733,#8a5cff22,#2ec5ff2a);background-size:200% 100%;border:1px solid #ff3cd777;color:#fff;box-shadow:0 0 14px #ff3cd722}
.login-box .primary:before{color:#2ec5ff}
.login-box .primary:hover:not(:disabled){background-position:100% 0;border-color:#2ec5ff;box-shadow:0 0 22px #2ec5ff44,0 0 32px #ff3cd72a}
.login-box .google-button{background:#ffffff05;border-color:#8a5cff44;color:#d8d4f2}
.login-box button:hover:not(:disabled){border-color:#2ec5ff}
.login-box .text-button,.login-box .offline-button{color:#cfc9f0}
.login-box .text-button:before,.login-box .offline-button:before{color:#ff3cd7}
.login-box .text-button:hover:not(:disabled),.login-box .offline-button:hover:not(:disabled){color:#fff;text-shadow:0 0 10px #2ec5ff;box-shadow:none;background:transparent}
.login-box #account-status{color:#bdb5e2;border-left-color:#ff3cd777}
.auth-divider{color:#b9b3dc}.auth-divider:before,.auth-divider:after{background:linear-gradient(90deg,transparent,#8a5cff88,transparent)}
.remember input{accent-color:#ff3cd7}

/* Home: sidebar. */
.library-sidebar{background:linear-gradient(170deg,#06050ef2,#040309f5)!important;border-right:0;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.library-sidebar:after{content:'';position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(#ff3cd7,#8a5cff,#2ec5ff,#ff3cd7);pointer-events:none}
.sidebar-brand strong{color:#fff;text-shadow:2px 2px 0 #ff3cd7,-1px -1px 0 #2ec5ff,0 0 14px #8a5cff99}
.home-button{background:linear-gradient(90deg,#ff3cd722,#2ec5ff14)!important;border-color:#ff3cd788!important;color:#fff;box-shadow:inset 3px 0 #ff3cd7}
.home-button.active{box-shadow:inset 3px 0 #ff3cd7,0 0 18px #ff3cd733}
.library-sidebar summary{color:#b9b2e2;transition:color .25s,letter-spacing .35s}
.library-sidebar summary:hover{color:#2ec5ff;letter-spacing:.2em}
.library-sidebar details{border-bottom-color:#8a5cff2a}
.library-app{position:relative;color:#e2defa}
.library-app:hover:not(:disabled){background:linear-gradient(90deg,#2ec5ff1f,#ff3cd712)!important;border-color:#2ec5ff55!important;box-shadow:inset 2px 0 #2ec5ff}
.sidebar-account{border-top-color:#8a5cff33}
.sidebar-account strong{color:#fff;text-shadow:1px 1px #ff3cd7,-1px 0 #2ec5ff}
.sidebar-account #avatar-edit{color:#2ec5ff}
.sidebar-account #account-signout{color:#ff7ce3}
#account-portrait{border-color:#2ec5ff;box-shadow:0 0 0 3px #12052a,0 0 16px #ff3cd744}

/* Home: content. */
.home-top h2{color:#fff;text-shadow:2px 2px 0 #ff3cd7aa,-2px -1px 0 #2ec5ffaa}
.home-top h2 span{color:#2ec5ff;text-shadow:0 0 14px #2ec5ff}
#service-status{color:#9fdcff}
.poster-stamp{color:#e9f8ff;border-left-color:#ff3cd7;background:#05040ccc;padding:5px 8px;box-shadow:inset 0 0 0 1px #2ec5ff44}
.feature-copy h2{text-shadow:3px 3px 0 #ff3cd7,-2px -2px 0 #2ec5ff}
.poster-label{background:linear-gradient(90deg,#ff3cd7,#8a5cff,#2ec5ff);color:#05040c;font-weight:700;animation:none;box-shadow:0 0 20px #ff3cd766}
.social-panel:before{background:#2ec5ff;box-shadow:0 0 12px #2ec5ff}
.inbox-panel:before{background:#ff3cd7;box-shadow:0 0 12px #ff3cd7}
.social-panel,.inbox-panel{box-shadow:0 18px 40px #0009;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.social-panel:hover,.inbox-panel:hover{box-shadow:0 18px 40px #0009,0 0 28px #8a5cff2a}
.panel-title h3{color:#fff;text-shadow:2px 2px 0 #ff3cd799,-1px -1px 0 #2ec5ff99}
.panel-title h3 span{color:#2ec5ff}
.social-panel p,.inbox-panel p{color:#c4bfe3}
#friends-search label{color:#d4cff0}
.friend-row{border-bottom-color:#8a5cff26}
.friend-avatar{border-color:#ff3cd777;background:linear-gradient(145deg,#2ec5ff33,#ff3cd733)}
.friend-row small{color:#a39ccd}
.console-welcome{background:repeating-linear-gradient(125deg,transparent 0 22px,#ff3cd708 23px 24px,transparent 25px 46px,#2ec5ff08 47px 48px),linear-gradient(110deg,#2ec5ff12,#ff3cd712);border-color:#ff3cd755;position:relative;overflow:hidden}
.console-welcome:after{content:'';position:absolute;inset:-60%;background:conic-gradient(from 210deg,transparent 0 80%,#2ec5ff18 88%,transparent 96%);pointer-events:none}
.console-welcome>span{color:#ff7ce3}
.console-welcome h4{color:#fff;text-shadow:0 0 14px #2ec5ff88,2px 2px 0 #ff3cd788}
.inbox-thread{border-bottom-color:#8a5cff26}
.inbox-thread b{background:#ff3cd7;color:#05040c}
.message{background:#0d1838}
.message.own{background:#2a0c34}
footer{color:#8f88b8}
#status{color:#a8dcff}
.home-content{scrollbar-color:#8a5cff #05040c}

/* Dialog. */
.account-settings{background:radial-gradient(ellipse at 100% 0,#ff3cd722,transparent 60%),radial-gradient(ellipse at 0 100%,#2ec5ff18,transparent 60%),#06050e;border-color:#8a5cff99;box-shadow:0 28px 90px #000c,0 0 40px #ff3cd722}
.settings-heading h2{color:#fff;text-shadow:2px 2px 0 #ff3cd7,-1px -1px 0 #2ec5ff}
.account-tabs button[aria-selected=true]{border-color:#ff3cd7;color:#fff;background:#ff3cd71f}

/* Screen transitions: entrances melt in through a hue shift; the JS wipe blooms over them. */
.login-screen,.home-screen{animation:psy-in .7s cubic-bezier(.16,1,.3,1) both}
body.psy-shift main{animation:psy-shift .95s ease-out}

@keyframes psy-ring{to{--psy-a:360deg}}
@keyframes psy-spin{to{transform:rotate(360deg)}}
@keyframes psy-slide{to{background-position:200% 0}}
@keyframes psy-flow{to{background-position:0 300%}}
@keyframes psy-signal{50%{background:#2ec5ff;box-shadow:0 0 10px #2ec5ff,0 0 22px #ff3cd7}}
@keyframes psy-split{0%,100%{text-shadow:3px 3px 0 #ff3cd7,-3px -2px 0 #2ec5ff,0 0 26px #8a5cff88}50%{text-shadow:-3px 2px 0 #ff3cd7,3px -2px 0 #2ec5ff,0 0 34px #ff3cd766}}
@keyframes psy-blob{50%{border-radius:58% 42% 45% 55%;transform:rotate(-4deg) scale(1.04)}}
@keyframes psy-in{from{opacity:0;filter:blur(8px) saturate(2) brightness(1.4)}to{opacity:1;filter:none}}
@keyframes psy-shift{0%{filter:none}30%{filter:saturate(1.7) brightness(1.18) contrast(1.05)}100%{filter:none}}

@media(prefers-reduced-motion:reduce){.psy-wipe{display:none}.login-art h1 span{background-position:0 0}}

/* ===== Windows inside the DMT room =====
   The panels hang in the space like surfaces of the chamber: the side panels
   angle in toward the portal, the featured ad tilts back like a ceiling plane,
   and everything sways with the pointer. Uses the individual rotate/translate
   properties so layout boxes and the intro entrance transforms are untouched. */
:root{--glass:rgba(5,4,13,.72)}
.home-screen{perspective:1700px;perspective-origin:60% 40%}
.home-content{perspective:1500px;perspective-origin:50% 30%}
.home-panels{perspective:1300px;perspective-origin:50% 30%}
.library-sidebar{transform-origin:0 50%;rotate:0 1 0 calc(5deg + var(--psy-tx,0)*-2.5deg);box-shadow:30px 0 60px -30px #ff3cd733}
.home-promos{transform-origin:50% 100%;rotate:1 0 0 calc(5deg + var(--psy-ty,0)*-3deg);translate:calc(var(--psy-tx,0)*-6px) 0}
.social-panel{transform-origin:0 50%;rotate:0 1 0 calc(6deg + var(--psy-tx,0)*-3deg)}
.inbox-panel{transform-origin:100% 50%;rotate:0 1 0 calc(-6deg + var(--psy-tx,0)*-3deg)}
.social-panel,.inbox-panel,.home-promos{-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
/* Room light spilling onto the glass, and a floor reflection under each window. */
.social-panel{box-shadow:0 30px 60px -20px #000c,-18px 0 50px -24px #2ec5ff55,0 0 0 1px #2ec5ff22 inset}
.inbox-panel{box-shadow:0 30px 60px -20px #000c,18px 0 50px -24px #ff3cd755,0 0 0 1px #ff3cd722 inset}
.home-promos{box-shadow:0 40px 70px -25px #000d,0 -20px 60px -30px #8a5cff66}
.social-panel:hover,.inbox-panel:hover{box-shadow:0 30px 60px -20px #000c,0 0 40px #8a5cff44,0 0 0 1px #ffffff18 inset}
.home-top{translate:calc(var(--psy-tx,0)*-4px) calc(var(--psy-ty,0)*-3px)}
@keyframes psy-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(prefers-reduced-motion:reduce){.library-sidebar,.home-promos,.social-panel,.inbox-panel{rotate:none!important;translate:none!important}}
/* Legibility over the room: small sign-in copy gets a dark halo. */
.login-art .eyebrow,.login-delay,#service-status,footer{text-shadow:0 0 6px #030308,0 0 14px #030308,0 0 2px #030308}
.login-art .eyebrow{color:#7fe0ff}
/* Sign-in title stands alone: no line above VoidVision or below Social Studio. */
.login-art>.eyebrow,.login-art>.login-delay{display:none!important}

/* ===== Home: standing inside the world beyond the breakthrough =====
   The horizon and mandala sun sit behind the featured ad (a gateway the canal
   leads to); Friends and vChat stand on the floor as luminous monoliths with
   light pooling beneath them; the sidebar is a carved obelisk. */
.library-sidebar{background:
  linear-gradient(180deg,#ff3cd718 0,transparent 90px),
  repeating-linear-gradient(0deg,transparent 0 46px,#8a5cff14 46px 47px),
  repeating-conic-gradient(from 45deg at 50% 50%,#2ec5ff07 0 25%,transparent 0 50%) 0 0/34px 34px,
  linear-gradient(170deg,#06050ef5,#030208f8)!important}
.library-sidebar:before{content:'';position:absolute;left:12%;right:12%;top:0;height:2px;background:linear-gradient(90deg,transparent,#ff3cd7,#2ec5ff,transparent);box-shadow:0 0 18px #ff3cd7,0 0 40px #2ec5ff66;pointer-events:none}
.home-promos{box-shadow:0 0 0 1px #ffffff10,0 0 90px 10px #ff3cd72a,0 0 180px 40px #8a5cff1c,0 40px 70px -25px #000d!important}
.social-panel,.inbox-panel{overflow:visible}
.social-panel:after,.inbox-panel:after{content:'';position:absolute;left:6%;right:6%;bottom:-26px;height:34px;border-radius:50%;pointer-events:none;filter:blur(10px);opacity:.6}
.social-panel:after{background:radial-gradient(ellipse,#2ec5ff88,#2ec5ff00 70%)}
.inbox-panel:after{background:radial-gradient(ellipse,#ff3cd788,#ff3cd700 70%);animation-delay:-3.5s}
@keyframes psy-pool{50%{opacity:.4;transform:scaleX(.9)}}
@media(prefers-reduced-motion:reduce){.social-panel:after,.inbox-panel:after{animation:none}}

/* Lighter glass on Home so the world reads through the windows; text keeps a dark backing. */
.home-screen{--glass:rgba(4,3,12,.74)}
.home-screen .social-panel,.home-screen .inbox-panel{-webkit-backdrop-filter:blur(11px) saturate(1.4);backdrop-filter:blur(11px) saturate(1.4)}
.home-screen .social-panel p,.home-screen .inbox-panel p,.home-screen .panel-title,.home-screen #friends-search label{text-shadow:0 1px 3px #000c}
.home-screen .console-welcome{background-color:#05040cb3}

/* Round 2: sidebar becomes a dark glass column the world refracts through. */
.library-sidebar{background:linear-gradient(180deg,#ff3cd714 0,transparent 120px),linear-gradient(170deg,rgba(6,5,16,.62),rgba(3,2,9,.72))!important;-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5)}
.library-sidebar:after{width:2px!important;box-shadow:0 0 14px #2ec5ff,0 0 30px #2ec5ff66}
.home-screen .social-panel p,.home-screen .inbox-panel p{color:#e8e4f5}
.home-screen .friends-hint{color:#b9b3dc!important}
/* Click shockwave ring (DOM layer above the UI so it visibly sweeps across the panels). */
.psy-click{position:fixed;z-index:2147483000;width:150px;height:150px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.06);border:1.5px solid #9af0ffb3;box-shadow:0 0 10px 1px #2ec5ff55;mix-blend-mode:screen;animation:psy-click .7s cubic-bezier(.15,.75,.3,1) forwards}
.psy-click.b{border-color:#ff8ae699;box-shadow:0 0 10px 1px #ff3cd744;animation-duration:.85s;animation-delay:.07s;animation-fill-mode:both}
@keyframes psy-click{0%{transform:translate(-50%,-50%) scale(.06);opacity:.85;border-width:1.5px}100%{transform:translate(-50%,-50%) scale(1);opacity:0;border-width:1px}}
@media(prefers-reduced-motion:reduce){.psy-click{display:none}}

/* ===== Round 3 polish ===== */
/* Seam fix: the animated neon ring moves into border-image so no conic gradient
   sits under the translucent glass (its 0/360deg edge showed as a vertical seam). */
.social-panel,.inbox-panel{background:var(--glass)!important;border:1px solid transparent!important;border-image:conic-gradient(from 30deg,#ff3cd7,#8a5cff,#2ec5ff,#8a5cff,#ff3cd7) 1!important}
.home-screen{--glass:rgba(4,3,12,.8)}
.home-screen .social-panel,.home-screen .inbox-panel{-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
/* Commit to the 3D: panels angle in toward the canal like walls of the world. */
.social-panel{rotate:0 1 0 calc(12deg + var(--psy-tx,0)*-3deg)}
.inbox-panel{rotate:0 1 0 calc(-12deg + var(--psy-tx,0)*-3deg)}
/* Legible small type (sizes only; layout unchanged). */
.library-sidebar summary{font-size:11.5px;color:#cfc9ee;letter-spacing:.16em}
.library-app{font-size:12.5px}
.home-button{font-size:13px}
#service-status{font-size:11px;color:#c8c2e0}
footer{font-size:10px;color:#b6afd6}
#play-game{font:400 24px/1 VVAnton,'Anton Fallback',Impact,sans-serif;letter-spacing:.2em;text-shadow:0 2px 0 #1a0628,0 0 12px #1a062899}
.ga-card figcaption{letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Round 4 */
.library-sidebar{background:linear-gradient(180deg,#ff3cd714 0,transparent 120px),linear-gradient(170deg,rgba(6,5,16,.5),rgba(3,2,9,.6))!important;-webkit-backdrop-filter:blur(6px) saturate(1.5);backdrop-filter:blur(6px) saturate(1.5)}
.library-sidebar summary,.library-app,.home-button,.sidebar-account strong{text-shadow:0 1px 4px #000,0 0 10px #000}
footer{font-size:11px}
.panel-title h3 span{font-size:13px}
.console-welcome>span{font-size:10px;letter-spacing:.1em}

/* Round 5: quiet zone behind the header so the gem canopy never competes with it. */
.home-top{position:relative}
.home-top:before{content:'';position:absolute;inset:-26px -40px -18px -30px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 260px 70px at 120px 50%,#030308e6,#03030800 100%),radial-gradient(ellipse 230px 50px at calc(100% - 130px) 50%,#030308d9,#03030800 100%)}
.panel-title h3 span{font-size:13px;color:#7fe6ff;text-shadow:0 0 8px #000}
#status{font-size:12px}

/* ===== Motion contract =====
   Ambient loops live only in the background field and in decorative layers that hold no
   controls (logo, orbit rings, aura). Panels, buttons and anything containing a control never
   translate, rotate or scale on a loop; their only motion is a response to hover/focus/press.
   The pointer tilt (--psy-tx/--psy-ty) is set by psychedelic.js only at motion level "full". */
.home-button,.home-promo-slide,.login-box,.social-panel,.inbox-panel,.home-promos,.console-welcome,#devTeamInbox,#play-game,.library-sidebar,.featured-game{animation-iteration-count:1!important}
.home-button:not(:hover):not(:focus-visible),.home-promo-slide{animation:none!important}
#play-game:hover:before,#play-game:focus-visible:before{animation:play-pattern 24s linear infinite}
html[data-vv-motion-level=calm] :is(.aura,.signal,.logo-orbits i,.login-art:before,.login-art h1,.login-art h1 span,#play-game:before){animation:none!important}
html:not([data-vv-motion-level=full]) :is(.library-sidebar,.home-promos,.social-panel,.inbox-panel,.home-top){translate:none!important}