*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --purple:#9333ea;--purple-dim:rgba(147,51,234,0.14);--purple-glow:rgba(147,51,234,0.35);
  --red:#e8342a;--red-dim:rgba(232,52,42,0.14);
  --bg:#0d0010;--card-bg:rgba(18,5,28,0.88);
  --border:rgba(147,51,234,0.12);--border-h:rgba(147,51,234,0.25);
  --text:#fff;--t2:rgba(255,255,255,0.55);--tm:rgba(255,255,255,0.25);
  --rb:rgba(147,51,234,0.04);
  --font:'Inter',-apple-system,sans-serif;
  --mono:'Space Mono',monospace;
  --title:'Metamorphous',serif;
}
html,body{height:100%;background:var(--bg);font-family:var(--font);color:var(--text);overflow-x:hidden}

/* ── VIDEO BACKGROUND ── */
.video-bg-wrap{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  opacity:0;transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1);
}
.entered .video-bg-wrap{opacity:1;}
#bgVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
  filter:grayscale(100%) brightness(0.5);}
/* B&W desaturate layer */
.video-overlay-bw{
  position:absolute;inset:0;pointer-events:none;
  background:rgba(0,0,0,0.45);
}
/* Purple color overlay */
.video-overlay-color{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(120,0,200,0.72) 0%,rgba(60,0,100,0.82) 100%);
  mix-blend-mode:color;
}

/* ── MUTE BUTTON — hidden until entered ── */
.mute-btn{
  position:fixed;bottom:22px;right:22px;z-index:200;
  width:38px;height:38px;border-radius:50%;
  background:rgba(18,5,28,0.82);border:1px solid rgba(147,51,234,0.3);
  color:rgba(255,255,255,0.75);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s,border-color 0.2s,color 0.2s,opacity 0.5s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
}
.entered .mute-btn{opacity:1;pointer-events:auto;}
.mute-btn:hover{background:rgba(147,51,234,0.25);border-color:rgba(147,51,234,0.6);color:#fff;}
.mute-btn.muted svg path:last-child,.mute-btn.muted svg path:nth-child(2){display:none}
.mute-btn.muted::after{
  content:'';position:absolute;
  width:2px;height:22px;background:currentColor;
  transform:rotate(45deg);border-radius:1px;
}

/* ── LOADING SCREEN ── */
.loading-screen{
  position:fixed;inset:0;z-index:999;
  background:#0d0010;
  opacity:1;transition:opacity 0.8s cubic-bezier(0.4,0,0.2,1);
  pointer-events:auto;
}
.loading-screen.fade-out{
  opacity:0;pointer-events:none;
}

/* ── CLICK SHIELD (intro phase) ── */
.click-shield{
  position:fixed;inset:0;z-index:65;
  background:transparent;pointer-events:auto;
  cursor:pointer;
}
.entered .click-shield{
  pointer-events:none;
}

/* GRID */
body::before{content:'';position:fixed;inset:0;
  background-image:linear-gradient(rgba(147,51,234,0.10) 1px,transparent 1px),linear-gradient(90deg,rgba(147,51,234,0.10) 1px,transparent 1px);
  background-size:55px 55px;z-index:1;pointer-events:none}

/* BIG PURPLE GLOW */
.glow{position:fixed;pointer-events:none;z-index:1}
.glow-top{top:-35%;left:50%;transform:translateX(-50%);width:1875px;height:1125px;
  background:radial-gradient(ellipse at 50% 28%,rgba(147,51,234,0.55) 0%,rgba(80,20,140,0.28) 32%,transparent 68%)}
.glow-bot{bottom:-25%;left:15%;width:875px;height:750px;
  background:radial-gradient(ellipse,rgba(120,30,200,0.22) 0%,transparent 65%)}

#pcv{position:fixed;inset:0;z-index:55;pointer-events:none}

/* ── CINEMATIC BARS — removed, transition handled by video fade ── */
.bar{display:none}

/* PAGE */
.page{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:75px 25px 125px;gap:0;}

/* ── INTRO SCREEN OVERLAY — purple bg visible during intro, fades out on enter ── */
.intro-overlay{
  position:fixed;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, rgba(100,0,180,0.55) 0%, #0d0010 70%);
  transition:opacity 0.6s cubic-bezier(0.4,0,0.2,1);
  opacity:1;
}
.entered .intro-overlay{opacity:0;}

/* ── TITLE ── */
.hero{
  text-align:center;
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:60;
  opacity:0;animation:fade-in 1.0s ease 0.3s forwards, float-title 3s ease-in-out 1.3s infinite;
}
@keyframes fade-in { to { opacity: 1; } }
@keyframes float-title {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 12px)); }
}

/* Vanish: smooth fade out */
.hero.vanishing{
  animation:vanish-up 0.4s ease-out forwards !important;
  pointer-events:none;
}
@keyframes vanish-up {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

.hero h1{
  font-family:var(--title);
  font-size:clamp(42px,7.5vw,82px);
  font-weight:400;
  letter-spacing:0.04em;
  display:inline-block;
  position:relative;
  color:#fff;
  text-shadow:0 0 40px rgba(147,51,234,0.8),0 0 80px rgba(147,51,234,0.4);
  cursor:pointer;
  user-select:none;
}
.hero h1 .dot{color:var(--purple);text-shadow:0 0 20px rgba(147,51,234,1)}
.hero h1::after{content:'';position:absolute;bottom:-10px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--purple),transparent);opacity:.7;border-radius:2px}

/* CLICK HINT */
.click-hint{
  position:absolute;top:calc(50% + 80px);left:50%;transform:translate(-50%,-50%);
  font-size:12px;font-family:var(--mono);color:rgba(200,150,255,0.75);
  letter-spacing:.25em;text-transform:uppercase;
  animation:pulse-slow 2.2s infinite;
  transition:opacity 0.5s ease;
  pointer-events:none;z-index:60;
}
.entered .click-hint{opacity:0;animation:none;}
@keyframes pulse-slow{0%,100%{opacity:0.85}50%{opacity:0.35}}

/* LAYOUT TRANSITION WRAPPERS */
.row-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.55s cubic-bezier(0.22,1,0.36,1);width:100%;}
.entered .row-wrapper{grid-template-rows:1fr;}
.row-inner{overflow:hidden;display:flex;justify-content:center;width:100%;}

/* CARDS ROW */
.row{display:flex;gap:0;align-items:center;width:100%;max-width:1150px;justify-content:center;
  margin-top:27.5px;opacity:0;
  transition:opacity 0.5s cubic-bezier(.22,1,.36,1) 0.1s}
.entered .row{opacity:1}

/* LFM ROW */
#lfmRow{display:flex;gap:0;align-items:center;width:100%;max-width:1150px;justify-content:center;
  margin-top:27.5px;opacity:0;
  transition:opacity 0.5s cubic-bezier(.22,1,.36,1) 0.1s}
.entered #lfmRow{opacity:1}

#lfmRowWrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.55s cubic-bezier(0.22,1,0.36,1);}
.entered #lfmRowWrapper{grid-template-rows:1fr}

/* CARD */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:27.5px;
  backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
  box-shadow:0 0 0 1px rgba(147,51,234,0.08),0 40px 80px rgba(0,0,0,.8),0 0 80px rgba(100,20,180,.1);
  transform-style:preserve-3d;will-change:transform;
  transition:height 0.4s ease;}

/* PROFILE CARD */
.pc{width:412.5px;flex-shrink:0;padding:24px 20px 20px; display:flex; flex-direction:column; position:relative;
  transition:all 0.4s ease;}

/* OWNER BADGE TOOLTIP */
.tooltip-container { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: help; }
.crown-icon { width: 17.5px; height: 17.5px; color: #facc15; filter: drop-shadow(0 0 2px rgba(250,204,21,0.5)); transition: transform 0.2s; }
.tooltip-container:hover .crown-icon { transform: scale(1.1); }
.tooltip-text {
  position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%) translateY(6px);
  background: #1a0a2e; border: 1px solid rgba(147,51,234,0.25); color: #fff; padding: 5px 9px;
  border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: all 0.2s ease; pointer-events: none; z-index: 10;
  font-family: var(--font); letter-spacing: 0.05em;
}
.tooltip-container:hover .tooltip-text { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.ph{display:flex;align-items:center;gap:16px;margin-top:6px;margin-bottom:18px;transform:translateZ(37.5px)}
.av{width:72px;height:72px;border-radius:50%;overflow:hidden;border:2px solid rgba(147,51,234,.25);
  background:#1a0a2e;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:25px;font-weight:700;color:var(--t2)}
.av img{width:100%;height:100%;object-fit:cover}
.uname{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1}

/* Discord Status Badge */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 7px; padding: 3.5px 10px; margin-top: 6px;
  transition: all 0.3s ease;
}
.bdot { width: 6px; height: 6px; border-radius: 50%; transition: background 0.3s ease; }
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}

.badge.online { color: #23a559; background: rgba(35,165,89,0.14); border: 1px solid rgba(35,165,89,0.27); }
.badge.online .bdot { background: #23a559; animation: pulse 2s ease infinite; }
.badge.idle { color: #f0b232; background: rgba(240,178,50,0.14); border: 1px solid rgba(240,178,50,0.27); }
.badge.idle .bdot { background: #f0b232; animation: pulse 2s ease infinite; }
.badge.dnd { color: #f23f43; background: rgba(242,63,67,0.14); border: 1px solid rgba(242,63,67,0.27); }
.badge.dnd .bdot { background: #f23f43; animation: pulse 2s ease infinite; }
.badge.offline { color: #747f8d; background: rgba(116,127,141,0.14); border: 1px solid rgba(116,127,141,0.27); }
.badge.offline .bdot { background: #747f8d; animation: none; opacity: 0.5; }

.quote{font-size:15px;color:var(--t2);font-style:italic;text-align:center;
  margin-bottom:16px;line-height:1.55;transform:translateZ(25px);min-height:25px;font-family:var(--mono);
  transition:all 0.4s ease;}
.cur{display:inline-block;color:var(--purple);animation:blink .75s step-end infinite;font-style:normal}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.loc{display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;color:var(--tm);margin-bottom:18px;transform:translateZ(25px)}

/* LINK BUTTONS */
.btns{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;transform:translateZ(43px);margin-bottom:17px;justify-content:center}
.lbtn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(147,51,234,.06);border:1px solid rgba(147,51,234,.15);border-radius:12px;
  width:46px;height:46px;text-decoration:none;color:var(--text);
  transition:all .18s ease;cursor:pointer;flex-shrink:0;}
.lbtn:hover{background:rgba(147,51,234,.18);border-color:rgba(147,51,234,.35);transform:translateY(-2px);box-shadow:0 6px 20px rgba(147,51,234,.2)}
.lbtn .lsub{display:none}
.lbtn .larr{display:none}
.lbtn-label{display:none}
.licon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Button tooltip */
.btn-tooltip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:#1a0a2e;border:1px solid rgba(147,51,234,0.25);color:#fff;padding:5px 9px;
  border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;
  opacity:0;visibility:hidden;transition:all 0.2s ease;pointer-events:none;z-index:100;
  font-family:var(--font);letter-spacing:0.05em;display:block;
}
.lbtn:hover .btn-tooltip{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.steam-wrap .steam-drop.open ~ .lbtn .btn-tooltip,
.namemc-wrap .namemc-drop.open ~ .lbtn .btn-tooltip{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}

/* Button tooltip */
.btn-tooltip{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:#1a0a2e;border:1px solid rgba(147,51,234,0.25);color:#fff;padding:5px 9px;
  border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;
  opacity:0;visibility:hidden;transition:all 0.2s ease;pointer-events:none;z-index:100;
  font-family:var(--font);letter-spacing:0.05em;display:block;
}
.lbtn:hover .btn-tooltip,
.steam-wrap .steam-drop.open ~ .lbtn .btn-tooltip,
.namemc-wrap .namemc-drop.open ~ .lbtn .btn-tooltip{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}

/* ── CARD TOP-RIGHT CLUSTER ── */
.card-top-right {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  display: flex; align-items: center; gap: 8px;
}

/* VIEWS COUNTER */
.views-counter {
  display: flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 10px;
  border-radius: 9px;
  background: rgba(147,51,234,0.06); border: 1px solid rgba(147,51,234,0.15);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--t2); white-space: nowrap;
  transition: all .18s ease;
  cursor: default;
}
.views-counter:hover { background: rgba(147,51,234,0.14); border-color: rgba(147,51,234,0.3); color: var(--text); }
.views-counter svg { flex-shrink: 0; opacity: 0.6; }
#viewCount { letter-spacing: 0.04em; }

/* STATS BUTTON */
.stats-btn{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;
  background:rgba(147,51,234,0.12);border:1px solid rgba(147,51,234,0.25);
  cursor:pointer;text-decoration:none;color:var(--purple);
  transition:all .18s ease;}
.stats-btn:hover{background:rgba(147,51,234,0.22);border-color:rgba(147,51,234,0.5);transform:scale(1.08);}
.show-stats .stats-btn{background:rgba(147,51,234,0.25);border-color:rgba(147,51,234,0.55);}

/* SHARED DROPDOWN STYLES */
.steam-wrap,.namemc-wrap{position:relative;display:inline-flex}
.steam-wrap:hover .steam-drop,
.namemc-wrap:hover .namemc-drop{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)
}
.namemc-drop,.steam-drop{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:rgba(18,5,28,.98);border:1px solid rgba(147,51,234,.15);border-radius:12px;
  padding:6px;min-width:175px;z-index:200;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  box-shadow:0 10px 30px rgba(0,0,0,.7);
}
.namemc-drop.open,.steam-drop.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.namemc-drop a,.steam-drop a{
  display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;
  text-decoration:none;color:var(--text);font-size:11.5px;font-weight:600;
  transition:background .15s ease;white-space:nowrap;
}
.namemc-drop a:hover,.steam-drop a:hover{background:rgba(147,51,234,.1)}
.namemc-drop .mc-face{width:20px;height:20px;border-radius:4px;object-fit:cover;flex-shrink:0;image-rendering:pixelated}
.drop-sublabel{font-size:10px;color:var(--tm);font-weight:400;margin-left:auto;padding-left:6px}
.namemc-drop-arrow,.steam-drop-arrow{position:absolute;bottom:-5px;left:50%;
  width:10px;height:10px;background:rgba(18,5,28,.98);border-right:1px solid rgba(147,51,234,.15);
  border-bottom:1px solid rgba(147,51,234,.15);transform:translateX(-50%) rotate(45deg)}

.sep{display:none;height:1px;background:var(--border);margin:auto -25px 15px;}

/* LANYARD */
.lc{display:flex;flex-direction:column;gap:10px;background:rgba(18,5,28,.6);
  border:1px solid rgba(147,51,234,.1);border-radius:16px;padding:13px 14px;
  text-decoration:none;color:inherit;cursor:pointer;
  transition:background 0.2s ease,border-color 0.2s ease}
.lc:hover{background:rgba(30,8,50,.8);border-color:rgba(147,51,234,.22)}
.lt{display:flex;align-items:center;gap:12px}
.lavw{position:relative;width:46px;height:46px;flex-shrink:0}
.lavw img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:none}
.ldot{position:absolute;bottom:0;right:0;width:13px;height:13px;border-radius:50%;
  border:2.5px solid #0d0010;background:#747f8d}
.ldot.online{background:#23a559}
.ldot.idle{background:#f0b232}
.ldot.dnd{background:#f23f43;display:flex;align-items:center;justify-content:center}
.ldot.dnd::after{content:'';width:5px;height:1.5px;background:#0d0010;border-radius:1px}
.ldot.offline{background:#747f8d}
.li{flex:1;min-width:0}
.ln{font-size:15px;font-weight:700;display:flex;align-items:center;gap:5px;line-height:1.2}
.ln svg{width:15px;height:15px;flex-shrink:0}
.lbadges{display:inline-flex;align-items:center;gap:3px;margin-left:2px}
.lbadge{width:16px;height:16px;flex-shrink:0}
.ls{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:3px;display:flex;align-items:center;gap:4px;line-height:1.3}
.ls img{width:15px;height:15px}
.l-servertag{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:5px;
  background:rgba(147,51,234,.08);border:1px solid rgba(147,51,234,.15);
  border-radius:8px;padding:4px 8px 4px 5px;font-size:11px;font-weight:700;
  color:rgba(255,255,255,.55);white-space:nowrap;letter-spacing:.02em}
.l-servertag-icon{width:18px;height:18px;border-radius:4px;object-fit:cover;flex-shrink:0}
.lgame{display:flex;align-items:center;gap:10px;background:rgba(147,51,234,.05);
  border:1px solid rgba(147,51,234,.08);border-radius:10px;padding:8px 10px}
.lgame img{width:40px;height:40px;border-radius:6px;object-fit:cover}
.lginfo{flex:1;min-width:0}
.lgn{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.5)}
.lgd{font-size:12.5px;font-weight:600;color:#fff;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lgt{font-size:11px;color:var(--purple);font-weight:600;white-space:nowrap;flex-shrink:0}

/* ── STATS CARD WRAPPER ── */
.sc-container{width:0;opacity:0;overflow:hidden; display:flex; flex-direction:column;
  transition:width 0.8s cubic-bezier(0.22,1,0.36,1),opacity 0.6s ease 0.15s,margin-left 0.8s cubic-bezier(0.22,1,0.36,1)}
.show-stats .sc-container{width:600px;opacity:1;margin-left:17.5px}
.sc-inner{width:600px; display:flex; flex:1; flex-direction:column;}
.sc{width:100%;padding:25px 22.5px 22.5px; display:flex; flex:1; flex-direction:column;}

/* CSREP STATS STYLES */
.sr-header { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }
.sr-title { font-size: 13.5px; font-weight: 700; color: #fff; flex: 1; }
.sr-badge { font-size: 11px; font-weight: 600; padding: 3px 6px; background: rgba(147,51,234,0.08); border: 1px solid rgba(147,51,234,0.18); border-radius: 5px; color: var(--tm); font-family: var(--mono); }
.sr-ring-container { position: relative; width: 106px; height: 106px; display: flex; align-items: center; justify-content: center; }
.sr-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.sr-ring-bg { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 3; }
.sr-ring-fill { fill: none; stroke: var(--purple); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100.5, 100.5; }
.sr-ring-text { position: absolute; text-align: center; display: flex; flex-direction: column; align-items: center; }
.sr-ring-val { font-size: 23px; font-weight: 800; color: #fff; font-family: var(--mono); line-height: 1; }
.sr-ring-lbl { font-size: 7.5px; color: var(--tm); text-transform: uppercase; margin-top: 3px; font-weight: 600; letter-spacing: 0.05em; }
.sr-status { display: inline-flex; padding: 4px 11px; background: var(--purple-dim); border: 1px solid rgba(147,51,234,0.3); color: var(--purple); font-size: 11px; font-weight: 700; border-radius: 7px; text-transform: uppercase; letter-spacing: 0.05em; }
.sr-plat { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--t2); background: rgba(255,255,255,0.03); padding: 3.5px 7px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.05); position: relative; cursor: help; }
.sr-plat svg { color: var(--purple); }

/* STATS TOOLTIPS */
.plat-tooltip {
  position: absolute; bottom: calc(100% + 7.5px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: #1a0a2e; border: 1px solid rgba(147,51,234,0.2); padding: 8px 11px;
  border-radius: 7px; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: all 0.2s ease; pointer-events: none; z-index: 100;
  display: flex; flex-direction: column; gap: 6px; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  text-align: left;
}
.sr-plat:hover .plat-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.pt-title { font-size: 12px; font-weight: 700; color: #fff; font-family: var(--font); line-height: 1; letter-spacing: 0.02em; }
.pt-sep { width: 100%; height: 1px; background: rgba(147,51,234,0.2); }
.pt-stat { font-size: 12px; font-weight: 600; color: #23a559; font-family: var(--font); line-height: 1; }

.sr-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 17px; }
.sr-stat { display: flex; flex-direction: column; gap: 5px; }
.sr-stat-info { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.sr-stat-val { color: var(--purple); font-weight: 700; font-family: var(--mono); font-size: 12px; }
.sr-stat-name { color: rgba(255,255,255,0.6); font-weight: 500; font-size: 11px; white-space: nowrap; }
.sr-bar { height: 3px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
.sr-fill { height: 100%; background: var(--purple); border-radius: 2px; }
.sr-footer-row { display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: none; margin-top: auto; }

/* RESPONSIVE */
@media(max-width:1100px){
  .row{flex-direction:column;align-items:center}
  #lfmRow{flex-direction:column;align-items:center}
  .pc{width:100%;max-width:500px}
  #lastfmCard{width:100%;max-width:500px}
  .sc-container{width:100%;max-width:500px;display:grid;grid-template-rows:0fr;
    transition:grid-template-rows 0.8s cubic-bezier(0.22,1,0.36,1),opacity 0.6s ease 0.15s,margin-top 0.8s cubic-bezier(0.22,1,0.36,1);
    margin-left:0 !important;margin-top:0}
  .show-stats .sc-container{grid-template-rows:1fr;margin-top:17.5px; width:100%;}
  .sc-inner{width:100%;min-height:0}
  .sc{width:100%;max-width:500px}
}
@media(max-width:550px){
  .sr-stats-grid{grid-template-columns:1fr; gap:8px;}
  .sc{padding:15px;}
  .views-counter span:not(#viewCount) { display: none; }
}

/* LAST.FM NOW PLAYING */
.lastfm-row{display:flex;align-items:center;gap:12px;padding:2px 0 2px;text-decoration:none;color:inherit;border-radius:12px;transition:opacity 0.2s}
.lastfm-row:hover{opacity:.8}
.lastfm-art-wrap{position:relative;width:56px;height:56px;flex-shrink:0;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.lastfm-art-wrap img{width:56px;height:56px;border-radius:8px;object-fit:cover;display:block;background:rgba(147,51,234,.08)}
.lastfm-art-fallback{display:none;width:56px;height:56px;border-radius:8px;background:rgba(147,51,234,.08);padding:8px}
.lastfm-art-wrap img[style*="display: none"] ~ .lastfm-art-fallback{display:block}
.lastfm-vinyl{display:none}
.lastfm-info{display:flex;flex-direction:column;gap:0px;min-width:0;flex:1}
.lastfm-label{display:flex;align-items:center;gap:4px;font-size:10.5px;font-family:var(--mono);color:var(--tm);letter-spacing:.1em;text-transform:uppercase}
.lastfm-label svg{flex-shrink:0;opacity:.6}
.lastfm-row.playing .lastfm-label svg{color:var(--purple);opacity:1}
.lastfm-track{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lastfm-artist{font-size:11.5px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lastfm-row.playing .lastfm-track{color:#fff}

@keyframes vinyl-spin{to{transform:rotate(360deg)}}