:root{color-scheme:dark;--fg:#f5f4f7;--muted:#aeaab4}
*{box-sizing:border-box}
html{width:100%;min-height:100%;background:#141417}
html::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:#161619 url("assets/background-1920x1080.jpg") center center / cover no-repeat}
html::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#0a0a0c08,#07070928)}
body{position:relative;z-index:1;margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:28px 14px;background:transparent;color:var(--fg);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;overflow-x:hidden}
.main{width:min(475px,100%);min-width:0;margin:auto}
.panel{position:relative;border:1px solid rgba(220,220,225,.19);border-radius:23px;background:rgba(27,27,30,.72);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);box-shadow:0 14px 52px rgba(0,0,0,.4);transition:border-color .3s ease,background .3s ease,box-shadow .3s ease}
.panel:hover{border-color:rgba(255,255,255,.34);background:rgba(34,34,38,.76);box-shadow:0 16px 58px #0008,0 0 26px rgba(255,255,255,.10),inset 0 0 16px rgba(255,255,255,.018)}
.inner{width:100%;padding:27px 25px 25px;display:flex;flex-direction:column;align-items:center;text-align:center}
.avatar{display:block;width:101px;height:101px;flex:0 0 101px;border-radius:50%;object-fit:cover;border:2px solid #ffffffe6;box-shadow:0 4px 17px #0007,0 0 14px #ffffff35;margin:0 auto}
.name{width:100%;margin:15px 0 0;font-size:34px;letter-spacing:-.055em;line-height:1.2;font-weight:760;text-shadow:0 0 8px #fff8,0 0 27px #fff6;text-align:center}
.location{width:100%;margin-top:15px;color:#bbb8c1;font-size:12px;letter-spacing:.075em;text-align:center}
.location i{display:inline-block;background:#d9dce6;width:7px;height:7px;border-radius:50%;box-shadow:0 0 8px white;margin-right:6px;vertical-align:middle}
.quote{width:100%;max-width:390px;margin:16px auto 20px;line-height:1.65;font-size:13px;font-style:italic;color:#c9c6ce;text-align:center}
.socials{display:flex;align-items:center;justify-content:center;gap:26px;width:100%;margin:0 0 22px;flex-wrap:wrap}
.socials a,.socials span{display:inline-flex;align-items:center;justify-content:center;padding:5px 2px;color:#f7f7f8;background:transparent;text-decoration:none;border:0;font-size:14px;font-weight:700;transition:transform .23s ease,text-shadow .23s ease}
.socials a:hover{transform:translateY(-3px);text-shadow:0 0 9px #fff,0 0 23px #ffffffe0}
.socials span{opacity:.64}
.nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin:0 0 18px}
.nav a{display:grid;place-items:center;min-height:37px;padding:9px 4px;border-radius:10px;border:1px solid #ffffff29;background:#ffffff0b;color:#e4e1e8;text-decoration:none;font-size:11px;font-weight:650;transition:background .2s,border-color .2s,transform .2s}
.nav a:hover{background:#ffffff20;border-color:#ffffff55;transform:translateY(-2px)}
.nav a.active{background:#e9e9ed;color:#17171a;border-color:#e9e9ed}
.player{width:100%;display:flex;align-items:center;gap:10px;min-width:0;padding:12px;background:#10101365;border:1px solid #ffffff22;border-radius:14px;text-align:left}
.disc{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:10px;background:#ffffff23;color:white;font-size:18px}
.track{min-width:0;flex:1}.track strong{display:block;font-size:12px;white-space:nowrap}.track small{display:block;font-size:10px;color:#aaa7b0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.play{display:grid;place-items:center;align-content:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:#f0f0f4;color:#17171b;cursor:pointer;line-height:0}
.play svg{display:block;width:15px;height:15px;fill:currentColor;position:relative}.play .play-icon{left:1px}.play .pause-icon{left:0}
.time{font-size:10px;color:#c4c0cb;white-space:nowrap;font-variant-numeric:tabular-nums}.vol{width:52px;min-width:0;accent-color:#f3f2f7}
.gear-panel .avatar{width:97px;height:97px;flex-basis:97px}.gear-panel .name{font-size:31px}
.gear-title{align-self:stretch;margin:28px 0 20px;color:#c0bcc6;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-align:center}
.gear-grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;text-align:left;margin-bottom:30px}
.gear{display:flex;gap:10px;min-width:0;align-items:center}
.gear-icon{width:26px;height:26px;flex:0 0 26px;color:#eceaf0;filter:drop-shadow(0 0 5px #ffffff20)}.gear-icon svg{width:100%;height:100%}
.gear-copy{min-width:0}.gear-copy span{display:block;color:#aaa5b1;font-size:11px;margin-bottom:3px}.gear-copy strong{display:block;color:#fff;font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.gear-panel .nav{margin-bottom:0}
@media(max-width:480px){body{padding:16px 12px}.inner{padding:24px 17px}.gear-grid{gap:21px 10px}.gear{gap:7px}.gear-copy strong{font-size:12px}.track small{max-width:126px}.player{gap:7px;padding:10px}.vol{width:42px}.time{font-size:9px}}
@media(pointer:fine) and (prefers-reduced-motion:no-preference){body,body *{cursor:none!important}.cursor-ring{position:fixed;top:0;left:0;z-index:9999;width:20px;height:20px;border:2px solid white;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 9px #fff,0 0 19px #ffffffa0;pointer-events:none;opacity:0;transition:width .15s,height .15s,box-shadow .15s}.cursor-ring.visible{opacity:1}.cursor-ring.hover{width:25px;height:25px;box-shadow:0 0 12px #fff,0 0 27px #fff8}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* v9: avatar floats over the top rim, preserving card alignment */
body{padding-top:90px;padding-bottom:35px}
.panel{overflow:visible}
.inner{padding-top:0}
.avatar,.gear-panel .avatar{position:relative;z-index:2;margin:-49px auto 0;border:3px solid #fff;box-shadow:0 5px 24px #0007,0 0 15px #ffffff66;animation:avatarFloat 5s ease-in-out infinite}
.avatar{width:104px;height:104px;flex-basis:104px}
.gear-panel .avatar{width:104px;height:104px;flex-basis:104px}
.name{margin-top:16px}
.gear-title::first-letter{text-transform:uppercase}
@keyframes avatarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:480px){body{padding-top:75px;padding-bottom:20px}}

/* v11: immersive entry; audio unlocks from the actual click */
body.enter-pending{overflow:hidden}
body.enter-pending #profile-content{filter:blur(13px);transform:scale(1.035);opacity:.4;pointer-events:none;user-select:none}
#profile-content{transition:filter .7s ease,transform .7s ease,opacity .7s ease}
.entry-screen{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:rgba(9,9,12,.45);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);transition:opacity .7s ease,visibility .7s ease}
.entry-link{border:0;background:transparent;color:#f7f5f9;padding:18px 25px;font:500 clamp(20px,3vw,29px)/1.3 Inter,system-ui,sans-serif;letter-spacing:.035em;text-shadow:0 0 18px #fff7,0 0 38px #ffffff44;transition:transform .25s ease,text-shadow .25s ease;cursor:pointer}
.entry-link:hover,.entry-link:focus-visible{transform:scale(1.06);text-shadow:0 0 18px #fff,0 0 42px #ffffffb0;outline:none}
.entry-dots{display:inline-block;animation:entryPulse 1.6s ease-in-out infinite}
.entry-caption{font-size:10px;letter-spacing:.3em;color:#d6d1dd9c}
body.entered .entry-screen{opacity:0;visibility:hidden;pointer-events:none}
@keyframes entryPulse{50%{opacity:.32}}
@media(prefers-reduced-motion:reduce){.entry-dots{animation:none!important}}

/* Album artwork from supplied image */
.album-art{display:block;object-fit:cover;object-position:center;width:42px;height:42px;flex:0 0 42px;border-radius:9px;border:1px solid #ffffff29;box-shadow:0 2px 10px #0005}
.track strong{overflow:hidden;text-overflow:ellipsis}

/* Kazakhstan location pin */
.location{display:flex;align-items:center;justify-content:center;gap:4px;letter-spacing:0.01em}
.location-pin{display:block;width:11px;height:17px;flex:none}
.location i{display:none}

/* v14: Discord Servers replaces Profile in navigation. */
.home-avatar{display:block;width:104px;height:55px;align-self:center;position:relative;z-index:2;text-decoration:none;flex:0 0 55px}
.home-avatar .avatar,.gear-panel .home-avatar .avatar{margin:-49px auto 0}
.home-name{color:inherit;text-decoration:none}.home-name:hover{text-shadow:0 0 20px #fff}
.server-list{display:grid;gap:12px;width:100%;margin:0 0 25px;text-align:left}
.server-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #ffffff2a;border-radius:15px;background:#ffffff0b;min-width:0;transition:background .25s,border-color .25s,box-shadow .25s}
.server-card:hover{background:#ffffff17;border-color:#ffffff68;box-shadow:0 0 20px #ffffff12}
.server-icon{height:49px;width:49px;flex:0 0 49px;display:grid;place-items:center;color:#efeff3;border-radius:13px;background:#ffffff16;border:1px solid #ffffff24}
.server-icon svg{height:28px;width:28px}
.server-copy{flex:1;min-width:0}.server-copy h2{font-size:15px;font-weight:750;margin:0 0 5px;line-height:1.3}.server-copy p{margin:0;color:#b8b5c0;font-size:11px;overflow-wrap:anywhere}
.server-join{flex:none;display:inline-flex;gap:5px;align-items:center;color:#17171b;background:#e9e9ed;border-radius:9px;padding:9px 11px;font-size:12px;font-weight:750;text-decoration:none;transition:transform .2s,box-shadow .2s}
.server-join:hover{transform:translateY(-2px);box-shadow:0 0 19px #ffffff50}
.home-back{color:#c9c6cd;text-decoration:none;font-size:11px;margin-top:16px;transition:text-shadow .2s}.home-back:hover{color:#fff;text-shadow:0 0 12px #fff7}
@media(max-width:420px){.server-card{padding:10px;gap:8px}.server-icon{width:42px;height:42px;flex-basis:42px}.server-join{padding:8px 9px}.nav a{font-size:10px}}

/* Supplied Discord artwork */
.server-icon{overflow:hidden;border-radius:50%;background:#11131a;flex-shrink:0}
.server-icon img{display:block;width:100%;height:100%;object-fit:cover}

/* v16: make server logos fit their icon containers cleanly */
.server-icon{width:58px;height:58px;flex-basis:58px;border-radius:50%;overflow:hidden;background:#111319}
.server-icon img{width:100%;height:100%;object-fit:cover;object-position:center}
.server-icon.udp-icon{background:#202027;padding:6px}
.server-icon.udp-icon img{object-fit:contain}
@media(max-width:420px){.server-icon{width:52px;height:52px;flex-basis:52px}.server-icon.udp-icon{padding:5px}}

/* Prevent ordinary text selection across the site */
html, body, body * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
img { -webkit-user-drag: none; user-drag: none; }

/* v21: all sections share one card and a single always-visible audio element. */
.spa-view{display:none}
.spa-view.active{display:flex}
.persistent-player{padding:0 25px 25px}
.gear-panel .nav{margin-bottom:18px}
.gear-panel .home-back{margin-top:0;margin-bottom:16px}
#profile-panel{transition:border-color .25s ease,background .25s ease,box-shadow .25s ease}
@media(max-width:480px){.persistent-player{padding:0 17px 21px}}


/* v22: subtle content-only view transitions; music never remounts */
.spa-view.spa-leaving{animation:kryynSectionOut .17s ease-in both;pointer-events:none}
.spa-view.spa-entering{animation:kryynSectionIn .36s cubic-bezier(.2,.75,.25,1) both}
@keyframes kryynSectionOut{
  from{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  to{opacity:0;transform:translateY(-7px) scale(.993);filter:blur(2px)}
}
@keyframes kryynSectionIn{
  from{opacity:0;transform:translateY(13px) scale(.989);filter:blur(3px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
  .spa-view.spa-leaving,.spa-view.spa-entering{animation:none!important}
}

/* Discord membership badges — external, hourly cached statistics */
.server-copy .live-member-count{margin-top:5px;min-height:19px;display:flex;align-items:center;color:#bdbdc4;font-size:11px;}
.member-badge{display:block;max-width:165px;max-height:24px;width:auto;height:auto;border:0;object-fit:contain;object-position:left center;}
.live-member-count span{font-size:11px;color:#a6a6b1;}