/* base reset */
[hidden]{display:none!important}
body{margin:0}
img{max-width:100%}
/* Layout: one centered profile card floating over a full-bleed effects layer; editor is a right-side drawer (bottom sheet on phones). Single dark look by choice. */
:root{
  color-scheme:dark;
  --bg:#07070c;--text:#f4f1ff;--muted:#9b97b3;--accent:#ff3d71;--accent2:#00e1ff;
  --card:rgba(18,17,28,.55);--line:rgba(255,255,255,.08);--blur:14px;--radius:22px;--bw:1px;
  --width:460px;--scale:1;--shadow:.5;
  --f-body:"Sora",system-ui,sans-serif;--f-name:"Chakra Petch",system-ui,sans-serif;--f-ui:"JetBrains Mono",ui-monospace,monospace;
  --g1:#ff2bd6;--g2:#00e5ff;--gi:6px;--gs:2.5s;
  /* editor chrome */
  --ed-bg:#0e0d15;--ed-panel:#16151f;--ed-line:#2a2838;--ed-text:#e9e6f5;--ed-muted:#8c88a3;--ed-accent:#00e5ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:calc(15px*var(--scale));overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}

/* ---------- background layers ---------- */
#bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
#bg .bgimg{position:absolute;inset:-30px;background-size:cover;background-position:center}
#bg .bgdim{position:absolute;inset:0;background:#000}
#fx{position:absolute;inset:0;width:100%;height:100%}
#bg .grad{position:absolute;inset:0}
#bg .grad.anim{background-size:300% 300%!important;animation:gradmove 14s ease infinite}
@keyframes gradmove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.ov{position:absolute;inset:0;pointer-events:none}
.ov.noise{opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.ov.scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.ov.vig{background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%)}
.ov.crt{animation:flick .15s infinite;background:rgba(255,255,255,.012)}
@keyframes flick{50%{opacity:.4}}

/* ---------- stage + card ---------- */
#stage{position:relative;z-index:2;min-height:100%;display:flex;align-items:center;justify-content:center;padding-inline:16px;padding-block:56px 120px;perspective:1100px}
#card{width:100%;max-width:var(--width);background:var(--card);border:var(--bw) solid var(--line);border-radius:var(--radius);
  backdrop-filter:blur(var(--blur)) saturate(1.2);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.2);
  box-shadow:0 30px 80px rgba(0,0,0,var(--shadow));padding:28px 24px;display:flex;flex-direction:column;gap:18px;
  transform-style:preserve-3d;transition:transform .25s ease-out;position:relative;min-width:0}
#card.align-left{text-align:left}#card.align-center{text-align:center}
#card.align-left .head{align-items:flex-start}#card.align-left .row-wrap{justify-content:flex-start}
#card.burst{animation:cardglitch .35s steps(2) 1}
@keyframes cardglitch{0%{transform:translate(0)}20%{transform:translate(-4px,2px) skewX(4deg);filter:hue-rotate(90deg)}40%{transform:translate(4px,-2px);clip-path:inset(20% 0 30% 0)}60%{transform:translate(-2px,0);clip-path:none}100%{transform:none;filter:none}}
.enter-rise{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.enter-zoom{animation:zoom .7s cubic-bezier(.2,.8,.2,1) both}
.enter-fade{animation:fade .9s ease both}
.enter-flip{animation:flip .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:.0;transform:translateY(30px)}}
@keyframes zoom{from{opacity:0;transform:scale(.9)}}
@keyframes fade{from{opacity:0}}
@keyframes flip{from{opacity:0;transform:rotateX(35deg) translateY(30px)}}

.head{display:flex;flex-direction:column;align-items:center;gap:10px}
.av-wrap{position:relative;display:inline-grid;place-items:center}
.av{width:var(--avs,104px);height:var(--avs,104px);object-fit:cover;display:block;background:linear-gradient(135deg,var(--accent),var(--accent2));position:relative;z-index:1}
.av-fallback{display:grid;place-items:center;font-family:var(--f-name);font-weight:700;font-size:calc(var(--avs,104px)*.38);color:#fff}
.shape-circle{border-radius:50%}.shape-squircle{border-radius:28%}.shape-square{border-radius:10px}
.shape-hex{clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%)}
.ring{position:absolute;inset:-5px;border-radius:inherit;z-index:0}
.ring-solid{border:3px solid var(--accent)}
.ring-spin{background:conic-gradient(var(--accent),var(--accent2),var(--accent));animation:spin 4s linear infinite}
.ring-pulse{box-shadow:0 0 0 0 var(--accent);animation:pulse 2s infinite}
.ring-glow{box-shadow:0 0 28px 6px var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}
.status-dot{position:absolute;right:4px;bottom:4px;width:18px;height:18px;border-radius:50%;border:3px solid var(--bg);z-index:2}
.st-online{background:#3ddc84}.st-idle{background:#f5b83d}.st-dnd{background:#f04747}.st-offline{background:#77738a}

.name{font-family:var(--f-name);font-size:calc(var(--ns,44px)*var(--scale));font-weight:var(--nw,700);line-height:1;margin:4px 0 0;letter-spacing:.01em;position:relative;display:inline-block;text-wrap:balance;max-width:100%;overflow-wrap:anywhere}
.fx-gradient{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-rainbow{background:linear-gradient(90deg,#ff3d3d,#ffb13d,#f9f871,#3ddc84,#3db4ff,#a35dff,#ff3d3d);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rb 3s linear infinite}
@keyframes rb{to{background-position:200% center}}
.fx-neon{color:#fff;text-shadow:0 0 6px var(--accent),0 0 18px var(--accent),0 0 42px var(--accent)}
.fx-shine{background:linear-gradient(110deg,var(--text) 40%,#fff 50%,var(--text) 60%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rb 2.5s linear infinite}
.fx-outline{color:transparent;-webkit-text-stroke:1.5px var(--accent)}
.fx-flicker{animation:nflick 3s infinite;color:var(--accent);text-shadow:0 0 12px var(--accent)}
@keyframes nflick{0%,19%,21%,60%,62%,100%{opacity:1}20%,61%{opacity:.3}}

/* glitch */
.glitch{position:relative}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;background:inherit;-webkit-background-clip:inherit;background-clip:inherit;pointer-events:none}
.g-split::before{color:var(--g1);-webkit-text-fill-color:var(--g1);left:calc(var(--gi)*-1*.5);text-shadow:none;mix-blend-mode:screen;animation:gsplit var(--gs) infinite steps(1)}
.g-split::after{color:var(--g2);-webkit-text-fill-color:var(--g2);left:calc(var(--gi)*.5);mix-blend-mode:screen;animation:gsplit var(--gs) infinite steps(1) reverse}
@keyframes gsplit{0%{clip-path:inset(10% 0 80% 0)}10%{clip-path:inset(60% 0 10% 0);transform:translateX(calc(var(--gi)*-1))}20%{clip-path:inset(30% 0 40% 0)}30%{clip-path:inset(80% 0 5% 0);transform:translateX(var(--gi))}40%{clip-path:inset(0 0 100% 0)}70%{clip-path:inset(45% 0 35% 0);transform:translateX(calc(var(--gi)*-.5))}80%,100%{clip-path:inset(0 0 100% 0)}}
.g-slice{animation:gslice var(--gs) infinite steps(1)}
.g-slice::before{-webkit-text-fill-color:var(--g1);color:var(--g1);animation:gslice2 var(--gs) infinite steps(1)}
.g-slice::after{display:none}
@keyframes gslice{0%,100%{transform:none}92%{transform:skewX(calc(var(--gi)*3deg))}94%{transform:translateX(var(--gi))}96%{transform:skewX(calc(var(--gi)*-2deg))}}
@keyframes gslice2{0%,88%{clip-path:inset(0 0 100% 0)}90%{clip-path:inset(40% 0 40% 0);transform:translateX(calc(var(--gi)*2))}94%{clip-path:inset(70% 0 10% 0);transform:translateX(calc(var(--gi)*-2))}}
.g-shake{animation:gshake var(--gs) infinite}
.g-shake::before,.g-shake::after{display:none}
@keyframes gshake{0%,90%,100%{transform:none}91%{transform:translate(var(--gi),calc(var(--gi)*-.5))}93%{transform:translate(calc(var(--gi)*-1),var(--gi))}95%{transform:translate(calc(var(--gi)*.5),0)}97%{transform:translate(0,calc(var(--gi)*-.5))}}
.g-chroma{text-shadow:calc(var(--gi)*.4) 0 var(--g1),calc(var(--gi)*-.4) 0 var(--g2);animation:gchroma var(--gs) infinite}
.g-chroma::before,.g-chroma::after{display:none}
@keyframes gchroma{50%{text-shadow:calc(var(--gi)*-.6) 0 var(--g1),calc(var(--gi)*.6) 0 var(--g2)}}
.g-hover:not(:hover)::before,.g-hover:not(:hover)::after{animation:none;display:none}
.g-hover:not(:hover){animation:none;text-shadow:none}

.handle{font-family:var(--f-ui);font-size:.85em;color:var(--muted)}
.typer{font-family:var(--f-ui);font-size:.9em;color:var(--accent2);min-height:1.4em}
.typer .caret{display:inline-block;width:.55em;height:1.05em;background:currentColor;vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.bio{white-space:pre-line;color:var(--text);opacity:.88;line-height:1.6;max-width:65ch;margin:0 auto;overflow-wrap:anywhere}
.row-wrap{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.78em;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.meta{font-family:var(--f-ui);font-size:.78em;color:var(--muted);display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.statusline{font-size:.82em;color:var(--muted)}

.sec-title{font-family:var(--f-ui);font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px;text-align:left}
.links{display:grid;gap:10px}
.links.l-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.links.l-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.links.l-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lnk{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:calc(var(--radius)*.6);text-decoration:none;color:var(--text);text-align:left;min-width:0;position:relative;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;border:1px solid var(--line)}
.lnk .ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:1.05em;background:rgba(255,255,255,.08)}
.lnk .tx{min-width:0;flex:1}
.lnk .lb{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnk .ds{display:block;font-size:.8em;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnk .ar{opacity:.5;font-family:var(--f-ui)}
.lnk.feat{border-color:var(--accent)}
.lnk.feat::after{content:"FEATURED";position:absolute;top:-8px;right:10px;font-family:var(--f-ui);font-size:.58em;letter-spacing:.1em;padding:2px 6px;border-radius:4px;background:var(--accent);color:#fff}
.l-pills .lnk{padding:8px 14px;border-radius:999px}.l-pills .ic{width:22px;height:22px;font-size:.85em;border-radius:50%}.l-pills .ds,.l-pills .ar{display:none}
.l-icons .lnk{padding:0;border:none;background:none!important;box-shadow:none!important}.l-icons .tx,.l-icons .ar{display:none}.l-icons .ic{width:48px;height:48px;font-size:1.3em;border-radius:14px}
.s-glass{background:rgba(255,255,255,.05)}
.s-solid{background:var(--accent);border-color:transparent;color:#fff}.s-solid .ds{color:rgba(255,255,255,.75)}
.s-outline{background:transparent;border:1.5px solid var(--accent)}
.s-brutal{background:var(--text);color:var(--bg);border:2px solid var(--text);box-shadow:5px 5px 0 var(--accent);border-radius:6px}.s-brutal .ds{color:var(--bg);opacity:.7}
.s-neon{background:rgba(0,0,0,.35);border-color:var(--accent2);box-shadow:0 0 12px -2px var(--accent2),inset 0 0 12px -6px var(--accent2)}
.s-gradient{background:linear-gradient(120deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}.s-gradient .ds{color:rgba(255,255,255,.8)}
.h-lift:hover{transform:translateY(-3px)}
.h-glow:hover{box-shadow:0 0 24px -4px var(--accent)}
.h-slide:hover{transform:translateX(6px)}
.h-grow:hover{transform:scale(1.035)}
.h-shake:hover{animation:gshake .5s 1;--gi:3px}
.h-glitch:hover{animation:cardglitch .3s steps(2) 1}
.lnk:active{transform:scale(.98)}
.cp{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:calc(var(--radius)*.6);background:rgba(255,255,255,.04);border:1px dashed var(--line);min-width:0}
.cp .tx{min-width:0;text-align:left}.cp code{font-family:var(--f-ui);overflow-wrap:anywhere;user-select:all}
.cp button,.chip-btn{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:.8em;flex:none}
.skill{font-family:var(--f-ui);font-size:.78em;padding:5px 10px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.foot{font-family:var(--f-ui);font-size:.72em;color:var(--muted);text-align:center;white-space:pre-line}

/* ---------- enter screen ---------- */
#enter{position:fixed;inset:0;z-index:20;display:grid;place-items:center;cursor:pointer;background:rgba(5,5,10,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:opacity .6s,visibility .6s;text-align:center;padding:16px}
#enter.gone{opacity:0;visibility:hidden}
#enter .t{font-family:var(--f-name);font-size:clamp(20px,5vw,34px);letter-spacing:.08em;animation:nflick 4s infinite}
#enter .s{font-family:var(--f-ui);font-size:12px;color:var(--muted);margin-top:10px}
#enter.e-dark{background:#000;backdrop-filter:none}
#enter.e-clear{background:transparent;backdrop-filter:none}

/* ---------- music ---------- */
#viz{position:fixed;left:0;right:0;bottom:0;height:120px;width:100%;z-index:1;pointer-events:none}

/* ---------- cursor ---------- */
.cur-hide,.cur-hide *{cursor:none!important}
/* the Control Deck and dashboard bar always keep a normal mouse */
.cur-hide #ed,.cur-hide #ed *,.cur-hide #dash-bar,.cur-hide #dash-bar *,.cur-hide #gear{cursor:auto!important}
.cur-hide #ed button,.cur-hide #ed select,.cur-hide #ed label.file,.cur-hide #ed input[type=checkbox],.cur-hide #dash-bar button,.cur-hide #dash-bar a,.cur-hide #gear{cursor:pointer!important}
#cdot,#cring{position:fixed;left:0;top:0;pointer-events:none;z-index:50;border-radius:50%;transform:translate(-50%,-50%)}
#cdot{width:6px;height:6px;background:var(--cc,#fff)}
#cring{width:30px;height:30px;border:1.5px solid var(--cc,#fff);transition:width .15s,height .15s}
#ctrail{position:fixed;inset:0;pointer-events:none;z-index:49;width:100%;height:100%}

/* ---------- owner gear ---------- */
#gear{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:30;display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--ed-accent);color:#fff;border:none;cursor:pointer;font-family:var(--f-ui);font-size:12px;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.4)}
#toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:60;background:#111;color:#fff;border:1px solid #333;padding:9px 14px;border-radius:10px;font-family:var(--f-ui);font-size:12px;max-width:calc(100% - 32px)}

@media (max-width:480px){#card{padding:22px 16px}.links.l-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition:none!important}}
/* ---------- HUD frame (default futuristic look) ---------- */
#card.frame-hud{border-radius:4px;clip-path:polygon(0 18px,18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px));padding-top:16px}
#card.frame-hud::before,#card.frame-hud::after{content:"";position:absolute;width:44px;height:44px;pointer-events:none;border:2px solid var(--accent)}
#card.frame-hud::before{top:6px;left:6px;border-right:none;border-bottom:none;clip-path:polygon(0 0,100% 0,100% 2px,2px 2px,2px 100%,0 100%)}
#card.frame-hud::after{bottom:6px;right:6px;border-left:none;border-top:none}
.hud-bar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:var(--f-ui);font-size:.66em;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line)}
.hud-bar b{color:var(--accent);font-weight:400}
.hud-bar.bot{border-bottom:none;border-top:1px solid var(--line);padding:10px 0 0}
.hud-blink{animation:blink 1.2s steps(1) infinite}
.scanline{position:absolute;left:0;right:0;height:60px;top:-60px;pointer-events:none;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 14%,transparent),transparent);animation:scan 5s linear infinite;z-index:0}
@keyframes scan{to{top:100%}}
#card > *{position:relative;z-index:1}
#card .scanline{position:absolute}
.frame-hud .av-wrap::after{content:"";position:absolute;inset:-14px;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:50%;animation:spin 18s linear infinite;pointer-events:none}
.frame-hud .name{letter-spacing:.06em;text-transform:uppercase}
.frame-hud .sec-title::before{content:"// ";color:var(--accent)}
.frame-hud .badge,.frame-hud .skill{border-radius:2px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.frame-line{border-radius:var(--radius)}

/* HUD link style */
.s-hud{background:color-mix(in srgb,var(--accent) 6%,transparent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:2px!important;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);overflow:hidden}
.s-hud::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--accent) 30%,transparent) 50%,transparent 70%);transform:translateX(-120%);transition:transform .5s}
.s-hud:hover::before{transform:translateX(120%)}
.s-hud:hover{border-color:var(--accent);box-shadow:0 0 18px -6px var(--accent)}
.s-hud .ic{border-radius:2px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.s-hud .ar{color:var(--accent);opacity:1}
.lnk .ic svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lnk .ic img{width:100%;height:100%;object-fit:contain;padding:5px}
.lnk .ic.has-img{background:rgba(255,255,255,.92)!important}
.lnk .ic.has-img.clear{background:transparent!important}
.lnk.feat::after{border-radius:2px}

/* boot enter screen */
#enter.e-boot{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.boot{font-family:var(--f-ui);font-size:13px;color:var(--muted);text-align:left;min-height:7.5em;margin-bottom:18px;white-space:pre-line;line-height:1.6;max-width:min(420px,100%)}
.boot em{color:var(--accent);font-style:normal}
#enter .t{color:var(--text)}
#enter.e-boot .t{border:1px solid var(--accent);padding:12px 22px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);color:var(--accent);font-size:clamp(15px,3.6vw,20px);text-shadow:0 0 12px var(--accent);animation:none}
#enter.e-boot .t:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}

/* player in HUD */

/* ---------- banner, gallery, blocks, lightbox, bg video ---------- */
#card{--cpx:24px;padding-inline:var(--cpx)}
#card.has-banner{padding-top:0}
.banner{margin-inline:calc(var(--cpx)*-1);height:var(--bh,150px);background-size:cover;background-position:center;position:relative;flex:none}
.banner.fade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--card-solid,rgba(0,0,0,.6)))}
.has-banner .hud-bar{margin-top:-6px}
.has-banner.ov-avatar .head{margin-top:calc(var(--avs,104px)*-.55)}
.gal{display:grid;gap:8px;grid-template-columns:repeat(var(--gcols,3),minmax(0,1fr))}
.gal button{padding:0;border:1px solid var(--line);background:none;cursor:zoom-in;aspect-ratio:1;overflow:hidden;border-radius:calc(var(--radius)*.4);position:relative}
.frame-hud .gal button{border-radius:2px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.gal button:hover img{transform:scale(1.08)}
.gal.wide button{aspect-ratio:16/10}
.blk{text-align:left;padding:14px 16px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:calc(var(--radius)*.5)}
.frame-hud .blk{border-radius:2px;border-left:2px solid var(--accent)}
.blk h3{margin:0 0 6px;font-family:var(--f-name);font-size:1em;letter-spacing:.04em}
.blk p{margin:0;white-space:pre-line;line-height:1.6;color:var(--text);opacity:.85;overflow-wrap:anywhere}
#lb{position:fixed;inset:0;z-index:70;background:rgba(2,4,8,.92);display:grid;place-items:center;padding:16px;cursor:zoom-out}
#lb img{max-width:min(1100px,100%);max-height:80vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6)}
#lb figcaption{font-family:var(--f-ui);font-size:12px;color:#c9d4e0;text-align:center;margin-top:12px}
#lb .nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;cursor:pointer;font-size:18px}
#lb .nav.prev{left:12px}#lb .nav.next{right:12px}
#bg .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#bg .bgimg{transition:opacity .9s ease}
#bg .bgimg.out{opacity:0}
.sizebar{width:100%;font-size:11px;color:var(--ed-muted);display:flex;align-items:center;gap:8px}
.sizebar i{flex:1;height:4px;background:#14263a;position:relative;display:block}
.sizebar i b{position:absolute;inset:0 auto 0 0;background:var(--ed-accent);display:block}
.sizebar.warn i b{background:#ffb13d}
.imgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.imgs .it{position:relative;aspect-ratio:1;border:1px solid #1a2c40;overflow:hidden}
.imgs .it img{width:100%;height:100%;object-fit:cover;display:block}
.imgs .it button{position:absolute;top:2px;right:2px;width:22px;height:22px;padding:0;border:none;background:rgba(0,0,0,.7);color:#fff;font-size:12px}
.imgs .it button.l{right:auto;left:2px}
.imgs .it input{position:absolute;left:0;right:0;bottom:0;width:100%;font-size:10px;padding:2px 4px;border:none;background:rgba(0,0,0,.7);color:#fff}
@media (max-width:480px){#card{--cpx:16px}.gal{--gcols:2!important}}
/* ---------- music player ---------- */
#player{--mp-cover:64px;display:flex;flex-direction:column;gap:10px;color:var(--text);font-family:var(--f-body);text-align:left;min-width:0}
#player .mp{display:flex;gap:14px;align-items:center;min-width:0}
#player svg{width:18px;height:18px;fill:currentColor}
#player button{background:none;border:none;color:inherit;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:50%;opacity:.85;transition:opacity .15s,background .15s,color .15s}
#player button:hover{opacity:1;background:rgba(255,255,255,.08)}
#player button.on{color:var(--accent);opacity:1}
#player button.mp-play{width:44px;height:44px;background:var(--accent);color:var(--bg);opacity:1}
#player button.mp-play svg{width:20px;height:20px}
#player button.mp-play:hover{filter:brightness(1.15);background:var(--accent)}
.mp-cover{width:var(--mp-cover);height:var(--mp-cover);flex:none;position:relative;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--bg);font-size:calc(var(--mp-cover)*.4);overflow:hidden;border-radius:10px}
.mp-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cv-circle .mp-cover{border-radius:50%}
.cv-vinyl .mp-cover{border-radius:50%;box-shadow:0 0 0 calc(var(--mp-cover)*.06) #0a0a0a,0 0 0 calc(var(--mp-cover)*.075) rgba(255,255,255,.12);animation:spin 6s linear infinite;animation-play-state:paused}
.cv-vinyl .mp-cover::after{content:"";position:absolute;width:16%;height:16%;border-radius:50%;background:#0a0a0a;box-shadow:0 0 0 2px rgba(255,255,255,.25);z-index:1}
.cv-vinyl.playing .mp-cover{animation-play-state:running}
.mp-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.mp-label{font-family:var(--f-ui);font-size:.66em;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.mp-label i{display:inline-flex;gap:2px;align-items:flex-end;height:9px;margin-right:6px;vertical-align:-1px}
.mp-label i b{width:2px;background:currentColor;height:30%;animation:eq .9s ease-in-out infinite;animation-play-state:paused}
.mp-label i b:nth-child(2){animation-delay:-.3s}.mp-label i b:nth-child(3){animation-delay:-.6s}
.playing .mp-label i b{animation-play-state:running}
@keyframes eq{50%{height:100%}}
.mp-title{font-weight:700;white-space:nowrap;overflow:hidden;min-width:0}
.mp-title span{display:inline-block}
.mp-title.scroll span{animation:marq 12s linear infinite;padding-left:100%}
@keyframes marq{to{transform:translateX(-100%)}}
.mp-artist{font-size:.85em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-seek{display:flex;align-items:center;gap:8px;font-family:var(--f-ui);font-size:.7em;color:var(--muted);font-variant-numeric:tabular-nums}
.mp-range{flex:1;min-width:0;height:18px;accent-color:var(--accent);cursor:pointer;margin:0}
.mp-ctrls{display:flex;align-items:center;justify-content:space-between;gap:4px;flex-wrap:wrap}
.mp-ctrls .grp{display:flex;align-items:center;gap:2px}
.mp-vol{width:80px;accent-color:var(--accent);cursor:pointer}
.mp-queue{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;border-top:1px solid var(--line);padding-top:8px}
.mp-queue button{width:100%!important;height:auto!important;border-radius:6px!important;display:flex!important;align-items:center;gap:10px;padding:6px 8px!important;text-align:left;font-size:.85em}
.mp-queue button.cur{color:var(--accent)}
.mp-queue img,.mp-queue .qn{width:30px;height:30px;object-fit:cover;flex:none;border-radius:4px;display:grid;place-items:center;background:rgba(255,255,255,.06);font-family:var(--f-ui);font-size:.8em}
.mp-queue .qt{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-queue .qa{color:var(--muted);font-size:.85em}

/* placement styles */
#player.p-card{padding:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:calc(var(--radius)*.6)}
#player.p-card{--mp-cover:76px}
#player.p-big .mp{flex-direction:column;align-items:stretch;text-align:center}
#player.p-big{--mp-cover:180px;padding:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);border-radius:calc(var(--radius)*.6)}
#player.p-big .mp-cover{align-self:center}
#player.p-big .mp-main{text-align:center}
#player.p-big .mp-ctrls{justify-content:center}
#player.p-bar,#player.p-mini,#player.p-corner{position:fixed;z-index:10;background:var(--card-solid);border:1px solid var(--line);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));box-shadow:0 14px 40px rgba(0,0,0,.45)}
#player.p-bar{left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(560px,calc(100% - 32px));padding:10px 12px;border-radius:14px;--mp-cover:54px}
#player.p-mini{left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:6px 10px 6px 6px;border-radius:999px;--mp-cover:38px;max-width:calc(100% - 32px)}
#player.p-corner{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));padding:8px;border-radius:14px;--mp-cover:46px;max-width:calc(100% - 32px)}
#player.p-mini .mp-seek,#player.p-mini .mp-label,#player.p-mini .mp-ctrls .x,#player.p-corner .mp-seek,#player.p-corner .mp-label,#player.p-corner .mp-artist,#player.p-corner .mp-ctrls .x{display:none}
#player.p-mini .mp-main{flex-direction:row;align-items:center;gap:8px}
#player.p-mini .mp-title{max-width:140px;font-size:.85em}
#player.p-mini .mp-artist{display:none}
#player.p-corner .mp-title{max-width:120px;font-size:.8em}
#player.p-mini .mp-queue,#player.p-corner .mp-queue{position:absolute;bottom:calc(100% + 8px);right:0;width:min(300px,calc(100vw - 32px));background:var(--card-solid);border:1px solid var(--line);border-radius:10px;padding:8px}
.frame-hud #player.p-card,.frame-hud #player.p-big,.hudp#player{border-radius:2px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.hudp .mp-cover{border-radius:2px}
.hudp.cv-circle .mp-cover,.hudp.cv-vinyl .mp-cover{border-radius:50%}
@media (max-width:480px){.mp-vol{width:56px}#player.p-big{--mp-cover:150px}}
#credit{position:fixed;z-index:9;font-family:var(--f-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);pointer-events:none;padding:8px 14px}
#credit.cr-bottom-left{left:0;bottom:env(safe-area-inset-bottom,0px)}
#credit.cr-bottom-right{right:0;bottom:env(safe-area-inset-bottom,0px)}
#credit.cr-top-left{left:0;top:env(safe-area-inset-top,0px)}
#credit.cr-bottom-center{left:50%;transform:translateX(-50%);bottom:env(safe-area-inset-bottom,0px);white-space:nowrap}
/* ---------- avatar: ring always follows the picture's shape ---------- */
.av-wrap{--rc:var(--accent);--rc2:var(--accent2);--rs:3px;--rg:22px}
.ring.shape-circle{border-radius:50%}.ring.shape-squircle{border-radius:28%}.ring.shape-square{border-radius:12px}
.ring{inset:calc(var(--rs)*-1 - 2px)}
.ring-solid{border:var(--rs) solid var(--rc)}
.ring-double{border:calc(var(--rs) + 3px) double var(--rc);inset:calc(var(--rs)*-1 - 6px)}
.ring-dashed{border:var(--rs) dashed var(--rc);animation:spin 14s linear infinite}
.ring-spin{background:conic-gradient(var(--rc),var(--rc2),var(--rc))}
.ring-rainbow{background:conic-gradient(#ff3d3d,#ffb13d,#f9f871,#3ddc84,#3db4ff,#a35dff,#ff3d3d);animation:spin 3s linear infinite}
.ring-pulse{box-shadow:0 0 0 0 var(--rc)}
.ring-glow{box-shadow:0 0 var(--rg) calc(var(--rg)*.25) var(--rc)}
.ring-neon{border:var(--rs) solid var(--rc);box-shadow:0 0 var(--rg) var(--rc),inset 0 0 calc(var(--rg)*.5) var(--rc)}
/* hex can't use borders or shadows, so it uses a blurred hex-shaped backing instead */
.ring.shape-hex{border:none;box-shadow:none;background:var(--rc)}
.ring.shape-hex.ring-spin{background:conic-gradient(var(--rc),var(--rc2),var(--rc))}
.ring.shape-hex.ring-rainbow{background:conic-gradient(#ff3d3d,#ffb13d,#f9f871,#3ddc84,#3db4ff,#a35dff,#ff3d3d)}
.ring.shape-hex.ring-glow,.ring.shape-hex.ring-neon{filter:blur(calc(var(--rg)*.4))}
.ring.shape-hex.ring-pulse{animation:hexpulse 2s infinite}
@keyframes hexpulse{50%{transform:scale(1.1);opacity:.4}}
.ring.shape-hex.ring-dashed,.ring.shape-hex.ring-double{background:linear-gradient(var(--rc),var(--rc2))}
/* HUD orbit matches the avatar shape */
.frame-hud .av-wrap.aw-circle::after{border-radius:50%}
.frame-hud .av-wrap.aw-squircle::after{border-radius:32%;animation:none}
.frame-hud .av-wrap.aw-square::after{border-radius:16px;animation:none}
.frame-hud .av-wrap.aw-hex::after{display:none}
.av-wrap.no-orbit::after{display:none}
.status-dot.sd-squircle{right:2px;bottom:2px}.status-dot.sd-square{right:-3px;bottom:-3px}.status-dot.sd-hex{right:10%;bottom:4%}
/* hover effects */
.av{transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .3s}
.avh-zoom:hover .av{transform:scale(1.08)}
.avh-spin:hover .av{transform:rotate(360deg);transition-duration:.8s}
.avh-tilt:hover .av{transform:rotate(-8deg) scale(1.04)}
.avh-glitch:hover .av{animation:cardglitch .35s steps(2) 2}
.avh-bright:hover .av{filter:brightness(1.25) saturate(1.3)}
.decor{position:absolute;inset:-20%;width:140%;height:140%;max-width:none;object-fit:contain;z-index:3;pointer-events:none}

/* staggered link entrance */
.stagger .lnk{animation:lrise .55s calc(var(--i,0)*70ms) cubic-bezier(.2,.8,.2,1) backwards}
@keyframes lrise{from{opacity:0;transform:translateX(-14px)}}


/* ---------- server additions ---------- */
#owner-edit{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:30;padding:9px 14px;font-family:var(--f-ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,#05080d);border:1px solid var(--accent);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.views{white-space:nowrap}

/* ---------- social icons ---------- */
.soc{display:flex;flex-wrap:wrap;gap:10px}
.so{--sc:var(--accent);width:var(--ss,44px);height:var(--ss,44px);display:grid;place-items:center;border-radius:50%;text-decoration:none;color:var(--sc);background:color-mix(in srgb,var(--sc) 16%,transparent);border:1px solid color-mix(in srgb,var(--sc) 50%,transparent);transition:transform .18s,box-shadow .18s,background .18s}
.so:hover{transform:translateY(-3px);box-shadow:0 0 20px -4px var(--sc);background:color-mix(in srgb,var(--sc) 28%,transparent)}
.so svg{width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.so img{width:56%;height:56%;object-fit:contain;max-width:none}
.soc-mono .so{--sc:var(--accent)!important}
.soc-square .so{border-radius:24%}
.soc-hud .so{border-radius:2px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.soc-pill .so,.soc-lab .so{width:auto;display:flex;gap:8px;padding:0 14px 0 12px;border-radius:999px}
.soc-hud.soc-lab .so{border-radius:2px}
.soc-lab .so svg,.soc-lab .so img,.soc-pill .so svg,.soc-pill .so img{width:calc(var(--ss,44px)*.46);height:calc(var(--ss,44px)*.46)}
.so span{color:var(--text);font-weight:600;font-size:.86em;white-space:nowrap}

/* ---------- role badges on the card (server decides who gets them) ---------- */
.rolebadges{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.align-left .rolebadges{justify-content:flex-start}
.rb{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 8px;font:700 10.5px/1 "Share Tech Mono",ui-monospace,monospace;letter-spacing:.16em;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);user-select:none}
.rb svg{width:14px;height:14px;flex:none}
.rb::after{content:"";position:absolute;inset:0;transform:translateX(-120%);animation:rbsweep 4s ease-in-out infinite}
@keyframes rbsweep{60%,100%{transform:translateX(120%)}}
.rb-staff{color:#ff3b4e;background:rgba(40,4,8,.82);border:1px solid rgba(255,59,78,.75);box-shadow:0 0 16px -4px rgba(255,59,78,.9),inset 0 0 10px -6px rgba(255,59,78,.9);text-shadow:0 0 8px rgba(255,59,78,.8)}
.rb-staff svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rb-staff::after{background:linear-gradient(100deg,transparent 30%,rgba(255,80,96,.35) 50%,transparent 70%)}
.rb-donor{color:#ffcc33;background:rgba(40,28,4,.82);border:1px solid rgba(255,204,51,.75);box-shadow:0 0 16px -4px rgba(255,204,51,.85),inset 0 0 10px -6px rgba(255,204,51,.9);text-shadow:0 0 8px rgba(255,204,51,.7)}
.rb-donor svg{fill:currentColor}
.rb-donor::after{background:linear-gradient(100deg,transparent 30%,rgba(255,230,140,.35) 50%,transparent 70%);animation-delay:2s}
@media (prefers-reduced-motion:reduce){.rb::after{display:none}}

.rb-sup{color:#c79bff;background:rgba(26,10,44,.82);border:1px solid rgba(176,107,255,.75);box-shadow:0 0 16px -4px rgba(176,107,255,.85),inset 0 0 12px -6px rgba(176,107,255,.8)}
.rb-sup svg{fill:currentColor;stroke:none}
.rb-sup::after{background:linear-gradient(100deg,transparent 30%,rgba(214,180,255,.35) 50%,transparent 70%);animation-delay:3s}
.rb-bug{color:#4ff0a4;background:rgba(4,30,20,.82);border:1px solid rgba(61,220,151,.75);box-shadow:0 0 16px -4px rgba(61,220,151,.85),inset 0 0 12px -6px rgba(61,220,151,.8)}
.rb-bug svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.rb-bug::after{background:linear-gradient(100deg,transparent 30%,rgba(170,255,215,.35) 50%,transparent 70%);animation-delay:4s}
.rolebadges{flex-wrap:wrap}
/* follower count */
.fcount b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.fc-under{margin-top:8px;font-family:var(--f-ui);font-size:.8em;color:var(--muted);letter-spacing:.04em}
.fc-under .fcount{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:20px;background:color-mix(in srgb,var(--accent) 8%,transparent)}
/* small link back to the site's home page, top-left of every member page */
#home-link{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:12px;z-index:30;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-family:var(--f-ui);font-size:11px;letter-spacing:.12em;text-transform:lowercase;color:var(--text);text-decoration:none;opacity:.45;border-radius:14px;background:color-mix(in srgb,var(--bg) 45%,transparent);transition:opacity .2s,background .2s}
#home-link svg{width:14px;height:14px;color:var(--accent)}
#home-link:hover,#home-link:focus-visible{opacity:1;background:color-mix(in srgb,var(--bg) 80%,transparent)}
#enter:not(.gone) ~ #home-link{opacity:0;pointer-events:none}
body[data-mode="edit"] #home-link{display:none}
body:has(#home-link) #credit.cr-top-left{top:calc(40px + env(safe-area-inset-top,0px))}
.hud-bar>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-bar>span+span{flex:none}
.hud-bar:not(.bot){flex-wrap:nowrap}
/* ♥ donator perks */
.fx-holo{background:linear-gradient(115deg,#ff9de2,#a0f0ff,#c3ffb0,#fff3a0,#d6a8ff,#ff9de2);background-size:300% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rb 5s linear infinite;filter:drop-shadow(0 0 10px rgba(160,240,255,.35))}
.fx-gold{background:linear-gradient(180deg,#fffbe0 0%,#ffe27a 30%,#d9a21b 52%,#fff0b3 70%,#b8860b 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(255,200,60,.4))}
.fx-chrome{background:linear-gradient(180deg,#ffffff 0%,#dfe7ef 38%,#5b6a79 50%,#eef3f8 62%,#9aa8b6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.ring-gold{background:conic-gradient(#fff3b0,#ffcc33,#b8860b,#ffe082,#fff3b0);animation:spin 5s linear infinite;box-shadow:0 0 var(--rg,22px) rgba(255,204,51,.55)}
.ring-aurora{background:conic-gradient(#00ffa3,#00c2ff,#a35dff,#ff4fd8,#00ffa3);animation:spin 6s linear infinite;box-shadow:0 0 var(--rg,22px) rgba(0,194,255,.45)}
/* live Discord status */
.presence{display:flex;align-items:center;gap:12px;margin:12px auto 0;padding:10px 14px;max-width:100%;width:fit-content;min-width:min(280px,100%);text-align:left;border:1px solid var(--line);border-radius:calc(var(--radius)*.7);background:color-mix(in srgb,var(--accent) 5%,transparent);font-size:.86em}
.pr-dot{flex:none;width:11px;height:11px;border-radius:50%;background:#747f8d;box-shadow:0 0 0 3px color-mix(in srgb,#747f8d 25%,transparent)}
.st-online .pr-dot{background:#23a55a;box-shadow:0 0 0 3px rgba(35,165,90,.25),0 0 10px #23a55a}
.st-idle .pr-dot{background:#f0b232;box-shadow:0 0 0 3px rgba(240,178,50,.25)}
.st-dnd .pr-dot{background:#f23f43;box-shadow:0 0 0 3px rgba(242,63,67,.25)}
.pr-art{flex:none;width:44px;height:44px;border-radius:6px;object-fit:cover;order:-1}
.presence:has(.pr-art) .pr-dot{position:absolute;opacity:0}
.pr-main{display:flex;flex-direction:column;min-width:0;gap:2px;flex:1}
.pr-l1{font-family:var(--f-ui);font-size:.82em;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-l2{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-bar{display:block;height:3px;margin-top:4px;border-radius:2px;background:color-mix(in srgb,var(--text) 15%,transparent);position:relative;overflow:hidden}
.pr-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:#1ed760}
/* Clan badge: the clan's own color, icon and tag */
.rb-clan{--cc:#00e5ff;color:var(--cc);text-decoration:none;text-transform:uppercase;background:color-mix(in srgb,var(--cc) 12%,rgba(4,10,16,.86));border:1px solid color-mix(in srgb,var(--cc) 75%,transparent);box-shadow:0 0 16px -4px color-mix(in srgb,var(--cc) 85%,transparent),inset 0 0 12px -6px var(--cc);text-shadow:0 0 8px color-mix(in srgb,var(--cc) 70%,transparent);transition:filter .15s}
.rb-clan:hover{filter:brightness(1.2)}
.rb-clan::after{background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--cc) 35%,transparent) 50%,transparent 70%);animation-delay:1s}
.rb-clan img{width:15px;height:15px;object-fit:cover;border-radius:3px;flex:none}
.rb-clan i{font-style:normal;font-size:13px;line-height:1;text-shadow:none}
.rb-clan b{padding:2px 5px;margin-right:1px;color:#04080c;background:var(--cc);text-shadow:none;letter-spacing:.12em}
/* Gradient card border: a ring drawn inside the card's edge (works with every frame and corner radius) */
@property --gspin{syntax:'<angle>';inherits:false;initial-value:0deg}
#card > .gb{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:var(--gw,2px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#card > .gb-linear{background:linear-gradient(calc(var(--gang,135deg) + var(--gspin)),var(--gcols,#00e5ff,#ff4fd8))}
#card > .gb-conic{background:conic-gradient(from calc(var(--gang,0deg) + var(--gspin)),var(--gcols,#00e5ff,#ff4fd8,#00e5ff))}
#card > .gs-slow{animation:gbspin 12s linear infinite}#card > .gs-medium{animation:gbspin 6s linear infinite}#card > .gs-fast{animation:gbspin 2.5s linear infinite}
@keyframes gbspin{to{--gspin:360deg}}
@media (prefers-reduced-motion:reduce){#card > .gb{animation:none}}
/* Report flag: faint, top-right on other people's pages */
#report-link{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;z-index:30;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--text);opacity:.35;background:color-mix(in srgb,var(--bg) 45%,transparent);transition:opacity .15s,background .15s,color .15s}
#report-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#report-link:hover,#report-link:focus-visible{opacity:1;color:#ff8a96;background:color-mix(in srgb,var(--bg) 80%,transparent)}
#report-link.done{color:#3ddc97;opacity:.6}
#enter:not(.gone) ~ #report-link{opacity:0;pointer-events:none}
body[data-mode="edit"] #report-link{display:none}
body:has(#report-link) #credit.cr-top-right{top:calc(48px + env(safe-area-inset-top,0px))}
/* The custom cursor (and its trail) always sit above pop-ups, menus and the Control Deck, so it never disappears */
#cdot,#cring{z-index:2147483646}
#ctrail{z-index:2147483645}
/* ★ Supporter perks */
.fx-amethyst{background:linear-gradient(120deg,#5b2a9e,#b07bff 25%,#f4e8ff 40%,#9d5cff 55%,#4a1f8a 75%,#c79bff);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rb 6s linear infinite;filter:drop-shadow(0 0 12px rgba(176,107,255,.5))}
.ring-nebula{background:conic-gradient(#3b0a6b,#b06bff,#ff7ad9,#6fb6ff,#3b0a6b);animation:spin 7s linear infinite,nebpulse 3s ease-in-out infinite;box-shadow:0 0 var(--rg,22px) rgba(176,107,255,.6)}
@keyframes nebpulse{50%{filter:brightness(1.35) saturate(1.2)}}
/* ⚑ Bug Finder perk: little bugs crawling across the page (tap one to squish it) */
#bugs{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
#bugs .bug{position:absolute;left:0;top:0;width:var(--bs,22px);height:var(--bs,22px);margin:calc(var(--bs,22px) / -2) 0 0 calc(var(--bs,22px) / -2);pointer-events:auto;cursor:pointer;color:var(--bc,#4ff0a4);filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));will-change:transform}
#bugs .bug svg{width:100%;height:100%;display:block;overflow:visible}
#bugs .bug .lg{transform-origin:12px 13px;animation:bugleg .18s steps(2) infinite}
#bugs .bug.still .lg{animation:none}
@keyframes bugleg{50%{transform:scaleY(.82) skewY(6deg)}}
#bugs .bug.squish{pointer-events:none}
#bugs .bug.squish svg{animation:bugsquish 1.4s ease-out forwards}
#bugs .bug.squish::after{content:"";position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--bc,#4ff0a4) 55%,transparent) 0 35%,transparent 70%);animation:bugsplat 1.4s ease-out forwards}
@keyframes bugsquish{0%{transform:scale(1)}12%{transform:scale(1.3,.3)}100%{transform:scale(1.3,.3);opacity:0}}
@keyframes bugsplat{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.4);opacity:0}}
body[data-mode="edit"] #bugs{z-index:4}