@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --bg-base: #0a0808;
    --bg-elevated: #14100f;
    --bg-card: rgba(20, 16, 15, 0.6);
    --bg-card-solid: #14100f;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 110, 40, 0.4);
    --text-primary: #f5f0eb;
    --text-secondary: #9a8f87;
    --text-muted: #5a4f47;
    --accent-orange: #ff6e28;
    --accent-red: #e63946;
    --accent-yellow: #ffc629;
    --accent-green: #4ade80;
    --gradient-primary: linear-gradient(135deg, #ff6e28 0%, #e63946 100%);
    --gradient-glow: radial-gradient(circle at 50% 50%, rgba(255,110,40,0.25) 0%, transparent 60%);
    --status-online: #4ade80;
}

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

html, body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: 'Manrope', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,110,40,0.15), transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(230,57,70,0.08), transparent 70%),
        radial-gradient(ellipse 50% 30% at 20% 80%, rgba(255,198,41,0.05), transparent 70%);
    pointer-events: none; z-index: 0;
}

body::after {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none; z-index: 1;
    mix-blend-mode: overlay;
}


.scs-page-wrap {
    position: relative; z-index: 2;
}

.container {
    max-width: 1440px; margin: 0 auto;
    padding: 0 40px;
}


.scs-header {
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(20px);
    background: rgba(10, 8, 8, 0.75);
    border-bottom: 1px solid var(--border-subtle);
}

.scs-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 40px;
    max-width: 1440px; margin: 0 auto;
    gap: 24px;
}


.scs-logo {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; flex-shrink: 0;
}

.scs-logo-mark {
    width: 42px; height: 42px;
}

.scs-logo-mark svg {
    width: 100%; height: 100%; overflow: visible;
}

.scs-logo-mark .s-shape {
    fill: #ffffff; transition: fill 0.3s;
}

.scs-logo-mark .s-corner {
    fill: var(--accent-yellow);
    transform-origin: 8px 8px;
    animation: cornerPulse 2.4s ease-in-out infinite;
}

@keyframes cornerPulse {
    0%, 100% { fill: var(--accent-yellow); transform: scale(1); }
    50% { fill: var(--accent-orange); transform: scale(1.08); }
}

.scs-logo:hover .s-shape { fill: var(--accent-orange); }

.scs-logo-text {
    display: flex; flex-direction: column; line-height: 1;
}

.scs-logo-text .logo-main {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px; letter-spacing: 2px;
    color: var(--text-primary);
}

.scs-logo-text .logo-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: var(--text-muted);
    letter-spacing: 2.5px; margin-top: 3px;
    text-transform: uppercase;
}


.scs-nav ul {
    display: flex; list-style: none; gap: 4px;
}

.scs-nav a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 16px;
    color: var(--text-secondary); text-decoration: none;
    font-size: 14px; font-weight: 500;
    border-radius: 8px; transition: all 0.2s;
    border: 1px solid transparent;
}

.scs-nav a svg { width: 15px; height: 15px; opacity: 0.8; }

.scs-nav a:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.04);
}

.scs-nav a.active {
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(255,110,40,0.15), rgba(230,57,70,0.1));
    border-color: var(--border-strong);
}


.scs-header-right {
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
}


.scs-social-btn {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-secondary);
    text-decoration: none; transition: all 0.2s;
}

.scs-social-btn.tg:hover {
    color: #fff;
    background: rgba(34,158,217,0.15);
    border-color: rgba(34,158,217,0.4);
}

.scs-social-btn.dc:hover {
    color: #fff;
    background: rgba(88,101,242,0.15);
    border-color: rgba(88,101,242,0.4);
}


.scs-h-divider {
    width: 1px; height: 22px;
    background: var(--border-subtle);
    margin: 0 2px;
}


.scs-balance-pill {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 5px 5px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
}

.scs-balance-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 700;
    white-space: nowrap;
}

.scs-balance-amount .cur {
    color: var(--accent-orange); margin-left: 4px;
}

.scs-balance-topup {
    background: var(--gradient-primary);
    color: #fff; border: none;
    padding: 7px 14px; border-radius: 999px;
    font-size: 12px; font-weight: 700; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.5px;
    transition: transform 0.2s; text-decoration: none;
    white-space: nowrap;
}

.scs-balance-topup:hover { transform: translateY(-1px); }


.scs-user-pill {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 12px 5px 5px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 999px; cursor: pointer;
    text-decoration: none; color: var(--text-primary);
    transition: all 0.2s;
}

.scs-user-pill:hover { border-color: var(--border-strong); }

.scs-user-pill::after {
    content: '▾'; color: var(--text-muted); font-size: 10px;
}

.scs-user-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #2a1f1a, #14100f);
    border: 2px solid var(--accent-orange);
    display: grid; place-items: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12px; color: var(--accent-orange);
    text-transform: uppercase; overflow: hidden;
}

.scs-user-avatar img {
    width: 100%; height: 100%; object-fit: cover;
    image-rendering: pixelated;
}

.scs-user-name {
    font-size: 13px; font-weight: 600;
}


.scs-login-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-subtle);
    border-radius: 8px; color: var(--text-secondary);
    text-decoration: none; font-size: 14px; font-weight: 600;
    transition: all 0.2s;
}

.scs-login-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.scs-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 20px;
    background: var(--gradient-primary);
    color: #fff; border: none; border-radius: 8px;
    font-weight: 700; font-size: 14px; cursor: pointer;
    text-decoration: none; transition: transform 0.2s;
    box-shadow: 0 8px 24px -8px rgba(255,110,40,0.4);
}

.scs-btn-primary:hover { transform: translateY(-1px); }


.scs-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 32px 0; margin-top: 60px;
}

.scs-footer-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}

.scs-footer-links { display: flex; gap: 24px; }

.scs-footer-links a {
    color: var(--text-muted); text-decoration: none;
    font-size: 13px; transition: color 0.2s;
}

.scs-footer-links a:hover { color: var(--text-primary); }

.scs-footer-socials { display: flex; gap: 8px; }

.scs-footer-social {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 8px; text-decoration: none;
    color: var(--text-secondary); font-size: 12px; font-weight: 600;
    transition: all 0.2s;
}

.scs-footer-social.tg:hover {
    color: #fff; background: rgba(34,158,217,0.15);
    border-color: rgba(34,158,217,0.4);
}

.scs-footer-social.dc:hover {
    color: #fff; background: rgba(88,101,242,0.15);
    border-color: rgba(88,101,242,0.4);
}

.scs-footer-copy {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--text-muted);
    display: flex; align-items: center; gap: 10px;
}

.scs-age-badge {
    padding: 2px 8px;
    background: rgba(230,57,70,0.15);
    border: 1px solid rgba(230,57,70,0.3);
    border-radius: 4px; color: var(--accent-red);
    font-weight: 700; font-size: 10px;
}


.scs-hero {
    position: relative;
    min-height: calc(100vh - 72px);
    display: flex; align-items: center;
    padding: 60px 0;
}

.scs-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 60px; width: 100%; align-items: center;
}

.scs-hero-tag {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px;
    background: rgba(255,110,40,0.08);
    border: 1px solid rgba(255,110,40,0.25);
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--accent-orange);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 24px;
}

.scs-hero-tag::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--accent-orange); border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-orange);
}

.scs-hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(56px, 7vw, 96px);
    line-height: 0.92; letter-spacing: -1px;
    margin-bottom: 24px;
}

.scs-hero-title .line-1 { display: block; color: var(--text-primary); }

.scs-hero-title .line-2 {
    display: block;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.scs-hero-title .line-3 {
    display: block; color: var(--text-primary);
    font-size: 0.5em; font-family: 'Manrope', sans-serif;
    font-weight: 800; letter-spacing: -0.5px; margin-top: 12px;
}

.scs-hero-sub {
    font-size: 17px; line-height: 1.6;
    color: var(--text-secondary);
    max-width: 480px; margin-bottom: 36px;
}

.scs-hero-cta { display: flex; gap: 14px; margin-bottom: 48px; flex-wrap: wrap; }

.scs-btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 24px;
    background: rgba(255,255,255,0.04);
    color: var(--text-primary); text-decoration: none;
    border-radius: 12px; font-weight: 600; font-size: 15px;
    border: 1px solid var(--border-subtle); transition: all 0.2s;
}

.scs-btn-secondary:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--border-strong);
}


.scs-server-status {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px; backdrop-filter: blur(10px);
    max-width: fit-content;
}

.scs-status-dot {
    position: relative; width: 10px; height: 10px;
    background: var(--status-online); border-radius: 50%; flex-shrink: 0;
}

.scs-status-dot::before {
    content: ''; position: absolute; inset: -4px;
    background: var(--status-online); border-radius: 50%;
    opacity: 0.4; animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(2.5); opacity: 0; }
}

.scs-status-text { display: flex; flex-direction: column; line-height: 1.2; }

.scs-status-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1.5px;
}

.scs-status-value { font-size: 14px; font-weight: 600; }


.scs-hero-visual {
    position: relative; aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
}

.scs-hero-scene { position: relative; width: 100%; height: 100%; }

.scs-glow-bg {
    position: absolute; inset: 5%;
    background: var(--gradient-glow);
    filter: blur(50px); border-radius: 50%;
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.scs-scene-frame {
    position: absolute; inset: 8%;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(255,110,40,0.05), transparent 70%),
        linear-gradient(180deg, rgba(20,16,15,0.4), rgba(10,8,8,0.7));
    border: 1px solid var(--border-strong); border-radius: 24px;
    backdrop-filter: blur(10px); overflow: hidden;
}

.scs-scene-frame::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 24px 24px;
}

.scs-corner {
    position: absolute; width: 24px; height: 24px;
    border: 2px solid var(--accent-orange); z-index: 5;
}

.scs-corner.tl { top: 6%; left: 6%; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.scs-corner.tr { top: 6%; right: 6%; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.scs-corner.bl { bottom: 6%; left: 6%; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.scs-corner.br { bottom: 6%; right: 6%; border-left: none; border-top: none; border-radius: 0 0 6px 0; }


.scs-hero-logo {
    position: absolute; inset: 0;
    display: grid; place-items: center;
}

.scs-big-s {
    width: 50%; height: auto; position: relative; z-index: 4;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.7));
    animation: logoFloat 5s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.02); }
}

.scs-big-s .s-glow {
    fill: var(--accent-orange); opacity: 0.5; filter: blur(20px);
    animation: sGlowPulse 3s ease-in-out infinite;
}

@keyframes sGlowPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.scs-big-s .s-body { stroke: rgba(255,255,255,0.3); stroke-width: 0.3; }

.scs-big-s .s-corner-accent {
    fill: var(--accent-yellow); transform-origin: 8px 8px;
    animation: bigCornerAnim 2.4s ease-in-out infinite;
}

@keyframes bigCornerAnim {
    0%, 100% { fill: var(--accent-yellow); transform: scale(1); }
    50% { fill: var(--accent-orange); transform: scale(1.15); }
}


.scs-orbit {
    position: absolute; top: 50%; left: 50%;
    border: 1px dashed rgba(255,110,40,0.25); border-radius: 50%;
    transform: translate(-50%,-50%); pointer-events: none;
}

.scs-orbit-1 { width: 70%; height: 70%; border-color: rgba(255,110,40,0.3); animation: orbitSpin 30s linear infinite; }
.scs-orbit-2 { width: 85%; height: 85%; border-color: rgba(230,57,70,0.2); border-style: dotted; animation: orbitSpin 50s linear infinite reverse; }
.scs-orbit-3 { width: 95%; height: 95%; border-color: rgba(255,198,41,0.15); animation: orbitSpin 80s linear infinite; }

@keyframes orbitSpin {
    from { transform: translate(-50%,-50%) rotate(0deg); }
    to { transform: translate(-50%,-50%) rotate(360deg); }
}

.scs-orbit::before, .scs-orbit::after {
    content: ''; position: absolute;
    width: 8px; height: 8px;
    background: var(--accent-orange); border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-orange);
}

.scs-orbit-1::before { top: -4px; left: 50%; transform: translateX(-50%); }
.scs-orbit-1::after { bottom: -4px; left: 50%; transform: translateX(-50%); background: var(--accent-yellow); box-shadow: 0 0 12px var(--accent-yellow); }
.scs-orbit-2::before { top: 50%; left: -4px; transform: translateY(-50%); background: var(--accent-red); box-shadow: 0 0 12px var(--accent-red); width: 6px; height: 6px; }


.scs-scan-line {
    position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-orange) 20%, var(--accent-orange) 80%, transparent);
    opacity: 0.6; box-shadow: 0 0 20px var(--accent-orange);
    animation: scanMove 4s ease-in-out infinite;
    z-index: 6; pointer-events: none;
}

@keyframes scanMove {
    0%, 100% { top: 10%; opacity: 0; }
    10% { opacity: 0.6; }
    45% { opacity: 0.6; }
    50% { top: 90%; opacity: 0.6; }
    55% { opacity: 0; }
}


.scs-tech-corner { position: absolute; width: 14px; height: 14px; z-index: 6; }
.scs-tc-tl { top: 18%; left: 18%; border-top: 2px solid var(--accent-orange); border-left: 2px solid var(--accent-orange); }
.scs-tc-tr { top: 18%; right: 18%; border-top: 2px solid var(--accent-orange); border-right: 2px solid var(--accent-orange); }
.scs-tc-bl { bottom: 18%; left: 18%; border-bottom: 2px solid var(--accent-orange); border-left: 2px solid var(--accent-orange); }
.scs-tc-br { bottom: 18%; right: 18%; border-bottom: 2px solid var(--accent-orange); border-right: 2px solid var(--accent-orange); }


.scs-particle {
    position: absolute; width: 4px; height: 4px;
    background: var(--accent-orange); border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-orange);
    opacity: 0.8; pointer-events: none; z-index: 7;
}

.scs-p1 { top: 25%; left: 30%; animation: floatP 6s ease-in-out infinite; }
.scs-p2 { top: 65%; left: 75%; animation: floatP 8s ease-in-out infinite reverse; background: var(--accent-yellow); box-shadow: 0 0 8px var(--accent-yellow); }
.scs-p3 { top: 40%; left: 80%; animation: floatP 7s ease-in-out infinite 2s; }
.scs-p4 { top: 75%; left: 25%; animation: floatP 9s ease-in-out infinite 1s; background: var(--accent-red); box-shadow: 0 0 8px var(--accent-red); }
.scs-p5 { top: 30%; left: 65%; animation: floatP 5s ease-in-out infinite 3s; width: 3px; height: 3px; }
.scs-p6 { top: 80%; left: 60%; animation: floatP 10s ease-in-out infinite reverse 1.5s; background: var(--accent-yellow); width: 3px; height: 3px; }

@keyframes floatP {
    0%, 100% { transform: translate(0,0); opacity: 0.3; }
    25% { transform: translate(15px,-20px); opacity: 1; }
    50% { transform: translate(-10px,-10px); opacity: 0.6; }
    75% { transform: translate(-15px,15px); opacity: 1; }
}


.scs-info-card {
    position: absolute;
    background: rgba(20,16,15,0.85);
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(20px); border-radius: 12px;
    padding: 12px 16px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6); z-index: 10;
}

.scs-info-card--tr { top: 4%; right: -8%; animation: floatCard 6s ease-in-out infinite; }
.scs-info-card--bl { bottom: 8%; left: -8%; animation: floatCard 7s ease-in-out infinite reverse; }

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.scs-info-card__icon {
    width: 34px; height: 34px; border-radius: 8px;
    background: rgba(255,110,40,0.12);
    border: 1px solid rgba(255,110,40,0.3);
    display: grid; place-items: center; color: var(--accent-orange);
}

.scs-info-card__text { display: flex; flex-direction: column; line-height: 1.2; }

.scs-info-card__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1.5px;
}

.scs-info-card__value { font-size: 13px; font-weight: 700; }


.scs-features { padding: 60px 0 80px; border-top: 1px solid var(--border-subtle); }

.scs-features-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 16px; overflow: hidden;
}

.scs-feature { background: var(--bg-base); padding: 32px 28px; transition: background 0.3s; }
.scs-feature:hover { background: var(--bg-elevated); }

.scs-feature-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(255,110,40,0.15), rgba(230,57,70,0.1));
    border: 1px solid rgba(255,110,40,0.2);
    display: grid; place-items: center; color: var(--accent-orange);
    margin-bottom: 18px;
}

.scs-feature-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.scs-feature-desc { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }


@media (max-width: 1024px) {
    .scs-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .scs-hero-visual { aspect-ratio: 4/3; max-width: 500px; margin: 0 auto; width: 100%; }
    .scs-features-grid { grid-template-columns: repeat(2, 1fr); }
    .scs-nav ul { display: none; }
    .scs-info-card--tr { right: 0; }
    .scs-info-card--bl { left: 0; }
}

@media (max-width: 1024px) {
    .scs-container { padding: 0 20px; }
}

@media (max-width: 640px) {
    .container { padding: 0 16px; }
    .scs-container { padding: 0 14px; }
    .scs-header-inner { padding: 12px 16px; gap: 12px; }
    .scs-balance-pill, .scs-h-divider { display: none; }
    .scs-features-grid { grid-template-columns: 1fr; }
    .scs-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* === Скин-аватарки (рендер головы из /render/body.php) ===
 * .avatar-fallback — инициалы, видны пока скин грузится или если
 *   рендер недоступен. .avatar-skin поверх перекрывает их при загрузке;
 *   onerror убирает img → инициалы остаются видимыми.
 * Класс ставится внутрь существующих контейнеров аватарок:
 * .scs-user-avatar, .sb-avatar-img, .adm-profile-avatar,
 * .user-avatar, .player-big-avatar — все они уже имеют размер
 * и border-radius, нам нужно только заполнить их картинкой. */
.avatar-fallback {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    width: 100%; height: 100%;
    pointer-events: none;
}
.avatar-skin {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}
.scs-user-avatar,
.sb-avatar-img,
.adm-profile-avatar,
.user-avatar,
.player-big-avatar {
    position: relative;
    overflow: hidden;
}


.scs-container {
    max-width: 1440px; margin: 0 auto;
    padding: 0 40px;
}

.scs-admin-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: rgba(230,57,70,0.1);
    border: 1px solid rgba(230,57,70,0.35);
    border-radius: 8px;
    color: var(--accent-red);
    text-decoration: none;
    font-size: 12px; font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.2s;
}
.scs-admin-btn:hover {
    background: rgba(230,57,70,0.2);
    border-color: var(--accent-red);
    transform: translateY(-1px);
}