/* === 09-creators-support/creators-support.css === */
/* ============================================================
   CREATORS & SUPPORT — PANEL
   ============================================================ */

/* Page dim overlay */
.page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 30;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 10%, rgba(126, 170, 255, 0.12), transparent 44%),
        radial-gradient(circle at 80% 20%, rgba(168, 108, 255, 0.1), transparent 38%),
        rgba(4, 8, 18, 0.74);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: opacity 0.18s ease;
}

body.creators-support-active .page::before {
    opacity: 1;
}

.container > :not(.top-nav) {
    transition: filter 0.18s ease, opacity 0.18s ease;
}

body.creators-support-active .container > :not(.top-nav) {
    filter: none;
    opacity: 1;
}

/* ---- Trigger wrapper ---- */
.creators-support {
    position: relative;
    z-index: 60;
    display: flex;
    justify-content: flex-end;
}

.creators-support::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 420px;
    height: 16px;
}

/* ---- Trigger button ---- */
.creators-support-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(170, 140, 255, 0.35);
    background:
        linear-gradient(135deg, rgba(55, 25, 110, 0.95) 0%, rgba(28, 45, 130, 0.95) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(210, 185, 255, 0.08),
        0 8px 26px rgba(0, 0, 0, 0.38),
        0 0 22px rgba(140, 90, 255, 0.16);
    color: #ede8ff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.creators-support-button:hover {
    transform: translateY(-1px);
    border-color: rgba(200, 170, 255, 0.52);
    box-shadow:
        inset 0 0 0 1px rgba(210, 185, 255, 0.12),
        0 12px 32px rgba(0, 0, 0, 0.44),
        0 0 32px rgba(160, 105, 255, 0.26);
}

.creators-support-button svg {
    flex: 0 0 auto;
}

.creators-support-caret {
    transition: transform 0.22s ease;
}

.creators-support.is-open .creators-support-caret,
.creators-support:hover .creators-support-caret {
    transform: rotate(180deg);
}

/* ---- Panel ---- */
.creators-support-panel {
    position: absolute;
    z-index: 80;
    top: calc(100% + 16px);
    right: 0;
    width: 420px;
    border-radius: 26px;
    border: 1px solid rgba(150, 120, 255, 0.24);
    overflow: hidden;

    background:
        radial-gradient(ellipse 65% 38% at 18% 0%, rgba(95, 55, 235, 0.24), transparent),
        radial-gradient(ellipse 55% 30% at 88% 6%, rgba(55, 120, 255, 0.18), transparent),
        radial-gradient(ellipse 45% 28% at 55% 100%, rgba(160, 100, 255, 0.10), transparent),
        linear-gradient(168deg, #0c0e2a 0%, #07091c 60%, #050714 100%);

    color: #edf1ff;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 36px 72px rgba(0, 0, 0, 0.58),
        0 0 56px rgba(100, 70, 255, 0.14),
        0 0 100px rgba(60, 90, 255, 0.07);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;

    filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: transform, opacity;
    isolation: isolate;
}

body.creators-support-active .top-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Shimmering top border */
.creators-support-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(130, 100, 255, 0.65) 22%,
        rgba(100, 170, 255, 0.85) 50%,
        rgba(165, 100, 255, 0.65) 78%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* Caret arrow */
.creators-support-panel::after {
    content: "";
    position: absolute;
    top: -8px;
    right: 38px;
    width: 16px;
    height: 16px;
    border-top: 1px solid rgba(140, 110, 255, 0.34);
    border-left: 1px solid rgba(140, 110, 255, 0.34);
    background: #0c0e2a;
    transform: rotate(45deg);
    z-index: 3;
    pointer-events: none;
}

.creators-support:hover .creators-support-panel,
.creators-support.is-open .creators-support-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ---- Panel head ---- */
.creators-support-panel-head {
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(130, 110, 255, 0.14);
}

.creators-support-kicker {
    margin: 0 0 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(170, 140, 255, 0.80);
}

.creators-support-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.2px;
    font-weight: 900;
    background: linear-gradient(110deg, #e8e2ff 0%, #b8ccff 55%, #d4b6ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Creators — 2 columns side by side ---- */
.creators-support-list {
    --creator-avatar-size: 76px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 16px 14px;
}

.creators-support-person-card {
    padding: 18px 14px 16px;
    border-radius: 20px;
    border: 1px solid rgba(120, 100, 240, 0.20);
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(100, 70, 220, 0.13), transparent),
        linear-gradient(180deg, rgba(13, 15, 42, 0.97) 0%, rgba(8, 10, 28, 0.99) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.032),
        0 8px 22px rgba(0, 0, 0, 0.30);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
}

.creators-support-person-card:hover {
    border-color: rgba(155, 120, 255, 0.38);
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 14px 30px rgba(0, 0, 0, 0.36),
        0 0 22px rgba(120, 90, 255, 0.16);
}

/* Vertical centered layout */
.creators-support-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.creators-support-avatar {
    width: var(--creator-avatar-size);
    height: var(--creator-avatar-size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    font-size: 26px;
    font-weight: 900;
    color: #f7fbff;
    flex-shrink: 0;
    box-shadow:
        0 0 0 2.5px rgba(145, 115, 255, 0.55),
        0 0 0 5px rgba(120, 90, 255, 0.15),
        0 0 18px rgba(130, 100, 255, 0.45),
        0 8px 20px rgba(0, 0, 0, 0.36);
}

.creators-support-avatar-g {
    background: radial-gradient(circle at 32% 28%, #6ee8ff 0%, #4e40ee 52%, #18093a 100%);
}

.creators-support-avatar-k {
    background: radial-gradient(circle at 32% 28%, #a8c6ff 0%, #b038ff 50%, #200a38 100%);
}

.creators-support-avatar-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.creators-support-avatar-fallback {
    position: relative;
    z-index: 0;
}

.creators-support-name {
    margin: 0 0 3px;
    color: #ede8ff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.creators-support-role {
    margin: 0;
    color: #8892b8;
    font-size: 12px;
    line-height: 1.4;
}

.creators-support-role-chip {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(140, 110, 255, 0.28);
    background: rgba(125, 95, 255, 0.12);
    color: #cfc2ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

/* ---- Contact area ---- */
.creators-support-contact-label {
    margin: 0 16px 8px;
    color: rgba(165, 175, 215, 0.55);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.creators-support-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    margin: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(115, 135, 255, 0.22);
    background: rgba(8, 11, 30, 0.85);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

.creators-support-email {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    color: #c0cbf0;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: color 0.15s ease;
}

.creators-support-email:hover {
    color: #eef2ff;
}

.creators-support-email-shared {
    justify-content: flex-start;
    width: 100%;
}

.creators-support-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 10px 12px;
    border: 0;
    border-left: 1px solid rgba(115, 135, 255, 0.16);
    background: transparent;
    color: #8892b8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.creators-support-copy:hover {
    color: #e0e8ff;
    background: rgba(100, 120, 255, 0.08);
}

/* ---- Divider ---- */
.creators-support-divider {
    height: 1px;
    margin: 14px 16px;
    background: linear-gradient(90deg,
        transparent,
        rgba(130, 110, 255, 0.26) 30%,
        rgba(90, 150, 255, 0.26) 70%,
        transparent
    );
}

/* ---- Support block ---- */
.creators-support-support-block {
    margin: 0 16px 18px;
    padding: 18px 16px 16px;
    border-radius: 20px;
    border: 1px solid rgba(200, 150, 80, 0.22);
    background:
        radial-gradient(ellipse 70% 50% at 85% 10%, rgba(200, 130, 50, 0.12), transparent),
        radial-gradient(ellipse 50% 40% at 15% 85%, rgba(160, 100, 20, 0.08), transparent),
        linear-gradient(158deg, rgba(20, 14, 8, 0.97) 0%, rgba(12, 10, 5, 0.98) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 200, 100, 0.05),
        0 12px 28px rgba(0, 0, 0, 0.32),
        0 0 30px rgba(200, 140, 50, 0.07);
}

.creators-support-support-head {
    margin-bottom: 10px;
}

.creators-support-title-support {
    margin: 0;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    background: linear-gradient(110deg, #fce090 0%, #f5a830 50%, #f0c055 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.creators-support-note {
    margin: 0 0 14px;
    color: #8a7e68;
    font-size: 13px;
    line-height: 1.55;
}

.creators-support-support-block .creators-support-note {
    color: #8a7e68;
}

/* ---- Coffee CTA button ---- */
.creators-support-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 15px;
    border-radius: 14px;
    border: 1px solid rgba(240, 175, 70, 0.34);
    background:
        radial-gradient(ellipse 60% 60% at 10% 50%, rgba(180, 90, 15, 0.30), transparent),
        linear-gradient(135deg, rgba(130, 60, 10, 0.55) 0%, rgba(80, 35, 5, 0.42) 100%);
    color: #fce8a8;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
    box-shadow:
        inset 0 0 0 1px rgba(255, 215, 100, 0.07),
        0 8px 22px rgba(0, 0, 0, 0.32),
        0 0 22px rgba(235, 155, 50, 0.10);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}

.creators-support-link-support {
    /* inherits all from .creators-support-link */
}

.creators-support-link:hover,
.creators-support-link-support:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 200, 80, 0.54);
    box-shadow:
        inset 0 0 0 1px rgba(255, 220, 110, 0.10),
        0 12px 30px rgba(0, 0, 0, 0.38),
        0 0 32px rgba(248, 165, 55, 0.20);
}

.creators-support-link-main {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.creators-support-link-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 17px;
    background: rgba(240, 155, 40, 0.18);
    border: 1px solid rgba(245, 175, 60, 0.26);
    box-shadow: 0 0 12px rgba(245, 150, 40, 0.22);
    color: #fdc85a;
    flex-shrink: 0;
}

.creators-support-link-arrow {
    color: rgba(255, 195, 90, 0.65);
    font-size: 17px;
}

/* ---- misc leftovers ---- */
.creators-support-section-title {
    margin: 0 0 14px;
    color: #edf3ff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.creators-support-subtitle {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #d1dcfb;
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .creators-support::after {
        right: 50%;
        transform: translateX(50%);
    }

    .creators-support-panel {
        right: 50%;
        transform: translate(50%, -10px) scale(0.97);
    }

    .creators-support:hover .creators-support-panel,
    .creators-support.is-open .creators-support-panel {
        transform: translate(50%, 0) scale(1);
    }

    .creators-support-panel::after {
        right: calc(50% - 8px);
    }
}

@media (max-width: 640px) {
    body.creators-support-active {
        overflow: hidden;
    }

    .creators-support-list {
        --creator-avatar-size: 54px;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 12px;
    }

    .creators-support {
        width: auto;
        justify-content: flex-end;
    }

    .creators-support-button {
        width: auto;
        min-height: 38px;
        justify-content: center;
        gap: 7px;
        padding: 8px 10px;
        border-radius: 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .creators-support-button svg:first-child {
        width: 16px;
        height: 16px;
    }

    .creators-support-panel {
        position: fixed;
        top: 76px;
        right: 12px;
        bottom: auto;
        left: 12px;
        width: auto;
        max-height: calc(100dvh - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 20px;
        transform: translateY(-12px) scale(0.98);
    }

    .creators-support:hover .creators-support-panel,
    .creators-support.is-open .creators-support-panel {
        transform: translateY(0) scale(1);
    }

    .creators-support-panel::after,
    .creators-support::after {
        content: none;
        display: none;
    }

    .creators-support-panel-head {
        padding: 16px 16px 12px;
    }

    .creators-support-title {
        font-size: 18px;
    }

    .creators-support-person-card {
        display: grid;
        grid-template-columns: var(--creator-avatar-size) minmax(0, 1fr);
        align-items: center;
        text-align: left;
        padding: 12px;
        border-radius: 14px;
    }

    .creators-support-person {
        align-items: stretch;
        text-align: left;
        gap: 10px;
    }

    .creators-support-name {
        font-size: 15px;
    }

    .creators-support-role {
        font-size: 11px;
    }

    .creators-support-role-chip {
        margin-top: 5px;
    }

    .creators-support-contact-label {
        margin: 0 12px 7px;
    }

    .creators-support-actions {
        grid-template-columns: minmax(0, 1fr);
        margin: 0 12px;
    }

    .creators-support-email {
        justify-content: center;
        padding: 10px 12px;
        text-align: center;
        font-size: 12px;
    }

    .creators-support-copy {
        min-height: 36px;
        border-left: 0;
        border-top: 1px solid rgba(115, 135, 255, 0.16);
    }

    .creators-support-divider {
        margin: 12px;
    }

    .creators-support-support-block {
        margin: 0 12px 12px;
        padding: 14px 12px;
        border-radius: 16px;
    }

    .creators-support-link {
        padding: 11px 12px;
        font-size: 13px;
    }

    .creators-support-link-icon {
        width: 30px;
        height: 30px;
    }
}

/* === 07-top-ten-games/top-ten-games.css === */
/* -----------------------------
   TOP 10 GAMES
----------------------------- */
.games-panel {
	margin-top: 18px;
	padding: 26px 28px;
	border-radius: 26px;
	background:
		radial-gradient(circle at top left, rgba(88, 122, 255, 0.12), transparent 35%),
		linear-gradient(180deg, rgba(12, 18, 38, 0.96), rgba(8, 12, 24, 0.98));
	border: 1px solid rgba(140, 165, 255, 0.18);
	box-shadow:
		0 0 34px rgba(60, 110, 255, 0.08),
		inset 0 1px 0 rgba(255,255,255,0.05);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.games-panel h3 {
	margin: 0 0 18px;
	position: relative;
	display: inline-block;
	padding: 0 18px 10px 0;
	font-size: 28px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #f7fbff;
	background: linear-gradient(90deg, #f7fbff 0%, #cbd9ff 42%, #8eeeff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: 0 0 22px rgba(126, 232, 250, 0.16);
}

.games-panel h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(142, 170, 255, 0.95), rgba(142, 238, 255, 0.95));
	box-shadow: 0 0 18px rgba(142, 238, 255, 0.24);
}

.games-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.game-row.game-row-hidden {
	display: none;
}

.games-panel-expanded .game-row.game-row-hidden {
	display: flex;
}

.game-row {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 4px 0;
}

/* номер игры от 1 до 10 */
.game-rank {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 800;
	color: #ffffff;
	background: linear-gradient(180deg, rgba(98, 120, 255, 0.95), rgba(120, 90, 255, 0.88));
	border: 1px solid rgba(162, 194, 255, 0.12);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 8px 16px rgba(8, 14, 30, 0.14),
		0 0 14px rgba(96, 166, 255, 0.05);
}

.game-rank-icon-wrap {
	overflow: hidden;
	padding: 0;
	background:
		radial-gradient(circle at 18% 18%, rgba(130, 170, 255, 0.14), transparent 34%),
		linear-gradient(135deg, rgba(31, 46, 88, 0.56), rgba(13, 20, 38, 0.48));
}

.game-rank-icon {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.game-main {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 18px;
	border: 1px solid rgba(162, 194, 255, 0.08);
	background:
		radial-gradient(circle at 18% 18%, rgba(130, 170, 255, 0.12), transparent 34%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
		linear-gradient(135deg, rgba(31, 46, 88, 0.52), rgba(13, 20, 38, 0.44));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 8px 16px rgba(8, 14, 30, 0.14),
		0 0 14px rgba(96, 166, 255, 0.05);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.game-topline {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	min-width: 0;
}

/* Название игры из топ 10 */
.game-name {
	min-width: 0;
	flex: 1;
	display: inline-flex;
	align-items: center;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.24;
	letter-spacing: -0.01em;
	color: #edf5ff;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.14),
		0 0 8px rgba(132, 178, 255, 0.08);
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.game-row:hover .game-main {
	transform: translateY(-1px);
	border-color: rgba(182, 227, 255, 0.16);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		0 10px 18px rgba(8, 14, 30, 0.18),
		0 0 20px rgba(116, 196, 255, 0.08);
}

.game-row:hover .game-name {
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.22),
		0 0 16px rgba(140, 186, 255, 0.18),
		0 0 30px rgba(120, 240, 255, 0.12);
}

/* Часы игры из топ 10 */
.game-hours {
	min-width: 72px;
	flex-shrink: 0;
	text-align: right;
	font-size: 17px;
	font-weight: 800;
	color: #5ee8b0;
}

.game-progress {
	width: 100%;
	height: 8px;
	position: relative;
	display: flex;
	justify-content: flex-end;
	border-radius: 999px;
	background: linear-gradient(270deg, rgba(112, 145, 255, 0.18), rgba(112, 145, 255, 0.02));
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(160, 190, 255, 0.08);
}

.game-progress-bar {
	height: 100%;
	position: relative;
	border-radius: 999px;
	margin-left: auto;
	background: linear-gradient(270deg, rgba(108, 246, 149, 0.96), rgba(52, 210, 255, 0.88));
	box-shadow: 0 0 14px rgba(70, 228, 184, 0.35);
}

.game-progress-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
	opacity: 0.55;
	pointer-events: none;
}

.games-toggle-wrap {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}

.games-toggle-button {
	padding: 12px 22px;
	border: 1px solid rgba(154, 188, 255, 0.28);
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(34, 48, 95, 0.94), rgba(16, 24, 48, 0.98));
	color: #f3f8ff;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.03em;
	cursor: pointer;
	box-shadow:
		0 12px 22px rgba(6, 12, 28, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.games-toggle-button:hover {
	transform: translateY(-1px);
	border-color: rgba(184, 220, 255, 0.46);
	box-shadow:
		0 16px 28px rgba(6, 12, 28, 0.30),
		0 0 18px rgba(96, 180, 255, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.games-toggle-button:disabled {
	opacity: 0.78;
	cursor: wait;
	transform: none;
}

.games-toggle-status {
	margin-top: 10px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: #f4a96a;
}

@media (max-width: 800px) {
	.games-panel {
		padding: 18px 16px;
	}

	.game-row {
		align-items: flex-start;
	}

	.game-main {
		gap: 8px;
		padding: 10px 12px;
	}

	.game-topline {
		gap: 10px;
	}

	.game-name {
		font-size: 15px;
	}

	.games-panel h3 {
		font-size: 20px;
		margin-bottom: 14px;
	}

	.game-hours {
		min-width: 48px;
		font-size: 14px;
	}

	.game-progress {
		height: 6px;
	}

	.games-toggle-button {
		width: 100%;
		justify-content: center;
	}
}

/* === 05-verdict-cart/verdict.css === */
/* -----------------------------
VERDICT SECTION LAYOUT
----------------------------- */

.verdict-wrapper {
    margin-top: 24px;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 0.95fr);
    gap: clamp(18px, 2.2vw, 28px);
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
}

.verdict-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-width: 0;
    align-self: stretch;
    aspect-ratio: 5 / 6;
    padding: 0;
    border-radius: 22px;
    border: 1px solid rgba(176, 190, 220, 0.18);
    background: #070b15;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.verdict-bg,
.verdict-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.22;
    filter: saturate(0.75) brightness(0.55);
    pointer-events: none;
}

.verdict-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(4, 8, 18, 0.72), rgba(4, 8, 18, 0.90)),
        rgba(4, 8, 18, 0.42);
}

.verdict-content {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100%;
    padding: clamp(18px, 2.4vw, 28px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.9fr) minmax(0, 1fr);
    grid-template-areas:
        "title title title"
        "profile profile profile"
        "hours rank value"
        "panels panels panels"
        "share share share";
    gap: clamp(12px, 1.5vw, 18px);
    color: #f5f7ff;
}

.player-left-bottom {
    grid-area: profile;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(14px, 2vw, 24px);
    min-width: 0;
    padding: clamp(14px, 1.8vw, 20px);
    border-radius: 18px;
    border: 1px solid rgba(126, 105, 255, 0.28);
    background:
        radial-gradient(circle at 12% 50%, rgba(126, 105, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(7, 12, 28, 0.82), rgba(4, 8, 18, 0.88));
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.player-avatar-wrap-bottom {
    width: clamp(74px, 8vw, 108px);
    height: clamp(74px, 8vw, 108px);
    min-width: clamp(74px, 8vw, 108px);
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, rgba(88, 190, 255, 0.92), rgba(164, 92, 255, 0.94));
    border: 1px solid rgba(176, 190, 220, 0.22);
    box-shadow:
        0 0 26px rgba(126, 105, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.player-avatar-bottom {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.player-meta {
    min-width: 0;
}

.verdict-steam-id {
    margin-top: 8px;
    color: rgba(185, 195, 224, 0.82);
    font-size: clamp(12px, 1.25vw, 15px);
    line-height: 1.35;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-kicker,
.verdict-time-title,
.verdict-money-title,
.verdict-rank-label,
.verdict-top-games-title,
.verdict-achievements-title,
.share-label {
    color: rgba(226, 232, 248, 0.68);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.player-name-bottom {
    width: 100%;
    min-width: 0;
    color: #f5f7ff;
    font-size: clamp(20px, 2.95vw, 34px);
    line-height: 1.15;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.verdict-level-card {
    justify-self: end;
    min-width: clamp(92px, 10vw, 130px);
}

.verdict-level-badge {
    position: relative;
    width: clamp(78px, 8vw, 112px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    margin-left: auto;
    clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
    border: 1px solid rgba(164, 92, 255, 0.56);
    background:
        radial-gradient(circle at 50% 42%, rgba(164, 92, 255, 0.26), transparent 58%),
        linear-gradient(180deg, rgba(20, 20, 54, 0.96), rgba(8, 10, 28, 0.98));
    box-shadow:
        0 0 26px rgba(164, 92, 255, 0.28),
        inset 0 0 18px rgba(88, 190, 255, 0.08);
    text-transform: uppercase;
}

.verdict-level-badge span {
    color: #b891ff;
    font-size: clamp(10px, 1vw, 12px);
    line-height: 1;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.verdict-level-badge strong {
    color: #ffffff;
    font-size: clamp(24px, 3.6vw, 42px);
    line-height: 0.9;
    font-weight: 950;
    text-shadow: 0 0 18px rgba(164, 92, 255, 0.38);
}

.verdict-header {
    grid-area: title;
    position: relative;
    justify-self: center;
    color: #f5f7ff;
    font-size: clamp(15px, 2vw, 22px);
    line-height: 1.1;
    font-weight: 850;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    max-width: 100%;
    padding: 0 64px;
}

.verdict-header::before,
.verdict-header::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 44px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(164, 92, 255, 0.86));
}

.verdict-header::before {
    right: calc(100% - 48px);
}

.verdict-header::after {
    left: calc(100% - 48px);
    transform: scaleX(-1);
}

.verdict-overview {
    display: contents;
}

.verdict-time,
.account-value,
.verdict-top-games,
.verdict-achievements {
    min-width: 0;
    border-radius: 16px;
    border: 1px solid rgba(176, 190, 220, 0.16);
    background: rgba(8, 14, 28, 0.64);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.verdict-time,
.account-value {
    border-color: rgba(126, 105, 255, 0.22);
    background:
        radial-gradient(circle at 12% 18%, rgba(88, 190, 255, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(7, 12, 28, 0.78), rgba(4, 8, 18, 0.86));
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.verdict-time,
.account-value {
    padding: 14px 16px;
}

.verdict-stat-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 14px;
    border: 1px solid rgba(164, 92, 255, 0.26);
    background: rgba(164, 92, 255, 0.12);
    position: relative;
}

.verdict-stat-icon::before,
.verdict-stat-icon::after {
    content: "";
    position: absolute;
}

.verdict-stat-icon-time::before {
    inset: 10px;
    border: 3px solid #a45cff;
    border-radius: 50%;
}

.verdict-stat-icon-time::after {
    width: 11px;
    height: 11px;
    left: 23px;
    top: 14px;
    border-left: 3px solid #a45cff;
    border-bottom: 3px solid #a45cff;
}

.verdict-stat-icon-wallet {
    margin-left: auto;
    background: rgba(245, 190, 66, 0.12);
    border-color: rgba(245, 190, 66, 0.26);
}

.verdict-stat-icon-wallet::before {
    left: 10px;
    right: 8px;
    top: 17px;
    height: 18px;
    border-radius: 6px;
    background: #f0b52e;
}

.verdict-stat-icon-wallet::after {
    right: 8px;
    top: 21px;
    width: 12px;
    height: 10px;
    border-radius: 5px 0 0 5px;
    background: #70440d;
}

.verdict-time {
    grid-area: hours;
    border-right: 1px solid rgba(176, 190, 220, 0.12);
}

.account-value {
    grid-area: value;
    border-left: 1px solid rgba(176, 190, 220, 0.12);
    text-align: left;
    overflow: hidden;
}

.verdict-hours {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    margin-top: 8px;
}

.hours-number {
    color: #f5f7ff;
    font-size: clamp(28px, 4.4vw, 48px);
    line-height: 0.95;
    font-weight: 900;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hours-word {
    color: rgba(226, 232, 248, 0.74);
    font-size: clamp(13px, 1.7vw, 18px);
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.verdict-days,
.verdict-years,
.verdict-money-equivalent,
.verdict-achievements-description,
.verdict-rank-description {
    color: rgba(226, 232, 248, 0.72);
    font-size: 13px;
    line-height: 1.3;
    font-weight: 650;
}

.verdict-days,
.verdict-money-equivalent {
    margin-top: 8px;
}

.verdict-years {
    margin-top: 2px;
}

.verdict-days::after {
    content: "";
    display: block;
    width: 136px;
    height: 42px;
    margin-top: 14px;
    background:
        linear-gradient(to top, #a45cff 0 28%, transparent 28%) 0 100% / 12px 100% no-repeat,
        linear-gradient(to top, #8c6cff 0 48%, transparent 48%) 22px 100% / 12px 100% no-repeat,
        linear-gradient(to top, #58beff 0 36%, transparent 36%) 44px 100% / 12px 100% no-repeat,
        linear-gradient(to top, #a45cff 0 58%, transparent 58%) 66px 100% / 12px 100% no-repeat,
        linear-gradient(to top, #8c6cff 0 42%, transparent 42%) 88px 100% / 12px 100% no-repeat,
        linear-gradient(to top, #58beff 0 76%, transparent 76%) 110px 100% / 12px 100% no-repeat,
        linear-gradient(to top, #a45cff 0 92%, transparent 92%) 132px 100% / 12px 100% no-repeat;
}

.verdict-money-equivalent::after {
    content: "";
    display: block;
    width: 150px;
    height: 42px;
    margin-top: 14px;
    background:
        linear-gradient(135deg, transparent 0 9px, #a45cff 9px 11px, transparent 11px 20px) 0 23px / 30px 18px repeat-x;
    opacity: 0.84;
}

.verdict-money {
    margin-top: 8px;
    color: #f5f7ff;
    font-size: clamp(22px, 3.2vw, 38px);
    line-height: 1.08;
    font-weight: 900;
    max-width: 100%;
    min-width: 140px;
    min-height: 42px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    word-break: normal;
}

.verdict-money .account-value-loading-wrap {
    max-width: 100%;
    min-width: 0;
}

.verdict-money .account-value-loading-wrap {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: clamp(16px, 2.6vw, 26px);
}

.verdict-money .account-value-hourglass {
    animation: verdict-account-hourglass-pulse 1.2s ease-in-out infinite;
}

.verdict-money .account-value-loading-text {
    color: #f5f7ff;
    font-size: 13px;
    font-weight: 800;
}

@keyframes verdict-account-hourglass-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

.account-value-verdict-rank {
    grid-area: rank;
    justify-self: center;
    align-self: stretch;
    width: 100%;
    padding: 18px 16px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    text-align: center;
    border-radius: 22px;
    border: 1px solid rgba(164, 92, 255, 0.42);
    background:
        radial-gradient(circle at 50% 30%, rgba(164, 92, 255, 0.18), transparent 54%),
        linear-gradient(180deg, rgba(8, 13, 31, 0.88), rgba(4, 8, 18, 0.94));
    box-shadow:
        0 0 30px rgba(164, 92, 255, 0.18),
        0 14px 34px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.account-value-verdict-rank::before {
    content: none;
}

.verdict-rank-badge-image {
    width: var(--verdict-rank-badge-size, 86px);
    height: var(--verdict-rank-badge-size, 86px);
    aspect-ratio: 1;
    display: block;
    margin-bottom: 2px;
    border-radius: 24%;
    object-fit: cover;
    filter: drop-shadow(0 0 18px rgba(164, 92, 255, 0.34));
}

.verdict-rank {
    max-width: 100%;
    color: #b98cff;
    background: linear-gradient(90deg, #5bc4ff 0%, #9b6cff 44%, #d85cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(22px, 3vw, 38px);
    line-height: 1.04;
    font-weight: 900;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-shadow: 0 0 20px rgba(164, 92, 255, 0.24);
}

.account-verdict-games-and-achievements {
    grid-area: panels;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}

.verdict-top-games,
.verdict-achievements {
    padding: 16px 20px;
}

.verdict-top-games-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    min-width: 0;
}

.game-item1,
.game-item2,
.game-item3 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    color: #f5f7ff;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.verdict-game-item {
    min-height: 34px;
}

.verdict-game-icon-wrap {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(176, 190, 220, 0.16);
    background: rgba(8, 14, 28, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.verdict-game-icon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.verdict-game-index {
    color: rgba(226, 232, 248, 0.62);
    font-size: 13px;
    font-weight: 850;
}

.verdict-game-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-item1::before,
.game-item2::before,
.game-item3::before {
    color: rgba(226, 232, 248, 0.52);
    margin-right: 8px;
}

.verdict-game-item::before {
    content: none;
}

.game-item1::before {
    content: "1";
}

.game-item2::before {
    content: "2";
}

.game-item3::before {
    content: "3";
}

.verdict-achievements {
    display: grid;
    align-content: center;
    text-align: center;
    gap: 8px;
}

.verdict-achievements-value {
    color: #ffffff;
    font-size: clamp(36px, 5.2vw, 58px);
    line-height: 1;
    font-weight: 900;
    margin-top: 10px;
}

.verdict-achievements-value::after {
    content: "";
    display: block;
    width: min(100%, 210px);
    height: 7px;
    margin: 14px auto 0;
    border-radius: 999px;
    background:
        linear-gradient(90deg, #a45cff 0 var(--verdict-achievement-rate, 0%), rgba(176, 190, 220, 0.12) var(--verdict-achievement-rate, 0%) 100%);
}

.verdict-achievements-list {
    display: grid;
    gap: 5px;
    margin-top: 4px;
    text-align: left;
}

.verdict-achievements-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    color: rgba(220, 230, 255, 0.72);
    font-size: 12px;
    line-height: 1.2;
}

.verdict-achievements-list strong {
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 12px;
    font-weight: 850;
}

.verdict-achievements-fallback {
    max-width: 220px;
    margin: 8px auto 0;
    color: rgba(220, 230, 255, 0.72);
    font-size: 13px;
    line-height: 1.35;
}

.share-block {
    grid-area: share;
    align-self: end;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding-top: 4px;
}

.share-buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.share-button-share,
.share-button-twitter,
.share-button-download,
.share-button-copy {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(176, 190, 220, 0.20);
    background: #0b101d;
    color: #f8fbff;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 860px) {
    .verdict-wrapper {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        justify-items: stretch;
    }
}

@media (max-width: 640px) {
    .verdict-card {
        aspect-ratio: auto;
    }

    .verdict-content {
        min-height: 0;
        padding: 16px;
    }

    .verdict-overview,
    .account-verdict-games-and-achievements {
        grid-template-columns: minmax(0, 1fr);
    }

    .verdict-content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "profile"
            "hours"
            "rank"
            "value"
            "panels"
            "share";
    }

    .player-left-bottom {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .verdict-level-card {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 4px;
    }

    .verdict-time,
    .account-value {
        border: 1px solid rgba(126, 105, 255, 0.22);
        background:
            radial-gradient(circle at 12% 18%, rgba(88, 190, 255, 0.12), transparent 30%),
            linear-gradient(180deg, rgba(7, 12, 28, 0.78), rgba(4, 8, 18, 0.86));
    }

    .verdict-stat-icon-wallet {
        margin-left: 0;
    }

    .share-block {
        align-items: flex-start;
        flex-direction: column;
    }

    .share-buttons {
        justify-content: flex-start;
    }
}

/* === 06-reality-cart/reality.css === */
/* -----------------------------
   REALITY / WHAT YOU COULD DO
   CLEANED CSS
   Под текущий renderRealityCard(data).
   Убраны дубли/старые неиспользуемые классы, порядок CSS приведён в норму.
----------------------------- */

:root {
    --reality-card-width: 100%;
}

/* Устаревшие элементы из старой HTML-разметки — скрываем */
.reality-button-bar,
.reality-button-ring,
.reality-button-cloud,
.reality-button .star,
.reality-button.beauty .star {
    display: none;
}

/* Слой частиц на reality-item (создаётся JS) */
.reality-item-particles {
    display: none;
}

.reality-item-particle {
    display: none;
}

/* Слой пузырьков на кнопке (создаётся JS) */
.reality-button-bubbles {
    display: none;
}

.reality-button-bubble {
    position: absolute;
    border-radius: 50%;
    /* Прозрачная сфера с радужным градиентом по краю */
    background: radial-gradient(
        circle at 32% 30%,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(220, 200, 255, 0.06) 26%,
        rgba(120, 210, 255, 0.05) 50%,
        rgba(190, 130, 255, 0.14) 70%,
        rgba(90, 220, 255, 0.22) 86%,
        rgba(210, 150, 255, 0.30) 100%
    );
    pointer-events: none;
    will-change: transform, opacity;
    /* Иризирующий ободок — тонкое кольцо + рассеянное свечение */
    box-shadow:
        0 0 0 1.5px rgba(190, 150, 255, 0.60),
        0 0 6px 1px rgba(130, 195, 255, 0.45),
        0 0 14px 3px rgba(180, 120, 255, 0.18),
        inset 0 0 6px 1px rgba(255, 255, 255, 0.10);
}

/* Блик — белое пятно в верхнем левом углу как у настоящего пузыря */
.reality-button-bubble::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 36%;
    height: 26%;
    top: 16%;
    left: 20%;
    background: rgba(255, 255, 255, 0.72);
    filter: blur(2px);
    pointer-events: none;
}

/* -----------------------------
   MAIN CARD
----------------------------- */

.reality-card {
    --reality-accent: 164, 92, 255;
    --reality-blue: 88, 190, 255;
    --reality-text: #f5f7ff;

    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: none;
    align-self: stretch;
    flex: 1 1 auto;

    min-height: 760px;

    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    padding: 20px 16px 16px;
    border-radius: 22px;

    background:
        radial-gradient(circle at 18% 10%, rgba(var(--reality-accent), 0.10), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(var(--reality-blue), 0.055), transparent 24%),
        linear-gradient(180deg, #080d1b 0%, #050812 100%);

    border: 1px solid rgba(158, 112, 255, 0.24);

    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.44),
        0 0 26px rgba(var(--reality-accent), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* subtle stars/background particles */
.reality-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;

    background:
        radial-gradient(circle at 22% 18%, rgba(var(--reality-accent), 0.24) 0 1px, transparent 1.4px),
        radial-gradient(circle at 70% 16%, rgba(var(--reality-blue), 0.16) 0 1px, transparent 1.4px),
        radial-gradient(circle at 84% 42%, rgba(var(--reality-accent), 0.18) 0 1px, transparent 1.3px),
        radial-gradient(circle at 34% 72%, rgba(255,255,255,0.13) 0 1px, transparent 1.3px),
        radial-gradient(circle at 78% 82%, rgba(var(--reality-accent), 0.14) 0 1px, transparent 1.3px);

    opacity: 0.32;
}

/* edge light */
.reality-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(var(--reality-accent), 0.72) 0%,
            rgba(var(--reality-accent), 0.22) 18%,
            rgba(255,255,255,0.035) 42%,
            rgba(255,255,255,0.018) 64%,
            rgba(var(--reality-blue), 0.20) 82%,
            rgba(var(--reality-accent), 0.50) 100%
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0.72;
}

.reality-card > * {
    position: relative;
    z-index: 1;
}

/* -----------------------------
   HEADER
----------------------------- */

.reality-hero {
    flex: 0 0 auto;
    width: 100%;
    padding-bottom: 18px;
    margin-bottom: 16px;
}

.reality-header {
    margin: 0;
}

.reality-header--row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    max-width: 100%;
}

/* Базовые стили для всех слов */
.reality-header-text1,
.reality-header-text2,
.reality-header-text3,
.reality-header-text4 {
    display: block;
    font-size: 40px;
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

/* WHAT — «выдолбленный» outline-эффект: буквы прозрачны, виден только контур */
.reality-header-text1 {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.4px rgba(195, 215, 255, 0.70);
    filter: drop-shadow(0 0 10px rgba(160, 195, 255, 0.28));
}

/* YOU — фиолетово-сиреневый градиент, стаккато-отступ */
.reality-header-text2 {
    background: linear-gradient(110deg, #d09fff 0%, #a87bfa 45%, #8b6bf0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-left: 10px;
    filter: drop-shadow(0 0 16px rgba(168, 123, 250, 0.55));
}

/* COULD — ледяной cyan→blue градиент, больший отступ = «лесенка» */
.reality-header-text3 {
    background: linear-gradient(110deg, #7ee8fa 0%, #3ab5f5 50%, #7b9ff5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-left: 20px;
    font-size: 48px;
    filter: drop-shadow(0 0 14px rgba(58, 181, 245, 0.50));
}

/* DO — плотный белый, сильное свечение */
.reality-header-text4 {
    color: #f6f8ff;
    -webkit-text-fill-color: #f6f8ff;
    padding-left: 32px;
    letter-spacing: -0.055em;
    text-shadow:
        0 0 20px rgba(210, 228, 255, 0.55),
        0 0 38px rgba(180, 205, 255, 0.22);
}

/* Декоративная линия — двойная полоска */
.reality-header-line {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    margin-top: 18px;
}

.reality-header-line::before,
.reality-header-line::after {
    content: "";
    display: block;
    border-radius: 999px;
}

.reality-header-line::before {
    height: 3px;
    background: linear-gradient(
        90deg,
        rgba(var(--reality-accent), 1) 0%,
        rgba(var(--reality-blue), 0.95) 60%,
        rgba(var(--reality-accent), 0.30) 100%
    );
    box-shadow:
        0 0 14px rgba(var(--reality-accent), 0.38),
        0 0 28px rgba(var(--reality-blue), 0.20);
}

.reality-header-line::after {
    height: 1px;
    width: 55%;
    background: linear-gradient(
        90deg,
        rgba(var(--reality-blue), 0.55) 0%,
        transparent 100%
    );
}

/* -----------------------------
   LIST ITEMS
----------------------------- */

.reality-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    overflow: visible;
}

.reality-item {
    --row-accent: 164, 92, 255;

    position: relative;
    overflow: hidden;
    isolation: isolate;

    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;

    min-height: 68px;
    padding: 12px;
    border-radius: 18px;
    box-sizing: border-box;

    background:
        radial-gradient(circle at 12% 50%, rgba(var(--row-accent), 0.08), transparent 26%),
        linear-gradient(180deg, #0a0f1e 0%, #070b16 100%);

    border: 1px solid rgba(var(--row-accent), 0.16);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.reality-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.04),
            transparent 36%
        );

    opacity: 0.50;
}

.reality-item:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--row-accent), 0.26);

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.32),
        0 0 18px rgba(var(--row-accent), 0.08),
        inset 0 1px 0 rgba(255,255,255,0.045);
}

.reality-books,
.reality-workouts,
.reality-movies,
.reality-money,
.reality-distance,
.reality-funny {
    --row-accent: 164, 92, 255;
}

/* -----------------------------
   ICONS
----------------------------- */

.reality-header-row {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reality-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;

    font-size: 0;
    line-height: 1;
    color: rgb(var(--row-accent));

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(var(--row-accent), 0.15),
            rgba(var(--row-accent), 0.045) 58%,
            rgba(8, 12, 25, 0.96) 100%
        );

    border: 1px solid rgba(var(--row-accent), 0.26);

    box-shadow:
        inset 0 0 14px rgba(var(--row-accent), 0.06),
        inset 0 1px 0 rgba(255,255,255,0.045);
}

.reality-icon::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    filter: brightness(1.35) saturate(1.25);
}

.reality-icon-books::before {
    background-image: url("../images/icon-books.webp");
}

.reality-icon-workouts::before {
    background-image: url("../images/icon-workouts.webp");
}

.reality-icon-movies::before {
    background-image: url("../images/icon-movies.webp");
}

.reality-icon-money::before {
    background-image: url("../images/icon-money.webp");
}

.reality-icon-walked::before {
    background-image: url("../images/icon-walked.webp");
}

.reality-icon-star::before {
    background-image: url("../images/icon-star.webp");
}

/* -----------------------------
   TEXT
----------------------------- */

.reality-content {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.reality-label {
    font-size: 13px;
    line-height: 1.1;
    font-weight: 600;
    color: rgba(226, 232, 248, 0.68);
}

.reality-value {
    font-size: 22px;
    line-height: 1.1;
    font-weight: 850;
    color: #f5f7ff;
    letter-spacing: -0.03em;
}

/* оставлено для старой разметки, если где-то ещё используется */
.reality-number {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    min-height: 34px;

    color: var(--reality-text);
    font-size: 20px;
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-align: left;
}

.reality-funny-text {
    max-width: 100%;
    color: #f5f7ff;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

.reality-funny {
    min-height: 78px;
}

.reality-funny .reality-content {
    min-height: 46px;
    justify-content: center;
    align-self: center;
}

/* -----------------------------
   MONEY RATE
----------------------------- */

.reality-money {
    min-height: 104px;
    align-items: center;
}

.reality-content--money {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
    row-gap: 2px;
}

.reality-content--money .reality-label,
.reality-content--money .reality-value {
    grid-column: 1;
    min-width: 0;
}

.reality-content--money .reality-value {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reality-content--money .rate-box {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
}

.rate-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: fit-content;
    margin-top: 8px;
    padding: 0 10px;
    min-height: 32px;

    border-radius: 12px;
    background: rgba(7, 10, 20, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03);
}

.rate-dollar,
.rate-text {
    font-size: 14px;
    font-weight: 700;
    color: rgba(238, 243, 255, 0.82);
}

.rate-input {
    width: 50px;
    min-width: 50px;
    height: 26px;

    border: 1px solid rgba(var(--reality-accent), 0.18);
    border-radius: 9px;

    background: rgba(var(--reality-accent), 0.12);
    color: #b982ff;

    text-align: center;
    font-size: 15px;
    font-weight: 800;

    outline: none;
    box-sizing: border-box;
}

.rate-input:focus {
    border-color: rgba(var(--reality-accent), 0.38);
    box-shadow: 0 0 0 3px rgba(var(--reality-accent), 0.08);
}

.rate-input::-webkit-outer-spin-button,
.rate-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.rate-input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* -----------------------------
   CTA
----------------------------- */

.reality-button-wrap {
    position: relative;
    margin-top: auto;
    padding-top: 12px;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: 66px;
    flex-shrink: 0;
    overflow: visible;
}

.reality-button {
    position: relative;
    overflow: hidden;

    width: 100%;
    min-height: 66px;
    height: 66px;
    padding: 0 18px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;
    border: 1px solid rgba(var(--reality-accent), 0.42);

    background:
        radial-gradient(circle at 50% 50%, rgba(var(--reality-accent), 0.08), transparent 56%),
        linear-gradient(180deg, #0b0f1d 0%, #070b16 100%);

    color: #f8fbff;
    cursor: pointer;

    box-shadow:
        0 0 22px rgba(var(--reality-accent), 0.16),
        inset 0 0 0 1px rgba(255,255,255,0.035);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease;
}

.reality-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(var(--reality-accent), 0.80),
            rgba(255,255,255,0.035) 42%,
            rgba(var(--reality-accent), 0.46)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0.75;
}

.reality-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    border-color: rgba(var(--reality-accent), 0.58);

    box-shadow:
        0 0 30px rgba(var(--reality-accent), 0.22),
        inset 0 0 0 1px rgba(255,255,255,0.045);
}

.reality-button-text {
    position: relative;
    z-index: 2;

    white-space: nowrap;
    display: block;
    width: 100%;
    text-align: center;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1.1;
    text-transform: uppercase;
}

.reality-button.beauty {
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* -----------------------------
   MOBILE
----------------------------- */

@media (max-width: 768px) {
    :root {
        --reality-card-width: 100%;
    }

    .reality-card {
        height: auto;
        min-height: 0;
        padding: 18px 14px 14px;
        border-radius: 22px;
    }

    .reality-header-text1,
    .reality-header-text2,
    .reality-header-text3,
    .reality-header-text4 {
        font-size: 32px;
    }

    .reality-grid {
        gap: 10px;
    }

    .reality-item {
        grid-template-columns: 48px minmax(0, 1fr);
        min-height: 64px;
        padding: 10px;
        border-radius: 16px;
        column-gap: 10px;
    }

    .reality-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .reality-icon::before {
        width: 26px;
        height: 26px;
    }

    .reality-label {
        font-size: 13px;
    }

    .reality-value {
        font-size: 19px;
    }

    .reality-number {
        font-size: 16px;
    }

    .reality-funny-text {
        font-size: 18px;
        line-height: 1.14;
    }

    .reality-button {
        min-height: 60px;
        height: 60px;
        border-radius: 18px;
    }

    .reality-button-text {
        font-size: 13px;
    }
}

/* === 08-playstyle/playstyle.css === */
.playstyle-card {
    --playstyle-accent: 178, 73, 255;
    --playstyle-blue: 82, 150, 255;
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    padding: clamp(24px, 3vw, 34px);
    border: 1px solid rgba(var(--playstyle-accent), 0.24);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 46%, rgba(var(--playstyle-accent), 0.10), transparent 34%),
        radial-gradient(circle at 14% 16%, rgba(var(--playstyle-blue), 0.08), transparent 26%),
        linear-gradient(180deg, rgba(7, 12, 27, 0.97), rgba(4, 7, 16, 0.98));
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.38),
        0 0 28px rgba(var(--playstyle-accent), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.result-insights-row .playstyle-card {
    display: flex;
    flex-direction: column;
    padding: clamp(14px, 1.8vw, 20px);
    border-radius: 18px;
}

.result-insights-row .playstyle-header {
    gap: 10px;
    margin-bottom: 12px;
}

.result-insights-row .playstyle-header-icon {
    font-size: 22px;
}

.result-insights-row .playstyle-header h3 {
    font-size: clamp(17px, 1.8vw, 22px);
}

.result-insights-row .playstyle-layout {
    flex: 1;
    grid-template-columns: minmax(120px, 0.85fr) minmax(160px, 1fr) minmax(120px, 0.85fr);
    gap: clamp(10px, 1.4vw, 16px);
    align-items: center;
}

.result-insights-row .playstyle-column {
    gap: 16px;
}

.result-insights-row .playstyle-metric {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
}

.result-insights-row .playstyle-metric-icon {
    width: 34px;
    border-radius: 11px;
    font-size: 18px;
}

.result-insights-row .playstyle-metric-title {
    font-size: 13px;
}

.result-insights-row .playstyle-metric-value {
    margin-top: 4px;
    font-size: clamp(18px, 2.2vw, 26px);
}

.result-insights-row .playstyle-progress {
    height: 7px;
    margin-top: 8px;
}

.result-insights-row .playstyle-metric-description {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.25;
}

.result-insights-row .playstyle-radar {
    min-height: 190px;
}

.result-insights-row .playstyle-radar svg {
    width: min(100%, 185px);
    max-width: 185px;
}

.result-insights-row .playstyle-axis {
    font-size: 11px;
}

.result-insights-row .playstyle-axis--top {
    top: 0;
}

.result-insights-row .playstyle-axis--bottom {
    bottom: 0;
}

.result-insights-row .playstyle-axis--left {
    left: 0;
}

.result-insights-row .playstyle-axis--right {
    right: 0;
}

.result-insights-row .playstyle-genres-row {
    grid-template-columns: minmax(110px, 0.65fr) minmax(0, 1.6fr);
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
}

.result-insights-row .playstyle-genres-title {
    gap: 8px;
    font-size: 12px;
}

.result-insights-row .playstyle-genres-title span {
    font-size: 16px;
}

.result-insights-row .playstyle-genres-list {
    gap: 8px;
}

.result-insights-row .playstyle-genre-pill {
    gap: 7px;
    padding: 8px 9px;
    border-radius: 11px;
    font-size: 11px;
}

.playstyle-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent) 0 82% / 100% 1px no-repeat,
        radial-gradient(circle at 16% 42%, rgba(var(--playstyle-accent), 0.16) 0 1px, transparent 1.4px),
        radial-gradient(circle at 78% 24%, rgba(var(--playstyle-blue), 0.13) 0 1px, transparent 1.4px),
        radial-gradient(circle at 88% 72%, rgba(var(--playstyle-accent), 0.12) 0 1px, transparent 1.4px);
    opacity: 0.75;
}

.playstyle-card > * {
    position: relative;
    z-index: 1;
}

.playstyle-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: clamp(22px, 3vw, 34px);
}

.playstyle-header-icon {
    color: rgb(var(--playstyle-accent));
    font-size: 30px;
    line-height: 1;
    text-shadow: 0 0 18px rgba(var(--playstyle-accent), 0.36);
}

.playstyle-header h3 {
    margin: 0;
    color: #f7f8ff;
    font-size: clamp(24px, 2.8vw, 34px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.playstyle-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.86fr) minmax(300px, 1.2fr) minmax(220px, 0.86fr);
    gap: clamp(22px, 4vw, 54px);
    align-items: center;
}

.playstyle-column {
    display: grid;
    gap: clamp(28px, 5vw, 72px);
}

.playstyle-metric {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.playstyle-metric-icon {
    width: 72px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #bd51ff;
    font-size: 34px;
    line-height: 1;
    border: 1px solid rgba(var(--playstyle-accent), 0.26);
    background:
        radial-gradient(circle at 50% 42%, rgba(var(--playstyle-accent), 0.22), rgba(var(--playstyle-accent), 0.06) 62%, rgba(8, 12, 25, 0.96) 100%);
    box-shadow:
        0 0 20px rgba(var(--playstyle-accent), 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.playstyle-metric-title {
    color: #f7f8ff;
    font-size: clamp(17px, 1.8vw, 24px);
    font-weight: 700;
    line-height: 1.1;
}

.playstyle-metric-value {
    margin-top: 10px;
    color: rgb(var(--playstyle-accent));
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 0 20px rgba(var(--playstyle-accent), 0.32);
}

.playstyle-progress {
    width: 100%;
    height: 13px;
    margin-top: 18px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(90, 98, 130, 0.20);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.playstyle-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #a634ff, #ce55ff);
    box-shadow: 0 0 18px rgba(var(--playstyle-accent), 0.36);
}

.playstyle-metric-description {
    margin-top: 16px;
    color: rgba(204, 210, 232, 0.68);
    font-size: clamp(14px, 1.5vw, 18px);
    line-height: 1.35;
}

.playstyle-radar {
    position: relative;
    min-height: 390px;
    display: grid;
    place-items: center;
}

.playstyle-radar svg {
    width: min(100%, 380px);
    max-width: 380px;
    aspect-ratio: 1;
    overflow: visible;
    filter: drop-shadow(0 0 22px rgba(var(--playstyle-accent), 0.13));
}

.playstyle-grid-shape {
    fill: none;
    stroke: rgba(139, 151, 196, 0.22);
    stroke-width: 1;
}

.playstyle-grid-line {
    stroke: rgba(139, 151, 196, 0.18);
    stroke-width: 1;
}

.playstyle-radar-fill {
    fill: url(#playstyleFill);
    stroke: none;
}

.playstyle-radar-line {
    fill: none;
    stroke: #c85aff;
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.playstyle-radar-dot {
    fill: #ffffff;
    stroke: #c85aff;
    stroke-width: 2;
}

.playstyle-axis {
    position: absolute;
    color: #f3f5ff;
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 600;
    line-height: 1;
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
}

.playstyle-axis--top {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.playstyle-axis--right {
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
}

.playstyle-axis--bottom {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.playstyle-axis--left {
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
}

.playstyle-genres-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-top: clamp(26px, 3vw, 36px);
    padding-top: 28px;
    border-top: 1px solid rgba(139, 151, 196, 0.16);
}

.playstyle-genres-title {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #f7f8ff;
    font-size: clamp(17px, 1.7vw, 22px);
    text-transform: uppercase;
    min-width: 0;
}

.playstyle-genres-title span {
    color: rgb(var(--playstyle-accent));
    font-size: 24px;
}

.playstyle-genres-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

.playstyle-genre-pill {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 18px;
    border: 1px solid rgba(var(--playstyle-accent), 0.26);
    background: rgba(10, 15, 33, 0.78);
    color: #f7f8ff;
    font-size: clamp(15px, 1.5vw, 20px);
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.playstyle-genre-pill span:not(.playstyle-genre-icon) {
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    line-height: 1.18;
}

.playstyle-genre-icon,
.playstyle-genre-pill strong {
    color: rgb(var(--playstyle-accent));
}

.playstyle-genre-pill strong {
    flex: 0 0 auto;
    font-size: 1.08em;
}

.playstyle-empty {
    color: rgba(204, 210, 232, 0.72);
    font-size: 16px;
}

.playstyle-empty--card {
    display: grid;
    min-height: 180px;
    place-items: center;
    border: 1px dashed rgba(var(--playstyle-accent), 0.22);
    border-radius: 18px;
    background: rgba(10, 15, 33, 0.42);
}

@media (max-width: 980px) {
    .result-insights-row .playstyle-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .result-insights-row .playstyle-radar {
        order: -1;
        min-height: 240px;
    }

    .result-insights-row .playstyle-radar svg {
        width: min(100%, 230px);
        max-width: 230px;
    }

    .result-insights-row .playstyle-genres-row,
    .result-insights-row .playstyle-genres-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .playstyle-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .playstyle-column {
        gap: 22px;
    }

    .playstyle-radar {
        order: -1;
        min-height: 330px;
    }

    .playstyle-axis--right {
        right: 8px;
    }

    .playstyle-axis--left {
        left: 8px;
    }

    .playstyle-genres-row,
    .playstyle-genres-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .playstyle-card {
        padding: 20px;
    }

    .playstyle-metric {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 14px;
    }

    .playstyle-metric-icon {
        width: 52px;
        border-radius: 16px;
        font-size: 26px;
    }

    .playstyle-radar {
        min-height: 280px;
    }

    .playstyle-radar svg {
        width: min(86vw, 280px);
    }
}

/* === 04-stats-grid-cart/stats-grid.css === */
/* -----------------------------
STATS GRID
----------------------------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 14px;
    align-items: stretch;
    overflow: visible;
    position: relative;
    z-index: 2;
}

/* -----------------------------
STAT CARDS — CLEAN PREMIUM STYLE
Размеры, сетка, отступы и radius оставлены как в твоём файле.
----------------------------- */
.stat-card {
    --card-accent: 154, 125, 255;

    min-height: 96px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;

    /* solid dark, без glassmorphism */
    background:
        radial-gradient(circle at 18% 50%, rgba(var(--card-accent), 0.065), transparent 36%),
        linear-gradient(180deg, #0b1020 0%, #070b16 100%);

    border: 1px solid rgba(var(--card-accent), 0.22);

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.34),
        0 0 16px rgba(120, 85, 255, 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

/* Цвета карточек.
   Работает и через новые классы карточек, и через старые классы иконок. */
.stat-card--rank,
.stat-card-rank,
.stat-card:has(.rank-icon) {
    --card-accent: 176, 97, 255;
}

.stat-card--games,
.stat-card:has(.games-icon) {
    --card-accent: 52, 146, 255;
}

.stat-card--hours,
.stat-card:has(.hours-icon) {
    --card-accent: 67, 218, 207;
}

.stat-card--game,
.stat-card:has(.topgame-icon) {
    --card-accent: 255, 121, 62;
}

.stat-card--achievements,
.stat-card-achievements,
.stat-card:has(.achievements-icon) {
    --card-accent: 204, 86, 255;
}

.stat-card--value,
.stat-card-account-value,
.stat-card:has(.value-icon) {
    --card-accent: 255, 197, 84;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;

    background:
        /* лёгкое цветное пятно */
        radial-gradient(
            circle at 12% 50%,
            rgba(var(--card-accent), 0.09) 0%,
            rgba(var(--card-accent), 0.035) 28%,
            transparent 52%
        ),

        /* звёзды */
        radial-gradient(circle at 12% 18%, rgba(var(--card-accent), 0.30) 0 1px, transparent 1.3px),
        radial-gradient(circle at 26% 68%, rgba(var(--card-accent), 0.22) 0 1px, transparent 1.2px),
        radial-gradient(circle at 34% 78%, rgba(var(--card-accent), 0.22) 0 1px, transparent 1.2px),
        radial-gradient(circle at 42% 18%, rgba(var(--card-accent), 0.26) 0 1px, transparent 1.3px),
        radial-gradient(circle at 49% 52%, rgba(var(--card-accent), 0.20) 0 1px, transparent 1.2px),
        radial-gradient(circle at 58% 24%, rgba(var(--card-accent), 0.24) 0 1px, transparent 1.2px),
        radial-gradient(circle at 63% 84%, rgba(255, 255, 255, 0.18) 0 1px, transparent 1.3px),
        radial-gradient(circle at 76% 28%, rgba(var(--card-accent), 0.32) 0 1px, transparent 1.4px),
        radial-gradient(circle at 82% 54%, rgba(var(--card-accent), 0.18) 0 1px, transparent 1.2px),
        radial-gradient(circle at 88% 66%, rgba(var(--card-accent), 0.24) 0 1px, transparent 1.3px),
        radial-gradient(circle at 91% 20%, rgba(var(--card-accent), 0.20) 0 1px, transparent 1.2px);

    opacity: 0.55;
}

/* Тонкая edge-light рамка как в референсе, без изменения размера карточек */
.stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;

    background:
    linear-gradient(
        135deg,
        rgba(var(--card-accent), 0.95) 0%,
        rgba(var(--card-accent), 0.50) 14%,
        rgba(255, 255, 255, 0.07) 34%,
        rgba(255, 255, 255, 0.025) 58%,
        rgba(var(--card-accent), 0.38) 78%,
        rgba(var(--card-accent), 0.85) 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0.75;
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--card-accent), 0.34);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.38),
        0 0 20px rgba(var(--card-accent), 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.052);
}

.stat-card:hover::after {
    opacity: 0.86;
}

/* -----------------------------
ICONS — круг как в референсе, но без сильного свечения
----------------------------- */
.stat-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(var(--card-accent), 0.145) 0%,
            rgba(var(--card-accent), 0.055) 48%,
            rgba(8, 12, 25, 0.98) 100%
        );

    border: 1px solid rgba(var(--card-accent), 0.28);

    box-shadow:
        inset 0 0 12px rgba(var(--card-accent), 0.065),
        inset 0 1px 0 rgba(255, 255, 255, 0.052);
}

/* внешний круг вокруг иконки, очень слабый */
.stat-icon-wrap::after {
    display: none;
}

.stat-icon {
    font-size: 24px;
    line-height: 1;
    color: rgb(var(--card-accent));
    filter: none;
    text-shadow: none;
}

/* -----------------------------
TEXT
----------------------------- */
.stat-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    position: relative;
    z-index: 2;
}

.stat-title {
    color: rgba(226, 230, 242, 0.76);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
}

.stat-value {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
    word-break: break-word;
    text-shadow:
        0 0 20px rgba(160, 210, 255, 0.50),
        0 0 8px rgba(160, 210, 255, 0.30),
        0 1px 3px rgba(0, 0, 0, 0.45);
}

.account-value-loading-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 118px;
}

.account-value-hourglass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05em;
    line-height: 1;
    color: rgb(var(--card-accent));
    animation: account-value-hourglass-pulse 1.2s ease-in-out infinite;
}

.account-value-loading-text {
    font-size: 14px;
    font-weight: 700;
    color: #c8d8ff;
}

@keyframes account-value-hourglass-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-1px);
    }
}

.stat-value-dynamic {
    font-size: 17px;
}

.achievements-progress-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.achievements-progress-value {
    color: #ffffff;
    font-weight: 800;
}

.stat-card-achievements {
    align-items: flex-start;
}

.stat-card-achievements .stat-text {
    width: 100%;
    gap: 8px;
}

.stat-card-achievements .stat-value {
    font-size: 22px;
    line-height: 1;
}

.achievement-summary-details {
    width: 100%;
    display: grid;
    gap: 6px;
    color: rgba(226, 230, 242, 0.78);
    font-size: 12px;
    line-height: 1.25;
}

.achievement-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.achievement-summary-line span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achievement-summary-line strong {
    flex: 0 0 auto;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.achievement-summary-note {
    margin-top: 2px;
    color: rgba(174, 184, 214, 0.82);
    font-size: 11px;
    line-height: 1.35;
}

.achievement-summary-card {
    --achievement-accent: 178, 73, 255;
    --achievement-blue: 91, 122, 255;

    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 16px;
    padding: clamp(14px, 2vw, 20px);
    border-radius: 18px;
    border: 1px solid rgba(var(--achievement-accent), 0.24);
    background:
        radial-gradient(circle at 24% 43%, rgba(var(--achievement-accent), 0.13), transparent 34%),
        radial-gradient(circle at 80% 18%, rgba(var(--achievement-blue), 0.08), transparent 30%),
        linear-gradient(180deg, rgba(8, 13, 28, 0.96), rgba(4, 7, 16, 0.98));
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.36),
        0 0 26px rgba(var(--achievement-accent), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.result-insights-row {
    display: grid;
    grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
    gap: clamp(16px, 2vw, 22px);
    align-items: stretch;
    margin-top: 18px;
}

.result-insights-row .achievement-summary-card,
.result-insights-row .playstyle-card {
    height: 100%;
    margin-top: 0;
}

.result-insights-row .achievement-summary-card {
    display: flex;
    flex-direction: column;
}

.result-insights-row .achievement-summary-content {
    flex: 1;
}

.achievement-summary-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), transparent) 0 84% / 100% 1px no-repeat,
        radial-gradient(circle at 14% 44%, rgba(var(--achievement-accent), 0.12) 0 1px, transparent 1.6px),
        radial-gradient(circle at 23% 58%, rgba(var(--achievement-accent), 0.10) 0 1px, transparent 1.5px),
        radial-gradient(circle at 34% 34%, rgba(var(--achievement-accent), 0.12) 0 1px, transparent 1.5px);
    opacity: 0.75;
}

.achievement-summary-card > * {
    position: relative;
    z-index: 1;
}

.achievement-summary-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: clamp(12px, 1.6vw, 16px);
}

.achievement-summary-header h3 {
    margin: 0;
    color: #f7f8ff;
    font-size: clamp(17px, 2vw, 24px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

.achievement-summary-card .rank-guide-anchor {
    position: static;
    flex: 0 0 auto;
}

.achievement-summary-content {
    display: grid;
    grid-template-columns: minmax(150px, 0.72fr) minmax(230px, 1fr);
    gap: clamp(16px, 3vw, 32px);
    align-items: center;
}

.achievement-summary-ring-wrap {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.achievement-summary-ring {
    position: relative;
    width: clamp(132px, 17vw, 180px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        conic-gradient(
            from -22deg,
            rgb(var(--achievement-accent)) 0 var(--achievement-progress),
            rgba(78, 63, 126, 0.34) var(--achievement-progress) 100%
        );
    box-shadow:
        0 0 24px rgba(var(--achievement-accent), 0.18),
        inset 0 0 22px rgba(var(--achievement-accent), 0.08);
}

.achievement-summary-ring::before {
    content: "";
    position: absolute;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    border-radius: inherit;
    background: #070b17;
    box-shadow: inset 0 0 32px rgba(0, 0, 0, 0.44);
}

.achievement-summary-ring-inner {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 7px;
    text-align: center;
}

.achievement-summary-rate {
    color: rgb(var(--achievement-accent));
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 950;
    line-height: 0.95;
    text-shadow: 0 0 24px rgba(var(--achievement-accent), 0.38);
}

.achievement-summary-ring-label {
    color: rgba(232, 235, 248, 0.72);
    font-size: clamp(12px, 1.3vw, 16px);
    font-weight: 500;
    line-height: 1.32;
}

.achievement-summary-details--large {
    gap: 0;
    font-size: 16px;
}

.achievement-summary-details--large .achievement-summary-line {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    justify-content: stretch;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(155, 167, 210, 0.12);
}

.achievement-summary-details--large .achievement-summary-line:last-child {
    border-bottom: 0;
}

.achievement-summary-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #bf57ff;
    font-size: 22px;
    line-height: 1;
    border: 1px solid rgba(var(--achievement-accent), 0.26);
    background:
        radial-gradient(circle at 50% 40%, rgba(var(--achievement-accent), 0.22), rgba(var(--achievement-accent), 0.055) 58%, rgba(8, 12, 25, 0.96) 100%);
    box-shadow:
        0 0 18px rgba(var(--achievement-accent), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.achievement-summary-line--unlocked .achievement-summary-icon {
    color: #ffbc4d;
}

.achievement-summary-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.achievement-summary-copy span {
    color: rgba(232, 235, 248, 0.82);
    font-size: clamp(12px, 1.2vw, 15px);
    font-weight: 600;
    line-height: 1.1;
    white-space: normal;
}

.achievement-summary-copy strong {
    color: #ffffff;
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
}

.achievement-summary-copy em {
    color: rgba(191, 154, 255, 0.78);
    font-size: clamp(11px, 1vw, 13px);
    font-style: normal;
    font-weight: 500;
}

.achievement-summary-footnote {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: clamp(10px, 1.6vw, 14px);
    padding-top: 10px;
    color: rgba(174, 184, 214, 0.86);
    font-size: clamp(11px, 1.1vw, 13px);
    line-height: 1.35;
}

.achievement-deep-scan-button {
    margin-left: auto;
    min-height: 32px;
    padding: 0 13px;
    border: 1px solid rgba(170, 126, 255, 0.34);
    border-radius: 999px;
    background: rgba(92, 55, 180, 0.18);
    color: #d9c8ff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.achievement-deep-scan-button:hover:not(:disabled),
.achievement-deep-scan-button:focus-visible:not(:disabled) {
    border-color: rgba(184, 140, 255, 0.58);
    background: rgba(113, 68, 220, 0.28);
    color: #ffffff;
}

.achievement-deep-scan-button:disabled {
    cursor: default;
    opacity: 0.58;
}

.achievement-summary-shield {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: rgba(176, 162, 255, 0.9);
    border: 1px solid rgba(176, 162, 255, 0.18);
    border-radius: 8px;
    background: rgba(126, 102, 255, 0.08);
}

@media (max-width: 820px) {
    .result-insights-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .achievement-summary-card {
        padding: 16px;
    }

    .achievement-summary-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .achievement-summary-ring {
        width: min(58vw, 180px);
    }

    .achievement-summary-details--large .achievement-summary-line {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
        padding: 12px 0;
    }

    .achievement-summary-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 21px;
    }
}

@media (max-width: 520px) {
    .achievement-summary-header h3 {
        font-size: 17px;
    }

    .achievement-summary-footnote {
        align-items: flex-start;
        font-size: 13px;
    }

    .achievement-deep-scan-button {
        width: 100%;
        margin-left: 0;
    }
}

.stat-top-game {
    line-height: 1.05;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
}

/* -----------------------------
POPUP / Z-INDEX — оставлено из твоего файла
----------------------------- */
.stat-card-rank {
    overflow: visible;
    z-index: 3000;
    isolation: isolate;
}

.stat-card-rank .stat-text {
    min-width: 0;
    max-width: 100%;
    padding-right: 22px;
    overflow: hidden;
}

.stat-card-rank .stat-value {
    max-width: 100%;
    display: block;
    overflow: visible;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
    text-overflow: clip;
}

.stat-card-account-value {
    overflow: visible;
    z-index: 3000;
    isolation: isolate;
}

.stat-card-account-value .stat-value,
#accountValueStatValue {
    min-width: 118px;
    min-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    word-break: normal;
}

.stat-card-rank:hover,
.stat-card-rank:focus-within,
.stat-card-account-value:hover,
.stat-card-account-value:focus-within {
    z-index: 5000;
}

.rank-guide-anchor {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    padding: 0;
    margin: 0;
}

.rank-guide-button {
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 25px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(156, 210, 255, 0.24);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(20, 29, 60, 0.96), rgba(28, 58, 110, 0.96));
    color: #edf6ff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    box-shadow:
        0 6px 14px rgba(8, 18, 48, 0.24),
        0 0 10px rgba(99, 165, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.rank-guide-anchor:hover .rank-guide-button,
.rank-guide-anchor:focus-within .rank-guide-button,
.rank-guide-anchor.is-open .rank-guide-button {
    transform: scale(1.08);
    filter: brightness(1.08);
    box-shadow:
        0 8px 18px rgba(8, 18, 48, 0.28),
        0 0 14px rgba(99, 165, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.rank-guide-popup {
    position: absolute;
    top: 26px;
    right: 0;
    width: 280px;
    padding: 14px;
    border-radius: 18px;
    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(110, 172, 255, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(12, 18, 38, 0.98), rgba(8, 12, 24, 0.98));
    border: 1px solid rgba(148, 186, 255, 0.20);
    box-shadow:
        0 18px 48px rgba(4, 10, 28, 0.52),
        0 0 26px rgba(92, 148, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 10000;
    isolation: isolate;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.rank-guide-popup.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.rank-guide-popup--floating {
    position: fixed;
    top: 0;
    left: 0;
}

.rank-guide-popup-title {
    font-size: 15px;
    font-weight: 800;
    color: #f1f7ff;
    margin-bottom: 4px;
}

.rank-guide-popup-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #b7c8e8;
    margin-bottom: 10px;
}

.rank-guide-list {
    display: grid;
    gap: 7px;
}

.rank-guide-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.rank-guide-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rank-guide-rank-name {
    font-size: 14px;
    font-weight: 800;
    color: #f3f7ff;
}

.rank-guide-rank-range {
    font-size: 14px;
    font-weight: 600;
    color: #b6c7e4;
}

.rank-guide-current-hours {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(99, 229, 171, 0.16);
    border: 1px solid rgba(108, 240, 180, 0.22);
    color: #9bffd2;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.rank-guide-row--current {
    background: linear-gradient(135deg, rgba(68, 122, 255, 0.18), rgba(67, 224, 174, 0.10));
    border-color: rgba(128, 210, 255, 0.22);
    box-shadow:
        0 0 0 1px rgba(112, 195, 255, 0.10),
        0 0 24px rgba(80, 185, 255, 0.08);
}

.rank-guide-row--current .rank-guide-rank-name {
    color: #dffff2;
}

.account-value-popup {
    width: 336px;
}

.popup-scroll-list {
    display: grid;
    gap: 7px;
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.account-value-list {
    display: grid;
    gap: 7px;
}

.popup-scroll-list::-webkit-scrollbar {
    width: 6px;
}

.popup-scroll-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(124, 182, 255, 0.34);
}

.account-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.account-value-game-name {
    min-width: 0;
    color: #f3f7ff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
}

.account-value-game-price {
    flex-shrink: 0;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 196, 102, 0.14);
    border: 1px solid rgba(255, 209, 122, 0.22);
    color: #ffd989;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.account-value-game-price--muted {
    background: rgba(155, 175, 205, 0.10);
    border-color: rgba(155, 175, 205, 0.18);
    color: #b9c8e2;
}

.account-value-empty {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #b6c7e4;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.achievements-popup {
    width: 360px;
}

.achievements-list {
    display: grid;
    gap: 7px;
}

.achievement-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.achievement-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.achievement-game-name {
    color: #f3f7ff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    word-break: break-word;
}

.achievement-name {
    color: #bcd0f0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

.achievement-global-percent {
    color: #d8e3f8;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

.achievement-rarity-label {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(133, 192, 255, 0.28);
    background: rgba(86, 140, 255, 0.12);
    color: #dff0ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.achievement-rarity-label--very-rare {
    border-color: rgba(255, 221, 124, 0.46);
    background: linear-gradient(180deg, rgba(120, 86, 12, 0.42), rgba(86, 62, 12, 0.34));
    color: #ffd86a;
}

.achievement-rarity-label--rare {
    border-color: rgba(233, 241, 255, 0.62);
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.26), transparent 46%),
        linear-gradient(180deg, rgba(182, 194, 214, 0.34), rgba(116, 129, 150, 0.38) 52%, rgba(74, 86, 104, 0.42));
    color: #f2f7ff;
    text-shadow: 0 0 8px rgba(220, 234, 255, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 0 14px rgba(188, 208, 236, 0.18);
}

.achievement-rarity-label--uncommon {
    border-color: rgba(214, 145, 96, 0.44);
    background: linear-gradient(180deg, rgba(116, 70, 42, 0.36), rgba(86, 50, 29, 0.32));
    color: #e5a679;
}

.achievement-load-more-button {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(124, 182, 255, 0.3);
    background: linear-gradient(180deg, rgba(22, 33, 66, 0.96), rgba(13, 21, 42, 0.98));
    color: #e9f2ff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.achievement-load-more-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 8px 16px rgba(8, 18, 48, 0.28);
}

@media (max-width: 800px) {
    .rank-guide-popup {
        width: 248px;
        right: -4px;
    }

    .account-value-popup {
        width: min(336px, calc(100vw - 24px));
    }
}

/* =============================
   PNG ICONS FOR STATS CARDS
============================= */

.stat-icon {
    font-size: 0;
    width: 60px;
    height: 60px;
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.rank-icon .stat-icon {
    background-image: url("../images/icon-rank.webp");
}

.games-icon .stat-icon {
    background-image: url("../images/icon-games.webp");
}

.hours-icon .stat-icon {
    background-image: url("../images/icon-hours.webp");
}

.topgame-icon .stat-icon {
    background-image: url("../images/icon-top-game.webp");
}

.achievements-icon .stat-icon {
    background-image: url("../images/icon-achievements.webp");
}

.value-icon .stat-icon {
    background-image: url("../images/icon-account-value.webp");
}

/* === 03-player-panel/player-panel.css === */
/* -----------------------------
   SHARED PANEL STYLE
----------------------------- */
.info-panel {
    margin-top: 16px;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(2px);
}

.info-panel.player-panel {
    background-color: #070b16;

    background-image:
        linear-gradient(
            180deg,
            rgba(6, 10, 20, 0.72) 0%,
            rgba(6, 10, 20, 0.18) 24%,
            rgba(6, 10, 20, 0.08) 50%,
            rgba(6, 10, 20, 0.76) 100%
        ),
        linear-gradient(
            90deg,
            rgba(6, 10, 20, 0.88) 0%,
            rgba(6, 10, 20, 0.46) 38%,
            rgba(6, 10, 20, 0.10) 100%
        ),
        url("../images/player-panel-bg.jpg");

    background-size:
        cover,
        cover,
        48% auto;

    background-position:
        center,
        center,
        75% center;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;

    border: 1px solid rgba(130, 160, 255, 0.22);

    box-shadow:
        0 0 18px rgba(80, 120, 255, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.info-panel.player-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(120, 150, 255, 0.18),
        inset 0 0 24px rgba(80, 120, 255, 0.08);
}

/* -----------------------------
   PLAYER PANEL
----------------------------- */
.player-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}
   
.player-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 30%, rgba(90, 130, 255, 0.02), transparent 28%),
        radial-gradient(circle at 78% 32%, rgba(140, 100, 255, 0.015), transparent 24%);
    pointer-events: none;
}

.player-panel::after {
    display: none;
}

.player-panel > * {
    position: relative;
    z-index: 1;
}

.player-left {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    flex: 1;
}
 


.player-right {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
}

.player-avatar-wrap {
    width: 80px;
    height: 80px;
    border-radius: 15%;
    padding: 1px;
    background: linear-gradient(145deg, rgba(145, 210, 255, 0.95), rgba(115, 110, 255, 0.9));
    box-shadow:
    0 0 8px rgba(120, 190, 255, 0.28),
    0 0 16px rgba(110, 110, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}



.player-avatar {
    width: 100%;
    height: 100%;
    border-radius: 15%;
    object-fit: cover;
    display: block;
}

.player-avatar-bottom {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}


.player-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}



.player-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #f3f7ff;
    text-shadow:
        0 0 30px rgba(160, 210, 255, 0.55),
        0 0 10px rgba(160, 210, 255, 0.30),
        0 1px 4px rgba(0, 0, 0, 0.45);
    padding: 2px 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: auto;
    max-width: 100%;
    margin-bottom: 2px;
    transition: color 0.4s;
    user-select: text;
}


.wave-name {
    display: flex;
    gap: 0;
    font-size: 32px;
    font-weight: bold;
    background: linear-gradient(90deg, #7ee8fa 0%, #eec0c6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 2px;
    height: 40px;
    align-items: flex-end;
    position: relative;
    overflow: visible;
}

.wave-letter {
    display: inline-block;
    animation: wave-move 1.6s infinite;
    will-change: transform;
}

@keyframes wave-move {
    0% { transform: translateY(0); }
    20% { transform: translateY(-12px); }
    40% { transform: translateY(0); }
    60% { transform: translateY(8px); }
    80% { transform: translateY(0); }
    100% { transform: translateY(0); }
}




/* -----------------------------
LEVEL BADGE
----------------------------- */
.level-badge {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    background: radial-gradient(circle at center, rgba(18, 28, 70, 0.96) 0%, rgba(8, 14, 35, 0.92) 72%);
    border: 2px solid rgba(120, 190, 255, 0.95);
    box-shadow:
    0 0 8px rgba(80, 140, 255, 0.28),
    inset 0 0 10px rgba(255,255,255,0.04);
    flex-shrink: 0;
}

.level-badge::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(140, 190, 255, 0.35);
    box-shadow: 0 0 10px rgba(100, 150, 255, 0.14);
}

.level-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1;
    color: #d7e7ff;
    opacity: 0.9;
}

.level-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: white;
    text-shadow:
    0 0 6px rgba(255,255,255,0.16),
    0 0 12px rgba(110,170,255,0.22);
}

/* === 10-private-profile/private-profile.css === */
.private-profile-showcase {
    margin-top: 24px;
    padding: 30px 24px 28px;
    border-radius: 24px;
    border: 1px solid rgba(112, 161, 255, 0.35);
    background:
        radial-gradient(circle at 14% 18%, rgba(96, 240, 255, 0.16), transparent 42%),
        radial-gradient(circle at 82% 10%, rgba(255, 177, 120, 0.16), transparent 34%),
        linear-gradient(150deg, rgba(8, 18, 32, 0.92), rgba(10, 22, 40, 0.9));
    box-shadow: 0 26px 60px rgba(2, 6, 14, 0.52);
}

.private-profile-title {
    margin: 0;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 3.8vw, 38px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f3f8ff;
}

.private-profile-subtitle {
    margin: 10px 0 24px;
    max-width: 720px;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: 1.55;
    color: rgba(219, 231, 247, 0.82);
}

.private-gallery {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.private-gallery-viewport {
    position: relative;
    width: 100%;
    min-height: 320px;
    border-radius: 20px;
    border: 1px solid rgba(147, 183, 255, 0.34);
    background: linear-gradient(160deg, rgba(9, 15, 27, 0.88), rgba(7, 13, 24, 0.94));
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.private-gallery-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.02);
    transition: opacity 280ms ease, transform 280ms ease;
    backface-visibility: hidden;
}

.private-gallery-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.private-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    backface-visibility: hidden;
}

.private-gallery-nav {
    appearance: none;
    -webkit-appearance: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(150deg, rgba(50, 83, 132, 0.92), rgba(26, 47, 80, 0.94));
    color: #eff6ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms ease, filter 180ms ease;
}

.private-gallery-nav:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.private-gallery-nav:active {
    transform: translateY(0);
}

.private-gallery-nav:focus,
.private-gallery-nav:focus-visible {
    outline: none;
}

.private-gallery-nav:disabled {
    opacity: 0.38;
    cursor: default;
    filter: none;
    transform: none;
}

.private-profile-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid rgba(186, 219, 255, 0.52);
    background: linear-gradient(145deg, rgba(69, 117, 173, 0.84), rgba(42, 79, 127, 0.92));
    text-decoration: none;
    color: #f8fbff;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: filter 180ms ease, transform 180ms ease;
}

.private-profile-back-button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .private-profile-showcase {
        padding: 20px 14px 18px;
        border-radius: 20px;
    }

    .private-gallery {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .private-gallery-nav {
        width: 100%;
        height: 40px;
        border-radius: 12px;
    }

    .private-gallery-viewport {
        min-height: 200px;
        order: -1;
    }
}

/* === css/footer.css === */
/* FOOTER STYLES */
.site-footer {
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(120px, 0.6fr) minmax(140px, 0.6fr) minmax(260px, 1fr);
    gap: 28px;
    margin-top: 34px;
    padding: 30px;
    border-radius: 18px;
    border: 1px solid rgba(126, 170, 255, 0.16);
    background:
        linear-gradient(180deg, rgba(8, 13, 29, 0.82), rgba(5, 9, 20, 0.92));
    box-shadow:
        0 20px 52px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #aeb8d6;
}

.site-footer-column {
    min-width: 0;
}

.site-footer-brand {
    color: #f3f6ff;
    font-size: 18px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
}

.site-footer-brand::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 22px;
    margin-right: 10px;
    vertical-align: -5px;
    border-radius: 5px;
    background:
        linear-gradient(to top, #39d7ff 0 72%, transparent 72%) 0 100% / 4px 100% no-repeat,
        linear-gradient(to top, #725dff 0 100%, transparent 100%) 7px 100% / 4px 100% no-repeat,
        linear-gradient(to top, #b946ff 0 56%, transparent 56%) 14px 100% / 4px 100% no-repeat;
    filter: drop-shadow(0 0 10px rgba(111, 83, 255, 0.55));
}

.site-footer h2 {
    margin: 0 0 12px;
    color: #eef3ff;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-footer p {
    margin: 12px 0 0;
    color: #9ea9c7;
    font-size: 14px;
    line-height: 1.65;
}

.site-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.site-footer-links a {
    color: #b9c4df;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 750;
    transition: color 0.16s ease;
}

.site-footer-links a:hover {
    color: #ffffff;
}

.site-footer-copy {
    display: block;
    margin-top: 18px;
    color: #7582a5;
    font-size: 13px;
    font-weight: 750;
}

@media (max-width: 900px) {
    .site-footer {
        grid-template-columns: 1fr 1fr;
        gap: 22px;
        padding: 24px;
    }
}

@media (max-width: 560px) {
    .site-footer {
        grid-template-columns: 1fr;
    }
}

/* === css/result-leaderboard-theme.css === */
/* Result page visual alignment with leaderboard page */

body.analyzer-page {
    color: #f4f7ff;
    --result-accent: 164, 92, 255;
    --result-blue: 88, 190, 255;
    --result-card-bg:
        radial-gradient(circle at 18% 10%, rgba(var(--result-accent), 0.10), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(var(--result-blue), 0.055), transparent 24%),
        linear-gradient(180deg, #080d1b 0%, #050812 100%);
    --result-card-bg-hover:
        radial-gradient(circle at 18% 10%, rgba(var(--result-accent), 0.14), transparent 30%),
        radial-gradient(circle at 86% 18%, rgba(var(--result-blue), 0.075), transparent 26%),
        linear-gradient(180deg, #0a1021 0%, #060a15 100%);
    --result-row-bg:
        radial-gradient(circle at 12% 50%, rgba(var(--result-accent), 0.08), transparent 26%),
        linear-gradient(180deg, #0a0f1e 0%, #070b16 100%);
    --result-card-border: rgba(148, 118, 255, 0.20);
    --result-card-border-hover: rgba(158, 126, 255, 0.30);
    --result-card-shadow:
        0 18px 42px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(var(--result-accent), 0.055),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
    --result-card-shadow-hover:
        0 20px 48px rgba(0, 0, 0, 0.38),
        0 0 22px rgba(var(--result-accent), 0.075),
        0 0 16px rgba(var(--result-blue), 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
    --result-card-radius: 18px;
    --result-section-gap: 16px;
    --result-card-padding: clamp(16px, 1.7vw, 22px);
    --result-row-gap: 14px;
    --result-insight-card-padding: clamp(18px, 1.9vw, 24px);
    --result-title-size: clamp(16px, 1.35vw, 20px);
    --result-label-size: 12px;
    --result-small-size: 12px;
    --result-number-sm: clamp(17px, 1.65vw, 22px);
    --result-number-md: clamp(24px, 2.6vw, 34px);
    --result-number-lg: clamp(30px, 3.7vw, 46px);
    --result-icon-size: 42px;
    --result-text: #f6f8ff;
    --result-muted: #aeb8d6;
    --result-soft: #c1cae4;
}

body.analyzer-page #result {
    margin-top: var(--result-section-gap);
    overflow-anchor: none;
}

body.analyzer-page .placeholder-text {
    color: #9ba8c8;
    background: rgba(8, 14, 30, 0.78);
    border: 1px solid rgba(126, 170, 255, 0.24);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(120, 160, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: none;
}

body.analyzer-page .info-panel,
body.analyzer-page .stat-card,
body.analyzer-page .verdict-card,
body.analyzer-page .reality-card,
body.analyzer-page .games-panel,
body.analyzer-page .achievement-summary-card,
body.analyzer-page .playstyle-card,
body.analyzer-page .private-profile-showcase {
    border-radius: var(--result-card-radius);
    border: 1px solid var(--result-card-border);
    background: var(--result-card-bg);
    box-shadow: var(--result-card-shadow);
    backdrop-filter: blur(12px);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body.analyzer-page .info-panel:hover,
body.analyzer-page .stat-card:hover,
body.analyzer-page .verdict-card:hover,
body.analyzer-page .reality-card:hover,
body.analyzer-page .games-panel:hover,
body.analyzer-page .achievement-summary-card:hover,
body.analyzer-page .playstyle-card:hover,
body.analyzer-page .private-profile-showcase:hover {
    transform: translateY(-2px);
    border-color: var(--result-card-border-hover);
    background: var(--result-card-bg-hover);
    box-shadow: var(--result-card-shadow-hover);
}

body.analyzer-page .verdict-wrapper .verdict-card:hover,
body.analyzer-page .reality-card:hover {
    transform: none;
}

body.analyzer-page .info-panel.player-panel {
    background: linear-gradient(180deg, rgba(8, 13, 27, 0.94), rgba(5, 8, 18, 0.96));
    background-image: linear-gradient(180deg, rgba(8, 13, 27, 0.94), rgba(5, 8, 18, 0.96));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-color: var(--result-card-border);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: none;
}

body.analyzer-page .info-panel.player-panel::before,
body.analyzer-page .info-panel.player-panel::after,
body.analyzer-page .player-panel::before,
body.analyzer-page .player-panel::after {
    opacity: 0;
    display: none;
}

body.analyzer-page .player-name,
body.analyzer-page .player-name-bottom,
body.analyzer-page .stat-value,
body.analyzer-page .verdict-rank,
body.analyzer-page .verdict-money,
body.analyzer-page .verdict-achievements-value,
body.analyzer-page .reality-value,
body.analyzer-page .game-name,
body.analyzer-page .private-profile-title {
    color: #f5f7ff;
    text-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
}

body.analyzer-page .wave-name {
    background: none;
    -webkit-text-fill-color: #f5f7ff;
    color: #f5f7ff;
}

body.analyzer-page .stat-title,
body.analyzer-page .reality-label,
body.analyzer-page .verdict-days,
body.analyzer-page .verdict-years,
body.analyzer-page .verdict-money-equivalent,
body.analyzer-page .verdict-rank-description,
body.analyzer-page .game-hours,
body.analyzer-page .private-profile-subtitle,
body.analyzer-page .leaderboard-like-muted {
    color: #aeb8d6;
}

body.analyzer-page .stat-card {
    --card-accent: 126, 170, 255;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(8, 13, 27, 0.94), rgba(5, 8, 18, 0.96));
    border-color: var(--result-card-border);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: none;
}

body.analyzer-page .stat-card::before {
    opacity: 0;
    display: none;
}

body.analyzer-page .stat-card::after,
body.analyzer-page .reality-card::after,
body.analyzer-page .reality-card::before,
body.analyzer-page .reality-item-particles,
body.analyzer-page .reality-item-particle {
    opacity: 0;
    display: none;
}

body.analyzer-page .stat-icon-wrap,
body.analyzer-page .reality-icon,
body.analyzer-page .level-badge {
    border-color: rgba(45, 157, 255, 0.28);
    background:
        radial-gradient(circle at 50% 45%, rgba(var(--result-accent), 0.15), rgba(var(--result-accent), 0.045) 58%, rgba(8, 12, 25, 0.96) 100%);
    box-shadow:
        inset 0 0 14px rgba(var(--result-accent), 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.analyzer-page .stat-icon {
    color: #c785ff;
}

body.analyzer-page .level-label {
    color: #9da7ca;
}

body.analyzer-page .level-badge {
    border-color: rgba(var(--result-blue), 0.82);
    background:
        radial-gradient(circle at 50% 45%, rgba(var(--result-blue), 0.26), rgba(var(--result-accent), 0.14) 48%, rgba(8, 12, 25, 0.98) 100%);
    box-shadow:
        0 0 18px rgba(var(--result-blue), 0.34),
        0 0 34px rgba(var(--result-accent), 0.22),
        inset 0 0 16px rgba(var(--result-blue), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.analyzer-page .level-badge::before {
    border-color: rgba(var(--result-blue), 0.42);
    box-shadow:
        0 0 14px rgba(var(--result-blue), 0.30),
        0 0 28px rgba(var(--result-accent), 0.16);
}

body.analyzer-page .level-value {
    color: #ffffff;
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.24),
        0 0 16px rgba(var(--result-blue), 0.38);
}

body.analyzer-page .stat-card-rank .stat-value {
    max-width: 100%;
    display: block;
    overflow: visible;
    overflow-wrap: normal;
    word-break: normal;
    white-space: normal;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    font-size: clamp(14px, 1.3vw, 17px);
    line-height: 1.15;
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
}

body.analyzer-page .verdict-wrapper {
    grid-template-columns: minmax(0, 2fr) minmax(320px, 0.95fr);
    gap: clamp(18px, 2.2vw, 28px);
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
}

body.analyzer-page .verdict-card {
    border-color: var(--result-card-border);
    background: var(--result-card-bg);
    box-shadow: var(--result-card-shadow);
}

body.analyzer-page .verdict-time,
body.analyzer-page .account-value,
body.analyzer-page .verdict-top-games,
body.analyzer-page .verdict-achievements,
body.analyzer-page .account-value-verdict-rank {
    border: 1px solid rgba(var(--result-accent), 0.18);
    background: var(--result-row-bg);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body.analyzer-page .verdict-time {
    border-right-color: rgba(var(--result-accent), 0.18);
}

body.analyzer-page .account-value {
    border-left-color: rgba(var(--result-accent), 0.18);
}

body.analyzer-page .account-value-verdict-rank::before {
    border-color: rgba(126, 170, 255, 0.34);
    background:
        linear-gradient(30deg, transparent 22%, rgba(45, 157, 255, 0.10) 22% 26%, transparent 26%),
        linear-gradient(150deg, transparent 22%, rgba(187, 53, 255, 0.10) 22% 26%, transparent 26%),
        rgba(8, 14, 31, 0.82);
}

body.analyzer-page .verdict-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(5, 10, 22, 0.54), rgba(5, 10, 22, 0.82)),
        rgba(5, 10, 22, 0.26);
    z-index: 1;
}

body.analyzer-page .verdict-content {
    z-index: 2;
}

body.analyzer-page .verdict-background {
    opacity: 0.18;
    filter: saturate(0.72) brightness(0.62);
}

body.analyzer-page .hours-number,
body.analyzer-page .hours-word,
body.analyzer-page .verdict-days,
body.analyzer-page .verdict-years,
body.analyzer-page .verdict-achievements-value,
body.analyzer-page .verdict-never-played-value,
body.analyzer-page .verdict-money .account-value-loading-text,
body.analyzer-page .account-value-hourglass {
    color: #dce6ff;
}

body.analyzer-page .verdict-rank {
    color: #ffffff;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

body.analyzer-page .verdict-rank-description {
    color: #9da7ca;
}

body.analyzer-page .share-label {
    color: #f4f7ff;
}

body.analyzer-page .share-button-share,
body.analyzer-page .share-button-twitter,
body.analyzer-page .share-button-download,
body.analyzer-page .share-button-copy,
body.analyzer-page .games-toggle-button,
body.analyzer-page .private-profile-back-button,
body.analyzer-page .reality-button {
    border: 1px solid rgba(126, 170, 255, 0.28);
    background: linear-gradient(135deg, #2d9dff 0%, #794dff 52%, #bb35ff 100%);
    color: #ffffff;
    box-shadow:
        0 10px 24px rgba(30, 60, 180, 0.22),
        0 0 18px rgba(93, 162, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

body.analyzer-page .share-button-share:hover,
body.analyzer-page .share-button-twitter:hover,
body.analyzer-page .share-button-download:hover,
body.analyzer-page .share-button-copy:hover,
body.analyzer-page .games-toggle-button:hover,
body.analyzer-page .private-profile-back-button:hover,
body.analyzer-page .reality-button:hover {
    border-color: rgba(184, 220, 255, 0.46);
    filter: brightness(1.05);
}

body.analyzer-page .games-panel h3 {
    color: var(--result-text);
    background: none;
    -webkit-text-fill-color: var(--result-text);
    text-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
    letter-spacing: 0;
    text-transform: none;
}

body.analyzer-page .games-panel {
    padding: 26px 28px;
    border-radius: 22px;
    background: var(--result-card-bg);
    border-color: var(--result-card-border);
    box-shadow: var(--result-card-shadow);
}

body.analyzer-page .achievement-summary-card,
body.analyzer-page .playstyle-card {
    border-radius: var(--result-card-radius);
    border-color: var(--result-card-border);
    background: var(--result-card-bg);
    box-shadow: var(--result-card-shadow);
}

body.analyzer-page .achievement-summary-card::before,
body.analyzer-page .playstyle-card::before {
    opacity: 0.34;
}

body.analyzer-page .achievement-summary-header h3,
body.analyzer-page .playstyle-header h3 {
    color: var(--result-text);
    text-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

body.analyzer-page .achievement-summary-ring,
body.analyzer-page .playstyle-radar svg {
    filter: none;
    box-shadow:
        0 0 16px rgba(var(--result-accent), 0.10),
        inset 0 0 18px rgba(var(--result-accent), 0.06);
}

body.analyzer-page .achievement-summary-ring {
    background:
        conic-gradient(
            from -22deg,
            rgba(var(--result-accent), 0.92) 0 var(--achievement-progress),
            rgba(91, 104, 150, 0.22) var(--achievement-progress) 100%
        );
}

body.analyzer-page .achievement-summary-ring::before {
    background: #070b16;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.38);
}

body.analyzer-page .achievement-summary-rate,
body.analyzer-page .playstyle-metric-value {
    color: #c792ff;
    text-shadow: 0 0 14px rgba(var(--result-accent), 0.24);
}

body.analyzer-page .achievement-summary-ring-label,
body.analyzer-page .achievement-summary-copy span,
body.analyzer-page .playstyle-metric-description,
body.analyzer-page .achievement-summary-footnote,
body.analyzer-page .playstyle-empty {
    color: var(--result-muted);
}

body.analyzer-page .achievement-summary-copy strong,
body.analyzer-page .playstyle-metric-title,
body.analyzer-page .playstyle-axis,
body.analyzer-page .playstyle-genres-title,
body.analyzer-page .playstyle-genre-pill {
    color: var(--result-text);
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

body.analyzer-page .achievement-summary-copy em {
    color: rgba(199, 146, 255, 0.72);
}

body.analyzer-page .achievement-summary-details--large .achievement-summary-line,
body.analyzer-page .playstyle-genres-row {
    border-color: rgba(139, 151, 196, 0.13);
}

body.analyzer-page .achievement-summary-icon,
body.analyzer-page .achievement-summary-line--unlocked .achievement-summary-icon,
body.analyzer-page .achievement-summary-shield,
body.analyzer-page .playstyle-metric-icon,
body.analyzer-page .playstyle-genre-pill {
    color: #c792ff;
    border-color: rgba(var(--result-accent), 0.20);
    background: var(--result-row-bg);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body.analyzer-page .playstyle-progress,
body.analyzer-page .game-progress {
    background: rgba(91, 104, 150, 0.20);
    box-shadow: inset 0 0 0 1px rgba(160, 190, 255, 0.08);
}

body.analyzer-page .playstyle-progress span,
body.analyzer-page .game-progress-bar {
    background: linear-gradient(90deg, #7d63ff 0%, #b35cff 100%);
    box-shadow: 0 0 10px rgba(var(--result-accent), 0.20);
}

body.analyzer-page .playstyle-grid-shape {
    stroke: rgba(139, 151, 196, 0.18);
}

body.analyzer-page .playstyle-grid-line {
    stroke: rgba(139, 151, 196, 0.13);
}

body.analyzer-page .playstyle-radar-line {
    stroke: #b970ff;
    stroke-width: 1.8;
}

body.analyzer-page .playstyle-radar-dot {
    fill: #e7d6ff;
    stroke: #b970ff;
    stroke-width: 1.6;
}

body.analyzer-page .playstyle-genre-icon,
body.analyzer-page .playstyle-genre-pill strong,
body.analyzer-page .playstyle-header-icon,
body.analyzer-page .playstyle-genres-title span {
    color: #c792ff;
    text-shadow: 0 0 12px rgba(var(--result-accent), 0.18);
}

body.analyzer-page .achievement-summary-card:hover,
body.analyzer-page .playstyle-card:hover {
    border-color: var(--result-card-border-hover);
    background: var(--result-card-bg-hover);
    box-shadow: var(--result-card-shadow-hover);
}

body.analyzer-page .games-panel:hover {
    border-color: var(--result-card-border-hover);
    background: var(--result-card-bg-hover);
    box-shadow: var(--result-card-shadow-hover);
}

body.analyzer-page .games-panel h3::after {
    background: linear-gradient(90deg, #2fb2ff, #bc35ff);
    box-shadow: 0 0 14px rgba(93, 162, 255, 0.24);
}

body.analyzer-page .game-rank {
    color: #ffffff;
    background: var(--result-row-bg);
    border: 1px solid rgba(var(--result-accent), 0.18);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.analyzer-page .game-rank-icon-wrap {
    border-radius: 14px;
    background: var(--result-row-bg);
}

body.analyzer-page .game-rank-icon {
    border-radius: 12px;
}

body.analyzer-page .verdict-game-icon-wrap {
    border-color: rgba(var(--result-accent), 0.22);
    background: var(--result-row-bg);
    box-shadow:
        0 0 14px rgba(var(--result-accent), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.analyzer-page .game-main {
    border-color: rgba(var(--result-accent), 0.18);
    background: var(--result-row-bg);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body.analyzer-page .game-row:hover .game-main {
    transform: translateY(-1px);
    border-color: rgba(var(--result-accent), 0.32);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.32),
        0 0 18px rgba(var(--result-accent), 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.analyzer-page .game-row:hover .game-name {
    text-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
}

body.analyzer-page .game-progress {
    background: linear-gradient(270deg, rgba(112, 145, 255, 0.24), rgba(112, 145, 255, 0.06));
    box-shadow: inset 0 0 0 1px rgba(160, 190, 255, 0.1);
}

body.analyzer-page .game-progress-bar {
    background: linear-gradient(270deg, #9c74ff, #6b5cff);
    box-shadow: 0 0 12px rgba(139, 92, 255, 0.22);
}

body.analyzer-page .reality-header-text1,
body.analyzer-page .reality-header-text2,
body.analyzer-page .reality-header-text3,
body.analyzer-page .reality-header-text4 {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
    letter-spacing: 0;
}

body.analyzer-page .reality-header-text1 {
    background-image: linear-gradient(90deg, #f4f7ff 0%, #d6e5ff 100%);
}

body.analyzer-page .reality-header-text2 {
    background-image: linear-gradient(90deg, #c792ff 0%, #e1b8ff 100%);
}

body.analyzer-page .reality-header-text3 {
    background-image: linear-gradient(90deg, #78d6ff 0%, #79f2ff 100%);
}

body.analyzer-page .reality-header-text4 {
    background-image: linear-gradient(90deg, #ffd37d 0%, #ffb36e 100%);
}

body.analyzer-page .reality-funny-text {
    max-width: 100%;
    color: rgba(226, 232, 248, 0.86);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-wrap: balance;
    overflow-wrap: break-word;
}

body.analyzer-page .reality-header-line {
    background: linear-gradient(90deg, rgba(142, 170, 255, 0.96), rgba(168, 108, 255, 0.96));
    box-shadow: 0 0 12px rgba(126, 170, 255, 0.14);
}

body.analyzer-page .reality-item {
    border-color: rgba(126, 170, 255, 0.18);
    background: linear-gradient(180deg, rgba(12, 18, 40, 0.72), rgba(7, 12, 28, 0.78));
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.analyzer-page .reality-item::before {
    opacity: 0.22;
}

body.analyzer-page .reality-item:hover {
    transform: translateY(-1px);
    border-color: rgba(126, 170, 255, 0.26);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.24),
        0 0 18px rgba(93, 162, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.analyzer-page .rate-box {
    border: 1px solid rgba(126, 170, 255, 0.18);
    background: rgba(9, 15, 31, 0.85);
}

body.analyzer-page .rate-dollar,
body.analyzer-page .rate-text {
    color: #aeb8d6;
}

body.analyzer-page .rate-input {
    border-color: rgba(126, 170, 255, 0.26);
    background: rgba(126, 170, 255, 0.12);
    color: #f4f7ff;
}

body.analyzer-page .private-gallery-nav {
    border: 1px solid rgba(126, 170, 255, 0.24);
    background: rgba(45, 157, 255, 0.12);
    color: #f4f7ff;
}

body.analyzer-page .private-gallery-nav:hover {
    border-color: rgba(184, 220, 255, 0.42);
    box-shadow: 0 0 16px rgba(93, 162, 255, 0.12);
}

@media (max-width: 860px) {
    body.analyzer-page .verdict-wrapper {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        justify-items: stretch;
    }
}

body.analyzer-page .info-panel,
body.analyzer-page .stats-grid,
body.analyzer-page .verdict-wrapper,
body.analyzer-page .result-insights-row,
body.analyzer-page .games-panel {
    margin-top: var(--result-section-gap);
}

body.analyzer-page .info-panel.player-panel,
body.analyzer-page .games-panel,
body.analyzer-page .achievement-summary-card,
body.analyzer-page .playstyle-card {
    padding: var(--result-card-padding);
}

body.analyzer-page .stats-grid,
body.analyzer-page .verdict-wrapper,
body.analyzer-page .result-insights-row,
body.analyzer-page .games-list,
body.analyzer-page .account-verdict-games-and-achievements,
body.analyzer-page .reality-grid {
    gap: var(--result-row-gap);
}

@media (max-width: 640px) {
    body.analyzer-page {
        --result-section-gap: 14px;
        --result-card-padding: 16px;
        --result-insight-card-padding: 18px;
        --result-row-gap: 12px;
    }
}

body.analyzer-page .achievement-summary-card,
body.analyzer-page .playstyle-card {
    padding: var(--result-insight-card-padding);
}

body.analyzer-page .achievement-summary-content {
    gap: clamp(18px, 3.4vw, 36px);
}

body.analyzer-page .achievement-summary-ring {
    width: clamp(152px, 19.5vw, 207px);
}

body.analyzer-page .achievement-summary-rate {
    font-size: clamp(35px, 4.6vw, 53px);
}

body.analyzer-page .achievement-summary-icon {
    width: 48px;
    height: 48px;
    font-size: 25px;
}

body.analyzer-page .playstyle-card .playstyle-radar {
    min-height: 219px;
}

body.analyzer-page .playstyle-card .playstyle-radar svg {
    width: min(100%, 213px);
    max-width: 213px;
}

body.analyzer-page .playstyle-card .playstyle-metric-icon {
    width: 39px;
    font-size: 21px;
}

body.analyzer-page .playstyle-card .playstyle-metric-value {
    font-size: clamp(21px, 2.5vw, 30px);
}

/* Stable media sizing and loading skeletons for result content. */
body.analyzer-page .player-avatar,
body.analyzer-page .player-avatar-bottom,
body.analyzer-page .game-rank-icon,
body.analyzer-page .verdict-game-icon,
body.analyzer-page .private-gallery-slide img {
    display: block;
    max-width: 100%;
    object-fit: cover;
}

body.analyzer-page .player-avatar {
    width: 80px;
    height: 80px;
    aspect-ratio: 1 / 1;
}

body.analyzer-page .player-avatar-bottom {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
}

body.analyzer-page .game-rank-icon {
    width: 60px;
    height: 60px;
    aspect-ratio: 1 / 1;
}

body.analyzer-page .verdict-game-icon {
    width: 30px;
    height: 30px;
    aspect-ratio: 1 / 1;
}

body.analyzer-page .private-gallery-slide img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}

body.analyzer-page .playstyle-empty,
body.analyzer-page .verdict-achievements-fallback {
    min-height: 72px;
}

body.analyzer-page .games-list:empty::before {
    content: "";
    display: block;
    min-height: 520px;
    border-radius: 14px;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035), transparent),
        linear-gradient(180deg, rgba(126, 170, 255, 0.08), rgba(126, 170, 255, 0.025));
    background-size: 220% 100%, 100% 100%;
    animation: resultSkeletonPulse 1.8s ease-in-out infinite;
}

body.analyzer-page .placeholder-text {
    position: relative;
    overflow: hidden;
}

body.analyzer-page .placeholder-text::after,
body.analyzer-page .analysis-loading-screen::after {
    content: "";
    position: absolute;
    inset: auto 18px 18px;
    height: 180px;
    border-radius: 18px;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.035), transparent),
        repeating-linear-gradient(
            180deg,
            rgba(126, 170, 255, 0.075) 0 58px,
            transparent 58px 74px
        );
    background-size: 220% 100%, 100% 100%;
    opacity: 0.72;
    animation: resultSkeletonPulse 1.8s ease-in-out infinite;
}

@keyframes resultSkeletonPulse {
    0% {
        background-position: 120% 0, 0 0;
        opacity: 0.52;
    }

    50% {
        opacity: 0.82;
    }

    100% {
        background-position: -120% 0, 0 0;
        opacity: 0.52;
    }
}

@media (max-width: 600px) {
    body.analyzer-page .stats-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        align-items: stretch;
        min-height: 390px;
    }

    body.analyzer-page .stat-card {
        width: 100%;
        min-width: 0;
        min-height: 64px;
        padding: 8px 10px;
        gap: 8px;
        align-items: center;
        border-radius: 12px;
    }

    body.analyzer-page .stat-text {
        min-width: 0;
        max-width: 100%;
        gap: 3px;
    }

    body.analyzer-page .stat-icon-wrap {
        width: 32px;
        height: 32px;
        min-width: 32px;
        flex: 0 0 32px;
    }

    body.analyzer-page .stat-icon {
        width: 24px;
        height: 24px;
        font-size: 16px;
        flex: 0 0 24px;
        background-size: contain;
    }

    body.analyzer-page .stat-title {
        max-width: 100%;
        font-size: 10px;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.analyzer-page .stat-value,
    body.analyzer-page .stat-card-rank .stat-value,
    body.analyzer-page .stat-card-achievements .stat-value {
        max-width: 100%;
        font-size: clamp(14px, 4vw, 17px);
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        -webkit-line-clamp: 1;
    }

    body.analyzer-page .account-value-loading-wrap {
        min-width: 0;
        max-width: 100%;
        gap: 6px;
    }

    body.analyzer-page .account-value-loading-text {
        min-width: 0;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* Result UI system normalization: one scale for the complete analyzer result page. */

body.analyzer-page .info-panel,
body.analyzer-page .stats-grid,
body.analyzer-page .verdict-wrapper,
body.analyzer-page .result-insights-row,
body.analyzer-page .games-panel,
body.analyzer-page .site-footer {
    margin-top: var(--result-section-gap);
}

body.analyzer-page .info-panel,
body.analyzer-page .stat-card,
body.analyzer-page .verdict-card,
body.analyzer-page .reality-card,
body.analyzer-page .games-panel,
body.analyzer-page .achievement-summary-card,
body.analyzer-page .playstyle-card,
body.analyzer-page .private-profile-showcase,
body.analyzer-page .site-footer {
    border-radius: var(--result-card-radius);
    border-color: var(--result-card-border);
    box-shadow: var(--result-card-shadow);
}

body.analyzer-page .info-panel:hover,
body.analyzer-page .stat-card:hover,
body.analyzer-page .verdict-card:hover,
body.analyzer-page .reality-card:hover,
body.analyzer-page .games-panel:hover,
body.analyzer-page .achievement-summary-card:hover,
body.analyzer-page .playstyle-card:hover {
    border-color: var(--result-card-border-hover);
    box-shadow: var(--result-card-shadow-hover);
}

body.analyzer-page .player-name,
body.analyzer-page .player-name-bottom,
body.analyzer-page .stat-value,
body.analyzer-page .verdict-rank,
body.analyzer-page .verdict-money,
body.analyzer-page .hours-number,
body.analyzer-page .game-name,
body.analyzer-page .reality-value,
body.analyzer-page .achievement-summary-rate,
body.analyzer-page .playstyle-metric-value,
body.analyzer-page .site-footer-brand {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

body.analyzer-page .info-panel.player-panel {
    min-height: 108px;
    padding: var(--result-card-padding);
}

body.analyzer-page .player-panel {
    gap: var(--result-row-gap);
}

body.analyzer-page .player-avatar-wrap,
body.analyzer-page .player-avatar-wrap-bottom {
    width: clamp(64px, 6.8vw, 88px);
    height: clamp(64px, 6.8vw, 88px);
    min-width: clamp(64px, 6.8vw, 88px);
}

body.analyzer-page .player-name,
body.analyzer-page .player-name-bottom {
    font-size: clamp(20px, 2.1vw, 30px);
    line-height: 1.12;
}

body.analyzer-page .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--result-row-gap);
}

body.analyzer-page .stat-card {
    min-height: 86px;
    padding: 14px 16px;
    gap: 12px;
    border-radius: 16px;
}

body.analyzer-page .stat-icon-wrap {
    width: var(--result-icon-size);
    height: var(--result-icon-size);
    min-width: var(--result-icon-size);
}

body.analyzer-page .stat-icon {
    width: 30px;
    height: 30px;
    font-size: 20px;
    background-size: contain;
}

body.analyzer-page .stat-title {
    font-size: var(--result-label-size);
    line-height: 1.15;
}

body.analyzer-page .stat-value,
body.analyzer-page .stat-card-achievements .stat-value {
    max-width: 100%;
    font-size: var(--result-number-sm);
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    overflow-wrap: normal;
}

body.analyzer-page .verdict-wrapper {
    grid-template-columns: minmax(0, 2fr) minmax(320px, 0.95fr);
    gap: clamp(18px, 2.2vw, 28px);
    align-items: stretch;
}

body.analyzer-page .verdict-card {
    aspect-ratio: auto;
    min-height: clamp(640px, 58vw, 760px);
}

body.analyzer-page .verdict-content {
    min-height: 100%;
    padding: clamp(16px, 2vw, 24px);
    gap: var(--result-row-gap);
}

body.analyzer-page .verdict-header,
body.analyzer-page .games-panel h3,
body.analyzer-page .achievement-summary-header h3,
body.analyzer-page .playstyle-header h3 {
    font-size: var(--result-title-size);
    line-height: 1.15;
    letter-spacing: 0.06em;
}

body.analyzer-page .player-left-bottom,
body.analyzer-page .verdict-time,
body.analyzer-page .account-value,
body.analyzer-page .verdict-top-games,
body.analyzer-page .verdict-achievements,
body.analyzer-page .account-value-verdict-rank,
body.analyzer-page .reality-item,
body.analyzer-page .game-main,
body.analyzer-page .achievement-summary-details--large .achievement-summary-line,
body.analyzer-page .playstyle-metric,
body.analyzer-page .playstyle-genre-pill {
    border-radius: 14px;
    border-color: rgba(var(--result-accent), 0.18);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.analyzer-page .player-left-bottom,
body.analyzer-page .verdict-time,
body.analyzer-page .account-value,
body.analyzer-page .verdict-top-games,
body.analyzer-page .verdict-achievements,
body.analyzer-page .account-value-verdict-rank {
    padding: 14px;
}

body.analyzer-page .account-value-verdict-rank {
    gap: 8px;
}

body.analyzer-page .account-value-verdict-rank::before {
    content: none;
}

body.analyzer-page .stat-card-rank .stat-value {
    max-width: 100%;
    font-size: var(--result-number-sm);
    line-height: 1.08;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: normal;
    overflow-wrap: normal;
    -webkit-line-clamp: unset;
}

body.analyzer-page .verdict-rank-badge-image {
    width: var(--verdict-rank-badge-size, 76px);
    height: var(--verdict-rank-badge-size, 76px);
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
    border-radius: 24%;
    object-fit: cover;
    filter: drop-shadow(0 0 16px rgba(var(--result-accent), 0.32));
}

body.analyzer-page .hours-number,
body.analyzer-page .verdict-money,
body.analyzer-page .verdict-achievements-value {
    font-size: var(--result-number-md);
    line-height: 1.03;
}

body.analyzer-page .verdict-rank {
    max-width: 100%;
    color: #b98cff;
    background: linear-gradient(90deg, #5bc4ff 0%, #9b6cff 44%, #d85cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(19px, 2.2vw, 30px);
    line-height: 1.05;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

body.analyzer-page .verdict-rank-description,
body.analyzer-page .verdict-achievements-list div,
body.analyzer-page .verdict-achievements-list strong,
body.analyzer-page .verdict-days,
body.analyzer-page .verdict-years,
body.analyzer-page .hours-word {
    font-size: var(--result-small-size);
}

body.analyzer-page .verdict-game-icon-wrap {
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex-basis: 28px;
}

body.analyzer-page .game-item1,
body.analyzer-page .game-item2,
body.analyzer-page .game-item3 {
    min-height: 32px;
    gap: 8px;
    font-size: 13px;
}

body.analyzer-page .reality-card {
    min-height: 100%;
    padding: var(--result-card-padding);
}

body.analyzer-page .reality-card::before {
    opacity: 0.18;
}

body.analyzer-page .reality-card::after {
    opacity: 0.45;
}

body.analyzer-page .reality-hero {
    padding-bottom: 12px;
    margin-bottom: 12px;
}

body.analyzer-page .reality-header-text1,
body.analyzer-page .reality-header-text2,
body.analyzer-page .reality-header-text3,
body.analyzer-page .reality-header-text4 {
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 0.92;
    letter-spacing: 0;
    text-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

body.analyzer-page .reality-header-text3 {
    font-size: clamp(27px, 3vw, 38px);
}

body.analyzer-page .reality-item {
    min-height: 58px;
    padding: 10px;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 10px;
}

body.analyzer-page .reality-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
}

body.analyzer-page .reality-value {
    font-size: var(--result-number-sm);
}

body.analyzer-page .reality-label {
    font-size: var(--result-label-size);
    line-height: 1.2;
}

body.analyzer-page .result-insights-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--result-row-gap);
    align-items: stretch;
}

body.analyzer-page .achievement-summary-card,
body.analyzer-page .playstyle-card {
    height: 100%;
    min-height: clamp(420px, 34vw, 500px);
    padding: var(--result-insight-card-padding);
}

body.analyzer-page .achievement-summary-content {
    gap: clamp(14px, 2.2vw, 24px);
}

body.analyzer-page .achievement-summary-ring {
    width: clamp(136px, 16vw, 180px);
}

body.analyzer-page .achievement-summary-rate {
    font-size: var(--result-number-lg);
}

body.analyzer-page .achievement-summary-icon {
    width: 42px;
    height: 42px;
    font-size: 21px;
}

body.analyzer-page .playstyle-card .playstyle-radar {
    min-height: clamp(168px, 18vw, 198px);
}

body.analyzer-page .playstyle-card .playstyle-radar svg {
    width: min(100%, 190px);
    max-width: 190px;
}

body.analyzer-page .playstyle-card .playstyle-metric-icon {
    width: 36px;
    min-width: 36px;
    font-size: 18px;
}

body.analyzer-page .playstyle-card .playstyle-metric-value {
    font-size: var(--result-number-sm);
}

body.analyzer-page .games-panel,
body.analyzer-page .site-footer {
    padding: var(--result-card-padding);
}

body.analyzer-page .game-row {
    gap: 12px;
}

body.analyzer-page .game-rank,
body.analyzer-page .game-rank-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
}

body.analyzer-page .game-main {
    padding: 11px 13px;
}

body.analyzer-page .game-name {
    font-size: 13px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.analyzer-page .game-hours {
    min-width: 56px;
    font-size: 13px;
}

body.analyzer-page .share-button-share,
body.analyzer-page .share-button-twitter,
body.analyzer-page .share-button-download,
body.analyzer-page .share-button-copy,
body.analyzer-page .games-toggle-button,
body.analyzer-page .private-profile-back-button,
body.analyzer-page .reality-button {
    min-height: 36px;
    padding: 0 13px;
    border-radius: 10px;
    font-size: 12px;
    letter-spacing: 0.02em;
    box-shadow:
        0 8px 18px rgba(30, 60, 180, 0.18),
        0 0 12px rgba(93, 162, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body.analyzer-page .site-footer {
    grid-template-columns: minmax(220px, 1fr) minmax(120px, 0.55fr) minmax(140px, 0.55fr) minmax(240px, 0.9fr);
    gap: var(--result-row-gap);
}

body.analyzer-page .site-footer-brand {
    font-size: 16px;
}

body.analyzer-page .site-footer p,
body.analyzer-page .site-footer-links a {
    font-size: 13px;
}

@media (max-width: 1024px) {
    body.analyzer-page .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.analyzer-page .verdict-wrapper {
        grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.85fr);
        gap: 16px;
    }

    body.analyzer-page .verdict-card {
        min-height: clamp(590px, 68vw, 720px);
    }

    body.analyzer-page .site-footer {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    body.analyzer-page .verdict-wrapper,
    body.analyzer-page .result-insights-row {
        grid-template-columns: minmax(0, 1fr);
    }

    body.analyzer-page .verdict-card,
    body.analyzer-page .reality-card {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    body.analyzer-page {
        --result-section-gap: 14px;
        --result-card-padding: 16px;
        --result-insight-card-padding: 18px;
        --result-row-gap: 12px;
    }

    body.analyzer-page .info-panel.player-panel {
        min-height: 104px;
    }

    body.analyzer-page .player-avatar-wrap,
    body.analyzer-page .player-avatar-wrap-bottom {
        width: 64px;
        height: 64px;
        min-width: 64px;
        flex: 0 0 64px;
        overflow: hidden;
    }

    body.analyzer-page .player-avatar {
        width: 100%;
        height: 100%;
        min-width: 0;
        max-width: none;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    body.analyzer-page .player-name,
    body.analyzer-page .player-name-bottom {
        font-size: 20px;
    }

    body.analyzer-page .stats-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        min-height: 390px;
    }

    body.analyzer-page .stat-card {
        min-height: 64px;
        padding: 8px 10px;
        gap: 8px;
        border-radius: 12px;
    }

    body.analyzer-page .stat-icon-wrap {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    body.analyzer-page .stat-icon {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }

    body.analyzer-page .stat-title {
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.analyzer-page .stat-value,
    body.analyzer-page .stat-card-achievements .stat-value {
        font-size: clamp(14px, 4vw, 17px);
        -webkit-line-clamp: 1;
    }

    body.analyzer-page .stat-card-rank .stat-value {
        font-size: clamp(13px, 3.7vw, 16px);
        line-height: 1.12;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        word-break: normal;
        overflow-wrap: normal;
        -webkit-line-clamp: unset;
    }

    body.analyzer-page .verdict-content {
        padding: 16px;
    }

    body.analyzer-page .player-left-bottom {
        padding: 12px;
    }

    body.analyzer-page .verdict-header,
    body.analyzer-page .games-panel h3,
    body.analyzer-page .achievement-summary-header h3,
    body.analyzer-page .playstyle-header h3 {
        font-size: 17px;
    }

    body.analyzer-page .reality-header-text1,
    body.analyzer-page .reality-header-text2,
    body.analyzer-page .reality-header-text3,
    body.analyzer-page .reality-header-text4 {
        font-size: 28px;
    }

    body.analyzer-page .achievement-summary-card,
    body.analyzer-page .playstyle-card {
        min-height: auto;
    }

    body.analyzer-page .achievement-summary-ring {
        width: 136px;
    }

    body.analyzer-page .playstyle-card .playstyle-radar {
        min-height: 210px;
    }

    body.analyzer-page .game-rank,
    body.analyzer-page .game-rank-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    body.analyzer-page .site-footer {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

/* Internal content normalization: typography, icons, bars and rhythm inside cards. */
body.analyzer-page {
    --result-inner-gap-xs: 4px;
    --result-inner-gap-sm: 8px;
    --result-inner-gap-md: 12px;
    --result-inner-gap-lg: 16px;
    --result-pill-radius: 12px;
    --result-progress-height: 7px;
    --result-description-size: clamp(11px, 1vw, 13px);
}

body.analyzer-page .stat-text,
body.analyzer-page .player-meta,
body.analyzer-page .reality-content,
body.analyzer-page .achievement-summary-copy,
body.analyzer-page .playstyle-metric-body {
    min-width: 0;
}

body.analyzer-page .player-left,
body.analyzer-page .player-left-bottom,
body.analyzer-page .share-block,
body.analyzer-page .game-topline,
body.analyzer-page .achievement-summary-line,
body.analyzer-page .playstyle-metric,
body.analyzer-page .playstyle-genres-row {
    align-items: center;
}

body.analyzer-page .player-meta {
    gap: var(--result-inner-gap-xs);
}

body.analyzer-page .verdict-steam-id,
body.analyzer-page .player-kicker,
body.analyzer-page .verdict-time-title,
body.analyzer-page .verdict-money-title,
body.analyzer-page .verdict-rank-label,
body.analyzer-page .verdict-top-games-title,
body.analyzer-page .verdict-achievements-title,
body.analyzer-page .share-label,
body.analyzer-page .reality-label,
body.analyzer-page .achievement-summary-ring-label,
body.analyzer-page .achievement-summary-copy span,
body.analyzer-page .playstyle-metric-title,
body.analyzer-page .playstyle-axis,
body.analyzer-page .playstyle-genres-title,
body.analyzer-page .site-footer h2 {
    font-size: var(--result-label-size);
    line-height: 1.2;
    letter-spacing: 0.035em;
}

body.analyzer-page .verdict-rank-description,
body.analyzer-page .verdict-days,
body.analyzer-page .verdict-years,
body.analyzer-page .verdict-achievements-list div,
body.analyzer-page .verdict-achievements-fallback,
body.analyzer-page .reality-funny-text,
body.analyzer-page .playstyle-metric-description,
body.analyzer-page .playstyle-empty,
body.analyzer-page .achievement-summary-footnote,
body.analyzer-page .games-toggle-status,
body.analyzer-page .site-footer p,
body.analyzer-page .site-footer-links a,
body.analyzer-page .site-footer-copy {
    font-size: var(--result-description-size);
    line-height: 1.45;
}

body.analyzer-page .stat-card {
    justify-content: flex-start;
}

body.analyzer-page .stat-text {
    gap: var(--result-inner-gap-xs);
}

body.analyzer-page .stat-title,
body.analyzer-page .stat-value {
    max-width: 100%;
}

body.analyzer-page .stat-icon-wrap,
body.analyzer-page .reality-icon,
body.analyzer-page .achievement-summary-icon,
body.analyzer-page .achievement-summary-shield,
body.analyzer-page .playstyle-metric-icon,
body.analyzer-page .playstyle-header-icon,
body.analyzer-page .playstyle-genre-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.analyzer-page .verdict-overview,
body.analyzer-page .account-verdict-games-and-achievements,
body.analyzer-page .verdict-top-games-list,
body.analyzer-page .verdict-achievements-list,
body.analyzer-page .reality-grid,
body.analyzer-page .games-list,
body.analyzer-page .playstyle-column,
body.analyzer-page .playstyle-genres-list {
    gap: var(--result-inner-gap-sm);
}

body.analyzer-page .verdict-hours,
body.analyzer-page .verdict-money,
body.analyzer-page .account-value-loading-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
}

body.analyzer-page .hours-number,
body.analyzer-page .verdict-money,
body.analyzer-page .verdict-achievements-value,
body.analyzer-page .achievement-summary-rate {
    letter-spacing: 0;
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.30);
}

body.analyzer-page .hours-word {
    line-height: 1.1;
}

body.analyzer-page .verdict-time,
body.analyzer-page .account-value,
body.analyzer-page .verdict-achievements {
    display: grid;
    align-content: center;
    gap: var(--result-inner-gap-sm);
}

body.analyzer-page .verdict-top-games {
    display: grid;
    align-content: start;
    gap: var(--result-inner-gap-sm);
}

body.analyzer-page .account-value-verdict-rank {
    align-content: center;
}

body.analyzer-page .verdict-achievements-value {
    margin: 4px 0 0;
}

body.analyzer-page .verdict-achievements-value::after,
body.analyzer-page .playstyle-progress,
body.analyzer-page .game-progress,
body.analyzer-page .achievement-summary-progress {
    height: var(--result-progress-height);
    border-radius: 999px;
}

body.analyzer-page .verdict-achievements-value::after {
    margin-top: var(--result-inner-gap-sm);
}

body.analyzer-page .verdict-achievements-list div {
    min-height: 20px;
}

body.analyzer-page .reality-header--row {
    gap: 3px;
}

body.analyzer-page .reality-header-line {
    gap: 4px;
    margin-top: var(--result-inner-gap-md);
}

body.analyzer-page .reality-header-line::before {
    height: 2px;
}

body.analyzer-page .reality-item {
    align-items: center;
}

body.analyzer-page .reality-content {
    gap: var(--result-inner-gap-xs);
}

body.analyzer-page .reality-funny {
    min-height: 78px;
}

body.analyzer-page .reality-funny .reality-content {
    min-height: 46px;
    align-self: center;
    justify-content: center;
}

body.analyzer-page .reality-funny-text {
    max-width: 100%;
    color: #f5f7ff;
    font-size: 20px;
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

body.analyzer-page .reality-number,
body.analyzer-page .rate-dollar,
body.analyzer-page .rate-text,
body.analyzer-page .rate-input {
    font-size: var(--result-description-size);
}

body.analyzer-page .rate-box {
    min-height: 86px;
    gap: var(--result-inner-gap-sm);
}

body.analyzer-page .reality-content--money {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
    row-gap: 2px;
}

body.analyzer-page .reality-content--money .reality-label,
body.analyzer-page .reality-content--money .reality-value {
    grid-column: 1;
    min-width: 0;
}

body.analyzer-page .reality-content--money .rate-box {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
    margin-top: 0;
    min-height: 32px;
    padding: 0 8px;
    gap: 6px;
    white-space: nowrap;
}

body.analyzer-page .reality-button {
    margin-top: auto;
}

body.analyzer-page .reality-button-text {
    font-size: 13px;
    line-height: 1.15;
    letter-spacing: 0.035em;
}

body.analyzer-page .achievement-summary-header,
body.analyzer-page .playstyle-header {
    gap: var(--result-inner-gap-sm);
    margin-bottom: var(--result-inner-gap-md);
}

body.analyzer-page .achievement-summary-content,
body.analyzer-page .playstyle-layout {
    align-items: center;
}

body.analyzer-page .achievement-summary-ring {
    flex: 0 0 auto;
}

body.analyzer-page .achievement-summary-details--large {
    gap: var(--result-inner-gap-sm);
}

body.analyzer-page .achievement-summary-details--large .achievement-summary-line {
    min-height: 58px;
    padding: 10px 0;
    gap: var(--result-inner-gap-md);
}

body.analyzer-page .achievement-summary-copy {
    gap: var(--result-inner-gap-xs);
}

body.analyzer-page .achievement-summary-copy strong {
    font-size: var(--result-number-sm);
    line-height: 1.08;
}

body.analyzer-page .achievement-summary-copy em {
    font-size: var(--result-description-size);
    line-height: 1.3;
}

body.analyzer-page .playstyle-layout {
    gap: var(--result-inner-gap-md);
}

body.analyzer-page .playstyle-metric {
    min-height: 76px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--result-inner-gap-sm);
}

body.analyzer-page .playstyle-metric-title {
    margin-bottom: 2px;
}

body.analyzer-page .playstyle-progress {
    margin: 7px 0 6px;
}

body.analyzer-page .playstyle-metric-description {
    max-width: 100%;
}

body.analyzer-page .playstyle-radar {
    display: grid;
    place-items: center;
}

body.analyzer-page .playstyle-radar svg {
    filter: drop-shadow(0 0 14px rgba(var(--result-accent), 0.12));
}

body.analyzer-page .playstyle-genres-row {
    padding-top: var(--result-inner-gap-md);
    gap: var(--result-inner-gap-md);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

body.analyzer-page .playstyle-genres-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
}

body.analyzer-page .playstyle-genre-pill {
    min-height: 38px;
    padding: 9px 10px;
    gap: var(--result-inner-gap-sm);
    justify-content: space-between;
}

body.analyzer-page .playstyle-genre-pill span:not(.playstyle-genre-icon) {
    flex: 1 1 auto;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

body.analyzer-page .playstyle-genre-pill span:not(.playstyle-genre-icon),
body.analyzer-page .playstyle-genre-pill strong {
    font-size: var(--result-description-size);
    line-height: 1.15;
}

body.analyzer-page .games-panel h3 {
    margin-bottom: var(--result-inner-gap-lg);
}

body.analyzer-page .game-row {
    align-items: center;
    padding: 2px 0;
}

body.analyzer-page .game-main {
    gap: var(--result-inner-gap-sm);
}

body.analyzer-page .game-topline {
    gap: var(--result-inner-gap-md);
}

body.analyzer-page .game-hours {
    line-height: 1.2;
}

body.analyzer-page .games-toggle-wrap {
    margin-top: var(--result-inner-gap-lg);
}

body.analyzer-page .share-buttons {
    gap: var(--result-inner-gap-sm);
}

body.analyzer-page .share-button-share,
body.analyzer-page .share-button-twitter,
body.analyzer-page .share-button-download,
body.analyzer-page .share-button-copy,
body.analyzer-page .games-toggle-button,
body.analyzer-page .private-profile-back-button {
    align-items: center;
    justify-content: center;
    line-height: 1;
}

body.analyzer-page .site-footer-links {
    gap: var(--result-inner-gap-sm);
}

@media (max-width: 860px) {
    body.analyzer-page .playstyle-layout {
        gap: var(--result-inner-gap-lg);
    }

    body.analyzer-page .achievement-summary-content {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    body.analyzer-page .achievement-summary-details--large {
        width: 100%;
    }
}

@media (max-width: 640px) {
    body.analyzer-page {
        --result-inner-gap-sm: 7px;
        --result-inner-gap-md: 10px;
        --result-inner-gap-lg: 14px;
        --result-progress-height: 6px;
        --result-description-size: 12px;
    }

    body.analyzer-page .verdict-card {
        min-height: 0;
    }

    body.analyzer-page .verdict-content {
        grid-template-columns: minmax(0, 1fr) minmax(92px, 0.86fr) minmax(0, 1fr);
        grid-template-areas:
            "title title title"
            "profile profile profile"
            "hours rank value"
            "panels panels panels"
            "share share share";
        gap: 10px;
        padding: 12px;
    }

    body.analyzer-page .player-left-bottom {
        grid-template-columns: 52px minmax(0, 1fr) 62px;
        gap: 10px;
        padding: 10px;
    }

    body.analyzer-page .player-avatar-wrap-bottom {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

    body.analyzer-page .player-kicker,
    body.analyzer-page .verdict-steam-id {
        font-size: 10px;
    }

    body.analyzer-page .player-name-bottom {
        font-size: clamp(17px, 5.2vw, 22px);
    }

    body.analyzer-page .verdict-level-card {
        grid-column: auto;
        justify-self: end;
        min-width: 58px;
        margin-top: 0;
    }

    body.analyzer-page .verdict-level-badge {
        width: 58px;
    }

    body.analyzer-page .verdict-level-badge span {
        font-size: 8px;
    }

    body.analyzer-page .verdict-level-badge strong {
        font-size: 22px;
    }

    body.analyzer-page .verdict-level-xp {
        display: none;
    }

    body.analyzer-page .verdict-header {
        padding: 0 34px;
        font-size: clamp(15px, 4.7vw, 18px);
        letter-spacing: 0.08em;
    }

    body.analyzer-page .verdict-header::before,
    body.analyzer-page .verdict-header::after {
        width: 24px;
    }

    body.analyzer-page .verdict-overview {
        display: contents;
    }

    body.analyzer-page .account-verdict-games-and-achievements {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }

    body.analyzer-page .verdict-time,
    body.analyzer-page .account-value,
    body.analyzer-page .verdict-top-games,
    body.analyzer-page .verdict-achievements,
    body.analyzer-page .account-value-verdict-rank,
    body.analyzer-page .reality-item,
    body.analyzer-page .game-main,
    body.analyzer-page .achievement-summary-details--large .achievement-summary-line,
    body.analyzer-page .playstyle-metric,
    body.analyzer-page .playstyle-genre-pill {
        border-radius: 12px;
    }

    body.analyzer-page .verdict-overview,
    body.analyzer-page .account-verdict-games-and-achievements {
        gap: 10px;
    }

    body.analyzer-page .verdict-time,
    body.analyzer-page .account-value,
    body.analyzer-page .verdict-top-games,
    body.analyzer-page .verdict-achievements,
    body.analyzer-page .account-value-verdict-rank {
        padding: 10px;
    }

    body.analyzer-page .hours-number,
    body.analyzer-page .verdict-money,
    body.analyzer-page .verdict-achievements-value {
        font-size: clamp(18px, 5.9vw, 26px);
    }

    body.analyzer-page .verdict-rank {
        font-size: clamp(16px, 4.9vw, 22px);
    }

    body.analyzer-page .account-value-verdict-rank {
        gap: 6px;
        padding-inline: 8px;
    }

    body.analyzer-page .account-value-verdict-rank::before {
        content: none;
    }

    body.analyzer-page .verdict-rank-badge-image {
        width: 46px;
        height: 46px;
    }

    body.analyzer-page .verdict-days::after,
    body.analyzer-page .verdict-money-equivalent::after {
        width: 100%;
        max-width: 84px;
        height: 24px;
        margin-top: 8px;
        background-size: 8px 100%, 8px 100%, 8px 100%, 8px 100%, 8px 100%, 8px 100%, 8px 100%;
    }

    body.analyzer-page .verdict-money-equivalent::after {
        background-size: 20px 14px;
    }

    body.analyzer-page .verdict-time-title,
    body.analyzer-page .verdict-money-title,
    body.analyzer-page .verdict-rank-label,
    body.analyzer-page .verdict-top-games-title,
    body.analyzer-page .verdict-achievements-title,
    body.analyzer-page .share-label {
        font-size: 9px;
        letter-spacing: 0.04em;
    }

    body.analyzer-page .hours-word,
    body.analyzer-page .verdict-days,
    body.analyzer-page .verdict-years,
    body.analyzer-page .verdict-rank-description,
    body.analyzer-page .verdict-achievements-list div,
    body.analyzer-page .verdict-achievements-list strong {
        font-size: 10px;
    }

    body.analyzer-page .verdict-top-games,
    body.analyzer-page .verdict-achievements {
        min-height: 148px;
    }

    body.analyzer-page .verdict-game-icon-wrap {
        width: 24px;
        height: 24px;
        min-width: 24px;
        flex-basis: 24px;
    }

    body.analyzer-page .game-item1,
    body.analyzer-page .game-item2,
    body.analyzer-page .game-item3 {
        min-height: 28px;
        gap: 6px;
        font-size: 11px;
    }

    body.analyzer-page .verdict-achievements-value::after {
        height: 5px;
        margin-top: 9px;
    }

    body.analyzer-page .share-block {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    body.analyzer-page .share-buttons {
        justify-content: flex-end;
        gap: 6px;
    }

    body.analyzer-page .share-button-share,
    body.analyzer-page .share-button-twitter,
    body.analyzer-page .share-button-download,
    body.analyzer-page .share-button-copy {
        min-height: 32px;
        padding: 0 9px;
        font-size: 11px;
    }

    body.analyzer-page .reality-item {
        min-height: 54px;
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 9px;
    }

    body.analyzer-page .reality-funny {
        min-height: 72px;
    }

    body.analyzer-page .reality-funny .reality-content {
        min-height: 44px;
        justify-content: center;
    }

    body.analyzer-page .reality-funny-text {
        font-size: clamp(17px, 5vw, 20px);
        line-height: 1.12;
    }

    body.analyzer-page .reality-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    body.analyzer-page .achievement-summary-details--large .achievement-summary-line {
        min-height: 54px;
        text-align: left;
    }

    body.analyzer-page .achievement-summary-copy strong {
        font-size: clamp(17px, 5vw, 21px);
    }

    body.analyzer-page .playstyle-metric {
        min-height: 68px;
        grid-template-columns: 34px minmax(0, 1fr);
        padding: 9px 0;
    }

    body.analyzer-page .playstyle-metric-icon {
        width: 34px;
        min-width: 34px;
        font-size: 17px;
    }

    body.analyzer-page .playstyle-genre-pill {
        min-height: 36px;
    }

    body.analyzer-page .game-main {
        padding: 10px 11px;
    }

    body.analyzer-page .game-name {
        font-size: 13px;
    }

    body.analyzer-page .share-buttons {
        width: 100%;
    }

    body.analyzer-page .share-button-share,
    body.analyzer-page .share-button-twitter,
    body.analyzer-page .share-button-download,
    body.analyzer-page .share-button-copy {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }

    body.analyzer-page .reality-money {
        min-height: 64px;
        align-items: center;
    }

    body.analyzer-page .reality-content--money {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        justify-content: space-between;
        column-gap: 12px;
        row-gap: 2px;
    }

    body.analyzer-page .reality-content--money .reality-label,
    body.analyzer-page .reality-content--money .reality-value {
        grid-column: 1;
        min-width: 0;
    }

    body.analyzer-page .reality-content--money .reality-value {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.analyzer-page .reality-content--money .rate-box {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: end;
        align-self: center;
        margin-top: 0;
        min-height: 32px;
        padding: 0 8px;
        gap: 6px;
        white-space: nowrap;
    }

    body.analyzer-page .reality-content--money .rate-input {
        width: 44px;
        min-width: 44px;
        height: 24px;
        font-size: 13px;
    }
}

@media (max-width: 430px) {
    body.analyzer-page .games-panel {
        padding: 14px;
    }

    body.analyzer-page .games-list {
        gap: 10px;
    }

    body.analyzer-page .game-row {
        width: 100%;
        min-width: 0;
        align-items: stretch;
        gap: 9px;
        padding: 0;
    }

    body.analyzer-page .game-rank,
    body.analyzer-page .game-rank-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        flex: 0 0 40px;
        border-radius: 12px;
    }

    body.analyzer-page .game-main {
        min-width: 0;
        width: calc(100% - 49px);
        padding: 9px 10px;
        gap: 7px;
        border-radius: 12px;
    }

    body.analyzer-page .game-topline {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
        min-width: 0;
    }

    body.analyzer-page .game-name {
        display: -webkit-box;
        min-width: 0;
        max-width: 100%;
        font-size: 13px;
        line-height: 1.22;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body.analyzer-page .game-hours {
        min-width: 44px;
        max-width: 54px;
        font-size: 12px;
        line-height: 1.2;
        text-align: right;
        white-space: nowrap;
    }

    body.analyzer-page .game-progress {
        height: 6px;
    }

    body.analyzer-page .games-toggle-wrap {
        margin-top: 12px;
    }
}

@media (max-width: 390px) {
    body.analyzer-page .games-panel {
        padding: 13px;
    }

    body.analyzer-page .game-row {
        gap: 8px;
    }

    body.analyzer-page .game-rank,
    body.analyzer-page .game-rank-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        flex-basis: 38px;
    }

    body.analyzer-page .game-main {
        width: calc(100% - 46px);
        padding: 9px;
    }

    body.analyzer-page .game-name {
        font-size: 12px;
    }

    body.analyzer-page .game-hours {
        min-width: 40px;
        max-width: 48px;
        font-size: 11px;
    }
}

@media (max-width: 360px) {
    body.analyzer-page .games-panel {
        padding: 12px;
    }

    body.analyzer-page .game-rank,
    body.analyzer-page .game-rank-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        flex-basis: 36px;
    }

    body.analyzer-page .game-main {
        width: calc(100% - 44px);
        padding: 8px;
    }

    body.analyzer-page .game-topline {
        gap: 6px;
    }

    body.analyzer-page .game-name {
        font-size: 12px;
        line-height: 1.18;
    }

    body.analyzer-page .game-hours {
        min-width: 36px;
        max-width: 44px;
        font-size: 11px;
    }
}

/* Final CLS stabilization: keep footer position stable after deferred CSS loads. */
@media (max-width: 768px) {
    body.analyzer-page {
        --result-mobile-reserved-height: 5400px;
    }

    body.analyzer-page #result {
        min-height: var(--result-mobile-reserved-height);
    }

    body.analyzer-page .analysis-loading-screen,
    body.analyzer-page .placeholder-text {
        min-height: calc(var(--result-mobile-reserved-height) - 140px);
    }

    body.analyzer-page .site-footer {
        min-height: 230px;
        margin-top: 14px;
    }

    body.analyzer-page #result:has(.analysis-loading-screen) {
        min-height: 0;
    }

    body.analyzer-page .analysis-loading-screen {
        min-height: clamp(560px, 82svh, 760px);
    }
}

@media (max-width: 430px) {
    body.analyzer-page {
        --result-mobile-reserved-height: 5600px;
    }
}

/* Remove loading-only height reservation once real result content is rendered. */
@media (max-width: 768px) {
    body.analyzer-page #result:has(.info-panel.player-panel) {
        min-height: 0;
    }

    body.analyzer-page #result:has(.info-panel.player-panel) .games-panel,
    body.analyzer-page #result:has(.info-panel.player-panel) .result-insights-row,
    body.analyzer-page #result:has(.info-panel.player-panel) .verdict-wrapper,
    body.analyzer-page #result:has(.info-panel.player-panel) .private-profile-showcase {
        min-height: 0;
    }

    body.analyzer-page #result:has(.info-panel.player-panel) + .site-footer {
        margin-top: 24px;
    }
}