/* ── Catppuccin Mocha ── */
:root {
  --base:      #1e1e2e;
  --mantle:    #181825;
  --crust:     #11111b;
  --surface0:  #313244;
  --surface1:  #45475a;
  --surface2:  #585b70;
  --overlay0:  #6c7086;
  --overlay1:  #7f849c;
  --subtext0:  #a6adc8;
  --text:      #cdd6f4;
  --blue:      #89b4fa;
  --green:     #a6e3a1;
  --yellow:    #f9e2af;
  --peach:     #fab387;
  --maroon:    #eba0ac;
  --red:       #f38ba8;
  --mauve:     #cba6f7;
  --rosewater: #f5e0dc;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body {
  background: var(--crust);
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  font-family: 'Nunito', sans-serif;
  background-image:
    radial-gradient(circle, rgba(243,139,168,.07) 1px, transparent 1px),
    radial-gradient(circle, rgba(203,166,247,.04) 1px, transparent 1px);
  background-size: 24px 24px, 12px 12px;
  background-position: 0 0, 6px 6px;
}
body::before,body::after {
  content:'✦  ✧  ✦  ✧  ✦  ✧  ✦  ✧  ✦';
  position:fixed;left:0;right:0;font-size:10px;
  color:rgba(243,139,168,.1);letter-spacing:.6em;text-align:center;
  pointer-events:none;
}
body::before{top:18px} body::after{bottom:18px}

/* ══════════════ BADGE SHELL ══════════════ */
#lanyard-badge {
  position: relative;
  display:flex;
  flex-direction:column;
  width: 320px;
  background: var(--base);
  border: 1px solid var(--surface0);
  border-radius: 16px;
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 1px var(--crust),
    0 0 30px rgba(243,139,168,.2),
    0 12px 44px rgba(0,0,0,.6);
}

/* VHS / glitch badge effects moved to global.css */

/* ── STATUS PILL ── */
.badge-status-row { display:flex; align-items:center; gap:6px; padding:0 16px 4px; }
.badge-status-pill {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--mantle); border:1px solid var(--surface0);
  border-radius:99px; padding:2px 10px 2px 7px;
  font-size:10px; font-family:'Pixelify Sans',monospace; letter-spacing:.08em;
}
.badge-status-pill[data-status="online"]  { color:var(--green);  border-color:rgba(166,227,161,.3); }
.badge-status-pill[data-status="idle"]    { color:var(--yellow); border-color:rgba(249,226,175,.3); }
.badge-status-pill[data-status="dnd"]     { color:var(--red);    border-color:rgba(243,139,168,.3); }
.badge-status-pill[data-status="offline"] { color:var(--overlay0); }
.status-pill-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.badge-status-pill[data-status="online"] .status-pill-dot { animation:pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1}
  50%{box-shadow:0 0 0 4px transparent;opacity:.7}
}

.badge-custom-status {
  padding:2px 16px 10px; font-size:11px; font-style:italic;
  color:var(--subtext0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-height:20px;
}

/* ── DIVIDER ── */
.badge-divider {
  height:1px;
  background:linear-gradient(90deg,transparent,var(--surface0) 30%,var(--surface0) 70%,transparent);
  margin:0 16px; position:relative;
}
.badge-divider::after {
  content:'♡'; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:var(--base); padding:0 8px;
  font-size:11px; color:var(--red); line-height:1;
}

/* ── ACTIVITIES ── */
.badge-activities { padding:10px 0 2px; }
.activity-section-label {
  font-family:'Pixelify Sans',monospace;
  font-size:8px; letter-spacing:.22em;
  color:var(--overlay0); text-transform:uppercase;
  padding:0 16px 7px;
  display:flex; align-items:center; gap:6px;
}
.activity-section-label::before {
  content:''; display:inline-block;
  width:14px; height:1px; background:var(--red); opacity:.6;
}
.activity-section-label::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,var(--surface0),transparent);
}
.activity-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 16px; position:relative; transition:background .2s;
}
.activity-item+.activity-item { border-top:1px solid var(--surface0); }
.activity-item:hover { background:rgba(243,139,168,.04); }
.activity-item::before {
  content:''; position:absolute; left:0; top:10px; bottom:10px;
  width:2px; background:var(--red); border-radius:99px;
  opacity:0; transition:opacity .2s;
}
.activity-item:hover::before { opacity:.7; }

/* type tag */
.activity-type-tag {
  font-family:'Pixelify Sans',monospace;
  font-size:8px; letter-spacing:.1em;
  padding:2px 7px; border-radius:99px;
  text-transform:uppercase; white-space:nowrap;
  flex-shrink:0; margin-top:2px; border:1px solid;
}
.tag-game    { color:var(--blue);   border-color:rgba(137,180,250,.35); background:rgba(137,180,250,.08); }
.tag-music   { color:var(--red);    border-color:rgba(243,139,168,.35); background:rgba(243,139,168,.08); }
.tag-stream  { color:var(--mauve);  border-color:rgba(203,166,247,.35); background:rgba(203,166,247,.08); }
.tag-watch   { color:var(--yellow); border-color:rgba(249,226,175,.35); background:rgba(249,226,175,.08); }
.tag-custom  { color:var(--overlay1);border-color:var(--surface1);     background:rgba(88,91,112,.1); }
.tag-compete { color:var(--peach);  border-color:rgba(250,179,135,.35); background:rgba(250,179,135,.08); }

.activity-art-wrap { position:relative; flex-shrink:0; }
.activity-art {
  width:40px; height:40px; border-radius:9px;
  border:1px solid var(--surface0);
  object-fit:cover; background:var(--mantle);
}
.activity-art-small {
  position:absolute; bottom:-4px; right:-4px;
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--base);
  object-fit:cover; background:var(--mantle);
}
.activity-info { flex:1; min-width:0; }
.activity-name {
  font-size:13px; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.3;
}
.activity-detail {
  font-size:11px; color:var(--subtext0);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.5;
}
.activity-album {
  font-size:10px; color:var(--overlay1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.activity-elapsed {
  display:flex; align-items:center; gap:4px;
  margin-top:3px; font-size:9px;
  font-family:'Pixelify Sans',monospace; color:var(--overlay0); letter-spacing:.05em;
}
.live-dot {
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background:var(--red); flex-shrink:0;
  animation:blink 1.3s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}

.no-activity {
  padding:14px 16px; font-size:11px; font-style:italic;
  color:var(--overlay0); text-align:center;
}
.no-activity::before{content:'✦ ';color:var(--red)}
.no-activity::after{content:' ✦';color:var(--red)}

/* ── PLATFORMS ── */
.badge-platforms {
  display:flex; gap:6px; flex-wrap:wrap;
  margin-top:auto;
  padding:8px 16px; border-top:1px solid var(--surface0);
}
.platform-pill {
  display:flex; align-items:center; gap:4px;
  font-family:'Pixelify Sans',monospace;
  font-size:8px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--surface2); border:1px solid var(--surface0);
  border-radius:99px; padding:2px 8px;
  transition:color .3s,border-color .3s,background .3s;
}
.platform-pill.active {
  color:var(--rosewater);
  border-color:rgba(243,139,168,.45);
  background:rgba(243,139,168,.07);
}
.platform-dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.platform-pill.active .platform-dot { animation:blink 2s ease-in-out infinite; }

/* ── FOOTER ── */
.badge-footer {
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 16px 12px;
}
.badge-footer-id {
  font-family:'Pixelify Sans',monospace;
  font-size:8px; letter-spacing:.08em; color:var(--surface2);
}
.badge-footer-hearts {
  font-size:10px; letter-spacing:3px; color:var(--red);
  opacity:.5; animation:twinkle 3s ease-in-out infinite;
}

/* ── LOADING ── */
.badge-loading {
  padding:42px 16px; text-align:center;
  font-family:'Pixelify Sans',monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--overlay0);
}
.badge-loading .ld-heart {
  display:block; font-size:22px; color:var(--red);
  animation:blink 1s ease-in-out infinite; margin-bottom:10px;
}