/* ===== Comet: Mirage monochrome + Eclipse deep space =====
   Shape rule: chips, kbd and round icon buttons are pills; buttons and inputs 11px; cards 14px; panels and the player 18px. */
@font-face{font-family:"Unbounded";src:url(../assets/fonts/unbounded.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Onest";src:url(../assets/fonts/onest.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../assets/fonts/geist-mono.woff2) format("woff2");font-weight:400 600;font-display:swap}

:root{
  color-scheme:dark;
  --void:#07070a; --graphite:#111115; --regolith:#1b1b21; --regolith2:#26262d;
  --glass:rgba(14,14,18,.78); --glass-strong:rgba(15,15,19,.94);
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15); --line3:rgba(255,255,255,.32);
  --text:#f4f4f7; --muted:#a8a8b3; --dim:#7d7d88;
  --silver:#d8d8de; --shade:#9b9ba5; --earthshine:#c9d4ff; --signal:#5ff0b0; --danger:#ff4d5e;
  --r-ctl:11px; --r-card:14px; --r-panel:18px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --f-display:"Unbounded",system-ui,sans-serif; --f-body:"Onest",system-ui,sans-serif; --f-mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --gutter:clamp(16px,3.4vw,44px); --max:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--void);scroll-behavior:smooth}
body{min-height:100dvh;color:var(--text);font:15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background:
    radial-gradient(ellipse 60% 45% at 78% 8%,rgba(200,208,255,.055),transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 85%,rgba(120,130,190,.05),transparent 70%),
    radial-gradient(ellipse at 70% 20%,#101119 0%,#0a0a0f 45%,var(--void) 100%) fixed}
body.locked{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
a{color:inherit}
svg{display:block}
img{display:block;max-width:100%}
kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font:500 11.5px/1 var(--f-mono);color:var(--muted);
  background:rgba(255,255,255,.05);border:1px solid var(--line2)}
:focus-visible{outline:2px solid var(--earthshine);outline-offset:3px;border-radius:6px}
::selection{background:rgba(201,212,255,.28)}
::-webkit-scrollbar{width:10px;height:8px}
::-webkit-scrollbar-thumb{background:#2a2a31;border-radius:8px;border:2px solid var(--void)}
::-webkit-scrollbar-track{background:transparent}

#stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:var(--r-ctl);background:#fff;color:#0a0a0c;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ================= top bar ================= */
.sentinel{position:absolute;top:0;height:1px;width:1px}
.bar{position:sticky;top:0;z-index:30;height:68px;display:grid;grid-template-columns:1fr minmax(0,440px) 1fr;align-items:center;gap:20px;padding:0 var(--gutter);
  transition:background-color .3s ease,border-color .3s ease,-webkit-backdrop-filter .3s ease,backdrop-filter .3s ease;border-bottom:1px solid transparent}
.bar.stuck{background:rgba(9,9,12,.72);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;justify-self:start;border-radius:10px}
.mark{width:28px;height:28px;filter:drop-shadow(0 0 7px rgba(255,255,255,.28))}
.wordmark{font:700 19px/1 var(--f-display);letter-spacing:-.01em}
.search-wrap{position:relative;min-width:0}
.search-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;padding:6px;border-radius:16px;max-height:min(70vh,520px);overflow-y:auto;
  background:rgba(16,16,20,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line2);box-shadow:0 24px 60px rgba(0,0,0,.65);
  transform-origin:top center;animation:pop .16s var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.985)}}
.sp-label{padding:8px 10px 6px;font-size:12px;color:var(--dim)}
.sp-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:6px;border-radius:11px;text-align:left}
.sp-row .art{width:64px;border-radius:8px}
.sp-row b{display:block;font:600 14px/1.25 var(--f-display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-row b mark{background:none;color:#fff;text-decoration:underline;text-decoration-color:rgba(201,212,255,.6);text-underline-offset:3px}
.sp-row span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.sp-row .go{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--dim);opacity:0}
.sp-row .go svg{width:14px;height:14px;margin-left:2px}
.sp-row[aria-selected="true"],.sp-row:hover{background:rgba(255,255,255,.07)}
.sp-row[aria-selected="true"] .go,.sp-row:hover .go{opacity:1;color:#0a0a0c;background:#fff}
.sp-all{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;margin-top:4px;border-radius:10px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line)}
.sp-all:hover,.sp-all[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.05)}
.sp-empty{padding:18px 12px;text-align:center;color:var(--muted);font-size:14px}
.search{position:relative;display:flex;align-items:center;gap:10px;height:42px;padding:0 10px 0 13px;border-radius:var(--r-ctl);
  background:rgba(27,27,33,.8);border:1px solid var(--line);transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease}
.search:focus-within{border-color:rgba(255,255,255,.5);box-shadow:0 0 0 3px rgba(201,212,255,.1);background:rgba(20,20,25,.95)}
.search .ic{width:17px;height:17px;color:var(--muted);flex:none}
.search input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;font-size:14.5px}
.search input::placeholder{color:var(--dim)}
.search input::-webkit-search-cancel-button{display:none}
.search kbd{flex:none}
.search:focus-within kbd{opacity:0}
.bar-actions{display:flex;gap:6px;justify-self:end}
.icon-btn{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:999px;color:var(--muted);flex:none;
  transition:background-color .15s ease,color .15s ease,transform .12s var(--ease-out)}
.icon-btn svg{width:20px;height:20px}
.icon-btn:active{transform:scale(.94)}
@media (hover:hover){.icon-btn:hover{background:rgba(255,255,255,.08);color:#fff}}
.icon-btn[aria-pressed="true"]{color:#fff}
[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-3px);white-space:nowrap;pointer-events:none;
  padding:6px 9px;border-radius:8px;background:var(--regolith);border:1px solid var(--line2);font:500 12px/1 var(--f-body);color:var(--text);
  opacity:0;transition:opacity .12s ease,transform .12s var(--ease-out);box-shadow:0 8px 20px rgba(0,0,0,.5);z-index:5}
@media (hover:hover){[data-tip]:hover::after{opacity:1;transform:translate(-50%,0);transition-delay:.45s}}
[data-tip].tip-up::after{top:auto;bottom:calc(100% + 8px)}

/* ================= buttons ================= */
.btn-3d{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px 0 22px;border-radius:var(--r-ctl);
  font:700 15.5px/1 var(--f-body);color:#0a0a0c;white-space:nowrap;
  background:linear-gradient(180deg,#fff 0%,#ececf0 55%,#d8d8de 100%);
  box-shadow:0 5px 0 var(--shade),0 14px 30px rgba(255,255,255,.13),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .08s ease-out,box-shadow .08s ease-out,filter .15s ease}
.btn-3d svg{width:17px;height:17px}
@media (hover:hover){.btn-3d:hover{filter:brightness(1.04)}}
.btn-3d:active{transform:translateY(4px);box-shadow:0 1px 0 var(--shade),0 4px 12px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.9)}
.btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 22px;border-radius:var(--r-ctl);
  font:600 15px/1 var(--f-body);color:var(--text);white-space:nowrap;
  background:linear-gradient(180deg,#2c2c33,#1d1d22);box-shadow:0 5px 0 #050507,0 12px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);
  transition:transform .08s ease-out,box-shadow .08s ease-out,color .15s ease}
.btn-dark svg{width:18px;height:18px;color:var(--muted)}
.btn-dark:active{transform:translateY(4px);box-shadow:0 1px 0 #050507,0 4px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px;border-radius:9px;font:700 13.5px/1 var(--f-body);color:#0a0a0c;white-space:nowrap;
  background:linear-gradient(180deg,#fff,#ececf0 55%,#d8d8de);box-shadow:0 3px 0 var(--shade),inset 0 1px 0 rgba(255,255,255,.95);transition:transform .06s ease-out,box-shadow .06s ease-out}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--shade)}
.btn svg{width:16px;height:16px}
.btn.sec{background:linear-gradient(180deg,#2c2c33,#1d1d22);box-shadow:0 3px 0 #050507,inset 0 1px 0 rgba(255,255,255,.1);color:var(--text)}
.btn.sec:active{box-shadow:0 0 0 #050507}
.btn.danger{background:linear-gradient(180deg,#3a1d22,#2a1418);color:#ff8a95;box-shadow:0 3px 0 #150809,inset 0 1px 0 rgba(255,255,255,.06)}
.btn.danger:active{box-shadow:0 0 0 #150809}

/* ================= hero ================= */
main{position:relative;z-index:1}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:24px;
  max-width:var(--max);margin:0 auto;padding:12px var(--gutter) 56px;min-height:min(700px,calc(100dvh - 68px))}
.hero-copy{position:relative;z-index:2;max-width:680px}
.hero h1{font:650 clamp(32px,3.9vw,56px)/1.06 var(--f-display);letter-spacing:-.028em;padding-bottom:2px}
.hero h1 .l2{display:block;color:var(--muted)}
.hero-sub{margin-top:22px;font-size:clamp(15.5px,1.3vw,18px);line-height:1.55;color:var(--muted);max-width:42ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.pick-note{margin-top:18px;font-size:13px;color:var(--dim)}
.pick-note b{color:var(--muted);font-weight:500}

/* the orrery: a photoreal moon with small moons on tilted orbits */
.orrery{position:relative;height:clamp(380px,44vw,620px);z-index:1}
.orrery canvas{position:absolute;left:-14%;right:-22%;top:-14%;bottom:-14%;width:136%;height:128%;opacity:0;transition:opacity 1.6s ease;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 70%,transparent 100%)}
.orrery canvas.ready{opacity:1}
.orrery-glow{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(210,218,255,.12) 0%,rgba(210,218,255,.04) 45%,transparent 68%)}
.orrery-fallback{position:absolute;inset:0;display:none;place-items:center}
.no-webgl .orrery-fallback{display:grid}
.no-webgl .orrery canvas{display:none}
.css-moon{width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 36% 32%,#fff 0%,#dcdde4 36%,#8c8e98 74%,#3d3e45 100%);
  box-shadow:inset -22px -16px 40px rgba(0,0,0,.6),0 0 60px rgba(255,255,255,.12)}
.css-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(255,255,255,.1);transform:translate(-50%,-50%) rotateX(72deg) rotateZ(0deg);animation:ring 40s linear infinite}
@keyframes ring{to{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(360deg)}}
.css-ring i{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,255,255,.6)}

/* entrance: one orchestrated moment on first paint */
@media (prefers-reduced-motion:no-preference){
  .intro .hero h1,.intro .hero-sub,.intro .hero-cta,.intro .pick-note{opacity:0;transform:translateY(12px);animation:rise .8s var(--ease-out) forwards}
  .intro .hero-sub{animation-delay:.08s}
  .intro .hero-cta{animation-delay:.16s}
  .intro .pick-note{animation-delay:.24s}
}
@keyframes rise{to{opacity:1;transform:none}}

/* ================= sections ================= */
.section{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:18px}
.sec-head h2{font:600 20px/1.2 var(--f-display);letter-spacing:-.015em}
.sec-note{font-size:13.5px;color:var(--dim)}
.lib-title-wrap{min-width:0;max-width:560px}
.lib-note{margin-top:6px;font-size:13.5px;color:var(--dim);line-height:1.45}
.recent,.picks,.series{margin-bottom:52px}
.recent-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,270px);gap:14px;overflow-x:auto;padding:4px 4px 12px;margin:-4px -4px 0;scroll-snap-type:x proximity;scrollbar-width:thin}
.mini{position:relative;display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px;padding:8px;border-radius:var(--r-card);text-align:left;scroll-snap-align:start;
  background:var(--glass);border:1px solid var(--line2);transition:border-color .2s ease,transform .2s var(--ease-out)}
.mini .art{width:96px;border-radius:9px}
.mini b{display:block;font:600 13.5px/1.2 var(--f-display);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini span{display:block;margin-top:5px;font-size:12.5px;color:var(--muted)}
@media (hover:hover){.mini:hover{border-color:var(--line3);transform:translateY(-2px)}}
.mini:active{transform:scale(.98)}

/* segmented filter */
.seg{display:inline-flex;gap:3px;padding:4px;border-radius:13px;background:rgba(12,12,16,.85);border:1px solid var(--line);overflow-x:auto;max-width:100%;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:9px;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
.seg button .n{font:500 11.5px/1 var(--f-mono);color:var(--dim)}
@media (hover:hover){.seg button:hover:not([aria-selected="true"]){color:var(--text);background:rgba(255,255,255,.04)}}
.seg button[aria-selected="true"]{color:#fff;background:linear-gradient(180deg,#3a3a42,#26262c);box-shadow:0 1px 0 #050507,inset 0 1px 0 rgba(255,255,255,.12)}
.seg button[aria-selected="true"] .n{color:var(--muted)}

/* ================= cover art (every game gets its own moonlit poster, drawn in CSS) ================= */
.art{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:4/3;container-type:inline-size;
  --h:230;--s:12%;--ox:70%;--oy:34%;--os:52%;--ra:-16deg;--gx:18%;--gy:6%;
  background:
    radial-gradient(110% 80% at var(--gx) var(--gy),hsl(var(--h) var(--s) 17% / .95),transparent 62%),
    linear-gradient(165deg,hsl(var(--h) calc(var(--s) * .7) 10%),#07070a 78%)}
.art .stars{position:absolute;inset:0;opacity:.75;background-image:
  radial-gradient(1.2px 1.2px at 8% 18%,#fff,transparent 70%),radial-gradient(1px 1px at 23% 64%,rgba(255,255,255,.7),transparent 70%),
  radial-gradient(1px 1px at 41% 12%,rgba(255,255,255,.8),transparent 70%),radial-gradient(1.4px 1.4px at 57% 78%,rgba(255,255,255,.6),transparent 70%),
  radial-gradient(1px 1px at 74% 9%,rgba(255,255,255,.7),transparent 70%),radial-gradient(1.2px 1.2px at 88% 58%,#fff,transparent 70%),
  radial-gradient(1px 1px at 93% 26%,rgba(255,255,255,.6),transparent 70%),radial-gradient(1px 1px at 33% 38%,rgba(255,255,255,.5),transparent 70%);
  background-position:var(--sx,0) var(--sy,0)}
.art .orb{position:absolute;left:var(--ox);top:var(--oy);width:var(--os);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  transition:transform .6s var(--ease-out);
  background:radial-gradient(circle at 34% 30%,#fff 0%,#e3e5ec 22%,#a3a5af 56%,#44454d 86%,#1f1f25 100%);
  box-shadow:inset -14px -10px 26px rgba(0,0,0,.55),0 0 46px rgba(210,218,255,.16)}
.art .orb::before{content:"";position:absolute;inset:0;border-radius:50%;transform:rotate(var(--rot,0deg));opacity:.9;background:
  radial-gradient(circle at 62% 58%,rgba(40,40,48,.34) 0 7%,transparent 8%),radial-gradient(circle at 38% 68%,rgba(40,40,48,.26) 0 5%,transparent 6%),
  radial-gradient(circle at 56% 28%,rgba(40,40,48,.22) 0 4%,transparent 5%),radial-gradient(circle at 74% 40%,rgba(40,40,48,.2) 0 3%,transparent 4%),
  radial-gradient(circle at 44% 46%,rgba(40,40,48,.12) 0 11%,transparent 12%)}
.art.eclipse .orb{background:radial-gradient(circle at 50% 50%,#0c0d12 0 64%,#171922 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 14px 2px rgba(240,244,255,.5),0 0 44px 10px rgba(205,214,255,.22)}
.art.eclipse .orb::before{display:none}
.art.crescent .orb::after{content:"";position:absolute;inset:-2%;border-radius:50%;background:hsl(var(--h) calc(var(--s) * .7) 9%);transform:translate(28%,-16%)}
.art .moonlet{position:absolute;left:calc(var(--ox) - var(--os) * .66);top:calc(var(--oy) + var(--os) * .3);width:calc(var(--os) * .2);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle at 34% 30%,#fff,#b9bbc4 48%,#3a3b42 100%);box-shadow:inset -3px -2px 5px rgba(0,0,0,.5)}
.art .comet{position:absolute;left:var(--cx);top:var(--cy);width:42%;height:2px;border-radius:2px;transform:rotate(var(--ca));transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,#fff,rgba(201,212,255,.55) 28%,rgba(201,212,255,0))}
.art .comet::before{content:"";position:absolute;left:-3px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;
  box-shadow:0 0 8px 2px rgba(255,255,255,.8),0 0 20px 6px rgba(201,212,255,.35)}
.art .ring{position:absolute;left:var(--ox);top:var(--oy);width:calc(var(--os) * 1.9);aspect-ratio:3.4;border-radius:50%;
  border:1px solid rgba(255,255,255,.17);transform:translate(-50%,-50%) rotate(var(--ra));pointer-events:none}
.art .ring.two{width:calc(var(--os) * 2.6);border-color:rgba(255,255,255,.08);border-style:dashed}
.art::after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(0deg,rgba(7,7,10,.92) 8%,rgba(7,7,10,0));pointer-events:none}
.art-tag{position:absolute;left:max(12px,6cqi);top:max(11px,5.5cqi);z-index:2;font:500 clamp(10px,4.4cqi,13px)/1 var(--f-mono);color:rgba(244,244,247,.62);letter-spacing:.02em}
.art-title{position:absolute;left:7cqi;right:7cqi;bottom:6.5cqi;z-index:2;font:700 var(--fs,10cqi)/1.04 var(--f-display);letter-spacing:-.03em;color:#f4f4f7;
  text-wrap:balance;text-shadow:0 2px 16px rgba(0,0,0,.55);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:.06em}
.art.t-s{--fs:14cqi}.art.t-m{--fs:10.5cqi}.art.t-l{--fs:8.2cqi}
.art.bare .art-title,.art.bare .art-tag{display:none}
.art.bare::after{display:none}

/* ================= cards ================= */
.card{position:relative;isolation:isolate;border-radius:var(--r-card);overflow:hidden;background:#0b0b0f;border:1px solid var(--line2);
  box-shadow:0 14px 34px rgba(0,0,0,.42);transition:transform .25s var(--ease-out),border-color .2s ease,box-shadow .25s ease}
.card .art{border-radius:inherit}
.card-hit{position:absolute;inset:0;z-index:3;border-radius:inherit}
.card-hit:focus-visible{outline-offset:-3px;border-radius:var(--r-card)}
.play-disc{position:absolute;right:12px;bottom:12px;z-index:4;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#0a0a0c;pointer-events:none;
  background:linear-gradient(180deg,#fff,#dcdce2);box-shadow:0 3px 0 var(--shade),0 10px 24px rgba(0,0,0,.5);opacity:0;transform:translateY(4px) scale(.94);
  transition:opacity .2s ease,transform .25s var(--ease-out)}
.play-disc svg{width:16px;height:16px;margin-left:2px}
.fav{position:absolute;top:9px;right:9px;z-index:4;width:32px;height:32px;display:grid;place-items:center;border-radius:999px;color:var(--text);
  background:rgba(10,10,13,.6);border:1px solid var(--line2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:scale(.92);transition:opacity .18s ease,transform .2s var(--ease-out),background-color .15s ease}
.fav svg{width:16px;height:16px}
.fav:active{transform:scale(.88)}
.fav[aria-pressed="true"]{opacity:1;transform:none;color:#fff}
.fav:focus-visible{opacity:1;transform:none}
@media (hover:hover){
  .card:hover{transform:translateY(-3px);border-color:var(--line3);box-shadow:0 22px 44px rgba(0,0,0,.5)}
  .card:hover .orb{transform:translate(-50%,-50%) translate(-3%,2%) scale(1.05)}
  .card:hover .play-disc{opacity:1;transform:none}
  .card:hover .fav{opacity:1;transform:none}
  .fav:hover{background:rgba(30,30,36,.9)}
}
@media (hover:none){.fav{opacity:1;transform:none}}
.card:has(.card-hit:active){transform:translateY(-1px) scale(.985)}

/* popular: a bento with two hero tiles */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(150px,13vw,190px);gap:16px}
.bento .card .art{aspect-ratio:auto;height:100%}
.bento .card:nth-child(1){grid-column:span 2;grid-row:span 2}
.bento .card:nth-child(6){grid-column:span 2}
.bento .card:nth-child(1) .art{--fs:9cqi}
@media (min-width:721px){.bento .card:nth-child(6) .art{--fs:6.5cqi}}

/* series pills */
.series-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px 0 8px;border-radius:999px;background:rgba(20,20,25,.8);border:1px solid var(--line2);
  font-size:14px;color:var(--text);transition:border-color .15s ease,background-color .15s ease,transform .12s var(--ease-out)}
.chip-btn .dotart{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none}
.chip-btn .dotart .art{width:26px;aspect-ratio:1}
.chip-btn .dotart .art .ring,.chip-btn .dotart .art .stars{display:none}
.chip-btn .n{font:500 11.5px/1 var(--f-mono);color:var(--dim)}
@media (hover:hover){.chip-btn:hover{border-color:var(--line3);background:rgba(30,30,36,.9)}}
.chip-btn:active{transform:scale(.97)}

/* genre shelves */
.shelf{margin-bottom:48px}
.shelf-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.shelf-head h2{font:600 20px/1.2 var(--f-display);letter-spacing:-.015em}
.shelf-head .count{font:500 12px/1 var(--f-mono);color:var(--dim);margin-top:3px}
.shelf-tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.see-all{height:36px;padding:0 12px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--muted);transition:color .15s ease,background-color .15s ease}
@media (hover:hover){.see-all:hover{color:#fff;background:rgba(255,255,255,.06)}}
.arrow{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line2);background:rgba(15,15,19,.7);
  transition:color .15s ease,border-color .15s ease,opacity .2s ease}
.arrow svg{width:16px;height:16px}
.arrow.next svg{transform:scaleX(-1)}
.arrow:disabled{opacity:.3;cursor:default}
@media (hover:hover){.arrow:not(:disabled):hover{color:#fff;border-color:var(--line3)}}
.shelf-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(190px,19vw,236px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:4px;margin:-4px;scroll-padding:4px}
.shelf-row::-webkit-scrollbar{display:none}
.shelf-row>.card{scroll-snap-align:start}

/* library */
.library{padding-bottom:72px;scroll-margin-top:84px}
.lib-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:100%}
.sort select{height:42px;padding:0 34px 0 14px;border-radius:12px;background:rgba(12,12,16,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a8a8b3' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center/14px;
  border:1px solid var(--line);color:var(--text);font:500 14px var(--f-body);appearance:none;cursor:pointer}
.sort select:focus-visible{outline:2px solid var(--earthshine);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.more{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:30px}
.more span{font:500 12.5px/1 var(--f-mono);color:var(--dim)}

.empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:56px 20px;text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:var(--r-card)}
.empty b{font:600 17px/1.3 var(--f-display);color:var(--text)}

@media (prefers-reduced-motion:no-preference){
  .intro .bento>*{opacity:0;animation:rise .6s var(--ease-out) forwards;animation-delay:calc(.3s + var(--i,0) * 50ms);transform:translateY(10px)}
}

/* ================= footer ================= */
.foot{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:28px var(--gutter) 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;
  border-top:1px solid var(--line);color:var(--dim);font-size:13.5px}
.foot-brand{display:flex;align-items:center;gap:10px;color:var(--muted)}
.foot-brand svg{width:20px;height:20px}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.foot-links button{color:var(--muted);font-size:13.5px;border-radius:6px;transition:color .15s ease}
@media (hover:hover){.foot-links button:hover{color:#fff}}
.foot-links .panic-hint{display:inline-flex;align-items:center;gap:8px}

/* ================= game page ================= */
.gv{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:6px var(--gutter) 56px;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;align-items:start}
.gv-main{min-width:0}
.gv-crumbs{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:14px}
.crumb{display:inline-flex;align-items:center;gap:7px;color:var(--muted);border-radius:8px;padding:4px 6px;margin:-4px -6px;transition:color .15s ease}
.crumb svg{width:16px;height:16px}
@media (hover:hover){.crumb:hover{color:#fff}}
.crumb-sep{color:var(--dim)}
.gv-stage{display:grid;place-items:center;min-height:240px}
.gv-shell{padding:8px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02));border:1px solid var(--line2);
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07)}
.gv-frame{position:relative;border-radius:16px;overflow:hidden;background:#000}
.gv-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.gv-frame:fullscreen{border-radius:0;width:100%!important;height:100%!important}
.p-loader{position:absolute;inset:0;display:grid;place-items:center;background:var(--void);transition:opacity .3s ease;pointer-events:none}
.p-loader.done{opacity:0}
.gv-info{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.gv-art{width:92px;border-radius:12px;overflow:hidden;flex:none;border:1px solid var(--line2)}
.gv-titles{min-width:0;flex:1 1 220px}
.gv-titles h1{font:650 clamp(21px,2vw,27px)/1.15 var(--f-display);letter-spacing:-.02em}
.gv-meta{display:flex;align-items:center;gap:9px;margin-top:6px;font-size:14px;color:var(--muted)}
.gv-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--dim)}
.gv-actions{display:flex;align-items:center;gap:8px}
.icon-btn.lg{width:46px;height:46px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.icon-btn.lg svg{width:20px;height:20px}
.btn-3d.sm{height:46px;padding:0 20px 0 16px;font-size:14.5px}
.gv-hint{margin-top:14px;font-size:13px;color:var(--dim)}
.gv-side{position:sticky;top:84px;max-height:calc(100dvh - 100px);display:flex;flex-direction:column;padding:14px 10px 10px 14px;
  background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line2);border-radius:var(--r-panel)}
.gv-side-head{display:flex;align-items:center;justify-content:space-between;margin:0 4px 10px 0}
.gv-side-head h2{font:600 16px/1.2 var(--f-display);letter-spacing:-.01em}
.gv-list{display:flex;flex-direction:column;gap:4px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.rec{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:12px;padding:6px;border-radius:12px;text-align:left;transition:background-color .15s ease}
.rec .art{width:104px;border-radius:9px}
.rec b{display:block;font:600 13.5px/1.25 var(--f-display);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rec span{display:block;margin-top:4px;font-size:12.5px;color:var(--muted)}
@media (hover:hover){.rec:hover{background:rgba(255,255,255,.05)}}
.rec:active{transform:scale(.985)}

/* ================= Comet Proxy ================= */
.nav-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px 0 12px;border-radius:999px;border:1px solid var(--line2);background:rgba(20,20,25,.6);
  color:var(--text);font-size:14px;font-weight:500;transition:border-color .15s ease,background-color .15s ease,transform .12s var(--ease-out),box-shadow .12s ease}
.nav-pill span{white-space:nowrap}
.nav-pill svg{width:18px;height:18px;color:var(--muted)}
@media (hover:hover){.nav-pill:hover{border-color:var(--line3);background:rgba(30,30,36,.85)}}
.nav-pill:active{transform:scale(.97)}
/* the proxy button is the one bright control in the header */
.nav-pill.primary{color:#0a0a0c;font-weight:700;border-color:transparent;background:linear-gradient(180deg,#fff 0%,#ececf0 55%,#d8d8de 100%);
  box-shadow:0 3px 0 var(--shade),0 10px 24px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.95)}
.nav-pill.primary svg{color:#0a0a0c}
@media (hover:hover){.nav-pill.primary:hover{background:linear-gradient(180deg,#fff 0%,#f2f2f5 55%,#dedee4 100%);filter:brightness(1.03)}}
.nav-pill.primary:active,.nav-pill.primary[aria-current="page"]{transform:translateY(3px);box-shadow:0 0 0 var(--shade),0 4px 12px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.9)}
.nav-pill.primary[aria-current="page"]{background:linear-gradient(180deg,#e6e6ea,#cfcfd6)}

/* a moon with a comet swinging round it: the proxy's mark, its hero and its loading animation */
.orbiter{position:relative;width:var(--sz,84px);height:var(--sz,84px);flex:none;transform:rotate(-14deg);pointer-events:none}
.orbiter.loader{--sz:150px;--orbit:1.6s}
.orbiter-moon{position:absolute;left:50%;top:50%;width:64%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) rotate(14deg);z-index:2;
  background:radial-gradient(circle at 34% 30%,#fff 0%,#e3e5ec 22%,#a3a5af 56%,#44454d 86%,#1f1f25 100%);
  box-shadow:inset calc(var(--sz,84px) * -.08) calc(var(--sz,84px) * -.05) calc(var(--sz,84px) * .14) rgba(0,0,0,.55),0 0 calc(var(--sz,84px) * .32) rgba(210,218,255,.2)}
.orbiter-moon::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:.9;background:
  radial-gradient(circle at 62% 58%,rgba(40,40,48,.34) 0 7%,transparent 8%),radial-gradient(circle at 38% 68%,rgba(40,40,48,.26) 0 5%,transparent 6%),
  radial-gradient(circle at 56% 28%,rgba(40,40,48,.22) 0 4%,transparent 5%),radial-gradient(circle at 74% 40%,rgba(40,40,48,.2) 0 3%,transparent 4%)}
.has-moon .orbiter-moon{background:var(--moon-img) center/100% 100% no-repeat;box-shadow:0 0 calc(var(--sz,84px) * .34) rgba(210,218,255,.2)}
.has-moon .orbiter-moon::before{display:none}
.orbiter-ring{position:absolute;left:50%;top:50%;width:150%;height:56%;border-radius:50%;border:1px solid rgba(255,255,255,.13);transform:translate(-50%,-50%);z-index:1}
.orbiter-comet{position:absolute;left:0;top:0;width:44%;height:3px;border-radius:3px;z-index:3;
  background:linear-gradient(90deg,rgba(201,212,255,0),rgba(201,212,255,.55) 60%,#fff);
  offset-path:ellipse(75% 28% at 50% 50%);offset-rotate:auto;offset-anchor:100% 50%;
  animation:comet-orbit var(--orbit,2.4s) linear infinite}
.orbiter-comet::after{content:"";position:absolute;right:-4px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px 3px rgba(255,255,255,.85),0 0 26px 9px rgba(201,212,255,.35)}
.orbiter.big .orbiter-comet{height:4px}
.orbiter.big .orbiter-comet::after{width:12px;height:12px;margin-top:-6px;right:-6px}
@keyframes comet-orbit{0%{offset-distance:0%;z-index:3}49.9%{z-index:3}50%{z-index:1}100%{offset-distance:100%;z-index:1}}
@supports not (offset-path:ellipse(1% 1%)){
  .orbiter-comet{display:none}
  .orbiter-ring{border-color:transparent;background:conic-gradient(from 0deg,transparent 0deg 250deg,rgba(201,212,255,.5) 330deg,#fff 359deg,transparent 360deg);
    -webkit-mask:radial-gradient(closest-side,transparent 96%,#000 97%);mask:radial-gradient(closest-side,transparent 96%,#000 97%);animation:spin var(--orbit,2.4s) linear infinite}
}

/* the proxy: a plain start page until a site is open, then a window with tabs and a toolbar */
.px{position:relative;z-index:1}
.px-window{display:flex;flex-direction:column;height:calc(100dvh - 84px);margin:0 clamp(10px,1.6vw,20px) 14px;border-radius:18px;overflow:hidden;
  background:rgba(12,12,16,.9);border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.px-window.landing{height:auto;min-height:calc(100dvh - 68px);margin:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.px-window.landing .px-tabbar,.px-window.landing .px-bar{display:none}
.px-tabbar{display:flex;align-items:flex-end;gap:6px;padding:8px 8px 0;background:rgba(8,8,11,.92)}
.px-brand{width:38px;height:38px;margin-bottom:2px;border-radius:10px;display:grid;place-items:center;flex:none;transition:background-color .15s ease,transform .12s var(--ease-out)}
.px-brand svg{width:22px;height:22px;filter:drop-shadow(0 0 6px rgba(255,255,255,.3))}
@media (hover:hover){.px-brand:hover{background:rgba(255,255,255,.08)}}
.px-brand:active{transform:scale(.94)}
/* with a site open the proxy takes the whole screen, header included, like a browser */
.px-full .bar,.px-full .foot{display:none}
.px-full .px{z-index:46}
.px-full .px-window:not(.landing){position:fixed;inset:0;z-index:45;height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none}
.px-full .px-tabbar{padding-top:6px}
.px-tabs{display:flex;gap:3px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.px-tabs::-webkit-scrollbar{display:none}
.px-tab{position:relative;display:flex;align-items:center;gap:9px;height:38px;padding:0 6px 0 11px;border-radius:11px 11px 0 0;flex:1 1 170px;min-width:110px;max-width:230px;
  color:var(--muted);font-size:13px;cursor:pointer;user-select:none;transition:background-color .15s ease,color .15s ease}
.px-tab:focus-visible{outline-offset:-3px}
@media (hover:hover){.px-tab:hover:not([aria-selected="true"]){background:rgba(255,255,255,.04);color:var(--text)}}
.px-tab[aria-selected="true"]{background:rgba(26,26,32,.98);color:var(--text)}
.px-tab .ico{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 10.5px/1 var(--f-display);color:#0a0a0c;
  background:linear-gradient(180deg,#fff,#cfd1da)}
.px-tab .ico svg{width:12px;height:12px}
.px-tab .ico.busy{background:none;border:2px solid var(--line3);border-top-color:#fff;animation:spin .8s linear infinite}
.px-tab .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-tab .x{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;color:var(--dim);flex:none;opacity:0;transition:opacity .15s ease,background-color .15s ease,color .15s ease}
.px-tab .x svg{width:13px;height:13px}
.px-tab:hover .x,.px-tab[aria-selected="true"] .x,.px-tab .x:focus-visible{opacity:1}
@media (hover:hover){.px-tab .x:hover{background:rgba(255,255,255,.1);color:#fff}}
.px-newtab{width:36px;height:36px;margin-bottom:2px;border-radius:10px;display:grid;place-items:center;color:var(--muted);flex:none;transition:background-color .15s ease,color .15s ease}
.px-newtab svg{width:18px;height:18px}
@media (hover:hover){.px-newtab:hover{background:rgba(255,255,255,.08);color:#fff}}
.px-bar{display:flex;align-items:center;gap:2px;padding:6px;background:rgba(26,26,32,.98);border-bottom:1px solid var(--line)}
.px-address{flex:1;min-width:0;display:flex;align-items:center;gap:9px;height:38px;margin:0 6px;padding:0 12px;border-radius:11px;background:#0c0c10;border:1px solid var(--line)}
.px-address:focus-within{border-color:rgba(255,255,255,.5)}
.px-address svg{width:16px;height:16px;color:var(--dim);flex:none}
.px-address input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;font-size:14px;color:var(--text)}
.px-address input::placeholder{color:var(--dim)}
.px-stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#07070a}
.px-window.landing .px-stage{overflow:visible;background:none;display:flex}
.px-stage:fullscreen{border-radius:0}
.px-frames iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#07070a}
.px-frames iframe[hidden]{display:none}
.px-loader{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:rgba(7,7,10,.94)}
.px-loading-text{font:500 13px/1.3 var(--f-mono);color:var(--muted);max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* start page: full landing when nothing is open, a compact new-tab panel inside the window otherwise */
.px-home{position:absolute;inset:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:16px var(--gutter) 28px;background:radial-gradient(ellipse 70% 50% at 50% 0%,#151620 0%,#0a0a0e 60%,var(--void) 100%)}
.px-window.landing .px-home{position:relative;inset:auto;flex:1;overflow:visible;background:none;padding:12px var(--gutter) 72px}
.px-hero{position:relative;display:grid;place-items:center}
.px-window.landing .px-hero::before{content:"";position:absolute;left:50%;top:50%;width:160%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(205,214,255,.13) 0%,rgba(205,214,255,.04) 40%,transparent 66%)}
.orbiter.big{--sz:clamp(200px,min(30vw,32vh),340px);--orbit:6s;margin:calc(var(--sz) * .06) 0 calc(var(--sz) * .02)}
.px-window:not(.landing) .orbiter.big{--sz:clamp(96px,14vh,130px);--orbit:4s;margin:0 0 4px}
.px-home h1{margin-top:4px;font:650 clamp(34px,4.4vw,54px)/1.06 var(--f-display);letter-spacing:-.03em}
.px-window:not(.landing) .px-home h1{font-size:clamp(22px,2.4vw,28px)}
.px-search{display:flex;align-items:center;gap:12px;width:min(720px,100%);margin-top:26px;height:66px;padding:0 9px 0 22px;border-radius:999px;
  background:rgba(20,20,25,.92);border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.45);transition:border-color .15s ease,box-shadow .15s ease}
.px-search:focus-within{border-color:rgba(255,255,255,.55);box-shadow:0 0 0 4px rgba(201,212,255,.1),0 20px 50px rgba(0,0,0,.45)}
.px-search>svg{width:20px;height:20px;color:var(--muted);flex:none}
.px-search input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;font-size:17px;color:var(--text)}
.px-search input::placeholder{color:var(--dim)}
.px-search .go{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;color:#0a0a0c;
  background:linear-gradient(180deg,#fff,#dcdce2);box-shadow:0 2px 0 var(--shade),inset 0 1px 0 rgba(255,255,255,.95);transition:transform .08s ease-out,box-shadow .08s ease-out,filter .15s ease}
.px-search .go svg{width:19px;height:19px}
@media (hover:hover){.px-search .go:hover{filter:brightness(1.04)}}
.px-search .go:active{transform:translateY(2px);box-shadow:0 0 0 var(--shade)}
.px-window:not(.landing) .px-search{height:54px;margin-top:18px;width:min(600px,100%);padding-left:18px;padding-right:7px}
.px-window:not(.landing) .px-search input{font-size:15px}
.px-window:not(.landing) .px-search .go{width:40px;height:40px}
.px-window:not(.landing) .px-search .go svg{width:16px;height:16px}
.px-engines{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:var(--dim);flex-wrap:wrap;justify-content:center}
.px-engines .seg{padding:3px;border-radius:11px}
.px-engines .seg button{height:30px;padding:0 12px;font-size:13px;border-radius:8px}
.px-dial{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(560px,100%);margin-top:26px}
.px-window:not(.landing) .px-dial{margin-top:18px;width:min(480px,100%)}
.dial{display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 8px 12px;border-radius:14px;background:rgba(20,20,25,.7);border:1px solid var(--line);
  font-size:13px;color:var(--muted);transition:border-color .15s ease,background-color .15s ease,color .15s ease,transform .15s var(--ease-out)}
.dial i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:700 13px/1 var(--f-display);font-style:normal;letter-spacing:-.02em;color:#0a0a0c;
  background:linear-gradient(180deg,#fff,#cfd1da);box-shadow:0 2px 0 var(--shade)}
.dial i svg{width:21px;height:21px;color:#0a0a0c}
.orbiter-canvas{position:absolute;inset:-4.5%;width:109%;height:109%;display:block;opacity:0;transition:opacity .8s ease}
.orbiter-moon.live{background:none!important;box-shadow:0 0 calc(var(--sz,84px) * .34) rgba(210,218,255,.2)}
.orbiter-moon.live::before{display:none}
.orbiter-moon.live .orbiter-canvas{opacity:1}
.px-window:not(.landing) .dial{padding:10px 6px 9px;gap:7px;font-size:12.5px}
.px-window:not(.landing) .dial i{width:34px;height:34px;font-size:12px}
@media (hover:hover){.dial:hover{border-color:var(--line3);background:rgba(30,30,36,.9);color:var(--text);transform:translateY(-2px)}}
.dial:active{transform:scale(.97)}
.px-status{margin-top:22px;padding:10px 14px;border-radius:12px;font-size:13.5px;line-height:1.5;color:#ffd0d6;background:rgba(255,77,94,.1);border:1px solid rgba(255,77,94,.35);max-width:56ch}
@media (max-width:720px){
  .nav-pill span{display:none}
  .nav-pill{width:40px;padding:0;justify-content:center}
  .px-window{height:calc(100dvh - 128px);margin:0 8px 10px}
  .px-window.landing{min-height:calc(100dvh - 112px)}
  .px-bar #px-forward,.px-bar #px-home-btn{display:none}
  .px-tab{min-width:96px;flex-basis:130px}
  .px-search{height:58px;padding-left:16px;padding-right:7px}
  .px-search .go{width:44px;height:44px}
  .px-dial{gap:8px}
  .dial{padding:11px 4px 10px;font-size:12px}
  .dial i{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){.orbiter-comet{animation-duration:12s}}

/* a comet sweeps across the screen when a site is opened from the start page */
.warp{position:fixed;inset:0;z-index:95;overflow:hidden;pointer-events:none;transition:opacity .3s ease}
.warp.out{opacity:0}
.warp-sweep{position:absolute;top:-60vh;bottom:-60vh;left:-30vw;width:200vw;transform:translateX(-110%) skewX(-16deg);
  background:linear-gradient(90deg,#07070a 0%,#07070a calc(100% - 26px),rgba(201,212,255,.35) calc(100% - 12px),rgba(232,236,255,.85) calc(100% - 3px),#fff)}
.warp-sweep::after{content:"";position:absolute;right:-9px;top:44%;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 0 18px 6px rgba(255,255,255,.95),0 0 70px 26px rgba(201,212,255,.5)}
.warp.run .warp-sweep{animation:warp-in .64s cubic-bezier(.7,0,.2,1) forwards}
@keyframes warp-in{to{transform:translateX(-8%) skewX(-16deg)}}

/* ================= Comet AI: a full page, sidebar left, chat filling the rest ================= */
.ai{position:relative;z-index:1}
.ai-page{display:grid;grid-template-columns:284px minmax(0,1fr);height:calc(100dvh - 68px);min-width:0}
.ai-side{position:relative;display:flex;flex-direction:column;gap:10px;min-height:0;min-width:0;padding:10px 12px 14px 14px;
  border-right:1px solid var(--line);background:rgba(9,9,12,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ai-side-top{display:flex;align-items:center;gap:8px;min-width:0}
.ai-new{flex:1;height:44px;min-width:0}
.ai-toggle{display:none}
.ai-chats{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding-right:2px;scrollbar-width:thin}
.ai-sec{padding:14px 10px 4px;font:500 11px/1 var(--f-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em;border-radius:8px}
.ai-sec.over{background:rgba(201,212,255,.1)}
.ai-folder,.ai-chat{position:relative;display:flex;align-items:center;gap:9px;width:100%;padding:8px 32px 8px 10px;border-radius:10px;text-align:left;color:var(--muted);font-size:13.5px;cursor:pointer;
  user-select:none;transition:background-color .15s ease,color .15s ease}
.ai-folder>svg,.ai-chat>svg{width:15px;height:15px;flex:none;color:var(--dim);transition:transform .15s ease}
.ai-folder{color:var(--text);font-weight:600}
.ai-folder>svg{transform:rotate(90deg)}
.ai-folder.closed>svg{transform:none}
.ai-folder .fdot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 10px currentColor}
.ai-folder .n{font:500 11px/1 var(--f-mono);color:var(--dim);font-weight:500}
.ai-folder.over,.ai-chat.over{background:rgba(201,212,255,.12)}
.ai-chat.in{padding-left:30px}
.ai-chat .t,.ai-folder .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-chat[aria-current="true"]{background:rgba(255,255,255,.08);color:var(--text)}
.ai-chat.dragging{opacity:.5}
@media (hover:hover){.ai-chat:hover,.ai-folder:hover{background:rgba(255,255,255,.05);color:var(--text)}}
.ai-chat .more,.ai-folder .more{position:absolute;margin:0;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--dim);opacity:0;transition:opacity .15s ease,color .15s ease,background-color .15s ease}
.ai-chat .more svg,.ai-folder .more svg{width:15px;height:15px}
.ai-chat:hover .more,.ai-folder:hover .more,.ai-chat[aria-current="true"] .more,.more:focus-visible{opacity:1}
@media (hover:hover){.more:hover{color:#fff;background:rgba(255,255,255,.1)}}
.rename{flex:1;min-width:0;height:26px;padding:0 8px;border-radius:7px;background:#0c0c10;border:1px solid rgba(255,255,255,.5);outline:0;color:var(--text);font:inherit}
.ai-empty-side{padding:16px 10px;font-size:13px;color:var(--dim);text-align:center}
.ai-model{display:flex;flex-direction:column;gap:5px;padding-top:10px;border-top:1px solid var(--line)}
.ai-model span{font-size:11.5px;color:var(--dim)}
.ai-model select{height:38px;padding:0 30px 0 10px;border-radius:10px;background:#0c0c10 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23a8a8b3' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center/13px;
  border:1px solid var(--line2);color:var(--text);font:500 13px var(--f-body);appearance:none;cursor:pointer;min-width:0;max-width:100%;text-overflow:ellipsis}
/* popover menus (folder colours, move to, rename, delete) */
.pop-menu{position:fixed;z-index:120;min-width:190px;padding:6px;border-radius:13px;background:rgba(18,18,23,.98);border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.6);animation:pop .14s var(--ease-out)}
.pop-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;text-align:left;font-size:13.5px;color:var(--text)}
.pop-item svg{width:15px;height:15px;color:var(--muted)}
.pop-item .dot{width:9px;height:9px;border-radius:50%;flex:none}
.pop-item.on{background:rgba(255,255,255,.06)}
@media (hover:hover){.pop-item:hover{background:rgba(255,255,255,.08)}.pop-item.danger:hover{background:rgba(255,77,94,.12)}}
.pop-item.danger{color:#ff8a95}
.pop-item.danger svg{color:#ff8a95}
.pop-label{padding:8px 10px 3px;font:500 11px/1 var(--f-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.pop-sep{height:1px;margin:5px 4px;background:var(--line)}
.pop-swatches{display:flex;gap:7px;padding:4px 10px 8px}
.pop-swatches button{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 0 8px color-mix(in srgb,var(--c) 50%,transparent);transition:transform .12s var(--ease-out)}
.pop-swatches button:hover{transform:scale(1.12)}
.pop-swatches button.on{box-shadow:0 0 0 2px #0a0a0c,0 0 0 4px #fff}
/* chat area */
.ai-main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.ai-scroll{flex:1;min-height:0;overflow-y:auto;padding:26px clamp(14px,4vw,56px) 14px;scrollbar-width:thin}
.ai-empty{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;min-height:100%;padding:12px 0 24px}
.ai-mark{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.14),rgba(255,255,255,.02) 70%);border:1px solid var(--line2);box-shadow:0 0 44px rgba(201,212,255,.16)}
.ai-mark svg{width:36px;height:36px;filter:drop-shadow(0 0 12px rgba(255,255,255,.6))}
.ai-empty h1{margin-top:18px;font:650 clamp(28px,3.2vw,40px)/1.1 var(--f-display);letter-spacing:-.025em}
.ai-empty p{margin-top:10px;color:var(--muted);font-size:15px;max-width:40ch}
.ai-starters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:26px;width:min(600px,100%)}
.ai-starters .scan-starter{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:9px;color:#0a0a0c;font-weight:700;background:linear-gradient(180deg,#fff,#dcdce2);border-color:transparent;box-shadow:0 3px 0 var(--shade)}
.ai-starters .scan-starter svg{width:18px;height:18px}
@media (hover:hover){.ai-starters .scan-starter:hover{color:#0a0a0c;background:linear-gradient(180deg,#fff,#e6e6ea)}}
.ai-starters button{padding:12px 14px;border-radius:13px;text-align:left;font-size:13.5px;color:var(--muted);background:rgba(20,20,25,.7);border:1px solid var(--line);line-height:1.4;transition:border-color .15s ease,color .15s ease,background-color .15s ease}
@media (hover:hover){.ai-starters button:hover{border-color:var(--line3);color:var(--text);background:rgba(30,30,36,.9)}}
.ai-messages{display:flex;flex-direction:column;gap:20px;max-width:860px;margin:0 auto}
.ai-msg{display:flex;flex-direction:column;gap:6px;animation:rise .25s var(--ease-out)}
.ai-msg.user{align-items:flex-end}
.ai-msg.user .bubble{max-width:min(80%,640px);padding:11px 15px;border-radius:16px 16px 4px 16px;background:linear-gradient(180deg,#f4f4f7,#dcdce2);color:#0a0a0c;font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word;box-shadow:0 3px 0 var(--shade),0 10px 24px rgba(0,0,0,.35)}
.ai-msg.user .bubble:empty{display:none}
.ai-imgs{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:min(80%,640px)}
.ai-imgs img{max-width:220px;max-height:180px;border-radius:12px;border:1px solid var(--line2);background:#0c0c10;object-fit:cover}
.ai-msg.assistant{align-items:flex-start}
.ai-msg.assistant .bubble{max-width:100%;padding:2px 2px 2px 0;font-size:15.5px;line-height:1.62;color:var(--text)}
.ai-msg .who{display:flex;align-items:center;gap:7px;font:500 11.5px/1 var(--f-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.ai-msg .who svg{width:13px;height:13px}
.ai-msg.error .bubble{padding:10px 14px;border-radius:12px;background:rgba(255,77,94,.1);border:1px solid rgba(255,77,94,.35);color:#ffd0d6;font-size:14px}
.ai-tools{display:flex;gap:4px;opacity:0;transition:opacity .15s ease}
.ai-msg:hover .ai-tools,.ai-msg:last-child .ai-tools{opacity:1}
.ai-tools button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;border-radius:8px;font-size:12px;color:var(--dim);transition:color .15s ease,background-color .15s ease}
.ai-tools button svg{width:13px;height:13px}
@media (hover:hover){.ai-tools button:hover{color:var(--text);background:rgba(255,255,255,.06)}}
.cursor{display:inline-block;width:8px;height:1em;margin-left:2px;vertical-align:-.15em;border-radius:2px;background:#fff;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
/* rendered markdown */
.md>*+*{margin-top:.7em}
.md h1,.md h2,.md h3,.md h4{font-family:var(--f-display);letter-spacing:-.015em;line-height:1.25;margin-top:1.1em}
.md h1{font-size:1.45em}.md h2{font-size:1.25em}.md h3{font-size:1.1em}.md h4{font-size:1em}
.md>:first-child{margin-top:0}
.md strong{color:#fff;font-weight:700}
.md a{color:var(--earthshine);text-underline-offset:3px}
.md ul,.md ol{padding-left:1.4em}.md li{margin-top:.28em}.md li::marker{color:var(--muted)}
.md code{font:500 .88em/1.5 var(--f-mono);padding:.12em .4em;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid var(--line)}
.md pre{position:relative;padding:12px 14px;border-radius:12px;background:#0a0a0e;border:1px solid var(--line2);overflow-x:auto;font:500 13px/1.55 var(--f-mono);cursor:copy}
.md pre code{padding:0;border:0;background:none;font-size:inherit}
.md pre[data-lang]:not([data-lang=""])::before{content:attr(data-lang);position:absolute;right:10px;top:6px;font:500 10.5px/1 var(--f-mono);color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.md blockquote{padding:2px 14px;border-left:3px solid var(--line3);color:var(--muted)}
.md hr{border:0;border-top:1px solid var(--line2);margin:1em 0}
.md table{border-collapse:collapse;width:100%;font-size:.93em;display:block;overflow-x:auto}
.md th,.md td{padding:7px 10px;border:1px solid var(--line2);text-align:left;vertical-align:top}
.md th{background:rgba(255,255,255,.05);font-weight:600}
.md del{color:var(--dim)}
/* composer */
.ai-composer{display:flex;flex-direction:column;gap:8px;width:min(880px,100%);margin:6px auto 0;padding:8px 8px 8px 8px;border-radius:24px;
  background:rgba(18,18,23,.96);border:1px solid var(--line2);box-shadow:0 -10px 40px rgba(0,0,0,.35);transition:border-color .15s ease,box-shadow .15s ease}
.ai-composer:focus-within,.ai-composer.over{border-color:rgba(255,255,255,.5);box-shadow:0 0 0 4px rgba(201,212,255,.08),0 -10px 40px rgba(0,0,0,.35)}
.ai-attach{display:flex;flex-wrap:wrap;gap:8px;padding:4px 4px 0}
.ai-attach .att{position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:#0c0c10}
.ai-attach img{width:100%;height:100%;object-fit:cover;display:block}
.ai-attach .rm{position:absolute;right:4px;top:4px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(10,10,13,.8);color:#fff;border:1px solid var(--line2)}
.ai-attach .rm svg{width:12px;height:12px}
.ai-row{display:flex;align-items:flex-end;gap:6px}
.ai-clip{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--muted);transition:color .15s ease,background-color .15s ease}
.ai-clip svg{width:20px;height:20px}
@media (hover:hover){.ai-clip:hover{color:#fff;background:rgba(255,255,255,.08)}}
.ai-composer textarea{flex:1;min-width:0;max-height:200px;padding:10px 4px;background:none;border:0;outline:0;resize:none;font:15px/1.45 var(--f-body);color:var(--text)}
.ai-composer textarea::placeholder{color:var(--dim)}
.ai-send{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;color:#0a0a0c;background:linear-gradient(180deg,#fff,#dcdce2);box-shadow:0 2px 0 var(--shade);transition:transform .08s ease-out,box-shadow .08s ease-out,opacity .15s ease}
.ai-send svg{width:18px;height:18px}
.ai-send:active{transform:translateY(2px);box-shadow:0 0 0 var(--shade)}
.ai-send.stop{background:linear-gradient(180deg,#3a1d22,#2a1418);color:#ff8a95;box-shadow:0 2px 0 #150809}
.ai-foot{text-align:center;font-size:11.5px;color:var(--dim);padding:8px 12px 12px}
.ai-clip[aria-pressed="true"]{color:#fff;background:rgba(255,255,255,.12)}
/* screen scan: the sharing dock, and scanned frames with boxes over the questions */
.scan-dock{display:flex;align-items:center;gap:12px;padding:6px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.scan-dock video{width:104px;height:58px;border-radius:10px;object-fit:cover;background:#000;flex:none;border:1px solid var(--line2)}
.scan-info{flex:1;min-width:0}
.scan-info b{display:block;font-size:13.5px;font-weight:600}
.scan-info span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan-btns{display:flex;align-items:center;gap:4px;flex:none}
.scan-go{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px 0 13px;border-radius:999px;font:700 13.5px/1 var(--f-body);color:#0a0a0c;
  background:linear-gradient(180deg,#fff,#dcdce2);box-shadow:0 2px 0 var(--shade);transition:transform .08s ease-out,box-shadow .08s ease-out,opacity .15s ease}
.scan-go svg{width:16px;height:16px}
.scan-go:active{transform:translateY(2px);box-shadow:0 0 0 var(--shade)}
.scan-go.busy{opacity:.75;pointer-events:none}
.scan-go.busy svg{animation:spin 1s linear infinite}
.scan-auto{height:38px;padding:0 13px;border-radius:999px;border:1px solid var(--line2);font-size:13px;font-weight:600;color:var(--muted);transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.scan-auto[aria-pressed="true"]{color:#0a0a0c;background:linear-gradient(180deg,#fff,#dcdce2);border-color:transparent}
.scan-float{display:inline-flex;align-items:center;gap:6px;padding:0 13px 0 11px}
.scan-float svg{width:15px;height:15px}
.ai-msg.scan{align-items:stretch}
.ai-msg.scan .who{justify-content:flex-end}
.scan-frame{position:relative;align-self:flex-end;width:min(100%,760px);border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:#000;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.scan-frame img{display:block;width:100%;height:auto}
/* a white line inside a dark ring: readable on white pages and dark ones */
.scan-box{position:absolute;border:2px solid #fff;border-radius:6px;background:rgba(120,140,255,.1);box-shadow:0 0 0 2px #0a0a0c,0 0 16px rgba(120,140,255,.55);pointer-events:none}
.scan-box.ans{border-color:var(--signal);background:rgba(95,240,176,.14);box-shadow:0 0 0 2px #0a0a0c,0 0 16px rgba(95,240,176,.6)}
.scan-box i{position:absolute;left:-2px;bottom:calc(100% + 4px);min-width:22px;height:20px;padding:0 6px;border-radius:6px;background:#0a0a0c;color:#fff;box-shadow:0 0 0 1.5px #fff;font:700 12px/20px var(--f-mono);font-style:normal;text-align:center;white-space:nowrap}
.scan-box.ans i{background:var(--signal);color:#0a0a0c;box-shadow:0 0 0 1.5px #0a0a0c;left:calc(100% + 7px);bottom:auto;top:50%;transform:translateY(-50%)}
.scan-box.top i{bottom:auto;top:2px;left:2px}
.scan-layer{position:absolute;inset:0;pointer-events:none}
/* what to type (or pick, when the choice is not on screen), right beside the question */
.scan-box .chip{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;max-width:280px;padding:3px 9px 3px 4px;border-radius:7px;background:var(--signal);color:#0a0a0c;font:700 13px/1.4 var(--f-body);white-space:nowrap;box-shadow:0 0 0 1.5px #0a0a0c,0 6px 16px rgba(0,0,0,.35)}
.scan-box .chip b{padding:1px 5px;border-radius:4px;background:#0a0a0c;color:var(--signal);font:700 10px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.scan-box.flip .chip{left:-2px;top:calc(100% + 6px);transform:none}
@media (max-width:720px){.scan-dock{flex-wrap:wrap}.scan-dock video{width:80px;height:45px}.scan-btns{width:100%;justify-content:flex-end}}
@media (max-width:900px){
  .ai-page{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .ai-side{border-right:0;border-bottom:1px solid var(--line);padding:8px 10px;gap:0}
  .ai-toggle{display:grid}
  .ai-new{flex:0 0 auto;height:40px;padding:0 14px}
  .ai-model{margin-left:auto;flex:0 1 170px;border:0;padding:0}
  .ai-model span{display:none}
  .ai-side-top{gap:6px}
  .ai-chats{display:none;position:absolute;left:0;right:0;top:100%;z-index:20;max-height:60vh;padding:8px;background:rgba(12,12,16,.98);border-bottom:1px solid var(--line2);box-shadow:0 20px 40px rgba(0,0,0,.5)}
  .ai-side.open .ai-chats{display:flex}
  .ai-side.open .ai-toggle{color:#fff;background:rgba(255,255,255,.12)}
  .ai-starters{grid-template-columns:1fr}
}
@media (max-width:720px){.ai-page{height:calc(100dvh - 112px)}.nav-pill#bar-ai{width:40px}}

/* Eclipse's white spinning lights, used as the loader */
.aura-box{position:relative;width:120px;height:120px;display:grid;place-items:center;--spin:3s;--trail:1.2s;--c1:#fff;--c2:#c9d4ff;--c3:#8e9bc2;--c4:#eef1ff}
.aura{position:absolute;border-radius:50%;pointer-events:none}
.aura-glow{inset:14px;background:conic-gradient(from 0deg,var(--c1),var(--c3),var(--c2),transparent,var(--c4),var(--c1));filter:blur(18px);opacity:.45;animation:spin var(--spin) linear infinite}
.aura-trail{inset:0;background:conic-gradient(from 0deg,transparent 0deg,transparent 150deg,rgba(255,255,255,.12) 220deg,var(--c2) 320deg,#fff 356deg,transparent 360deg);
  -webkit-mask:radial-gradient(circle closest-side,transparent 86%,#000 88%,#000 93%,transparent 95%);mask:radial-gradient(circle closest-side,transparent 86%,#000 88%,#000 93%,transparent 95%);
  animation:spin var(--trail) linear infinite}
.aura-trail.two{animation-duration:calc(var(--trail) * 1.7);animation-direction:reverse;opacity:.5;transform:rotate(180deg)}
.aura-moon{position:relative;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#fff 0%,#dcdde4 38%,#8c8e98 75%,#45464d 100%);
  box-shadow:inset -7px -5px 11px rgba(0,0,0,.55),0 0 18px rgba(255,255,255,.22)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================= drawer (settings) ================= */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity .25s ease}
.scrim.open{opacity:1}
.drawer{position:fixed;top:10px;right:10px;bottom:10px;z-index:61;width:min(400px,calc(100vw - 20px));display:flex;flex-direction:column;
  background:var(--glass-strong);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line2);border-radius:var(--r-panel);
  box-shadow:0 30px 70px rgba(0,0,0,.7);transform:translateX(calc(100% + 20px));transition:transform .4s var(--ease-drawer)}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:16px 12px 12px 20px;border-bottom:1px solid var(--line)}
.drawer header h2{font:650 18px/1.2 var(--f-display);letter-spacing:-.015em}
.drawer-body{flex:1;overflow-y:auto;padding:6px 20px 20px}
.s-block{padding:18px 0}
.s-block+.s-block{border-top:1px solid var(--line)}
.s-block h3{font-size:14.5px;font-weight:600}
.s-block>p{margin-top:3px;font-size:13px;color:var(--muted);line-height:1.5}
.s-block .btn{margin-top:14px}
.s-credit{padding:14px 0 6px;border-top:1px solid var(--line);text-align:center;font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
.s-credit[hidden]{display:none}
.cloaks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.cloak{display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:var(--r-ctl);text-align:left;font-size:13.5px;color:var(--muted);
  background:linear-gradient(180deg,#1a1a1f,#131317);border:1px solid var(--line);transition:border-color .15s ease,color .15s ease}
.cloak img,.cloak .cl-off{width:18px;height:18px;flex:none;border-radius:4px}
.cloak .cl-off{display:grid;place-items:center;color:var(--dim)}
.cloak .cl-off svg{width:16px;height:16px}
@media (hover:hover){.cloak:hover{color:var(--text);border-color:var(--line2)}}
.cloak[aria-pressed="true"]{color:#fff;border-color:rgba(255,255,255,.6);background:linear-gradient(180deg,#2a2a31,#1d1d22);box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.srow{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
.srow>span{font-size:13.5px;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field>span{font-size:12.5px;color:var(--muted)}
.inp{width:100%;height:40px;padding:0 12px;border-radius:10px;background:#0c0c10;border:1px solid var(--line2);outline:0;font-size:14px;color:var(--text);
  transition:border-color .15s ease,box-shadow .15s ease}
.inp:focus{border-color:rgba(255,255,255,.65);box-shadow:0 0 0 3px rgba(201,212,255,.1)}
.inp::placeholder{color:var(--dim)}
.field .hint{font-size:12px;color:var(--dim)}
.field .err{font-size:12.5px;color:#ff8a95}
.bind{min-width:92px;height:36px;padding:0 14px;border-radius:9px;font:600 13px/1 var(--f-mono);color:var(--text);
  background:linear-gradient(180deg,#2c2c33,#1d1d22);box-shadow:0 3px 0 #050507,inset 0 1px 0 rgba(255,255,255,.1);transition:transform .06s ease-out,box-shadow .2s ease}
.bind:active{transform:translateY(2px);box-shadow:0 1px 0 #050507}
.bind.listening{color:#0a0a0c;background:linear-gradient(180deg,#fff,#dcdce2);box-shadow:0 3px 0 var(--shade),0 0 0 4px rgba(201,212,255,.22)}
.toggle{position:relative;width:44px;height:26px;border-radius:999px;background:#2c2c33;flex:none;box-shadow:inset 0 2px 4px rgba(0,0,0,.5);transition:background-color .15s ease}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:linear-gradient(180deg,#fff,#cfcfd6);box-shadow:0 2px 4px rgba(0,0,0,.5);
  transition:transform .2s var(--ease-out),background .15s ease}
.toggle[aria-checked="true"]{background:linear-gradient(180deg,#fff,#dcdce2)}
.toggle[aria-checked="true"]::after{transform:translateX(18px);background:linear-gradient(180deg,#26262c,#0a0a0c)}

/* ================= modal + toasts ================= */
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s ease}
.modal.open{opacity:1}
.modal-card{width:min(440px,100%);padding:22px;border-radius:var(--r-panel);background:var(--graphite);border:1px solid var(--line2);box-shadow:0 30px 60px rgba(0,0,0,.7);
  transform:scale(.97);transition:transform .25s var(--ease-out)}
.modal.open .modal-card{transform:none}
.modal-card h3{font:650 17px/1.3 var(--f-display);letter-spacing:-.01em}
.modal-card p{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.55}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.toasts{position:fixed;left:50%;bottom:22px;z-index:80;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(-50%);pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:12px;background:var(--regolith);border:1px solid var(--line2);font-size:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.6);pointer-events:auto;transition:opacity .2s ease,transform .25s var(--ease-out)}
.toast svg{width:17px;height:17px;flex:none}
.toast.good{border-color:rgba(95,240,176,.45)}
.toast.good svg{color:var(--signal)}
.toast.enter,.toast.leave{opacity:0;transform:translateY(8px)}

/* ================= responsive ================= */
@media (max-width:1100px){
  .gv{grid-template-columns:1fr}
  .gv-side{position:static;max-height:none}
  .gv-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
}
@media (max-width:960px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:0;gap:0}
  .orrery{order:-1;height:clamp(260px,58vw,420px);margin:0 calc(var(--gutter) * -1)}
  .orrery canvas{left:-10%;right:-10%;width:120%}
  .hero-copy{max-width:640px}
}
@media (max-width:720px){
  .bar{grid-template-columns:auto 1fr;grid-template-areas:"brand actions" "search search";height:auto;row-gap:10px;padding-top:12px;padding-bottom:12px}
  .brand{grid-area:brand}.bar-actions{grid-area:actions}.search{grid-area:search}
  .search kbd{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(120px,34vw,170px);gap:12px}
  .bento .card:nth-child(1){grid-row:span 1}
  .bento .card:nth-child(6){grid-column:span 1}
  .bento .card:nth-child(8){display:none}
  .shelf-row{grid-auto-columns:clamp(150px,42vw,200px);gap:12px}
  .shelf-head .arrow{display:none}
  .hero-cta .btn-3d,.hero-cta .btn-dark{flex:1}
  .gv-actions{width:100%}
  .gv-actions .btn-3d{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  .aura-glow,.aura-trail,.css-ring{animation-duration:12s!important}
  .card,.art .orb,.drawer{transition-duration:.01s!important}
}
@media (prefers-reduced-transparency:reduce){
  .bar.stuck,.drawer,.card,.mini{background:var(--graphite);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* admin: a password gate, then a small command console */
.admin{position:fixed;inset:0;z-index:72;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .18s ease}
.admin.open{opacity:1}
.admin-card{display:flex;flex-direction:column;width:min(460px,100%);max-height:calc(100dvh - 32px);border-radius:var(--r-panel);background:#0a0a0d;border:1px solid var(--line2);box-shadow:0 30px 70px rgba(0,0,0,.7);overflow:hidden;
  transform:translateY(8px) scale(.985);transition:transform .22s var(--ease-out),width .22s var(--ease-out)}
.admin.open .admin-card{transform:none}
.admin-card.term{width:min(820px,100%);height:min(580px,calc(100dvh - 32px))}
.admin-head{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 18px;border-bottom:1px solid var(--line);flex:none}
.admin-head>svg{width:18px;height:18px;color:var(--text)}
.admin-head h2{flex:1;font:650 16px/1.2 var(--f-display);letter-spacing:-.01em}
.admin-flag{height:24px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;font:600 11px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:#ff7b87;background:rgba(255,77,94,.1);border:1px solid rgba(255,77,94,.35)}
.admin-login{display:grid;justify-items:center;gap:12px;padding:30px 24px 22px;text-align:center}
.admin-lock{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.03)}
.admin-lock svg{width:21px;height:21px}
.admin-login label{font-size:15px;font-weight:500}
.admin-pass-row{display:flex;gap:8px;width:min(360px,100%)}
.admin-pass-row .inp{flex:1;min-width:0}
.admin-err{min-height:19px;font-size:13px;color:#ff7b87}
.admin-term{flex:1;min-height:0;display:flex;flex-direction:column;background:radial-gradient(120% 80% at 0 0,rgba(201,212,255,.035),transparent 60%)}
.admin-log{flex:1;min-height:0;overflow-y:auto;padding:14px 18px;font:400 13px/1.65 var(--f-mono);color:var(--text)}
.admin-log .l{white-space:pre-wrap;overflow-wrap:anywhere}
.admin-log .cmd{margin-top:8px;color:var(--muted)}
.admin-log .cmd::before{content:"comet \203a  ";color:var(--dim)}
.admin-log .cmd:first-child{margin-top:0}
.admin-log .ok{color:var(--signal)}
.admin-log .bad{color:#ff7b87}
.admin-log .warn{color:#ffc46b}
.admin-log .dim{color:var(--dim)}
.devs{display:grid;grid-template-columns:auto minmax(0,1.5fr) auto minmax(0,1.4fr) auto auto;column-gap:18px;row-gap:2px;margin:6px 0 4px;align-items:baseline}
.devs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.devs .h{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding-bottom:3px}
.devs .num{color:var(--signal);font-weight:600;text-align:right}
.devs .scr,.devs .for{color:var(--muted)}
.devs .tags{display:flex;gap:5px;overflow:visible}
.devs .tags i{font-style:normal;font-size:10.5px;padding:0 6px;border-radius:5px;border:1px solid var(--line2);color:var(--muted)}
.devs .tags .you{color:var(--earthshine);border-color:rgba(201,212,255,.35)}
.devs .tags .adm{color:var(--signal);border-color:rgba(95,240,176,.35)}
.devs .tags .lk{color:#ff7b87;border-color:rgba(255,77,94,.4)}
.admin-line{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line);font:500 13.5px/1 var(--f-mono);flex:none}
.admin-line span{color:var(--dim)}
.admin-line b{color:var(--signal);font-weight:600}
.admin-line input{flex:1;min-width:0;height:28px;background:transparent;border:0;outline:none;color:var(--text);font:inherit;caret-color:var(--signal)}
.admin-line input::placeholder{color:var(--dim)}
@media (max-width:600px){.devs{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto}.devs .scr,.devs .for,.devs .h:nth-child(3),.devs .h:nth-child(5){display:none}}

/* admin: grey autocomplete behind the command line, and the live game checks */
.admin-input{position:relative;flex:1;min-width:0;display:flex;overflow:hidden}
.admin-input input{position:relative;width:100%}
.admin-ghost{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;white-space:pre;pointer-events:none;font:inherit}
.admin-ghost i{font-style:normal;color:transparent}
.admin-ghost em{font-style:normal;color:var(--dim)}
.admin-live{flex:none;padding:10px 18px 12px;border-top:1px solid var(--line)}
.admin-prog{margin-bottom:9px;font:500 12px/1.4 var(--f-mono);color:var(--muted)}
.admin-frames{display:flex;gap:10px;overflow-x:auto}
.chk-slot{position:relative;flex:none;width:208px;height:130px;border-radius:9px;overflow:hidden;background:#000;border:1px solid var(--line2)}
.chk-slot iframe{position:absolute;left:0;top:0;width:640px;height:400px;border:0;transform:scale(.325);transform-origin:0 0;pointer-events:none}
.chk-slot span{position:absolute;left:7px;right:7px;bottom:6px;font:600 10.5px/1.3 var(--f-mono);color:#fff;text-shadow:0 1px 3px #000,0 0 8px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-live.one .chk-slot{width:320px;height:200px}
.admin-live.one .chk-slot iframe{transform:scale(.5)}
@media (max-width:600px){.chk-slot{width:150px;height:94px}.chk-slot iframe{transform:scale(.234)}}

/* ---- scrambled typing: the real text goes transparent and a mask of random letters sits over it (same mono font, so the caret lines up) */
.scr-wrap{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:center}
.scr-wrap input{width:100%;padding:0}
.scr-wrap input.scr{color:transparent;caret-color:var(--text);font-family:"Geist Mono",ui-monospace,monospace}
.scr-wrap input.scr::selection{color:transparent;background:rgba(255,255,255,.22)}
.scr-mask{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;white-space:pre;overflow:hidden;color:var(--text);font-family:"Geist Mono",ui-monospace,monospace;font-size:inherit;letter-spacing:0}
.px-search .scr-mask{font-size:17px}
.px-window:not(.landing) .px-search .scr-mask{font-size:15px}
.px-address .scr-mask{font-size:14px}

/* ---- admin casts: a message banner and confetti that also show inside a fullscreen game (they move into the fullscreen element) */
.cast-msg{position:fixed;left:50%;top:14px;z-index:2147483000;transform:translate(-50%,-140%);max-width:min(92vw,720px);display:flex;align-items:center;gap:12px;padding:12px 16px 12px 18px;border-radius:14px;
  background:linear-gradient(180deg,#fff,#e4e4ea);color:#0a0a0c;font:600 15px/1.35 var(--f-body,"Onest",sans-serif);box-shadow:0 6px 0 #9b9ba5,0 24px 50px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);pointer-events:auto}
.cast-msg.show{transform:translate(-50%,0)}
.cast-msg .cm-ic{width:30px;height:30px;border-radius:50%;background:#0a0a0c;color:#fff;display:grid;place-items:center;flex:none;font-size:15px}
.cast-msg .cm-text{overflow-wrap:anywhere}
.cast-msg .cm-x{width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.08);color:#0a0a0c;display:grid;place-items:center;flex:none;cursor:pointer;font-size:16px;line-height:1}
.cast-msg .cm-x:hover{background:rgba(0,0,0,.16)}
.cast-confetti{position:fixed;inset:0;width:100%;height:100%;z-index:2147482999;pointer-events:none}
:not(:root):fullscreen .cast-msg,:not(:root):fullscreen .cast-confetti{position:absolute}
/* prank casts: emoji rain, the fake crash screen and the bouncing logo */
.cast-rain{position:fixed;inset:0;z-index:2147482998;pointer-events:none;overflow:hidden}
.cast-rain span{position:absolute;top:-80px;line-height:1;animation:castFall linear both;will-change:transform;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
@keyframes castFall{to{transform:translate(var(--sway),calc(100vh + 160px)) rotate(var(--spin))}}
.cast-crash{position:fixed;inset:0;z-index:2147483002;background:#0078d7;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 max(24px,12vw);cursor:none;user-select:none;
  font:300 clamp(16px,1.9vw,26px)/1.4 "Segoe UI",system-ui,sans-serif;animation:castIn .12s steps(1) both;transition:background .5s,opacity .45s}
.cast-crash .cc-face{font-size:clamp(90px,11vw,160px);line-height:1;margin-bottom:.35em}
.cast-crash p{margin:0 0 .9em;max-width:34em}
.cast-crash .cc-pct{margin-bottom:2.2em}
.cast-crash .cc-small{font-size:.62em;margin-bottom:.4em;opacity:.95}
.cast-crash.out{opacity:0}
@keyframes castIn{from{opacity:0}to{opacity:1}}
.cast-dvd{position:fixed;left:0;top:0;z-index:2147482997;pointer-events:none;display:flex;flex-direction:column;align-items:center;padding:16px 40px 12px;border-radius:50%/46%;
  border:4px solid currentColor;color:#fff;transition:color .15s,opacity .5s;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.cast-dvd b{font:800 34px/1 "Unbounded",var(--f-body,sans-serif);letter-spacing:.04em}
.cast-dvd i{font:700 13px/1.2 "Geist Mono",monospace;font-style:normal;letter-spacing:.5em;text-transform:uppercase;margin-top:4px;padding-left:.5em}
.cast-dvd.out{opacity:0}
:not(:root):fullscreen .cast-rain,:not(:root):fullscreen .cast-crash,:not(:root):fullscreen .cast-dvd{position:absolute}
/* new direct message pop-ups: top right on every page, inside the fullscreen element when a game is fullscreen */
.dm-pops{position:fixed;top:74px;right:18px;z-index:2147483001;display:flex;flex-direction:column;gap:10px;width:min(340px,calc(100vw - 32px));pointer-events:none}
:not(:root):fullscreen .dm-pops{position:absolute;top:16px}
.dm-pop{display:flex;align-items:flex-start;gap:12px;padding:12px 12px 12px 14px;border-radius:16px;background:rgba(18,18,24,.92);border:1px solid var(--line2);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(201,212,255,.06) inset;color:#f4f4f7;
  pointer-events:auto;cursor:pointer;transition:opacity .22s ease,transform .3s var(--ease-out),border-color .15s ease}
.dm-pop:hover,.dm-pop:focus-visible{border-color:rgba(201,212,255,.45);outline:none}
.dm-pop.enter,.dm-pop.leave{opacity:0;transform:translateX(24px)}
.dm-pop .cr-avatar{width:38px;height:38px;font-size:13px}
.dm-pop-txt{flex:1;min-width:0}
.dm-pop-top{display:flex;align-items:baseline;gap:8px;min-width:0}
.dm-pop-top b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.dm-pop-top small{font-size:12px;color:var(--dim,#9aa0b4);white-space:nowrap}
.dm-pop-txt p{margin:3px 0 0;font-size:14px;line-height:1.35;color:#d9dbe6;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dm-pop-x{width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.07);color:#cfd2dc;display:grid;place-items:center;flex:none;cursor:pointer;font-size:15px;line-height:1}
.dm-pop-x:hover{background:rgba(255,255,255,.16)}
html.q-potato .dm-pop{-webkit-backdrop-filter:none;backdrop-filter:none;background:#15151b;box-shadow:none}

/* ---- quality: low = no motion; potato = low + no stars, moons, glass, shadows or gradients */
.q-low *,.q-low *::before,.q-low *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.q-low .intro .hero h1,.q-low .intro .hero-sub,.q-low .intro .hero-cta,.q-low .intro .pick-note,.q-low .intro .bento>*{opacity:1!important;transform:none!important}
.q-low .warp{display:none!important}
.q-low .orbiter-comet,.q-low .art .comet{display:none}
.q-potato #stars,.q-potato .orrery,.q-potato .orbiter,.q-potato .px-hero,.q-potato .art .stars,.q-potato .art .ring,.q-potato .art .orb,.q-potato .art .moonlet,.q-potato .art .comet,.q-potato .aura-box,.q-potato .hero-glow,.q-potato .orrery-glow{display:none!important}
.q-potato *,.q-potato *::before,.q-potato *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;text-shadow:none!important;filter:none!important;background-image:none!important}
.q-potato body{background:#07070a}
.q-potato .bar.stuck,.q-potato .drawer,.q-potato .card,.q-potato .mini,.q-potato .pop-menu,.q-potato .search-pop,.q-potato .modal-card,.q-potato .admin-card{background:#111115}
.q-potato .art{background:#1b1b21}
.q-potato .btn-3d,.q-potato .nav-pill.primary,.q-potato .px-search .go{background:#e8e8ee}
.q-potato .hero{min-height:0;padding-top:60px;padding-bottom:40px}
.q-potato .seg button[aria-selected="true"],.q-potato .cloak[aria-pressed="true"]{background:#3a3a42}
.q-potato .toggle::after{background:#fff}
.q-potato .toggle[aria-checked="true"]::after{background:#0a0a0c}
.q-potato .toggle[aria-checked="true"]{background:#e8e8ee}

/* ---- movies: the proxied site fills everything under the header, like a page of Comet's own */
.movies{height:calc(100dvh - 68px);background:#000}
.movies iframe{display:block;width:100%;height:100%;border:0;background:#000}
html.movies-open .foot{display:none}
html.movies-open body{overflow:hidden}

/* ---- Comet Chat: server rail / channels / messages / members, in the Comet AI look */
.cr{position:relative;z-index:1}
.cr-page{display:grid;grid-template-columns:64px 232px minmax(0,1fr) 224px;grid-template-rows:minmax(0,1fr);height:calc(100dvh - 68px);min-width:0;overflow:hidden}
.cr.hide-members .cr-page{grid-template-columns:64px 232px minmax(0,1fr)}
.cr.hide-members .cr-members{display:none}
.cr-rail{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 0;border-right:1px solid var(--line);background:rgba(7,7,10,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.cr-srv{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none;font:700 13px/1 var(--f-display);color:#0a0a0c;background:var(--c,#c9d4ff);transition:border-radius .15s ease,transform .15s ease;position:relative}
.cr-srv svg{width:20px;height:20px;color:#0a0a0c}
.cr-srv:hover,.cr-srv.on{border-radius:11px}
.cr-srv.on::before{content:"";position:absolute;left:-11px;top:9px;width:3px;height:24px;border-radius:3px;background:#fff}
.cr-srv.add{background:rgba(255,255,255,.08);color:var(--text);border:1px dashed var(--line3)}
.cr-srv.add svg{color:var(--text)}
.cr-chans{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:rgba(9,9,12,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.cr-server{display:flex;align-items:center;gap:8px;padding:12px 10px 12px 16px;border-bottom:1px solid var(--line)}
.cr-server h2{flex:1;min-width:0;font:600 15px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-chan-list{flex:1;min-height:0;overflow-y:auto;padding:10px 8px}
.cr-cat{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 8px 4px;font:600 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rc,var(--dim))}
.cr-chan{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:9px;color:var(--muted);font-size:14px;text-align:left}
.cr-chan .cr-hash{color:var(--dim);font-weight:700}
.cr-chan:hover{background:rgba(255,255,255,.05);color:var(--text)}
.cr-chan.on{background:rgba(255,255,255,.1);color:#fff}
.cr-chan .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-me{display:flex;align-items:center;gap:9px;padding:10px 10px 12px 14px;border-top:1px solid var(--line);background:rgba(0,0,0,.25)}
.cr-me-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.cr-me-text b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-me-text small{font:500 11px/1.3 var(--f-mono);color:var(--dim)}
.cr-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;font:700 12px/1 var(--f-display);color:#0a0a0c;background:var(--c,#c9d4ff)}
.cr-avatar.sm{width:26px;height:26px;font-size:10px}
.cr-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.cr-head{display:flex;align-items:center;gap:10px;padding:0 14px;height:52px;border-bottom:1px solid var(--line)}
.cr-chan-pick{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:9px;font-size:15px}
.cr-chan-pick .cr-hash{color:var(--dim);font-weight:700}
.cr-chan-pick:hover{background:rgba(255,255,255,.05)}
.cr-topic{flex:1;min-width:0;font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:1px solid var(--line2);padding-left:10px}
.cr-scroll{flex:1;min-height:0;overflow-y:auto;padding:14px 16px}
.cr-msgs{display:flex;flex-direction:column;gap:10px;max-width:980px}
.cr-note{color:var(--dim);font-size:13.5px;text-align:center;padding:30px 0}
.cr-msg{display:flex;flex-direction:column;gap:6px;animation:rise .2s var(--ease-out)}
.cr-msg-head{display:flex;align-items:center;gap:9px;min-width:0}
.cr-msg-head b{font-size:14px}
.cr-msg-head time{font:500 11px/1 var(--f-mono);color:var(--dim)}
.cr-badge{font:600 10px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;padding:4px 7px;border-radius:6px;color:var(--rc);background:color-mix(in srgb,var(--rc) 18%,transparent);border:1px solid color-mix(in srgb,var(--rc) 35%,transparent)}
.cr-acts{margin-left:auto;display:flex;gap:2px;opacity:0;transition:opacity .12s ease}
.cr-msg:hover .cr-acts,.cr-acts:focus-within{opacity:1}
.cr-text{margin-left:41px;padding:10px 14px;border-radius:12px;background:rgba(20,20,25,.92);border:1px solid var(--line);font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.cr-msg.mine .cr-text{border-color:rgba(201,212,255,.25)}
.cr-text a{color:#c9d4ff;text-decoration:underline}
.cr-reply{margin-left:41px;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden}
.cr-reply::before{content:"\21B3";color:var(--dim)}
.cr-reply b{color:var(--muted)}
.cr-reply span{overflow:hidden;text-overflow:ellipsis}
.cr-composer{padding:8px 14px 12px}
.cr-replying{display:flex;align-items:center;gap:8px;padding:4px 4px 6px 12px;font-size:12.5px;color:var(--muted)}
.cr-replying span{flex:1}
.cr-composer .ai-row{display:flex;align-items:flex-end;gap:6px;padding:5px 5px 5px 14px;border-radius:16px;background:rgba(20,20,25,.92);border:1px solid var(--line2);transition:border-color .15s ease}
.cr-composer .ai-row:focus-within{border-color:rgba(255,255,255,.45)}
.cr-composer textarea{flex:1;min-width:0;max-height:160px;padding:10px 4px;background:none;border:0;outline:0;resize:none;font:15px/1.45 var(--f-body);color:var(--text)}
.cr-composer textarea::placeholder{color:var(--dim)}
.cr-composer textarea:disabled{color:var(--dim)}
.cr-members{display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding:10px 8px;border-left:1px solid var(--line);background:rgba(9,9,12,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.cr-member{display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;border-radius:9px;text-align:left;font-size:14px}
.cr-member:hover{background:rgba(255,255,255,.05)}
.cr-member .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-member.off{opacity:.45}
.cr-crown{font-style:normal;color:#f0b429;font-size:13px}
.icon-btn.sm{width:28px;height:28px;border-radius:8px}
.icon-btn.sm svg{width:15px;height:15px}
.modal-row{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.modal-card.wide{width:min(640px,100%);max-width:640px}
.cr-roles{display:flex;flex-direction:column;gap:8px;margin-top:12px;max-height:50vh;overflow-y:auto}
.cr-role{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.inp.sm{height:34px;font-size:13.5px}
.cr-swatches{display:flex;gap:4px}
.cr-swatches button{width:18px;height:18px;border-radius:50%;background:var(--c);border:2px solid transparent}
.cr-swatches button.on{border-color:#fff}
.cr-perms{display:flex;gap:8px;font-size:12.5px;color:var(--muted)}
.cr-perms label{display:flex;align-items:center;gap:4px;cursor:pointer}
.cr-role-btns{display:flex;align-items:center;gap:4px}
html.chat-open .foot{display:none}
html.chat-open,html.chat-open body{overflow:hidden;height:100dvh}
@media (max-width:720px){.cr-page{height:calc(100dvh - 112px)}}
@media (max-width:980px){.cr-page,.cr.hide-members .cr-page{grid-template-columns:64px 232px minmax(0,1fr)}.cr-members{display:none}.cr:not(.hide-members) .cr-members{display:flex;position:fixed;right:0;top:68px;bottom:0;width:240px;background:var(--glass-strong);z-index:40}}
@media (max-width:700px){.cr-page,.cr.hide-members .cr-page{grid-template-columns:56px minmax(0,1fr)}.cr-chans{display:none}.cr-srv{width:38px;height:38px}.cr-text{margin-left:0}.cr-reply{margin-left:0}}

/* ---- Comet Chat v2: accounts, profiles, effects, server settings ---- */
.cr-rail{overflow:visible}
.cr-rail [data-tip]::after{top:50%;left:calc(100% + 12px);transform:translate(-4px,-50%);z-index:60}
@media (hover:hover){.cr-rail [data-tip]:hover::after{transform:translate(0,-50%)}}
.cr-server{width:100%;text-align:left;color:var(--text);background:none}
.cr-server svg{width:16px;height:16px;color:var(--dim);flex:none}
.cr-server:hover{background:rgba(255,255,255,.04)}
.cr-server:hover svg{color:var(--text)}
.cr-me{width:100%;text-align:left;color:var(--text)}
.cr-me:hover{background:rgba(255,255,255,.06)}
.cr-me > svg{width:15px;height:15px;color:var(--dim);flex:none}
.cr-me-text b{display:block}
.cr-avatar{position:relative;isolation:isolate;overflow:visible}
.cr-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}   /* absolute = always exactly the circle, whatever the upload's shape */
.cr-avatar.xl{width:84px;height:84px;font-size:28px}
.cr-avatar.click,.cr-name.click{cursor:pointer}
.cr-name{font-weight:600}
.cr-name.click:hover{text-decoration:underline}
button.cr-name{background:none;font-size:14px;padding:0;text-align:left}
.cr-badge.mod{--rc:#5ff0b0}
.cr-badge.mute{--rc:#ff4d5e}
.cr-tabs{margin:0 0 12px;display:flex}
.cr-tabs button{flex:1;justify-content:center}
.cr-tabs.wrap{flex-wrap:wrap;overflow:visible}
.cr-tabs.wrap button{flex:0 0 auto}
.cr-hint{font-size:12.5px;color:var(--dim);margin-top:8px;line-height:1.5}
.cr-err{color:#ff8a95;font-size:13px;margin-top:8px}
.modal-card > .inp{margin-top:10px}
.modal-card textarea.inp{height:auto;min-height:62px;padding:10px 12px;resize:vertical;font:14px/1.45 var(--f-body)}
select.inp{appearance:auto;padding-right:28px;cursor:pointer}
/* profile effects: a ring around the avatar + a treatment on the name */
.cr-avatar::before{content:"";position:absolute;inset:-3px;border-radius:50%;z-index:-1;display:none}
.cr-avatar.fx-glow{box-shadow:0 0 0 2px var(--ac),0 0 14px var(--ac)}
.cr-name.fx-glow{text-shadow:0 0 10px var(--ac)}
.cr-avatar.fx-sparkle{box-shadow:0 0 0 2px var(--ac)}
.cr-name.fx-sparkle::after{content:"\2726";margin-left:4px;color:var(--ac);font-size:.85em;display:inline-block;animation:twinkle 1.3s ease-in-out infinite}
.cr-avatar.fx-rainbow::before{display:block;background:conic-gradient(#ff4d5e,#f5b342,#5ff0b0,#5fd6f0,#b48cff,#ff4d5e);animation:spin 3s linear infinite}
.cr-name.fx-rainbow{background:linear-gradient(90deg,#ff4d5e,#f5b342,#5ff0b0,#5fd6f0,#b48cff,#ff4d5e);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:slide 4s linear infinite}
.cr-avatar.fx-fire::before{display:block;background:conic-gradient(#ff4d1f,#ffb01f,#ff4d1f,#ff2a2a,#ff4d1f);filter:blur(1.5px);animation:flicker .9s ease-in-out infinite alternate}
.cr-name.fx-fire{text-shadow:0 0 8px #ff6a1f,0 0 16px rgba(255,80,0,.6)}
.cr-avatar.fx-frost::before{display:block;background:conic-gradient(#dff6ff,#7fd6ff,#ffffff,#7fd6ff,#dff6ff);animation:spin 8s linear infinite}
.cr-name.fx-frost{text-shadow:0 0 8px #9fe4ff,0 0 1px #fff}
.cr-avatar.fx-gold::before{display:block;background:conic-gradient(#ffe68a,#f0b429,#fff3c2,#c98a12,#ffe68a);animation:spin 6s linear infinite}
.cr-name.fx-gold{color:#f5d57a!important;text-shadow:0 0 10px rgba(240,180,41,.6)}
.cr-avatar.fx-void::before{display:block;background:conic-gradient(#1a0b2e,#6b2bd9,#0b0b12,#b48cff,#1a0b2e);animation:spin 5s linear infinite reverse}
.cr-name.fx-void{text-shadow:0 0 12px #8a4dff,0 0 2px #000}
@keyframes twinkle{0%,100%{opacity:.4;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide{to{background-position:200% 0}}
@keyframes flicker{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}
.q-potato .cr-avatar::before,.q-potato .cr-name.fx-sparkle::after,.q-potato .cr-name.fx-rainbow{animation:none}
/* profile card */
.modal-card.pf{padding:0;overflow:hidden;transition:transform .12s ease-out}
.pf-banner{height:112px;background:#222}
.pf-av{margin:-42px 0 0 20px;position:relative;width:84px;height:84px}
.pf-av .cr-avatar.xl{border:5px solid var(--graphite);width:84px;height:84px;box-sizing:border-box}
.pf-dot{position:absolute;right:2px;bottom:2px;width:18px;height:18px;border-radius:50%;background:#5ff0b0;border:4px solid var(--graphite)}
.pf-body{padding:10px 20px 0}
.pf-body h3{display:inline-block}
.pf-user{color:var(--dim);font:500 13px/1.3 var(--f-mono);margin-top:2px!important}
.pf-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pf-bio{margin-top:10px!important;font-size:14px!important;color:var(--text)!important;white-space:pre-wrap;overflow-wrap:anywhere}
.pf-meta{font-size:12px!important;color:var(--dim)!important}
.modal-card.pf .modal-row{padding:0 20px 20px;margin-top:14px;flex-wrap:wrap}
/* profile editor */
.modal-card.pf-edit{width:min(720px,100%);max-width:720px;max-height:92vh;overflow-y:auto}
.pf-preview{border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-top:14px;background:rgba(0,0,0,.3)}
.pf-preview .pf-body{padding-bottom:16px}
.pf-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pf-row .inp{flex:1;min-width:160px}
.pf-form .field{margin-top:14px}
.cr-swatches{flex-wrap:wrap;align-items:center;gap:6px}
.cr-swatches button{width:22px;height:22px}
.cr-swatches .hex{width:96px;height:28px;font:500 12px/1 var(--f-mono);padding:0 8px;margin-left:6px}
/* server settings */
.modal-card.ss{width:min(880px,100%);max-width:880px;padding:0;display:grid;grid-template-columns:210px minmax(0,1fr);height:min(660px,92vh);overflow:hidden;position:relative}
.ss-nav{display:flex;flex-direction:column;gap:2px;padding:18px 10px;background:rgba(0,0,0,.3);border-right:1px solid var(--line)}
.ss-title{padding:4px 10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ss-title b{font:650 15px/1.2 var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-title .cr-hint{margin-top:0}
.ss-tab{text-align:left;padding:8px 10px;border-radius:9px;color:var(--muted);font-size:14px}
.ss-tab:hover{background:rgba(255,255,255,.05);color:var(--text)}
.ss-tab[aria-current="true"]{background:rgba(255,255,255,.1);color:#fff}
.ss-pane{padding:22px 24px 26px;overflow-y:auto;min-width:0}
.ss-pane h4{margin-top:22px;font:600 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.ss-pane > .btn,.ss-pane > .btn-3d{margin-top:14px}
.ss-pane > .btn + .btn,.ss-pane > .btn-3d + .btn{margin-left:8px}
.ss-close{position:absolute;top:12px;right:12px}
.ss-item{margin-top:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);padding:0 14px 12px}
.ss-item summary{display:flex;align-items:center;gap:8px;padding:12px 0;cursor:pointer;list-style:none;min-width:0}
.ss-item summary::-webkit-details-marker{display:none}
.ss-item summary .cr-hint{margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-item summary::after{content:"\203A";color:var(--dim);font-size:18px;transition:transform .15s ease}
.ss-item[open] summary::after{transform:rotate(90deg)}
.ss-item.open{padding-top:12px}
.ss-item .field{margin-top:10px}
.ss-role-top{display:flex;align-items:center;gap:10px}
.ss-dot{width:14px;height:14px;border-radius:50%;flex:none}
.ss-perms{display:grid;grid-template-columns:minmax(0,1fr) 140px 140px;gap:8px;align-items:center;margin-top:10px;font-size:13.5px}
.ss-perms .h{font:600 11px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.ss-member{display:flex;align-items:center;gap:9px;padding:8px 6px;border-bottom:1px solid var(--line);font-size:14px;flex-wrap:wrap}
.ss-member .cr-hint{margin:0}
.ss-member .cr-acts{margin-left:auto;gap:6px;opacity:1;align-items:center}
.ss-member .inp.sm{width:auto;height:30px}
.ss-member .btn{height:30px;padding:0 10px;font-size:13px}
@media (max-width:700px){.modal-card.ss{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:94vh}.ss-nav{flex-direction:row;overflow-x:auto;padding:10px 44px 10px 10px;border-right:0;border-bottom:1px solid var(--line)}.ss-title{display:none}.ss-perms{grid-template-columns:minmax(0,1fr) 1fr 1fr}}

/* ---- Admin dashboard (`dash`): Runway-style night-desk analytics; the console docks right as a narrow column ---- */
.admin.dash-mode{place-items:stretch;place-content:center;grid-template-columns:minmax(0,900px) 320px;grid-template-rows:min(740px,calc(100dvh - 72px));gap:14px;padding:40px;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.admin.dash-mode .admin-card,.admin.dash-mode .admin-card.term{width:auto;height:auto;max-height:none;min-height:0;transform:none;border-radius:18px;background:rgba(13,13,16,.92);border-color:#1e1e20}
.dash{--dp:#0f0f10;--dl:#1e1e20;--dl2:#2a2a2d;--ink:#ededec;--ink2:#a3a3a0;--ink3:#878787;--ink4:#454543;--pos:#3fcf8e;--neg:#f0605a;--warm:#f2b25c;
  position:relative;min-width:0;min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;border-radius:18px;border:1px solid var(--dl2);padding:20px 22px 24px;color:var(--ink);font:400 13px/1.5 var(--f-body);box-shadow:0 30px 70px rgba(0,0,0,.6);
  background:radial-gradient(1200px 520px at 78% -12%,rgba(255,255,255,.035),transparent 60%),radial-gradient(700px 420px at 0% 100%,rgba(255,255,255,.018),transparent 70%),rgba(13,13,15,.9)}
.dash::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.07) .9px,transparent 1.3px);background-size:18px 18px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 0%,#000 0%,rgba(0,0,0,.35) 45%,transparent 85%);mask-image:radial-gradient(ellipse 80% 70% at 70% 0%,#000 0%,rgba(0,0,0,.35) 45%,transparent 85%)}
.dash > *{position:relative}
.dash-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.dash-eyebrow{display:flex;align-items:center;gap:7px;font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.dash-dot{width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 3px rgba(63,207,142,.18);animation:dash-pulse 2s ease-in-out infinite}
@keyframes dash-pulse{50%{box-shadow:0 0 0 6px rgba(63,207,142,.06)}}
.dash-title h2{margin-top:8px;font:500 21px/1.15 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.dash-sub{margin-top:6px;font-size:13px;color:var(--ink2)}
.dash-ctl{display:flex;align-items:center;gap:8px;flex:none}
.dash-range{padding:3px;border-radius:10px;background:transparent;border:1px solid var(--dl2)}
.dash-range button{height:28px;padding:0 11px;border-radius:7px;font-size:12.5px;color:var(--ink2)}
.dash-range button[aria-selected="true"]{background:var(--ink);color:#09090a;box-shadow:none}
.dash .icon-btn{color:var(--ink2);border:1px solid var(--dl2);border-radius:8px;width:32px;height:32px}
.dash-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:18px;border-top:1px solid var(--dl);border-bottom:1px solid var(--dl)}
.dash-kpi{padding:12px 12px 13px;border-left:1px solid var(--dl);min-width:0}
.dash-kpi:first-child{border-left:0;padding-left:2px}
.dash-kpi-k{font-size:12px;color:var(--ink3)}
.dash-kpi-v{font:500 22px/1.1 var(--f-display);letter-spacing:-.02em;margin:5px 0 4px;white-space:nowrap;color:var(--ink)}
.dash-kpi-d{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-kpi-d b{font-weight:500;color:var(--pos)}
.dash-kpi-d b.down{color:var(--neg)}
.dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.dash-card{min-width:0;border:1px solid var(--dl);border-radius:14px;background:rgba(255,255,255,.015);padding:14px 16px 16px;display:flex;flex-direction:column;min-height:0}
.dash-card.wide{grid-column:span 2}
.dash-card.full{grid-column:1/-1}
.dash-card > header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.dash-card h3{font:500 14px/1.2 var(--f-body);color:var(--ink)}
.dash-card > header span{font-size:11.5px;color:var(--ink3);white-space:nowrap}
.dash-chart{position:relative;height:190px}
.dash-chart canvas{width:100%;height:100%;display:block}
.dash-tip{position:absolute;pointer-events:none;padding:6px 9px;border-radius:8px;background:#161617;border:1px solid var(--dl2);font:500 12px/1.35 var(--f-body);color:var(--ink);white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.5);transform:translate(-50%,calc(-100% - 10px))}
.dash-tip small{display:block;color:var(--ink3);font-weight:400}
.dash-list{list-style:none;display:flex;flex-direction:column;gap:9px;max-height:360px;overflow-y:auto;padding-right:2px}
.dash-list li,.dash-feed li{flex:none}
.dash-list li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:4px 10px;font-size:13px}
.dash-list .n{font:500 11.5px/1 var(--f-mono);color:var(--ink4)}
.dash-list .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.dash-list .bar{grid-column:2;height:3px;border-radius:2px;background:var(--dl2);overflow:hidden;margin-top:-1px}
.dash-list .bar i{display:block;height:100%;width:var(--w);background:var(--ink2);border-radius:2px}
.dash-list .v{font:500 12px/1 var(--f-mono);color:var(--ink2);white-space:nowrap}
.dash-list .v small{color:var(--ink4);margin-left:4px}
.dash-empty{color:var(--ink3);font-size:13px;padding:18px 0;text-align:center}
.dash-table{display:grid;grid-template-columns:48px minmax(0,1.3fr) minmax(0,1fr) 92px 70px minmax(0,1.2fr);grid-auto-rows:max-content;align-content:start;gap:0 12px;align-items:center;max-height:440px;overflow-y:auto;font-size:12.5px;flex:none}
.dash-table > span{padding:7px 0;border-bottom:1px solid var(--dl);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.dash-table > span.h{position:sticky;top:0;background:#101011;font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink4);padding:4px 0 8px;border-bottom:1px solid var(--dl2)}
.dash-table .num{font:500 12px/1 var(--f-mono);color:var(--ink3)}
.dash-table .name{color:var(--ink)}
.dash-table .name small{display:block;color:var(--ink3);font-size:11.5px}
.dash-table .name b{font-weight:600;color:var(--ink)}
.dash-table > span.name,.dash-table > span.chips{line-height:1.35}
.dash-table .chips{flex-wrap:nowrap;mask-image:linear-gradient(90deg,#000 85%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}
.dash-table .chips em{flex:none;line-height:1.4}
.dash-table .st{display:flex;align-items:center;gap:6px}
.dash-table .st i{width:7px;height:7px;border-radius:50%;background:var(--ink4);flex:none}
.dash-table .st.on i{background:var(--pos);box-shadow:0 0 0 3px rgba(63,207,142,.15)}
.dash-table .st.on{color:var(--ink)}
.dash-table .chips{display:flex;gap:4px;overflow:hidden}
.dash-table .chips em{font-style:normal;font-size:11px;padding:2px 7px;border-radius:999px;border:1px solid var(--dl2);color:var(--ink2);white-space:nowrap}
.dash-feed{list-style:none;display:flex;flex-direction:column;max-height:400px;overflow-y:auto}
.dash-feed li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:9px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--dl);font-size:12.5px;color:var(--ink2)}
.dash-feed li i{width:7px;height:7px;border-radius:50%;background:var(--ink4);align-self:center}
.dash-feed li.play i{background:var(--warm)}
.dash-feed li.on i{background:var(--pos)}
.dash-feed li.chat i{background:#c9d4ff}
.dash-feed li b{font-weight:500;color:var(--ink)}
.dash-feed li time{font:500 11px/1 var(--f-mono);color:var(--ink4);white-space:nowrap}
@media (max-width:1280px){.admin.dash-mode{grid-template-columns:minmax(0,1fr) 300px;padding:28px}}
@media (max-width:1180px){.dash-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.dash-kpi:nth-child(4){border-left:0;padding-left:2px}.dash-kpi:nth-child(n+4){border-top:1px solid var(--dl)}.dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-card.wide{grid-column:span 2}}
@media (max-width:980px){.admin.dash-mode{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 260px;padding:14px}.dash-grid{grid-template-columns:1fr}.dash-card.wide,.dash-card.full{grid-column:auto}.dash-table{grid-template-columns:40px minmax(0,1fr) 80px}.dash-table > span:nth-child(6n+3),.dash-table > span:nth-child(6n+5),.dash-table > span:nth-child(6n+6){display:none}}

/* ---- Account page (log in / create account): purple glow, glass card with travelling light beams, 3D tilt ---- */
.auth{position:relative;z-index:1;min-height:calc(100dvh - 68px);display:grid;place-items:center;padding:28px 16px 40px;overflow:hidden;isolation:isolate}
.auth-bg{position:absolute;inset:0;z-index:-1;background:transparent;overflow:hidden}
.auth-bg::after{content:"";position:absolute;inset:0;opacity:.035;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}
.auth-glow{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;filter:blur(70px);pointer-events:none}
.auth-glow.a{top:-30vh;width:110vh;height:70vh;background:rgba(201,212,255,.06);animation:auth-breathe 8s ease-in-out infinite alternate}
.auth-glow.b{bottom:-55vh;width:90vh;height:90vh;background:rgba(201,212,255,.05);animation:auth-breathe 6s ease-in-out 1s infinite alternate}
.auth-spot{position:absolute;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.03);filter:blur(90px);animation:auth-pulse 4s ease-in-out infinite}
.auth-spot.l{left:18%;top:18%}.auth-spot.r{right:18%;bottom:18%;animation-delay:1s}
@keyframes auth-breathe{from{opacity:.55;transform:translateX(-50%) scale(.98)}to{opacity:1;transform:translateX(-50%) scale(1.05)}}
@keyframes auth-pulse{50%{opacity:.4}}
.auth-wrap{width:min(380px,100%);perspective:1500px;animation:rise .6s var(--ease-out)}
.auth-tilt{transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform}
.auth-card{position:relative;padding:26px 24px 22px;border-radius:18px;background:rgba(12,12,16,.72);border:1px solid rgba(255,255,255,.07);box-shadow:0 30px 70px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);overflow:hidden;text-align:center}
.auth-card::before{content:"";position:absolute;inset:0;opacity:.03;pointer-events:none;background-image:linear-gradient(135deg,#fff .5px,transparent .5px),linear-gradient(45deg,#fff .5px,transparent .5px);background-size:30px 30px}
.auth-beam{position:absolute;pointer-events:none;opacity:.7;filter:blur(2px)}
.auth-beam.t{top:0;left:-50%;height:3px;width:50%;background:linear-gradient(90deg,transparent,#fff,transparent);animation:auth-beam-x 3.5s ease-in-out infinite}
.auth-beam.b{bottom:0;right:-50%;height:3px;width:50%;background:linear-gradient(90deg,transparent,#fff,transparent);animation:auth-beam-xr 3.5s ease-in-out 1.2s infinite}
.auth-beam.r{right:0;top:-50%;width:3px;height:50%;background:linear-gradient(180deg,transparent,#fff,transparent);animation:auth-beam-y 3.5s ease-in-out .6s infinite}
.auth-beam.l{left:0;bottom:-50%;width:3px;height:50%;background:linear-gradient(180deg,transparent,#fff,transparent);animation:auth-beam-yr 3.5s ease-in-out 1.8s infinite}
@keyframes auth-beam-x{0%{left:-50%;opacity:.3}50%{opacity:.75}70%,100%{left:100%;opacity:.3}}
@keyframes auth-beam-xr{0%{right:-50%;opacity:.3}50%{opacity:.75}70%,100%{right:100%;opacity:.3}}
@keyframes auth-beam-y{0%{top:-50%;opacity:.3}50%{opacity:.75}70%,100%{top:100%;opacity:.3}}
@keyframes auth-beam-yr{0%{bottom:-50%;opacity:.3}50%{opacity:.75}70%,100%{bottom:100%;opacity:.3}}
.auth-logo{width:42px;height:42px;margin:0 auto 10px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,255,255,.12),transparent);animation:pop .5s var(--ease-out)}
.auth-logo svg{width:20px;height:20px;color:#fff}
@keyframes pop{from{transform:scale(.5);opacity:0}}
.auth-card h1{font:700 21px/1.2 var(--f-display);letter-spacing:-.01em;background:linear-gradient(180deg,#fff,rgba(255,255,255,.75));-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-sub{margin-top:4px;font-size:12.5px;color:rgba(255,255,255,.6)}
#auth-form{display:flex;flex-direction:column;gap:10px;margin-top:20px;text-align:left}
.auth-field{position:relative;display:flex;align-items:center;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid transparent;transition:background .2s ease,border-color .2s ease,transform .2s var(--ease-out)}
.auth-field:hover{transform:scale(1.01)}
.auth-field:focus-within{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);transform:scale(1.02)}
.auth-field > svg{position:absolute;left:12px;width:16px;height:16px;color:rgba(255,255,255,.4);transition:color .2s ease;pointer-events:none}
.auth-field:focus-within > svg{color:#fff}
.auth-field input{width:100%;height:42px;padding:0 40px 0 38px;background:none;border:0;outline:0;font:14px/1 var(--f-body);color:#fff}
.auth-field input::placeholder{color:rgba(255,255,255,.3)}
.auth-eye{position:absolute;right:6px;width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:rgba(255,255,255,.4)}
.auth-eye:hover{color:#fff}
.auth-eye svg{width:16px;height:16px}
.auth-err{font-size:12.5px;color:#ffb4bc;padding:2px 2px 0}
.auth-go{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;height:42px;margin-top:8px;border-radius:10px;background:#fff;color:#000;font:600 14px/1 var(--f-body);overflow:hidden;transition:transform .15s var(--ease-out),box-shadow .2s ease}
.auth-go:hover{transform:scale(1.02);box-shadow:0 0 24px rgba(255,255,255,.25)}
.auth-go:active{transform:scale(.98)}
.auth-go svg{width:13px;height:13px;transition:transform .25s ease}
.auth-go:hover svg{transform:translateX(3px)}
.auth-go .spin{display:none;width:16px;height:16px;border:2px solid rgba(0,0,0,.7);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}
.auth-go.busy .t,.auth-go.busy > svg{visibility:hidden}
.auth-go.busy .spin{display:block;position:absolute}
.auth-hint{margin-top:16px;font-size:12px;color:rgba(255,255,255,.45);line-height:1.5}
.auth-switch{margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.6)}
.auth-switch button{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.auth-back{margin-top:14px;font-size:12px;color:rgba(255,255,255,.4)}
.auth-back:hover{color:#fff}
.q-potato .auth-beam,.q-potato .auth-glow,.q-potato .auth-spot{animation:none}
.q-potato .auth-card{-webkit-backdrop-filter:none;backdrop-filter:none;background:#0d0d12}
@media (max-width:720px){.auth{min-height:calc(100dvh - 112px)}}
/* header profile button */
.bar-profile{padding:0;overflow:hidden}
.bar-profile .cr-avatar{width:30px;height:30px;font-size:11px}
.bar-profile.in{border:1px solid var(--line2)}
/* profile popover (click a name in chat): anchored next to the name, closes on any click outside */
.pf-pop{position:fixed;z-index:80;width:300px;transform-style:preserve-3d;will-change:transform;transition:transform .12s ease-out;border-radius:16px;background:var(--graphite);border:1px solid var(--line2);box-shadow:0 30px 60px rgba(0,0,0,.7);overflow:hidden;animation:rise .18s var(--ease-out)}
.pf-pop .pf-banner{height:88px}
.pf-pop .pf-av{margin:-36px 0 0 16px;width:72px;height:72px}
.pf-pop .pf-av .cr-avatar.xl{width:72px;height:72px;font-size:24px}
.pf-pop .pf-body{padding:8px 16px 0}
.pf-pop .pf-body h3{font:650 16px/1.3 var(--f-display)}
.pf-pop .pf-user{font-size:12px}
.pf-pop .pf-bio{font-size:13px}
.pf-pop .pf-meta{font-size:11.5px}
.pf-pop .modal-row{padding:0 16px 16px;margin-top:12px;justify-content:flex-start;flex-wrap:wrap}
.pf-pop .modal-row .btn{height:32px;padding:0 12px;font-size:13px}
/* cloud save line under the game title */
.gv-save{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--dim);margin-left:6px}
.gv-save[hidden]{display:none}
.gv-save svg{width:14px;height:14px}
.gv-save button{color:#c9d4ff;text-decoration:underline;text-underline-offset:3px}
.gv-save.on{color:#5ff0b0}

/* Discord-bridged servers */
.cr-srv.dc{color:#fff}
.cr-member.cr-voice{cursor:default;padding:4px 8px;font-size:13px}
.cr-member.cr-voice:hover{background:none}
.cr-voice-empty{padding:2px 10px 6px;font-size:12px;color:var(--dim)}

/* voice channels + voice bar */
.cr-chan.cr-vc svg{width:15px;height:15px;color:var(--dim);flex:none}
.cr-chan.cr-vc.on{background:rgba(95,240,176,.12);color:#5ff0b0}
.cr-chan.cr-vc.on svg{color:#5ff0b0}
.cr-vc-n{font:500 11px/1 var(--f-mono);color:var(--dim);padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.06)}
.cr-vc-people{display:flex;flex-direction:column;gap:4px;padding:4px 6px 10px 22px}
.cr-vc-person{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:8px;font-size:13.5px;color:var(--muted);min-height:34px}
.cr-vc-person .cr-avatar.sm{width:24px;height:24px;font-size:9px}
.cr-vc-person .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-vc-person svg{width:13px;height:13px;color:#ff4d5e}
.cr-voicebar{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-top:1px solid var(--line);background:rgba(95,240,176,.07)}
.cr-vb-dot{width:8px;height:8px;border-radius:50%;background:#5ff0b0;box-shadow:0 0 0 3px rgba(95,240,176,.2);animation:dash-pulse 2s ease-in-out infinite;flex:none}
.cr-vb-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.cr-vb-text b{font-size:13px;color:#5ff0b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-vb-text small{font:500 11px/1.3 var(--f-mono);color:var(--dim)}
.cr-voicebar .icon-btn[aria-pressed="true"]{color:#ff4d5e;background:rgba(255,77,94,.12)}

.vmeter{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.vmeter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5ff0b0,#f5b342 70%,#ff4d5e);transition:width .08s linear}
.cr-voicebar{padding-left:12px}
.cr-voicebar .icon-btn.sm{width:26px;height:26px}

.cr-vc-person.speaking .cr-avatar{box-shadow:0 0 0 2px #5ff0b0}
.cr-badge.bot{--rc:#5865F2}
.cr-chan.cr-vc.dc svg{color:#8b95ff}

/* profile card: glowing outlines, starfield inside, star banner, name fonts, @ mentions */
.pf-pop,.modal-card.pf,.pf-preview{--ac:#c9d4ff}
.pf-pop.ol-glow,.modal-card.pf.ol-glow,.pf-preview.ol-glow{box-shadow:0 0 0 1px var(--oc,var(--ac)),0 0 22px color-mix(in srgb,var(--oc,var(--ac)) 70%,transparent),0 30px 60px rgba(0,0,0,.7)}
.pf-pop.ol-neon,.modal-card.pf.ol-neon,.pf-preview.ol-neon{border-color:var(--oc,var(--ac));box-shadow:0 0 0 2px var(--oc,var(--ac)),0 0 12px var(--oc,var(--ac)),0 0 36px color-mix(in srgb,var(--oc,var(--ac)) 60%,transparent),inset 0 0 14px color-mix(in srgb,var(--oc,var(--ac)) 25%,transparent)}
.pf-pop.ol-pulse,.modal-card.pf.ol-pulse,.pf-preview.ol-pulse{animation:ol-pulse 2.2s ease-in-out infinite}
@keyframes ol-pulse{0%,100%{box-shadow:0 0 0 1px var(--oc,var(--ac)),0 0 10px color-mix(in srgb,var(--oc,var(--ac)) 50%,transparent)}50%{box-shadow:0 0 0 2px var(--oc,var(--ac)),0 0 34px var(--oc,var(--ac))}}
.stars-sky{background-color:#07070a;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 48% 8%,rgba(255,255,255,.9) 60%,transparent 61%),radial-gradient(1.6px 1.6px at 78% 30%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 30% 62%,rgba(255,255,255,.8) 60%,transparent 61%),radial-gradient(1.3px 1.3px at 64% 74%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 90% 86%,rgba(255,255,255,.7) 60%,transparent 61%),radial-gradient(1px 1px at 8% 88%,rgba(255,255,255,.8) 60%,transparent 61%),radial-gradient(1.5px 1.5px at 40% 40%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 56% 52%,rgba(255,255,255,.6) 60%,transparent 61%),radial-gradient(1px 1px at 20% 44%,rgba(255,255,255,.7) 60%,transparent 61%),radial-gradient(1.2px 1.2px at 84% 58%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 70% 12%,rgba(255,255,255,.75) 60%,transparent 61%),radial-gradient(60% 50% at 70% 0%,rgba(201,212,255,.12),transparent 70%);background-size:220px 160px,220px 160px,220px 160px,220px 160px,220px 160px,220px 160px,220px 160px,220px 160px,220px 160px,220px 160px,220px 160px,220px 160px,100% 100%;position:relative}
.stars-sky::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.4px 1.4px at 25% 25%,#fff 60%,transparent 61%),radial-gradient(1.4px 1.4px at 75% 65%,#fff 60%,transparent 61%),radial-gradient(1.2px 1.2px at 55% 15%,#fff 60%,transparent 61%);background-size:260px 180px;animation:twinkle-sky 3.2s ease-in-out infinite}
@keyframes twinkle-sky{0%,100%{opacity:.15}50%{opacity:.9}}
.pf-banner.stars,.pf-pop.bg-stars,.modal-card.pf.bg-stars,.pf-preview.bg-stars{background-color:#07070a}
.pf-pop.bg-stars .pf-body,.modal-card.pf.bg-stars .pf-body,.pf-preview.bg-stars .pf-body{position:relative}
.pf-banner.stars{position:relative;overflow:hidden}
.pf-banner.stars::after{content:none}
.pf-fontgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;max-height:190px;overflow-y:auto;padding:2px}
.pf-font{padding:8px 10px;border-radius:10px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--text);font-size:18px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.pf-font:hover{background:rgba(255,255,255,.07)}
.pf-font.on{border-color:#c9d4ff;background:rgba(201,212,255,.12)}
.cr-mention{color:#c9d4ff;background:rgba(201,212,255,.14);border-radius:5px;padding:0 4px;font-weight:600}
.cr-mention.me{color:#ffd166;background:rgba(255,209,102,.18)}
.cr-composer{position:relative}
.cr-mentions{position:absolute;left:14px;right:14px;bottom:calc(100% - 6px);z-index:5;display:flex;flex-direction:column;padding:6px;border-radius:12px;background:var(--graphite);border:1px solid var(--line2);box-shadow:0 20px 40px rgba(0,0,0,.6)}
.cr-mention-item{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;text-align:left;color:var(--text);font-size:14px}
.cr-mention-item small{color:var(--dim);font-size:12px;margin-left:auto}
.cr-mention-item:hover,.cr-mention-item.on{background:rgba(255,255,255,.08)}
.q-potato .pf-banner.stars::after,.q-potato .ol-pulse{animation:none}

/* direct messages + friends */
.cr-srv.dm{background:rgba(255,255,255,.08);color:var(--text);position:relative}
.cr-srv.dm svg{color:var(--text)}
.cr-srv.dm.on{background:#c9d4ff}
.cr-srv.dm.on svg{color:#0a0a0c}
.cr-srv-badge{position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ff4d5e;color:#fff;font:700 10px/18px var(--f-mono);text-align:center;border:2px solid #0b0b0e;font-style:normal}
.cr-rail-sep{width:28px;height:2px;border-radius:2px;background:var(--line2);margin:2px 0 6px;flex:none}
.cr-dm-mode .cr-members{display:none!important}
.cr-dm-mode .cr-page{grid-template-columns:64px 232px minmax(0,1fr)}
.cr-dm-mode #cr-members-toggle,.cr-dm-mode .cr-server svg{display:none}
.cr-chan.cr-dmrow{padding:6px 10px}
.cr-chan.cr-dmrow .cr-avatar.sm{width:28px;height:28px;font-size:10px}
.cr-chan .cr-vc-n.hot{background:#ff4d5e;color:#fff;font-weight:700}
.cr-avatar.online::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#5ff0b0;border:2px solid #0b0b0e}
.cr-friends{max-width:720px}
.cr-friends h3{margin-top:18px;font:650 17px/1.3 var(--f-display)}
.cr-friends h4{margin:18px 0 6px;font:600 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.cr-friend{display:flex;align-items:center;gap:12px;padding:10px 8px;border-top:1px solid var(--line)}
.cr-friend:hover{background:rgba(255,255,255,.03)}
.cr-friend-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.cr-friend-txt b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-friend-txt small{font-size:12px;color:var(--dim)}
.cr-friend-acts{display:flex;gap:6px}
.cr-friend-acts .btn{height:32px;padding:0 12px;font-size:13px}
.cr-add-line{display:flex;gap:8px;margin-top:12px;max-width:440px}
.cr-add-line .inp{flex:1}
/* role chips + checklist */
.pf-role-add{width:22px;height:22px;border-radius:6px;border:1px dashed var(--line3);display:inline-grid;place-items:center;color:var(--dim)}
.pf-role-add svg{width:12px;height:12px}
.pf-role-add:hover{color:#fff;border-color:#fff}
.pf-roles-pop{position:fixed;z-index:90;width:240px;max-height:320px;overflow-y:auto;padding:8px;border-radius:12px;background:var(--graphite);border:1px solid var(--line2);box-shadow:0 20px 40px rgba(0,0,0,.6);animation:rise .15s var(--ease-out)}
.pf-roles-title{font:600 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:6px 8px 8px}
.pf-roles-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:14px;cursor:pointer}
.pf-roles-row:hover{background:rgba(255,255,255,.06)}
.pf-roles-row input{width:16px;height:16px;accent-color:#c9d4ff}
.pf-roles-row small{margin-left:auto;font:500 10px/1 var(--f-mono);color:var(--dim);text-transform:uppercase}
.pf-roles-row .ss-dot{width:10px;height:10px}

.cr-chan svg{width:16px;height:16px;flex:none}
.cr-chan.cr-friends-btn svg{width:16px;height:16px;color:var(--dim)}
.cr-chan.cr-friends-btn.on svg{color:#fff}

/* real game covers */
.art .art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .35s ease,transform .45s var(--ease-out)}
.art.has-img .art-img{opacity:1}
.art.has-img::after{inset:55% 0 0;z-index:1;background:linear-gradient(0deg,rgba(7,7,10,.9) 6%,rgba(7,7,10,0))}
.art.has-img .art-tag{display:none}
.art.has-img .art-title{--fs:7.2cqi;bottom:5cqi;left:5.5cqi;right:5.5cqi;text-shadow:0 2px 10px rgba(0,0,0,.6);z-index:2}
.art.has-img.bare::after{display:none}
@media (hover:hover){.card:hover .art.has-img .art-img{transform:scale(1.04)}}
.q-potato .art .art-img{transition:none}

/* ================= chat media: uploads, attachments, spoilers, link previews ================= */
.cr-composer .ai-row{padding-left:5px}
.cr-attach{width:34px;height:34px;margin-bottom:4px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--muted);background:rgba(255,255,255,.07);transition:background .15s ease,color .15s ease}
.cr-attach:hover{background:rgba(255,255,255,.14);color:var(--text)}
.cr-attach svg{width:17px;height:17px}
.cr-pending{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px}
.cr-pchip{position:relative;display:flex;align-items:center;gap:9px;flex:none;width:230px;padding:7px 8px;border-radius:12px;background:rgba(20,20,25,.92);border:1px solid var(--line2);overflow:hidden}
.cr-pchip.bad{border-color:rgba(255,77,94,.55)}
.cr-pchip .th{width:42px;height:42px;border-radius:8px;flex:none;display:grid;place-items:center;overflow:hidden;background:rgba(255,255,255,.06);color:var(--muted)}
.cr-pchip .th img,.cr-pchip .th video{width:100%;height:100%;object-fit:cover}
.cr-pchip .th svg{width:18px;height:18px}
.cr-pchip .tx{flex:1;min-width:0}
.cr-pchip .tx b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-pchip .tx small{font-size:11.5px;color:var(--dim)}
.cr-pchip.bad .tx small{color:var(--danger)}
.cr-pchip .x{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--muted);background:rgba(255,255,255,.07)}
.cr-pchip .x svg{width:12px;height:12px}
.cr-pchip .bar{position:absolute;left:0;bottom:0;height:2px;width:var(--w,0%);background:var(--earthshine);transition:width .2s ease}
.cr-pchip.done .bar{background:var(--signal);opacity:.6}
.chat-view.drop .cr-composer .ai-row,.cr.drop .cr-composer .ai-row{border-color:var(--earthshine);box-shadow:0 0 0 3px rgba(201,212,255,.15)}

.cr-atts{margin-left:41px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.cr-att{position:relative;max-width:min(420px,100%);border-radius:12px;overflow:hidden;background:rgba(20,20,25,.92);border:1px solid var(--line)}
.cr-msg > .cr-att{margin-left:41px}
.cr-att img,.cr-att video{display:block;max-width:100%;max-height:340px;width:auto;height:auto}
.cr-att.k-image,.cr-att.k-gif,.cr-att.k-video{aspect-ratio:var(--ar,auto)}
.cr-att.k-image img,.cr-att.k-gif img,.cr-att.k-gif video,.cr-att.k-video video{width:100%;height:100%;object-fit:contain;background:#000}
.cr-att.k-video video{min-width:240px}
.cr-att.k-sticker{background:none;border:0;max-width:160px}
.cr-att img.click{cursor:zoom-in}
.cr-att.k-audio{width:min(380px,100%);padding:10px 12px 8px}
.cr-att.k-audio audio{width:100%;height:36px;margin-top:6px}
.cr-file{display:flex;align-items:center;gap:10px;min-width:0;color:var(--text);text-decoration:none}
a.cr-file *{text-decoration:none}
a.cr-file{padding:11px 13px;width:min(380px,100%)}
.cr-att.k-file{width:min(380px,100%)}
.cr-file svg{width:20px;height:20px;flex:none;color:var(--earthshine)}
.cr-file .t{flex:1;min-width:0;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-file small{font-size:12px;color:var(--dim);white-space:nowrap}
.cr-file .dl{font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--silver);white-space:nowrap}
a.cr-file:hover .dl{background:rgba(255,255,255,.16)}
/* spoilers (every GIF from Discord): blurred until clicked */
.cr-att.spoiler > :not(.cr-spoiler){filter:blur(28px) brightness(.55);pointer-events:none}
.cr-att.spoiler{min-width:200px;min-height:130px}
.cr-spoiler{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:rgba(10,10,14,.35);cursor:pointer;font:700 12px/1 var(--f-body);letter-spacing:.14em;color:#fff}
.cr-spoiler::before{content:'SPOILER';padding:9px 15px;border-radius:999px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.2);transition:background .15s ease,transform .15s var(--ease-out)}
.cr-spoiler{font-size:0}.cr-spoiler::before{font-size:12px}
.cr-spoiler:hover::before{background:rgba(0,0,0,.9);transform:scale(1.04)}
/* link previews */
.cr-embed-slot{display:none}
.cr-embed{margin-left:41px;max-width:min(460px,100%);padding:10px 12px 12px;border-radius:12px;background:rgba(20,20,25,.92);border:1px solid var(--line);border-left:3px solid var(--earthshine);display:flex;flex-direction:column;gap:6px;min-width:0}
.cr-embed.bare{padding:0;border:0;background:none}
.cr-embed.bare .cr-att{margin:0}
.cr-embed-site{font-size:12px;color:var(--dim)}
.cr-embed-title{font-size:14.5px;font-weight:600;color:var(--earthshine);line-height:1.35;overflow-wrap:anywhere}
.cr-embed-title:hover{text-decoration:underline}
.cr-embed-desc{font-size:13px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cr-embed > img.big{width:100%;max-height:300px;object-fit:cover;border-radius:8px;margin-top:4px}
.cr-embed.side{display:grid;grid-template-columns:minmax(0,1fr) 72px;column-gap:12px}
.cr-embed.side > :not(img){grid-column:1}
.cr-embed.side > img.thumb{grid-column:2;grid-row:1 / span 3;width:72px;height:72px;object-fit:cover;border-radius:8px}
.cr-embed-media{position:relative;width:100%;aspect-ratio:var(--ar,16 / 9);border-radius:8px;overflow:hidden;background:#000;margin-top:4px}
.cr-embed-media img,.cr-embed-media video,.cr-embed-media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.cr-embed-media video{object-fit:contain}
.cr-embed-play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.25);color:#fff;transition:transform .15s var(--ease-out),background .15s ease}
.cr-embed-play:hover{transform:scale(1.07);background:rgba(0,0,0,.8)}
.cr-embed-play svg{width:24px;height:24px;margin-left:3px}
@media (max-width:700px){.cr-atts,.cr-embed,.cr-msg > .cr-att{margin-left:0}}

/* dashboard: colour switch on "People on at once" (macOS-style toggle) + tooltip moves */
.dash-ccu-ctl{display:flex;align-items:center;gap:8px 14px;min-width:0;flex-wrap:wrap;justify-content:flex-end}
.dash-card > header:has(.dash-ccu-ctl){flex-wrap:wrap;align-items:center;row-gap:8px}
.dash-card > header:has(.dash-ccu-ctl) h3{white-space:nowrap}
@media (max-width:640px){.dash-ccu-ctl{width:100%;justify-content:space-between}.dash-ccu-ctl > #dash-ccu-sub{flex-basis:100%}}
.mac-switch-wrap{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink3);cursor:pointer;user-select:none}
.mac-switch{position:relative;width:38px;height:22px;flex:none;border-radius:999px;background:#3a3a3e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background .25s ease;cursor:pointer}
.mac-switch i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.08);transition:transform .25s cubic-bezier(.3,1.4,.5,1),width .15s ease}
.mac-switch:active i{width:22px}
.mac-switch[aria-checked="true"]{background:linear-gradient(90deg,#3fcf8e,#2fb37a)}
.mac-switch[aria-checked="true"] i{transform:translateX(16px)}
.mac-switch[aria-checked="true"]:active i{transform:translateX(12px)}
.mac-switch:focus-visible{outline:2px solid rgba(201,212,255,.6);outline-offset:2px}
.dash-tip b.up{color:#3fcf8e;font-weight:500;margin-left:4px}
.dash-tip b.down{color:#ff5d6c;font-weight:500;margin-left:4px}
.dash-chart canvas#dash-ccu{cursor:crosshair;touch-action:pan-y}
.dash-chart canvas#dash-ccu.grabbing{cursor:grabbing}
.dash-zoom{display:flex;gap:2px;padding:2px;border-radius:9px;background:#1b1b1e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);flex:none}
.dash-zoom button{min-width:26px;height:22px;padding:0 7px;border:0;border-radius:7px;background:transparent;color:var(--ink2);font:600 14px/1 var(--f-body);cursor:pointer;transition:background .15s,color .15s}
.dash-zoom button:hover:not(:disabled){background:#2c2c30;color:var(--ink)}
.dash-zoom button:active:not(:disabled){transform:translateY(1px)}
.dash-zoom button:disabled{opacity:.35;cursor:default}
.dash-zoom #dash-zoom-reset{font-size:11px;font-weight:500}
.dash-zoom button:focus-visible{outline:2px solid rgba(201,212,255,.6);outline-offset:1px}
.dash-ccu-ctl > span{font-size:11.5px;color:var(--ink3);white-space:nowrap}
.dash-table .st.bg i{background:#f0b429;box-shadow:0 0 0 3px rgba(240,180,41,.14)}
.dash-table .st.bg{color:var(--ink2)}