/* =========================================================
   Scortum — site look layer (loaded after style.css)
   Same visual language as /news/: Unbounded headings, glowing
   gradient buttons, glass cards with cursor glow, scroll reveals.
   Only visuals live here — layout/logic stay in style.css/script.js.
   ========================================================= */

:root {
    --bg-overlay: rgba(7, 8, 12, 0.8);
    --card-bg: rgba(13, 15, 22, 0.78);
    --border-color: rgba(255, 255, 255, 0.08);
    --sfx-display: 'Unbounded', 'Inter', sans-serif;
    --sfx-mono: 'JetBrains Mono', ui-monospace, monospace;
    --sfx-ease: cubic-bezier(.2, .8, .2, 1);
    --sfx-grad: linear-gradient(135deg, #6366f1, color-mix(in srgb, #6366f1 55%, #ec4899));
}

body { background: #07080c; }

/* backdrop: darker edges so cards read better; the photo breathes slowly */
.site-backdrop::after {
    background:
        radial-gradient(ellipse 90% 70% at 50% 0%, rgba(7, 8, 12, .55), rgba(7, 8, 12, .86) 70%),
        linear-gradient(180deg, rgba(7, 8, 12, .2), rgba(7, 8, 12, .7));
}

.site-backdrop img { animation: sfx-breathe 40s ease-in-out infinite alternate; will-change: transform; }

@keyframes sfx-breathe { to { transform: translate(-50%, -50%) scale(1.08); } }

.sfx-particles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* live backdrop blur over a fixed photo re-blurs on every scroll frame — replaced by opaque glass */
.block-section,
.nav-btn,
.online-badge,
.cmd-palette,
.user-profile {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---------- typography ---------- */

.brand h1,
.section-header h2,
.home-visit-title,
.store-panel-title,
.store-rail-title {
    font-family: var(--sfx-display);
    letter-spacing: -.01em;
}

.brand h1 { font-size: 24px; letter-spacing: .06em; }

.brand-logo {
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 30px rgba(0, 0, 0, .5), 0 0 40px -10px #6366f1;
    transition: transform .4s var(--sfx-ease), box-shadow .4s;
}

.brand:hover .brand-logo { transform: rotate(-4deg) scale(1.05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 34px rgba(0, 0, 0, .55), 0 0 50px -6px #6366f1; }

.section-header h2 { font-size: 20px; font-weight: 800; }

/* ---------- buttons ---------- */

.btn-hero-primary,
.btn-auth {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--sfx-grad);
    border-radius: 12px;
    box-shadow: 0 10px 28px -8px rgba(99, 102, 241, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .25s var(--sfx-ease), box-shadow .25s;
}

.btn-hero-primary::after,
.btn-auth::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: sfx-shine 4.5s ease-in-out infinite;
}

.btn-hero-primary:hover,
.btn-auth:hover {
    background: var(--sfx-grad);
    transform: translateY(-2px);
    box-shadow: 0 16px 38px -8px rgba(99, 102, 241, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}

@keyframes sfx-shine {
    0%, 55% { transform: translateX(-120%); }
    80%, 100% { transform: translateX(120%); }
}

.btn-secondary {
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
    transition: background .25s, transform .25s var(--sfx-ease), border-color .25s;
}

.btn-secondary:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }

.btn-hero-primary.is-copied,
.home-ip-copy.is-copied { background: linear-gradient(135deg, #10b981, #059669); }

/* ---------- navigation ---------- */

.main-nav { gap: 10px; }

/* no overflow:hidden here — the store button's «Выгодные предложения» label hangs above its top edge */
.nav-btn {
    position: relative;
    padding: 12px 24px;
    border-radius: 14px;
    background: rgba(13, 15, 22, .82);
    border-color: rgba(255, 255, 255, .08);
    transition: transform .25s var(--sfx-ease), border-color .25s, box-shadow .25s, background .25s;
}

.nav-btn::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #6366f1, #ec4899);
    transform: translateX(-50%);
    transition: width .35s var(--sfx-ease);
}

.nav-btn:hover { transform: translateY(-2px); border-color: rgba(129, 140, 248, .4); }
.nav-btn:hover::before { width: 40%; }

.nav-btn.active {
    background: linear-gradient(180deg, rgba(99, 102, 241, .28), rgba(99, 102, 241, .12));
    border-color: rgba(129, 140, 248, .6);
    box-shadow: 0 10px 30px -12px rgba(99, 102, 241, .9), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.nav-btn.active::before { width: 60%; }

.online-badge {
    background: rgba(13, 15, 22, .88);
    border-color: rgba(16, 185, 129, .35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 24px -10px #10b981;
}

.online-badge::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
    vertical-align: 1px;
    animation: sfx-pulse 1.8s ease-in-out infinite;
}

@keyframes sfx-pulse { 50% { opacity: .35; transform: scale(.7); } }

/* ---------- cards ---------- */

.block-section {
    position: relative;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 40%),
        rgba(13, 15, 22, .8);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* soft light that follows the cursor (set by site-fx.js) */
.block-section::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(600px circle at var(--mx, 50%) var(--my, -20%), rgba(129, 140, 248, .09), transparent 45%);
    opacity: 0;
    transition: opacity .4s;
}

.block-section:hover::after { opacity: 1; }

/* ---------- scroll reveal (site-fx.js tags elements) ---------- */

.sfx-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .9s var(--sfx-ease), transform .9s var(--sfx-ease);
    transition-delay: var(--sfx-d, 0s);
}

.sfx-reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   HOME
   ========================================================= */

.home-visit {
    min-height: 560px;
    padding: clamp(28px, 4vw, 48px);
    border-radius: 28px;
    isolation: isolate;
    background: #0b0c12;
    border-color: rgba(129, 140, 248, .25);
    box-shadow: 0 40px 100px -40px rgba(99, 102, 241, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.home-visit-grid { position: relative; z-index: 2; min-height: 100%; align-items: end; }

.sfx-hero-media {
    position: absolute;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    border-radius: inherit;
}

.sfx-hero-media img,
.sfx-hero-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sfx-hero-media video { opacity: 0; transition: opacity .9s ease; }
.sfx-hero-media video.is-on { opacity: 1; }

.sfx-hero-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7, 8, 12, .94) 0%, rgba(7, 8, 12, .7) 42%, rgba(7, 8, 12, .25) 75%, rgba(7, 8, 12, .5) 100%),
        linear-gradient(0deg, rgba(7, 8, 12, .85) 0%, rgba(7, 8, 12, 0) 45%);
}

.home-visit .sfx-hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.home-visit-brand {
    font-weight: 800;
    letter-spacing: .2em;
    color: #a5b4fc;
}

.home-version-pill {
    background: var(--sfx-grad);
    color: #fff;
    border: 0;
    box-shadow: 0 0 20px -4px rgba(99, 102, 241, .8);
}

.home-visit-title {
    font-size: clamp(30px, 4.6vw, 58px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.02em;
    max-width: 12ch;
    background: linear-gradient(100deg, #fff 0%, #fff 35%, #c7d2fe 60%, #f9a8d4 85%, #fcd34d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .55));
    animation: sfx-title-in 1.1s var(--sfx-ease) both .15s;
}

@keyframes sfx-title-in {
    from { opacity: 0; transform: translateY(24px); filter: blur(10px) drop-shadow(0 10px 30px rgba(0, 0, 0, .55)); }
}

.home-visit-sub { color: rgba(255, 255, 255, .8); font-size: 16px; }

.home-visit-main > * { animation: sfx-fade-up .9s var(--sfx-ease) both; }
.home-visit-main > :nth-child(1) { animation-delay: .05s; }
.home-visit-main > :nth-child(3) { animation-delay: .35s; }
.home-visit-main > :nth-child(4) { animation-delay: .45s; }
.home-visit-main > :nth-child(5) { animation-delay: .55s; }
.home-visit-main > :nth-child(6) { animation-delay: .65s; }
.home-visit-main > :nth-child(7) { animation-delay: .75s; }
.home-visit-main > .home-visit-title { animation: sfx-title-in 1.1s var(--sfx-ease) both .15s; }

@keyframes sfx-fade-up { from { opacity: 0; transform: translateY(22px); } }

.home-chip {
    background: rgba(10, 12, 18, .7);
    border-color: rgba(255, 255, 255, .12);
}

.home-ip-card {
    background: rgba(10, 12, 18, .78);
    border: 1px solid rgba(129, 140, 248, .3);
    border-radius: 18px;
    box-shadow: 0 20px 50px -24px rgba(99, 102, 241, .8);
}

.home-ip-value {
    font-family: var(--sfx-mono);
    font-size: 22px;
    letter-spacing: .04em;
    background: linear-gradient(90deg, #fff, #c7d2fe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* countdown (inserted by site-fx.js) */
.sfx-countdown {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin: 18px 0 4px;
}

.sfx-cd-label {
    width: 100%;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.sfx-cd-cell {
    min-width: 66px;
    padding: 9px 10px 7px;
    border-radius: 12px;
    text-align: center;
    background: rgba(10, 12, 18, .75);
    border: 1px solid rgba(255, 255, 255, .12);
}

.sfx-cd-cell b {
    display: block;
    font-family: var(--sfx-display);
    font-size: 24px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.sfx-cd-cell span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sfx-countdown.is-live .sfx-cd-cell { border-color: rgba(16, 185, 129, .5); }

/* modes aside: glass panel with picture tiles */
.home-visit-aside {
    background: rgba(9, 10, 16, .72);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .9);
    animation: sfx-fade-up 1s var(--sfx-ease) both .5s;
}

.home-aside-title { font-family: var(--sfx-display); font-size: 16px; }

.home-mode-item {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 58px;
    border-radius: 14px;
    background-color: rgba(17, 20, 30, .9);
    transition: transform .3s var(--sfx-ease), border-color .3s, box-shadow .3s;
}

.home-mode-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--img, none) center / cover;
    opacity: .55;
    transition: opacity .4s, transform .8s var(--sfx-ease);
}

.home-mode-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(9, 10, 16, .95) 0%, rgba(9, 10, 16, .75) 55%, rgba(9, 10, 16, .35) 100%);
}

.home-mode-item:hover {
    transform: translateX(4px);
    border-color: color-mix(in srgb, var(--c, #6366f1) 70%, transparent);
    box-shadow: 0 10px 30px -12px var(--c, #6366f1);
}

.home-mode-item:hover::before { opacity: .85; transform: scale(1.08); }

.home-mode-item > svg,
.home-mode-item > i {
    color: var(--c, #a5b4fc);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c, #6366f1) 70%, transparent));
}

.home-mode-item strong { font-weight: 800; }

/* news block → same look as /news/ */
.home-news-head h2 { font-family: var(--sfx-display); }

.news-card {
    border-radius: 20px;
    overflow: hidden;
    background: rgba(13, 15, 22, .85);
    border-color: rgba(255, 255, 255, .08);
    transition: transform .35s var(--sfx-ease), border-color .35s, box-shadow .35s;
}

.news-card:hover {
    transform: translateY(-4px);
    border-color: rgba(129, 140, 248, .55);
    box-shadow: 0 40px 80px -36px rgba(99, 102, 241, .9);
}

.news-card .news-preview { transition: transform 1s var(--sfx-ease); }
.news-card:hover .news-preview { transform: scale(1.05); }

.news-card-feature .news-title {
    font-family: var(--sfx-display);
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.15;
}

.news-meta span:first-child {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sfx-grad);
    color: #fff;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 11px;
}

/* ---------- phones ---------- */

@media (max-width: 650px) {
    .home-visit { min-height: 0; border-radius: 22px; }
    .home-visit-title { font-size: clamp(28px, 8.6vw, 40px); }
    .home-ip-value { font-size: 18px; }
    .sfx-cd-cell { flex: 1; min-width: 0; padding: 8px 4px 6px; }
    .sfx-cd-cell b { font-size: 20px; }
    .sfx-hero-shade {
        background: linear-gradient(180deg, rgba(7, 8, 12, .55) 0%, rgba(7, 8, 12, .8) 50%, rgba(7, 8, 12, .95) 100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfx-reveal { opacity: 1; transform: none; transition: none; }
    .site-backdrop img,
    .btn-hero-primary::after,
    .btn-auth::after,
    .online-badge::before,
    .home-visit-title,
    .home-visit-main > *,
    .home-visit-aside { animation: none; }
}

/* ---------- page-to-page transition (site ⇄ /news/) ----------
   Same-origin navigations cross-fade instead of blinking; the logo flies
   between the two headers. news.css opts in the same way. */
@view-transition { navigation: auto; }

.brand-logo { view-transition-name: sfx-logo; }

::view-transition-old(root) { animation: sfx-vt-out .35s ease both; }
::view-transition-new(root) { animation: sfx-vt-in .5s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-group(sfx-logo) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }

@keyframes sfx-vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes sfx-vt-in { from { opacity: 0; transform: scale(1.015); } }

/* landed through the cross-fade: first screen is shown as-is (see site-fx.js pagereveal) */
html.sfx-vt .home-visit-title,
html.sfx-vt .home-visit-main > *,
html.sfx-vt .home-visit-aside { animation: none; }
.sfx-reveal.sfx-instant { transition: none; }

/* browsers without view transitions: at least fade the page in */
@supports not (view-transition-name: a) {
    body { animation: sfx-vt-in .45s ease both; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* =========================================================
   OWN PROFILE (/profile) — same look as the public profile page
   ========================================================= */

.profile-aside,
.profile-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 40%),
        rgba(13, 15, 22, .86);
    border-color: rgba(255, 255, 255, .08);
    border-radius: 22px;
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.profile-panel { animation: sfx-fade-up .5s var(--sfx-ease) both; }

/* skin on a glowing podium */
.profile-skin-wrap {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--player-rank-color, #6366f1) 35%, transparent), transparent 62%),
        linear-gradient(180deg, #121628, #0b0d16);
    border: 1px solid color-mix(in srgb, var(--player-rank-color, #6366f1) 30%, rgba(255, 255, 255, .06));
    border-radius: 18px;
}

.profile-skin-wrap::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 8px;
    height: 26px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--player-rank-color, #6366f1) 60%, transparent), transparent 70%);
    filter: blur(5px);
}

.profile-skin-wrap .skin-img {
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .6));
    animation: pl-idle 4s ease-in-out infinite alternate;
}

@keyframes pl-idle { from { transform: translateY(0); } to { transform: translateY(-6px); } }

.player-nickname {
    font-family: var(--sfx-display);
    font-size: 19px;
    letter-spacing: .02em;
    word-break: break-all;
}

/* section menu */
.profile-nav { gap: 6px; }

.profile-nav-btn {
    position: relative;
    border-radius: 12px;
    font-weight: 700;
    transition: background .2s, color .2s, transform .25s var(--sfx-ease), border-color .2s;
}

.profile-nav-btn:hover { transform: translateX(3px); color: #fff; background: rgba(255, 255, 255, .05); }

.profile-nav-btn.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(99, 102, 241, .3), rgba(99, 102, 241, .08));
    border-color: rgba(129, 140, 248, .5);
    box-shadow: 0 10px 26px -14px #6366f1;
}

.profile-nav-btn.active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #818cf8, #ec4899);
}

.btn-logout { border-radius: 12px; transition: background .2s, transform .25s var(--sfx-ease); }
.btn-logout:hover { transform: translateY(-2px); }

.profile-panel-head h3,
.season-title { font-family: var(--sfx-display); }

/* season banner */
.season-banner {
    border-width: 1px;
    border-radius: 20px;
    backdrop-filter: none;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(245, 158, 11, .22), transparent 55%),
        radial-gradient(120% 160% at 100% 100%, rgba(168, 85, 247, .22), transparent 55%),
        rgba(13, 15, 22, .8);
}

/* overview widgets */
.widget-box {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border-color: rgba(255, 255, 255, .08);
    transition: transform .3s var(--sfx-ease), border-color .3s, box-shadow .3s;
}

.widget-box:hover { transform: translateY(-3px); border-color: rgba(129, 140, 248, .35); box-shadow: 0 20px 40px -24px rgba(99, 102, 241, .8); }

.widget-val { font-family: var(--sfx-display); }

/* mode tabs: wrapping pills (7 modes) */
.stats-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stats-tabs .tab-btn {
    flex: 1 1 130px;
    border-radius: 12px;
    transition: background .2s, color .2s, border-color .2s, transform .25s var(--sfx-ease), box-shadow .2s;
}

.stats-tabs .tab-btn:hover { transform: translateY(-2px); color: #fff; }

.stats-tabs .tab-btn.active {
    background: linear-gradient(135deg, #6366f1, color-mix(in srgb, #6366f1 55%, #ec4899));
    border-color: transparent;
    box-shadow: 0 10px 24px -10px rgba(99, 102, 241, .9);
}

.stats-tabs .tab-btn.active svg { color: #fff !important; }

/* stat tiles, tinted per mode */
#stats-islands { --c: #22c55e; }
#stats-pickaxe { --c: #8b5cf6; }
#stats-grief { --c: #ef4444; }
#stats-randomrush { --c: #f97316; }
#stats-fireball { --c: #f43f5e; }
#stats-gungame { --c: #f59e0b; }
#stats-overlord { --c: #a855f7; }

.mode-stats-panel.active { animation: sfx-fade-up .45s var(--sfx-ease) both; }

.stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c, #6366f1) 12%, rgba(255, 255, 255, .03)), rgba(255, 255, 255, .015));
    border: 1px solid color-mix(in srgb, var(--c, #6366f1) 28%, rgba(255, 255, 255, .06));
    transition: transform .3s var(--sfx-ease), border-color .3s, box-shadow .3s;
}

.stat-card::before {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    right: -60px;
    top: -60px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c, #6366f1) 28%, transparent), transparent 70%);
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--c, #6366f1) 60%, transparent);
    box-shadow: 0 18px 36px -22px var(--c, #6366f1);
}

.stat-card-label {
    position: relative;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 11.5px;
}

.stat-card-value {
    position: relative;
    font-family: var(--sfx-display);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .profile-skin-wrap .skin-img,
    .profile-panel,
    .mode-stats-panel.active { animation: none; }
}

/* ---------- tops: nicknames lead to /profile/<nick> ---------- */
.top-nick-link {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .25s var(--sfx-ease), filter .2s;
}

.top-nick-link:hover,
.top-nick-link:focus-visible {
    background-size: 100% 1px;
    filter: brightness(1.25) drop-shadow(0 0 8px currentColor);
}

.top-avatar-link,
.top-player-avatar-link { display: inline-flex; flex: none; border-radius: 6px; transition: transform .2s var(--sfx-ease); }
.top-player-avatar-link { border-radius: 14px; }
.top-avatar-link:hover,
.top-player-avatar-link:hover { transform: scale(1.08); }