:root{
    --bg:#08080a;
    --bg-2:#0d0d11;
    --surface:rgba(255,255,255,.028);
    --surface-hi:rgba(255,255,255,.05);
    --line:rgba(255,255,255,.07);
    --line-hi:rgba(255,255,255,.14);
    --ink:#f2f3f6;
    --muted:#c2c2ce;
    --faint:#9c9caa;
    --accent:#b6b6d6;        
    --accent-dim:#8a8aad;
    --avatar-url:url('assets/avatar.jpg');   /* <-- your avatar image */
    --r:16px;
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Space Grotesk",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow:hidden;
  }

  /* ambient background */
  .bg{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(120% 90% at 50% -10%, #16161d 0%, var(--bg-2) 42%, var(--bg) 78%);
  }
  /* optional custom background (image / video / color) */
  #bg-media{position:absolute;inset:0;overflow:hidden}
  #bg-media .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  #bg-media .dim{position:absolute;inset:0;background:#05050a;opacity:0}
  .bg::after{ /* slow-breathing cold glow */
    content:"";position:absolute;left:50%;top:34%;translate:-50% -50%;
    width:60vmax;height:60vmax;border-radius:50%;
    background:radial-gradient(closest-side, rgba(90,90,140,.14), transparent 70%);
    filter:blur(10px);
    animation:breathe 11s ease-in-out infinite;
  }
  body.media-bg .bg::after{display:none}  /* drop the glow over photos/videos */
  @keyframes breathe{0%,100%{opacity:.5;scale:.92}50%{opacity:.9;scale:1.05}}

  /* faint film grain */
  .grain{
    position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.045;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain 6s steps(6) infinite;
  }
  @keyframes grain{
    0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}
    40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}
    80%{transform:translate(4%,-2%)}100%{transform:translate(0,0)}
  }

  /* ---------- enter splash ---------- */
  #enter{
    position:fixed;inset:0;z-index:40;
    display:grid;place-content:center;justify-items:center;gap:14px;
    cursor:pointer;background:rgba(6,6,8,.55);backdrop-filter:blur(9px) saturate(.9);
    -webkit-backdrop-filter:blur(9px) saturate(.9);
    transition:opacity .8s ease, visibility .8s;
  }
  #enter .big{
    font-size:clamp(15px,4.5vw,20px);letter-spacing:.42em;text-transform:uppercase;
    font-weight:400;color:var(--ink);padding-left:.42em;
    animation:pulse 2.6s ease-in-out infinite;
  }
  #enter .sub{
    font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;
    color:var(--faint);text-transform:uppercase;
  }
  @keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
  body.entered #enter{opacity:0;visibility:hidden}

  /* ---------- stage ---------- */
  #stage{
    position:relative;z-index:5;min-height:100dvh;
    display:grid;place-items:center;padding:26px 18px calc(120px + env(safe-area-inset-bottom));
    opacity:0;transform:translateY(10px);transition:opacity 1s ease .1s,transform 1s ease .1s;
  }
  body.entered #stage{opacity:1;transform:none}

  .card{
    position:relative;width:min(430px,100%);
    background:linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.025) 55%, rgba(255,255,255,.055));
    backdrop-filter:blur(30px) saturate(1.8) brightness(1.06);
    -webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.06);
    border:1px solid rgba(255,255,255,.10);
    border-radius:calc(var(--r) + 10px);
    padding:34px 26px 28px;
    box-shadow:
      0 30px 70px -38px rgba(0,0,0,.7),
      inset 0 1px 1px rgba(255,255,255,.45),
      inset 0 -8px 24px rgba(255,255,255,.03);
    overflow:hidden;
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
    transform-style:preserve-3d;
    will-change:transform;
  }
  /* liquid-glass edge: a bright gradient rim that catches light */
  .card::after{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(140deg, rgba(255,255,255,.6), rgba(255,255,255,.05) 32%, transparent 52%, rgba(255,255,255,.22));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
  /* cursor spotlight */
  .card::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(220px 220px at var(--mx,50%) var(--my,0%), rgba(157,157,194,.12), transparent 70%);
    opacity:0;transition:opacity .5s;
  }
  .card:hover::before{opacity:1}

  .avatar-wrap{display:flex;justify-content:center;margin-bottom:16px}
  .avatar{
    position:relative;width:104px;height:104px;border-radius:26px;overflow:hidden;
    background:#0e0e12;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  }
  .avatar i{
    width:100%;height:100%;border-radius:inherit;
    background:var(--avatar-url), radial-gradient(120% 120% at 30% 20%, #23232c, #101014);
    background-size:cover;background-position:center;
    display:grid;place-items:center;color:var(--faint);
  }
  .avatar i svg{width:38px;height:38px;opacity:.6;display:none}

  .name{
    text-align:center;font-size:31px;font-weight:500;letter-spacing:.01em;margin:4px 0 0;
    background:linear-gradient(180deg,#ffffff,#b9b9c8);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .verified{color:var(--accent);font-size:.62em;vertical-align:.35em;margin-left:.15em}
  .tagline{
    text-align:center;font-family:"JetBrains Mono",monospace;font-size:12px;
    color:var(--muted);letter-spacing:.04em;margin:9px 0 0;
  }
  .rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-hi),transparent);margin:20px 0 18px}

  /* ---------- discord presence card ---------- */
  .discord{
    position:relative;display:block;text-decoration:none;color:inherit;margin-top:18px;overflow:hidden;
    background:linear-gradient(155deg, rgba(120,130,255,.16), rgba(255,255,255,.02) 60%, rgba(120,130,255,.07));
    backdrop-filter:blur(14px) saturate(1.4);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:13px 14px;
    box-shadow:inset 0 1px 1px rgba(255,255,255,.32), 0 10px 26px -20px rgba(0,0,0,.6);
    transition:border-color .2s,background .2s,transform .2s;
  }
  .discord::after{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(140deg, rgba(255,255,255,.45), rgba(255,255,255,.04) 34%, transparent 55%, rgba(140,150,255,.28));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
  .discord:hover{border-color:rgba(140,150,255,.4);background:linear-gradient(155deg, rgba(120,130,255,.22), rgba(255,255,255,.03) 60%, rgba(120,130,255,.1));transform:translateY(-2px)}
  .discord:focus-visible{outline:none;border-color:rgba(140,150,255,.55)}
  .dc-head{display:flex;align-items:center;gap:11px}
  .dc-av{position:relative;flex:none;width:44px;height:44px;border-radius:12px;background:#1c1c22}
  .dc-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px}
  .dc-dot{
    position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;
    background:#747f8d;transition:background .3s;
  }
  .dc-dot.online{background:#23a55a}.dc-dot.idle{background:#f0b232}
  .dc-dot.dnd{background:#f23f43}.dc-dot.offline{background:#80848e}
  .dc-id{min-width:0;flex:1}
  .dc-name{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;min-width:0}
  .dc-name #dcName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .dc-tag{flex:none;display:inline-flex;align-items:center;gap:3px;padding:1px 5px 1px 3px;border-radius:6px;
    background:rgba(255,255,255,.09);border:1px solid var(--line);font-size:11px;font-weight:600;color:var(--ink);letter-spacing:.02em}
  .dc-tag img{width:14px;height:14px;display:block}
  .dc-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;empty:hidden}
  .dc-badges img{width:18px;height:18px;display:block}
  .dc-status{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.06em;color:var(--muted);margin-top:2px;text-transform:capitalize}
  .dc-act{
    display:none;align-items:center;gap:11px;margin-top:12px;padding-top:12px;
    border-top:1px solid var(--line);
  }
  .dc-act.show{display:flex}
  .dc-act-img{position:relative;flex:none;width:42px;height:42px;border-radius:8px;overflow:hidden;background:#1c1c22}
  .dc-act-img.has-img{background:transparent}
  .dc-act-img img{position:relative;width:100%;height:100%;object-fit:cover;display:block}
  .dc-act-note{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;color:var(--muted)}
  .dc-act-meta{min-width:0;flex:1}
  .dc-act-l{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
  .dc-act-1{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dc-act-2{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

  /* ---------- one icon line (bare icons, no button chrome) ---------- */
  .socials{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin-top:22px}
  .ic{
    position:relative;width:38px;height:38px;display:grid;place-items:center;
    background:none;border:0;border-radius:10px;color:var(--muted);cursor:pointer;
    transition:transform .18s ease,color .18s;
  }
  a.ic{text-decoration:none}
  button.ic{font:inherit;padding:0}
  .ic:hover{color:var(--ink);transform:translateY(-3px)}
  .ic:focus-visible{color:var(--ink);outline:2px solid var(--line-hi);outline-offset:4px}
  .ic svg{width:23px;height:23px}
  .ic.copied{color:#7bd88f}
  /* copied tooltip */
  .ic .tip{
    position:absolute;top:-30px;left:50%;translate:-50% 0;
    font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:#101014;background:#7bd88f;padding:3px 7px;border-radius:6px;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .18s,translate .18s;
  }
  .ic .tip::after{content:"";position:absolute;left:50%;bottom:-4px;translate:-50% 0;border:4px solid transparent;border-top-color:#7bd88f;border-bottom:0}
  .ic.copied .tip{opacity:1;translate:-50% -3px}

  .footer{
    margin-top:20px;text-align:center;font-family:"JetBrains Mono",monospace;
    font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  }
  .footer b{color:var(--muted);font-weight:400}

  /* ---------- music widget ---------- */
  #player{
    position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:20;
    width:min(430px,calc(100% - 36px));
    display:flex;align-items:center;gap:12px;
    background:linear-gradient(155deg, rgba(255,255,255,.1), rgba(255,255,255,.03) 55%, rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.10);border-radius:17px;padding:9px 12px;
    backdrop-filter:blur(30px) saturate(1.8) brightness(1.05);-webkit-backdrop-filter:blur(30px) saturate(1.8) brightness(1.05);
    box-shadow:
      0 26px 60px -32px rgba(0,0,0,.85),
      inset 0 1px 1px rgba(255,255,255,.4),
      inset 0 -6px 18px rgba(255,255,255,.03);
    opacity:0;transform:translate(-50%,14px);transition:opacity .8s ease .4s,transform .8s ease .4s;
  }
  #player::after{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(140deg, rgba(255,255,255,.55), rgba(255,255,255,.05) 34%, transparent 54%, rgba(255,255,255,.2));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
  }
  body.entered #player{opacity:1;transform:translate(-50%,0)}
  .art{
    flex:none;width:44px;height:44px;border-radius:9px;overflow:hidden;position:relative;
    background:conic-gradient(from 0deg,#2a2a36,#14141a,#2a2a36);
  }
  .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
  .art img.on{opacity:1}
  .art-note{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;color:var(--muted);opacity:.85}

  .trk{flex:1;min-width:0}
  .trk .t{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .trk .a{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--muted);letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .bar{margin-top:7px;height:3px;border-radius:2px;background:var(--line);overflow:hidden;cursor:pointer}
  .bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent-dim),var(--accent));transition:width .25s linear}
  .times{display:flex;justify-content:space-between;margin-top:4px;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.08em;color:var(--faint)}

  .pp{
    flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
    background:var(--surface-hi);border:1px solid var(--line);color:var(--ink);cursor:pointer;
    transition:transform .15s,border-color .18s,background .18s;
  }
  .pp:hover,.pp:focus-visible{border-color:var(--line-hi);background:rgba(157,157,194,.14);transform:scale(1.05);outline:none}
  .pp svg{width:16px;height:16px}
  .pp .pause{display:none}
  body.playing .pp .play{display:none}
  body.playing .pp .pause{display:block}

  /* volume control */
  .vol{position:relative;flex:none;display:flex;align-items:center}
  .vol-btn{width:30px;height:30px;display:grid;place-items:center;background:none;border:0;padding:0;color:var(--muted);cursor:pointer;transition:color .18s}
  .vol-btn:hover,.vol-btn:focus-visible{color:var(--ink);outline:none}
  .vol-btn svg{width:19px;height:19px}
  .vol-btn .v-off{display:none}
  .vol.muted .vol-btn .v-on{display:none}
  .vol.muted .vol-btn .v-off{display:block}
  .vol-pop{
    position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,6px);
    padding:12px 14px;border-radius:13px;
    background:linear-gradient(155deg, rgba(255,255,255,.1), rgba(255,255,255,.03) 55%, rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7);
    box-shadow:0 18px 44px -22px rgba(0,0,0,.85), inset 0 1px 1px rgba(255,255,255,.35);
    opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
  }
  .vol-pop::after{content:"";position:absolute;top:100%;left:50%;translate:-50% 0;border:6px solid transparent;border-top-color:rgba(255,255,255,.10)}
  .vol.open .vol-pop{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
  .vol-slider{
    -webkit-appearance:none;appearance:none;width:96px;height:4px;border-radius:3px;
    background:var(--line);outline:none;cursor:pointer;display:block;
  }
  .vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.4)}
  .vol-slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.4)}

  @media (max-width:420px){ .card{padding:30px 20px 24px} .name{font-size:27px} }

  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:opacity .3s !important}
    .avatar i{animation:none !important}
  }