:root {
    --bg-deep: #050506;
    --bg-mid: #101012;
    --bg-soft: rgba(18, 18, 20, 0.92);
    --card-top: rgba(26, 26, 29, 0.66);
    --card-bottom: rgba(10, 10, 12, 0.48);
    --card-inner-top: rgba(30, 30, 33, 0.5);
    --card-inner-bottom: rgba(14, 14, 16, 0.34);
    --panel: rgba(12, 12, 14, 0.92);
    --panel-strong: rgba(17, 17, 19, 0.97);
    --panel-soft: rgba(22, 22, 24, 0.88);
    --stroke: rgba(255, 255, 255, 0.08);
    --stroke-strong: rgba(197, 39, 47, 0.72);
    --text: #f2f2f2;
    --muted: #a0a0a0;
    --gold: #c5272f;
    --gold-soft: #ff5b66;
    --green: #26b04a;
    --cyan: #37c96a;
    --danger: #ff6767;
    --shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
    --radius-xl: 8px;
    --radius-lg: 6px;
    --radius-md: 4px;
    --radius-sm: 3px;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    background:
        linear-gradient(180deg, rgba(5, 5, 6, 0.56), rgba(5, 5, 6, 0.8)),
        url('../background.png') center top / cover fixed no-repeat;
    position: relative;
}

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

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(197, 39, 47, 0.08), transparent 110px),
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.018) 0,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px,
            transparent 42px
        );
    opacity: 0.85;
}

body.modal-open {
    overflow: hidden;
}

a,
button,
input {
    font: inherit;
}

img {
    max-width: 100%;
    display: block;
}

button {
    cursor: pointer;
}

h1,
h2,
h3,
.heading-font {
    margin: 0;
    font-family: 'Teko', sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    line-height: 0.96;
}

h2 {
    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1;
}

p {
    margin: 0;
}

.muted {
    color: var(--muted);
}

.page-shell {
    width: min(1280px, calc(100% - 34px));
    margin: 0 auto;
    padding: 16px 0 42px;
    position: relative;
    z-index: 1;
}

.page-shell--profile {
    width: min(1180px, calc(100% - 34px));
}

.section-card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
    box-shadow: var(--shadow);
    overflow: hidden;
    backdrop-filter: blur(15px);
}

.section-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(197, 39, 47, 0), rgba(197, 39, 47, 0.95), rgba(197, 39, 47, 0));
}

.section-card--tight {
    padding: 18px 20px;
}

.section-card--spacious {
    padding: 24px;
}

.community-header {
    margin-bottom: 16px;
}

.community-header__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.community-header__label {
    color: #d44a53;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.community-header__title {
    margin-top: 6px;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.brand-banner {
    display: grid;
    gap: 4px;
}

.brand-logo {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    font-family: 'Teko', sans-serif;
    font-size: clamp(2.6rem, 5vw, 4.6rem);
    font-weight: 700;
    line-height: 0.82;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand-logo__main,
.brand-logo__suffix {
    background: linear-gradient(180deg, #f2f2f2 0%, #bfbfbf 38%, #f9f9f9 62%, #8d8d8d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.brand-logo__accent {
    background: linear-gradient(180deg, #ff8b8b 0%, #ff4c4c 36%, #c91e2d 65%, #7f1118 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 12px rgba(138, 13, 20, 0.45);
}

.brand-banner__subtitle {
    color: #b9b9b9;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.community-header__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.community-tag {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(197, 39, 47, 0.52);
    border-radius: var(--radius-sm);
    background: rgba(197, 39, 47, 0.07);
    color: #f2d4d6;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.community-tag--green {
    border-color: rgba(38, 176, 74, 0.52);
    background: rgba(38, 176, 74, 0.07);
    color: #dbffe1;
}

.eyebrow {
    margin: 0 0 8px;
    color: #df5963;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button--primary {
    background: linear-gradient(180deg, #db404a, #a61f28);
    border-color: rgba(255, 110, 120, 0.35);
    color: #fff;
}

.button--ghost {
    background: linear-gradient(180deg, rgba(42, 42, 45, 0.5), rgba(20, 20, 22, 0.32));
    border-color: rgba(255, 255, 255, 0.09);
    color: #f1f1f1;
    backdrop-filter: blur(10px);
}

.button--steam {
    background: linear-gradient(180deg, rgba(45, 45, 48, 0.54), rgba(18, 18, 20, 0.36));
    border-color: rgba(38, 176, 74, 0.42);
    color: #e7ffe9;
    backdrop-filter: blur(10px);
}

.button--table {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.9rem;
    background: linear-gradient(180deg, rgba(31, 31, 34, 0.46), rgba(16, 16, 18, 0.28));
    border-color: rgba(197, 39, 47, 0.34);
    color: #fff;
    backdrop-filter: blur(10px);
}

.button--table:hover {
    background: linear-gradient(180deg, rgba(197, 39, 47, 0.82), rgba(118, 20, 26, 0.92));
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.92fr);
    gap: 16px;
    margin-bottom: 18px;
}

.hero__copy,
.hero__accent {
    position: relative;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.hero__copy::before,
.hero__accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(197, 39, 47, 0), rgba(197, 39, 47, 0.95), rgba(197, 39, 47, 0));
}

.hero__copy {
    background:
        linear-gradient(180deg, rgba(25, 25, 28, 0.96), rgba(11, 11, 13, 0.96)),
        radial-gradient(circle at left center, rgba(197, 39, 47, 0.16), transparent 50%);
}

.hero__accent {
    display: grid;
    gap: 12px;
    background:
        linear-gradient(180deg, rgba(22, 22, 24, 0.97), rgba(10, 10, 12, 0.97));
}

.hero__description {
    margin-top: 12px;
    max-width: 60ch;
    color: #cdcdcd;
    font-size: 1.03rem;
    line-height: 1.45;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.accent-panel,
.accent-mini,
.stat-card,
.mini-stat,
.weapon-card,
.achievement-card,
.podium-stats div {
    position: relative;
    background: linear-gradient(180deg, var(--card-inner-top), var(--card-inner-bottom));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(6px);
}

.accent-panel::before,
.accent-mini::before,
.stat-card::before,
.mini-stat::before,
.weapon-card::before,
.achievement-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(197, 39, 47, 0.9), rgba(197, 39, 47, 0));
}

.accent-panel {
    padding: 16px 18px;
}

.accent-panel__label,
.stat-card__label,
.mini-stat__label,
.search-field span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.accent-panel strong,
.stat-card__value,
.accent-mini__value,
.mini-stat__value,
.metric strong {
    color: #fff;
    text-shadow: 0 0 8px rgba(197, 39, 47, 0.05);
}

.accent-panel strong {
    display: block;
    font-size: 2rem;
    font-family: 'Teko', sans-serif;
    letter-spacing: 0.05em;
}

.accent-panel p {
    margin-top: 4px;
    color: #cbcbcb;
}

.accent-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.accent-mini {
    padding: 14px;
}

.accent-mini__value {
    margin-top: 6px;
    font-size: 1.7rem;
    font-weight: 700;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.stats-overview {
    padding: 10px 12px;
}

.stats-grid--compact {
    gap: 7px;
    margin-bottom: 0;
}

.tactical-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.tactical-pill {
    position: relative;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(25, 25, 28, 0.96), rgba(11, 11, 13, 0.96));
    overflow: hidden;
}

.tactical-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #d63c46, #7f1820);
}

.tactical-pill--green::before {
    background: linear-gradient(180deg, #30bb56, #188034);
}

.tactical-pill span {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.tactical-pill strong {
    display: block;
    margin-top: 7px;
    color: #fff;
    font-size: 1.4rem;
    font-family: 'Teko', sans-serif;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tactical-pill small {
    display: block;
    margin-top: 5px;
    color: #c5c5c5;
    font-size: 0.9rem;
}

.stat-card {
    padding: 16px;
}

.stat-card--subtle {
    min-height: 94px;
    padding: 11px 13px;
    background: linear-gradient(180deg, rgba(28, 28, 31, 0.24), rgba(12, 12, 14, 0.14));
    border-color: rgba(255, 255, 255, 0.035);
    box-shadow: none;
    backdrop-filter: blur(10px);
}

.stat-card--subtle::before {
    height: 1px;
    opacity: 0.45;
    background: linear-gradient(90deg, rgba(197, 39, 47, 0.46), rgba(197, 39, 47, 0));
}

.stat-card--subtle .stat-card__label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: #9d9d9d;
}

.stat-card--subtle .stat-card__value {
    margin-top: 8px;
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    line-height: 0.95;
    text-shadow: none;
}

.stat-card--subtle .stat-card__meta {
    margin-top: 7px;
    color: #aaaaaa;
    font-size: 0.77rem;
    line-height: 1.2;
}

.stat-card__value {
    margin-top: 10px;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
}

.stat-card__meta {
    margin-top: 8px;
    color: #c4c4c4;
    font-size: 0.93rem;
}

.control-bar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    margin-bottom: 18px;
}

.control-bar__copy {
    display: grid;
    gap: 6px;
}

.section-kicker {
    margin: 0;
    color: #9f9f9f;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.control-bar__copy h2 {
    font-size: clamp(1.85rem, 2.5vw, 2.6rem);
    line-height: 0.96;
}

.control-bar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.compare-launch {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
}

.compare-launch--page {
    margin-bottom: 18px;
}

.compare-launch__copy {
    display: grid;
    gap: 6px;
}

.compare-inline {
    margin: 2px 0 18px;
}

.compare-inline__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: #d6d6d6;
    text-align: left;
}

.compare-inline__label {
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.compare-inline__chevron {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.compare-inline__chevron::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid #f2d4d6;
    border-bottom: 2px solid #f2d4d6;
    transform: translate(-50%, -60%) rotate(45deg);
    transition: transform 0.18s ease;
}

.compare-inline.is-open .compare-inline__chevron::before {
    transform: translate(-50%, -35%) rotate(-135deg);
}

.compare-inline__panel {
    margin-top: 10px;
}

.compare-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.compare-field {
    display: grid;
    gap: 6px;
}

.compare-field span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.compare-field select {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(9, 9, 10, 0.34);
    color: var(--text);
    outline: none;
    backdrop-filter: blur(10px);
}

.compare-field select:focus {
    border-color: rgba(197, 39, 47, 0.65);
    box-shadow: 0 0 0 3px rgba(197, 39, 47, 0.14);
}

.compare-form__vs {
    display: inline-grid;
    place-items: center;
    min-width: 48px;
    height: 42px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(197, 39, 47, 0.42);
    background: rgba(197, 39, 47, 0.07);
    color: #ffd4d7;
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    backdrop-filter: blur(10px);
}

.compare-form__submit {
    min-width: 180px;
}

.compare-error {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 103, 103, 0.32);
    background: rgba(255, 103, 103, 0.09);
    color: #ffd9d9;
}

.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.018);
    color: #d3d3d3;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    backdrop-filter: blur(10px);
}

.chip:hover,
.chip.is-active {
    background: rgba(197, 39, 47, 0.16);
    border-color: rgba(197, 39, 47, 0.52);
    color: #fff;
}

.search-field {
    display: grid;
    gap: 6px;
    min-width: 290px;
}

.search-field input {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(9, 9, 10, 0.34);
    color: var(--text);
    outline: none;
    backdrop-filter: blur(10px);
}

.search-field input:focus {
    border-color: rgba(197, 39, 47, 0.65);
    box-shadow: 0 0 0 3px rgba(197, 39, 47, 0.14);
}

.podium-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.98fr);
    gap: 14px;
    margin-bottom: 18px;
}

.podium-feature,
.podium-compact-card {
    position: relative;
    overflow: hidden;
    padding: 15px;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, rgba(24, 24, 27, 0.58), rgba(10, 10, 12, 0.38));
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.podium-feature::before,
.podium-compact-card::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(197, 39, 47, 0.95), rgba(197, 39, 47, 0));
}

.podium-feature {
    border-color: rgba(197, 39, 47, 0.24);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.podium-theme--gold {
    border-color: rgba(214, 176, 72, 0.38);
    background:
        linear-gradient(180deg, rgba(54, 42, 17, 0.56), rgba(18, 14, 8, 0.4)),
        linear-gradient(180deg, rgba(24, 24, 27, 0.58), rgba(10, 10, 12, 0.38));
    box-shadow: 0 16px 34px rgba(80, 58, 5, 0.24);
}

.podium-theme--silver {
    border-color: rgba(174, 180, 191, 0.34);
    background:
        linear-gradient(180deg, rgba(48, 51, 58, 0.5), rgba(17, 18, 22, 0.34)),
        linear-gradient(180deg, rgba(24, 24, 27, 0.58), rgba(10, 10, 12, 0.38));
    box-shadow: 0 14px 28px rgba(62, 68, 78, 0.2);
}

.podium-theme--bronze {
    border-color: rgba(163, 103, 69, 0.34);
    background:
        linear-gradient(180deg, rgba(62, 35, 22, 0.52), rgba(22, 13, 10, 0.34)),
        linear-gradient(180deg, rgba(24, 24, 27, 0.58), rgba(10, 10, 12, 0.38));
    box-shadow: 0 14px 28px rgba(70, 33, 19, 0.2);
}

.podium-theme--gold::before {
    background: linear-gradient(90deg, rgba(238, 205, 104, 0.95), rgba(165, 122, 28, 0.15));
}

.podium-theme--silver::before {
    background: linear-gradient(90deg, rgba(224, 230, 236, 0.92), rgba(121, 130, 145, 0.14));
}

.podium-theme--bronze::before {
    background: linear-gradient(90deg, rgba(212, 145, 102, 0.92), rgba(109, 63, 39, 0.14));
}

.podium-theme--gold .podium-ribbon {
    border-color: rgba(223, 188, 83, 0.42);
    background: rgba(218, 177, 57, 0.14);
    color: #fff0bd;
}

.podium-theme--silver .podium-ribbon {
    border-color: rgba(178, 186, 198, 0.4);
    background: rgba(182, 189, 201, 0.12);
    color: #d6dde6;
}

.podium-theme--bronze .podium-ribbon {
    border-color: rgba(177, 111, 75, 0.4);
    background: rgba(170, 102, 61, 0.12);
    color: #ffd9c6;
}

.podium-theme--gold .podium-feature__rank,
.podium-theme--gold .podium-feature__stats div,
.podium-theme--gold .podium-stats div {
    background: linear-gradient(180deg, rgba(92, 73, 24, 0.34), rgba(24, 19, 10, 0.18));
    border-color: rgba(214, 176, 72, 0.2);
}

.podium-theme--silver .podium-feature__rank,
.podium-theme--silver .podium-feature__stats div,
.podium-theme--silver .podium-stats div {
    background: linear-gradient(180deg, rgba(73, 77, 88, 0.32), rgba(20, 23, 31, 0.16));
    border-color: rgba(174, 180, 191, 0.18);
}

.podium-theme--bronze .podium-feature__rank,
.podium-theme--bronze .podium-feature__stats div,
.podium-theme--bronze .podium-stats div {
    background: linear-gradient(180deg, rgba(84, 47, 28, 0.34), rgba(22, 14, 11, 0.16));
    border-color: rgba(163, 103, 69, 0.18);
}

.podium-theme--gold .podium-feature__name,
.podium-theme--gold .podium-name {
    color: #ffe8a1;
}

.podium-theme--silver .podium-feature__name,
.podium-theme--silver .podium-name {
    color: #cfd6df;
}

.podium-theme--bronze .podium-feature__name,
.podium-theme--bronze .podium-name {
    color: #ffd2bb;
}

.podium-feature__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.podium-ribbon--champion {
    min-height: 30px;
    padding-inline: 10px;
    font-size: 0.84rem;
}

.podium-feature__server {
    color: var(--muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.podium-feature__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
}

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

.podium-feature__avatar {
    width: 68px;
    height: 68px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.podium-feature__name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Teko', sans-serif;
    font-size: 1.7rem;
    line-height: 0.95;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.podium-feature__actions {
    margin-top: 8px;
}

.podium-feature__rank {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-width: 0;
}

.podium-feature__rank img {
    width: 52px;
    flex: 0 0 auto;
}

.podium-feature__rank > div {
    min-width: 0;
}

.podium-feature__rank strong {
    display: block;
    font-size: 1rem;
    line-height: 1;
    white-space: normal;
}

.podium-feature__rank small {
    color: var(--muted);
    display: block;
    margin-top: 3px;
    white-space: normal;
}

.podium-feature__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.podium-feature__stats div {
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(30, 30, 33, 0.72), rgba(14, 14, 16, 0.64));
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.9rem;
    backdrop-filter: blur(6px);
}

.podium-feature__stats strong {
    display: block;
    margin-top: 4px;
    font-size: 1rem;
    color: #fff;
}

.podium-compact-list {
    display: grid;
    gap: 10px;
}

.podium-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 0 8px;
    border-radius: var(--radius-sm);
    background: rgba(197, 39, 47, 0.14);
    border: 1px solid rgba(197, 39, 47, 0.42);
    color: #ffd4d7;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.podium-player {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.podium-avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.podium-name {
    font-size: 1.35rem;
    font-family: 'Teko', sans-serif;
    line-height: 1;
}

.podium-meta {
    margin-top: 3px;
    color: var(--muted);
}

.podium-rank {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-width: 0;
    max-width: 100%;
}

.podium-rank img {
    width: 34px;
    flex: 0 0 auto;
}

.podium-rank > div {
    min-width: 0;
}

.podium-rank strong {
    display: block;
    line-height: 1;
    white-space: normal;
}

.podium-rank small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    white-space: normal;
}

.podium-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.podium-stats--compact {
    margin-top: 12px;
}

.podium-stats div {
    padding: 8px;
    font-size: 0.82rem;
}

.podium-stats strong {
    display: block;
    margin-top: 4px;
    font-size: 0.98rem;
    color: #fff;
}

.compare-page .page-shell {
    width: min(1240px, calc(100% - 34px));
}

.compare-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.52fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.compare-card {
    display: grid;
    gap: 16px;
}

.compare-card__slot {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    width: fit-content;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(197, 39, 47, 0.42);
    background: rgba(197, 39, 47, 0.12);
    color: #ffd4d7;
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.compare-card__identity {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
}

.compare-card__avatar {
    width: 86px;
    height: 86px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.compare-card__name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Teko', sans-serif;
    font-size: 2rem;
    line-height: 0.95;
    text-transform: uppercase;
}

.compare-card__meta {
    margin-top: 4px;
    color: var(--muted);
}

.compare-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.compare-card__rank {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
}

.compare-card__rank img {
    width: 62px;
}

.compare-card__rank strong {
    display: block;
    font-size: 1.15rem;
}

.compare-card__rank small {
    color: var(--muted);
}

.compare-card__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.compare-card__summary div {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(30, 30, 33, 0.44), rgba(14, 14, 16, 0.28));
    border: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.9rem;
    backdrop-filter: blur(12px);
}

.compare-card__summary strong {
    display: block;
    margin-top: 5px;
    font-size: 1.08rem;
    color: #fff;
}

.compare-card__weapons {
    display: grid;
    gap: 10px;
}

.compare-card__weapons-label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.compare-weapon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.compare-weapon-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #f1f1f1;
    font-size: 0.9rem;
    backdrop-filter: blur(12px);
}

.compare-weapon-chip img {
    width: 28px;
    height: 18px;
    object-fit: contain;
}

.compare-weapon-chip strong {
    color: #fff;
}

.compare-weapon-chip--empty {
    color: var(--muted);
}

.compare-summary-card {
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 14px;
}

.compare-summary-card__vs {
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(197, 39, 47, 0.42);
    background: rgba(197, 39, 47, 0.07);
    color: #ffd4d7;
    font-family: 'Teko', sans-serif;
    font-size: 2.7rem;
    line-height: 1;
    backdrop-filter: blur(14px);
}

.compare-summary-card__score {
    font-family: 'Teko', sans-serif;
    font-size: 3rem;
    line-height: 0.9;
    color: #fff;
}

.compare-summary-card__text {
    font-size: 1rem;
    color: #f0f0f0;
    line-height: 1.4;
}

.compare-summary-card__meta {
    color: var(--muted);
    font-size: 0.92rem;
}

.compare-matrix__head {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.compare-matrix__table {
    display: grid;
    gap: 10px;
}

.compare-matrix__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.compare-matrix__label {
    min-width: 150px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(12px);
}

.compare-matrix__value {
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    backdrop-filter: blur(12px);
}

.compare-matrix__value.is-winner {
    border-color: rgba(38, 176, 74, 0.4);
    background: rgba(38, 176, 74, 0.12);
    color: #dcffe3;
}

.leaderboard-panel {
    padding: 8px;
    overflow: hidden;
}

.leaderboard-panel__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 12px 14px;
}

.leaderboard-panel__title {
    display: grid;
    gap: 4px;
}

.leaderboard-panel__title h2 {
    font-size: clamp(1.55rem, 2.1vw, 2.2rem);
    line-height: 0.96;
}

.leaderboard-panel__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.table-wrap {
    overflow-x: auto;
}

.leaderboard-table,
.motd-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.leaderboard-table thead th,
.motd-table thead th {
    padding: 15px 14px;
    color: #d2d2d2;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    background: linear-gradient(180deg, rgba(42, 42, 45, 0.5), rgba(18, 18, 20, 0.28));
    border-bottom: 1px solid rgba(197, 39, 47, 0.42);
    backdrop-filter: blur(12px);
}

.leaderboard-table thead th:first-child,
.motd-table thead th:first-child {
    border-top-left-radius: var(--radius-lg);
}

.leaderboard-table thead th:last-child,
.motd-table thead th:last-child {
    border-top-right-radius: var(--radius-lg);
}

.leaderboard-table tbody tr,
.motd-table tbody tr {
    transition: background 0.18s ease;
}

.leaderboard-table tbody tr:hover,
.motd-table tbody tr:hover {
    background: rgba(197, 39, 47, 0.06);
}

.leaderboard-table td,
.motd-table td {
    padding: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.leaderboard-table tbody tr:last-child td,
.motd-table tbody tr:last-child td {
    border-bottom: 0;
}

.position-badge {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    background: rgba(197, 39, 47, 0.07);
    border: 1px solid rgba(197, 39, 47, 0.42);
    color: #fff;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.position-badge img {
    width: 34px;
    height: 34px;
}

.leaderboard-badge-stack {
    display: grid;
    justify-items: center;
    gap: 6px;
    width: fit-content;
    margin-inline: auto;
}

.position-badge--podium {
    margin-bottom: 0;
}

.leaderboard-medal-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    min-width: 92px;
    padding: 0 7px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: #d9d9d9;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.leaderboard-row--gold {
    background: linear-gradient(90deg, rgba(193, 147, 34, 0.12), transparent 55%);
}

.leaderboard-row--silver {
    background: linear-gradient(90deg, rgba(169, 176, 187, 0.12), transparent 55%);
}

.leaderboard-row--bronze {
    background: linear-gradient(90deg, rgba(156, 94, 54, 0.12), transparent 55%);
}

.leaderboard-row--gold .leaderboard-medal-label {
    border-color: rgba(214, 176, 72, 0.28);
    background: rgba(214, 176, 72, 0.08);
    color: #ffe7a8;
}

.leaderboard-row--silver .leaderboard-medal-label {
    border-color: rgba(174, 180, 191, 0.28);
    background: rgba(174, 180, 191, 0.08);
    color: #cfd6df;
}

.leaderboard-row--bronze .leaderboard-medal-label {
    border-color: rgba(163, 103, 69, 0.28);
    background: rgba(163, 103, 69, 0.08);
    color: #ffd2bb;
}

.leaderboard-row--gold .position-badge {
    background: rgba(214, 176, 72, 0.1);
    border-color: rgba(214, 176, 72, 0.36);
}

.leaderboard-row--silver .position-badge {
    background: rgba(174, 180, 191, 0.1);
    border-color: rgba(174, 180, 191, 0.34);
}

.leaderboard-row--bronze .position-badge {
    background: rgba(163, 103, 69, 0.1);
    border-color: rgba(163, 103, 69, 0.34);
}

.leaderboard-row--gold .player-trigger__name,
.leaderboard-row--gold .metric strong,
.leaderboard-row--gold .rank-pill span {
    color: #ffe4a0;
}

.leaderboard-row--silver .player-trigger__name,
.leaderboard-row--silver .metric strong,
.leaderboard-row--silver .rank-pill span {
    color: #cfd6df;
}

.leaderboard-row--bronze .player-trigger__name,
.leaderboard-row--bronze .metric strong,
.leaderboard-row--bronze .rank-pill span {
    color: #ffd1b8;
}

.leaderboard-row--gold .rank-pill {
    border-color: rgba(214, 176, 72, 0.24);
    background: rgba(214, 176, 72, 0.03);
}

.leaderboard-row--silver .rank-pill {
    border-color: rgba(174, 180, 191, 0.24);
    background: rgba(174, 180, 191, 0.03);
}

.leaderboard-row--bronze .rank-pill {
    border-color: rgba(163, 103, 69, 0.24);
    background: rgba(163, 103, 69, 0.03);
}

.player-trigger {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    text-decoration: none;
    transition: transform 0.18s ease;
}

.player-trigger:hover {
    transform: translateY(-1px);
}

.player-trigger:hover .player-trigger__name {
    color: #ffb5ba;
}

.player-trigger__avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.player-trigger__name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 700;
}

.player-trigger__meta {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.92rem;
}

.flag-inline {
    width: 21px;
    border-radius: 2px;
}

.steam-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
    padding: 0 7px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(38, 176, 74, 0.34);
    background: rgba(16, 76, 34, 0.28);
    color: #e5ffeb;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(10px);
}

.steam-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #37db67;
    box-shadow: 0 0 10px rgba(55, 219, 103, 0.72);
    animation: steamPulse 1.8s ease-in-out infinite;
}

@keyframes steamPulse {
    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.72;
    }

    50% {
        transform: scale(1.14);
        opacity: 1;
    }
}

.rank-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    backdrop-filter: blur(10px);
}

.rank-pill img {
    width: 40px;
    height: auto;
    flex: 0 0 auto;
}

.rank-pill span {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.1;
    white-space: normal;
}

[data-autofit-text] {
    width: 100%;
    min-width: 0;
}

.metric {
    display: grid;
    gap: 5px;
}

.metric strong {
    font-size: 1.15rem;
}

.metric small {
    color: var(--muted);
    font-size: 0.86rem;
}

.progress-stack {
    display: grid;
    gap: 7px;
    min-width: 180px;
}

.progress-track {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #a51f27, #ff5b66);
}

.progress-track--large {
    height: 14px;
}

.progress-stack small,
.empty-search {
    color: var(--muted);
}

.empty-search {
    padding: 20px 10px 10px;
    text-align: center;
}

.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.pagination a,
.pagination span {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.018);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(10px);
}

.pagination .is-active {
    background: linear-gradient(180deg, #d83e48, #9f1d26);
    border-color: rgba(255, 110, 120, 0.35);
}

.pagination .is-gap {
    color: var(--muted);
}

.modal-shell {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 22px;
    background: rgba(3, 3, 4, 0.88);
    backdrop-filter: blur(6px);
}

.modal-shell.is-open {
    display: flex;
}

.modal-panel {
    position: relative;
    width: min(1200px, 100%);
    height: min(88vh, 920px);
    margin: auto;
    overflow: hidden;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(197, 39, 47, 0.42);
    box-shadow: var(--shadow);
    background: rgba(10, 10, 12, 0.68);
    backdrop-filter: blur(18px);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.modal-panel iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.profile-hero {
    padding: 24px;
    margin-bottom: 18px;
}

.profile-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
}

.profile-avatar {
    width: 128px;
    height: 128px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    border: 2px solid rgba(197, 39, 47, 0.42);
}

.profile-rank-image {
    width: min(22vw, 170px);
}

.profile-chip-row,
.profile-actions,
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-chip-row {
    margin-top: 14px;
}

.profile-overview {
    margin-bottom: 18px;
}

.profile-actions {
    margin-top: 16px;
}

.pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.018);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: #efefef;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    backdrop-filter: blur(10px);
}

.pill--steam-online {
    border-color: rgba(38, 176, 74, 0.42);
    background: rgba(38, 176, 74, 0.08);
    color: #e3ffe8;
}

.pill--steam-offline {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #dddddd;
}

.pill--steam-unavailable {
    border-color: rgba(197, 39, 47, 0.26);
    background: rgba(197, 39, 47, 0.06);
    color: #f0cdcf;
}

.profile-highlight-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.mini-stat {
    padding: 16px;
}

.mini-stat__value {
    margin-top: 8px;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.rank-progress-card {
    display: grid;
    gap: 10px;
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(23, 23, 26, 0.5), rgba(12, 12, 14, 0.3));
    border: 1px solid rgba(197, 39, 47, 0.22);
    backdrop-filter: blur(14px);
}

.rank-progress-card strong {
    font-size: 1.15rem;
    color: #fff;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
    gap: 18px;
}

.subsection-title {
    margin-bottom: 14px;
}

.dense-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.dense-grid .mini-stat {
    min-height: 108px;
}

.weapon-list {
    display: grid;
    gap: 12px;
}

.weapon-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
}

.weapon-card__name {
    font-size: 1.02rem;
    font-weight: 700;
}

.weapon-card__meta,
.achievement-card__description,
.achievement-card__progress {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.92rem;
}

.achievements-panel {
    padding: 22px;
    margin-top: 18px;
}

.achievements-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.achievement-card {
    padding: 14px;
}

.achievement-card.is-locked {
    opacity: 0.56;
}

.achievement-card.is-locked .achievement-card__image {
    filter: grayscale(1);
}

.achievement-card__image {
    width: 58px;
    margin-bottom: 10px;
}

.achievement-card__name {
    font-weight: 700;
}

.chart-panel {
    margin-top: 18px;
    padding: 22px;
}

.chart-wrap {
    margin-top: 14px;
    min-height: 340px;
}

.motd-page .page-shell {
    width: min(1060px, calc(100% - 16px));
    padding: 10px 0 20px;
}

.motd-page .community-header {
    margin-bottom: 12px;
}

.motd-page .particles-layer {
    display: none;
}

.motd-page .hero {
    grid-template-columns: 1fr;
    margin-bottom: 12px;
}

.motd-page .hero__copy,
.motd-page .hero__accent,
.motd-page .section-card {
    padding: 16px;
    border-radius: var(--radius-lg);
}

.motd-page .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.motd-page .stat-card {
    padding: 12px;
}

.motd-page .stat-card__value {
    font-size: 1.65rem;
}

.motd-page .leaderboard-panel {
    padding: 6px;
}

.motd-page .podium-showcase {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    margin-bottom: 12px;
}

.motd-page .podium-compact-list {
    display: contents;
}

.motd-page .podium-feature,
.motd-page .podium-compact-card {
    padding: 10px;
}

.motd-page .podium-feature {
    order: 2;
    align-self: end;
    transform: translateY(-6px);
}

.motd-page .podium-card--second {
    order: 1;
}

.motd-page .podium-card--third {
    order: 3;
}

.motd-page .podium-feature__topline {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
}

.motd-page .podium-feature__body {
    gap: 10px;
    margin-top: 8px;
}

.motd-page .podium-feature__avatar {
    width: 48px;
    height: 48px;
}

.motd-page .podium-feature__name {
    font-size: 1.28rem;
}

.motd-page .podium-feature__rank {
    gap: 8px;
    padding: 6px 8px;
}

.motd-page .podium-feature__rank img {
    width: 34px;
}

.motd-page .podium-feature__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.motd-page .podium-feature__stats div,
.motd-page .podium-stats div {
    padding: 6px 7px;
    font-size: 0.74rem;
}

.motd-page .podium-feature__stats strong,
.motd-page .podium-stats strong {
    font-size: 0.88rem;
}

.motd-page .podium-avatar {
    width: 40px;
    height: 40px;
}

.motd-page .podium-name {
    font-size: 1.06rem;
}

.motd-page .podium-ribbon--champion {
    min-height: 28px;
    font-size: 0.72rem;
}

.motd-page .podium-feature__server {
    font-size: 0.68rem;
}

.motd-page .podium-rank {
    margin-top: 8px;
    padding: 6px 8px;
    gap: 8px;
}

.motd-page .podium-rank img {
    width: 28px;
}

.motd-page .podium-rank strong {
    font-size: 0.88rem;
}

.motd-page .podium-rank small {
    font-size: 0.76rem;
}

.motd-page .leaderboard-row--gold {
    background: linear-gradient(90deg, rgba(193, 147, 34, 0.2), rgba(193, 147, 34, 0.06) 34%, transparent 78%);
}

.motd-page .leaderboard-row--silver {
    background: linear-gradient(90deg, rgba(169, 176, 187, 0.18), rgba(169, 176, 187, 0.06) 34%, transparent 78%);
}

.motd-page .leaderboard-row--bronze {
    background: linear-gradient(90deg, rgba(156, 94, 54, 0.2), rgba(156, 94, 54, 0.06) 34%, transparent 78%);
}

.motd-page .leaderboard-row--gold:hover,
.motd-page .leaderboard-row--silver:hover,
.motd-page .leaderboard-row--bronze:hover {
    filter: brightness(1.03);
}

.motd-page .leaderboard-medal-label {
    margin-top: 6px;
}

.motd-page .leaderboard-row--gold .progress-track span,
.motd-page .leaderboard-row--bronze .progress-track span {
    background: linear-gradient(90deg, #c62a33, #ff6670);
}

.motd-page .leaderboard-row--silver .progress-track span {
    background: linear-gradient(90deg, #a0a7b2, #d7dde5);
}

.leaderboard-page .podium-showcase {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
}

.leaderboard-page .podium-compact-list {
    display: contents;
}

.leaderboard-page .podium-feature {
    padding: 11px;
    align-self: end;
    order: 2;
    transform: translateY(-8px);
}

.leaderboard-page .podium-card--second {
    order: 1;
}

.leaderboard-page .podium-card--third {
    order: 3;
}

.leaderboard-page .podium-feature__topline {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}

.leaderboard-page .podium-feature__body {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    text-align: left;
}

.leaderboard-page .podium-feature__player {
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
    gap: 10px;
}

.leaderboard-page .podium-feature__avatar {
    width: 52px;
    height: 52px;
}

.leaderboard-page .podium-feature__name {
    font-size: 1.34rem;
    justify-content: flex-start;
}

.leaderboard-page .podium-feature__actions {
    display: flex;
    justify-content: flex-start;
}

.leaderboard-page .podium-feature__rank {
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 8px;
    width: auto;
}

.leaderboard-page .podium-feature__rank img {
    width: 38px;
}

.leaderboard-page .podium-feature__rank strong {
    font-size: 0.88rem;
}

.leaderboard-page .podium-feature__rank small {
    font-size: 0.76rem;
}

.leaderboard-page .podium-feature__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.leaderboard-page .podium-feature__stats div {
    padding: 6px 7px;
    font-size: 0.76rem;
}

.leaderboard-page .podium-feature__stats strong {
    font-size: 0.9rem;
}

@media (max-width: 1120px) {
    .motd-page .podium-compact-list,
    .leaderboard-page .podium-compact-list {
        display: grid;
    }

    .motd-page .podium-feature,
    .motd-page .podium-card--second,
    .motd-page .podium-card--third,
    .leaderboard-page .podium-feature,
    .leaderboard-page .podium-card--second,
    .leaderboard-page .podium-card--third {
        order: initial;
        transform: none;
    }

    .motd-page .podium-showcase,
    .leaderboard-page .podium-showcase {
        align-items: start;
    }
}

.motd-page .leaderboard-table td,
.motd-page .leaderboard-table th,
.motd-page .motd-table td,
.motd-page .motd-table th {
    padding: 11px 9px;
}

.motd-page .player-trigger__avatar {
    width: 42px;
    height: 42px;
}

.motd-page .rank-pill img {
    width: 34px;
}

.motd-page .weapon-card {
    grid-template-columns: 84px minmax(0, 1fr);
}

.motd-page .weapon-card img {
    max-width: 84px;
}

.motd-page .dense-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.motd-page .achievements-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.motd-page h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

.motd-page .profile-hero,
.motd-page .achievements-panel,
.motd-page .chart-panel {
    margin-bottom: 12px;
}

.motd-page .profile-grid {
    grid-template-columns: 1fr;
}

/* Solid MOTD surfaces for the CS 1.6 in-game browser. */
.motd-page .section-card,
.motd-page .stat-card,
.motd-page .mini-stat,
.motd-page .weapon-card,
.motd-page .achievement-card,
.motd-page .rank-progress-card,
.motd-page .leaderboard-panel,
.motd-page .rank-pill,
.motd-page .pill,
.motd-page .steam-status,
.motd-page .podium-feature,
.motd-page .podium-compact-card,
.motd-page .podium-feature__rank,
.motd-page .podium-feature__stats div,
.motd-page .podium-stats div,
.motd-page .progress-track {
    background: #151519;
    background-image: none;
    box-shadow: none;
    backdrop-filter: none;
}

.motd-page .section-card {
    border-color: #34343a;
}

.motd-page .section-card::before,
.motd-page .podium-feature::before,
.motd-page .podium-compact-card::before {
    height: 1px;
}

.motd-page .stat-card,
.motd-page .mini-stat,
.motd-page .weapon-card,
.motd-page .achievement-card,
.motd-page .rank-progress-card,
.motd-page .rank-pill,
.motd-page .pill,
.motd-page .progress-track {
    border-color: #2f3036;
}

.motd-page .leaderboard-panel,
.motd-page .profile-hero,
.motd-page .achievements-panel,
.motd-page .chart-panel {
    background: #121216;
    border-color: #3a3a40;
}

.motd-page .stat-card,
.motd-page .mini-stat,
.motd-page .weapon-card,
.motd-page .achievement-card {
    background: #19191e;
}

.motd-page .podium-theme--gold {
    background: #2a2212;
    border-color: #8a6d2d;
}

.motd-page .podium-theme--silver {
    background: #23262d;
    border-color: #7d8591;
}

.motd-page .podium-theme--bronze {
    background: #2a1e19;
    border-color: #8a5b44;
}

.motd-page .podium-theme--gold .podium-ribbon,
.motd-page .podium-theme--gold .podium-feature__rank,
.motd-page .podium-theme--gold .podium-feature__stats div,
.motd-page .podium-theme--gold .podium-stats div {
    background: #3a3018;
    border-color: #a78433;
    color: #ffe7a6;
}

.motd-page .podium-theme--silver .podium-ribbon,
.motd-page .podium-theme--silver .podium-feature__rank,
.motd-page .podium-theme--silver .podium-feature__stats div,
.motd-page .podium-theme--silver .podium-stats div {
    background: #303540;
    border-color: #929ba9;
    color: #e1e6ee;
}

.motd-page .podium-theme--bronze .podium-ribbon,
.motd-page .podium-theme--bronze .podium-feature__rank,
.motd-page .podium-theme--bronze .podium-feature__stats div,
.motd-page .podium-theme--bronze .podium-stats div {
    background: #39261f;
    border-color: #a06a4a;
    color: #ffd6c2;
}

.motd-page .leaderboard-row--gold {
    background: #282110;
}

.motd-page .leaderboard-row--silver {
    background: #252932;
}

.motd-page .leaderboard-row--bronze {
    background: #2c1f18;
}

.motd-page .leaderboard-row--gold .leaderboard-medal-label,
.motd-page .leaderboard-row--gold .position-badge,
.motd-page .leaderboard-row--gold .rank-pill {
    background: #3b3015;
    border-color: #a78333;
}

.motd-page .leaderboard-row--silver .leaderboard-medal-label,
.motd-page .leaderboard-row--silver .position-badge,
.motd-page .leaderboard-row--silver .rank-pill {
    background: #313743;
    border-color: #929ba9;
}

.motd-page .leaderboard-row--bronze .leaderboard-medal-label,
.motd-page .leaderboard-row--bronze .position-badge,
.motd-page .leaderboard-row--bronze .rank-pill {
    background: #3a261f;
    border-color: #a06a4a;
}

.motd-page .leaderboard-row--gold .progress-track span,
.motd-page .leaderboard-row--bronze .progress-track span,
.motd-page .progress-track span {
    background: #d43742;
    background-image: none;
}

.motd-page .leaderboard-row--silver .progress-track span {
    background: #c8d0da;
    background-image: none;
}

.motd-page .steam-status {
    border-color: #1f7e38;
    background: #10331a;
}

.motd-page .pill--steam-online {
    border-color: #1f7e38;
    background: #10331a;
}

.motd-page .pill--steam-offline {
    border-color: #4a4d57;
    background: #1a1b20;
}

.motd-page .pill--steam-unavailable {
    border-color: #6f3135;
    background: #271719;
}

.motd-page .player-trigger__meta,
.motd-page .podium-meta,
.motd-page .metric small,
.motd-page .weapon-card__meta,
.motd-page .achievement-card__progress,
.motd-page .achievement-card__description {
    color: #b8b8c0;
}

.motd-page .motd-table tbody tr {
    border-bottom-color: #2f3036;
}

.is-hidden {
    display: none !important;
}

@media (max-width: 1120px) {
    .hero,
    .podium-showcase,
    .compare-board,
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid,
    .tactical-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .podium-grid,
    .achievements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-highlight-grid,
    .dense-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .page-shell,
    .page-shell--profile {
        width: min(100%, calc(100% - 18px));
        padding-top: 10px;
    }

    .community-header__main,
    .control-bar,
    .profile-identity,
    .achievements-head,
    .podium-feature__body {
        flex-direction: column;
        align-items: stretch;
    }

    .community-header__nav {
        justify-content: flex-start;
    }

    .brand-banner {
        justify-items: center;
        text-align: center;
    }

    .hero__copy,
    .hero__accent,
    .profile-hero,
    .achievements-panel,
    .chart-panel,
    .section-card--spacious {
        padding: 18px;
    }

    .stats-grid,
    .tactical-strip,
    .profile-highlight-grid,
    .dense-grid,
    .podium-grid,
    .achievements-grid,
    .motd-page .stats-grid,
    .motd-page .dense-grid,
    .motd-page .achievements-grid {
        grid-template-columns: 1fr;
    }

    .control-bar {
        align-items: stretch;
    }

    .leaderboard-panel__head {
        align-items: stretch;
        flex-direction: column;
    }

    .leaderboard-panel__controls {
        justify-content: flex-start;
    }

    .compare-form,
    .compare-matrix__row {
        grid-template-columns: 1fr;
    }

    .compare-form__vs,
    .compare-matrix__label {
        justify-self: stretch;
        min-width: 0;
    }

    .compare-launch__drawer-panel {
        padding: 0 16px 16px;
    }

    .podium-feature__stats,
    .compare-card__summary {
        grid-template-columns: 1fr 1fr;
    }

    .control-bar__filters {
        justify-content: flex-start;
    }

    .search-field {
        min-width: 0;
        width: 100%;
    }

    .profile-identity {
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .profile-avatar,
    .profile-rank-image {
        margin-inline: auto;
    }

    .profile-chip-row,
    .profile-actions,
    .hero__actions,
    .compare-card__actions {
        justify-content: center;
    }

    .leaderboard-table thead,
    .motd-table thead {
        display: none;
    }

    .leaderboard-table tbody,
    .motd-table tbody {
        display: grid;
        gap: 12px;
    }

    .leaderboard-table tbody tr,
    .motd-table tbody tr {
        display: grid;
        gap: 10px;
        padding: 14px;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(18, 18, 20, 0.95);
    }

    .leaderboard-table td,
    .motd-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0;
        border-bottom: 0;
        text-align: right;
    }

    .leaderboard-table td::before,
    .motd-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        text-align: left;
    }

    .leaderboard-table td[data-label='Player'],
    .leaderboard-table td[data-label='Progress'],
    .motd-table td[data-label='Player'],
    .motd-table td[data-label='Progress'] {
        display: block;
    }

    .leaderboard-table td[data-label='Player']::before,
    .leaderboard-table td[data-label='Progress']::before,
    .motd-table td[data-label='Player']::before,
    .motd-table td[data-label='Progress']::before {
        display: block;
        margin-bottom: 6px;
    }

    .leaderboard-table td[data-label='Action']::before,
    .motd-table td[data-label='Action']::before {
        content: '';
    }

    .weapon-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .weapon-card img {
        margin: 0 auto;
        max-width: 160px;
    }

    .modal-shell {
        padding: 10px;
    }

    .modal-panel {
        height: 92vh;
    }
}

@media (max-width: 560px) {
    body {
        background-attachment: scroll;
    }

    .button,
    .button--table {
        width: 100%;
    }

    .accent-grid,
    .podium-stats,
    .podium-feature__stats,
    .compare-card__summary {
        grid-template-columns: 1fr;
    }

    .motd-page .podium-compact-list {
        grid-template-columns: 1fr;
    }

    .player-trigger {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .player-trigger__avatar {
        margin: 0 auto;
    }
}