/* ===== babyslut — 8-bit retro / CRT theme, colorful arcade edition ===== */
:root{
  --bg:#000;
  --panel:rgba(8,8,14,.92);
  --panel-2:rgba(14,12,22,.94);
  --panel-solid:#09060f;
  --line:rgba(255,255,255,.18);
  --line-2:rgba(255,255,255,.34);
  --text:#eef1ff;
  --muted:#aab0d6;
  --muted-2:#6b6f9a;
  --accent:#ff5fa2;        /* pink */
  --accent-2:#5fe8ff;      /* cyan */
  --accent-ink:#13021a;
  --c-pink:#ff5fa2; --c-cyan:#5fe8ff; --c-green:#5bffb0; --c-yellow:#ffe169; --c-purple:#b57cff; --c-orange:#ff9e5f;
  --ok:#5bffb0; --warn:#ffe169; --danger:#ff5d6c;
  --r:0px; --r-s:0px;
  --font:"VT323","NEC_APC3",monospace;
  --display:"Press Start 2P","VT323",monospace;
  --mono:"VT323",monospace;
  --shadow:0 0 0 2px #000, 0 0 30px rgba(255,255,255,.08);
}
html,body{ image-rendering:pixelated; }
body{
  background:#000 !important; color:var(--text);
  font-family:var(--font); font-size:20px; line-height:1.35; letter-spacing:.4px;
  text-shadow:0 0 6px rgba(255,255,255,.22);
  -webkit-font-smoothing:none; font-smooth:never;
}
img,canvas,svg,.av,.skin,.thumb{ image-rendering:pixelated; }
*{ border-radius:0 !important; }

h1,h2,h3,.card h3,.hero h1{
  font-family:var(--font) !important; text-transform:uppercase; letter-spacing:.5px;
  color:#fff; text-shadow:0 0 6px var(--c-cyan), 0 0 2px #000;
  overflow-wrap:anywhere; word-break:break-word; max-width:100%;
}
/* rainbow brand name */
.brand span{
  font-family:var(--display) !important; font-size:14px !important; letter-spacing:1px;
  background:linear-gradient(90deg,#ff5fa2,#ffe169,#5bffb0,#5fe8ff,#b57cff,#ff5fa2);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important;
  -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 8px rgba(255,255,255,.4));
  animation:huemove 5s linear infinite;
}
@keyframes huemove{ to{ background-position:300% 0 } }
.brand img{ filter:drop-shadow(0 0 7px var(--c-cyan)); animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{filter:drop-shadow(0 0 5px var(--c-cyan))} 50%{filter:drop-shadow(0 0 12px var(--c-pink))} }

a{ color:var(--c-cyan); text-shadow:0 0 8px rgba(95,232,255,.4); }
a:hover{ color:var(--c-pink); text-shadow:0 0 10px rgba(255,95,162,.6); }
.muted,.lvl,.small{ color:var(--muted) !important; }

/* retro buttons — colorful, hard pixel shadow */
.btn,button,.nice,.pill{
  font-family:var(--display) !important; font-size:10px !important; letter-spacing:1px;
  border:2px solid var(--line-2) !important; background:#120a1e !important; color:#fff !important;
  text-shadow:0 0 7px var(--c-cyan); box-shadow:2px 2px 0 var(--c-purple), 0 0 0 2px #000 !important;
  transition:transform .06s, filter .1s;
}
.btn:hover,button:hover{ filter:brightness(1.2); transform:translate(-1px,-1px); box-shadow:2px 2px 0 var(--c-pink), 0 0 0 2px #000 !important; }
.btn:active,button:active{ transform:translate(1px,1px); box-shadow:0 0 0 2px #000 !important; }
.btn.primary,.btn.sm.primary,.primary{ background:var(--c-pink) !important; color:#1a0210 !important; text-shadow:none; box-shadow:2px 2px 0 #7a1b47, 0 0 0 2px #000 !important; }

.glass,.glass-2,.card,.nav-inner,.modal,.panel,.tile{
  background:rgba(8,6,14,.9) !important; border:2px solid var(--line) !important;
  box-shadow:0 0 0 2px #000, 0 0 26px rgba(181,124,255,.10) !important; backdrop-filter:none !important;
}
.nav-links a.active,.nav-links a:hover{ background:rgba(255,95,162,.14) !important; color:#fff !important; }

input,textarea,select{
  background:#0a0712 !important; color:#fff !important; border:2px solid var(--line-2) !important;
  font-family:var(--font) !important; font-size:18px !important;
}
::selection{ background:var(--c-pink); color:#000; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-thumb{ background:#2a1540 !important; border:2px solid var(--c-purple) !important; }

/* background liquid canvas -> slow rainbow color cycle */
#liquid{ filter:saturate(1.6) brightness(.6) contrast(1.1); opacity:.5; animation:huebg 26s linear infinite; }
@keyframes huebg{ to{ filter:hue-rotate(360deg) saturate(1.6) brightness(.6) contrast(1.1) } }

/* twinkling multi-color pixel starfield */
body > .bg::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, var(--c-pink) 50%, transparent 52%),
    radial-gradient(1px 1px at 78% 14%, var(--c-cyan) 50%, transparent 52%),
    radial-gradient(1px 1px at 34% 68%, var(--c-yellow) 50%, transparent 52%),
    radial-gradient(1px 1px at 61% 82%, var(--c-green) 50%, transparent 52%),
    radial-gradient(1px 1px at 88% 56%, var(--c-purple) 50%, transparent 52%),
    radial-gradient(1px 1px at 46% 36%, var(--c-cyan) 50%, transparent 52%),
    radial-gradient(1px 1px at 22% 88%, var(--c-pink) 50%, transparent 52%),
    radial-gradient(1px 1px at 68% 44%, var(--c-orange) 50%, transparent 52%);
  background-repeat:no-repeat; opacity:.8; animation:twinkle 2.4s steps(2) infinite;
}
@keyframes twinkle{ 0%,100%{opacity:.4} 50%{opacity:.95} }

/* CRT scanlines */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.24) 3px, rgba(0,0,0,0) 4px);
}
/* vignette + faint flicker + slow color wash */
body::before{
  content:""; position:fixed; inset:0; z-index:9997; pointer-events:none;
  box-shadow:inset 0 0 200px rgba(0,0,0,.9);
  background:radial-gradient(circle at 50% 40%, rgba(181,124,255,.05), transparent 62%);
  animation:crtflick 7s steps(40) infinite;
}
@keyframes crtflick{ 0%,100%{opacity:.9} 48%{opacity:1} 50%{opacity:.82} 52%{opacity:1} }

/* animated pixel stickers (colorful, self-contained) — sit BEHIND the UI so they never cover content/scrollbars */
.sticker{ position:fixed; z-index:-1; pointer-events:none; image-rendering:pixelated; }
.sticker.moon{  right:16px; bottom:14px; width:56px; height:56px; filter:drop-shadow(0 0 8px var(--c-cyan));   animation:bob 3.4s ease-in-out infinite; }
.sticker.star1{ left:18px;  bottom:44px; width:24px; height:24px; filter:drop-shadow(0 0 7px var(--c-yellow)); animation:spin 6s steps(8) infinite; }
.sticker.star2{ left:46px;  bottom:18px; width:16px; height:16px; filter:drop-shadow(0 0 6px var(--c-pink));   animation:spin 9s steps(8) infinite reverse; }
.sticker.heart{ right:78px; bottom:20px; width:26px; height:26px; filter:drop-shadow(0 0 8px var(--c-pink));   animation:beat 1.1s ease-in-out infinite; }
.sticker.cat{   left:14px;  top:84px;    width:40px; height:40px; filter:drop-shadow(0 0 8px var(--c-purple)); animation:bob 2.8s ease-in-out infinite; }
.sticker.planet{right:20px;  top:92px;    width:42px; height:42px; filter:drop-shadow(0 0 9px var(--c-green));  animation:spin 14s linear infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes beat{ 0%,100%{transform:scale(1)} 30%{transform:scale(1.25)} 60%{transform:scale(.95)} }

@media (max-width:640px){ body{ font-size:18px; } .sticker.moon{width:40px;height:40px} .sticker.cat,.sticker.planet{display:none} }

/* ===== upgrades: CRT boot, glitch title, nav underline, sweep ===== */
#crt-boot{ position:fixed; inset:0; z-index:99999; pointer-events:none; background:#000; animation:crtboot 1.5s ease-out forwards; }
@keyframes crtboot{
  0%{ background:#000; transform:scaleY(.002); filter:brightness(4); }
  6%{ background:#eafff6; transform:scaleY(.01); }
  12%{ background:#000; transform:scaleY(1); filter:brightness(1.6); }
  45%{ opacity:1; } 100%{ opacity:0; }
}
/* faint moving scanline sweep */
body > .bg::after{
  content:""; position:fixed; left:0; right:0; height:120px; z-index:9995; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.035), transparent);
  animation:sweep 7s linear infinite;
}
@keyframes sweep{ 0%{ top:-120px } 100%{ top:100% } }
/* glitch the brand name on hover */
.brand:hover span{ animation:huemove 5s linear infinite, glitch .22s steps(2) infinite; }
@keyframes glitch{ 0%{ transform:translate(0) } 33%{ transform:translate(1px,-1px) } 66%{ transform:translate(-1px,1px) } 100%{ transform:translate(0) } }
/* animated gradient underline on nav links */
.nav-links a{ position:relative; }
.nav-links a::after{ content:""; position:absolute; left:9px; right:9px; bottom:4px; height:2px;
  background:linear-gradient(90deg,var(--c-pink),var(--c-yellow),var(--c-cyan)); transform:scaleX(0); transform-origin:left; transition:transform .18s; }
.nav-links a:hover::after,.nav-links a.active::after{ transform:scaleX(1); }
/* skin / card thumbnails get a neon frame on hover */
.skin:hover,.thumb:hover,.card:hover{ box-shadow:0 0 0 2px #000, 0 0 18px rgba(95,232,255,.5) !important; }
/* chunkier focus ring */
:focus-visible{ outline:2px dashed var(--c-pink) !important; outline-offset:2px; }

/* ===== v6: cohesive calm night-rain pass — softer text, less busy, matching ===== */
body{ color:#c7d2e8 !important; text-shadow:none !important; font-size:19px; }
h1,h2,h3,.card h3,.hero h1{ color:#e3ecff !important; text-shadow:0 0 4px rgba(126,196,255,.30) !important; letter-spacing:.5px; }
a{ color:#7fd6ff !important; text-shadow:none !important; }
a:hover{ color:#ff89bd !important; }
.muted,.lvl,.small{ color:#7f8aa6 !important; }
/* calm the brand + logo */
.brand span{ animation:huemove 11s linear infinite !important; filter:drop-shadow(0 0 4px rgba(126,196,255,.4)) !important; }
.brand img{ animation:none !important; filter:drop-shadow(0 0 5px #7ec4ff) !important; }
/* drop the busy / random layers, keep CRT + rain + dim stars */
#liquid{ display:none !important; }
body > .bg::after{ display:none !important; }
body > .bg::before{ opacity:.28 !important; animation:none !important; }
#rain{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55; image-rendering:pixelated; }
/* keep only a crescent + one star, dimmed, so it is not cluttered */
.sticker.cat,.sticker.planet,.sticker.heart,.sticker.star2{ display:none !important; }
.sticker.moon{ opacity:.75; filter:drop-shadow(0 0 6px #7ec4ff) !important; }
.sticker.star1{ opacity:.6; filter:drop-shadow(0 0 5px #7ec4ff) !important; }
/* unified muted-neon controls */
.btn,button,.nice,.pill{ color:#e3ecff !important; text-shadow:none !important; box-shadow:2px 2px 0 #1b2b49, 0 0 0 2px #000 !important; background:#0c1424 !important; border-color:rgba(126,196,255,.3) !important; }
.btn:hover,button:hover{ box-shadow:2px 2px 0 #30507f, 0 0 0 2px #000 !important; }
.btn.primary,.btn.sm.primary,.primary{ background:#ff5fa2 !important; color:#1a0210 !important; box-shadow:2px 2px 0 #7a1b47, 0 0 0 2px #000 !important; }
.glass,.glass-2,.card,.nav-inner,.modal,.panel,.tile{ background:rgba(6,10,20,.9) !important; border-color:rgba(126,196,255,.16) !important; box-shadow:0 0 0 2px #000, 0 0 20px rgba(126,196,255,.06) !important; }
.nav-links a.active,.nav-links a:hover{ background:rgba(127,214,255,.12) !important; color:#fff !important; }
.nav-links a::after{ background:linear-gradient(90deg,#7fd6ff,#ff89bd) !important; }
input,textarea,select{ background:#070d18 !important; color:#e3ecff !important; border-color:rgba(126,196,255,.3) !important; }
::selection{ background:#7fd6ff; color:#06101e; }
::-webkit-scrollbar-thumb{ background:#16233f !important; border:2px solid rgba(126,196,255,.4) !important; }
/* keep the boot + scanlines subtle */
#crt-boot{ animation-duration:1.1s !important; }

/* ===== v7: dimden-style CRT static noise (subtle) + final clean pass ===== */
#crt-static{
  position:fixed; inset:0; z-index:9994; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  background-size:170px 170px; animation:staticmove .35s steps(3) infinite;
}
@keyframes staticmove{ 0%{background-position:0 0} 33%{background-position:-42px 22px} 66%{background-position:28px -32px} 100%{background-position:0 0} }
/* a touch cleaner: calmer scanlines, crisper rain, tidy spacing */
body::after{ background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,0) 4px) !important; }
#rain{ opacity:.5 !important; }
.card,.glass,.glass-2,.nav-inner{ backdrop-filter:none !important; }

/* ===== v8: fit long numbers (account id), remove overflow, cleaner tiles ===== */
.stat b, .statbar b, .kv b, .big{ font-family:var(--font) !important; font-size:19px !important; line-height:1.1 !important; overflow-wrap:anywhere; word-break:break-word; max-width:100%; }
.stat, .statbar > *, .glass-2{ overflow:hidden; min-width:0; }
.stat span{ overflow-wrap:anywhere; }
/* keep columns from forcing overflow */
.row, .grid, .stats-row, .cols{ min-width:0; }
.stats-row > *{ min-width:0; }
/* tidy card padding + crisp borders for a cleaner read */
.card{ padding:16px !important; }