* {
    box-sizing: border-box;
}

:root {
    color-scheme: dark;
    --background: #08121b;
    --panel: #0d1c28;
    --line: #203949;
    --text: #e6eef8;
    --muted: #99aec4;
    --accent: #70c8ff;
}

body {
    margin: 0;
    background: radial-gradient(ellipse at 60% 0, #132d40, transparent 60%), var(--background);
    color: var(--text);
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: white;
}

.site-header {
    min-height: 76px;
    padding: 0 3%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border-bottom: 1px solid var(--line);
    background: #0a1620e8;
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #f3f7ff;
    font-size: 24px;
    font-weight: 650;
    white-space: nowrap;
    line-height: 1.15;
}

.brand small {
    display: block;
    color: #87a6bd;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-top: 5px;
}

.brand-icon, .profile-mark {
    display: grid;
    place-items: center;
    width: 49px;
    height: 53px;
    background: #281817;
    border: 1px solid #65382e;
    color: #cb624e;
    font: bold 41px Georgia, serif;
    transform: skew(-5deg);
}

nav {
    display: flex;
    align-self: stretch;
    flex-wrap: wrap;
    align-items: stretch;
}

nav a {
    display: flex;
    align-items: center;
    padding: 14px 13px;
    color: #b2c8df;
    font-size: 14px;
    border-bottom: 2px solid transparent;
}

nav a[aria-current], nav a:hover {
    background: linear-gradient(#1a3040, #132431);
    border-bottom-color: #3db5fa;
    color: white;
}

button, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 22px;
    border: 1px solid #287ce5;
    border-radius: 4px;
    background: linear-gradient(110deg, #118ded, #114aac);
    color: white;
    font: 600 14px 'Segoe UI', Arial, sans-serif;
    line-height: 1.4;
    cursor: pointer;
}

button:hover, .button:hover {
    filter: brightness(1.18);
    color: white;
}

.secondary {
    background: linear-gradient(#173249b8, #0c1b27eb);
    border-color: #429dc9;
    color: #e8f3ff;
}

main {
    max-width: 1600px;
    margin: auto;
    padding: 0 28px 30px;
    min-height: 80vh;
}

.admin-account-view-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 3%;
    border-bottom: 1px solid #b98a3d;
    background: #3d2b14;
    color: #ffe7b7;
}

.admin-account-view-banner strong { margin-right: 12px; }
.admin-account-view-banner form { margin: 0; }
.admin-account-view-banner button {
    padding: 7px 14px;
    border: 1px solid #ecc070;
    border-radius: 5px;
    background: #614419;
    color: #fff4db;
    cursor: pointer;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .admin-account-view-banner { align-items: flex-start; flex-direction: column; }
}

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

h1 {
    font-size: 36px;
    line-height: 1.15;
    margin-bottom: 15px;
}

h2 {
    font-size: 20px;
    line-height: 1.25;
}

h3 {
    font-size: 16px;
}

.hero {
    position: relative;
    min-height: 235px;
    margin: 0 -28px 17px;
    padding: 31px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: #071420;
}

.hero-illustration {
    position: absolute;
    width: 850px;
    height: 340px;
    left: 25%;
    top: -24px;
    opacity: .9;
    mask-image: linear-gradient(to right, transparent, black 20%, black 70%, transparent);
}

.world-art {
    position: absolute;
    inset: 0;
    background-image: url('worlds.png');
    background-size: 200% 200%;
}

.world-aghanim .world-art {
    background-image: url('aghanim-card.png');
    background-size: cover;
    background-position: center;
}

.world-siltbreaker .world-art {
    background-image: url('siltbreaker-card.png');
    background-size: cover;
    background-position: center;
}

.world-dark_moon .world-art {
    background-image: url('dark-moon-card.png');
    background-size: cover;
    background-position: center;
}

.world-frosthaven .world-art {
    background-image: url('frosthaven-card.png');
    background-size: cover;
    background-position: center 24%;
}

.hero-copy, .hero aside {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: 27px;
    letter-spacing: 4px;
    margin-bottom: 9px;
}

.hero-copy > p {
    color: #b7cee6;
    font-size: 13px;
    margin-bottom: 20px;
}

.hero small {
    display: block;
    color: #a8c1d7;
    margin-top: 8px;
    font-size: 12px;
}

.hero aside {
    max-width: 265px;
    color: #adc3d8;
    font-size: 13px;
    border-left: 1px solid #213c50;
    padding-left: 22px;
}

.signature {
    display: block;
    text-align: right;
    font: italic 34px Georgia, serif;
    color: #7ca3c1;
}

.eyebrow {
    color: #87d1ff;
    margin-top: 5px;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 600;
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 17px;
}

.game-card {
    position: relative;
    min-height: 178px;
    border: 1px solid #28516d;
    border-radius: 5px;
    overflow: hidden;
    background: #0b1b29;
}

.game-card .world-art {
    opacity: .85;
    transition: filter .2s;
}

.game-card:hover .world-art {
    filter: brightness(1.25);
}

.game-content {
    position: relative;
    padding: 45px 19px 17px;
    height: 100%;
    background: linear-gradient(90deg, #061422ba, #07142111);
}

.game-content h2 {
    font-size: 19px;
    margin-bottom: 5px;
    text-shadow: 0 2px 8px black;
}

.game-content .eyebrow {
    font-size: 10px;
    margin-bottom: 16px;
}

.game-content .button {
    padding: 8px 14px;
    font-size: 12px;
}

.panel {
    background: linear-gradient(135deg, #112331eb, #0b1923f5);
    border: 1px solid var(--line);
    border-radius: 5px;
    overflow: hidden;
}

.panel-body {
    padding: 19px;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    padding: 16px 18px;
    background: #1c304222;
}

.panel-heading h2 {
    font-size: 15px;
    margin: 0;
}

.panel-heading a {
    font-size: 12px;
    white-space: nowrap;
}

.panel.link_game_panel
{
    padding:10px 20px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.4fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.dashboard-grid > .panel {
    min-width: 0;
    min-height: 355px;
}

.profile-intro {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 18px;
}

.profile-intro h3 {
    margin: 0 0 5px;
}

.profile-intro p {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
}

.account-mini-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.account-mini-metrics > div {
    background: linear-gradient(#182d3d, #112330);
    border: 1px solid #284456;
    border-radius: 4px;
    padding: 11px;
}

.account-mini-metrics > .home-account-metric {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    column-gap: 7px;
}

.home-account-metric img {
    grid-row: 1 / 3;
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.account-mini-metrics strong {
    font-size: 19px;
    color: #d4eaff;
}

.account-mini-metrics span {
    display: block;
    font-size: 12px;
    color: var(--muted);
}

.sign-in-box {
    border: 1px solid #233e51;
    padding: 15px;
    border-radius: 4px;
    background: linear-gradient(135deg, #20384a, #142736);
    font-size: 13px;
}

.sign-in-box button {
    width: 100%;
}

.ranking-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #b7cfe4;
    margin-bottom: 15px;
}

.empty-state {
    padding: 25px 10px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.empty-state > span {
    display: block;
    color: #477291;
    font-size: 46px;
    margin-bottom: 10px;
}

.empty-state h3 {
    color: #bed5e8;
    margin-bottom: 6px;
}

.text-link {
    display: inline-block;
    margin: 15px 0;
    font-size: 13px;
}

/* Latest updates - home */

.news-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}

.news-item:first-child {
    padding-top: 0;
}

.news-item:last-child {
    border-bottom: 0;
}

.news-item-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.news-item-link:hover {
    color: inherit;
}

.news-item small {
    display: block;
    margin-bottom: 5px;
    color: #7894a8;
    font-size: 11px;
    line-height: 1.4;
}

.news-item h3 {
    margin: 0 0 6px;
    color: #70c8ff;
    font-size: 14px;
    line-height: 1.4;
    transition: color .15s ease;
}

.news-item p {
    margin: 0;
    color: #91a8b9;
    font-size: 12px;
    line-height: 1.55;
}

.news-more {
    margin-left: 3px;
    white-space: nowrap;
    color: #70c8ff;
    font-weight: 600;
    transition: color .15s ease;
}

.news-item-link:hover h3,
.news-item-link:hover .news-more {
    color: white;
}

.news-item-link:hover p {
    color: #adc1cf;
}

.news-item-link:focus-visible {
    outline: 1px solid #70c8ff;
    outline-offset: 5px;
    border-radius: 2px;
}

.community-strip {
    margin: 17px -28px -30px;
    padding: 10px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    border-top: 1px solid var(--line);
    background: #0a1721b3;
}

.community-strip > a {
    display: flex;
    align-items: center;
    gap: 20px;
}

.community-strip > a > span {
    font-size: 36px;
    color: #789dbb;
}

.community-strip h3 {
    font-size: 13px;
    margin-bottom: 5px;
}

.community-strip p, blockquote {
    color: var(--muted);
    font-size: 12px;
    margin: 0;
}

blockquote {
    text-align: right;
}

footer {
    padding: 21px 3%;
    display: flex;
    justify-content: center;
    gap: 20px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
}

footer span {
    margin-left: 12px;
}

.page-heading {
    padding: 40px 0 17px;
}

.page-heading p {
    color: var(--muted);
}

.metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin: 20px 0 35px;
}

.metrics strong {
    font-size: 32px;
    color: #badfff;
}

.metrics small, .metrics a {
    display: block;
    margin-top: 5px;
}

.metrics small, .muted {
    color: var(--muted);
    font-size: 13px;
}

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

.section-heading span {
    color: var(--muted);
    font-size: 12px;
}

.progress-grid, .artifact-grid, .upgrade-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    margin: 20px 0;
    align-items: start;
}

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

.filters {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 17px;
    padding: 20px;
    margin-bottom: 22px;
}

label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

input, select {
    min-width: 160px;
    padding: 11px 14px;
    background: #142a3b;
    border: 1px solid #2a4559;
    border-radius: 4px;
    color: #e2edf6;
    font: inherit;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 25px 0;
    border-bottom: 1px solid var(--line);
}

.tabs a {
    padding: 13px 0;
}

.tabs .active {
    border-bottom: 2px solid var(--accent);
}

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

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

th, td {
    padding: 13px;
    border-bottom: 1px solid #213a4c;
}

th {
    color: var(--muted);
    font-size: 12px;
    font-weight: normal;
}

tbody tr:nth-child(odd) {
    background: #1c344555;
}

.rank {
    color: #ffc46f;
}

.player {
    display: inline-block;
    padding: 4px 8px 4px 0;
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: 25px 0;
}

.artifact-card, .upgrade-card {
    padding: 20px;
    padding-bottom: 5px;
}

.artifact-summary {
    display: flex;
    gap: 10px;

    /*
     * Let the text/info column start at the top while the artifact
     * icon remains vertically centered against the whole summary.
     */
    align-items: stretch;

    margin-bottom: 11px;
}

.artifact-summary h2 {
    font-size: 17px;
    margin: 0;
    line-height: 1.08;
}

.catalog-icon {
    width: 60px;
    height: 50px;
    object-fit: cover;
    border: 1px solid #45667d;
    border-radius: 5px;
    flex-shrink: 0;
    background: #101f2b;
}


/* Artifact cards use a slightly larger icon than the shared catalog default. */
.artifact-card .catalog-icon {
    width: 68px;
    height: 58px;

    align-self: center;
}

.badge {
    color: #94dcbb;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.artifact-summary-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;

    align-self: flex-start;
}

.artifact-ownership-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size:10px;
}

.artifact-ownership-badge.is-owned {
    color: #63d39a;
}

.artifact-ownership-dot {
    display: block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    border: 1px solid #9affc8;
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 32%,
            #e2ffef 0 18%,
            #72f2ad 34%,
            #2ac479 72%,
            #15945a 100%
        );

    box-shadow:
        0 0 0 1px #0a3a29,
        0 0 5px #54e39acc,
        0 0 10px #54e39a55;
}

.artifact-ownership-badge.is-missing {
    color: #7d92a4;
}

.artifact-ownership-lock {
    display: block;
    width: 10px;
    height: 11px;
    flex: 0 0 10px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.not-owned .catalog-icon {
    filter: grayscale(1);
    opacity: .4;
}

.not-owned .artifact-summary h2, .not-owned .badge {
    color: #a35d5d;
}

.not-owned {
    background: #0c1822;
}

.artifact-stats {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 15px;
}

summary {
    cursor: pointer;
    color: var(--accent);
    font-size: 14px;
}

.tooltip-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 18px 0;
    color: #bbccdb;
    font-size: 14px;
}

.attributes {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 9px;
    font-size: 12px;
}

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

.attributes dd {
    margin: 0;
}

/* ===== HERO BROWSER ===== */

.hero-browser {
    margin-top: 24px;
}

.hero-browser-toolbar {
    margin: 0 0 18px;
    padding: 18px 20px;

    border-color: #29475a;

    background:
        linear-gradient(110deg, #102533f0 0%, #0c1d29f5 60%, #12192bf0 100%);

    box-shadow:
        inset 0 1px 0 #ffffff07,
        0 10px 24px #0000001f;
}

.hero-browser-toolbar-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 13px;
}

.hero-browser-toolbar-heading .eyebrow {
    margin: 0 0 3px;

    color: #8ccfff;

    font-size: 9px;
    letter-spacing: 1.55px;
    text-transform: uppercase;
}

.hero-browser-toolbar-heading h2 {
    margin: 0;

    color: #f3f7fb;

    font-size: 18px;
    line-height: 1.2;
}

.hero-browser-count {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border: 1px solid #5d4370;
    border-radius: 4px;

    background: #21172b;
    color: #c9acd7;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;

    max-width: 560px;
}

.hero-search-field {
    position: relative;

    display: block;

    min-width: 0;
}

.hero-search-field input {
    width: 100%;
    min-width: 0;
    height: 40px;

    padding: 9px 13px 9px 38px;

    border-color: #315066;
    border-radius: 5px;

    background: #0b1c28;

    font-size: 13px;
}

.hero-search-field input:focus {
    border-color: #5783a0;
    outline: none;

    box-shadow: 0 0 0 2px #5c33a21f;
}

.hero-search-icon {
    position: absolute;
    z-index: 1;

    left: 12px;
    top: 50%;

    width: 15px;
    height: 15px;

    color: #7996ac;

    transform: translateY(-50%);

    pointer-events: none;
}

.hero-search-icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.hero-search-form button {
    min-height: 40px;
    padding: 8px 17px;

    font-size: 12px;
}

.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;
}

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

.hero-card {
    position: relative;

    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 13px;

    min-width: 0;
    min-height: 86px;
    padding: 10px 12px;

    overflow: hidden;

    border: 1px solid #294558;
    border-radius: 6px;

    background:
        radial-gradient(circle at 40px 43px, #64339a20 0%, transparent 90px),
        linear-gradient(110deg, #102532 0%, #0d1e2a 60%, #101927 100%);

    color: inherit;

    box-shadow:
        inset 0 1px 0 #ffffff06,
        0 6px 16px #00000018;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.hero-card::before {
    content: "";

    position: absolute;
    inset: 0 auto 0 0;

    width: 2px;

    background: linear-gradient(180deg, transparent, #8b4fb8 30%, #67469d 70%, transparent);

    opacity: .55;

    transition: opacity .16s ease;
}

.hero-card:hover {
    border-color: #604775;

    background:
        radial-gradient(circle at 40px 43px, #7641ad30 0%, transparent 96px),
        linear-gradient(110deg, #132938 0%, #102330 60%, #151c2d 100%);

    color: inherit;

    box-shadow:
        inset 0 1px 0 #ffffff09,
        0 8px 22px #0000002b,
        0 0 16px #6d35a51a;

    transform: translateY(-1px);
}

.hero-card:hover::before {
    opacity: 1;
}

.hero-card-portrait {
    display: block;

    width: 64px;
    height: 64px;

    overflow: hidden;

    border: 1px solid #496478;
    border-radius: 5px;

    background: #0b1720;

    box-shadow:
        inset 0 0 0 1px #ffffff08,
        0 3px 10px #0008;

    transition:
        border-color .16s ease,
        box-shadow .16s ease;
}

.hero-card-portrait img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .18s ease, filter .18s ease;
}

.hero-card:hover .hero-card-portrait {
    border-color: #72558a;

    box-shadow:
        inset 0 0 0 1px #ffffff0a,
        0 3px 12px #0009,
        0 0 10px #7542a72b;
}

.hero-card:hover .hero-card-portrait img {
    filter: brightness(1.07);
    transform: scale(1.025);
}

.hero-card-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;

    min-width: 0;
}

.hero-card-name {
    max-width: 100%;

    overflow: hidden;

    color: #edf4f9;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-card-upgrades {
    display: inline-flex;
    align-items: center;

    padding: 3px 6px;

    border: 1px solid #584069;
    border-radius: 4px;

    background: #141414;
    color: #d3c7d9;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero-card-chevron {
    color: #678ba4;

    font-size: 24px;
    font-weight: 300;
    line-height: 1;

    transition:
        color .16s ease,
        transform .16s ease;
}

.hero-card:hover .hero-card-chevron {
    color: #d8b9e8;
    transform: translateX(2px);
}

/* ===== HERO UPGRADE DETAIL PAGE ===== */

.hero-upgrades-page {
    width: 100%;
    max-width: 1220px;
    margin: 24px auto 0;
}

.hero-upgrades-profile {
    position: relative;
    overflow: hidden;

    margin: 0 0 18px;
    padding: 18px 20px 20px;

    border: 1px solid #29495d;
    border-radius: 8px;

    background:
        radial-gradient(circle at 118px 74px, #7e25161a 0, transparent 165px),
        linear-gradient(135deg, #0f2634, #091923);

    box-shadow:
        inset 0 1px 0 #ffffff08,
        0 12px 28px #00000020;
}

.hero-upgrades-back {
    display: inline-flex;
    align-items: center;

    margin: 0 0 14px;

    color: #72cfff;
    font-size: 12px;
    font-weight: 600;
}

.hero-upgrades-back:hover {
    color: #ffffff;
}

.hero-upgrades-profile-main {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hero-upgrades-avatar {
    display: block;

    width: 96px;
    height: 96px;
    flex: 0 0 96px;

    object-fit: cover;

    border: 1px solid #e7cfe6;
    border-radius: 6px;

    background: #101b22;

    box-shadow:
        inset 0 0 0 1px #ffffff08,
        0 5px 18px #0007;
}

.hero-upgrades-profile-copy {
    min-width: 0;
}

.hero-upgrades-profile-copy .eyebrow {
    margin: 0 0 7px;

    color: #66c8fa;

    font-size: 10px;
    letter-spacing: .13em;
}

.hero-upgrades-profile-copy h2 {
    margin: 0 0 5px;

    color: #f2f6fa;

    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.hero-upgrades-total {
    margin: 0;

    color: #b6c9d7;

    font-size: 13px;
}

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

.value-note {
    border-top: 1px solid var(--line);
    padding-top: 12px;
    color: var(--muted);
    font-size: 12px;
}

.notice {
    padding: 17px;
    border-left: 2px solid #438cc0;
    background: #142d3e;
    color: #b6cee0;
    font-size: 13px;
}

.update {
    padding: 24px;
    margin: 20px 0;
}

pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
}

:focus-visible {
    outline: 2px solid #7ccbff;
    outline-offset: 4px;
}


[hidden] {
    display: none !important;
}

/* Artifact tooltip: effect, leveling and statistics have separate surfaces. */
.artifact-price {
    color: #e4c179;
    letter-spacing: 0;
}

.artifact-tooltip {
    margin-top: 18px;
}

.artifact-tooltip summary {
    color: #92cfff;
    padding: 12px 0;
    cursor: pointer;
}

.artifact-section {
    margin-top: 12px;
    padding: 18px;
    background: #101f2b;
    border: 1px solid #263c4d;
    border-radius: 6px;
}

.artifact-section h3 {
    margin: 0 0 14px;
    color: #65ded0;
    font-size: 13px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.artifact-section .tooltip-text {
    padding: 0;
}

.artifact-leveling {
    border-left: 3px solid #526db5;
}

.artifact-leveling p {
    margin: 5px 0;
    color: #b8cadd;
    font-size: 14px;
}

.artifact-leveling .level-heading {
    margin-top: 16px;
    color: #d4a4fb;
    font-weight: 700;
}

.artifact-leveling .level-heading:first-of-type {
    margin-top: 0;
}

.artifact-lore {
    color: #7890a4;
    font-style: italic;
    font-size: 12px;
    padding: 0 18px;
    text-align: center;
}

.artifact-section .attributes dd {
    color: #f1f7fc;
    font-weight: 700;
}

.not-owned {
    opacity: 1;
}

.not-owned .catalog-icon {
    filter: grayscale(1);
    opacity: .45;
}

.not-owned .artifact-summary h2 {
    color: #94a3b6;
}


.language-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.language-picker label {
    font-size: 13px;
    color: #9fb3c9;
}

.language-picker select {
    max-width: 145px;
    min-width: 95px;
    padding: 8px;
    background: #102131;
    color: #e6f0fa;
    border: 1px solid #30485e;
    border-radius: 5px;
    font: inherit;
}

.language-picker button {
    padding: 8px 12px;
}

:lang(zh-Hans), :lang(zh-Hant) {
    line-height: 1.65;
    letter-spacing: normal;
}

.site-header {
    flex-wrap: wrap;
}

/* Community banner, Steam identity and supporter page. */
.community-hero {
    min-height: 300px;
}

.community-hero .hero-illustration {
    inset: 0;
    width: auto;
    height: auto;
    opacity: 1;
    mask-image: none;
    background: linear-gradient(90deg, #071420f5 0%, #071420c9 26%, #07142018 52%, #07142085 74%, #071420f5 86%), url('community-hero.png') center 52% / cover;
}

.community-hero .hero-copy {
    max-width: 540px;
}

.signature-image {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
    margin: 10px 0 0 auto;
    filter: brightness(1.25);
}

.steam-sign-in {
    display: inline-block;
    max-width: 100%;
}

.steam-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 46px;
    padding: 11px 20px;
    border: 1px solid #388ff0;
    border-radius: 5px;
    background: linear-gradient(115deg, #1377da, #1245a7);
    box-shadow: inset 0 1px 0 #ffffff16, 0 5px 20px #0050be25;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.steam-button:hover {
    background: linear-gradient(115deg, #228bed, #1b5bc4);
    transform: translateY(-1px);
}

.steam-icon {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    filter: invert(1);
}

.steam-button .steam-arrow {
    font-size: 21px;
    margin-left: 12px;
}

.header-player {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 205px;
    color: #eef5ff;
}

.header-player img {
    width: 37px;
    height: 37px;
    border: 1px solid #3c657e;
    border-radius: 7px;
}

.header-player > span {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 14px;
}

.header-player small {
    display: block;
    color: #63d3a6;
    font-size: 12px;
}

.player-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0 24px;
    overflow-wrap: anywhere;
}

.player-identity h3 {
    margin: 0 0 5px;
}

.player-avatar {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 9px;
    border: 1px solid #365a76;
}

.connected-status {
    margin: 4px 0;
    color: #72d7b0;
    font-size: 13px;
}

.player-identity a {
    font-size: 13px;
}

.community-links {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 20px;
}

.community-links > a > img {
    width: 125px;
    max-height: 60px;
    object-fit: contain;
    flex-shrink: 0;
}

.community-links blockquote {
    text-align: right;
}

.community-quote {
    display: block;

    min-width: 0;
    margin: 0;
    padding: 2px 0;

    border: 0;
    background: none;

    color: #aebfce;

    font-size: 12px;
    font-style: italic;
    line-height: 1.45;
    text-align: right;

    box-shadow: none;
}

.community-quote::before {
    content: none;
}

.community-quote-text {
    color: #b8c8d6;
}

.community-links .signature-image {
    width: 145px;
}

.support-hero {
    /* padding: 54px 40px; */
    padding: 30px 36px;
    margin-bottom: 28px;
    border: 1px solid #26445e;
    border-top: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    background: linear-gradient(90deg, #071420fa 0%, #071420e5 45%, #07142065 100%), url('community-hero.png') center / cover;
}

.support-hero > div {
    max-width: 650px;
}

.support-hero h1 {
    font-size: clamp(27px, 3vw, 42px);
    line-height: 1.15;
    margin: 14px 0;
}

.support-hero p {
    color: #bbcee1;
    line-height: 1.8;
}

.support-hero .support-thanks {
    color: #93d9ff;
}

.support-hero .signature-image {
    margin-left: 0;
}

.support-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr);
    gap: 24px;
    align-items: start;
}

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

.benefit-card {
    padding: 23px;
}

.benefit-symbol {
    font-size: 25px;
    color: #8bc7ff;
}

.benefit-card h3 {
    margin: 12px 0 8px;
    font-size: 16px;
}

.benefit-card p {
    color: #adbed2;
    line-height: 1.65;
    font-size: 14px;
}

.benefit-card small {
    display: block;
    color: #7296b5;
    font-size: 11px;
    margin-top: 18px;
}

.supporter-account {
    padding: 25px;
    border-color: #375d7a;
}

.supporter-account p {
    line-height: 1.7;
}

.copy-account {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.copy-account input {
    min-width: 0;
    width: 100%;
    padding: 12px 14px;
    background: #071520;
    color: #8ee4bb;
    border: 1px solid #2b5a60;
    border-radius: 5px;
    font: 600 24px monospace;
}

.support-platforms {
    margin: 36px 0;
}

.platform-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.platform-card {
    cursor: pointer;
    color: var(--text);
    text-decoration: none;
    padding: 23px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.platform-card:hover,
.platform-card:focus-visible {
    color: var(--text);
    text-decoration: none;
    background-color: #153044;
    border-color: var(--accent);
    box-shadow: 0 0 18px #70c8ff26;
}

@media (prefers-reduced-motion: reduce) {
    .platform-card,
    .platform-card img {
        transition: none !important;
    }
}

.platform-card h3 {
    margin: 0;
}

.platform-card img {
    width: 180px;
    max-width: 100%;
    height: 58px;
    object-fit: contain;
    filter: brightness(0.95);
    transition: filter 180ms ease;
}

.platform-card:hover img,
.platform-card:focus-visible img {
    filter: brightness(1.08);
}

.platform-card .text-link {
    margin-top: auto;
    font-size: 13px;
}

.support-how {
    padding: 28px;
    overflow: visible;
}

.support-how-intro {
    position: relative;
    min-height: 95px;
    padding: 4px 255px 10px 0;
    border-bottom: 1px solid #315a78;
}

.support-how-intro h2 {
    margin: 0 0 8px;
    font-size: clamp(24px, 2.4vw, 32px);
}

.support-how-intro p {
    margin: 0;
    color: #c6d8e7;
}

.support-chest {
    position: absolute;
    right: -8px;
    top: -65px;
    width: 250px;
    height: auto;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 0 16px #087dd79c);
}

.support-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 14px;
}

.support-method {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 24px;
    border: 1px solid #178d95;
    border-radius: 9px;
    background: linear-gradient(145deg, #052a34f2, #061b2af5 68%);
}

.support-method-manual {
    border-color: #3378bf;
    background: linear-gradient(145deg, #082b4df2, #071c34f5 68%);
}

.support-method-heading {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    min-height: 93px;
    padding-bottom: 16px;
    border-bottom: 1px solid #35617680;
}

.support-method-heading h3 {
    margin: 0 0 3px;
    font-size: clamp(20px, 1.8vw, 25px);
    line-height: 1.2;
}

.support-method-heading strong {
    display: block;
    color: #44e2de;
    font-size: 16px;
}

.support-method-manual .support-method-heading strong {
    color: #6abaff;
}

.support-method-heading p {
    margin: 6px 0 0;
    color: #c2d8e8;
    font-size: 14px;
    line-height: 1.45;
}

.reward-icon {
    display: block;
    flex: none;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.reward-icon-auto,
.reward-icon-manual { width: 62px; height: 62px; }

.support-steps {
    position: relative;
    margin: 16px 0;
    padding: 0;
    list-style: none;
}

.support-steps::before {
    content: "";
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: 23px;
    border-left: 2px dotted rgba(42, 175, 240, .15);
}

.support-method-auto .support-steps::before { border-left-color: rgba(34, 201, 202, .15); }

.support-steps li {
    display: grid;
    grid-template-columns: 50px 28px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 56px;
    margin: 0;
    padding: 4px 0;
    color: #edf7ff;
    font-size: 15px;
    line-height: 1.45;
}

.support-steps li::before {
    content: "";
    display: block;
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.support-steps li:nth-child(1)::before { background-image: url("support/user-step-1.png?v=20261019-align"); }
.support-steps li:nth-child(2)::before { background-image: url("support/user-step-2.png?v=20261019-align"); }
.support-steps li:nth-child(3)::before { background-image: url("support/user-step-3.png?v=20261019-align"); }

.support-method-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #158c91;
    border-radius: 6px;
    background: #063c434d;
}

.support-method-manual .support-method-note {
    border-color: #2869aa;
    background: #11385d63;
}

.support-method-note strong,
.support-method-note small {
    display: block;
    line-height: 1.4;
}

.support-method-note strong {
    color: #46e9d7;
    font-size: 14px;
}

.support-method-manual .support-method-note strong {
    color: #8bc7ff;
}

.support-method-note small {
    margin-top: 2px;
    color: #c2d7e8;
    font-size: 12px;
}

.support-method-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 11px 0 0;
    color: #b9ccdc;
    font-size: 12px;
    line-height: 1.45;
}

.support-method-action {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    min-width: 250px;
    margin-top: auto;
    padding: 12px 18px;
    border: 1px solid #2ca99e;
    border-radius: 6px;
    background: linear-gradient(#138e8b, #0b666e);
    box-shadow: 0 0 7px #1ee3d32e;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
}

.support-action-icon {
    width: 30px;
    height: 30px;
    flex: none;
    object-fit: contain;
}

.support-method-hint + .support-method-action { margin-top: 18px; }
.support-method-note + .support-method-action { margin-top: auto; }

.support-method-manual .support-method-action {
    border-color: #70a9ff;
    background: linear-gradient(#2673d5, #1744a3);
    box-shadow: 0 0 12px #327de444;
}

.support-method-action:hover,
.support-method-action:focus-visible {
    color: #fff;
    filter: brightness(1.08);
    text-decoration: none;
}

@media (max-width: 720px) {
    .support-methods {
        grid-template-columns: minmax(0, 1fr);
    }

    .support-how { padding: 20px; }
    .support-how-intro { min-height: 88px; padding-right: 135px; }
    .support-chest { width: 145px; top: -45px; right: -8px; }
    .support-method { padding: 18px; }
    .support-method-heading { grid-template-columns: 50px minmax(0, 1fr); gap: 12px; }
    .reward-icon-auto,
    .reward-icon-manual { width: 50px; height: 50px; }
    .support-steps li { gap: 8px; font-size: 14px; }
    .support-method-action { align-self: stretch; }
}


.language-menu {
    position: relative;
    z-index: 20;
}

.language-menu summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid #30485e;
    border-radius: 5px;
    cursor: pointer;
    color: #e6f0fa;
    background: #102131;
    list-style: none;
}

.language-menu summary::-webkit-details-marker {
    display: none;
}

.language-menu summary::after {
    content: '▾';
    color: #83a7c7;
}

.language-flag {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.language-options {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    min-width: 180px;
    background: #102131;
    padding: 6px;
    border: 1px solid #30485e;
    border-radius: 6px;
    box-shadow: 0 10px 30px #0008;
}

.language-options button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 3px;
    box-shadow: none;
    padding: 10px;
}

.language-options button:hover, .language-options button[aria-current] {
    background: #244762;
}

.patron-panel {
    margin: 28px 0;
    padding: 25px;
}

.patron-badge {
    padding: 7px 12px;
    color: #f3daff;
    border: 1px solid #875292;
    background: #392443;
    border-radius: 5px;
    font-size: 14px;
}

.patron-bonus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 15px;
}

.patron-bonus-card {
    border: 1px solid #71613a;
    border-radius: 7px;
    padding: 12px;
    background: linear-gradient(#172531, #08161e);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bonus-art {
    width: 92px;
    height: 92px;
    max-width: 100%;
    background-image: url('support/bonus-icons.png');
    background-size: 300% 200%;
    border-radius: 5px;
    flex-shrink: 0;
}

.bonus-xp { background-position: 0% 0%; }
.bonus-coins { background-position: 50% 0%; }
.bonus-reroll { background-position: 100% 0%; }
.bonus-skip { background-position: 0% 100%; }
.bonus-recraft { background-position: 50% 100%; }
.bonus-freeze { background-position: 100% 100%; }

.patron-bonus-card h3 {
    min-height: 38px;
    font-size: 13px;
    line-height: 1.6;
    margin: 12px 0;
}

.patron-bonus-card strong {
    color: #ff7bb6;
    font-size: 24px;
    margin-top: auto;
}

.bonus-active {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 5px;
    background: linear-gradient(#87641e, #4a3812);
    color: #ffeebf;
    font-size: 12px;
}

.cosmetic-access {
    margin: 22px 0 0;
    color: #a5d8f8;
}

/* Nagłówek ma te same boczne krawędzie co zawartość portalu. */
.site-header {
    padding-inline: max(28px, calc((100% - 1544px) / 2));
    gap: 16px;
    justify-content: flex-start;
}

.site-header nav {
    margin-left: auto;
}

.site-header .language-picker {
    order: 10;
    margin-left: 0;
    flex-shrink: 0;
}

.site-header .steam-button {
    min-height: 36px;
    padding: 7px 12px;
    gap: 8px;
    font-size: 14px;
}

.site-header .steam-icon {
    width: 21px;
    height: 21px;
}

.site-header .steam-arrow {
    display: none;
}

.language-options {
    min-width: 132px;
    padding: 4px;
}

.language-options button {
    justify-content: flex-start;
    padding: 8px;
    gap: 9px;
    white-space: nowrap;
}

.language-flag {
    flex: 0 0 24px;
    object-fit: contain;
}

.upgrade-value {
    color: #ffbd69;
    font-weight: 700;
    text-shadow: 0 1px 2px #702b20;
}


/* Avatar autora: pochylona ramka, obraz bez deformacji. */
.brand-avatar {
    display: block;
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    padding: 3px;
    overflow: hidden;
    border: 1px solid #76949f;
    border-radius: 4px;
    background: #14242c;
    box-shadow: 0 2px 8px #0005;
    transform: rotate(-5deg);
}

.brand-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}

.community-links > a > img.support-image {
    border-radius: 6px;
    filter: brightness(0.9) saturate(0.5);
}

.community-links > a > img.discord-image {
    filter: brightness(0.9) saturate(0.9);
}

/* ===== HERO ABILITY UPGRADE GROUPS ===== */

.ability-group {
    overflow: hidden;

    margin: 10px 0px;

    border: 1px solid #5d3b73;
    border-radius: 8px;

    background: #0b1d28;

    box-shadow:
        inset 0 1px 0 #ffffff06,
        0 8px 20px #00000018;
}

.ability-group-heading {
    display: flex;
    align-items: center;
    gap: 13px;

    min-height: 62px;
    padding: 8px 14px;

    list-style: none;

    border: 0;
    border-bottom: 1px solid #563568;

    background:linear-gradient(90deg, #110d14 0%, #181a29 48%, #0605063d 100%);

    color: #f0f5f8;

    cursor: pointer;
}

.ability-group-heading::-webkit-details-marker {
    display: none;
}

.ability-group-heading::after {
    content: "▾";

    margin-left: auto;

    color: #c7d3da;

    font-size: 13px;
    line-height: 1;

    transform: rotate(180deg);
    transition: transform .15s ease, color .15s ease;
}

.ability-group:not([open]) > .ability-group-heading {
    border-bottom-color: transparent;
}

.ability-group:not([open]) > .ability-group-heading::after {
    transform: rotate(0deg);
}

.ability-group-heading:hover::after {
    color: #ffffff;
}

.ability-group-heading .catalog-icon {
    width: 65px;
    height: 65px;
    flex: 0 0 65px;

    object-fit: cover;

    border: 1px solid #74508e;
    border-radius: 5px;

    background: #111820;

    box-shadow: 0 3px 10px #0005;
}

.ability-group-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;

    min-width: 0;
}

.ability-group-heading h2 {
    min-width: 0;
    margin: 0;

    color: #f2edf7;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.ability-group-count {
    display: inline-flex;
    align-items: center;

    min-height: 17px;
    padding: 2px 6px;

    border: 1px solid #654878;
    border-radius: 4px;

    background: #251b30;
    color: #c5a7d3;

    box-shadow: inset 0 1px 0 #ffffff06;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ability-group-body {
    padding: 7px;
}

.hero-upgrades-list .upgrade-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;

    margin: 0;
}

.hero-upgrades-list .upgrade-card {
    display: grid;
    grid-template-columns: 61px minmax(0, 1fr);
    gap: 14px;
    align-items: start;

    min-width: 0;
    margin: 0;
    padding: 14px 15px 14px 7px;

    border: 1px solid #3f486a;
    border-radius: 6px;

    background:
        linear-gradient(110deg, #15283a 0%, #112434 55%, #151b2b 100%);

    box-shadow:
        inset 0 1px 0 #ffffff07,
        0 5px 14px #00000020;
}

.upgrade-card-icon-frame {
    position: relative;
    isolation: isolate;
    overflow: visible;

    display: grid;
    place-items: center;

    width: 61px;
    height: 71px;

    background:
        url('aghanims_legendary.png')
        center / contain no-repeat;

    filter:
        drop-shadow(0 2px 10px #000c)
        drop-shadow(0 0 6px #4b1f8f66);
}

/* Simple legendary purple glow behind the icon. */
.upgrade-card-icon-frame::before {
    content: "";
    position: absolute;
    z-index: -1;

    left: 50%;
    top: 48%;

    width: 70px;
    height: 70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #6f2fcf66 0%,
            #5c27b852 28%,
            #471b913d 46%,
            #3210612b 62%,
            #22093d18 74%,
            #1605280b 84%,
            transparent 96%
        );

    filter: blur(9px);

    transform: translate(-50%, -50%);

    pointer-events: none;
}

.upgrade-card-icon-frame::after {
    content: none;
}

.upgrade-card-icon {
    position: relative;
    z-index: 2;

    display: block;

    width: 61px;
    height: 71px;

    object-fit: contain;

    transform: translateY(6px);

    filter:
        drop-shadow(0 0 4px #5f2bbf70)
        drop-shadow(0 3px 4px #000c);
}

.upgrade-card-copy {
    min-width: 0;
}

.hero-upgrades-list .upgrade-card h3 {
    display: inline-block;

    margin: 1px 0 8px;
    padding: 0 0 4px;

    border-bottom: 1px solid #9851b45c;

    color: #f9d9ff;

    font-size: 16px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .01em;

    text-shadow: 0 0 10px #b74cff2b;
}

.hero-upgrades-list .upgrade-description {
    margin: 0;

    /* Description HTML may contain indentation/newlines from the source.
       Do not preserve those spaces inside hero upgrade cards. */
    white-space: normal;
    overflow-wrap: anywhere;

    color: #fffed9;

    font-size: 13px;
    line-height: 1.55;
}

.upgrade-requirement {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    max-width: 100%;
    margin-top: 10px;
    padding: 5px 8px;

    border: 1px solid #97626586;
    border-radius: 5px;

    background: #2117198a;
    color: #a9c2d1;

    font-size: 11px;
    line-height: 1.2;
}

.upgrade-requirement-icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-upgrades-list .value-note {
    margin: 10px 0 0;
    padding: 8px 0 0;

    border-top-color: #29404d;

    font-size: 11px;
}


/* Shared community copy and compact home leaderboard. */
.community-links>a{min-width:0}
.home-rank-table{width:100%;min-width:310px}
.home-rank-table th,.home-rank-table td{padding:5px 6px}
.home-rank-table td:first-child {font-weight: 700;}
.home-rank-table td:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.home-rank-icons{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.home-rank-icons a{display:block;flex-shrink:0;line-height:0}
.home-rank-icons img{display:block;object-fit:cover;border-radius:3px;border:1px solid #465f70}

.home-rank-table .home-rank-winner td {
    background: #302c1ae7;
    border-top: 1px solid #867038af;
    border-bottom: 1px solid #867038af;
}

.home-rank-table thead th {
    border-bottom: 0;
}

.home-rank-table .home-rank-winner td:first-child {
    border-left: 2px solid #c9ab57b9;
    color: #ffe49a;
}

.home-rank-table .home-rank-winner td:last-child {
    border-right: 1px solid #867038a6;
}

.home-rank-number {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    white-space: nowrap;
}

.home-rank-winner .home-rank-number {
    color: #ffe49a;
}

.won-difficulty{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#a8bfce;font-size:13px;padding:9px 0;margin:5px 0;border-bottom:1px solid #263d4b}
.won-difficulty strong{display:inline-block;padding:4px 9px;border-radius:4px;font-size:12px;white-space:nowrap}
.won-difficulty .difficulty-achieved{color:#e8c978;background:#2a2619;border:1px solid #66552d;text-shadow:none}
.won-difficulty .difficulty-empty{color:#8ea6b6;background:#122430;border:1px solid #2c4352;font-weight:400}

/* ===== MOBILE HAMBURGER MENU ===== */

.mobile-menu-toggle {
    display: none;
}


/* ===== ARTIFACT LEVEL / XP SUMMARY ===== */

.artifact-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;

    margin: 10px 0 0;

    color: inherit;
    font-size: inherit;
}

.artifact-stat {
    min-width: 0;
    padding: 7px 9px;

    border: 1px solid #294657;
    border-radius: 5px;

    background: linear-gradient(180deg, #122a39, #0d202c);
    box-shadow: inset 0 1px 0 #ffffff08;
}


.artifact-stats-main {
    grid-template-columns: minmax(0, 1fr);
}

.artifact-stat-progress {
    width: 100%;
}

.artifact-stat-main-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 12px;
}

.artifact-stat-main-item {
    min-width: 0;
}

.artifact-stat-main-xp {
    padding-left: 12px;
    border-left: 1px solid #2b4657;
}

.artifact-stat-main-xp .artifact-stat-label,
.artifact-stat-main-xp .artifact-stat-value {
    text-align: right;
}

.artifact-stat-main-xp .artifact-stat-value {
    justify-content: flex-end;
}

/*
 * Halloween data uses the same full-width panel language as the
 * combined Level / Total XP panel above.
 */
.artifact-stats-special {
    grid-template-columns: minmax(0, 1fr);
}

.artifact-stat-label {
    display: block;
    margin-bottom: 2px;

    color: #819aaa;

    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.artifact-stat-value {
    display: flex;
    align-items: baseline;
    gap: 3px;

    font-size: 16px;
    font-weight: 750;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.artifact-stat-value small {
    color: #7892a4;
    font-size: 10px;
    font-weight: 500;
}

.artifact-stat-level {
    color: #cbb8e7;
}

.artifact-stat-xp {
    color: #e5cc8b;
}

.artifact-level-progress-wrap {
    position: relative;

    width: 100%;
    height: 8px;
    margin-top: 7px;

    overflow: hidden;

    border: 1px solid #31404a;
    border-radius: 3px;

    background: #08151d;

    box-shadow:
        inset 0 1px 2px #0008,
        0 1px 0 #ffffff05;
}

.artifact-level-progress-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent calc(10% - 1px),
            #0a151dcc calc(10% - 1px),
            #0a151dcc 10%
        );
}

.artifact-level-progress {
    display: block;

    width: 100%;
    height: 100%;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    appearance: none;
    -webkit-appearance: none;
}

.artifact-level-progress::-webkit-progress-bar {
    background: transparent;
}

.artifact-level-progress::-webkit-progress-value {
    background: linear-gradient(90deg, #735b88, #b88fb8 58%, #d8a4cb);

    box-shadow:
        inset 0 1px 0 #ffffff24,
        0 0 6px #b487b04a;
}

.artifact-level-progress::-moz-progress-bar {
    background: linear-gradient(90deg, #735b88, #b88fb8 58%, #d8a4cb);

    box-shadow:
        inset 0 1px 0 #ffffff24,
        0 0 6px #b487b04a;
}


/* ===== ARTIFACT PURCHASE PRICE ===== */

.artifact-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin: 0 0 1px;
    line-height: 1.15;
}

.artifact-meta > span:first-child {
    white-space: nowrap;
}


/* ===== ARTIFACT BADGES ===== */

/*
 * Tier, price and special-event badges share the same dimensions so they
 * visually belong to one system. Tier colors are intentionally muted.
 */

.artifact-tier-badge,
.artifact-price,
.artifact-special-badge {
    min-height: 18px;
    padding: 3px 6px;
    border-radius: 4px;

    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;

    box-shadow:
        inset 0 1px 0 #ffffff05,
        0 1px 1px #0003;
}

.artifact-tier-badge {
    --artifact-card-tier-color: #78aec5;
    --artifact-card-tier-border: #496a7a;
    --artifact-card-tier-bg: #10232d;

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

    border: 1px solid var(--artifact-card-tier-border);

    background: var(--artifact-card-tier-bg);
    color: var(--artifact-card-tier-color);

    letter-spacing: .07em;
    text-transform: uppercase;
}

.artifact-tier-badge-1 {
    --artifact-card-tier-color: #76abc0;
    --artifact-card-tier-border: #3b6678;
    --artifact-card-tier-bg: #10232d;
}

.artifact-tier-badge-2 {
    --artifact-card-tier-color: #829fc5;
    --artifact-card-tier-border: #475f82;
    --artifact-card-tier-bg: #151f30;
}

.artifact-tier-badge-3 {
    --artifact-card-tier-color: #9b8fc0;
    --artifact-card-tier-border: #5e537e;
    --artifact-card-tier-bg: #201d2e;
}

.artifact-tier-badge-4 {
    --artifact-card-tier-color: #b184b5;
    --artifact-card-tier-border: #704d73;
    --artifact-card-tier-bg: #281d2b;
}

.artifact-tier-badge-5 {
    --artifact-card-tier-color: #c3a56a;
    --artifact-card-tier-border: #75613b;
    --artifact-card-tier-bg: #2a2418;
}

.artifact-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    border: 1px solid #5f4650;

    background: #241b1f;
    color: #bbaeb4;

    letter-spacing: 0;
}

.artifact-price-value {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-shadow: none;
    font-variant-numeric: tabular-nums;
}

.artifact-price-coin {
    position: relative;
    display: block;

    width: 13px;
    height: 9px;
    flex: 0 0 13px;

    border: 1px solid #bd4f86;
    border-radius: 50%;

    background: linear-gradient(145deg, #c74d89, #7d2b56 72%);

    box-shadow:
        inset 0 0 0 1px #5a1d3d,
        0 1px 1px #0005;

    transform: rotate(-18deg);
}

.artifact-price-coin::after {
    content: "";
    position: absolute;
    inset: 2px 3px;

    border: 1px solid #e184b255;
    border-radius: 50%;
}


/* ===== SPECIAL HALLOWEEN ARTIFACTS ===== */

.artifact-special-badge {
    display: inline-flex;
    align-items: center;

    border: 1px solid #7a2634;

    background: #2c0d13;
    color: #d8a1aa;

    letter-spacing: .055em;
    text-transform: uppercase;
}

.artifact-special-badge::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    margin-right: 5px;

    border-radius: 50%;
    background: #b12d42;
    box-shadow: 0 0 4px #b12d4244;
}

.artifact-special-badge:hover,
.artifact-special-badge:focus-visible {
    border-color: #9b3345;
    background: #3a111a;
    color: #efb4bd;
}

.artifact-card-special {
    border-color: #3a2c34;
}


/* ===== ARTIFACT EFFECTS ===== */

/*
 * Dota localization defines only the structure:
 * <h1> = new effect
 * <br><br> = subsection inside the same effect
 * <br> = line break
 *
 * Portal colors and typography are intentionally controlled here.
 */

.artifact-effects {
    margin-top: 12px;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
}

.artifact-effects > h3 {
    margin: 0 0 8px;
    padding: 0 1px;

    color: #4ae0bf;

    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

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

.artifact-effect {
    padding: 10px 11px 11px;

    border: 0;
    border-radius: 0;

    background: #1d2b34;

    box-shadow:
        inset 0 1px 0 #ffffff08,
        inset 0 -1px 0 #00000020;
}

/* Source localization <h1> is rendered semantically as h4 in the portal. */
.artifact-effect-title {
    margin: 0 0 7px;

    color: #d8c69a;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.artifact-effect-part {
    margin: 0;
    padding: 0;
}

.artifact-effect-part + .artifact-effect-part {
    margin-top: 12px;
}

.artifact-effect-text {
    color: #9fb0ba;

    font-size: 12px;
    font-weight: 450;
    line-height: 1.4;
}

.artifact-effect-upgrade-title,
.artifact-effect-inline-upgrade {
    font-size: 12px;
    line-height: 1.4;
}

.artifact-effect-level-label {
    color: #dce4e8;
    font-weight: 700;
}

.artifact-effect-upgrade-name {
    margin-left: 4px;

    color: #c9d3d9;
    font-weight: 650;
}

.artifact-effect-inline-upgrade .artifact-effect-text {
    margin-left: 4px;
}


/* ===== CONSISTENT ARTIFACT DETAIL SECTIONS ===== */

/*
 * Artifact Effects, Artifact Leveling and Artifact Statistics now use
 * the same structure:
 * - transparent outer section
 * - turquoise section heading
 * - dark flat content surface
 */

.artifact-tooltip .artifact-section {
    margin-top: 14px;
    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;
}

.artifact-tooltip .artifact-section > h3 {
    margin: 0 0 8px;
    padding: 0 1px;

    color: #6ff7ff;

    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.artifact-section-body {
    padding: 11px 12px;

    border: 0;
    border-radius: 0;

    background: #1d2b34;

    box-shadow:
        inset 0 1px 0 #ffffff08,
        inset 0 -1px 0 #00000020;
}

/* Remove the old blue wrapper accent from Artifact Leveling. */
.artifact-leveling {
    border-left: 0;
}

.artifact-leveling p {
    margin: 5px 0;

    color: #aebec8;

    font-size: 12px;
    line-height: 1.4;
}

.artifact-leveling .level-heading {
    margin-top: 13px;

    color: #d8c69a;

    font-weight: 700;
}

.artifact-leveling .level-heading:first-child {
    margin-top: 0;
}

/* Statistics use the same flat surface as leveling/effects. */
.artifact-statistics .attributes {
    gap: 7px 16px;
}

.artifact-statistics .attributes dt {
    color: #8fa5b4;
}

.artifact-statistics .attributes dd {
    color: #eef5f8;
    font-weight: 700;
}

.artifact-statistics .muted {
    margin: 11px 0 0;
    padding-top: 9px;

    border-top: 1px solid #ffffff0b;

    color: #8195a2;
    font-size: 11px;
    line-height: 1.4;
}


/* ===== HIGHLIGHT GAMEPLAY VALUES ===== */

.artifact-inline-value {
    color: #f1f6f9;
    font-weight: 700;
}

/* Semantic unlock label inside Artifact Leveling. */
.artifact-unlock-label {
    color: #6fbd98;
    font-weight: 700;
}

/* Semantic requirement label inside Artifact Leveling. */
.artifact-requirement-label {
    color: #d47f7f;
    font-weight: 700;
}


/* Compact artifact card header. */
.artifact-summary .eyebrow {
    margin: 0 0 2px;
}

.artifact-summary > div {
    min-width: 0;
}

/* ===== ARTIFACT STAT LEVEL GAINS ===== */

.artifact-statistics .attributes dd {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.artifact-stat-current {
    color: #eef5f8;
    font-weight: 700;
}

.artifact-stat-delta {
    display: inline-block;
    padding: 1px 4px;

    border: 1px solid #d9b45b35;
    border-radius: 3px;

    background: #d9b45b0d;

    color: #e0bf72;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;

    text-shadow: 0 0 7px #d9b45b24;
}



/* ===== HALLOWEEN ARTIFACT UNLOCKS ===== */

.artifact-special-unlock-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.artifact-special-unlock-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    overflow: hidden;
    border: 1px solid #52606a;
    border-radius: 50%;
    background: #111d24;
    box-shadow: inset 0 1px 0 #ffffff0a;
}

.artifact-special-unlock-icon img,
.artifact-special-unlock-row-icon img,
.artifact-special-value-icon,
.artifact-special-value-row img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.artifact-special-unlock-icon.is-unlocked {
    border-color: #b48a45;
    box-shadow:
        inset 0 1px 0 #ffffff16,
        0 0 6px #d9b45b28;
}

.artifact-special-unlock-icon.is-locked > img,
.artifact-special-unlock-icon.is-locked > .artifact-special-icon-fallback {
    opacity: .35;
    filter: grayscale(1);
}

.artifact-special-icon-fallback {
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid #7f8d96;
    border-radius: 50%;
    background: #273740;
}

.artifact-special-unlock-list {
    display: grid;
    gap: 7px;
}

.artifact-special-unlock-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid #ffffff0b;
}

.artifact-special-unlock-row:last-child {
    border-bottom: 0;
}

.artifact-special-unlock-row-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border: 1px solid #b48a45;
    border-radius: 50%;
    background: #111d24;
}

.artifact-special-unlock-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.artifact-special-unlock-copy strong {
    color: #d8c69a;
    font-size: 11px;
    line-height: 1.25;
}

.artifact-special-unlock-copy span {
    color: #9fb0ba;
    font-size: 10px;
    line-height: 1.35;
}

.artifact-special-unlock-state {
    color: #6fbd98;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.artifact-special-unlock-row.is-locked {
    opacity: .42;
}

.artifact-special-unlock-row.is-locked .artifact-special-unlock-row-icon {
    border-color: #59666e;
    filter: grayscale(1);
}

.artifact-special-unlock-row.is-locked .artifact-special-unlock-state {
    color: #8b9aa4;
}

.artifact-special-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9fb0ba;
    font-size: 11px;
}

.artifact-special-value-row img {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
}

.artifact-special-value-row strong {
    margin-left: auto;
    color: #e0bf72;
    font-size: 13px;
}

/* Instant portal tooltip for Halloween artifact icons.
   Native title="" was intentionally removed because browsers delay it. */
.artifact-special-tooltip {
    position: relative;
    overflow: visible;
    cursor: default;
}

.artifact-special-tooltip::after {
    content: attr(data-tooltip);

    position: absolute;
    z-index: 50;
    top: calc(100% + 7px);
    left: 50%;

    width: max-content;
    max-width: 280px;
    padding: 7px 9px;

    border: 1px solid #40515c;
    border-radius: 4px;

    background: #08151deF;
    box-shadow: 0 5px 18px #0009;

    color: #d9e3e9;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, -2px);
    transition:
        opacity .06s ease,
        transform .06s ease;
}

.artifact-special-tooltip:hover::after,
.artifact-special-tooltip:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ===== SPECIAL ARTIFACT UNLOCK TOOLTIPS ===== */

/*
 * Anchor every multi-unlock tooltip to the whole icon row, not to the
 * hovered icon. This keeps edge tooltips inside the artifact card.
 */
.artifact-special-unlock-icons {
    position: relative;
}

.artifact-special-unlock-icons > .artifact-special-tooltip {
    position: static;
}

.artifact-special-unlock-icons > .artifact-special-tooltip::after {
    top: calc(100% + 7px);
    left: 50%;
    right: auto;

    width: 280px;
    max-width: min(100%, calc(100vw - 32px));
    box-sizing: border-box;

    transform: translate(-50%, -2px);
}

.artifact-special-unlock-icons > .artifact-special-tooltip:hover::after,
.artifact-special-unlock-icons > .artifact-special-tooltip:focus-visible::after {
    transform: translate(-50%, 0);
}

/* ===== SPECIAL ARTIFACT STAT PANELS ===== */

.artifact-stats-special {
    margin-top: 6px;
}

.artifact-stat-special {
    min-height: 58px;
}

.artifact-stat-special .artifact-stat-label {
    margin-bottom: 7px;
}

.artifact-stat-special .artifact-special-unlock-icons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 24px;
}

.artifact-stat-special .artifact-special-unlock-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.artifact-special-value-card {
    position: relative;

    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}

/*
 * A single special-value icon (for example Roshan's Relic) uses the whole
 * value row as the tooltip anchor. Centering a 280px tooltip on the small
 * icon would push it outside the left edge of the artifact card.
 */
.artifact-special-value-card > .artifact-special-tooltip {
    position: static;
}

.artifact-special-value-card > .artifact-special-tooltip::after {
    top: calc(100% + 7px);
    left: 0;
    right: auto;

    width: 280px;
    max-width: min(280px, calc(100vw - 32px));

    transform: translateY(-2px);
}

.artifact-special-value-card > .artifact-special-tooltip:hover::after,
.artifact-special-value-card > .artifact-special-tooltip:focus-visible::after {
    transform: translateY(0);
}

.artifact-special-value-text {
    color: #d8e3e9;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
}

.artifact-special-value-text > span {
    margin-left: 3px;
    color: #e0bf72;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* ===== LINK A GAME ===== */

.link-game-card-dark-moon .link-game-card-art {
    background-image: url('dark-moon-card.png');
    background-position: center;
}

.link-game-card-frosthaven .link-game-card-art {
    background-image: url('frosthaven-card.png');
    background-position: center 24%;
}

.link-game-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.link-game-method-note {
    max-width: 430px;
    margin: 12px 0 0;
    color: #9bb0bf;
    font-size: 11px;
    line-height: 1.45;
    text-shadow: 0 1px 4px #000;
}

.link-game-heading {
    padding: 40px 0 8px;
}

.link-game-heading h1 {
    margin-bottom: 10px;
}

.link-game-heading > p:last-child {
    max-width: 720px;
    margin-bottom: 0;
    color: var(--muted);
}

.link-game-notice {
    display: flex;
    align-items: center;
    gap: 11px;

    margin: 18px 0;
    padding: 11px 14px;

    border: 1px solid #29485c;
    border-left: 3px solid #4a9cc9;
    border-radius: 5px;

    background: linear-gradient(90deg, #10283a, #0c1d29);

    color: #adc3d3;
}

.link-game-notice p {
    margin: 0;

    font-size: 12px;
    line-height: 1.5;
}

.link-game-notice-icon {
    display: grid;
    place-items: center;

    width: 22px;
    height: 22px;
    flex: 0 0 22px;

    border: 1px solid #4a8eb5;
    border-radius: 50%;

    color: #88d1f5;

    font-size: 12px;
    font-weight: 750;
    line-height: 1;
}

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

    margin: 22px 0;
}

.link-game-card {
    position: relative;

    min-width: 0;
    overflow: hidden;

    border-color: #31536a;

    background: #0b1b29;

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

.link-game-card:hover,
.link-game-card:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 18px #70c8ff26;
}

.link-game-card-art {
    position: relative;

    min-height: 215px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.link-game-card-art::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            #061422e8 0%,
            #061422bd 36%,
            #06142238 72%,
            #06142210 100%
        ),
        linear-gradient(
            0deg,
            #071520d9 0%,
            #07152020 58%,
            #07152018 100%
        );

    transition: background .18s ease;
}

.link-game-card:hover .link-game-card-art::before,
.link-game-card:focus-within .link-game-card-art::before {
    background:
        linear-gradient(
            90deg,
            #061422dc 0%,
            #061422a8 36%,
            #0614222b 72%,
            #06142208 100%
        ),
        linear-gradient(
            0deg,
            #071520cf 0%,
            #07152016 58%,
            #07152010 100%
        );
}

.link-game-card-aghanim .link-game-card-art {
    background-image: url('aghanim-card.png');
    background-position: center;
}

.link-game-card-siltbreaker .link-game-card-art {
    background-image: url('siltbreaker-card.png');
    background-position: center 6%;
}

.link-game-card-content {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 440px;

    padding: 28px 24px 25px;
}

.link-game-card h2 {
    margin: 0 0 6px;

    color: #f4f8fc;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;

    text-shadow: 0 2px 8px #000;
}

.link-game-card-kicker {
    margin: 0 0 18px;

    color: #75cffc;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .14em;
    text-transform: uppercase;

    text-shadow: 0 1px 5px #000;
}

.link-game-button { 
    min-height: 38px; 
    padding: 8px 14px; 
 
    border-color: #40aa49; 
 
    background: linear-gradient(#2f832e, #062b0ee8); 
 
    font-size: 12px; 
    white-space: nowrap; 
} 
 
.link-game-button:hover { 
    border-color: #6ed67c;
    background: linear-gradient(#317934, #093113); 
}

.link-game-button-manual {
    border-color: #815fb3;
    background: linear-gradient(#3b2e64, #151329e8);
}

.link-game-button-manual:hover {
    border-color: #9a70d1;
    background: linear-gradient(#3a2b5c, #211a3be8);
}

/* ==========================================================================
   RESPONSIVE
   All media queries are intentionally kept at the end of this file.
   ========================================================================== */

/* ===== UPDATES & NEWS ===== */

.updates-heading {
    max-width: 760px;
    margin: 38px 0 26px;
}

.updates-heading h1 {
    margin: 5px 0 8px;
}

.updates-lead {
    margin: 0;
    color: #9eb4c6;
    font-size: 14px;
}

.updates-list {
    display: grid;
    gap: 18px;
    margin-bottom: 28px;
}

.update {
    position: relative;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 1px solid #29495b;
    border-radius: 7px;

    background:
        radial-gradient(circle at 100% 0, #1a4b6630, transparent 34%),
        linear-gradient(135deg, #102634 0%, #0b1a25 72%);

    box-shadow:
        0 10px 30px #0003,
        inset 0 1px 0 #ffffff08;
}

.update::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #45bdf2,
            #6fd6ff 38%,
            transparent 82%
        );
}

.update:first-child {
    border-color: #35677f;

    box-shadow:
        0 12px 34px #0004,
        0 0 28px #35a9df0b,
        inset 0 1px 0 #ffffff0a;
}

.update:first-child::before {
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #55caff,
            #89e0ff 45%,
            #4ba0d600 92%
        );
}

.update-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    padding: 18px 22px 0;
}

.update-game {
    display: inline-flex;
    align-items: center;

    min-height: 24px;
    padding: 4px 9px;

    border: 1px solid #32627d;
    border-radius: 4px;

    background: #12364b;
    color: #8edcff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.update-date {
    color: #7f9caf;

    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.update > h2 {
    margin: 12px 22px 0;

    color: #eef8ff;

    font-size: 22px;
    line-height: 1.25;
    letter-spacing: .01em;
}

.update-text {
    margin-top: 17px;
    padding: 18px 22px 22px;

    border-top: 1px solid #203b4c;

    color: #bfd0dc;

    font-size: 13px;
    line-height: 1.7;
}

.update-text p {
    margin: 0 0 14px;
}

.update-text p:last-child {
    margin-bottom: 0;
}

.update-text strong {
    color: #ffe39a;
    font-weight: 700;
}

.update-text em {
    color: #9fd8f2;
}

.update-text a {
    color: #72d4ff;

    text-decoration: underline;
    text-decoration-color: #72d4ff66;
    text-underline-offset: 3px;
}

.update-text a:hover {
    color: #c5efff;
    text-decoration-color: currentColor;
}

.update-text ul,
.update-text ol {
    display: grid;
    gap: 6px;

    margin: 14px 0 18px;
    padding: 0;

    list-style: none;
}

.update-text li {
    position: relative;

    margin: 0;
    padding: 8px 11px 8px 30px;

    border: 1px solid #203f50;
    border-radius: 4px;

    background: #102936;
    color: #cbd9e3;
}

.update-text li::before {
    content: "›";

    position: absolute;
    left: 12px;
    top: 6px;

    color: #6fd5ff;

    font-size: 16px;
    font-weight: 800;
}

.update-text h3 {
    margin: 22px 0 10px;

    color: #d9f1ff;

    font-size: 14px;
}

.update-text blockquote {
    margin: 18px 0;
    padding: 12px 15px;

    border-left: 3px solid #58c8f5;
    border-radius: 0 4px 4px 0;

    background: #122b39;
    color: #b9d2e1;

    font-size: 13px;
    text-align: left;
}

.updates-empty {
    padding: 24px;
    margin-bottom: 24px;
}

.updates-empty p {
    margin-bottom: 0;
    color: #9eb4c6;
}

/* ===== ARTIFACT TIER GROUPS ===== */

.artifact-tier-group {
    --artifact-tier-color: #55c9f6;
    --artifact-tier-glow: #55c9f633;

    margin: 25px 0;
}

.artifact-tier-group .artifact-grid {
    margin: 12px 0 0;
}

.artifact-tier-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
    margin-bottom: 25px;
}

.artifact-tier-emblem {
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    border: 1px solid var(--artifact-tier-color);
    border-radius: 3px;

    background:
        linear-gradient(135deg, #17374a, #0b1b28);

    box-shadow:
        0 0 0 2px #07151f,
        0 0 12px var(--artifact-tier-glow),
        inset 0 0 10px #ffffff0a;

    transform: rotate(45deg);
}

.artifact-tier-emblem > span {
    color: #dff6ff;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;

    text-shadow: 0 0 7px var(--artifact-tier-color);

    transform: rotate(-45deg);
}

.artifact-tier-title {
    flex: 0 0 auto;
    margin-left: 5px;

    color: var(--artifact-tier-color);

    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .11em;
    text-transform: uppercase;

    text-shadow: 0 0 10px var(--artifact-tier-glow);
}

.artifact-tier-count {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;

    flex: 0 0 auto;

    padding: 3px 7px;

    border: 1px solid #29495d;
    border-radius: 4px;

    background: #0d202d;

    color: #7894a7;

    font-size: 9px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.artifact-tier-count strong {
    color: var(--artifact-tier-color);

    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.artifact-tier-line {
    height: 1px;
    min-width: 30px;
    flex: 1 1 auto;

    background:
        linear-gradient(
            90deg,
            var(--artifact-tier-color),
            #345368 80%,
            transparent 100%
        );

    opacity: .35;
}

.artifact-tier-1 {
    --artifact-tier-color: #51cffb;
    --artifact-tier-glow: #51cffb36;
}

.artifact-tier-2 {
    --artifact-tier-color: #72aaff;
    --artifact-tier-glow: #72aaff36;
}

.artifact-tier-3 {
    --artifact-tier-color: #a98cff;
    --artifact-tier-glow: #a98cff36;
}

.artifact-tier-4 {
    --artifact-tier-color: #d286df;
    --artifact-tier-glow: #d286df36;
}

.artifact-tier-5 {
    --artifact-tier-color: #dfb65d;
    --artifact-tier-glow: #dfb65d36;
}

/*
 * Slightly richer frame only for artifact icons.
 * Other catalog icons, such as abilities, remain unchanged.
 */
.artifact-card .catalog-icon {
    border-color: #587b92;

    box-shadow:
        0 0 0 1px #07131c,
        inset 0 0 0 1px #ffffff0d,
        0 2px 7px #00000070;
}

/* ===== HEADER ACCOUNT MENU ===== */

.account-menu {
    position: relative;
    z-index: 35;

    flex: 0 0 auto;
}

.account-menu > summary {
    list-style: none;
}

.account-menu > summary::-webkit-details-marker {
    display: none;
}

.account-menu-trigger {
    display: flex;
    align-items: center;
    gap: 5px;

    padding: 4px 7px 4px 4px;

    border: 1px solid #304d61;
    border-radius: 5px;

    background: #102131;

    cursor: pointer;
    user-select: none;

    transition:
        background .15s ease,
        border-color .15s ease;
}

.account-menu-trigger:hover,
.account-menu[open] .account-menu-trigger {
    border-color: #47738d;
    background: #173149;
}

.account-menu-trigger img {
    display: block;

    width: 32px;
    height: 32px;

    border: 1px solid #476d83;
    border-radius: 5px;

    object-fit: cover;
}

.account-menu-chevron {
    display: inline-block;

    color: #9db6c7;

    font-size: 12px;
    line-height: 1;

    transform-origin: center;
    transition: transform .15s ease, color .15s ease;
}

.account-menu[open] .account-menu-chevron {
    color: #d7ebf7;
    transform: rotate(180deg);
}

.account-menu-popover {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: auto;

    width: 150px;
    padding: 5px;

    border: 1px solid #2b485b;
    border-radius: 6px;

    background: #0d1d29;

    box-shadow:
        0 14px 34px #000a,
        inset 0 1px 0 #ffffff08;
}

.account-menu-identity {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 7px 7px 9px;
    margin-bottom: 4px;

    border-bottom: 1px solid #213b4b;
}

.account-menu-identity > img {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;

    border: 1px solid #476d83;
    border-radius: 6px;

    object-fit: cover;
}

.account-menu-identity > div {
    min-width: 0;
}

.account-menu-identity strong {
    display: block;

    overflow: hidden;

    color: #edf6fc;

    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-connected {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 3px;

    color: #6fd7a7;

    font-size: 10px;
}

.account-menu-connected > span {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;

    border: 1px solid #a4ffd0;
    border-radius: 50%;

    background: #55df99;

    box-shadow:
        0 0 4px #55df99aa,
        0 0 8px #55df9944;
}

.account-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;

    width: 100%;
    min-height: 34px;
    padding: 7px 8px;

    border: 0;
    border-radius: 4px;

    background: transparent;

    color: #b8cbd8;

    font: 500 12px 'Segoe UI', Arial, sans-serif;
    line-height: 1.25;
    text-align: left;

    cursor: pointer;
}

.account-menu-item:hover,
.account-menu-item[aria-current="page"] {
    background: #183247;
    color: #f3f9fc;

    filter: none;
}

.account-menu-item-icon {
    display: block;

    width: 18px;
    height: 18px;
    flex: 0 0 18px;

    fill: none;
    stroke: #91a9b9;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-menu-item:hover .account-menu-item-icon,
.account-menu-item[aria-current="page"] .account-menu-item-icon {
    stroke: #d9edf8;
}

.account-menu-signout {
    margin: 4px 0 0;
    padding: 4px 0 0;

    border-top: 1px solid #263f4f;
}

.account-menu-signout .account-menu-item {
    color: #aabac5;
}

.account-menu-signout .account-menu-item:hover {
    background: #2a2024;
    color: #f0d9de;
}

.account-menu-signout .account-menu-item:hover .account-menu-signout-icon {
    stroke: #e3aab5;
}

/* ===== COMPACT HEADER LANGUAGE MENU ===== */

.site-header .language-menu {
    width: 104px;
}

.site-header .language-menu summary {
    gap: 7px;

    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 5px 7px;

    font-size: 11px;
    line-height: 1.2;
}

.site-header .language-options {
    width: 100%;
    min-width: 0;
}

.site-header .language-menu summary::after {
    display: inline-block;

    font-size: 12px;
    line-height: 1;

    transform-origin: center;
    transition: transform .15s ease, color .15s ease;
}

.site-header .language-menu[open] summary::after {
    color: #d7ebf7;
    transform: rotate(180deg);
}

.site-header .language-flag {
    width: 20px;
    height: 14px;
    flex: 0 0 20px;
}

.site-header .language-options {
    min-width: 100px;
    padding: 3px;
}

.site-header .language-options button {
    gap: 5px;

    min-height: 25px;
    padding: 2px 5px;

    font-size: 11px;
    line-height: 1.2;
}

.site-header .language-options .language-flag {
    width: 19px;
    height: 13px;
    flex-basis: 19px;
}

/* ===== LEADERBOARDS HERO ===== */

.leaderboards-hero {
    position: relative;
    overflow: hidden;

    min-height: 220px;
    margin: 0 0 26px;
    padding: 30px 36px;

    display: flex;
    align-items: center;

    border: 1px solid #5a91be38;
    border-top: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #06111cf5 0%,
            #071421d6 42%,
            #0818276b 100%
        ),
        url('leaderboards-hero.png') center 6% / cover no-repeat;

    box-shadow:
        inset 0 1px 0 #78b4ff0d,
        0 18px 42px #0000002e;
}

.leaderboards-hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg, #5ab4ff0d 0%, transparent 55%),
        linear-gradient(90deg, transparent 60%, #82cdff14 100%);

    pointer-events: none;
}

.leaderboards-hero__content {
    position: relative;
    z-index: 1;

    max-width: 620px;
}

.leaderboards-hero .eyebrow {
    margin: 0 0 10px;

    color: #87d1ff;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.leaderboards-hero h1 {
    margin: 0 0 10px;

    color: #fff;

    font-size: clamp(27px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.15;

    text-shadow: 0 2px 10px #0008;
}

.leaderboards-hero__text {
    max-width: 560px;
    margin: 0;

    color: #b7cee6;

    font-size: 13px;
    line-height: 1.6;
}

.leaderboard-tabs {
    margin-top: 6px;
    margin-bottom: 22px;
}

.leaderboard-filters {
    margin-bottom: 24px;
}

.leaderboard-section-heading {
    margin-top: 0;
    margin-bottom: 14px;
}

.leaderboard-section-heading h2 {
    margin: 0;
}

/* ===== ARTIFACT COLLECTION HERO ===== */

.artifacts-hero {
    position: relative;
    overflow: hidden;

    min-height: 220px;
    margin: 0 0 26px;
    padding: 30px 36px;

    display: flex;
    align-items: center;

    border: 1px solid #5a91be38;
    border-top: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #06111cf7 0%,
            #071421e8 36%,
            #081827b7 58%,
            #08182771 100%
        ),
        url('artifacts-hero.png') center center / cover no-repeat;

    box-shadow:
        inset 0 1px 0 #78b4ff0d,
        0 18px 42px #0000002e;
}

.artifacts-hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg, #5ab4ff0a 0%, transparent 58%),
        linear-gradient(90deg, transparent 58%, #82cdff0d 100%);

    pointer-events: none;
}

.artifacts-hero__content {
    position: relative;
    z-index: 1;

    max-width: 560px;
}

.artifacts-hero .eyebrow {
    margin: 0 0 10px;

    color: #87d1ff;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.artifacts-hero h1 {
    margin: 0 0 10px;

    color: #fff;

    font-size: clamp(27px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.15;

    text-shadow: 0 2px 10px #0008;
}

.artifacts-hero__text {
    max-width: 520px;
    margin: 0;

    color: #b7cee6;

    font-size: 13px;
    line-height: 1.6;
}

/* ===== HEROES & UPGRADES HERO ===== */

.heroes-hero {
    position: relative;
    overflow: hidden;

    min-height: 220px;
    margin: 0 0 26px;
    padding: 30px 36px;

    display: flex;
    align-items: center;

    border: 1px solid #5a91be38;
    border-top: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #06061cf2 0%,
            #070b2bc4 34%,
            #08103c8c 54%,
            #0a144a55 100%
        ),
        url('heroes-hero.png') center 24% / cover no-repeat;

    box-shadow:
        inset 0 1px 0 #78b4ff0d,
        0 18px 42px #0000002e;
}

.heroes-hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg, #62bfff0c 0%, transparent 58%),
        linear-gradient(90deg, #0b2a440d 0%, transparent 42%, #5ebcff14 100%);

    pointer-events: none;
}

.heroes-hero__content {
    position: relative;
    z-index: 1;

    max-width: 520px;
}

.heroes-hero .eyebrow {
    margin: 0 0 10px;

    color: #87d1ff;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.heroes-hero h1 {
    margin: 0 0 10px;

    color: #fff;

    font-size: clamp(27px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.15;

    text-shadow: 0 2px 10px #0008;
}

.heroes-hero__text {
    max-width: 480px;
    margin: 0;

    color: #b7cee6;

    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 1350px) {
    .artifact-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1250px) {
    .site-header {
            flex-wrap: wrap;
            padding-top: 12px;
            padding-bottom: 12px;
        }

        /*
         * Tablet header:
         * first row = brand | Steam account | language
         * second row = navigation
         */
        .site-header .account-menu {
            order: 1;
            margin-left: auto;
        }

        .site-header .language-picker {
            order: 2;
            margin-left: 0;
        }

        nav {
            order: 3;
            width: 100%;
            margin-left: 0;
        }

        .hero aside {
            display: none;
        }

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

@media (max-width: 1050px) {
    .platform-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .community-links {
            grid-template-columns: 1fr 1fr;
        }

        .community-links blockquote {
            grid-column: 1 / -1;

            width: fit-content;
            max-width: min(560px, 100%);
            margin-inline: auto;

            justify-content: center;
            text-align: center;
        }

        .community-links .signature-image {
            margin-inline: auto;
        }
}

@media (max-width: 950px) {
    .game-grid, .artifact-grid, .hero-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

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

        .dashboard-grid > .panel {
            min-height: 0;
        }

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

@media (max-width: 720px) {
    .support-layout, .support-benefits, .community-links {
            grid-template-columns: 1fr;
        }

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

        .support-hero {
            padding: 28px 22px;

            border-top: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .community-hero .hero-illustration {
            background-position: center;
            opacity: .7;
        }

        .community-hero .hero-copy {
            max-width: 100%;
        }

        .community-links > a > img {
            width: 110px;
        }

        .steam-button {
            font-size: 13px;
            padding: 10px 13px;
        }
}

@media (max-width: 700px) {
    .site-header {
            padding: 12px 18px;
            gap: 12px;
        }

        .site-header nav {
            margin-left: 0;
        }

    .site-header {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto auto;
            align-items: center;
            min-height: 0;
            padding: 12px 16px;
            gap: 0 10px;
        }

        .site-header .brand {
            grid-column: 1;
            grid-row: 1;
            width: auto;
            min-width: 0;
            font-size: 20px;
        }

        .site-header .brand-avatar {
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
        }

        .site-header .brand small {
            margin-top: 3px;
            font-size: 9px;
            letter-spacing: 1.7px;
        }

        /* Hamburger */
        .site-header .mobile-menu-toggle {
            grid-column: 3;
            grid-row: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 42px;
            height: 42px;
            min-width: 42px;
            min-height: 42px;
            padding: 0;
            gap: 5px;
            border: 1px solid #30485e;
            border-radius: 5px;
            background: #102131;
            box-shadow: none;
        }

        .site-header .mobile-menu-toggle:hover {
            background: #173149;
            filter: none;
        }

        .site-header .mobile-menu-toggle span {
            display: block;
            width: 20px;
            height: 2px;
            border-radius: 2px;
            background: #dbeaf5;
            transition: transform .18s ease, opacity .18s ease;
        }

        .site-header.menu-open .mobile-menu-toggle span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .site-header.menu-open .mobile-menu-toggle span:nth-child(2) {
            opacity: 0;
        }

        .site-header.menu-open .mobile-menu-toggle span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        /* Closed mobile menu */
        .site-header nav,
        .site-header .language-picker {
            display: none;
        }

        /* Navigation */
        .site-header.menu-open nav {
            grid-column: 1 / -1;
            grid-row: 2;
            order: initial;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            margin: 12px 0 0;
            overflow: visible;
            border-top: 1px solid #203949;
        }

        .site-header.menu-open nav a {
            display: block;
            flex: none;
            width: 100%;
            padding: 12px 4px;
            border-bottom: 1px solid #1b3342;
            font-size: 13px;
            white-space: nowrap;
        }

        .site-header.menu-open nav a[aria-current] {
            padding-left: 10px;
            border-left: 2px solid #3db5fa;
            border-bottom-color: #1b3342;
        }

        .site-header.menu-open {
            row-gap: 10px;
        }

        /*
         * Logged-out Steam sign-in stays visible next to the hamburger,
         * in the same slot used by the account avatar after login.
         */
        .site-header .steam-sign-in {
            grid-column: 2;
            grid-row: 1;

            display: block;
            justify-self: end;

            width: 42px;
            height: 42px;
            margin: 0;
        }

        .site-header .steam-sign-in .steam-button {
            position: relative;

            width: 42px;
            height: 42px;
            min-width: 42px;
            min-height: 42px;

            padding: 0;
            gap: 0;

            border-radius: 5px;

            box-shadow:
                inset 0 1px 0 #ffffff16,
                0 3px 12px #0050be25;
        }

        .site-header .steam-sign-in .steam-icon {
            width: 23px;
            height: 23px;
            margin: 0;
        }

        /*
         * Keep the button accessible while showing only the Steam icon
         * in the compact mobile header.
         */
        .site-header .steam-sign-in .steam-button > span:not(.steam-arrow) {
            position: absolute;

            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;

            overflow: hidden;

            clip: rect(0, 0, 0, 0);
            white-space: nowrap;

            border: 0;
        }

        .site-header .steam-sign-in .steam-arrow {
            display: none;
        }

        /*
         * Signed-in account stays visible as a small avatar button next
         * to the hamburger. Its own dropdown works independently.
         */
        .site-header .account-menu {
            grid-column: 2;
            grid-row: 1;

            display: block;
            justify-self: end;
        }

        .site-header .account-menu-trigger {
            padding: 3px;
        }

        .site-header .account-menu-trigger img {
            width: 34px;
            height: 34px;
        }

        .site-header .account-menu-chevron {
            display: none;
        }

        .site-header .account-menu-popover {
            position: fixed;
            top: 69px;
            left: auto;
            right: 16px;

            width: min(210px, calc(100vw - 32px));
        }

        /* Language picker */
        .site-header.menu-open .language-picker {
            grid-column: 1 / -1;
            grid-row: 3;
            order: initial;

            display: block;

            width: 120px;
            min-width: 0;
            margin: 2px 0 0;
        }

        /*
         * Keep the trigger and dropdown exactly the same width.
         * The old 190px dropdown extended to the left of the 138px
         * trigger on narrow screens and could be clipped by the viewport.
         */
        .site-header.menu-open .language-menu {
            width: 100%;
        }

        .site-header.menu-open .language-menu summary {
            display: flex;
            justify-content: flex-start;

            width: 100%;
            min-width: 0;
            min-height: 38px;
            padding: 8px 10px;

            border-color: #355b72;

            background: #102331;

            white-space: nowrap;

            font-size: 11px;
        }

        .site-header.menu-open .language-menu summary::after {
            margin-left: auto;
        }

        .site-header.menu-open .language-options {
            left: 0;
            right: auto;

            width: 100%;
            min-width: 0;
            max-width: none;
        }
}

@media (max-width: 600px) {
    main {
            padding: 0 16px 25px;
        }

        /*
         * Compact page intro on phones.
         * Keeps all information, but gets the collection on screen sooner.
         */
        .page-heading {
            padding: 18px 0 8px;
        }

        .page-heading .eyebrow {
            margin: 0 0 7px;
            font-size: 9px;
            line-height: 1.2;
            letter-spacing: 1.55px;
        }

        .page-heading h1 {
            margin-bottom: 7px;
            font-size: 27px;
            line-height: 1.08;
        }

        .page-heading p {
            margin-bottom: 0;
            max-width: 520px;
            font-size: 11px;
            line-height: 1.42;
        }

        /*
         * Compact two-column filter panel.
         * Search remains full width; the other controls use two columns.
         */
        .filters {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: end;
            gap: 10px 12px;

            padding: 13px;
            margin-bottom: 15px;
        }

        .filters > label:first-child {
            grid-column: 1 / -1;
        }

        .filters label {
            min-width: 0;
            gap: 4px;
            font-size: 11px;
        }

        .filters input,
        .filters select {
            width: 100%;
            min-width: 0;
            padding: 9px 10px;
            font-size: 13px;
        }

        .filters button {
            width: 100%;
            min-height: 39px;
            padding: 8px 10px;
            font-size: 12px;
        }

        .site-header {
            gap: 8px;
        }

        .brand {
            font-size: 20px;
        }

        .site-header button {
            padding: 8px 11px;
            font-size: 12px;
        }

        nav a {
            padding: 10px;
            font-size: 13px;
        }

        .hero {
            margin: 0 -16px 18px;
            padding: 30px 24px;
            min-height: 245px;
        }

        .hero h1 {
            font-size: 24px;
            letter-spacing: 2px;
            max-width: 330px;
        }

        .hero-illustration {
            left: 0;
            opacity: .35;
        }

        /*
         * My Profile: compact the identity and the three overview metrics.
         * These selectors are intentionally based on the exact account-page
         * structure, so other pages keep their existing layouts.
         */
        .page-heading + .player-identity {
            gap: 11px;

            margin: 2px 0 14px;
            padding: 9px 0 12px;

            border-bottom: 1px solid #203949;
        }

        .page-heading + .player-identity .player-avatar {
            width: 52px;
            height: 52px;
            flex: 0 0 52px;

            border-radius: 7px;
        }

        .page-heading + .player-identity h3 {
            margin: 0 0 2px;

            font-size: 15px;
            line-height: 1.2;
        }

        .page-heading + .player-identity .connected-status {
            margin: 2px 0;

            font-size: 11px;
            line-height: 1.35;
        }

        .page-heading + .player-identity a {
            font-size: 11px;
        }

        .page-heading + .player-identity + .metrics {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 9px;

            margin: 12px 0 22px;
        }

        .page-heading + .player-identity + .metrics > .panel {
            min-width: 0;
            padding: 13px;
        }

        .page-heading + .player-identity + .metrics > .panel:nth-child(3) {
            grid-column: 1 / -1;
        }

        .page-heading + .player-identity + .metrics p {
            margin-bottom: 8px;

            color: #a9bfd0;

            font-size: 11px;
            line-height: 1.3;
        }

        .page-heading + .player-identity + .metrics strong {
            font-size: 27px;
            line-height: 1;
        }

        .page-heading + .player-identity + .metrics small {
            margin-top: 7px;

            font-size: 10px;
            line-height: 1.35;
        }

        .page-heading + .player-identity + .metrics a {
            margin-top: 6px;

            font-size: 10px;
        }

        .game-grid, .artifact-grid, .metrics, .progress-grid, .upgrade-grid {
            grid-template-columns: 1fr;
        }

        /*
         * The account metrics intentionally stay two-column despite the
         * generic one-column mobile rule above.
         */
        .page-heading + .player-identity + .metrics {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

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

        .community-strip {
            margin: 20px -16px -25px;
            padding: 20px;
            grid-template-columns: 1fr;
        }

        blockquote {
            text-align: left;
        }

        .section-heading {
            flex-direction: column;
            align-items: start;
        }

        footer {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        footer span {
            display: block;
            margin: 5px 0;
        }

    .artifact-stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 5px;
            margin-top: 8px;
        }

        .artifact-stat {
            padding: 6px 8px;
        }

        .artifact-stat-label {
            font-size: 8px;
        }

        .artifact-stat-value {
            font-size: 14px;
        }

        .artifact-stat-value small {
            font-size: 9px;
        }

        .artifact-level-progress {
            height: 4px;
            margin-top: 5px;
        }

    .artifact-price {
            min-height: 16px;
            padding: 2px 4px 2px 5px;
        }

        .artifact-price-value {
            font-size: 8px;
        }

        .artifact-price-coin {
            width: 12px;
            height: 8px;
            flex-basis: 12px;
        }

    .artifact-special-badge {
            min-height: 16px;
            padding: 2px 6px;
            font-size: 7px;
        }

    .artifact-effects > h3 {
            font-size: 11px;
        }

        .artifact-effect {
            padding: 9px 10px 10px;
        }

        .artifact-effect-title {
            font-size: 12px;
        }

        .artifact-effect-text,
        .artifact-effect-upgrade-title,
        .artifact-effect-inline-upgrade {
            font-size: 11px;
        }

        .artifact-effect-part + .artifact-effect-part {
            margin-top: 10px;
        }

    .artifact-tooltip .artifact-section {
            margin-top: 12px;
        }

        .artifact-tooltip .artifact-section > h3 {
            font-size: 11px;
        }

        .artifact-section-body {
            padding: 10px;
        }

        .artifact-leveling p,
        .artifact-statistics .attributes {
            font-size: 11px;
        }

        .artifact-statistics .muted {
            font-size: 10px;
        }

    .artifact-statistics .attributes dd {
            gap: 4px;
        }

        .artifact-stat-delta {
            padding: 0 3px;
            font-size: 9px;
        }
}

@media (max-width: 390px) {
    .page-heading h1 {
        font-size: 26px;
    }

    .filters {
        gap: 9px;
        padding: 11px;
    }

    .filters input,
    .filters select {
        padding-inline: 9px;
    }
}

@media (max-width: 700px) {
    .link-game-heading {
        padding-top: 28px;
    }

    .link-game-grid {
        grid-template-columns: 1fr;
    }

    .link-game-card-art {
        min-height: 190px;
    }

    .link-game-card-content {
        padding: 24px 20px 21px;
    }

    .link-game-card h2 {
        font-size: 19px;
    }

    .link-game-notice {
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .updates-heading {
        margin-top: 28px;
    }

    .update-meta {
        padding: 16px 17px 0;
    }

    .update > h2 {
        margin: 11px 17px 0;
        font-size: 19px;
    }

    .update-text {
        padding: 16px 17px 18px;
    }
}

@media (max-width: 600px) {
    .artifact-tier-group {
        margin: 22px 0 28px;
    }

    .artifact-tier-group .artifact-grid {
        margin-top: 10px;
    }

    .artifact-tier-heading {
        gap: 8px;
        margin-bottom: 20px;
    }

    .artifact-tier-emblem {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
    }

    .artifact-tier-emblem > span {
        font-size: 11px;
    }

    .artifact-tier-title {
        font-size: 16px;
        letter-spacing: .09em;
    }

    .artifact-tier-count {
        gap: 4px;
        padding: 3px 6px;
        font-size: 8px;
    }

    .artifact-tier-count strong {
        font-size: 10px;
    }

    .artifact-tier-line {
        min-width: 14px;
    }

    /*
     * On mobile the combined Your Level / Total XP panel should use
     * the whole card width. The generic .artifact-stats mobile rule
     * above switches to two columns, so override it specifically here.
     */
    .artifact-stats.artifact-stats-main,
    .artifact-stats.artifact-stats-special {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .artifact-stat-progress,
    .artifact-stat-special {
        width: 100%;
    }

    /*
     * Keep cards full width on mobile, but make the content more compact.
     */
    .artifact-card {
        width: 100%;
        padding: 16px;
    }

    /*
     * Reduce the large empty area around the collapsed details link.
     */
    .artifact-tooltip {
        margin-top: 9px;
    }

    .artifact-tooltip summary {
        padding: 5px 0 1px;
    }
}


@media (max-width: 1100px) {
    .leaderboards-hero {
        min-height: 200px;
        padding: 28px;

        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        background-position: center top;
    }

    .leaderboards-hero h1 {
        font-size: 34px;
    }

    .leaderboards-hero__text {
        font-size: 13px;
    }
}

@media (max-width: 800px) {
    .leaderboards-hero {
        min-height: 180px;
        padding: 24px 22px;

        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;

        background-position: 58% 6%;
    }

    .leaderboards-hero h1 {
        font-size: 31px;
    }

    .leaderboards-hero__text {
        font-size: 13px;
        line-height: 1.55;
    }
}

@media (max-width: 600px) {
    .leaderboards-hero {
        min-height: 0;
        margin-bottom: 18px;
        padding: 22px 18px;

        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        background-position: 68% 7%;
    }

    .leaderboards-hero .eyebrow {
        margin-bottom: 8px;
        font-size: 9px;
        letter-spacing: 1.6px;
    }

    .leaderboards-hero h1 {
        margin-bottom: 8px;
        font-size: 28px;
    }

    .leaderboards-hero__text {
        font-size: 12px;
    }

    .leaderboard-tabs {
        gap: 14px;
        margin-bottom: 18px;
    }

    .leaderboard-tabs a {
        padding: 10px 0;
    }
}


@media (max-width: 1100px) {
    .artifacts-hero {
        min-height: 200px;
        padding: 28px;

        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        background-position: 62% center;
    }

    .artifacts-hero h1 {
        font-size: 34px;
    }
}

@media (max-width: 800px) {
    .artifacts-hero {
        min-height: 180px;
        padding: 24px 22px;

        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;

        background-position: 66% center;
    }

    .artifacts-hero h1 {
        font-size: 31px;
    }

    .artifacts-hero__text {
        font-size: 13px;
        line-height: 1.55;
    }
}

@media (max-width: 600px) {
    .artifacts-hero {
        min-height: 155px;
        margin-bottom: 18px;
        padding: 20px 18px;

        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        /*
         * Keep the desktop gradient on phones.
         * The previous mobile override was much darker than desktop.
         */
        background-position: 70% center;
    }

    .artifacts-hero__content {
        max-width: 82%;
    }

    .artifacts-hero .eyebrow {
        margin-bottom: 8px;
        font-size: 9px;
        letter-spacing: 1.6px;
    }

    .artifacts-hero h1 {
        margin-bottom: 8px;
        font-size: 28px;
    }

    .artifacts-hero__text {
        font-size: 12px;
        line-height: 1.45;
    }
}


@media (max-width: 1100px) {
    .heroes-hero {
        min-height: 200px;
        padding: 28px;

        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        background-position: 58% 22%;
    }

    .heroes-hero h1 {
        font-size: 34px;
    }
}

@media (max-width: 800px) {
    .heroes-hero {
        min-height: 180px;
        padding: 24px 22px;

        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;

        background-position: 61% 20%;
    }

    .heroes-hero h1 {
        font-size: 31px;
    }

    .heroes-hero__text {
        font-size: 13px;
        line-height: 1.55;
    }
}

@media (max-width: 600px) {
    .heroes-hero {
        min-height: 155px;
        margin-bottom: 18px;
        padding: 20px 18px;

        border-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        /*
         * Keep the desktop gradient on phones.
         * Only adjust the crop/position for the narrower viewport.
         */
        background-position: 63% 18%;
    }

    .heroes-hero__content {
        max-width: 82%;
    }

    .heroes-hero .eyebrow {
        margin-bottom: 8px;
        font-size: 9px;
        letter-spacing: 1.6px;
    }

    .heroes-hero h1 {
        margin-bottom: 8px;
        font-size: 28px;
    }

    .heroes-hero__text {
        font-size: 12px;
        line-height: 1.45;
    }
}

/* ===== HERO UPGRADE DETAIL PAGE - RESPONSIVE ===== */

@media (max-width: 800px) {
    .hero-upgrades-page {
        margin-top: 18px;
    }

    .hero-upgrades-profile {
        padding: 15px 16px 17px;
    }

    .hero-upgrades-profile-main {
        gap: 15px;
    }

    .hero-upgrades-avatar {
        width: 82px;
        height: 82px;
        flex-basis: 82px;
    }

    .hero-upgrades-profile-copy h2 {
        font-size: 26px;
    }

    .ability-group-heading {
        min-height: 58px;
        padding: 7px 11px;
        gap: 10px;
    }

    .ability-group-heading .catalog-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .ability-group-heading h2 {
        font-size: 16px;
    }

    .hero-upgrades-list .upgrade-card {
        grid-template-columns: 53px minmax(0, 1fr);
        gap: 11px;
        padding: 12px 12px 12px 7px;
    }

    .upgrade-card-icon-frame {
        width: 53px;
        height: 61px;
    }

    .upgrade-card-icon {
        width: 53px;
        height: 61px;
        transform: translateY(5px);
    }
}

@media (max-width: 560px) {
    .hero-upgrades-page {
        margin-top: 14px;
    }

    .hero-upgrades-profile {
        margin-bottom: 12px;
        padding: 13px 14px 15px;
        border-radius: 7px;
    }

    .hero-upgrades-back {
        margin-bottom: 11px;
        font-size: 11px;
    }

    .hero-upgrades-profile-main {
        gap: 12px;
    }

    .hero-upgrades-avatar {
        width: 68px;
        height: 68px;
        flex-basis: 68px;
    }

    .hero-upgrades-profile-copy .eyebrow {
        margin-bottom: 5px;
        font-size: 9px;
    }

    .hero-upgrades-profile-copy h2 {
        margin-bottom: 4px;
        font-size: 23px;
    }

    .hero-upgrades-total {
        font-size: 12px;
    }

    .hero-upgrades-list {
        gap: 10px;
    }

    .ability-group {
        border-radius: 7px;
    }

    .ability-group-heading {
        min-height: 54px;
        padding: 7px 9px;
        gap: 9px;
    }

    .ability-group-heading .catalog-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .ability-group-heading h2 {
        font-size: 15px;
    }

    .ability-group-count {
        min-height: 16px;
        padding: 2px 5px;
        font-size: 8px;
    }

    .ability-group-body {
        padding: 6px;
    }

    .hero-upgrades-list .upgrade-card {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 10px 11px 7px;
    }

    .upgrade-card-icon-frame {
        width: 46px;
        height: 54px;
    }

    .upgrade-card-icon {
        width: 46px;
        height: 54px;
        transform: translateY(4px);
    }

    .hero-upgrades-list .upgrade-card h3 {
        margin-bottom: 6px;
        font-size: 15px;
    }

    .hero-upgrades-list .upgrade-description {
        font-size: 12px;
        line-height: 1.5;
    }

    .upgrade-requirement {
        margin-top: 8px;
        padding: 4px 7px;
        font-size: 10px;
    }
}

/* ===== HERO BROWSER - RESPONSIVE ===== */

@media (max-width: 1250px) {
    .hero-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 950px) {
    .hero-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .hero-browser {
        margin-top: 16px;
    }

    .hero-browser-toolbar {
        margin-bottom: 13px;
        padding: 14px;
    }

    .hero-browser-toolbar-heading {
        align-items: center;
        margin-bottom: 11px;
    }

    .hero-browser-toolbar-heading h2 {
        font-size: 16px;
    }

    .hero-browser-count {
        padding: 4px 6px;
        font-size: 8px;
    }

    .hero-search-form {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
    }

    .hero-search-field input {
        height: 38px;
        padding-left: 35px;
        font-size: 12px;
    }

    .hero-search-form button {
        min-height: 38px;
        padding-inline: 13px;
        font-size: 11px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .hero-card {
        grid-template-columns: 56px minmax(0, 1fr) 16px;

        min-height: 74px;
        padding: 8px 10px;
        gap: 11px;
    }

    .hero-card-portrait {
        width: 56px;
        height: 56px;
    }

    .hero-card-copy {
        gap: 6px;
    }

    .hero-card-name {
        font-size: 14px;
    }

    .hero-card-upgrades {
        font-size: 8px;
    }

    .hero-card-chevron {
        font-size: 21px;
    }
}

/* ===== COMMUNITY QUOTE - MOBILE ===== */

@media (max-width: 720px) {
    .community-quote {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 2px 0;

        text-align: center;

        font-size: 11px;
        line-height: 1.4;
    }
}

.artifacts-sign-in-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 24px 0 12px;
    padding: 18px 20px;
    border: 1px solid #2d709c;
    border-left: 4px solid #58b7f3;
    border-radius: 6px;
    background: linear-gradient(110deg, #16364a, #102635);
    box-shadow: 0 8px 24px #0003;
}

.artifacts-sign-in-notice__copy h2 {
    margin: 0 0 5px;
    color: #eef7ff;
    font-size: 18px;
}

.artifacts-sign-in-notice__copy p {
    margin: 0;
    color: #b7d1e2;
    font-size: 13px;
    line-height: 1.5;
}

.artifacts-sign-in-notice .steam-sign-in {
    flex: 0 0 auto;
    margin: 0;
}

.artifacts-sign-in-notice .steam-button {
    white-space: nowrap;
}

@media (max-width: 700px) {
    .artifacts-sign-in-notice {
        flex-direction: column;
        align-items: stretch;
    }

    .artifacts-sign-in-notice .steam-button {
        width: 100%;
    }
}