:root {
  --bg: #000;
  --text: #fff;
  --muted: #a5a5a5;
  --glass: rgba(8,8,8,.55);
  --line: rgba(255,255,255,.08);
  --pink: #ff3fa4;
  --cyan: #37e0ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #000; color: #fff; font-family: "Segoe UI","Helvetica Neue",Arial,sans-serif; }
body { overflow-x: hidden; }
button, a { font: inherit; }
button { border: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
.site { position: fixed; inset: 0; overflow: hidden; }
.hidden { opacity: 0; visibility: hidden; }
.visible { opacity: 1; visibility: visible; transition: opacity .75s ease; }

.boot-screen {
  position: fixed; inset: 0; z-index: 1000; background: #000;
  display: grid; place-items: center; align-content: center; gap: 8px;
  transition: opacity .7s ease, visibility .7s ease;
}
.boot-screen.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.enter-button {
  width: 86px; height: 86px; border-radius: 50%; background: #fff; color: #000;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.2),0 12px 45px rgba(255,255,255,.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.enter-button:hover { transform: scale(1.06); box-shadow: 0 0 45px rgba(255,255,255,.25); }
.play-icon { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #000; margin-left: 5px; }
.enter-title { font-size: 15px; font-weight: 600; margin-top: 6px; }
.enter-hint { font-size: 11px; color: #777; }

.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bg-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.72)); backdrop-filter: saturate(.75); }
.main { position: relative; z-index: 4; width: 100%; height: 100%; display: grid; place-items: center; padding: 90px 20px 40px; }
.topbar { position: fixed; z-index: 10; inset: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) auto max(16px, env(safe-area-inset-left)); display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.views, .top-actions { display: flex; align-items: center; gap: 9px; }
.views { color: #ddd; font-size: 13px; text-shadow: 0 2px 15px #000; }
.views svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.top-actions { gap: 8px; }
.icon-button, .icon-button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.speaker-on { display: none; }
.icon-button:not(.is-muted) .speaker-off { display: none; }
.icon-button:not(.is-muted) .speaker-on { display: block; }

.card-frame { width: min(430px, 100%); border-radius: 26px; padding: 1px; position: relative; background: linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.04)); box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.card-inner { position: relative; overflow: hidden; border-radius: 25px; background: var(--glass); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.04); }
.card-banner { height: 135px; position: relative; overflow: hidden; }
.card-banner > video { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.1),rgba(8,8,8,.9)); }
.profile-content { padding: 0 26px 25px; text-align: center; }
.avatar-wrap { width: 104px; height: 104px; position: relative; margin: -52px auto 10px; z-index: 2; }
.avatar { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid rgba(8,8,8,.9); background: #111; }
.avatar-ring, .card-frame::after { content: ""; position: absolute; pointer-events: none; opacity: 0; }
.identity { display: inline-flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%; }
.identity h1 { margin: 0; font-size: 27px; letter-spacing: -.5px; font-weight: 750; position: relative; }
.verified { width: 19px; height: 19px; display: inline-flex; }
.verified svg { width: 100%; height: 100%; fill: #6d8fff; }
.verified .check { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.glitch::before { left: 1px; text-shadow: -1px 0 #fff; clip-path: inset(0 0 58% 0); animation: glitchA 4s infinite linear alternate-reverse; }
.glitch::after { left: -1px; text-shadow: 1px 0 #888; clip-path: inset(55% 0 0 0); animation: glitchB 3.2s infinite linear alternate-reverse; }
@keyframes glitchA { 0%,88% { transform: translate(0); } 90% { transform: translate(-2px,-1px); } 92% { transform: translate(2px,1px); } 94%,100% { transform: translate(0); } }
@keyframes glitchB { 0%,86% { transform: translate(0); } 88% { transform: translate(2px,1px); } 91% { transform: translate(-1px,-2px); } 94%,100% { transform: translate(0); } }
.status { margin: 7px 0 18px; color: #a9a9a9; font-size: 13px; line-height: 1.5; }

.spotify-box { display: grid; grid-template-columns: 48px 1fr 32px; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); border-radius: 15px; color: #fff; text-decoration: none; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.spotify-box:hover { transform: translateY(-2px); background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.14); }
.spotify-art-wrap { width: 48px; height: 48px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #101010; }
.spotify-art { width: 100%; height: 100%; object-fit: cover; }
.spotify-icon { width: 25px; fill: #aaa; }
.spotify-label { font-size: 10px; color: #888; margin-bottom: 2px; }
.spotify-track { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spotify-sub { font-size: 11px; color: #858585; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equalizer { display: flex; align-items: end; justify-content: center; gap: 3px; height: 23px; }
.equalizer i { width: 3px; height: 7px; border-radius: 5px; background: #ddd; }
.equalizer.active i:nth-child(1) { animation: eq .75s ease-in-out infinite; }
.equalizer.active i:nth-child(2) { animation: eq .55s ease-in-out infinite .12s; }
.equalizer.active i:nth-child(3) { animation: eq .9s ease-in-out infinite .2s; }
@keyframes eq { 50% { height: 20px; } }

.socials { margin-top: 18px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.social-link { width: 39px; height: 39px; display: grid; place-items: center; color: #aaa; border: 1px solid transparent; border-radius: 12px; transition: transform .2s ease,color .2s ease,background .2s ease; }
.social-link:hover { color: #fff; transform: translateY(-3px); background: rgba(255,255,255,.05); }
.social-link svg { width: 19px; height: 19px; fill: currentColor; stroke: currentColor; stroke-width: 1.3; }


.bomb-button {
  color: #ddd;
  position: relative;
  transition: transform .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease;
}
.bomb-button::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(255, 92, 45, .0);
  opacity: 0;
  transform: scale(.8);
}
.bomb-button:hover, .bomb-button.active {
  color: #fff;
  background: rgba(255, 73, 35, .13);
  box-shadow: 0 0 24px rgba(255, 73, 35, .22);
  transform: scale(1.06);
}
.bomb-button.active::after {
  opacity: 1;
  border-color: rgba(255, 102, 55, .65);
  animation: bombPulse 1.05s ease-out infinite;
}
.bomb-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
@keyframes bombPulse {
  0% { transform: scale(.78); opacity: .75; }
  75%,100% { transform: scale(1.35); opacity: 0; }
}

.bomb-transition { position: fixed; inset: 0; z-index: 9998; pointer-events: none; overflow: hidden; opacity: 0; }
.bomb-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.bomb-shockwave { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border: 3px solid rgba(255, 190, 95, .9); border-radius: 50%; transform: translate(-50%,-50%) scale(.1); opacity: 0; box-shadow: 0 0 25px rgba(255, 70, 25, .55); }
.bomb-boom { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.35) rotate(-8deg); opacity: 0; color: #fff; font-weight: 950; font-size: clamp(58px, 12vw, 150px); line-height: .8; letter-spacing: -.08em; text-shadow: 5px 5px 0 #151515, -2px -2px 0 #151515, 0 0 28px rgba(255, 83, 25, .8); -webkit-text-stroke: 2px #111; }
.bomb-sparks { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0 1px, transparent 2px), radial-gradient(circle at 25% 35%, rgba(255,150,55,.9) 0 2px, transparent 3px), radial-gradient(circle at 72% 63%, rgba(255,80,35,.9) 0 2px, transparent 3px); background-size: 110px 90px, 170px 140px, 150px 130px; }
.bomb-transition.boom-now { opacity: 1; animation: bombShake .55s steps(2,end) both; }
.bomb-transition.boom-now .bomb-flash { animation: bombFlash .34s ease-out both; }
.bomb-transition.boom-now .bomb-shockwave { animation: bombWave .65s cubic-bezier(.12,.7,.2,1) both; }
.bomb-transition.boom-now .bomb-boom { animation: bombBoom .68s cubic-bezier(.12,.75,.2,1) both; }
.bomb-transition.boom-now .bomb-sparks { animation: bombSparks .75s ease-out both; }
@keyframes bombFlash { 0% { opacity: 0; } 12% { opacity: .92; } 100% { opacity: 0; } }
@keyframes bombWave { 0% { transform: translate(-50%,-50%) scale(.1); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(30); opacity: 0; } }
@keyframes bombBoom { 0% { transform: translate(-50%,-50%) scale(.25) rotate(-12deg); opacity: 0; } 18% { transform: translate(-50%,-50%) scale(1.18) rotate(5deg); opacity: 1; } 42% { transform: translate(-50%,-50%) scale(.92) rotate(-2deg); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1.03) rotate(0); opacity: 0; } }
@keyframes bombSparks { 0% { opacity: 0; transform: scale(.7); } 18% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes bombShake { 0%,100% { transform: translate3d(0,0,0); } 10% { transform: translate3d(-7px,3px,0); } 20% { transform: translate3d(6px,-4px,0); } 30% { transform: translate3d(-5px,-3px,0); } 40% { transform: translate3d(4px,4px,0); } 50% { transform: translate3d(-3px,2px,0); } 60% { transform: translate3d(2px,-2px,0); } }
body.bomb-mode .bg-overlay { background: linear-gradient(180deg,rgba(10,0,0,.42),rgba(22,5,0,.66)); }
body.bomb-mode .card-frame { background: linear-gradient(135deg,rgba(255,165,70,.28),rgba(255,55,25,.06)); }
body.bomb-mode .card-inner { border-color: rgba(255,120,55,.12); }
body.bomb-mode .status { color: #c2a69b; }

.youtube-player { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; pointer-events: none; z-index: -1; }
.cursor-dot,.cursor-ring { position:fixed; left:0; top:0; pointer-events:none; z-index:9999; }
.cursor-dot { width:5px;height:5px;background:#fff;border-radius:50%; }
.cursor-ring { width:27px;height:27px;border:1px solid rgba(255,255,255,.5);border-radius:50%;transition:width .2s,height .2s,border-color .2s,background .2s; }
.cursor-ring.hover { width:42px;height:42px;border-color:#fff;background:rgba(255,255,255,.04); }
.cursor-ring.click { width:19px;height:19px; }

@media (max-width:600px) {
  .main { padding:80px 14px 24px; }
  .card-frame { width:min(430px,calc(100vw - 28px)); }
  .profile-content { padding-left:18px;padding-right:18px; }
  .topbar { inset-left:max(10px,env(safe-area-inset-left)); inset-right:max(10px,env(safe-area-inset-right)); }
    }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
}