/* EVOLUTION PROJECT — UX polish layer, loaded last.
   Roles, tabs, mobile chrome and backgrounds behave the same on every page. */

/* Role tags: one size everywhere, always next to the nickname. */
.badge.role-tag {
    font-size: 10.5px;
    line-height: 1.35;
    padding: 2px 7px;
    border-radius: 5px;
    font-weight: 600;
    letter-spacing: .1px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-badges .badge.role-tag { font-size: 12px; padding: 3px 9px; }
.visitor-badge .badge.role-tag,
.home-visitors .visitor-badge .badge.role-tag,
.message-meta .badge.role-tag,
.topic-author-role .badge.role-tag { font-size: 10px; padding: 2px 6px; }
.name-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; max-width: 100%; }
.name-line > strong { display: inline; min-width: 0; overflow-wrap: anywhere; }
.rank-player .name-line { margin-bottom: 1px; }
.topic-row small .role-tag { margin-left: 2px; }
.forum-topic-meta .role-tag { pointer-events: none; }
.clan-members .identity .name-line { flex: 1; }

/* Hero without the faint watermark logo. */
.profile-hero-mark { display: none; }

/* Account: identity and reward case side by side; tabs right below. */
.profile-top { display: grid; gap: 18px; margin-bottom: 8px; }
.profile-top.has-case { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); align-items: stretch; }
.profile-top > .account-heading { margin: 0; flex-wrap: wrap; align-content: center; }
.profile-top.has-case > .account-heading > .text-link { width: 100%; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.account-heading .profile-badges:empty { display: none; }

/* Tabs: a segmented control that never wraps; scrolls sideways on narrow screens. */
.tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin: 24px 0 20px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #0b1317b3;
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: 9px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.tabs a:hover { color: var(--text); background: #ffffff07; }
.tabs a.active, .tabs a[aria-current=page] { color: var(--accent); background: #bbf36b14; box-shadow: inset 0 0 0 1px #bbf36b30; }
.tabs .icon { width: 17px; height: 17px; }

.store-categories {
    gap: 4px;
    width: max-content;
    max-width: 100%;
    margin-top: 0;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #0b1317b3;
    overflow-x: auto;
    scrollbar-width: none;
}
.store-categories > a { min-height: 40px; padding: 8px 16px; margin: 0; border: 0; border-radius: 9px; font-weight: 600; white-space: nowrap; }
.store-categories > a:hover { color: var(--text); background: #ffffff07; }
.store-categories > a[aria-current=page] { color: var(--accent); background: #bbf36b14; box-shadow: inset 0 0 0 1px #bbf36b30; }
.store-mode-label + .store-modes { margin-bottom: 16px; }

.admin-tabs, .admin-subtabs, .player-tabs { scrollbar-width: none; flex-wrap: nowrap; }
.admin-tabs::-webkit-scrollbar, .admin-subtabs::-webkit-scrollbar, .player-tabs::-webkit-scrollbar { display: none; }
.admin-tabs a, .admin-subtabs a, .player-tabs a { flex: none; white-space: nowrap; }

/* Calmer table headers: no grey strip inside panels. */
th { background: transparent; border-bottom-color: var(--line-strong); }

/* Clan roster */
.clan-members .table-scroll { border: 1px solid var(--line); border-radius: 14px; background: var(--surface-panel); }
.clan-members th:first-child, .clan-members td:first-child { padding-left: 20px; }
.clan-members th:last-child, .clan-members td:last-child { padding-right: 20px; }

@media (max-width: 1100px) {
    .utility-bar { background: #0e171cf2; }
}
@media (max-width: 900px) {
    .profile-top.has-case { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .tabs, .store-categories { width: 100%; margin: 18px 0 16px; }
    .tabs a, .store-categories > a { flex: 1 0 auto; padding: 8px 12px; font-size: 13px; }
    .store-categories > a > .icon { display: none; }
    .profile-top > .account-heading { padding: 18px; }

    /* Roster table becomes a list: name with roles, then clan role and join date. */
    .clan-members .table-scroll { overflow: visible; }
    .clan-members table { min-width: 0 !important; }
    .clan-members thead { display: none; }
    .clan-members tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
    .clan-members tbody tr:last-child { border-bottom: 0; }
    .clan-members td { padding: 0 !important; border: 0; white-space: normal; }
    .clan-members td:first-child { grid-row: span 2; }
    .clan-members td:last-child { font-size: 12px; color: var(--muted); text-align: right; }
    .clan-members td:nth-child(2) { text-align: right; }

    /* Store cards: image beside the copy so several products fit on one screen. */
    .offer-grid { gap: 14px; }
    .offer-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
    .offer-art { height: auto; min-height: 150px; border-bottom: 0; border-right: 1px solid #ffffff09; }
    .offer-art img { padding: 10px 6px 0; }
    .offer-art::after { display: none; }
    .offer-content { padding: 16px; }
    .offer-content h2 { font-size: 19px; margin-bottom: 6px; }
    .offer-content p { font-size: 12.5px; line-height: 1.55; margin-bottom: 12px; }
    .offer-grid .price { font-size: 16px; margin-bottom: 12px; }
    .offer-content .price > small { margin-left: 0; width: 100%; }
    .offer-content > .button { min-height: 42px; }
}

/* Level plates: CSS stand-in for the tier sprites (images/levels/tier-N.png), same colours per range. */
.level-badge {
    --lv: #9aa7ad;
    --lv-bg: #1a2226;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 19px;
    min-width: 34px;
    padding: 0 7px 0 5px;
    border: 1px solid color-mix(in srgb, var(--lv) 55%, transparent);
    border-radius: 4px;
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
    background: linear-gradient(90deg, color-mix(in srgb, var(--lv) 30%, var(--lv-bg)) 0 15px, var(--lv-bg) 15px);
    color: #f2f6f3;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: none;
    vertical-align: middle;
}
.level-badge::before { content: ""; width: 7px; height: 7px; margin-right: 3px; border-top: 2px solid var(--lv); border-left: 2px solid var(--lv); transform: translateY(2px) rotate(45deg); }
.level-badge.tier-2 { --lv: #bbf36b; }
.level-badge.tier-3 { --lv: #5dcaa5; }
.level-badge.tier-4 { --lv: #9d8cf5; }
.level-badge.tier-5 { --lv: #e0a93b; }
.level-badge.tier-6 { --lv: #f0624a; box-shadow: 0 0 10px #f0624a40; }
.level-line { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.level-line .level-badge { height: 22px; font-size: 12.5px; min-width: 40px; }
.account-heading .xp-label { margin: 6px 0 8px; width: min(260px, 100%); }
.account-heading progress { width: min(260px, 100%); }

/* Ranking: board tabs, podium, compact rows with icon stats. */
.ranking-heading { margin-bottom: 0; }
.ranking-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 16px; padding: 0; margin: 0 0 20px; list-style: none; }
.podium-place { min-width: 0; }
.podium-place.podium-1 { order: 2; }
.podium-place.podium-2 { order: 1; }
.podium-place.podium-3 { order: 3; }
.podium-place > a {
    --podium: #b5c7d2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 16px 18px;
    border: 1px solid var(--line);
    border-top: 3px solid var(--podium);
    border-radius: 16px;
    background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--podium) 16%, transparent), transparent 70%), var(--surface-panel);
    text-align: center;
    transition: transform .2s var(--ease), border-color .2s;
    animation: podium-in .5s var(--ease) both;
}
.podium-1 > a { --podium: #dcc387; padding-top: 30px; padding-bottom: 26px; animation-delay: .05s; }
.podium-2 > a { animation-delay: .15s; }
.podium-3 > a { --podium: #c5a58c; animation-delay: .25s; }
.podium-place > a:hover { transform: translateY(-4px); color: inherit; border-color: color-mix(in srgb, var(--podium) 50%, transparent); }
.podium-rank { position: relative; display: grid; place-items: center; width: 44px; height: 36px; color: var(--podium); font-weight: 800; font-size: 16px; }
.podium-rank .rank-wreath { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .8; }
.podium-avatar .steam-avatar { --avatar-size: 64px; }
.podium-1 .podium-avatar .steam-avatar { --avatar-size: 80px; }
.podium-name strong { font-size: 17px; overflow-wrap: anywhere; }
.podium-1 .podium-name strong { font-size: 20px; }
.podium-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 19px; }
.podium-value { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--podium); }
.podium-value strong { font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text); }
.podium-1 .podium-value strong { font-size: 32px; }
.podium-value .icon { width: 22px; height: 22px; }
.podium-place small { color: var(--muted); font-size: 12px; margin-top: -6px; }
.ranking-list { list-style: none; padding: 0; margin: 0; }
.ranking-panel { padding: 4px 20px; }
.ranking-list .ranking-row { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--line); border-radius: 0; }
.ranking-list li:last-child .ranking-row { border-bottom: 0; }
.ranking-list .rank-number { width: 30px; flex: none; color: var(--muted); font-weight: 650; font-variant-numeric: tabular-nums; text-align: center; }
.ranking-list .steam-avatar { --avatar-size: 38px; }
.rank-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; color: var(--subtle); font-size: 12px; }
.rank-stats > span { display: inline-flex; align-items: center; gap: 4px; }
.rank-stats .icon, .home-rank-identity small .icon { width: 14px; height: 14px; }
.rank-stats .icon:has(use[href$="#biohazard"]), .home-rank-identity small .icon:has(use[href$="#biohazard"]) { width: 16px; height: 16px; color: #b3c699; }
.home-rank-identity small { display: inline-flex; align-items: center; gap: 4px; }
.rank-value { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--accent); white-space: nowrap; }
.rank-value strong { color: var(--text); font-size: 17px; font-variant-numeric: tabular-nums; }
.rank-value .icon { width: 18px; height: 18px; }
.home-rank-score { display: inline-flex; align-items: center; gap: 6px; }
.home-rank-score .icon { width: 16px; height: 16px; color: var(--accent); }
.home-ranking-leader .home-rank-score .icon { width: 30px; height: 30px; }
@keyframes podium-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
    .ranking-podium { gap: 8px; }
    .podium-place > a { padding: 16px 6px 12px; gap: 6px; border-radius: 12px; }
    .podium-1 > a { padding-top: 22px; }
    .podium-avatar .steam-avatar { --avatar-size: 44px; }
    .podium-1 .podium-avatar .steam-avatar { --avatar-size: 54px; }
    .podium-name strong, .podium-1 .podium-name strong { font-size: 13px; }
    .podium-tags .role-tag { display: none; }
    .podium-value strong { font-size: 18px; }
    .podium-1 .podium-value strong { font-size: 22px; }
    .podium-value .icon { width: 16px; height: 16px; }
    .podium-place small { font-size: 10.5px; }
    .ranking-panel { padding: 2px 12px; }
    .ranking-list .ranking-row { gap: 10px; padding: 11px 0; }
    .ranking-list .rank-number { width: 22px; font-size: 12px; }
    .ranking-list .steam-avatar { --avatar-size: 32px; }
    .rank-stats { gap: 2px 10px; font-size: 11px; }
    .rank-value strong { font-size: 15px; }
    .rank-value .icon { display: none; }
}

/* Inventory: sections of cards; temporary items show a countdown and a draining meter. */
.inventory { display: grid; gap: 4px; }
.inventory-section > .section-heading { justify-content: flex-start; gap: 10px; }
.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.inventory-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    overflow: hidden;
    transition: transform .2s var(--ease), border-color .2s;
}
.inventory-card:hover { transform: translateY(-3px); border-color: #bbf36b33; }
.inventory-art { height: 150px; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(ellipse at 50% 100%, #aec78818, transparent 70%); border-bottom: 1px solid #ffffff08; }
.inventory-art img { height: 100%; width: 100%; object-fit: contain; object-position: center bottom; padding: 12px 12px 0; }
.inventory-copy { display: grid; gap: 6px; padding: 14px 16px 16px; }
.inventory-copy h3 { margin: 0; font-size: 17px; }
.inventory-copy p { margin: 0; color: var(--muted); font-size: 12px; }
.inventory-expiry { display: inline-flex; align-items: center; gap: 6px; color: var(--accent) !important; font-size: 13px !important; font-weight: 650; }
.inventory-expiry .icon { width: 15px; height: 15px; }
.inventory-expiry.is-forever { color: #c9d3d6 !important; font-weight: 500; }
.inventory-meter { height: 4px; }
.inventory-until { font-size: 11px !important; color: var(--subtle) !important; }
.is-temporary { border-color: #bbf36b26; }
.is-urgent { border-color: #edc57c66; }
.is-urgent .inventory-expiry { color: var(--warning) !important; }
.is-urgent .inventory-meter::-webkit-progress-value { background: var(--warning); }
.is-urgent .inventory-meter::-moz-progress-bar { background: var(--warning); }
.is-urgent::after { content: "Скоро закончится"; position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 6px; background: #2b2412e6; color: var(--warning); font-size: 11px; font-weight: 650; }
@media (max-width: 640px) {
    .inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .inventory-art { height: 112px; }
    .inventory-copy { padding: 10px 12px 12px; }
    .inventory-copy h3 { font-size: 15px; }
}

/* Store card: one status, price line without repeats. */
.offer-art .offer-discount { left: auto; right: 14px; background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 750; }
.offer-pricing { display: grid; gap: 6px; }
.offer-pricing[hidden] { display: none !important; }
.offer-content .price { margin: 0; }
.offer-content .price > span { font-size: 20px; }
.offer-pricing .offer-discount-until { margin: 0; font-size: 12px; color: var(--warning); }
.offer-content > .offer-owned { margin-top: auto; color: var(--muted); border-color: var(--line); background: transparent; box-shadow: none; }
.offer-content > .offer-owned .icon { color: var(--accent); }
.offer-content > .offer-owned:hover { color: var(--text); border-color: var(--line-strong); background: #ffffff06; }
.offer-content .offer-description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Wallet: one compact row per operation, typed icon, IDs only inside details. */
.wallet-ledger { max-width: 860px; padding: 6px 22px; }
.wallet-operation { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 14px 0; }
.wallet-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #ffffff06; border: 1px solid var(--line); color: var(--muted); }
.wallet-icon .icon { width: 19px; height: 19px; }
.kind-purchase .wallet-icon { color: #a7c8d6; background: #a7c8d60f; }
.kind-case .wallet-icon, .kind-season .wallet-icon, .kind-streak .wallet-icon { color: var(--accent); background: #bbf36b10; border-color: #bbf36b30; }
.kind-admin .wallet-icon { color: #c4b3e9; background: #b993ef0f; }
.kind-import .wallet-icon, .kind-start .wallet-icon { color: #d2c39e; background: #d2c39e0f; }
.wallet-copy { min-width: 0; display: grid; gap: 2px; padding-top: 1px; }
.wallet-copy > strong { font-size: 15px; }
.wallet-copy > small { color: var(--subtle); font-size: 12px; }
.wallet-copy details { margin-top: 4px; font-size: 12px; color: var(--subtle); }
.wallet-copy summary { width: max-content; min-height: 0; padding: 2px 0; cursor: pointer; color: var(--muted); }
.wallet-copy details p { margin: 6px 0 0; }
.wallet-operation .amount { padding-top: 8px; font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wallet-operation.is-income .amount { color: var(--accent); }
.wallet-operation.is-expense .amount { color: #e9eef0; }
@media (max-width: 640px) {
    .wallet-ledger { padding: 4px 14px; }
    .wallet-operation { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; }
    .wallet-icon { width: 34px; height: 34px; border-radius: 9px; }
    .wallet-copy > strong { font-size: 14px; }
    .wallet-operation .amount { font-size: 16px; padding-top: 6px; }
}

/* Forum lists: the section is coloured text with a dot, only the author's role stays a tag. */
.forum-topic-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.forum-topic-meta > a.badge:first-child { padding: 0; border: 0; background: none; font-size: 12px; font-weight: 650; gap: 6px; }
.forum-topic-meta > a.badge:first-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.forum-topic-meta > a.badge.neutral:first-child { color: var(--muted); }
.forum-topic-meta > .forum-topic-author { color: #d7dfe2; font-weight: 600; }
.forum-topic-meta > time { color: var(--subtle); }
.forum-topics tbody tr { transition: background-color .16s; }
.forum-topics tbody tr:hover { background: #bbf36b05; }
.topic-row small { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 6px; }
@media (max-width: 640px) {
    .tabs.ranking-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
}
.inventory-section > .section-heading { align-items: center; }
.inventory-section > .section-heading > .store-category-count { align-self: center; }

/* Profile heroes: game art behind the identity, fading into the panel. */
.public-profile-hero, .profile-top > .account-heading {
    background:
        linear-gradient(90deg, #111a1ef7 0%, #111a1ee6 42%, #111a1e8c 70%, #111a1e40 100%),
        linear-gradient(0deg, #111a1ecc, transparent 60%),
        url('/images/profile-hero-v1.webp') 75% 35% / cover no-repeat;
    border-color: #ffffff14;
}
.public-profile-hero { min-height: 190px; display: flex; align-items: center; }
.public-profile-hero .profile-heading > div { width: min(420px, 100%); }
.avatar-large .steam-avatar { box-shadow: 0 8px 26px #0008; }

/* Public stats: four equal cards, no orphan row. */
.public-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.public-stats article:last-child { grid-column: auto; }
@media (max-width: 1250px) { .public-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Motion details: scroll reveal (polish.js), button sheen, glowing top tiers. */
.will-reveal { opacity: 0; transform: translateY(14px); }
.is-revealed { animation: reveal-in .45s var(--ease) var(--reveal-delay, 0ms) both; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.button { overflow: hidden; isolation: isolate; }
.button::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, #ffffff66 50%, transparent 65%); transform: translateX(-120%); transition: transform .6s var(--ease); pointer-events: none; }
.button:hover::after { transform: translateX(120%); }
.level-badge.tier-5 { background-image: linear-gradient(90deg, color-mix(in srgb, var(--lv) 30%, var(--lv-bg)) 0 15px, var(--lv-bg) 15px), linear-gradient(105deg, transparent 40%, #ffe9b322 50%, transparent 60%); background-size: auto, 300% 100%; animation: level-sheen 4s linear infinite; }
.level-badge.tier-6 { animation: level-ember 2.4s ease-in-out infinite; }
@keyframes level-sheen { from { background-position: 0 0, 150% 0; } to { background-position: 0 0, -150% 0; } }
@keyframes level-ember { 0%, 100% { box-shadow: 0 0 6px #f0624a33; } 50% { box-shadow: 0 0 14px #f0624a80; } }
.offer-card:hover .offer-art img, .inventory-card:hover .inventory-art img { filter: drop-shadow(0 0 18px #bbf36b26); }
.section-heading > h2::after { content: none; }
@media (prefers-reduced-motion: reduce) {
    .will-reveal { opacity: 1; transform: none; }
    .is-revealed, .level-badge.tier-5, .level-badge.tier-6, .podium-place > a { animation: none; }
    .button::after { display: none; }
}
.visitor-badge { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.visitor-badge .level-badge { height: 17px; font-size: 10px; min-width: 30px; }
.profile-top > .account-heading { background-position: 0 0, 0 0, 95% 30%; background-size: auto, auto, auto 140%; }
.topic-author-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }

/* Prices: big white figure with a lime coin, old price struck through in red, sale chip impossible to miss. */
:root { --sale: #ff6b4a; }
.offer-art .offer-discount, .purchase-art .offer-discount {
    top: 12px; right: 12px; left: auto;
    padding: 5px 10px; border: 0; border-radius: 8px;
    background: var(--sale); color: #fff;
    font-size: 15px; font-weight: 800; letter-spacing: -.2px;
    box-shadow: 0 6px 18px #ff6b4a40;
}
.offer-card:has(.offer-discount) { border-color: #ff6b4a40; }
.offer-card:has(.offer-discount):hover { border-color: #ff6b4a80; box-shadow: 0 14px 36px #ff6b4a1a; }
.offer-pricing { margin-top: auto; padding: 12px 14px; border-radius: 12px; background: #0b1317b3; border: 1px solid var(--line); }
.offer-content .price { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.offer-content .price > .icon { width: 22px; height: 22px; color: var(--accent); }
.offer-content .price > span { color: #fff; font-size: 23px; font-weight: 800; letter-spacing: -.4px; }
.offer-content .price > s, .store-dialog .purchase-price s { color: #c98f84; font-size: 14px; font-weight: 500; text-decoration-color: var(--sale); text-decoration-thickness: 2px; }
.offer-content .price > small { margin-left: auto; color: var(--muted); font-size: 12px; }
.offer-pricing .offer-discount-until, .store-dialog .offer-discount-until { display: flex; align-items: center; gap: 8px; margin: 0; color: #ffb29f; font-size: 12.5px; font-weight: 600; }
.offer-content > .button { margin-top: 12px; background: var(--accent); color: var(--accent-ink); border: 0; box-shadow: 0 3px 0 #0002; }
.offer-content > .button:hover { background: #d0ff92; }
.offer-content { gap: 0; }
.offer-content > .offer-description { margin-bottom: 14px; }

/* Purchase dialog: art + facts, then a clear receipt and one full-width action. */
.store-dialog { width: min(720px, calc(100% - 24px)); }
.store-dialog .dialog-header { align-items: flex-start; }
.purchase-title .eyebrow { margin-bottom: 4px; color: var(--muted); letter-spacing: .6px; }
.purchase-title h2 { margin: 0; }
.store-dialog .purchase-details { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.store-dialog .purchase-art > img { height: 250px; border-radius: 14px; background: radial-gradient(ellipse at 50% 100%, #aec78822, transparent 70%), #0d1518; border-color: #ffffff10; }
.purchase-info { display: grid; gap: 12px; min-width: 0; }
.purchase-info > p { margin: 0; }
.purchase-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.purchase-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: #ffffff05; color: #d3dcdf; font-size: 12.5px; font-weight: 600; }
.purchase-chips .icon { width: 15px; height: 15px; color: var(--accent); }
.store-dialog .purchase-total { padding: 18px; border: 1px solid var(--line); border-top-color: var(--line); border-radius: 14px; background: #0b1317cc; }
.store-dialog .purchase-total h3 { margin: 0 0 6px; font-size: 13px; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.store-dialog .purchase-total .list-row { padding: 10px 0; }
.store-dialog .purchase-cost .purchase-price { align-items: center; }
.store-dialog .purchase-cost strong { color: #fff; font-size: 22px; font-weight: 800; }
.purchase-after strong { color: var(--accent); }
.offer-sale-chip { padding: 2px 7px; border-radius: 6px; background: var(--sale); color: #fff; font-size: 11.5px; font-weight: 800; }
.purchase-shortfall { margin: 8px 0 0; }
.store-dialog .purchase-total .inline-actions { margin-top: 14px; }
.store-dialog .purchase-total .inline-actions > .button { flex: 1; min-height: 48px; font-size: 15px; }
@media (max-width: 640px) {
    .store-dialog .purchase-details { grid-template-columns: 1fr; gap: 14px; }
    .store-dialog .purchase-art > img { height: 170px; }
    .offer-content .price > span { font-size: 19px; }
    .offer-pricing { padding: 10px 12px; }
    .offer-content .price > small { margin-left: 0; width: 100%; }
    .offer-art .offer-discount { font-size: 13px; padding: 4px 8px; top: 8px; right: 8px; }
    .store-dialog .purchase-total .inline-actions { flex-direction: column; align-items: stretch; }
}

/* Class facts as tiles, skills as cards with parameter chips. */
.store-dialog .content-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 2px 0 0; }
.store-dialog .content-facts > div { display: grid; gap: 2px; margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #ffffff04; }
.store-dialog .content-facts dt { font-size: 11.5px; color: var(--muted); }
.store-dialog .content-facts dd { font-size: 15px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.store-dialog .content-facts dd::before { content: none; }
.store-dialog .content-skills { margin-top: 4px; padding-top: 14px; display: grid; gap: 10px; }
.store-dialog .content-skills h3 { margin: 0; font-size: 13px; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.store-dialog .content-skill { margin: 0; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #ffffff04; align-items: start; }
.store-dialog .content-skill > img { width: 48px; height: 48px; padding: 4px; border-radius: 10px; background: #0d1518; border: 1px solid #ffffff10; }
.store-dialog .content-skill h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 4px; font-size: 15px; }
.skill-kind { padding: 2px 8px; border-radius: 6px; background: #bbf36b10; color: #cfe6b2; font-size: 11px; font-weight: 600; }
.store-dialog .content-skill .content-description { margin: 0 0 8px; color: #c3ccd0; font-size: 13px; }
.skill-facts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.skill-facts li { padding: 3px 8px; border-radius: 6px; background: #0b1317; border: 1px solid var(--line); color: #dfe6e8; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.store-dialog { max-height: calc(100dvh - 40px); overflow-y: auto; scrollbar-width: thin; }
.store-dialog .purchase-total > .purchase-price strong { color: #fff; font-size: 24px; font-weight: 800; }
.store-dialog .purchase-total > .purchase-price { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.store-dialog .button:disabled { background: #273035; color: var(--muted); box-shadow: none; opacity: 1; }
.store-dialog .button:disabled::after { display: none; }
.offer-pricing .offer-discount-until { display: block; }
@media (max-width: 640px) {
    .offer-card { grid-template-columns: 104px minmax(0, 1fr); }
    .offer-art { align-items: center; }
    .offer-art img { padding: 8px 4px; }
    .offer-content .price > .icon { display: none; }
    .offer-content .price > span { font-size: 18px; }
    .offer-content .price > s { font-size: 12.5px; }
    .offer-content > .offer-description { -webkit-line-clamp: 2; }
}
/* Sale chip lives on the art on wide screens and inside the price block on phones. */
.offer-pricing .offer-sale-chip { display: none; margin-right: 8px; }
@media (max-width: 640px) {
    .offer-art .offer-discount { display: none; }
    .offer-pricing .offer-sale-chip { display: inline-block; vertical-align: 1px; }
    .offer-art { display: grid; place-items: center; min-height: 0; }
    .offer-art img { height: auto; max-height: 160px; width: 100%; object-position: center; padding: 10px 6px; }
}

/* Level plates: Codex sprites (192x72, emblem in the left 72px), the number is HTML text over the right part. */
.level-badge {
    --h: 20px;
    justify-content: center;
    width: calc(var(--h) * 8 / 3);
    min-width: 0;
    height: var(--h);
    padding: 0 0 0 calc(var(--h) * 8 / 3 * .4);
    border: 0;
    border-radius: 0;
    clip-path: none;
    background: url('/images/levels/tier-1.png') center / 100% 100% no-repeat;
    color: #f4f7f5;
    font-size: calc(var(--h) * .56);
    text-shadow: 0 1px 2px #000;
    box-shadow: none;
}
.level-badge::before { content: none; }
.level-badge.tier-2 { background-image: url('/images/levels/tier-2.png'); }
.level-badge.tier-3 { background-image: url('/images/levels/tier-3.png'); }
.level-badge.tier-4 { background-image: url('/images/levels/tier-4.png'); }
.level-badge.tier-5 { background-image: url('/images/levels/tier-5.png'); background-size: 100% 100%; animation: none; }
.level-badge.tier-6 { background-image: url('/images/levels/tier-6.png'); filter: drop-shadow(0 0 4px #f0624a55); animation: level-ember-plate 2.4s ease-in-out infinite; box-shadow: none; }
@keyframes level-ember-plate { 0%, 100% { filter: drop-shadow(0 0 3px #f0624a40); } 50% { filter: drop-shadow(0 0 8px #f0624a99); } }
.level-line .level-badge { --h: 26px; height: var(--h); min-width: 0; font-size: calc(var(--h) * .54); }
.visitor-badge .level-badge { --h: 18px; height: var(--h); min-width: 0; font-size: 10px; }
.podium-tags .level-badge { --h: 22px; }
@media (prefers-reduced-motion: reduce) { .level-badge.tier-6 { animation: none; } }
.podium-name { max-width: 100%; min-width: 0; }
.podium-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 640px) {
    .podium-value .icon { display: none; }
    .podium-value strong { white-space: nowrap; }
    .podium-1 .podium-value strong { font-size: 20px; }
    .podium-value strong { font-size: 16px; }
}

/* Achievements: medal per line, tier colour bronze -> silver -> gold -> legend, progress to the next tier. */
.achievement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 0; margin: 0; list-style: none; }
.achievement { --medal: #4b565c; --medal-glow: transparent; display: flex; gap: 14px; align-items: center; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); transition: transform .2s var(--ease), border-color .2s; }
.achievement:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--medal) 45%, transparent); }
.achievement.tier-1 { --medal: #c58a5a; --medal-glow: #c58a5a33; }
.achievement.tier-2 { --medal: #c3d0d8; --medal-glow: #c3d0d833; }
.achievement.tier-3 { --medal: #e7c35e; --medal-glow: #e7c35e44; }
.achievement.tier-4 { --medal: #bbf36b; --medal-glow: #bbf36b55; }
.achievement-medal { position: relative; display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--medal) 40%, #ffffff10), #0d1417 72%);
    border: 2px solid var(--medal); box-shadow: 0 0 18px var(--medal-glow), inset 0 0 0 3px #0b111488; color: var(--medal); }
.achievement-medal .icon { width: 24px; height: 24px; }
.achievement-tier { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 6px; background: var(--medal); color: #11181b; font-size: 10px; font-weight: 850; line-height: 15px; }
.achievement.is-locked .achievement-medal { border-style: dashed; color: #66737a; background: #0d1417; box-shadow: none; }
.achievement.tier-4 .achievement-medal { animation: level-ember-plate 3s ease-in-out infinite; }
.achievement-copy { display: grid; gap: 4px; min-width: 0; flex: 1; }
.achievement-copy > strong { font-size: 15px; }
.achievement-copy > small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.achievement-copy progress { height: 4px; margin-top: 4px; }
.achievement-count { color: var(--subtle); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.achievement-count.is-max { color: var(--accent); }
@media (max-width: 640px) { .achievement-grid { grid-template-columns: 1fr; } .achievement-medal { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .achievement.tier-4 .achievement-medal { animation: none; } }

/* Season switch above the ranking boards. */
.ranking-period { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin: 20px 0 0; }
.ranking-seasons { display: flex; flex-wrap: wrap; gap: 6px; }
.ranking-seasons a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 600; }
.ranking-seasons a .icon { width: 15px; height: 15px; }
.ranking-seasons a:hover { color: var(--text); border-color: #ffffff40; }
.ranking-seasons a[aria-current=page] { color: #1d1606; background: #e7c35e; border-color: #e7c35e; }
.season-countdown { display: inline-flex; align-items: center; gap: 6px; color: #e7c35e; font-size: 13px; font-weight: 600; }
.season-countdown .icon { width: 15px; height: 15px; }
.ranking-period + .tabs { margin-top: 14px; }

/* Purchase dialog on wide screens: art and the order summary on the left stay in view,
   description, facts and skills scroll on the right. Phones keep the single column. */
@media (min-width: 900px) {
    .store-dialog[open] {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
        column-gap: 26px;
        width: min(1000px, calc(100% - 48px));
        height: min(760px, calc(100dvh - 48px));
        max-height: calc(100dvh - 48px);
        overflow: hidden;
    }
    .store-dialog > .dialog-header { grid-column: 1 / -1; margin-bottom: 18px; }
    .store-dialog .purchase-details { display: contents; }
    .store-dialog .purchase-art { grid-column: 1; grid-row: 2; }
    .store-dialog .purchase-art > img { height: 230px; }
    .store-dialog .purchase-info { grid-column: 2; grid-row: 2 / span 2; min-height: 0; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #4f5a60 transparent; align-content: start; }
    .store-dialog > form, .store-dialog > .purchase-total { grid-column: 1; grid-row: 3; align-self: start; margin-top: 14px; min-height: 0; overflow-y: auto; }
    .store-dialog .purchase-total { padding: 16px; }
    .store-dialog .purchase-total .list-row { flex-wrap: wrap; gap: 4px 10px; }
    .store-dialog .purchase-cost strong { font-size: 20px; }
    .store-dialog .purchase-total .inline-actions { flex-direction: column; align-items: stretch; gap: 8px; }
    .store-dialog .purchase-total .inline-actions > .outline-button { min-height: 38px; }
}

/* Level number: centred in the sprite's dark zone (x 42%..97%), condensed tabular digits. */
.level-badge {
    gap: 0;
    padding: 0 3% 0 41.5%;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-family: "Bahnschrift", "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "Segoe UI", sans-serif;
    font-weight: 700;
    font-stretch: condensed;
    letter-spacing: .4px;
    font-size: calc(var(--h) * .62);
    color: #ffffff;
    text-shadow: 0 0 6px #000c;
}
.level-badge.tier-1 { color: #e6ecef; }
.level-badge.tier-5 { color: #ffe7a8; }
.level-badge.tier-6 { color: #ffd2c6; }
.level-line .level-badge { font-size: calc(var(--h) * .6); }
.visitor-badge .level-badge { font-size: 11px; }

/* One best medal next to the level in profile heroes. */
.best-medal { --medal: #c58a5a; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 3px; border: 1px solid color-mix(in srgb, var(--medal) 55%, transparent); border-radius: 999px; background: #0d1417cc; font-size: 12px; font-weight: 650; color: #e8eef0; }
.best-medal.tier-2 { --medal: #c3d0d8; }
.best-medal.tier-3 { --medal: #e7c35e; }
.best-medal.tier-4 { --medal: #bbf36b; }
.best-medal small { color: var(--medal); font-size: 11px; font-weight: 700; }
.best-medal-icon { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--medal); color: var(--medal); }
.best-medal-icon .icon { width: 11px; height: 11px; }
.profile-badges { align-items: center; }

/* Home feed: right column under the visitors (both in .home-side); on phones before the top-10. */
.home-side { grid-area: visitors; display: grid; gap: 22px; align-content: start; min-width: 0; }
.home-side > .home-visitors { position: static; grid-area: auto; }
.home-feed { min-width: 0; margin: 0; }
.feed-list { list-style: none; margin: 0; padding: 4px 18px !important; }
.feed-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); animation: rise-in .3s var(--ease) both; }
.feed-item:last-child { border-bottom: 0; }
.feed-avatar { grid-row: span 2; }
.feed-avatar .steam-avatar { --avatar-size: 34px; }
.feed-item p { margin: 0; font-size: 13px; line-height: 1.45; color: #c9d2d5; }
.feed-item p strong { color: var(--text); }
.feed-item p .level-badge { --h: 18px; vertical-align: -4px; }
.feed-icon { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #ffffff06; color: var(--muted); }
.feed-icon .icon { width: 15px; height: 15px; }
.feed-case .feed-icon { color: var(--accent); background: #bbf36b12; }
.feed-level .feed-icon { color: #e7c35e; background: #e7c35e12; }
.feed-season .feed-icon { color: #ffd36b; background: #ffd36b14; box-shadow: inset 0 0 0 1px #ffd36b30; }
.feed-item time { grid-column: 2; font-size: 11px; color: var(--subtle); }

@media (min-width: 900px) {
    .store-dialog[open] { height: auto; max-height: min(800px, calc(100dvh - 40px)); }
    .store-dialog .purchase-art > img { height: 190px; }
    .store-dialog .purchase-info { max-height: calc(min(800px, 100dvh - 40px) - 120px); }
    .store-dialog .purchase-total .list-row { padding: 7px 0; }
    .purchase-shortfall { padding: 10px 12px; font-size: 12.5px; }
}

/* Level plates never stretch (chat meta rows are flex-wrap containers). */
.level-badge { flex: 0 0 auto !important; width: calc(var(--h) * 8 / 3) !important; max-width: none !important; align-self: center; }
.message-meta .level-badge { --h: 18px; }

/* Achievement medals: Codex frames (128px, dark centre), the direction icon sits in the centre. */
.achievement-medal, .best-medal-icon {
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;
    background: url('/images/medals/medal-locked.png') center / contain no-repeat !important;
}
.achievement.tier-1 .achievement-medal, .best-medal.tier-1 .best-medal-icon { background-image: url('/images/medals/medal-1.png') !important; }
.achievement.tier-2 .achievement-medal, .best-medal.tier-2 .best-medal-icon { background-image: url('/images/medals/medal-2.png') !important; }
.achievement.tier-3 .achievement-medal, .best-medal.tier-3 .best-medal-icon { background-image: url('/images/medals/medal-3.png') !important; }
.achievement.tier-4 .achievement-medal, .best-medal.tier-4 .best-medal-icon { background-image: url('/images/medals/medal-4.png') !important; }
.achievement-medal { width: 60px; height: 60px; filter: drop-shadow(0 4px 10px #0008); }
.achievement.tier-4 .achievement-medal { animation: medal-glow 3s ease-in-out infinite; }
@keyframes medal-glow { 0%, 100% { filter: drop-shadow(0 4px 10px #0008); } 50% { filter: drop-shadow(0 0 12px #bbf36b66); } }
.achievement-medal .icon { width: 22px; height: 22px; }
.achievement.is-locked .achievement-medal { color: #6b777d; }
.achievement-tier { bottom: -4px; }
.best-medal { padding-left: 2px; }
.best-medal-icon { width: 22px; height: 22px; }
.best-medal-icon .icon { width: 9px; height: 9px; }
@media (max-width: 640px) { .achievement-medal { width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) { .achievement.tier-4 .achievement-medal { animation: none; } }

/* Only the center artwork changes; the original medal frames and sizing above stay intact. */
.achievement-emblem { display: block; object-fit: contain; }
.achievement-medal .achievement-emblem { width: 26px; height: 26px; }
.best-medal-icon .achievement-emblem { width: 11px; height: 11px; }
:is(.achievement, .best-medal).tier-1 .achievement-emblem { filter: grayscale(1) sepia(1) saturate(1.3) hue-rotate(-20deg) brightness(.9); }
:is(.achievement, .best-medal).tier-2 .achievement-emblem { filter: grayscale(1) brightness(1.1); }
:is(.achievement, .best-medal).tier-3 .achievement-emblem { filter: grayscale(1) sepia(1) saturate(1.8) brightness(1.1); }
:is(.achievement, .best-medal).tier-4 .achievement-emblem { filter: grayscale(1) sepia(1) saturate(2.2) hue-rotate(35deg) brightness(1.1); }
.achievement.is-locked .achievement-emblem { filter: grayscale(1) brightness(.5); }
@media (max-width: 640px) { .achievement-medal .achievement-emblem { width: 24px; height: 24px; } }

/* Store on phones: two compact vertical cards per row; the description lives in the purchase dialog. */
@media (max-width: 640px) {
    .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .offer-card { display: flex; flex-direction: column; border-radius: 14px; }
    .offer-art { display: flex; align-items: flex-end; justify-content: center; height: 132px; min-height: 0; border-right: 0; border-bottom: 1px solid #ffffff09; }
    .offer-art img { height: 100%; max-height: none; width: 100%; object-fit: contain; object-position: center bottom; padding: 8px 6px 0; }
    .offer-art .offer-discount { display: inline-block; top: 8px; right: 8px; font-size: 12px; padding: 3px 7px; border-radius: 7px; }
    .offer-content { padding: 10px 10px 12px; }
    .offer-content h2 { font-size: 15px; margin: 0 0 8px; line-height: 1.25; }
    .offer-content > .offer-description { display: none; }
    .offer-pricing { padding: 8px 9px; border-radius: 10px; gap: 2px; }
    .offer-content .price { gap: 0 6px; }
    .offer-content .price > span { font-size: 16px; }
    .offer-content .price > s { font-size: 11px; }
    .offer-content .price > small { width: 100%; margin: 2px 0 0; font-size: 11px; }
    .offer-pricing .offer-sale-chip { display: none; }
    .offer-pricing .offer-discount-until { font-size: 11px; line-height: 1.35; }
    .offer-content > .button, .offer-content > .outline-button { min-height: 38px; margin-top: 10px; padding: 8px 10px; font-size: 13px; }
    .offer-content > .button .icon, .offer-content > .outline-button .icon { width: 15px; height: 15px; }
}
@media (max-width: 360px) { .offer-grid { grid-template-columns: 1fr; } }

/* Bigger purchase dialog on PC: wider summary column, larger figures. */
@media (min-width: 900px) {
    .store-dialog[open] { grid-template-columns: 380px minmax(0, 1fr); width: min(1180px, calc(100% - 48px)); max-height: min(880px, calc(100dvh - 32px)); column-gap: 30px; padding: 30px; }
    .store-dialog .purchase-info { max-height: calc(min(880px, 100dvh - 32px) - 130px); }
    .store-dialog .purchase-art > img { height: 220px; }
    .store-dialog .purchase-total { padding: 20px; }
    .store-dialog .purchase-total h3 { font-size: 14px; }
    .store-dialog .purchase-total .list-row { font-size: 14px; padding: 9px 0; }
    .store-dialog .purchase-cost strong { font-size: 28px; }
    .store-dialog .purchase-price s { font-size: 15px; }
    .store-dialog .offer-discount-until { font-size: 13.5px; }
    .store-dialog .purchase-total .inline-actions > .button { min-height: 54px; font-size: 16px; }
    .purchase-title h2 { font-size: 30px; }
}
/* Number window of the 192×72 sprite: x 72..185, y 7..64. Width = h·8/3, so the window is h·1.0 from the left and
   h·0.097 from the right; glyphs are trimmed to cap height so the digits sit on the window's optical centre. */
.level-badge { padding: 0 calc(var(--h) * .097) 0 var(--h) !important; letter-spacing: 0; text-box: trim-both cap alphabetic; }

/* Admin economy */
.economy-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.economy-heading h2 { margin: 0; }
.economy-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.economy-metrics article { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.economy-metrics span { color: var(--muted); font-size: 12px; }
.economy-metrics strong { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.economy-metrics small { color: var(--subtle); font-size: 11.5px; }
.economy-metrics .is-income strong { color: var(--accent); }
.economy-metrics .is-expense strong { color: #ffb29f; }
.economy-metrics .is-warning { border-color: #edc57c55; }
.economy-metrics .is-warning strong { color: var(--warning); }
.economy-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.economy-columns > .content-section { margin: 0 0 var(--section-gap); }
.economy-flows { display: grid; gap: 14px; }
.economy-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: 14px; }
.economy-flow small { color: var(--subtle); }
.economy-flow strong { font-variant-numeric: tabular-nums; }
.economy-flow progress { grid-column: 1 / -1; height: 6px; }
.economy-flow.is-expense progress::-webkit-progress-value { background: #ff8f6f; }
.economy-flow.is-expense progress::-moz-progress-bar { background: #ff8f6f; }
.economy-legend { display: inline-flex; align-items: center; gap: 6px 10px; color: var(--muted); font-size: 12px; }
.economy-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.economy-legend i.is-expense { background: #ff8f6f; margin-left: 8px; }
.economy-chart { display: block; width: 100%; height: auto; max-height: 260px; }
.economy-chart .economy-axis { stroke: #ffffff18; }
.economy-chart rect.is-income { fill: var(--accent); }
.economy-chart rect.is-expense { fill: #ff8f6f; }
.economy-chart rect:hover { opacity: .8; }
.economy-chart text { fill: #8d9aa0; font-size: 10px; font-family: inherit; }
@media (max-width: 900px) { .economy-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .economy-columns { grid-template-columns: 1fr; } }

/* Clan standings on /clans */
.clan-standings .ranking-list { padding: 4px 20px; }
.clan-standing .clan-emblem { min-width: 42px; height: 42px; padding: 4px; border-radius: 11px; font-size: 13px; }
.clan-standing.podium-1 .rank-number { color: #dcc387; font-weight: 800; }
.clan-standing.podium-2 .rank-number { color: #b5c7d2; font-weight: 800; }
.clan-standing.podium-3 .rank-number { color: #c5a58c; font-weight: 800; }
.clan-standings .section-heading .muted { font-size: 12px; }
.ranking-clans-link { margin-right: 8px; color: var(--accent); }

/* Admin seasons: compact prize rows, payout summaries */
.season-intro { max-width: 78ch; margin: -6px 0 18px; }
.season-form { max-width: none; }
.season-rewards { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.season-reward-row { display: grid; grid-template-columns: minmax(130px, 1.1fr) 150px 110px minmax(150px, 1.4fr) 90px 72px 40px; gap: 8px; align-items: center; }
.season-reward-row label { display: block; margin: 0; }
.season-reward-row :is(input, select) { width: 100%; min-width: 0; }
.season-reward-head { color: var(--muted); font-size: 11px; letter-spacing: .4px; text-transform: uppercase; }
.season-places { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; color: var(--muted); }
.season-summary { margin-bottom: 14px; }
.season-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.season-summary-head h3 { margin: 0 0 3px; }
.season-summary-head small { color: var(--muted); }
.season-line { grid-template-columns: 34px minmax(0, 1fr) auto; display: grid; gap: 12px; align-items: center; }
.season-place { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #ffffff08; font-weight: 750; font-variant-numeric: tabular-nums; }
.season-place.place-1 { color: #1b1606; background: #e7c35e; }
.season-place.place-2 { color: #11171a; background: #c3d0d8; }
.season-place.place-3 { color: #1a0f07; background: #c58a5a; }
.season-payout { margin-top: 14px; }
@media (max-width: 900px) {
    .season-reward-head { display: none; }
    .season-reward-row { grid-template-columns: 1fr 1fr; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
    .season-reward-row > :last-child { justify-self: end; }
}

/* Public season prizes: a strip under the board tabs, a chip on the podium and on prize rows. */
.season-prizes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 12px; border: 1px solid #e7c35e26; border-radius: 12px; background: linear-gradient(90deg, #e7c35e10, transparent 70%); }
.season-prizes-title { display: inline-flex; align-items: center; gap: 7px; margin-right: 6px; color: #f1d98a; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.season-prizes-title .icon { width: 15px; height: 15px; }
.season-prize { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: #0d1417cc; font-size: 12.5px; color: #e8eef0; }
.season-prize b { font-weight: 750; color: var(--muted); }
.season-prize.place-1 { border-color: #e7c35e66; } .season-prize.place-1 b { color: #e7c35e; }
.season-prize.place-2 { border-color: #c3d0d855; } .season-prize.place-2 b { color: #c3d0d8; }
.season-prize.place-3 { border-color: #c58a5a55; } .season-prize.place-3 b { color: #d9a27a; }
.podium-prize { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 9px; border-radius: 999px; background: #e7c35e14; border: 1px solid #e7c35e33; color: #f1d98a; font-size: 11.5px; font-weight: 650; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-prize .icon, .rank-prize .icon { width: 12px; height: 12px; flex: none; }
.rank-prize { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: #e7c35e10; border: 1px solid #e7c35e2a; color: #f1d98a; font-size: 11px; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .rank-prize { font-size: 0; padding: 3px 5px; gap: 0; } .rank-prize .icon { width: 12px; height: 12px; } }

/* Owner's team activity summary on /admin/audit */
.staff-activity .section-heading { flex-wrap: wrap; gap: 10px; }
.staff-activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 22px; }
.staff-card { display: grid; gap: 12px; padding: 16px; align-content: start; }
.staff-card .audit-person { min-width: 0; }
.staff-card .audit-person small { display: none; }
.staff-card-total { display: flex; align-items: baseline; gap: 8px; }
.staff-card-total strong { font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent); }
.staff-card-total span { color: var(--muted); font-size: 12px; }
.staff-card-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.staff-card-actions li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 6px 9px; border-radius: 8px; background: #ffffff05; }
.staff-card-actions b { font-variant-numeric: tabular-nums; }
.staff-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }

/* Phones: text panels run edge to edge (no side border, radius or double inset); image cards and grid cards stay cards. */
@media (max-width: 640px) {
    :root { --gutter: 12px; }
    main { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
    main .panel:not(:is(.offer-grid, .staff-activity-grid, .ranking-podium, .economy-metrics, .economy-columns, .metrics, .inventory-grid, .achievement-grid) > *):not(.panel .panel) {
        margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
        border-radius: 0; border-left: 0; border-right: 0;
        padding-left: var(--gutter); padding-right: var(--gutter);
    }
    main .panel .panel { border-radius: 10px; }
    /* Flush panels pad their own sections: keep the panel at 0 and give the sections the gutter. */
    main .panel.panel-flush { padding-left: 0 !important; padding-right: 0 !important; }
    main .panel-flush > * > :is(.topic-heading, .topic-post-body), main .panel-flush > :is(.section-body, .panel-heading) { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
    /* Text blocks that are not .panel behave the same; image cards keep their frame with a tighter inset. */
    main :is(.invitation-card, .empty-state:not(.panel .empty-state)) { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
        border-radius: 0; border-left: 0; border-right: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
    main :is(.server-card-main, .clan-cover-copy, .featured-news-copy, .forum-hero-copy) { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Panels, 5 Nov: lists sit directly on the page (rows split by hairlines); other panels are translucent glass
   so the backdrop shows through. Image cards (news, server, offers, case) keep their own look. */
main .panel { background: linear-gradient(145deg, #1a2125b8, #13181bb8); border-color: #ffffff10; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; }
main :is(.panel.ranking-panel, .panel.ranking-list, .panel.feed-list, .panel.wallet-ledger, .panel:has(> .message-feed), .forum-topic-panel) {
    background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding-left: 0; padding-right: 0; border-top: 1px solid var(--line);
}
main :is(.ranking-panel, .ranking-list, .feed-list, .wallet-ledger, .forum-topic-panel) > :is(li, article, a, div):not(:last-child),
main .message-feed > .message:not(:last-of-type) { border-bottom: 1px solid #ffffff0c; }

/* Admin player card: unified history timeline */
.player-timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.timeline-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid #ffffff0c; }
.timeline-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #ffffff06; color: var(--muted); }
.timeline-icon .icon { width: 15px; height: 15px; }
.group-money .timeline-icon { color: var(--accent); background: #bbf36b10; }
.group-access .timeline-icon { color: #9fcbef; background: #7abaf810; }
.group-penalties .timeline-icon { color: #eeb2b2; background: #e8797912; }
.kind-season .timeline-icon, .kind-level .timeline-icon { color: #e7c35e; background: #e7c35e12; }
.timeline-copy { display: grid; gap: 3px; min-width: 0; }
.timeline-copy strong { font-size: 13.5px; font-weight: 650; }
.timeline-copy small { color: var(--muted); font-size: 12px; }
.timeline-copy .user-text { margin: 4px 0 0; font-size: 12.5px; color: #c8d0d3; }
.timeline-actor { color: #dfe6e8; font-weight: 600; }
.timeline-actor::before { content: "кто: "; color: var(--muted); font-weight: 400; }
.timeline-amount { font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.timeline-item time { color: var(--muted); font-size: 11.5px; white-space: nowrap; padding-top: 2px; }
@media (max-width: 640px) {
    .timeline-item { grid-template-columns: 30px minmax(0, 1fr) auto; }
    .timeline-item time { grid-column: 2 / -1; padding-top: 0; }
}

/* Daily play streak strip above the weekly challenges */
.streak { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; padding: 9px 12px; border-radius: 10px;
    border: 1px solid #ffffff10; background: #ffffff05; font-size: 12.5px; color: var(--muted); }
.streak-days { display: inline-flex; align-items: center; gap: 6px; color: #dfe6e8; }
.streak-days .icon { width: 15px; height: 15px; color: #8d989e; }
.streak-days strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.streak.is-alive { border-color: #e7c35e33; background: linear-gradient(90deg, #e7c35e12, transparent 70%); }
.streak.is-alive .streak-days .icon { color: #e7c35e; }
.streak.is-at-risk .streak-note { color: #f0a96b; }

/* Clans, 5 Nov: points ranking, "your clan" strip, compact tiles, task stages, roster cards */
.my-clan { display: grid; gap: 14px; margin-bottom: 26px; }
.my-clan-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 18px; color: inherit; text-decoration: none; }
.my-clan-name { display: grid; gap: 2px; min-width: 0; }
.my-clan-name small, .clan-stat small { color: var(--muted); font-size: 11px; letter-spacing: .4px; text-transform: uppercase; }
.my-clan-name strong { font-size: 18px; }
.clan-stat { display: grid; gap: 2px; text-align: right; }
.clan-stat strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.clan-ranking .clan-points { display: grid; justify-items: end; gap: 0; }
.clan-ranking .clan-points strong { font-size: 18px; color: var(--accent); }
.clan-ranking .clan-points small { color: var(--muted); font-size: 11px; }
.clan-ranking .clan-emblem, .clan-tile .clan-emblem { width: 40px; min-width: 40px; height: 40px; font-size: 12px; border-radius: 10px; }
.clan-standing.is-own { background: #bbf36b08; }
.clan-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.clan-tile { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 14px; border: 1px solid #ffffff10; border-radius: 12px; background: #13181bb8; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.clan-tile:hover { border-color: #bbf36b40; transform: translateY(-1px); }
.clan-tile.is-own { border-color: #bbf36b55; }
.clan-tile-cover { position: absolute; inset: 0; z-index: -1; }
.clan-tile-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.clan-tile-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #11161add 30%, #11161a88); }
.clan-tile-copy { display: grid; gap: 2px; min-width: 0; }
.clan-tile-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-tile-copy small { color: var(--muted); font-size: 12px; }
.clan-tile-points { display: grid; justify-items: end; }
.clan-tile-points strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.clan-tile-points small { color: var(--muted); font-size: 11px; }

.clan-tasks { display: grid; gap: 10px; }
.clan-tasks-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.clan-tasks-head strong { font-size: 16px; }
.clan-tasks-head .muted { font-size: 12px; }
.clan-task-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.clan-task { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid #ffffff10; border-radius: 12px;
    background: linear-gradient(145deg, #1a2125b8, #13181bb8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.clan-task-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #ffffff08; color: #c8d0d3; }
.clan-task-icon .icon { width: 18px; height: 18px; }
.clan-task.stage-3 { border-color: #bbf36b45; }
.clan-task.stage-3 .clan-task-icon { background: var(--accent); color: #10150a; }
.clan-task-copy { display: grid; gap: 5px; min-width: 0; }
.clan-task-title { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.clan-task-title strong { font-size: 14px; }
.clan-task-title span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clan-task-copy small { color: var(--muted); font-size: 12px; }
.clan-task-stages { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.clan-task-stages li { display: grid; gap: 3px; }
.clan-task-stages progress { width: 100%; height: 6px; }
.clan-task-stages span { color: var(--muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.clan-task-stages li.is-done span { color: var(--accent); }
.clan-tasks.is-compact .clan-task { padding: 10px 12px; grid-template-columns: 30px minmax(0, 1fr); }
.clan-tasks.is-compact .clan-task-icon { width: 30px; height: 30px; }

.clan-hero-stats { display: flex; gap: 10px; margin: 0 0 0 auto; align-self: end; }
.clan-hero-stats div { display: grid; gap: 2px; min-width: 104px; padding: 10px 14px; border-radius: 12px; background: #0d1417c9; border: 1px solid #ffffff12;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.clan-hero-stats dt { color: var(--muted); font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; }
.clan-hero-stats dd { margin: 0; font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.clan-cover-hero { min-height: clamp(240px, 20vw, 320px) !important; }
.clan-overview { display: grid; gap: 6px; }
.clan-member-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.clan-member { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid #ffffff10; border-radius: 12px; background: #13181bb8; }
.clan-member.role-owner { border-color: #e7c35e40; }
.clan-member.role-officer { border-color: #9fcbef33; }
.clan-member-head { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.clan-member-name { display: grid; gap: 3px; min-width: 0; }
.clan-member-role { color: var(--muted); font-size: 12px; }
.role-owner .clan-member-role { color: #e7c35e; }
.role-officer .clan-member-role { color: #9fcbef; }
.clan-member-share { display: flex; flex-wrap: wrap; gap: 6px; }
.clan-member-share span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #ffffff06; color: #8d989e; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.clan-member-share span.has-value { color: #dfe6e8; background: #bbf36b10; }
.clan-member-share .icon { width: 12px; height: 12px; }
@media (max-width: 900px) {
    .clan-task-list { grid-template-columns: 1fr; }
    .my-clan-head { grid-template-columns: auto minmax(0, 1fr) auto; }
    .my-clan-head .clan-stat:nth-of-type(1), .my-clan-head .text-link { display: none; }
    .clan-heading { flex-wrap: wrap; }
    .clan-hero-stats { margin: 6px 0 0; width: 100%; }
    .clan-hero-stats div { flex: 1; min-width: 0; }
}

/* Clans, owner review 5 Nov: tag in brackets before the name, one ranking of all clans as cover cards */
.clan-name { min-width: 0; }
.clan-tag { color: var(--accent); font-weight: 800; letter-spacing: .3px; }
.clan-cover-row { position: relative; isolation: isolate; overflow: hidden; }
.clan-row-cover { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .4s; }
.clan-cover-row::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #0d1316e6 0%, #0d1316a6 32%, #0d131626 65%, transparent 85%, #0d131680); }
.clan-row-cover { filter: saturate(1.15) brightness(1.15); }
.clan-cover-row:hover .clan-row-cover { transform: scale(1.03); }
.my-clan-head { grid-template-columns: minmax(0, 1fr) auto auto auto; padding: 16px 18px; margin: -4px; border-radius: 12px; }
.my-clan-name strong { font-size: 20px; }
.clan-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.clan-rank-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 88px; padding: 14px 20px;
    border: 1px solid #ffffff12; border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s; }
.clan-rank-card:hover { border-color: #bbf36b40; transform: translateY(-1px); }
.clan-rank-card.is-own { border-color: #bbf36b66; }
.clan-rank-number { font-size: 22px; font-weight: 800; color: #c8d0d3; font-variant-numeric: tabular-nums; text-align: center; }
.clan-rank-card.place-1 .clan-rank-number { color: #e7c35e; } .clan-rank-card.place-2 .clan-rank-number { color: #c3d0d8; } .clan-rank-card.place-3 .clan-rank-number { color: #d9a27a; }
.clan-rank-card.place-1 { min-height: 110px; border-color: #e7c35e40; }
.clan-rank-card.place-1 .clan-rank-copy strong { font-size: 20px; }
.clan-rank-copy { display: grid; gap: 6px; min-width: 0; }
.clan-rank-copy strong { font-size: 16px; text-shadow: 0 1px 8px #000a; }
.clan-rank-card .clan-points { display: grid; justify-items: end; }
.clan-rank-card .clan-points strong { font-size: 22px; color: var(--accent); font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px #000a; }
.clan-rank-card .clan-points small { color: #c8d0d3; font-size: 11px; }
.clan-week { margin-top: 18px; }
@media (max-width: 640px) {
    .clan-rank-card { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; min-height: 76px; }
    .clan-rank-number { font-size: 18px; }
    .my-clan-head { grid-template-columns: minmax(0, 1fr) auto; }
    .my-clan-head .clan-stat:nth-of-type(1), .my-clan-head .text-link { display: none; }
}
.my-clan-head .clan-stat, .my-clan-head .text-link { padding: 7px 12px; border-radius: 10px; background: #0d1417cc; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.clan-rank-card .clan-points { padding: 6px 12px; border-radius: 10px; background: #0d141799; }
.clan-overview { margin-top: 18px; }