:root {
    --font-site: "Space Grotesk", sans-serif;
    --bg: #000000;
    --bg-soft: #050505;
    --panel: #050505;
    --panel-strong: #0a0a0a;
    --panel-lift: #111111;
    --line: rgba(211, 181, 138, 0.18);
    --line-strong: rgba(211, 181, 138, 0.34);
    --text: #f3e7d6;
    --muted: #bca890;
    --accent: #d3b58a;
    --accent-strong: #e7ceb0;
    --accent-soft: rgba(211, 181, 138, 0.14);
    --cream: var(--text);
    --green-bright: var(--accent-strong);
    --green-deep: var(--accent-soft);
    --red-bright: #ff7c72;
    --red-deep: rgba(166, 48, 48, 0.28);
    --shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--text);
    font-family: var(--font-site);
    line-height: 1.55;
    background: var(--bg);
    min-height: 100vh;
}

a {
    color: var(--green-bright);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

img {
    max-width: 100%;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.page-shell {
    position: relative;
    width: min(1360px, calc(100% - 32px));
    margin: 0 auto;
    padding: 24px 0 64px;
}

.site-header {
    display: flex;
    position: relative;
    z-index: 120;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: var(--panel-strong);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: visible;
}

.site-footer {
    display: flex;
    justify-content: center;
    margin-top: 28px;
    padding: 18px 0 8px;
}

.site-cookie-notice {
    margin-top: 26px;
    padding: 14px 16px;
    border: 1px solid rgba(211, 181, 138, 0.14);
    border-radius: 18px;
    background: var(--panel-lift);
}

.site-cookie-notice p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.site-footer-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
}

.site-footer-links a,
.text-link {
    color: var(--green-bright);
}

.site-footer-links a:hover,
.text-link:hover {
    color: var(--text);
}

.brand-mark,
.site-nav a,
.back-link,
.refresh-link,
.result-card,
.match-card-link {
    color: inherit;
    text-decoration: none;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-site);
}

.brand-mark-symbol {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.92;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.22));
}

.brand-mark-copy {
    display: grid;
    gap: 1px;
}

.brand-kicker {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
}

.brand-mark strong {
    font-size: 1rem;
}

.site-nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    margin-left: auto;
}

.site-nav a,
.meta-row span,
.meta-row a,
.row-metrics span,
.hero-notes span,
.result-meta span {
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-lift);
    color: var(--muted);
}

.site-nav-search {
    margin-right: auto;
    margin-left: 8px;
}

.site-nav-search,
.site-nav-new,
.site-nav-coming-soon {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.rank-summary-inline {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
}

.rank-overview-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
}

.rank-overview-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.rank-overview-row h2,
.rank-overview-row .overview-stat {
    margin: 0;
}

.rank-badge-image {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.24));
}

.rank-badge-image-inline {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
}

.site-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--accent-strong);
}

.site-nav-icon svg {
    width: 18px;
    height: 18px;
}

.site-nav-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--accent);
    color: #09210f;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(66, 182, 99, 0.22);
}

.site-nav-badge-muted {
    background: var(--accent);
    color: #24180d;
    box-shadow: 0 8px 18px rgba(211, 181, 138, 0.16);
}

.hero,
.player-hero,
.error-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 24px;
    overflow: hidden;
    padding: 38px;
    background:
        var(--panel);
    border: 1px solid var(--line);
    border-radius: 30px;
    box-shadow: var(--shadow);
}

.hero::before,
.player-hero::before,
.error-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--panel);
    pointer-events: none;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--accent);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-site);
}

h1 {
    max-width: 11ch;
    font-size: clamp(2.7rem, 7vw, 5rem);
    line-height: 0.96;
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.lede {
    max-width: 58ch;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.65;
}

.search-form {
    display: flex;
    gap: 12px;
    margin-top: 26px;
}

.home-hero {
    display: block;
    overflow: visible;
    padding: 20px 24px;
    border-radius: 18px;
    box-shadow: none;
}

.home-hero::before {
    display: none;
}

.home-hero-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    width: min(820px, 100%);
    margin: 0 auto;
    text-align: center;
}

.home-hero .eyebrow {
    margin-bottom: 0;
}

.home-hero h1 {
    max-width: none;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1;
}

.home-hero-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.45;
}

.help-link {
    display: inline-block;
    margin-top: 20px;
    color: var(--green-bright);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.help-link:hover {
    color: var(--text);
}

.guide-shell {
    padding: 34px 38px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background:
        var(--panel);
    box-shadow: var(--shadow);
}

.faq-shell {
    display: grid;
    gap: 24px;
}

.seo-copy-shell {
    margin-top: 24px;
}

.patch-feed {
    display: grid;
    gap: 18px;
}

.patch-card {
    display: grid;
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    border-radius: 24px;
    background:
        var(--panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 22px 55px rgba(0, 0, 0, 0.26);
}

.patch-card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.patch-card-copy {
    display: grid;
    gap: 10px;
}

.patch-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(231, 206, 176, 0.22);
    background: var(--panel-lift);
    color: var(--accent-strong);
    text-decoration: none;
    white-space: nowrap;
}

.patch-card-link:hover {
    border-color: rgba(231, 206, 176, 0.34);
    color: var(--text);
}

.patch-card-body {
    display: grid;
    gap: 10px;
}

.patch-card-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.patch-card-details {
    display: grid;
    gap: 10px;
}

.patch-card-summary-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent-strong);
    cursor: pointer;
    font-family: var(--font-site);
    font-size: 0.95rem;
    font-weight: 700;
    list-style: none;
}

.patch-card-summary-toggle::-webkit-details-marker {
    display: none;
}

.patch-card-summary-icon {
    display: inline-block;
    transition: transform 0.18s ease;
}

.patch-card-details[open] .patch-card-summary-icon {
    transform: rotate(180deg);
}

.patch-card-body-expanded {
    padding-top: 2px;
}

.patch-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.patch-card-summary-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-strong);
    font-family: var(--font-site);
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
}

.patch-card-summary-link:hover {
    color: var(--text);
}

.meta-shell {
    display: grid;
    gap: 26px;
}

.meta-filter-form {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: end;
}

.meta-filter-form-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
}

.meta-filter-form-builds {
    grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(180px, 0.8fr)) auto;
}

.meta-filter-form label {
    display: grid;
    gap: 8px;
}

.meta-filter-form span,
.item-stat-label {
    color: var(--muted);
    font-size: 0.88rem;
}

.meta-filter-form select,
.meta-filter-form input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    color: var(--text);
    font-size: 0.98rem;
}

.meta-filter-form select:focus,
.meta-filter-form input:focus {
    outline: none;
    border-color: rgba(231, 206, 176, 0.55);
    box-shadow: 0 0 0 3px rgba(231, 206, 176, 0.1);
}

.meta-filter-input {
    appearance: textfield;
    -moz-appearance: textfield;
}

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

.meta-filter-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 22px;
    border: 1px solid rgba(231, 206, 176, 0.35);
    border-radius: 16px;
    background: var(--accent);
    color: #120f0c;
    font-family: var(--font-site);
    font-size: 0.98rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.24);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.meta-filter-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 22px 38px rgba(0, 0, 0, 0.28);
}

.meta-filter-submit:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(231, 206, 176, 0.12), 0 18px 35px rgba(0, 0, 0, 0.24);
}

.meta-filter-note {
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 0.92rem;
}

.meta-filter-note-street-brawl {
    color: var(--accent-strong);
}

.is-hidden {
    display: none;
}

.item-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.street-brawl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 0.82fr);
    gap: 22px;
    align-items: start;
}

.street-brawl-tier-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: -8px;
}

.street-brawl-tier-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 10px 14px;
    border: 1px solid rgba(211, 181, 138, 0.16);
    border-radius: 999px;
    background: var(--panel-lift);
    color: var(--muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.street-brawl-tier-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(231, 206, 176, 0.28);
    color: var(--text);
}

.street-brawl-tier-pill-active {
    border-color: rgba(231, 206, 176, 0.36);
    background: var(--panel);
    color: var(--accent-strong);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.street-brawl-splash {
    display: grid;
    gap: 18px;
}

.street-brawl-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.street-brawl-hero-tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 210px;
    padding: 18px;
    border: 1px solid rgba(211, 181, 138, 0.14);
    border-radius: 24px;
    background:
        var(--panel);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 160ms ease, border-color 160ms ease, filter 160ms ease;
}

.street-brawl-hero-tile::before {
    content: "";
    position: absolute;
    inset: auto -14% -22% auto;
    width: 180px;
    height: 180px;
    border-radius: 42px;
    background:
        var(--panel);
    transform: rotate(16deg);
    pointer-events: none;
}

.street-brawl-hero-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        var(--panel);
    pointer-events: none;
}

.street-brawl-hero-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(231, 206, 176, 0.26);
    filter: brightness(1.03);
}

.street-brawl-hero-tile-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
}

.street-brawl-hero-tile-copy strong {
    font-family: var(--font-site);
    font-size: 1.28rem;
}

.street-brawl-hero-tile-copy span {
    color: var(--muted);
    font-size: 0.9rem;
}

.hero-directory-tile {
    text-decoration: none;
}

.hero-directory-primary-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-directory-tile-copy,
.hero-directory-tile .street-brawl-hero-tile-portrait {
    z-index: 2;
}

.hero-directory-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hero-directory-actions a {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(211, 181, 138, 0.16);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
}

.hero-directory-actions a:hover {
    border-color: rgba(231, 206, 176, 0.34);
    color: var(--accent-strong);
}

.street-brawl-hero-tile-portrait {
    position: relative;
    z-index: 1;
    width: 108px;
    height: 108px;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.3));
}

.street-brawl-hero-tile-portrait-fallback {
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid rgba(211, 181, 138, 0.16);
}

.street-brawl-item-panel,
.street-brawl-guide-panel {
    display: grid;
    gap: 18px;
}

.street-brawl-item-list,
.street-brawl-ability-guide {
    padding: 18px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    border-radius: 24px;
    background:
        var(--panel);
}

.street-brawl-item-list {
    display: grid;
    gap: 10px;
    max-height: 1120px;
    overflow: auto;
}

.street-brawl-item-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1.35fr) minmax(320px, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(211, 181, 138, 0.1);
    border-radius: 18px;
    background: var(--panel-lift);
}

.street-brawl-item-rank,
.street-brawl-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(231, 206, 176, 0.22);
    background: var(--panel-lift);
    font-family: var(--font-site);
    font-weight: 700;
}

.street-brawl-item-main,
.street-brawl-hero-card-head,
.street-brawl-step {
    display: flex;
    gap: 12px;
    align-items: center;
}

.street-brawl-item-icon,
.street-brawl-step-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(211, 181, 138, 0.16);
    object-fit: cover;
    background: var(--panel-lift);
}

.street-brawl-item-copy,
.street-brawl-step-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.street-brawl-item-copy strong,
.street-brawl-step-copy strong {
    font-size: 0.96rem;
}

.street-brawl-inline-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.street-brawl-inline-meta span {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    background: var(--panel-lift);
    color: var(--muted);
    font-size: 0.8rem;
}

.street-brawl-item-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.street-brawl-item-metrics div,
.street-brawl-step-copy span {
    display: grid;
    gap: 4px;
}

.street-brawl-item-metrics span,
.street-brawl-step-copy span {
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.street-brawl-item-metrics strong {
    font-family: var(--font-site);
    font-size: 0.95rem;
}

.street-brawl-guide-panel {
    position: sticky;
    top: 20px;
}

.street-brawl-hero-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(211, 181, 138, 0.16);
    border-radius: 28px;
    background:
        var(--panel);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.street-brawl-hero-portrait {
    width: 132px;
    height: 132px;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.34));
}

.street-brawl-hero-portrait-fallback {
    object-fit: cover;
    border-radius: 22px;
    border: 1px solid rgba(211, 181, 138, 0.18);
}

.street-brawl-steps {
    display: grid;
    gap: 10px;
}

.street-brawl-point-path {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.street-brawl-point-path span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(231, 206, 176, 0.22);
    border-radius: 999px;
    background: rgba(231, 206, 176, 0.12);
    color: var(--cream);
    font-family: var(--font-site);
    font-weight: 800;
}

.street-brawl-step {
    padding: 12px;
    border: 1px solid rgba(211, 181, 138, 0.1);
    border-radius: 18px;
    background: var(--panel-lift);
}

.skill-path-board {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.skill-path-row {
    display: grid;
    grid-template-columns: minmax(104px, 132px) minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.skill-path-ability {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.skill-path-ability img {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 1px solid rgba(211, 181, 138, 0.16);
    border-radius: 7px;
    object-fit: cover;
    background: var(--panel-lift);
}

.skill-path-ability span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-path-cells {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(12px, 1fr);
    gap: 4px;
    min-width: 0;
}

.skill-path-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 23px;
    min-width: 0;
    border: 1px solid rgba(211, 181, 138, 0.07);
    border-radius: 4px;
    background: var(--panel-lift);
    color: rgba(245, 236, 220, 0.88);
    font-family: var(--font-site);
    font-size: 0.72rem;
    font-weight: 800;
}

.skill-path-cell-active {
    border-color: rgba(104, 164, 255, 0.58);
    background: var(--panel);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.skill-path-cell-unlock {
    border-color: rgba(174, 113, 255, 0.66);
    background: var(--panel);
}

.skill-path-cell-unlock::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #d18cff;
    box-shadow: 0 0 10px rgba(209, 140, 255, 0.55);
    transform: rotate(45deg);
}

.hero-skill-path-panel {
    display: grid;
    gap: 16px;
}

.normal-build-list,
.normal-meta-list {
    padding: 0;
    border: 0;
    background: transparent;
    max-height: none;
    overflow: visible;
}

.normal-build-board-panel {
    gap: 16px;
}

.build-mode-tabs {
    gap: 10px;
}

.build-mode-tab {
    min-width: 118px;
    justify-content: center;
}

.build-mode-tab-active {
    border-color: rgba(231, 206, 176, 0.36);
    background: var(--panel);
    color: var(--accent-strong);
}

.normal-build-overview {
    display: grid;
    grid-template-columns: minmax(86px, 0.45fr) minmax(0, 1.3fr) minmax(120px, 0.7fr);
    gap: 12px;
}

.normal-build-overview div {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(211, 181, 138, 0.11);
    border-radius: 18px;
    background: var(--panel-lift);
}

.normal-build-overview span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.normal-build-overview strong {
    font-family: var(--font-site);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.normal-build-list {
    display: grid;
    gap: 14px;
}

.normal-build-card {
    border: 1px solid rgba(211, 181, 138, 0.12);
    border-radius: 22px;
    background:
        var(--panel);
    overflow: hidden;
}

.normal-build-card-featured {
    border-color: rgba(231, 206, 176, 0.24);
    background:
        var(--panel);
}

.normal-build-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    list-style: none;
}

.normal-build-summary::-webkit-details-marker {
    display: none;
}

.normal-build-summary-main {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.normal-build-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(231, 206, 176, 0.24);
    background: var(--panel-lift);
    font-family: var(--font-site);
    font-size: 1rem;
    font-weight: 700;
}

.normal-build-body {
    display: grid;
    gap: 14px;
    padding: 0 20px 20px 72px;
    min-width: 0;
}

.normal-build-title-block {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.normal-build-title-block strong {
    font-family: var(--font-site);
    font-size: 1.16rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.normal-build-id-row {
    align-items: center;
}

.normal-build-description {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.normal-build-stat-row {
    gap: 10px;
    justify-content: flex-end;
}

.normal-build-detail-row {
    gap: 10px;
}

.normal-build-group-label {
    margin: 0;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.normal-build-group {
    display: grid;
    gap: 8px;
}

.normal-build-hero-card {
    min-height: 180px;
}

.normal-meta-row {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.normal-meta-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: 2;
}

.normal-meta-row .street-brawl-item-main {
    align-items: flex-start;
}

.normal-build-subsection {
    margin-top: 18px;
}

.hero-meta-table {
    display: grid;
    gap: 12px;
}

.hero-meta-head,
.hero-meta-row {
    display: grid;
    grid-template-columns: 52px minmax(220px, 1.4fr) repeat(5, minmax(120px, 1fr));
    gap: 14px;
    align-items: center;
}

.hero-meta-head {
    padding: 0 16px 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-meta-row {
    padding: 16px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    border-radius: 22px;
    background:
        var(--panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 22px 55px rgba(0, 0, 0, 0.26);
}

.hero-meta-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(231, 206, 176, 0.2);
    background: var(--panel-lift);
    font-family: var(--font-site);
    font-weight: 700;
}

.hero-meta-name {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hero-meta-name strong,
.hero-meta-stat strong {
    font-size: 1rem;
}

.hero-meta-stat {
    display: grid;
    gap: 6px;
}

.hero-meta-stat span {
    color: var(--muted);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.item-card {
    display: grid;
    gap: 16px;
    padding: 20px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    border-radius: 24px;
    background:
        var(--panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 22px 55px rgba(0, 0, 0, 0.26);
}

.item-card-head {
    display: flex;
    gap: 14px;
    align-items: center;
}

.item-card-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    border: 1px solid rgba(211, 181, 138, 0.18);
    object-fit: cover;
    background: var(--panel-lift);
}

.item-card-tags,
.item-card-foot {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.empty-state {
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel-lift);
    color: var(--muted);
}

.item-card-tags span,
.item-card-foot span {
    padding: 8px 11px;
    border-radius: 999px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    background: var(--panel-lift);
    color: var(--muted);
}

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

.item-card-stats strong {
    display: block;
    margin-top: 6px;
    font-family: var(--font-site);
    font-size: 1.05rem;
}

.faq-block {
    display: grid;
    gap: 16px;
}

.faq-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

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

.faq-card {
    box-shadow: none;
}

.guide-steps {
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.guide-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    border-radius: 18px;
    background: var(--panel-lift);
}

.guide-step p,
.guide-note p {
    margin: 0;
    color: var(--muted);
}

.guide-step-number {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #120f0c;
    font-family: var(--font-site);
    font-weight: 700;
}

.guide-visual,
.guide-note {
    margin-top: 22px;
}

.guide-visual img,
.guide-visual-placeholder {
    display: block;
    width: 100%;
    border-radius: 24px;
    border: 1px solid rgba(211, 181, 138, 0.16);
    background: var(--panel-lift);
    box-shadow: var(--shadow);
}

.guide-visual-placeholder {
    padding: 30px;
    min-height: 320px;
}

.guide-visual-placeholder strong {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-site);
    font-size: 1.2rem;
}

.guide-visual-placeholder p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.guide-note {
    padding: 16px 18px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    border-radius: 18px;
    background: var(--panel-lift);
}

.guide-note code,
.guide-visual-placeholder code {
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--panel-lift);
    color: var(--accent-strong);
    font-family: var(--font-site);
    font-size: 0.92em;
}

.search-form input {
    flex: 1;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel);
    color: var(--text);
    font-size: 1rem;
}

.home-search-form input {
    height: 44px;
    padding: 0 16px;
}

.search-form input::placeholder {
    color: #8f7c67;
}

.search-form button,
.back-link,
.refresh-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 14px 18px;
    border: 1px solid rgba(231, 206, 176, 0.35);
    border-radius: 16px;
    background: var(--accent);
    color: #120f0c;
    font-weight: 700;
    box-shadow: none;
}

.home-search-form button {
    width: 100%;
    height: 44px;
    padding: 0 18px;
}

.refresh-link {
    background: var(--panel-lift);
    color: var(--text);
    border-color: var(--line);
    box-shadow: none;
}

.hero-notes,
.meta-row,
.row-metrics,
.result-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.hero-card,
.results-grid,
.content-grid,
.platform-strip,
.overview-grid {
    display: grid;
    gap: 18px;
}

.hero-card {
    align-content: end;
    grid-template-columns: 1fr;
}

.stat-chip,
.platform-card,
.panel,
.result-card,
.card-preview {
    background: var(--panel-strong);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.stat-chip,
.platform-card,
.panel,
.result-card {
    padding: 22px;
}

.stat-chip span,
.platform-card p,
.result-card p,
.section-heading p,
.table-row p,
.error-message {
    color: var(--muted);
}

.stat-chip strong {
    display: block;
    margin-top: 8px;
    font-size: 1.12rem;
    font-family: var(--font-site);
}

.stat-chip-featured {
    background:
        var(--panel);
    border-color: var(--line-strong);
}

.platform-strip,
.results-section,
.card-preview,
.content-grid {
    margin-top: 28px;
}

.rank-distribution-shell {
    margin-top: 28px;
}

.rank-distribution-chart {
    display: grid;
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    min-height: 340px;
    padding: 24px 18px 10px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    border-radius: 26px;
    background:
        var(--panel);
}

.rank-tier-group {
    display: grid;
    gap: 12px;
    align-items: end;
    min-width: 0;
}

.rank-tier-bars {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    height: 260px;
    padding: 0 6px;
}

.rank-bar-wrap {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    justify-items: center;
    align-items: end;
    height: 100%;
}

.rank-bar {
    position: relative;
    width: 100%;
    min-height: 18px;
    align-self: end;
    border-radius: 999px 999px 10px 10px;
    background:
        var(--panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 10px 26px rgba(0, 0, 0, 0.22);
    cursor: pointer;
}

.rank-bar-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translateX(-50%) translateY(4px);
    display: grid;
    gap: 4px;
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid rgba(231, 206, 176, 0.24);
    border-radius: 12px;
    background: rgba(10, 8, 6, 0.96);
    color: var(--text);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease, transform 140ms ease;
    z-index: 5;
}

.rank-bar-tooltip strong {
    font-family: var(--font-site);
    font-size: 0.9rem;
}

.rank-bar-tooltip span {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.rank-bar:hover .rank-bar-tooltip,
.rank-bar:focus-visible .rank-bar-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.rank-bar-wrap span {
    color: var(--muted);
    font-size: 0.8rem;
    font-family: var(--font-site);
    font-weight: 700;
}

.rank-tier-label {
    text-align: center;
    color: var(--text);
    font-family: var(--font-site);
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

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

.results-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

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

.result-card {
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.result-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    background:
        var(--panel);
}

.result-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.result-head img,
.player-avatar {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid var(--line);
}

.avatar-fallback {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: var(--panel);
    font-family: var(--font-site);
    font-weight: 700;
}

.player-hero {
    align-items: center;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.player-avatar-large {
    width: 128px;
    height: 128px;
    border-radius: 28px;
}

.status-banner {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: var(--panel);
    color: var(--text);
}

.overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 28px;
}

.overview-grid-tight {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.overview-card {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
        var(--panel);
    box-shadow: var(--shadow);
}

.overview-stat {
    margin-top: 12px;
    color: var(--muted);
    font-size: 1rem;
}

.overview-card-highlight {
    background:
        var(--panel);
}

.back-link {
    margin-bottom: 18px;
}

.card-preview {
    padding: 16px;
}

.card-preview img {
    display: block;
    width: 100%;
    border-radius: 20px;
}

.table-list {
    display: grid;
    gap: 14px;
}

.hero-stack,
.match-feed {
    display: grid;
    gap: 16px;
}

.match-card-link {
    display: block;
}

.hero-card-row,
.match-card {
    border: 1px solid rgba(211, 181, 138, 0.12);
    border-radius: 22px;
    background:
        var(--panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 22px 55px rgba(0, 0, 0, 0.26);
}

.hero-card-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 18px;
}

.hero-card-main p,
.match-hero,
.match-played,
.match-summary,
.metric-pill {
    color: var(--muted);
}

.hero-card-title,
.match-card-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(211, 181, 138, 0.2);
    background: var(--panel-lift);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(231, 206, 176, 0.06);
}

.hero-icon-match {
    width: 58px;
    height: 58px;
    border-radius: 18px;
}

.hero-icon-fallback {
    display: grid;
    place-items: center;
    font-family: var(--font-site);
    font-weight: 700;
    color: var(--text);
    background:
        var(--panel);
}

.hero-card-metrics,
.match-summary,
.match-metrics,
.match-top-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.hero-card-metrics span,
.match-summary span,
.metric-pill,
.match-result,
.match-played {
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    background: var(--panel-lift);
}

.match-card {
    padding: 20px;
    overflow: hidden;
    position: relative;
}

.match-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--panel);
    pointer-events: none;
}

.match-card-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.match-hero {
    margin: 0 0 6px;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.match-card h3 {
    font-size: 1.35rem;
    line-height: 1.05;
}

.panel-heroes,
.panel-matches {
    background:
        var(--panel);
}

.match-result {
    color: var(--text);
    font-weight: 700;
}

.match-result-win {
    color: var(--accent-strong);
    border-color: rgba(231, 206, 176, 0.34);
    background:
        var(--panel);
    box-shadow: none;
}

.match-result-loss {
    color: var(--red-bright);
    border-color: rgba(255, 124, 114, 0.5);
    background:
        var(--panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 24px rgba(255, 124, 114, 0.12);
}

.match-summary {
    margin-top: 16px;
}

.match-metrics {
    margin-top: 14px;
}

.match-history-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-lift);
    color: var(--accent-strong) !important;
    box-shadow: none;
}

.match-history-refresh svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.match-history-refresh:hover {
    border-color: var(--line-strong);
    color: var(--text) !important;
    background: var(--panel);
}

.match-history-lanes {
    margin-top: 16px;
    border-top: 1px solid rgba(211, 181, 138, 0.12);
    padding-top: 14px;
}

.match-history-team-heads,
.match-history-lane-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.match-history-team-heads {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.match-history-team-heads span:last-child {
    grid-column: 3;
    text-align: right;
}

.match-history-lane-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.match-history-lane-row {
    min-height: 48px;
}

.match-history-lane-player {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 7px;
    border: 1px solid rgba(211, 181, 138, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.018);
}

.match-history-item-slots {
    display: grid;
    grid-template-columns: repeat(6, 18px);
    gap: 3px;
    flex: 0 0 auto;
}

.match-history-item-slot {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.025);
}

.match-history-item-slot-filled {
    border-color: rgba(211, 181, 138, 0.2);
    background: var(--panel-lift);
}

.match-history-item-slot img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
}

.match-history-lane-player-right {
    justify-content: flex-end;
    text-align: right;
}

.match-history-lane-player > div {
    min-width: 0;
}

.match-history-lane-player p,
.match-history-lane-player strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.match-history-lane-player p {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 0.74rem;
}

.match-history-lane-player strong {
    color: var(--text);
    font-size: 0.86rem;
}

.match-history-hero-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
}

.match-history-lane-label {
    align-self: stretch;
    justify-self: center;
    width: 4px;
    min-height: 100%;
    padding: 0;
    border: 0;
}

.metric-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.section-heading {
    display: grid;
    gap: 10px;
}

.section-heading-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.section-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid rgba(231, 206, 176, 0.22);
    background:
        var(--panel);
    color: var(--accent-strong);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.section-badge-soft {
    color: var(--text);
    border-color: rgba(211, 181, 138, 0.16);
    background: var(--panel-lift);
    letter-spacing: 0;
    text-transform: none;
}

.hero-card-row:hover,
.match-card:hover {
    border-color: rgba(231, 206, 176, 0.24);
    transform: translateY(-2px);
    transition: transform 180ms ease, border-color 180ms ease;
}

.match-hero-shell {
    padding: 24px 28px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background:
        var(--panel);
    box-shadow: var(--shadow);
}

.match-scoreboard-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
}

.match-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.match-head-meta span {
    padding: 10px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-lift);
    color: var(--muted);
}

.match-board {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.lane-board {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.lane-board-bundled {
    padding: 20px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    border-radius: 28px;
    background: var(--panel-strong);
    box-shadow: var(--shadow);
}

.lane-board-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

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

.matchup-line {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.matchup-line-lane {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.matchup-center {
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-lift);
    color: var(--accent-strong);
    font-family: var(--font-site);
    font-size: 0.84rem;
    font-weight: 700;
}

.lane-color-streak {
    display: block;
    width: 4px;
    min-height: 100%;
    border-radius: 0;
    background: var(--line-strong);
}

.lane-color-streak-yellow {
    background: #f3dd92;
}

.lane-color-streak-green {
    background: #65d989;
}

.lane-color-streak-blue {
    background: #6fa7f2;
}

.matchup-center {
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.08em;
}

.matchup-side {
    min-width: 0;
}

.matchup-side-left .lane-player-row {
    background:
        var(--panel);
}

.matchup-side-right .lane-player-row {
    background:
        var(--panel);
}

.lane-team {
    display: grid;
    gap: 10px;
}

.lane-team-win {
    background:
        var(--panel);
    border-radius: 18px;
    padding: 8px;
}

.lane-team-loss {
    background:
        var(--panel);
    border-radius: 18px;
    padding: 8px;
}

.lane-player-row {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(211, 181, 138, 0.1);
    border-radius: 14px;
    background: var(--panel-lift);
}

.lane-player-row-inline {
    min-height: 0;
}

.lane-player-row-focus {
    border-color: rgba(231, 206, 176, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.lane-player-main {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}

.lane-score-player {
    gap: 10px;
}

.lane-player-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lane-player-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lane-player-stats span {
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    background: var(--panel-lift);
    color: var(--muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.lane-player-stats .stat-leader {
    color: #f6e3aa;
    border-color: rgba(243, 210, 122, 0.42);
    background:
        var(--panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 18px rgba(243, 210, 122, 0.12);
}

.lane-player-items {
    margin-top: 2px;
}

.lane-player-items summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    color: var(--accent-strong);
    font-size: 0.82rem;
    font-weight: 600;
    user-select: none;
}

.lane-player-items summary::-webkit-details-marker {
    display: none;
}

.lane-player-items-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(211, 181, 138, 0.18);
    background: var(--panel-lift);
    color: var(--accent-strong);
    font-size: 0.7rem;
    transition: transform 140ms ease;
}

.lane-player-items[open] .lane-player-items-arrow {
    transform: rotate(180deg);
}

.lane-player-item-grid {
    display: grid;
    grid-template-columns: repeat(12, 28px);
    gap: 6px;
    margin-top: 10px;
}

.lane-player-item-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    background: var(--panel-lift);
}

.lane-player-item-pill img {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    object-fit: cover;
}

.lane-player-item-pill-empty {
    background: rgba(255, 255, 255, 0.025);
}

.lane-player-item-pill-filled {
    border-color: rgba(211, 181, 138, 0.24);
    background: var(--panel);
}

.team-board {
    padding: 18px;
    border: 1px solid rgba(211, 181, 138, 0.12);
    border-radius: 26px;
    background: var(--panel-strong);
    box-shadow: var(--shadow);
}

.team-board-win {
    background:
        var(--panel);
}

.team-board-loss {
    background:
        var(--panel);
}

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

.score-grid,
.score-row {
    display: grid;
    grid-template-columns: minmax(260px, 2.2fr) repeat(7, minmax(64px, 0.7fr));
    gap: 10px;
    align-items: center;
}

.score-grid-header {
    padding: 0 14px 10px;
    color: var(--muted);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.score-grid-mobile-note {
    display: none;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 0.92rem;
}

.score-row {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid rgba(211, 181, 138, 0.08);
    background: var(--panel-lift);
}

.score-row-focus {
    border-color: rgba(231, 206, 176, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.score-player {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.score-hero-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
}

.score-player h3 {
    font-size: 1.05rem;
}

.score-player-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.score-player-tags .metric-pill,
.score-player-tags .match-played,
.score-player-tags .match-result {
    padding: 6px 10px;
    font-size: 0.82rem;
}

.score-stat {
    font-family: var(--font-site);
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
}

.hero-card-main h3,
.match-card h3 {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}

.match-played {
    background: var(--panel-lift);
}

.metric-pill-souls::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 16px rgba(211, 181, 138, 0.28);
}

.table-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid rgba(211, 181, 138, 0.12);
}

.table-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.error-panel {
    grid-template-columns: 1fr;
}

@media (max-width: 900px) {
    .hero,
    .player-hero,
    .platform-strip,
    .overview-grid,
    .content-grid {
        grid-template-columns: 1fr;
    }

    .meta-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .meta-filter-form-compact {
        grid-template-columns: 1fr 1fr;
    }

    .meta-filter-form-builds {
        grid-template-columns: 1fr 1fr;
    }

    .overview-grid-tight {
        grid-template-columns: 1fr;
    }

    .hero-meta-head {
        display: none;
    }

    .hero-meta-row {
        grid-template-columns: 1fr 1fr;
    }

    .hero-meta-name {
        grid-column: 1 / -1;
    }

    .rank-distribution-chart {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .street-brawl-layout {
        grid-template-columns: 1fr;
    }

    .street-brawl-guide-panel {
        position: static;
    }

    .street-brawl-hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .street-brawl-item-row {
        grid-template-columns: 42px 1fr;
    }

    .normal-meta-row {
        grid-template-columns: 42px 1fr;
    }

    .normal-build-summary {
        grid-template-columns: 1fr;
    }

    .normal-build-overview {
        grid-template-columns: 1fr;
    }

    .normal-build-body {
        padding-left: 20px;
    }

    .street-brawl-item-metrics {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .normal-meta-metrics {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    h1 {
        max-width: unset;
    }

    .match-scoreboard-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .lane-board-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .matchup-line {
        grid-template-columns: 1fr;
    }

    .matchup-line-lane,
    .matchup-center {
        justify-content: flex-start;
    }

    .lane-player-row {
        grid-template-columns: 1fr;
    }

    .score-grid-header {
        display: none;
    }

    .score-grid-mobile-note {
        display: block;
    }

    .score-row {
        grid-template-columns: 1fr 1fr;
    }

    .score-player {
        grid-column: 1 / -1;
    }

    .score-stat {
        text-align: left;
    }
}

@media (max-width: 640px) {
    .page-shell {
        width: min(100% - 20px, 1360px);
        padding-top: 16px;
    }

    .site-header,
    .hero,
    .player-hero,
    .error-panel,
    .platform-card,
    .panel,
    .result-card {
        padding: 20px;
        border-radius: 22px;
    }

    .site-header,
    .search-form,
    .status-banner,
    .hero-card-row,
    .match-card-top,
    .table-row,
    .patch-card-head {
        flex-direction: column;
    }

    .meta-filter-form,
    .item-card-stats {
        grid-template-columns: 1fr;
    }

    .meta-filter-form-compact {
        grid-template-columns: 1fr;
    }

    .meta-filter-form-builds {
        grid-template-columns: 1fr;
    }

    .hero-meta-row {
        grid-template-columns: 1fr;
    }

    .hero-meta-rank {
        width: 34px;
        height: 34px;
    }

    .rank-distribution-chart {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .street-brawl-item-list,
    .street-brawl-ability-guide {
        padding: 14px;
    }

    .street-brawl-hero-grid {
        grid-template-columns: 1fr;
    }

    .street-brawl-item-row {
        grid-template-columns: 1fr;
    }

    .normal-meta-row {
        grid-template-columns: 1fr;
    }

    .street-brawl-item-rank {
        width: 30px;
        height: 30px;
    }

    .normal-build-rank {
        width: 30px;
        height: 30px;
    }

    .normal-build-summary-main {
        align-items: flex-start;
    }

    .hero-directory-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .street-brawl-item-main,
    .street-brawl-hero-card-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .street-brawl-item-metrics {
        grid-template-columns: 1fr;
    }

    .normal-build-metrics,
    .normal-meta-metrics {
        grid-template-columns: 1fr;
    }

    .street-brawl-hero-portrait {
        width: 108px;
        height: 108px;
    }

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

    .match-hero-shell,
    .team-board,
    .lane-board-bundled {
        padding: 18px;
        border-radius: 22px;
    }

    .score-row {
        grid-template-columns: 1fr;
    }

    .lane-player-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .lane-player-stats {
        gap: 6px;
    }

.faq-grid {
        grid-template-columns: 1fr;
    }
}

/* Layout refresh overrides */

.page-shell {
    width: min(1440px, calc(100% - 32px));
}

.site-header-stacked {
    display: grid;
    gap: 10px;
    align-items: stretch;
}

.site-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.site-header-copy,
.site-header-text,
.site-header-eyebrow {
    margin: 0;
}

.site-header-copy {
    display: grid;
    gap: 1px;
    max-width: 520px;
}

.site-header-eyebrow {
    color: var(--accent);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.site-header-text {
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.25;
}

.header-search {
    position: relative;
    z-index: 130;
    display: grid;
    grid-template-columns: minmax(260px, 540px) 110px;
    gap: 10px;
    align-items: stretch;
    flex: 1 1 500px;
    max-width: 660px;
    margin-left: auto;
}

.header-search-field {
    position: relative;
    min-width: 0;
}

.home-search-form .header-search-field {
    width: 100%;
}

.header-search input {
    width: 100%;
    height: 44px;
    padding: 0 42px 0 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    color: var(--text);
    font: inherit;
    outline: none;
}

.header-search input:focus {
    border-color: rgba(231, 206, 176, 0.46);
    box-shadow: 0 0 0 3px rgba(211, 181, 138, 0.11);
}

.header-search input::placeholder {
    color: #8f7c67;
}

.player-search-spinner {
    position: absolute;
    top: 50%;
    right: 13px;
    width: 17px;
    height: 17px;
    margin-top: -8.5px;
    border: 2px solid rgba(211, 181, 138, 0.18);
    border-top-color: var(--accent-strong);
    border-radius: 50%;
    animation: player-search-spin 700ms linear infinite;
    pointer-events: none;
}

@keyframes player-search-spin {
    to {
        transform: rotate(360deg);
    }
}

.header-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(231, 206, 176, 0.35);
    border-radius: 14px;
    background: var(--accent);
    color: #120f0c;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
}

.header-search-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 10020;
    max-height: min(430px, 70vh);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(126, 244, 159, 0.18);
    border-radius: 16px;
    background: rgba(7, 17, 11, 0.97);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.48);
}

.header-search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
}

.header-search-result:hover,
.header-search-result:focus {
    border-color: rgba(126, 244, 159, 0.18);
    background: rgba(126, 244, 159, 0.08);
}

.header-search-result img,
.header-search-avatar-fallback {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(126, 244, 159, 0.18);
    background: var(--panel-lift);
    object-fit: cover;
}

.header-search-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-strong);
    font-weight: 800;
}

.header-search-result span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.header-search-result strong,
.header-search-result small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search-result small {
    color: var(--muted);
    font-size: 0.78rem;
}

.header-search-empty {
    padding: 12px;
    color: var(--muted);
    font-size: 0.9rem;
}

.site-nav-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: 0;
}

.site-nav-inline a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 9px 13px;
    border-radius: 999px;
}

.site-nav-inline .site-nav-coming-soon {
    justify-content: space-between;
}

.rank-tier-caption {
    display: grid;
    gap: 4px;
}

.rank-tier-subtitle {
    margin: 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.detail-warning-card {
    margin-top: 18px;
    border-color: rgba(255, 197, 107, 0.24);
    background: rgba(255, 197, 107, 0.07);
}

.site-brand-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.menu-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-lift);
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
}

.menu-button-icon {
    display: inline-grid;
    gap: 4px;
}

.menu-button-icon span {
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 999px;
    background: var(--accent);
}

body.menu-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .site-header-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-search {
        width: 100%;
        max-width: none;
        margin-left: 0;
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 640px) {
    .site-nav-inline {
        gap: 8px;
    }

    .site-nav-inline a {
        padding: 9px 12px;
        font-size: 0.92rem;
    }

    .header-search {
        grid-template-columns: minmax(0, 1fr) 92px;
    }

    .header-search button {
        width: 100%;
    }

    .home-hero {
        padding: 18px 14px;
        border-radius: 16px;
    }

    .home-hero-copy {
        gap: 8px;
        text-align: left;
    }

    .home-hero h1 {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .home-hero-subtitle {
        font-size: 0.98rem;
    }

    .home-search-form {
        grid-template-columns: minmax(0, 1fr) 92px;
        margin-top: 6px;
    }
}

/* Embedded side navigation */

.site-side-rail {
    position: fixed;
    top: 18px;
    left: 18px;
    bottom: 18px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 56px;
    padding: 10px 8px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--panel-strong);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.side-rail-menu.menu-button,
.side-rail-brand {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    text-decoration: none;
}

.side-rail-menu.menu-button {
    border-color: rgba(211, 181, 138, 0.26) !important;
    background: var(--panel-lift) !important;
}

.side-rail-menu.menu-button[aria-expanded="true"] {
    border-color: rgba(231, 206, 176, 0.46) !important;
    background: rgba(211, 181, 138, 0.14) !important;
}

.side-rail-menu.menu-button:hover,
.side-rail-brand:hover {
    border-color: var(--line-strong) !important;
    background: rgba(211, 181, 138, 0.1) !important;
}

.side-rail-brand {
    border: 1px solid rgba(211, 181, 138, 0.16);
    background: var(--panel-lift);
}

.side-rail-brand img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
}

.page-shell {
    width: min(1440px, calc(100% - 160px));
    margin: 0 auto;
}

.site-header-stacked {
    grid-template-columns: 1fr;
}

.site-header-top {
    justify-content: space-between;
}

.site-drawer {
    position: fixed;
    display: block !important;
    top: 18px !important;
    left: 82px !important;
    bottom: 18px !important;
    z-index: 9999;
    width: min(340px, calc(100vw - 112px)) !important;
    max-height: none !important;
    padding: 16px 14px 22px !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    background: var(--panel-strong) !important;
    box-shadow: 22px 0 54px rgba(0, 0, 0, 0.36) !important;
    color: var(--text) !important;
    transform: translateX(calc(-100% - 108px));
    transition: transform 0.22s ease, opacity 0.22s ease;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
}

.site-drawer.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.site-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9988;
    display: block !important;
    border: 0;
    background: rgba(0, 0, 0, 0.18) !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.site-drawer.is-open + .site-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.site-drawer-title {
    margin: 0;
    font-family: var(--font-site);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text) !important;
}

.site-drawer-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 2px 4px 12px;
}

.site-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    border-color: var(--line) !important;
    background: var(--panel-lift) !important;
    color: var(--accent-strong) !important;
    cursor: pointer;
    text-decoration: none;
}

.site-drawer-section {
    display: grid;
    gap: 8px;
    padding: 14px 6px;
    border-top: 1px solid var(--line);
    border-top-color: var(--line) !important;
}

.site-drawer-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent) !important;
}

.site-drawer-nav {
    display: grid;
    gap: 4px;
}

.site-drawer-nav a {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text) !important;
    border-radius: 12px !important;
    text-decoration: none;
    transition: background 0.16s ease, border-color 0.16s ease;
}

.site-drawer-nav a:hover {
    border-color: var(--line-strong) !important;
    background: rgba(211, 181, 138, 0.1) !important;
}

@media (max-width: 760px) {
    .site-side-rail {
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: auto;
        width: auto;
        height: 52px;
        flex-direction: row;
        justify-content: flex-start;
        border-radius: 18px;
    }

    .page-shell {
        width: min(100% - 20px, 1440px);
        margin: 0 auto;
        padding-top: 74px;
    }

    .site-drawer {
        top: 70px !important;
        left: 10px !important;
        bottom: 10px !important;
        width: min(340px, calc(100vw - 20px)) !important;
        transform: translateX(calc(-100% - 24px));
    }
}

/* Top app bar navigation */

.site-side-rail {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 64px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 18px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: var(--panel-strong);
}

.side-rail-menu.menu-button,
.side-rail-brand {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
}

.side-rail-brand {
    width: auto !important;
    gap: 10px;
    padding: 0 12px 0 10px !important;
    color: var(--text);
    font-family: var(--font-site);
    font-size: 0.95rem;
    font-weight: 700;
}

.side-rail-brand span {
    display: inline-block;
    white-space: nowrap;
}

.page-shell {
    width: min(1440px, calc(100% - 32px));
    margin: 0 auto;
    padding-top: 88px;
}

.site-drawer {
    top: 76px !important;
    left: 18px !important;
    bottom: 18px !important;
    width: min(340px, calc(100vw - 36px)) !important;
    transform: translateX(calc(-100% - 36px));
}

@media (max-width: 760px) {
    .site-side-rail {
        top: 0;
        left: 0;
        right: 0;
        height: 58px;
        padding: 8px 10px;
        border-radius: 0;
    }

    .side-rail-brand {
        max-width: calc(100vw - 76px);
        overflow: hidden;
    }

    .side-rail-brand span {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .page-shell {
        width: min(100% - 20px, 1440px);
        margin: 0 auto;
        padding-top: 74px;
    }

    .site-drawer {
        top: 68px !important;
        left: 10px !important;
        bottom: 10px !important;
        width: min(340px, calc(100vw - 20px)) !important;
        transform: translateX(calc(-100% - 24px));
    }
}

/* Phone layout polish */

@media (max-width: 640px) {
    body {
        background: var(--bg);
    }

    .site-side-rail {
        gap: 8px;
    }

    .side-rail-menu.menu-button,
    .side-rail-brand {
        flex: 0 0 auto;
    }

    .side-rail-brand {
        min-width: 0;
        padding-right: 10px !important;
        font-size: 0.86rem;
    }

    .page-shell {
        width: 100%;
        padding: 70px 10px 42px;
    }

    .site-header {
        margin-bottom: 10px;
        padding: 12px;
        border-radius: 16px;
    }

    .site-brand-row,
    .site-header-copy {
        display: none;
    }

    .site-header-top {
        gap: 0;
        width: 100%;
    }

    .header-search {
        width: 100%;
        flex: 0 0 auto;
        gap: 8px;
    }

    .header-search input,
    .header-search button {
        height: 42px;
        border-radius: 12px;
        font-size: 0.95rem;
    }

    .header-search input {
        padding: 0 38px 0 13px;
    }

    .header-search-popover {
        max-height: 58vh;
        border-radius: 14px;
    }

    .guide-shell {
        padding: 18px 14px;
        border-radius: 20px;
    }

    .faq-shell {
        gap: 18px;
    }

    .hero-actions {
        display: flex;
        gap: 8px;
        margin-bottom: 0;
    }

    .back-link,
    .refresh-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 9px 12px;
        border-radius: 12px;
        text-align: center;
        font-size: 0.9rem;
    }

    .eyebrow {
        margin-bottom: 8px;
        font-size: 0.68rem;
        letter-spacing: 0.14em;
    }

    h1 {
        font-size: clamp(2rem, 10.5vw, 2.6rem);
        line-height: 1.03;
    }

    h2 {
        font-size: clamp(1.35rem, 8vw, 1.8rem);
        line-height: 1.08;
    }

    .lede {
        margin-top: 12px;
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .faq-grid,
    .street-brawl-hero-grid,
    .match-feed {
        gap: 10px;
    }

    .platform-card,
    .panel,
    .result-card,
    .card-preview {
        padding: 16px;
        border-radius: 16px;
    }

    .faq-card h2 {
        font-size: 1.5rem;
    }

    .faq-card p {
        margin-top: 10px;
        line-height: 1.45;
    }

    .results-section,
    .card-preview {
        margin-top: 18px;
    }

    .section-heading {
        gap: 8px;
    }

    .section-heading p {
        margin: 0;
        font-size: 0.94rem;
        line-height: 1.5;
    }

    .player-hero {
        min-height: 0;
        gap: 16px;
        padding: 18px 16px;
        border-radius: 20px;
    }

    .player-hero .card-preview {
        justify-self: start;
        width: min(180px, 58vw);
        margin-top: 0;
        padding: 10px;
    }

    .player-hero .card-preview img {
        border-radius: 14px;
    }

    .street-brawl-hero-tile {
        min-height: 132px;
        padding: 14px;
        border-radius: 16px;
    }

    .street-brawl-hero-tile::before {
        width: 130px;
        height: 130px;
        border-radius: 30px;
    }

    .street-brawl-hero-tile-copy {
        max-width: calc(100% - 84px);
        gap: 5px;
    }

    .street-brawl-hero-tile-copy strong {
        font-size: 1.08rem;
        line-height: 1.08;
    }

    .street-brawl-hero-tile-copy span {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .street-brawl-hero-tile-portrait {
        width: 82px;
        height: 82px;
        flex: 0 0 auto;
    }

    .match-card {
        padding: 14px;
        border-radius: 16px;
    }

    .match-card-top {
        gap: 12px;
        align-items: stretch;
    }

    .match-card-title {
        width: 100%;
        gap: 10px;
        align-items: flex-start;
        min-width: 0;
    }

    .match-card-title > div {
        min-width: 0;
    }

    .match-hero,
    .match-card h3,
    .match-played,
    .match-summary span {
        overflow-wrap: anywhere;
    }

    .match-card h3 {
        font-size: 1.12rem;
        line-height: 1.12;
    }

    .match-played {
        display: inline-flex;
        width: fit-content;
        padding: 6px 9px;
        border-radius: 999px;
        font-size: 0.8rem;
    }

    .match-summary {
        margin-top: 12px;
    }

    .match-history-team-heads,
    .match-history-lane-row {
        grid-template-columns: 1fr;
    }

    .match-history-team-heads {
        grid-template-columns: 1fr 1fr;
    }

    .match-history-team-heads span:last-child {
        grid-column: auto;
    }

    .match-history-lane-label {
        width: 100%;
        height: 4px;
        min-height: 4px;
        justify-self: center;
    }

    .match-history-lane-player-right {
        justify-content: flex-start;
        text-align: left;
    }

    .match-history-lane-player-right .match-history-hero-icon {
        order: -1;
    }

    .match-history-item-slots {
        grid-template-columns: repeat(6, 17px);
    }

    .match-history-item-slot {
        width: 17px;
        height: 17px;
    }

    .lane-player-item-grid {
        grid-template-columns: repeat(6, 28px);
    }

    .hero-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .hero-icon-match {
        width: 44px;
        height: 44px;
    }

    .match-top-right {
        align-self: flex-start;
    }

    .site-cookie-notice {
        margin-top: 18px;
        padding: 12px;
        border-radius: 14px;
    }

    .site-footer {
        margin-top: 18px;
    }

    .site-footer-links {
        justify-content: center;
        gap: 10px 14px;
        font-size: 0.88rem;
    }
}

@media (max-width: 380px) {
    .side-rail-brand {
        max-width: calc(100vw - 72px);
        font-size: 0.8rem;
    }

    .guide-shell {
        padding-inline: 12px;
    }

    h1 {
        font-size: 2rem;
    }

    .street-brawl-hero-tile-copy {
        max-width: calc(100% - 70px);
    }

    .street-brawl-hero-tile-portrait {
        width: 70px;
        height: 70px;
    }
}

/* Typography and spacing rhythm */

body,
input,
button,
select,
textarea {
    font-family: var(--font-site);
}

p,
li,
dd,
td,
th,
label,
summary,
.lede,
.home-hero-subtitle,
.section-heading p,
.guide-step p,
.platform-card p,
.faq-card p,
.panel p,
.result-card p,
.match-summary,
.match-played,
.site-header-text,
.site-cookie-notice p {
    line-height: 1.55;
}

h1,
h2,
h3,
.brand-mark,
.site-drawer-title,
.side-rail-brand,
.search-form button,
.header-search button,
.back-link,
.refresh-link {
    font-family: var(--font-site);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

.page-shell > section + section,
.results-section,
.guide-shell + .guide-shell,
.results-section + .guide-shell {
    margin-top: 24px;
}

.hero,
.player-hero,
.error-panel,
.guide-shell {
    padding: 32px;
}

.home-hero {
    padding: 20px 24px;
}

.section-heading {
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
}

.section-heading p,
.lede,
.guide-step p,
.platform-card p,
.faq-card p,
.panel p {
    margin-bottom: 0;
}

.faq-grid,
.results-grid,
.content-grid,
.platform-strip,
.overview-grid,
.hero-stack,
.match-feed,
.street-brawl-hero-grid {
    gap: 18px;
}

.platform-card,
.faq-card,
.panel,
.result-card,
.match-card,
.hero-card-row,
.street-brawl-hero-tile,
.street-brawl-hero-card,
.item-card {
    padding: 20px;
}

.search-form,
.hero-notes,
.meta-row,
.row-metrics,
.result-meta {
    margin-top: 18px;
}

.home-search-form {
    position: relative;
    z-index: 10030;
    margin-top: 10px;
}

@media (max-width: 640px) {
    body {
        line-height: 1.55;
    }

    .page-shell > section + section,
    .results-section,
    .guide-shell + .guide-shell,
    .results-section + .guide-shell {
        margin-top: 18px;
    }

    .hero,
    .player-hero,
    .error-panel,
    .guide-shell {
        padding: 18px 14px;
    }

    .home-hero {
        padding: 18px 14px;
    }

    .section-heading {
        gap: 8px;
        margin-bottom: 16px;
    }

    .platform-card,
    .faq-card,
    .panel,
    .result-card,
    .match-card,
    .hero-card-row,
    .street-brawl-hero-tile,
    .street-brawl-hero-card,
    .item-card {
        padding: 16px;
    }
}

/* Home page cleanup */

.site-side-rail {
    right: 18px;
    bottom: auto;
    width: auto;
    height: 58px;
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    border-radius: 0;
    box-shadow: none;
}

.site-side-rail .header-search {
    width: min(660px, 48vw);
    max-width: none;
    margin-left: auto;
}

.page-shell {
    padding-top: 96px;
}

.home-hero,
.rank-distribution-shell,
.seo-copy-shell {
    padding: 24px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.home-hero {
    padding-top: 8px;
}

.home-hero-copy {
    width: min(840px, 100%);
}

.rank-distribution-chart {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.rank-bar {
    background: var(--rank-bar-color, var(--accent));
}

.seo-copy-shell .faq-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.seo-copy-shell .platform-card,
.seo-copy-shell .faq-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.site-footer {
    border-top: 1px solid var(--line);
}

.site-footer-links {
    gap: 14px;
}

a:not(.brand-mark):not(.side-rail-brand):not(.result-card):not(.match-card-link):not(.header-search-result):not(.hero-directory-tile),
.text-link,
.site-footer-links a {
    color: var(--green-bright);
}

a:not(.brand-mark):not(.side-rail-brand):not(.result-card):not(.match-card-link):not(.header-search-result):not(.hero-directory-tile):hover,
.text-link:hover,
.site-footer-links a:hover {
    color: var(--text);
}

@media (max-width: 900px) {
    .site-side-rail {
        left: 0;
        right: 0;
        top: 0;
        height: auto;
        min-height: 58px;
        flex-wrap: wrap;
        border-radius: 0;
    }

    .site-side-rail .header-search {
        width: 100%;
        flex: 1 1 100%;
    }

    .page-shell {
        padding-top: 128px;
    }
}

@media (max-width: 640px) {
    .site-side-rail {
        padding: 8px 10px 10px;
    }

    .side-rail-brand {
        display: inline-flex;
    }

    .site-side-rail .header-search {
        grid-template-columns: minmax(0, 1fr) 88px;
    }

    .page-shell {
        padding-top: 126px;
    }

    .home-hero,
    .rank-distribution-shell,
    .seo-copy-shell {
        padding: 18px 0;
    }
}

/* Demo-theater cleanup */

.hero::before,
.player-hero::before,
.error-panel::before,
.street-brawl-hero-tile::before,
.street-brawl-hero-tile::after,
.match-card::after {
    display: none;
    content: none;
}

.brand-mark-symbol,
.side-rail-brand img,
.street-brawl-hero-tile-portrait,
.normal-build-hero-card .street-brawl-hero-tile-portrait,
.normal-build-hero-card .street-brawl-hero-tile-portrait-fallback {
    filter: none;
}

.site-nav-new,
.meta-filter-submit,
.street-brawl-tier-pill,
.street-brawl-hero-tile,
.result-card,
.hero-card-row,
.match-card,
.lane-player-items-arrow,
.patch-card-summary-icon {
    transition: none;
}

.site-nav-new:hover,
.meta-filter-submit:hover,
.street-brawl-tier-pill:hover,
.street-brawl-hero-tile:hover,
.result-card:hover,
.hero-card-row:hover,
.match-card:hover {
    transform: none;
    filter: none;
}

.site-nav-badge,
.site-nav-badge-muted,
.hero,
.player-hero,
.error-panel,
.guide-shell,
.patch-card,
.platform-card,
.panel,
.result-card,
.card-preview,
.street-brawl-hero-tile,
.street-brawl-hero-card,
.hero-meta-row,
.item-card,
.rank-distribution-chart,
.rank-bar-tooltip,
.normal-build-card,
.normal-build-card-featured,
.match-card,
.team-board,
.score-row-focus,
.guide-visual img,
.guide-visual-placeholder {
    box-shadow: none;
}

/* Final home/header composition pass */

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

.site-side-rail {
    gap: 12px;
    padding-inline: 14px;
}

.site-side-rail .header-search {
    grid-template-columns: minmax(0, 1fr) 104px;
    flex: 0 1 520px;
    width: min(520px, 40vw);
    margin-left: auto;
}

.site-side-rail .header-search input,
.site-side-rail .header-search button {
    height: 42px;
}

.site-side-rail .search-button-icon {
    display: block;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
}

.home-hero {
    z-index: 10010;
    padding: 46px 0 34px;
}

.home-hero-copy {
    justify-items: center;
    gap: 14px;
    width: min(760px, 100%);
}

.home-hero-logo {
    display: block;
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.home-hero h1 {
    font-size: clamp(2.4rem, 5vw, 4.4rem);
}

.home-hero-subtitle {
    max-width: 56ch;
    text-align: center;
}

.home-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 14px;
    width: min(760px, 100%);
    margin: 10px auto 0;
}

.home-search-form input,
.home-search-form button {
    height: 54px;
}

.home-search-form input {
    width: 100%;
    padding-inline: 18px 48px;
    font-size: 1.05rem;
}

.rank-distribution-shell {
    padding-top: 34px;
    border-top: 1px solid var(--line);
}

.rank-distribution-shell .section-heading {
    margin-bottom: 18px;
}

.rank-distribution-shell h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.seo-copy-shell {
    padding: 42px 0;
    border-top: 1px solid var(--line);
}

.seo-copy-shell .section-heading {
    max-width: 760px;
    margin-bottom: 28px;
}

.seo-copy-shell .faq-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px 42px;
}

.seo-copy-shell .platform-card,
.seo-copy-shell .faq-card {
    padding-left: 18px;
    border-left: 1px solid var(--line);
}

.seo-copy-shell .platform-card h3,
.seo-copy-shell .faq-card h3 {
    margin-bottom: 8px;
}

a:not(.brand-mark):not(.side-rail-brand):not(.result-card):not(.match-card-link):not(.header-search-result):not(.hero-directory-tile),
.text-link,
.site-footer-links a {
    color: var(--accent-strong);
}

a:not(.brand-mark):not(.side-rail-brand):not(.result-card):not(.match-card-link):not(.header-search-result):not(.hero-directory-tile):hover,
.text-link:hover,
.site-footer-links a:hover {
    color: var(--text);
}

.back-link,
.search-form button,
.header-search button {
    color: #120f0c !important;
}

.search-button-icon {
    width: 17px;
    height: 17px;
    margin-right: 7px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.refresh-link {
    color: var(--accent-strong) !important;
    background: transparent;
}

.meta-row,
.hero-notes,
.row-metrics,
.result-meta {
    gap: 14px 18px;
}

.meta-row span,
.meta-row a,
.hero-notes span,
.row-metrics span,
.result-meta span {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
}

.meta-row a {
    color: var(--accent-strong);
}

.hero-notes span + span,
.meta-row span + span,
.meta-row a {
    padding-left: 18px;
    border-left: 1px solid var(--line);
}

.section-badge,
.match-played,
.metric-pill,
.match-summary span,
.match-result,
.hero-card-metrics span,
.item-card-tags span,
.street-brawl-item-badge,
.lane-player-badge,
.lane-player-item-pill {
    border-radius: 6px;
}

.section-badge,
.match-played,
.metric-pill,
.match-summary span,
.hero-card-metrics span,
.item-card-tags span,
.street-brawl-item-badge,
.lane-player-badge,
.lane-player-stats span,
.match-head-meta span,
.matchup-line-lane span,
.matchup-center,
.site-nav-badge,
.site-nav-badge-muted,
.street-brawl-tier-pill,
.meta-filter-submit,
.row-metrics span,
.result-meta span {
    background: transparent;
    box-shadow: none;
}

.section-badge,
.match-played,
.metric-pill,
.match-summary span,
.hero-card-metrics span,
.item-card-tags span,
.street-brawl-item-badge,
.lane-player-badge,
.lane-player-stats span,
.match-head-meta span,
.matchup-line-lane span,
.matchup-center,
.site-nav-badge,
.site-nav-badge-muted,
.street-brawl-tier-pill,
.meta-filter-submit {
    border-radius: 6px;
}

.match-summary span,
.metric-pill,
.match-played,
.hero-card-metrics span {
    padding: 6px 0;
    border-width: 0;
    color: var(--muted);
}

.match-summary span + span,
.metric-pill + .metric-pill,
.hero-card-metrics span + span {
    padding-left: 12px;
    border-left: 1px solid var(--line);
}

.match-result {
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
}

.player-hero,
.overview-card,
.panel,
.hero-card-row,
.match-card,
.platform-card,
.faq-card,
.item-card,
.normal-build-card,
.street-brawl-hero-card,
.street-brawl-item-row,
.patch-card,
.team-board,
.lane-player-row,
.score-row {
    border-radius: 10px;
}

.player-hero {
    padding: 28px 32px;
}

.overview-card,
.panel,
.hero-card-row,
.match-card,
.platform-card,
.faq-card,
.item-card,
.patch-card {
    background: transparent;
}

.hero-actions {
    align-items: center;
}

.back-link,
.refresh-link {
    border-radius: 7px;
    min-height: 44px;
    padding: 13px 18px;
}

.refresh-link {
    border-color: var(--line-strong);
    color: var(--accent-strong) !important;
    background: transparent;
}

.menu-button,
.side-rail-menu.menu-button,
.side-rail-brand,
.site-side-rail .header-search input,
.site-side-rail .header-search button,
.header-search-popover,
.header-search-result,
.home-search-form .header-search input,
.home-search-form .header-search button {
    border-radius: 7px !important;
}

.side-rail-menu.menu-button,
.side-rail-brand {
    background: rgba(13, 16, 15, 0.92) !important;
    box-shadow: none !important;
}

.side-rail-brand {
    padding-inline: 12px !important;
}

.site-side-rail .header-search input,
.home-search-form .header-search input {
    background: rgba(13, 16, 15, 0.82);
}

.site-side-rail .header-search button,
.home-search-form .header-search button {
    gap: 0;
}

@media (max-width: 900px) {
    .page-shell {
        width: min(100% - 40px, 1240px);
    }

    .site-side-rail .header-search {
        width: 100%;
        flex-basis: 100%;
    }
}

@media (max-width: 640px) {
    .page-shell {
        width: min(100% - 24px, 1240px);
    }

    .home-hero {
        padding: 32px 0 24px;
    }

    .home-hero-copy {
        text-align: center;
    }

    .home-search-form {
        grid-template-columns: 1fr;
    }

    .seo-copy-shell .faq-grid {
        gap: 24px;
    }
}

/* No-bubble UI pass */

.side-rail-menu.menu-button,
.side-rail-brand,
.side-rail-menu.menu-button[aria-expanded="true"],
.side-rail-menu.menu-button:hover,
.side-rail-brand:hover {
    width: auto !important;
    min-width: 42px;
    height: 42px !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.side-rail-menu.menu-button {
    border-right: 1px solid var(--line) !important;
    padding-right: 14px !important;
}

.side-rail-brand {
    gap: 10px;
    padding-left: 12px !important;
}

.side-rail-brand img {
    width: 20px;
    height: 20px;
}

.menu-button-icon span {
    border-radius: 0 !important;
}

.site-nav-badge,
.site-nav-badge-muted,
.section-badge,
.match-played,
.metric-pill,
.match-summary span,
.match-result,
.hero-card-metrics span,
.item-card-tags span,
.street-brawl-item-badge,
.lane-player-badge,
.lane-player-stats span,
.lane-player-items-arrow,
.match-head-meta span,
.matchup-line-lane span,
.matchup-center,
.meta-filter-submit,
.street-brawl-tier-pill,
.hero-meta-row span,
.table-filter-pill,
.rank-bar-tooltip,
.street-brawl-mode-pill,
.row-metrics span,
.result-meta span {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.site-nav-badge,
.site-nav-badge-muted,
.section-badge,
.match-played,
.metric-pill,
.match-summary span,
.match-result,
.hero-card-metrics span,
.item-card-tags span,
.street-brawl-item-badge,
.lane-player-badge,
.lane-player-stats span,
.match-head-meta span,
.matchup-line-lane span,
.matchup-center,
.meta-filter-submit,
.street-brawl-tier-pill,
.hero-meta-row span,
.table-filter-pill,
.street-brawl-mode-pill,
.row-metrics span,
.result-meta span {
    border-width: 0 !important;
    padding: 0 !important;
}

.section-badge + .section-badge,
.match-summary span + span,
.metric-pill + .metric-pill,
.hero-card-metrics span + span,
.item-card-tags span + span,
.lane-player-stats span + span,
.match-head-meta span + span,
.hero-meta-row span + span,
.row-metrics span + span,
.result-meta span + span {
    padding-left: 12px !important;
    border-left: 1px solid var(--line) !important;
}

.lane-player-item-pill,
.match-history-item-slot,
.match-history-refresh,
.player-search-spinner {
    border-radius: 5px !important;
}

.lane-color-streak,
.match-history-lane-label.lane-color-streak {
    border-radius: 0 !important;
    background: var(--line-strong) !important;
}

.lane-color-streak-yellow,
.match-history-lane-label.lane-color-streak-yellow {
    background: #f3dd92 !important;
}

.lane-color-streak-green,
.match-history-lane-label.lane-color-streak-green {
    background: #65d989 !important;
}

.lane-color-streak-blue,
.match-history-lane-label.lane-color-streak-blue {
    background: #6fa7f2 !important;
}

.player-search-spinner {
    border-radius: 50% !important;
}

.header-search input,
.header-search button,
.home-search-form .header-search input,
.home-search-form .header-search button,
.search-form input,
.search-form button,
.back-link,
.refresh-link,
.site-drawer,
.header-search-popover,
.header-search-result {
    border-radius: 6px !important;
}

/* Phone polish, scoped after the final desktop composition rules. */
@media (max-width: 640px) {
    html,
    body {
        overflow-x: clip;
    }

    .site-side-rail {
        gap: 8px;
        padding: 8px 12px 10px;
    }

    .side-rail-menu.menu-button {
        min-width: 38px;
        height: 38px !important;
        padding-right: 12px !important;
    }

    .side-rail-brand {
        min-width: 0;
        height: 38px !important;
        gap: 8px;
        padding-left: 8px !important;
        font-size: 0.88rem;
    }

    .side-rail-brand img {
        width: 18px;
        height: 18px;
        font-size: 0;
    }

    .site-side-rail .header-search {
        grid-template-columns: minmax(0, 1fr) 96px;
        gap: 8px;
        flex: 1 1 100%;
        width: 100%;
    }

    .site-side-rail .header-search input,
    .site-side-rail .header-search button {
        height: 46px;
    }

    .site-side-rail .header-search input {
        padding-inline: 14px 38px;
        font-size: 0.95rem;
    }

    .site-side-rail .search-button-icon {
        flex-basis: 20px;
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }

    .page-shell {
        padding-top: 132px;
    }

    .home-hero {
        padding: 24px 0 22px;
    }

    .home-hero-copy {
        gap: 12px;
        width: 100%;
    }

    .home-hero-logo {
        width: 48px;
        height: 48px;
        font-size: 0;
    }

    .home-hero h1 {
        max-width: 9ch;
        font-size: clamp(2.45rem, 12vw, 3.15rem);
        line-height: 0.98;
    }

    .home-hero-subtitle {
        max-width: 30ch;
        font-size: 0.98rem;
    }

    .home-search-form {
        width: 100%;
        max-width: 420px;
        gap: 10px;
        margin-top: 4px;
    }

    .home-search-form input,
    .home-search-form button {
        height: 54px;
    }

    .home-search-form input {
        padding-inline: 16px 42px;
        font-size: 1rem;
    }

    .home-search-form button {
        width: 100%;
        font-size: 0.98rem;
    }

    .rank-bar-tooltip {
        display: none;
    }

    .site-drawer {
        top: 111px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        z-index: 10040;
        width: auto !important;
        max-height: calc(100dvh - 111px) !important;
        padding: 14px 18px 22px !important;
        border-width: 1px 0 0 !important;
        border-radius: 0 !important;
        background: #050505 !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.58) !important;
        transform: translateY(-10px);
    }

    .site-drawer.is-open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .site-drawer-backdrop {
        top: 111px;
        z-index: 10020;
        background: rgba(0, 0, 0, 0.64) !important;
    }

    .site-drawer-head {
        padding: 0 0 12px;
    }

    .site-drawer-section {
        gap: 8px;
        padding: 12px 0;
    }

    .site-drawer-nav {
        gap: 7px;
    }

    .site-drawer-nav a {
        min-height: 44px;
        padding: 11px 12px !important;
        border: 1px solid rgba(211, 181, 138, 0.14) !important;
        background: rgba(13, 16, 15, 0.9) !important;
        color: var(--text) !important;
        font-size: 0.98rem;
    }
}

@media (max-width: 420px) {
    .site-side-rail {
        padding-inline: 10px;
    }

    .side-rail-brand span {
        max-width: calc(100vw - 172px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-side-rail .header-search {
        grid-template-columns: minmax(0, 1fr) 54px;
    }

    .site-side-rail .header-search button span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .site-side-rail .search-button-icon {
        margin-right: 0;
    }

    .home-hero h1 {
        font-size: clamp(2.25rem, 12.4vw, 2.9rem);
    }
}