/* Ace HQ "Room" look (1.14.0): the painted room behind Butcher, a lit orb on a glowing
   pedestal, glass panels and picture game cards. Loaded after app.css and only restyles:
   every element and id the app code uses is unchanged. Remove the <link> to go back. */

:root{
  --glass:rgba(9,14,38,.62); --glass-2:rgba(8,12,32,.80); --glass-line:rgba(255,255,255,.08);
  --ink:#050A1C;
}
html,body{background:var(--ink)}

/* The room, dimmed, behind the whole app; the hero shows it clearly. */
.main{background:linear-gradient(180deg,rgba(5,9,26,.84),rgba(5,9,26,.93)),url(/img/room-tall.webp) center 40%/cover no-repeat var(--ink)}
@media (min-width:900px){
  .main{background:linear-gradient(90deg,rgba(5,9,26,.80),rgba(5,9,26,.90)),url(/img/room-wide.webp) center/cover no-repeat var(--ink)}
}

/* ---------- hero: the painted room ---------- */
.hero{background:#060B1E}
.hero .scene{position:absolute;inset:-3%;background:url(/img/room-wide.webp) 50% 66%/cover no-repeat;animation:sceneDrift 48s ease-in-out infinite alternate;will-change:transform}
.hero .vignette{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(5,9,26,.70) 0%,rgba(5,9,26,0) 26%),
  linear-gradient(0deg,rgba(5,9,26,.85) 0%,rgba(5,9,26,0) 22%),
  radial-gradient(ellipse 75% 70% at 50% 58%,rgba(5,9,26,0) 50%,rgba(5,9,26,.55) 100%)}
.hero .room,.hero .deskglow{display:none}
.hero .spill{opacity:.55}
.hero .topbar .brand h1,.hero .topbar .status{text-shadow:0 2px 14px rgba(0,0,0,.6)}
@keyframes sceneDrift{from{transform:scale(1.03) translateX(-.7%)}to{transform:scale(1.06) translateX(.7%)}}

/* ---------- the orb ---------- */
.aura{width:340px;height:340px;margin:-170px 0 0 -170px;background:radial-gradient(circle,rgba(255,170,100,.75) 0%,rgba(242,112,42,.42) 30%,rgba(242,112,42,.12) 52%,rgba(242,112,42,0) 68%);filter:blur(3px)}
.orb{background:radial-gradient(circle at 36% 30%,#FFF2DE 0%,#FFC089 13%,#FF8A3D 33%,#E0581A 55%,#8A2C0A 80%,#3A1204 100%);
  box-shadow:inset -22px -30px 56px rgba(40,6,0,.60),inset 12px 14px 30px rgba(255,226,190,.35),inset 0 -8px 20px rgba(120,150,255,.14),inset 5px 5px 12px rgba(255,214,170,.18)}
.orb{-webkit-mask-image:radial-gradient(circle closest-side,#000 98.6%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle closest-side,#000 98.6%,rgba(0,0,0,0) 100%)}
.swirl{filter:blur(7px)}
.gloss{left:20%;top:11%;width:38%;height:21%;background:radial-gradient(closest-side,rgba(255,255,255,.72),rgba(255,255,255,0));transform:rotate(-22deg)}
.swirl{background:conic-gradient(from 0deg,rgba(255,230,195,0),rgba(255,226,180,.5),rgba(255,230,195,0) 42%,rgba(255,150,70,.32) 66%,rgba(255,230,195,0))}

/* The pedestal he sits on: a lit ring and a pool of light that brightens when he talks. */
.pedestal{position:absolute;left:50%;top:50%;width:230px;height:50px;margin:62px 0 0 -115px;pointer-events:none}
.pedestal .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,186,130,.85);
  box-shadow:0 0 14px rgba(255,140,60,.75),0 0 34px rgba(255,120,40,.45),inset 0 0 14px rgba(255,150,70,.5);
  background:radial-gradient(closest-side,rgba(30,14,10,.55),rgba(10,8,20,.75))}
.pedestal .pool{position:absolute;left:8%;right:8%;top:14%;bottom:14%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,210,160,.95),rgba(255,140,60,.55) 45%,rgba(255,120,40,0));
  opacity:calc(.55 + var(--lvl,0) * .9);transition:opacity .12s linear}
.s-idle .pedestal .pool{animation:poolBreath 5s ease-in-out infinite}
.s-listen .pedestal .ring{border-color:rgba(127,227,255,.85);box-shadow:0 0 14px rgba(92,214,255,.7),0 0 34px rgba(92,214,255,.35),inset 0 0 14px rgba(92,214,255,.4)}
.s-think .pedestal .pool{animation:poolBreath 1.2s ease-in-out infinite}
.s-off .pedestal{opacity:.35}
@keyframes poolBreath{0%,100%{opacity:.5}50%{opacity:.85}}

/* ---------- glass panels ---------- */
.msg{background:rgba(20,30,72,.62);border-color:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.row.me .msg{background:linear-gradient(180deg,#3B82FF,#2563EB);box-shadow:0 6px 18px rgba(37,99,235,.28)}
.inputbox{background:rgba(6,10,30,.72);border-color:rgba(255,255,255,.10)}
.inputbox:focus-within{border-color:rgba(127,180,255,.55)}
.mic{border:0;background:radial-gradient(circle at 40% 35%,#5B9BFF 0%,#2563EB 55%,#1A3FB0 100%);box-shadow:0 10px 28px rgba(37,99,235,.45),0 0 0 6px rgba(59,130,246,.14)}
.mic.live{border:0;background:radial-gradient(circle at 40% 35%,#FFB27A 0%,#F2702A 55%,#B4400F 100%);box-shadow:0 10px 30px rgba(242,112,42,.6),0 0 0 8px rgba(242,112,42,.18)}
.mic.handsfree,.mic.talking{box-shadow:0 10px 28px rgba(74,222,128,.35),0 0 0 6px rgba(74,222,128,.25)}
.talkbar,.gamestrip{background:var(--glass-2);border-color:var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tabs{background:rgba(7,11,30,.86);border-top:1px solid var(--glass-line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

/* ---------- Play together: picture cards ---------- */
.play-head h2{font-size:19px;letter-spacing:-.2px}
.games-row{gap:14px;padding:4px 16px 10px}
.gcard{position:relative;flex:0 0 200px;aspect-ratio:16/9;border:0;border-radius:16px;background:#0B1230;overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.45);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.gcard .gart{position:absolute;inset:0}
.gcard .gart img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.gcard .gart .art{position:absolute;inset:0;height:auto}
.gcard:not(.pic) .gart .art{inset:0 0 34% 0}
.gcard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(4,6,18,0) 30%,rgba(4,6,18,.92) 100%)}
.gcard .info{position:absolute;left:13px;right:13px;bottom:10px;z-index:2;padding:0}
.gcard .name{font-size:17px;font-weight:900;letter-spacing:.2px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.gcard .sub{font-size:12.5px;color:#D7DDF5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard .soon{z-index:2}
.gcard .gplay{position:absolute;right:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.94);color:#0B0F24;font-size:13px;font-weight:900;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
.gcard:hover{transform:translateY(-4px) scale(1.02);border-color:transparent;box-shadow:0 22px 44px rgba(0,0,0,.55),0 0 0 1px rgba(255,190,140,.35)}
.gcard:hover .gart img{transform:scale(1.06)}
.gcard:hover .gplay,.gcard:focus-visible .gplay{opacity:1;transform:none}
.gcard.ready{border:0;box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 0 1px rgba(127,227,255,.45)}
.gcard.live{border:0;box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 0 2px var(--grass),0 0 16px rgba(107,192,75,.35)}
.ggrid .gcard{width:100%;flex:none}
.ggrid .gcard .name{font-size:22px}
.ggrid .gcard .sub{font-size:14px}
@media (hover:none){.gcard .gplay{opacity:.95;transform:none;padding:5px 10px;font-size:12px}}

/* ---------- desktop ---------- */
@media (min-width:900px){
  .side{width:220px;padding:22px 12px;background:rgba(7,11,30,.62);border-right:1px solid var(--glass-line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .navlink{padding:11px 14px;font-size:15px}
  .navlink[aria-current="page"]{background:rgba(59,130,246,.16);box-shadow:inset 0 0 0 1px rgba(127,180,255,.25)}
  .home{grid-template-columns:minmax(420px,1.45fr) minmax(360px,1fr)}
  .home .left{border-right:0}
  .home .left .hero{flex:1 1 auto;min-height:380px}
  .home .left .stage{top:auto;bottom:calc(30% - 40px);height:300px;width:340px;margin-left:-170px;margin-top:0;transform:none}
  .home .left .orb{width:220px;height:220px}
  .home .left .core{width:68px;height:68px;margin:-34px 0 0 -34px}
  .home .left .wave{width:220px;height:220px;margin:-110px 0 0 -110px}
  .home .left .aura{width:460px;height:460px;margin:-230px 0 0 -230px}
  .home .left .pedestal{width:310px;height:66px;margin:84px 0 0 -155px}
  .home .left .spill{top:auto;bottom:30%;margin-top:0}
  .home .left .gamestrip{position:static;margin:0 24px 8px;backdrop-filter:blur(14px)}
  .home .left .play{padding:6px 0 18px;background:linear-gradient(180deg,rgba(5,9,26,0),rgba(5,9,26,.55));border-top:0}
  .home .left .play-head{padding:0 24px}
  .home .left .games-row{padding:6px 24px 12px}
  .home .left .gcard{flex-basis:clamp(220px,19vw,300px)}
  .home .right{background:linear-gradient(180deg,rgba(10,16,44,.72),rgba(7,11,30,.86));border-left:1px solid var(--glass-line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .chat-head{border-bottom:1px solid var(--glass-line)}
}

/* ---------- phone ---------- */
@media (max-width:899px){
  .hero{height:clamp(240px,36vh,330px)}
  .home .left .hero .scene{background-position:50% 66%}
  .home .left .stage{top:auto;bottom:19%;transform:scale(.8);transform-origin:50% 50%}
  .home .left .spill{top:auto;bottom:4%}
  .home .play{padding:8px 0 2px}
  .games-row{padding:2px 16px 8px}
  .gcard{flex-basis:176px;border-radius:14px}
  .gcard .name{font-size:15px}
  .gcard .sub{font-size:12px}
}
@media (max-height:700px) and (max-width:899px){
  .hero{height:220px}
  .home .left .stage{transform:scale(.7);bottom:15%}
}
@media (max-width:640px){
  .ggrid{grid-template-columns:1fr}
  .ggrid .gcard .name{font-size:21px}
}

/* ---------- other bots (1.15.0): switcher, orb colours ---------- */
.botname{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;border-radius:12px}
.botname svg{opacity:.75;margin-top:6px}
.botname:hover svg{opacity:1}
.hero[data-orb="blue"] .stage{filter:hue-rotate(190deg) saturate(1.1)}
.hero[data-orb="cyan"] .stage{filter:hue-rotate(160deg) saturate(1.35) brightness(1.05)}
.hero[data-orb="green"] .stage{filter:hue-rotate(85deg)}
.hero[data-orb="purple"] .stage{filter:hue-rotate(245deg)}
.hero[data-orb="red"] .stage{filter:hue-rotate(-22deg) saturate(1.25)}
.hero[data-orb="silver"] .stage{filter:saturate(.12) brightness(1.15)}
.botlist{display:flex;flex-direction:column;gap:8px}
.botrow{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--glass-line);background:rgba(255,255,255,.03);color:var(--text);text-align:left}
button.botrow:hover{background:rgba(255,255,255,.06)}
.botrow.on{border-color:rgba(255,178,122,.6);background:rgba(242,112,42,.10)}
.botrow .bottext{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.botrow .bottext .hint{overflow:hidden;text-overflow:ellipsis}
.botdot{flex:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE6CC,#FF8A3D 45%,#9A330C);box-shadow:0 0 10px rgba(255,130,50,.45)}
.labchip .botdot{width:14px;height:14px}
.botdot[data-orb="blue"]{filter:hue-rotate(190deg) saturate(1.1)}
.botdot[data-orb="cyan"]{filter:hue-rotate(160deg) saturate(1.35) brightness(1.05)}
.botdot[data-orb="green"]{filter:hue-rotate(85deg)}
.botdot[data-orb="purple"]{filter:hue-rotate(245deg)}
.botdot[data-orb="red"]{filter:hue-rotate(-22deg) saturate(1.25)}
.botdot[data-orb="silver"]{filter:saturate(.12) brightness(1.15)}
.colorchip{display:inline-flex;align-items:center;gap:8px}
.colorchip.on{border-color:#FFB27A;background:rgba(242,112,42,.25)}
body[data-orb="blue"] .row:not(.me) .av{filter:hue-rotate(190deg) saturate(1.1)}
body[data-orb="cyan"] .row:not(.me) .av{filter:hue-rotate(160deg) saturate(1.35) brightness(1.05)}
body[data-orb="green"] .row:not(.me) .av{filter:hue-rotate(85deg)}
body[data-orb="purple"] .row:not(.me) .av{filter:hue-rotate(245deg)}
body[data-orb="red"] .row:not(.me) .av{filter:hue-rotate(-22deg) saturate(1.25)}
body[data-orb="silver"] .row:not(.me) .av{filter:saturate(.12) brightness(1.15)}

/* Vox (his own copy of the app): a little screen static over the orb (1.17.0). */
.hero[data-orb="cyan"] .orb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(180,255,255,.07) 0 1px,transparent 1px 3px);mix-blend-mode:screen;animation:voxScan 6s linear infinite}
@keyframes voxScan{from{background-position:0 0}to{background-position:0 60px}}
@media (prefers-reduced-motion:reduce){.hero[data-orb="cyan"] .orb::after{animation:none}}

/* The app's own logo follows the companion of this copy (cyan for Vox HQ), not the bot on screen. */
body[data-persona-orb="cyan"] .side .logo .av{filter:hue-rotate(160deg) saturate(1.35) brightness(1.05)}

/* =====================================================================================
   Vox HQ look (1.18.0). Vox HQ only (body[data-persona="vox"]); Butcher's copy is untouched.
   Neil's studio paintings behind the app, his orb picture (turning, with TV static when Vox
   talks), Bungee titles, Righteous for all other text, and a signal glitch on anything you can
   click or tap. Fonts are self-hosted (OFL, public/fonts). */
@font-face{font-family:'Righteous';src:url(/fonts/righteous.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Bungee';src:url(/fonts/bungee.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---------- colours and fonts ---------- */
body[data-persona="vox"]{--blue:#D81E4A;--blue-hi:#5CE8FF;--cyan:#1DE9FF;--red:#FF2D55;--orange:#1DE9FF;--orange-hi:#8FF6FF;
  --font:'Righteous','Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;font-family:var(--font);font-synthesis:none}
body[data-persona="vox"] :is(h1,.page-title,.gcard .name,#appNameLogo){font-family:'Bungee','Righteous',sans-serif;font-weight:400;letter-spacing:.01em}
body[data-persona="vox"] :is(h1,.page-title){color:#A8F7FF;text-shadow:2px 2px 0 rgba(255,45,85,.85),0 0 16px rgba(29,233,255,.4)}
body[data-persona="vox"] .gcard .name{font-size:14px}
body[data-persona="vox"] .ggrid .gcard .name{font-size:18px}
/* Codes stay in a plain computer font so 0 and O can't be mixed up. */
body[data-persona="vox"] :is(code,kbd,pre,samp,.codebox,.bigcode){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
body[data-persona="vox"] .row.me .msg{background:linear-gradient(180deg,#F0365F,#C8183F);box-shadow:0 6px 18px rgba(216,30,74,.32)}
body[data-persona="vox"] .mic{background:radial-gradient(circle at 40% 35%,#FF6B8A 0%,#D81E4A 55%,#8E0F2C 100%);box-shadow:0 10px 28px rgba(216,30,74,.45),0 0 0 6px rgba(255,45,85,.14)}
body[data-persona="vox"] .mic.live{background:radial-gradient(circle at 40% 35%,#B9FBFF 0%,#1DC9E6 55%,#0B7590 100%);box-shadow:0 10px 30px rgba(29,233,255,.55),0 0 0 8px rgba(29,233,255,.18)}
body[data-persona="vox"] .inputbox:focus-within{border-color:rgba(29,233,255,.55)}
body[data-persona="vox"] .navlink[aria-current="page"]{background:rgba(29,233,255,.12);box-shadow:inset 0 0 0 1px rgba(29,233,255,.3)}

/* ---------- the studio ---------- */
body[data-persona="vox"] .main{background:linear-gradient(180deg,rgba(5,8,24,.80),rgba(5,8,24,.92)),url(/img/vox-room-tall.webp) center 30%/cover no-repeat var(--ink)}
@media (min-width:900px){
  body[data-persona="vox"] .main{background:linear-gradient(90deg,rgba(5,8,24,.76),rgba(5,8,24,.88)),url(/img/vox-room-wide.webp) center/cover no-repeat var(--ink)}
}
body[data-persona="vox"] .hero .scene{background-image:url(/img/vox-room-wide.webp);background-position:50% 42%}
body[data-persona="vox"] .home .left .hero .scene{background-position:50% 42%}
body[data-persona="vox"] .hero .spill{background:radial-gradient(circle,rgba(29,233,255,.24) 0%,rgba(255,45,85,.10) 40%,rgba(0,0,0,0) 68%)}
body[data-persona="vox"] .spark{background:#C9FBFF;box-shadow:0 0 7px #1DE9FF}

/* ---------- his orb (Neil's picture) ---------- */
body[data-persona="vox"] .hero[data-orb="cyan"] .stage{filter:none}
body[data-persona="vox"] .hero[data-orb="cyan"] .orb{background:none;box-shadow:none;-webkit-mask-image:none;mask-image:none}
body[data-persona="vox"] .hero[data-orb="cyan"] :is(.swirl,.core,.gloss){display:none}
body[data-persona="vox"] .hero[data-orb="cyan"] .orb::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:url(/img/vox-orb.webp) center/cover no-repeat;animation:voxTurn 70s linear infinite}
body[data-persona="vox"] .hero[data-orb="cyan"].s-think .orb::before{animation-duration:9s}
/* TV static: faint when idle, strong when he talks (follows his voice level). */
body[data-persona="vox"] .hero[data-orb="cyan"] .orb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 1 0 0 0 0 1 2.4 0 0 0 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/96px 96px,
    repeating-linear-gradient(0deg,rgba(190,255,255,.12) 0 1px,transparent 1px 3px);
  opacity:.07;animation:voxStatic .42s steps(1,end) infinite;transition:opacity .1s linear}
body[data-persona="vox"] .hero[data-orb="cyan"].s-speak .orb::after{opacity:calc(.38 + var(--lvl,0) * 1.1)}
body[data-persona="vox"] .hero[data-orb="cyan"].s-speak .orb{animation:voxSignal 2.6s steps(1,end) infinite}
body[data-persona="vox"] .hero[data-orb="cyan"] .aura{background:radial-gradient(circle,rgba(29,233,255,.55) 0%,rgba(29,190,255,.26) 32%,rgba(255,45,85,.14) 52%,rgba(255,45,85,0) 70%);animation:voxBreath 5s ease-in-out infinite}
body[data-persona="vox"] .hero[data-orb="cyan"].s-think .aura{animation-duration:1.1s}
body[data-persona="vox"] .hero[data-orb="cyan"].s-speak .aura{animation-duration:.8s}
body[data-persona="vox"] .hero[data-orb="cyan"].s-listen .aura{animation:none;opacity:1;background:radial-gradient(circle,rgba(29,233,255,.75) 0%,rgba(29,233,255,.3) 40%,rgba(29,233,255,0) 70%)}
body[data-persona="vox"] .hero[data-orb="cyan"] .wave{border-color:rgba(29,233,255,.7)}
body[data-persona="vox"] .hero[data-orb="cyan"] .w2{border-color:rgba(255,45,85,.6)}
body[data-persona="vox"] .hero[data-orb="cyan"] .pedestal .ring{border-color:rgba(120,240,255,.85);box-shadow:0 0 14px rgba(29,233,255,.75),0 0 34px rgba(255,45,85,.35),inset 0 0 14px rgba(29,233,255,.45)}
body[data-persona="vox"] .hero[data-orb="cyan"] .pedestal .pool{background:radial-gradient(closest-side,rgba(200,250,255,.9),rgba(29,233,255,.45) 45%,rgba(255,45,85,.2) 72%,rgba(255,45,85,0))}
@keyframes voxTurn{to{transform:rotate(360deg)}}
@keyframes voxBreath{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes voxStatic{
  0%{background-position:0 0,0 0}20%{background-position:-23px 41px,0 1px}40%{background-position:37px -12px,0 2px}
  60%{background-position:-51px -33px,0 1px}80%{background-position:14px 58px,0 2px}100%{background-position:0 0,0 0}}
/* Now and then the picture jumps like a bad signal while he talks. */
@keyframes voxSignal{
  0%{translate:0 0;filter:none}
  60%{translate:-4px 1px;filter:drop-shadow(3px 0 0 rgba(255,45,85,.9)) drop-shadow(-3px 0 0 rgba(29,233,255,.9))}
  63%{translate:3px -1px;filter:drop-shadow(-3px 0 0 rgba(255,45,85,.9)) drop-shadow(3px 0 0 rgba(29,233,255,.9))}
  66%{translate:0 0;filter:none}
  88%{translate:2px 0;filter:drop-shadow(2px 0 0 rgba(255,45,85,.8)) drop-shadow(-2px 0 0 rgba(29,233,255,.8))}
  90%{translate:0 0;filter:none}
  100%{translate:0 0;filter:none}}

/* His picture on chat messages, highlights, Progress and the app logo. */
body[data-persona="vox"][data-orb="cyan"] :is(.row:not(.me) .av,.hl .av,.tile .av),
body[data-persona="vox"] .side .logo .av{background:url(/img/vox-orb.webp) center/cover no-repeat;filter:none;
  box-shadow:0 0 0 1.5px rgba(120,240,255,.55),0 0 14px rgba(29,233,255,.45)}

/* ---------- the signal glitch on anything you can click or tap ----------
   Not on text boxes, the mic or send buttons, or the game cards (Neil, 21 Oct 2026). Chat messages glitch
   once when they first arrive (app.js adds .vox-arrive), never on hover. */
@media (hover:hover){
  body[data-persona="vox"] :is(button:not(.stage):not(.mic):not(.gcard):not(#sendBtn),a,[role="button"],select,summary,.switch):hover{animation:voxGlitch .32s steps(2,end) 1}
}
body[data-persona="vox"] :is(button:not(.stage):not(.mic):not(.gcard):not(#sendBtn),a,[role="button"],select,summary,.switch):active{animation:voxGlitch .32s steps(2,end) 1}
body[data-persona="vox"] .msg.vox-arrive{animation:voxGlitch .32s steps(2,end) .2s 1}
body[data-persona="vox"] .stage:hover .orb-wrap,body[data-persona="vox"] .stage:active .orb-wrap{animation:voxGlitch .32s steps(2,end) 1}
/* translate (not transform) so it never undoes an element's own scale or rotation. */
@keyframes voxGlitch{
  0%{translate:0 0;text-shadow:none;clip-path:inset(0 0 0 0)}
  15%{translate:-2px 1px;text-shadow:2px 0 #ff2d55,-2px 0 #1de9ff;clip-path:inset(10% 0 55% 0)}
  30%{translate:3px -1px;text-shadow:-3px 0 #ff2d55,3px 0 #1de9ff;clip-path:inset(60% 0 8% 0)}
  45%{translate:-1px 0;text-shadow:1px 0 #ff2d55,-1px 0 #1de9ff;clip-path:inset(30% 0 35% 0)}
  60%{translate:2px 1px;text-shadow:-2px 0 #ff2d55,2px 0 #1de9ff;clip-path:inset(0 0 0 0);filter:brightness(1.3)}
  80%{translate:-1px 0;text-shadow:1px 0 #ff2d55,-1px 0 #1de9ff;filter:none}
  100%{translate:0 0;text-shadow:none;clip-path:inset(0 0 0 0)}
}

/* Reduce motion: no glitch, no turning or jumping; the orb stays still and only its glow changes. */
@media (prefers-reduced-motion:reduce){
  body[data-persona="vox"] :is(button,a,[role="button"],.gcard,select,summary,.switch,.msg,.hero .orb,.hero .orb-wrap,.hero .aura,.hero .scene,.hero .wave),
  body[data-persona="vox"] .hero .orb::before,body[data-persona="vox"] .hero .orb::after{animation:none!important}
}