/* Self-hosted Fonts */
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Rye';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/rye-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Rye';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/rye-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Modern Reset & Typography */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit', sans-serif;
    user-select: none;
    /* Prevent text selection */
}

:root {
    --primary: #FF5A36;
    /* High noon orange */
    --secondary: #EAB308;
    /* Desert sun yellow */
    --background: #1A1A24;
    /* Deep night blue */
    --text-main: #F8F9FA;
    --text-muted: #A1A1AA;
    --glass-bg: rgba(26, 26, 36, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-highlight: rgba(255, 255, 255, 0.05);

    --health-player: #34D399;
    /* Green */
    --health-enemy: #EF4444;
    /* Red */
    --font-western: 'Rye', cursive;
}

body {
    background-color: var(--background);
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Game Container is fixed to a 16:9 aspect ratio */
#game-container {
    position: relative;
    width: 1280px;
    height: 720px;
    max-width: 100vw;
    max-height: 56.25vw;
    /* Maintain 16:9 */
    background: #000;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--glass-border);
    border-radius: 16px;
    overflow: hidden;
}

#game-canvas {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: auto;
    /* Smooth rendering for illustrated sprites */
}

/* Base UI Layer */
#ui-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through except on active components */
}

/* Screens */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.screen.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
}

.screen.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Glassmorphism Panels */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 var(--glass-highlight);
    border-radius: 24px;
    padding: 3rem;
    max-width: 80%;
    max-height: 80%;
}

/* Typography styles */
.title {
    font-family: var(--font-western);
    font-size: 5rem;
    background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 12px rgba(255, 90, 54, 0.4));
    margin-bottom: 0.5rem;
    text-align: center;
}

.subtitle {
    font-size: 1.5rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 3rem;
}

/* Buttons */
.btn {
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 800;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn:active {
    transform: scale(0.95);
}

.btn.primary {
    background: linear-gradient(135deg, var(--primary), #D94624);
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 90, 54, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.btn.primary:hover {
    box-shadow: 0 12px 28px rgba(255, 90, 54, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(4px);
}

.btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.menu-actions {
    display: flex;
    gap: 1.5rem;
}

/* ============================
   RESULTS SCREEN
   ============================ */
#screen-results {
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#screen-results[data-result="victory"] .result-backdrop {
    background: radial-gradient(ellipse at center 60%, rgba(234,179,8,0.18) 0%, transparent 70%);
    animation: resultBackdropSpin 12s linear infinite;
}

#screen-results[data-result="defeat"] .result-backdrop {
    background: radial-gradient(ellipse at center 60%, rgba(220,38,38,0.15) 0%, transparent 70%);
    animation: resultBackdropSpin 16s linear infinite reverse;
}

@keyframes resultBackdropSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.result-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 2.1rem 2.35rem 1.85rem;
    max-width: 620px;
    width: min(92vw, 620px);
    max-height: calc(100svh - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* ═══════════════════════════════════════════
   Browser-First Launch Hardening Overrides
   ═══════════════════════════════════════════ */
.armory-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.armory-overview-card,
.settings-card,
.account-launch-note,
.pass-beta-banner,
.pass-launch-copy,
.cosmetic-overview,
.mods-hero-card,
.store-note-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(14, 11, 17, 0.54));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.armory-overview-card {
    padding: 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.armory-overview-card strong {
    font-size: 1.02rem;
    letter-spacing: 0.03em;
}

.armory-overview-kicker,
.armory-pane-kicker {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(248, 249, 250, 0.58);
}

.armory-pane-header {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.armory-pane-header h3,
.pass-launch-copy h3,
.cosmetic-overview h3,
.mods-hero-card h3 {
    margin: 0;
    font-size: 1.16rem;
}

.armory-pane-copy {
    margin: 0;
    max-width: 62ch;
    color: rgba(248, 249, 250, 0.72);
    line-height: 1.45;
}

.shop-item-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.shop-item-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.32rem 0.58rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(248, 249, 250, 0.82);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.shop-item.equipped .shop-item-status {
    background: rgba(255, 90, 54, 0.16);
    color: #FFD2C7;
}

.shop-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 0.65rem;
    flex-wrap: wrap;
}

.shop-item-hint {
    font-size: 0.74rem;
    color: rgba(248, 249, 250, 0.58);
}

.shop-item .item-ability {
    margin: 0.5rem 0 0;
    font-size: 0.77rem;
    line-height: 1.4;
    color: rgba(248, 249, 250, 0.78);
}

.settings-shell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    align-items: start;
}

.settings-card {
    padding: 0.95rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.settings-card .settings-group {
    margin: 0;
}

.settings-card-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(248, 249, 250, 0.54);
}

.settings-card-copy {
    margin: 0;
    line-height: 1.45;
    color: rgba(248, 249, 250, 0.74);
}

.settings-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-tip-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.38rem;
    color: rgba(248, 249, 250, 0.74);
}

#settings-accessibility-extra {
    display: grid;
    gap: 0.75rem;
}

.settings-modal .settings-choice-row {
    flex-wrap: wrap;
}

.account-profile-modal {
    width: min(100%, 1080px);
    max-height: min(88vh, 860px);
}

.account-profile-modal .modal-scroll-region {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.account-profile-banner {
    align-items: flex-start;
    gap: 1rem;
}

.account-launch-note {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.8rem 0.95rem;
}

.account-launch-note strong {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-launch-note span {
    color: rgba(248, 249, 250, 0.72);
    line-height: 1.45;
}

.account-profile-grid {
    grid-template-columns: minmax(320px, 0.92fr) minmax(0, 1.28fr);
    gap: 0.9rem;
}

.account-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.account-card-setup {
    gap: 0.9rem;
}

.account-meta-list {
    display: grid;
    gap: 0.45rem;
}

.account-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.account-handle-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
}

.account-setup-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    align-items: end;
}

.account-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.account-field .competitive-input {
    width: 100%;
    min-height: 3.35rem;
    padding: 0.9rem 1rem;
    font-size: 1.02rem;
}

.account-field-handle .account-handle-row .competitive-input {
    min-width: 0;
}

.account-handle-row .btn {
    min-width: 132px;
    min-height: 3.35rem;
    padding-inline: 1rem;
}

.account-feedback {
    min-height: 3.2rem;
    line-height: 1.45;
}

.account-profile-modal .modal-footer {
    gap: 0.65rem;
}

.account-profile-modal .footer-actions {
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.account-profile-modal .context-help {
    padding: 0.68rem 0.82rem;
    font-size: 0.84rem;
    line-height: 1.34;
}

.account-profile-modal .footer-actions .btn {
    flex: 0 1 auto;
    min-height: 2.68rem;
    padding: 0.7rem 0.92rem;
    font-size: 0.84rem;
    letter-spacing: 0.08em;
}

#btn-account-profile-close,
#btn-account-sync-now {
    min-width: 164px;
}

#btn-account-profile-save {
    min-width: 206px;
}

.cosmetic-overview {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    margin-bottom: 0.8rem;
}

.cosmetic-overview-copy {
    display: grid;
    gap: 0.35rem;
    max-width: 52ch;
}

.cosmetic-balance-badge {
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-end;
    text-align: right;
}

.cosmetic-balance-badge span {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(248, 249, 250, 0.56);
}

.cosmetic-balance-badge strong {
    font-size: 1.15rem;
}

.cosmetic-equipped-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.cosmetic-equipped-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(248, 249, 250, 0.78);
    font-size: 0.74rem;
}

.cosmetic-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.7rem;
}

.cosmetic-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 100%;
}

.cosmetic-actions {
    margin-top: auto;
}

.mods-hero-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    margin-bottom: 0.8rem;
}

.mods-hero-stats {
    display: grid;
    gap: 0.32rem;
    text-align: right;
    color: rgba(248, 249, 250, 0.72);
    font-size: 0.82rem;
}

.mods-hero-stats strong {
    color: #F8F9FA;
}

.mods-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 0.55rem;
}

.mods-section-header h3 {
    margin: 0;
}

.mod-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.mod-slot {
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.mod-slot.empty {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.mod-inventory {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
}

.mod-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 100%;
}

.mod-card-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.mod-type-badge,
.mod-equipped-label,
.bp-preview-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.48rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(248, 249, 250, 0.72);
}

.mod-bonus-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.mod-bonus-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.48rem;
    border-radius: 999px;
    background: rgba(234, 179, 8, 0.12);
    color: #FDE68A;
    font-size: 0.68rem;
}

.mod-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.pass-shell,
.tales-shell {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.pass-launch-copy {
    padding: 0.9rem 1rem;
}

.pass-beta-banner {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    padding: 0.78rem 0.95rem;
    margin-bottom: 0.8rem;
}

.bp-tiers-shell {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.bp-reward.premium.locked-premium {
    opacity: 0.88;
}

.store-note-card {
    padding: 0.85rem 0.95rem;
    display: grid;
    gap: 0.22rem;
}

@media (max-width: 1100px) {
    .settings-shell,
    .armory-overview-grid,
    .account-profile-grid,
    .mod-slots {
        grid-template-columns: 1fr;
    }

    .cosmetic-overview,
    .mods-hero-card {
        flex-direction: column;
    }

    .mods-hero-stats,
    .cosmetic-balance-badge {
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 780px) {
    .settings-card,
    .armory-overview-card,
    .cosmetic-overview,
    .mods-hero-card,
    .pass-launch-copy,
    .pass-beta-banner,
    .account-launch-note {
        padding: 0.8rem 0.85rem;
    }

    .account-handle-row,
    .mod-card-footer,
    .shop-item-footer,
    .mods-section-header {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .cosmetic-grid,
    .mod-inventory {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 760px) and (orientation: landscape) {
    .account-profile-modal,
    .settings-modal,
    .store-modal,
    .bounty-modal,
    .tutorial-modal {
        max-height: min(88vh, 700px);
    }

    .settings-shell {
        grid-template-columns: 1fr;
    }

    .account-profile-modal .footer-actions .btn,
    .mod-card-footer .btn,
    .shop-item-footer .btn {
        width: 100%;
    }
}

/* Title slam animation */
.result-title-anim {
    animation: resultTitleSlam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

#screen-results[data-result="victory"] .result-title-anim {
    color: var(--secondary);
    text-shadow: 0 0 30px rgba(234, 179, 8, 0.5), 0 0 60px rgba(234, 179, 8, 0.2);
    animation-name: resultTitleSlamGold;
}

#screen-results[data-result="defeat"] .result-title-anim {
    color: var(--health-enemy);
    text-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
    animation-name: resultTitleFade;
}

@keyframes resultTitleSlamGold {
    0% { transform: scale(2.2); opacity: 0; filter: blur(8px); }
    60% { transform: scale(0.95); opacity: 1; filter: blur(0); }
    80% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes resultTitleFade {
    0% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.result-subtitle {
    color: var(--text-muted);
    max-width: 34rem;
    font-size: 0.94rem;
    line-height: 1.42;
    text-align: center;
    white-space: pre-line;
    animation: resultFadeUp 0.4s ease 0.2s both;
}

.result-chips {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.result-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.6rem 1.2rem;
    min-width: 70px;
    animation: resultChipIn 0.35s ease both;
    animation-delay: calc(0.3s + var(--chip-delay, 0) * 0.15s);
}

.result-chip-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-main);
    font-family: var(--font-display);
}

.result-chip-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes resultChipIn {
    0% { transform: translateY(12px) scale(0.8); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.result-reward-row {
    animation: resultRewardPulse 0.5s ease 0.6s both;
}

.result-reward-amount {
    font-size: 1.4rem;
    font-weight: bold;
}

.result-status {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 34rem;
    padding: 0.56rem 0.72rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.34;
}

#screen-results[data-result="victory"] .result-reward-amount {
    color: var(--secondary);
    text-shadow: 0 0 12px rgba(234, 179, 8, 0.4);
}

@keyframes resultRewardPulse {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.result-continue-btn {
    animation: resultFadeUp 0.4s ease 0.8s both;
}

.result-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.62rem;
}

.result-alt-btn {
    animation: resultFadeUp 0.4s ease 0.72s both;
}

#screen-results #btn-share-result,
#screen-results #btn-watch-ad-double,
#screen-results .result-actions .btn {
    width: 100%;
    margin-top: 0;
}

@keyframes resultFadeUp {
    0% { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Reduced motion for results */
body.reduced-motion .result-title-anim,
body.reduced-motion .result-subtitle,
body.reduced-motion .result-chip,
body.reduced-motion .result-reward-row,
body.reduced-motion .result-continue-btn,
body.reduced-motion .result-backdrop {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Stats and Money widgets */

.stats-bar {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: rgba(0, 0, 0, 0.4);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
}

.money-display {
    color: var(--secondary);
    font-size: 1.5rem;
    font-family: var(--font-western);
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ============================
   START MENU / HUB / MODALS 
   ============================ */

/* Loading Screen */
#screen-loading {
    background: linear-gradient(180deg,
        #0c0a1a 0%,
        #1a1035 30%,
        #3b1a45 55%,
        #7c2d12 78%,
        #b45309 100%);
    z-index: 1001;
    overflow: hidden;
}

/* Procedural stars */
#screen-loading::before,
#screen-splash::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1px 1px at 10% 8%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 25% 15%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 40% 5%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 55% 20%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 70% 12%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 85% 8%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 15% 28%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 35% 32%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 60% 25%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 78% 30%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 92% 18%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 5% 40%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 48% 38%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1.5px 1.5px at 22% 42%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 67% 35%, rgba(255,255,255,0.4), transparent);
    animation: starTwinkle 8s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

/* Dust motes drifting */
#screen-loading::after,
#screen-splash::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 20% 60%, rgba(251,191,36,0.15), transparent 4px),
        radial-gradient(3px 3px at 45% 70%, rgba(255,90,54,0.1), transparent 6px),
        radial-gradient(2px 2px at 70% 55%, rgba(251,191,36,0.12), transparent 4px),
        radial-gradient(2.5px 2.5px at 30% 75%, rgba(255,90,54,0.08), transparent 5px),
        radial-gradient(2px 2px at 80% 65%, rgba(251,191,36,0.1), transparent 4px),
        radial-gradient(3px 3px at 55% 80%, rgba(255,90,54,0.12), transparent 6px);
    animation: dustDrift 14s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* Horizon glow pulse */
#screen-loading .splash-content,
#screen-splash .splash-content {
    z-index: 1;
    position: relative;
}

@keyframes starTwinkle {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

@keyframes dustDrift {
    0% { transform: translateX(-5%) translateY(0); }
    50% { transform: translateX(5%) translateY(-2%); }
    100% { transform: translateX(-5%) translateY(0); }
}

.loading-bar-container {
    width: 300px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 1rem;
}

.loading-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 4px;
    transition: width 0.2s ease;
}

.loading-text {
    font-size: 1rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    margin-top: 0.8rem;
}

/* Splash Screen */
#screen-splash {
    background: linear-gradient(180deg,
        #0c0a1a 0%,
        #1a1035 30%,
        #3b1a45 55%,
        #7c2d12 78%,
        #b45309 100%);
    z-index: 1000;
    cursor: pointer;
    overflow: hidden;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.giant-title {
    font-size: 7rem;
    letter-spacing: 12px;
    margin-bottom: 0;
}

.pulsing-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-muted);
    letter-spacing: 4px;
    animation: slowPulse 2s infinite ease-in-out;
}

@keyframes slowPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* Hub Layout */
.hub-container {
    display: flex;
    width: 90%;
    height: 80%;
    max-width: 1100px;
    justify-content: space-between;
    align-items: center;
}

.hub-left-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.hub-title {
    text-align: left;
    margin-bottom: 0.2rem;
}

.hub-left-panel .subtitle {
    margin-bottom: 1.5rem;
    text-align: left;
}

.hub-menu-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 350px;
}

.nav-btn {
    justify-content: flex-start;
    padding: 0.85rem 1.8rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    transform-origin: left;
}

/* Secondary utility row (Bounties, Help, Settings) */
.hub-menu-secondary {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

/* Shared screen-tabs (reusable for Armory, Bounty, etc.) */
.screen-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    width: 100%;
}
.screen-tabs .tab-btn {
    flex: 1;
    font-size: 0.72rem;
    padding: 0.4rem 0.3rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    color: var(--text-muted, #A1A1AA);
    cursor: pointer;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 700;
    transition: background 0.2s, color 0.2s;
}
.screen-tabs .tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
.screen-tabs .tab-btn.active {
    background: var(--primary, #FF5A36);
    color: #fff;
    border-color: var(--primary, #FF5A36);
}
.armory-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1.2rem;
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
}

.armory-tabs .tab-btn {
    min-height: 4.15rem;
    padding: 0.9rem 0.8rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(11, 15, 24, 0.86), rgba(11, 15, 24, 0.68));
    color: rgba(248, 249, 250, 0.78);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.armory-tabs .tab-btn:hover {
    background: linear-gradient(180deg, rgba(18, 24, 36, 0.94), rgba(12, 17, 27, 0.8));
    border-color: rgba(255, 214, 102, 0.18);
    color: var(--text-main);
}

.armory-tabs .tab-btn.active {
    background: linear-gradient(135deg, var(--primary), #d94624);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 24px rgba(255, 90, 54, 0.22);
}

@media (max-width: 1200px) {
    .armory-tabs .tab-btn {
        min-height: 3.7rem;
        font-size: 0.82rem;
        letter-spacing: 0.15em;
    }
}

@media (max-width: 900px) {
    .armory-tabs {
        grid-template-columns: 1fr;
    }
}
.armory-tab-content.hidden,
.bounty-tab-content.hidden {
    display: none;
}

.nav-btn-sm {
    flex: 1;
    justify-content: center;
    padding: 0.6rem 0.5rem;
    font-size: 0.85rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    transform-origin: center;
    letter-spacing: 1px;
}

.nav-btn-sm .btn-icon {
    font-size: 1.1rem;
    margin-right: 0.4rem;
    width: auto;
}

.nav-btn-sm .btn-text {
    font-size: 0.8rem;
}

.nav-btn-sm:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--text-muted);
    color: var(--text-main);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nav-btn-sm.outline {
    background: transparent;
    border: 1px dashed var(--text-muted);
}

.nav-btn-sm.outline:hover {
    color: var(--text-main);
    border-color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.nav-btn:hover {
    background: linear-gradient(90deg, var(--primary), transparent);
    border-color: var(--primary);
    transform: translateX(10px);
    box-shadow: -4px 0 15px rgba(255, 90, 54, 0.3);
}

.nav-btn.outline {
    background: transparent;
    border: 1px dashed var(--text-muted);
    color: var(--text-muted);
}

.nav-btn.outline:hover {
    color: var(--text-main);
    border-color: var(--text-main);
    background: rgba(255, 255, 255, 0.05);
}

.btn-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
    width: 30px;
}

.btn-icon-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1.1rem;
    margin-right: 0.8rem;
    flex-shrink: 0;
    color: var(--secondary);
    text-shadow: 0 0 8px rgba(234, 179, 8, 0.3);
    font-style: normal;
}

.btn-icon-custom.sm {
    width: 26px;
    height: 26px;
    font-size: 0.95rem;
    margin-right: 0.5rem;
}

.nav-btn-sm .btn-icon-custom {
    width: 26px;
    height: 26px;
    font-size: 0.95rem;
    margin-right: 0.5rem;
}

.hub-right-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0.5;
}

.glass-widget {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    padding: 1.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.money-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.money-widget span:first-child {
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 2px;
}

/* Modals */
.glass-modal {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 500;
}

.modal-content {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 var(--glass-highlight);
    border-radius: 20px;
    padding: 3rem;
    width: 500px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
}

.stat-card {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat-card h4 {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bounty-modal {
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
}

.stat-value {
    font-family: var(--font-western);
    font-size: 2rem;
    color: var(--primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.achievements-title {
    color: var(--secondary);
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-align: center;
    margin-top: 0.5rem;
}

.achievement-count {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 400;
}

.achievements-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
}

.achievement-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    font-size: 0.8rem;
}

.achievement-item.unlocked {
    border-color: var(--secondary);
    background: rgba(234, 179, 8, 0.1);
}

.achievement-item.locked {
    opacity: 0.4;
    filter: grayscale(1);
}

.achievement-item-icon {
    font-size: 1.3rem;
}

.achievement-item-name {
    font-weight: 600;
    color: var(--text-main);
}

.achievement-item-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Pre-Duel Preview */
.preview-modal {
    max-width: 480px;
}

.preview-opponent {
    width: 100%;
    text-align: center;
}

.preview-name {
    font-family: var(--font-western);
    font-size: 2.5rem;
    color: var(--primary);
    text-shadow: 0 2px 8px rgba(255, 90, 54, 0.4);
    margin-bottom: 1rem;
}

.preview-dialogue {
    font-style: italic;
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    line-height: 1.5;
    text-align: center;
    padding: 0 1rem;
}

.preview-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    width: 100%;
}

.preview-stat {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.preview-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.preview-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
}

.preview-loadout {
    width: 100%;
    text-align: center;
    padding: 0.8rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid var(--glass-border);
}

.preview-your-gear {
    color: var(--secondary);
    font-weight: 600;
    margin-top: 0.3rem;
}

.preview-actions {
    display: flex;
    gap: 1rem;
    width: 100%;
}

.preview-actions .btn {
    flex: 1;
}

/* Tutorial */
.tutorial-modal {
    max-width: 550px;
}

.tutorial-steps {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutorial-step {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.tutorial-step.hidden {
    display: none !important;
}

.tut-icon {
    font-size: 3rem;
    line-height: 1;
}

.tutorial-step h3 {
    font-size: 1.3rem;
    color: var(--secondary);
    letter-spacing: 2px;
}

.tutorial-step p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 420px;
}

.tutorial-step p strong {
    color: var(--text-main);
}

.tutorial-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
}

.tut-progress {
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 2px;
}

/* HUD System */
.top-hud {
    position: absolute;
    top: 2rem;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.health-bar-container {
    width: 300px;
    display: flex;
    flex-direction: column;
}

.health-bar-container.right {
    align-items: flex-end;
}

.name-tag {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-main);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.health-bar {
    width: 100%;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
}

.health-fill {
    height: 100%;
    width: 100%;
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#player-health {
    background: linear-gradient(90deg, #10B981, var(--health-player));
}

#opponent-health {
    background: linear-gradient(270deg, #DC2626, var(--health-enemy));
}

.versus-text {
    font-family: var(--font-western);
    font-size: 3rem;
    color: var(--secondary);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
    margin-top: 1rem;
}

/* Duel Prompt ("DRAW!") */
.duel-prompt {
    font-family: var(--font-western);
    font-size: 8rem;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 8px 0 #991B1B, 0 16px 24px rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Let clicks pass through to the crossbar */
}

.duel-prompt.hidden {
    display: none !important;
}

.duel-prompt.fade-anim {
    animation: popAndFade 0.8s forwards;
}

/* Reflex 2D Target Box */
.reflex-ui {
    position: absolute;
    bottom: 30%;
    left: 10%;
    transform: translateX(-50%);
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reflex-ui-right {
    left: auto !important;
    right: 10%;
    transform: translateX(50%);
}

.reflex-ui-right .zone-hit-box {
    background: rgba(239, 68, 68, 0.4);
    border-color: rgba(239, 68, 68, 0.8);
}

.reflex-ui-right .zone-crit-box {
    background: rgba(239, 68, 68, 0.8);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
}

.reflex-ui.hidden {
    display: none !important;
}

.target-box {
    width: 180px;
    height: 180px;
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid var(--glass-border);
    border-radius: 12px;
    position: relative;
    backdrop-filter: blur(8px);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.zone-hit-box {
    position: absolute;
    background: rgba(234, 179, 8, 0.4);
    border: 1px solid rgba(234, 179, 8, 0.8);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* Make hit zone circular for more authentic aiming */
}

.zone-crit-box {
    position: absolute;
    background: rgba(52, 211, 153, 0.8);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
}

/* Moving Crossbars */
.crossbar {
    position: absolute;
    background: #fff;
    box-shadow: 0 0 10px #fff, 0 0 15px #fff;
    z-index: 10;
}

.crossbar.vertical {
    width: 4px;
    height: 100%;
    top: 0;
    left: 0;
    /* Updated by JS */
}

.crossbar.horizontal {
    height: 4px;
    width: 100%;
    left: 0;
    top: 0;
    /* Updated by JS */
    display: none;
    /* Hidden until X is locked */
}

.crossbar.locked {
    background: #A1A1AA;
    box-shadow: none;
}

.input-hint {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 1), 0 0 5px rgba(0, 0, 0, 1);
    letter-spacing: 2px;
    animation: pulse 1.5s infinite;
    text-align: center;
}

/* Animations */
@keyframes popAndFade {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    15% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }

    25% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

/* Floating Combat Text */
.floating-text {
    position: absolute;
    font-family: var(--font-western);
    font-size: 3rem;
    font-weight: bold;
    pointer-events: none;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    animation: floatUp 1s ease-out forwards;
    z-index: 100;
}

.t-crit {
    color: #34D399;
    font-size: 4rem;
    text-shadow: 0 0 20px #34D399;
}

.t-hit {
    color: #FF9800;
}

.t-miss {
    color: #9E9E9E;
}

.t-dmg {
    color: #EF4444;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    20% {
        transform: translateY(-20px) scale(1.2);
        opacity: 1;
    }

    80% {
        transform: translateY(-60px) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-80px) scale(0.8);
        opacity: 0;
    }
}

/* Shop Layout */
.shop-grid {
    display: flex;
    gap: 2rem;
    width: 100%;
    margin-bottom: 2rem;
}

.shop-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.shop-column h3 {
    text-align: center;
    color: var(--secondary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.list-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 1rem;
    height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    border: 1px solid var(--glass-border);
}

.shop-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.shop-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.shop-item.equipped {
    border-color: var(--primary);
    background: rgba(255, 90, 54, 0.1);
}

.shop-item.locked {
    opacity: 0.5;
    filter: grayscale(1);
}

.item-info h4 {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

.item-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.item-ability {
    font-size: 0.8rem;
    color: var(--health-player);
    font-weight: 600;
    margin-top: 0.2rem;
    letter-spacing: 1px;
}

.item-price {
    font-family: var(--font-western);
    color: var(--secondary);
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* Shop stat bars */
.stat-bars {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stat-mini-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stat-mini-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 1px;
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.stat-mini-bar {
    flex: 1;
    height: 4px;
    max-width: 80px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.stat-mini-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.stat-mini-val {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    width: 24px;
    flex-shrink: 0;
}

/* Achievement Popup */
.achievement-popup {
    position: fixed;
    top: 20px;
    right: -400px;
    background: linear-gradient(135deg, rgba(26, 26, 36, 0.95), rgba(40, 40, 60, 0.95));
    border: 1px solid var(--secondary);
    border-left: 4px solid var(--secondary);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 2000;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(234, 179, 8, 0.2);
    transition: right 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    min-width: 280px;
}

.achievement-popup.show {
    right: 20px;
}

.achievement-icon {
    font-size: 2rem;
}

.achievement-popup strong {
    color: var(--secondary);
    font-size: 0.75rem;
    letter-spacing: 2px;
}

.achievement-popup div {
    color: var(--text-main);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #game-container {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .giant-title {
        font-size: 3.5rem;
        letter-spacing: 4px;
    }

    .hub-container {
        flex-direction: column;
        width: 95%;
        height: auto;
        gap: 1rem;
    }

    .hub-left-panel {
        align-items: center;
    }

    .hub-title {
        text-align: center;
        font-size: 3rem;
    }

    .hub-left-panel .subtitle {
        text-align: center;
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .hub-menu-list {
        width: 100%;
        max-width: 320px;
        gap: 0.5rem;
    }

    .nav-btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.95rem;
    }

    .hub-menu-secondary {
        gap: 0.4rem;
    }

    .nav-btn-sm {
        padding: 0.5rem 0.3rem;
    }

    .nav-btn-sm .btn-text {
        font-size: 0.7rem;
    }

    .hub-right-panel {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        flex: 0;
    }

    .glass-widget {
        padding: 0.8rem 1.2rem;
    }

    .money-display {
        font-size: 1.2rem;
    }

    /* Shop responsive */
    .glass-panel {
        padding: 1.5rem;
        max-width: 95%;
        max-height: 90%;
        border-radius: 16px;
    }

    .shop-grid {
        flex-direction: column;
        gap: 1rem;
    }

    .list-container {
        height: 180px;
    }

    /* Duel HUD responsive */
    .top-hud {
        width: 95%;
        top: 0.5rem;
    }

    .health-bar-container {
        width: 35%;
    }

    .name-tag {
        font-size: 0.8rem;
    }

    .health-bar {
        height: 16px;
    }

    .versus-text {
        font-size: 1.5rem;
    }

    .duel-prompt {
        font-size: 5rem;
    }

    .reflex-ui {
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
    }

    .target-box {
        width: 140px;
        height: 140px;
    }

    .input-hint {
        font-size: 0.8rem;
    }

    /* Floating text responsive */
    .floating-text {
        font-size: 2rem;
    }

    .t-crit {
        font-size: 2.5rem;
    }

    /* Modal responsive */
    .modal-content {
        padding: 2rem;
        width: 90%;
    }

    .preview-modal {
        max-width: 90%;
    }

    .tutorial-modal {
        max-width: 90%;
    }

    /* Results responsive */
    .title.small {
        font-size: 2.5rem;
    }

    .result-chips {
        gap: 0.6rem;
    }

    .result-chip {
        padding: 0.4rem 0.8rem;
        min-width: 56px;
    }

    .result-chip-value {
        font-size: 1.2rem;
    }

    .result-content {
        padding: 1.5rem 2rem;
    }
}

@media (max-width: 480px) {
    .giant-title {
        font-size: 2.5rem;
    }

    .hub-title {
        font-size: 2.2rem;
    }

    .hub-left-panel .subtitle {
        font-size: 0.8rem;
        letter-spacing: 2px;
    }

    .duel-prompt {
        font-size: 4rem;
    }

    .target-box {
        width: 120px;
        height: 120px;
    }
}

/* Touch feedback */
@media (hover: none) {
    .btn:active {
        transform: scale(0.92);
        opacity: 0.9;
    }

    .nav-btn:hover {
        transform: none;
    }

    .nav-btn:active {
        background: linear-gradient(90deg, var(--primary), transparent);
        border-color: var(--primary);
    }

    .nav-btn-sm:hover {
        transform: none;
    }

    .nav-btn-sm:active {
        background: rgba(255, 255, 255, 0.1);
        border-color: var(--text-main);
        color: var(--text-main);
    }
}

@keyframes shopDeny {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); border-color: var(--health-enemy); }
    40% { transform: translateX(8px); border-color: var(--health-enemy); }
    60% { transform: translateX(-4px); border-color: var(--health-enemy); }
    80% { transform: translateX(4px); }
}
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

body {
    min-height: 100vh;
    padding: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 12px);
}

#game-container {
    width: min(1280px, calc(100vw - var(--safe-left) - var(--safe-right) - 24px));
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 24px);
}

.duel-status {
    position: absolute;
    top: 6.45rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid var(--glass-border);
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    z-index: 20;
    backdrop-filter: blur(8px);
}

.pause-modal,
.settings-modal,
.pvp-setup-modal,
.competitive-setup-modal {
    max-width: 820px;
    width: min(92%, 820px);
}

.pause-actions,
.settings-choice-row,
.pvp-setup-grid {
    display: flex;
    gap: 1rem;
}

.pause-actions {
    margin-top: 1.5rem;
    justify-content: center;
}

.pvp-setup-grid {
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.pvp-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 1.25rem;
}

.pvp-note,
.settings-help {
    text-align: center;
    line-height: 1.5;
}

.settings-group {
    width: 100%;
}

.duel-modes-modal {
    width: min(96%, 860px);
    max-height: min(calc(100% - 1rem), 720px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 1rem;
}

.duel-modes-modal .modal-scroll-region {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.duel-modes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    align-content: start;
}

.competitive-setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    width: 100%;
    margin-top: 1.25rem;
}

.competitive-card {
    position: relative;
    overflow: hidden;
}

.competitive-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), transparent 55%);
    pointer-events: none;
}

.competitive-kicker {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fbbf24;
}

.competitive-loadout-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 12, 18, 0.45);
}

.competitive-loadout-label,
.competitive-group-label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
}

.competitive-toggle-row {
    justify-content: flex-start;
}

.competitive-choice {
    min-width: 150px;
}

.competitive-helper {
    line-height: 1.5;
}

.competitive-summary {
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(251, 191, 36, 0.18);
    color: rgba(248, 249, 250, 0.88);
    line-height: 1.45;
}

.competitive-banner-preview {
    min-height: 3rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px dashed rgba(248, 113, 113, 0.35);
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.28), rgba(15, 23, 42, 0.72));
    color: #fee2e2;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.45;
}

.competitive-input {
    text-transform: none;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.duel-mode-card {
    --duel-accent: #fbbf24;
    --duel-accent-rgb: 251, 191, 36;
    min-height: 7rem;
    padding: 0.9rem 0.95rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: linear-gradient(180deg, rgba(11, 15, 24, 0.9), rgba(11, 15, 24, 0.74));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.7rem;
    text-align: left;
}

.duel-mode-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--duel-accent-rgb), 0.34);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(var(--duel-accent-rgb), 0.1);
}

.duel-mode-card:active {
    transform: translateY(0) scale(0.99);
}

.duel-mode-card:disabled,
.duel-mode-card.release-disabled {
    opacity: 0.62;
    cursor: not-allowed;
    transform: none;
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: none;
}

.duel-mode-card:disabled:hover,
.duel-mode-card.release-disabled:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: none;
}

.duel-mode-top {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.duel-mode-copy-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.duel-mode-title {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--duel-accent);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.duel-mode-copy {
    color: rgba(248, 249, 250, 0.82);
    font-size: 0.78rem;
    line-height: 1.38;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 500;
}

.duel-mode-tag {
    align-self: flex-start;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--duel-accent-rgb), 0.28);
    background: rgba(var(--duel-accent-rgb), 0.08);
    color: var(--duel-accent);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.duel-mode-card .btn-icon-custom {
    background: rgba(var(--duel-accent-rgb), 0.11);
    border-color: rgba(var(--duel-accent-rgb), 0.22);
    color: var(--duel-accent);
}

#btn-start-duel {
    --duel-accent: #fbbf24;
    --duel-accent-rgb: 251, 191, 36;
}

#btn-free-duel {
    --duel-accent: #fb923c;
    --duel-accent-rgb: 251, 146, 60;
}

#btn-practice {
    --duel-accent: #38bdf8;
    --duel-accent-rgb: 56, 189, 248;
}

#btn-local-pvp {
    --duel-accent: #f87171;
    --duel-accent-rgb: 248, 113, 113;
}

#btn-fastest-west {
    --duel-accent: #facc15;
    --duel-accent-rgb: 250, 204, 21;
}

#btn-high-stakes {
    --duel-accent: #fb7185;
    --duel-accent-rgb: 251, 113, 133;
}

#btn-tournament {
    --duel-accent: #d97706;
    --duel-accent-rgb: 217, 119, 6;
}

.competitive-duel-banner {
    position: absolute;
    top: 6.2rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(82vw, 520px);
    padding: 0.6rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(250, 204, 21, 0.22);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.84), rgba(88, 28, 135, 0.4));
    color: rgba(255, 248, 220, 0.96);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    z-index: 3;
    pointer-events: none;
}
.settings-choice-row {
    flex-wrap: wrap;
    justify-content: center;
}

.setting-choice {
    min-width: 140px;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.settings-select {
    appearance: none;
    background: rgba(0, 0, 0, 0.45);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.settings-select:focus {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    body {
        padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    }

    #game-container {
        width: calc(100vw - var(--safe-left) - var(--safe-right));
        height: calc(100vh - var(--safe-top) - var(--safe-bottom));
        max-width: none;
        max-height: none;
        border-radius: 0;
    }

    .duel-status {
        top: 4.8rem;
        width: min(90%, 420px);
        font-size: 0.7rem;
    }

    .pause-actions,
    .settings-choice-row,
    .pvp-setup-grid {
        flex-direction: column;
    }

    .setting-choice {
        min-width: 0;
        width: 100%;
    }
}

:focus-visible {
    outline: 3px solid rgba(251, 191, 36, 0.95);
    outline-offset: 3px;
}

.screen-transition-overlay {
    position: absolute;
    inset: 0;
    z-index: 70;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.18), transparent 42%),
        linear-gradient(120deg, rgba(0, 0, 0, 0.86), rgba(17, 24, 39, 0.7));
    transition: opacity 220ms ease;
}

.screen-transition-overlay.active {
    opacity: 1;
}

.screen-transition-overlay.settling {
    opacity: 0;
}

.orientation-hint {
    position: absolute;
    inset: 0;
    z-index: 65;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(3, 7, 18, 0.72);
    backdrop-filter: blur(10px);
}

.orientation-hint-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 360px;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(251, 191, 36, 0.45);
    border-radius: 20px;
    background: rgba(17, 24, 39, 0.88);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.6px;
}

.orientation-hint-card strong {
    color: var(--secondary);
    font-size: 1rem;
}

.orientation-hint-card span {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

#screen-menu.active .nav-btn,
#screen-menu.active .nav-btn-sm,
#screen-menu.active .glass-widget,
#screen-menu.active .subtitle {
    animation: menuRise 480ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

#screen-menu.active .nav-btn:nth-of-type(1) { animation-delay: 30ms; }
#screen-menu.active .nav-btn:nth-of-type(2) { animation-delay: 80ms; }
#screen-menu.active .nav-btn:nth-of-type(3) { animation-delay: 130ms; }
#screen-menu.active .nav-btn:nth-of-type(4) { animation-delay: 180ms; }
#screen-menu.active .hub-menu-secondary { animation: menuRise 520ms cubic-bezier(0.2, 0.9, 0.2, 1) both; animation-delay: 220ms; }
#screen-menu.active .glass-widget:nth-of-type(1) { animation-delay: 120ms; }
#screen-menu.active .glass-widget:nth-of-type(2) { animation-delay: 180ms; }

@keyframes menuRise {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.985);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

.floating-text.t-dmg-heavy,
.t-dmg-heavy {
    color: #F97316;
    text-shadow: 0 0 18px rgba(249, 115, 22, 0.55);
    font-size: 2.9rem;
}

.floating-text.t-dmg-light,
.t-dmg-light {
    color: #FCD34D;
    text-shadow: 0 0 12px rgba(252, 211, 77, 0.38);
    font-size: 2.2rem;
}

.floating-text.floating-text-crit,
.floating-text-crit {
    letter-spacing: 0.18em;
    text-shadow: 0 0 24px rgba(251, 191, 36, 0.58);
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
    scroll-behavior: auto !important;
}

body.reduced-motion .screen-transition-overlay,
body.reduced-motion #screen-menu.active .nav-btn,
body.reduced-motion #screen-menu.active .nav-btn-sm,
body.reduced-motion #screen-menu.active .glass-widget,
body.reduced-motion #screen-menu.active .subtitle,
body.reduced-motion .duel-prompt,
body.reduced-motion .floating-text {
    animation: none !important;
    transition-duration: 0.01ms !important;
}

body.reduced-motion .screen-transition-overlay.active {
    opacity: 0.3;
}

body.reduced-motion .screen-transition-overlay.settling {
    opacity: 0;
}

@media (max-width: 900px) and (orientation: portrait) {
    #screen-duel .top-hud,
    #screen-duel #duel-status,
    #screen-duel .reflex-ui,
    #screen-duel .reflex-ui-right {
        filter: blur(2px);
    }
}

@media (max-width: 768px) {
    .orientation-hint-card {
        max-width: 300px;
        padding: 1rem 1.1rem;
    }
}

.preview-modal {
    max-width: 560px;
    width: min(92%, 560px);
    gap: 1.5rem;
}

.preview-modal .title.small {
    font-size: clamp(2.9rem, 5vw, 3.8rem);
    line-height: 0.95;
    margin-bottom: 0;
}

.preview-modal .preview-actions {
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .preview-modal .title.small {
        font-size: 2.6rem;
    }
}

.nav-btn,
.nav-btn-sm {
    position: relative;
}

.menu-badge {
    position: absolute;
    top: 0.45rem;
    right: 0.65rem;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
}

.practice-modal,
.shop-inspector,
.bounty-card {
    width: min(92%, 900px);
}

.practice-modal {
    max-width: 760px;
}

.practice-grid,
.practice-notes,
.bounty-liveops {
    display: grid;
    gap: 1rem;
}

.practice-grid,
.bounty-liveops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

.practice-notes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 1.25rem 0 0;
}

.practice-note-card,
.bounty-card,
.shop-inspector {
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    padding: 1rem 1.1rem;
}

.practice-note-card strong,
.board-kicker,
.shop-inspector-kicker {
    display: block;
    color: var(--secondary);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.shop-inspector {
    width: 100%;
    margin-bottom: 1.5rem;
}

.shop-inspector-header,
.bounty-card-header,
.mastery-panel-top,
.reward-row,
.compare-row,
.quest-row,
.quest-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mastery-rank-chip,
.reward-chip {
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: var(--secondary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.shop-compare-grid,
.quest-list {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.compare-row,
.quest-row {
    padding: 0.8rem 0.95rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.compare-row span,
.quest-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.compare-row strong,
.quest-title {
    flex: 1;
    text-align: right;
    font-size: 0.95rem;
}

.compare-row strong:first-of-type {
    text-align: center;
}

.mastery-panel {
    margin-top: 1rem;
}

.mastery-progress-track {
    width: 100%;
    height: 0.7rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    overflow: hidden;
    margin-top: 0.55rem;
}

.mastery-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: inherit;
}

.quest-row.claimed {
    opacity: 0.7;
}

.quest-meta {
    white-space: nowrap;
}

.quest-meta .btn {
    min-width: 90px;
}

@media (max-width: 768px) {
    .practice-grid,
    .practice-notes,
    .bounty-liveops {
        grid-template-columns: 1fr;
    }

    .shop-inspector-header,
    .bounty-card-header,
    .reward-row,
    .quest-row,
    .quest-meta,
    .compare-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .compare-row strong,
    .compare-row strong:first-of-type {
        text-align: left;
    }
}

/* Phase 2 completion: short-height layout fit, trail widget, and persistent action rows */
.screen-panel {
    width: min(96%, 1140px);
    max-width: 1140px;
    height: min(calc(100% - 1.5rem), 680px);
    max-height: calc(100% - 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: clamp(1rem, 2.2vh, 2rem);
    overflow: hidden;
}

.panel-header,
.panel-footer,
.modal-footer {
    width: 100%;
}

.panel-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.panel-subtitle {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.5;
}

.shop-scroll-region,
.modal-scroll-region {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.3rem;
}

.pvp-setup-modal .modal-scroll-region,
.practice-modal .modal-scroll-region,
.tutorial-modal .modal-scroll-region,
.bounty-modal .modal-scroll-region,
.settings-modal .modal-scroll-region {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pvp-setup-modal,
.practice-modal,
.tutorial-modal,
.bounty-modal,
.settings-modal {
    align-items: stretch;
    text-align: left;
    max-height: min(calc(100% - 1.5rem), 680px);
    padding: clamp(1rem, 2.2vh, 2rem);
    gap: 1rem;
    overflow: hidden;
}

.pvp-setup-modal .title.small,
.practice-modal .title.small,
.tutorial-modal .title.small,
.bounty-modal .title.small,
.settings-modal .title.small,
.shop-panel .title.small {
    margin-bottom: 0;
    text-align: center;
    font-size: clamp(2.6rem, 5.2vh, 4rem);
    line-height: 0.95;
}

.modal-footer,
.panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    flex: 1 1 320px;
}

.footer-actions .btn,
.panel-footer .btn {
    flex: 1 1 220px;
}

.context-help {
    flex: 1 1 280px;
    min-width: 0;
    padding: 0.8rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

.shop-grid {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 1rem;
}

.shop-column {
    min-height: 0;
}

.list-container {
    flex: 1 1 auto;
    min-height: 210px;
    height: auto;
    max-height: none;
}

.shop-inspector {
    margin-bottom: 0;
}

.shop-compare-grid {
    max-height: 190px;
    overflow-y: auto;
    padding-right: 0.2rem;
}

.preview-stage {
    width: 100%;
    text-align: center;
    font-size: 0.86rem;
    color: var(--secondary);
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.trail-widget,
.money-widget,
.equipped-widget {
    width: min(340px, 100%);
}

.trail-widget {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.trail-widget-header,
.trail-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.trail-progress-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

#trail-boss-note {
    text-align: right;
}

.tutorial-nav {
    gap: 1rem;
}

.tutorial-nav .btn {
    min-width: 140px;
}

.bounty-modal {
    width: min(92%, 980px);
    max-width: 980px;
}

.bounty-modal .stats-grid,
.bounty-modal .quest-list,
.bounty-modal .achievements-grid {
    width: 100%;
}

.hub-right-panel {
    gap: 0.9rem;
}

@media (max-height: 820px) {
    .hub-container {
        height: 86%;
        gap: 1rem;
    }

    .hub-title {
        font-size: 4.3rem;
    }

    .hub-left-panel .subtitle {
        margin-bottom: 1rem;
        font-size: 1.15rem;
    }

    .screen-panel,
    .pvp-setup-modal,
    .practice-modal,
    .tutorial-modal,
    .bounty-modal,
    .settings-modal {
        max-height: calc(100% - 1rem);
        padding: 0.9rem 1rem;
        gap: 0.85rem;
    }

    .panel-subtitle,
    .pvp-note,
    .settings-help,
    .context-help {
        font-size: 0.84rem;
        line-height: 1.4;
    }

    .practice-note-card,
    .bounty-card,
    .shop-inspector,
    .pvp-card,
    .stat-card,
    .compare-row,
    .quest-row {
        padding: 0.75rem 0.85rem;
    }

    .list-container {
        min-height: 160px;
    }
}

@media (max-height: 760px) {
    .hub-container {
        align-items: flex-start;
    }

    .hub-right-panel {
        align-items: stretch;
        width: min(340px, 36%);
    }

    .shop-grid,
    .practice-grid,
    .practice-notes,
    .bounty-liveops {
        grid-template-columns: 1fr;
    }

    .pvp-setup-grid,
    .footer-actions,
    .panel-footer,
    .modal-footer,
    .trail-widget-header,
    .trail-progress-meta,
    .tutorial-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .footer-actions,
    .tutorial-nav {
        width: 100%;
    }

    .footer-actions .btn,
    .panel-footer .btn,
    .tutorial-nav .btn,
    .modal-footer > .btn {
        width: 100%;
    }

    #trail-boss-note {
        text-align: left;
    }
}

@media (max-width: 900px) {
    .screen-panel,
    .pvp-setup-modal,
    .practice-modal,
    .tutorial-modal,
    .bounty-modal,
    .settings-modal,
    .duel-modes-modal {
        width: min(96%, 100%);
    }

    .panel-footer,
    .modal-footer,
    .footer-actions,
    .trail-widget-header,
    .trail-progress-meta {
        flex-direction: column;
        align-items: stretch;
    }
}

.tutorial-modal .context-help,
.settings-modal .context-help {
    flex: 0 0 auto;
}

.preview-modal {
    max-height: min(calc(100% - 1.25rem), 680px);
    overflow-y: auto;
}

@media (max-height: 820px) {
    .preview-modal {
        max-height: calc(100% - 1rem);
        padding: 0.9rem 1rem;
        gap: 0.85rem;
    }

    .preview-modal .title.small {
        font-size: clamp(2.4rem, 4.6vh, 3.4rem);
    }

    .preview-name {
        font-size: 2rem;
        margin-bottom: 0.6rem;
    }

    .preview-dialogue {
        font-size: 0.88rem;
        margin-bottom: 0.55rem;
    }

    .preview-stat {
        padding: 0.65rem;
    }
}

.screen-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.shop-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.shop-panel .armory-tab-content {
    position: relative;
    z-index: 1;
}

.pvp-setup-modal,
.practice-modal,
.bounty-modal,
.settings-modal {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.tutorial-modal {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
}

.shop-scroll-region,
.modal-scroll-region {
    height: 100%;
    min-height: 0;
}

.footer-actions .btn,
.panel-footer .btn {
    flex: 0 1 220px;
}

@media (max-height: 760px) {
    .context-help {
        padding: 0.65rem 0.75rem;
    }

    .footer-actions {
        flex: 0 0 auto;
    }

    .footer-actions .btn,
    .panel-footer .btn,
    .tutorial-nav .btn,
    .modal-footer > .btn {
        flex: 0 0 auto;
        min-width: 0;
    }
}

@media (max-height: 760px) {
    .context-help {
        flex: 0 0 auto;
    }
}

@media (max-height: 760px) {
    .duel-modes-grid {
        grid-template-columns: 1fr;
    }

    .duel-mode-card {
        min-height: 0;
        padding: 0.85rem 0.95rem;
    }

    .pvp-card,
    .practice-note-card,
    .bounty-card,
    .stat-card,
    .shop-inspector,
    .compare-row,
    .quest-row {
        padding: 0.65rem 0.75rem;
    }

    .pvp-card,
    .practice-note-card,
    .settings-field {
        gap: 0.35rem;
    }

    .pvp-card h3,
    .shop-column h3,
    .achievements-title {
        font-size: 1rem;
    }

    .settings-field span,
    .preview-label,
    .board-kicker,
    .shop-inspector-kicker {
        font-size: 0.72rem;
        letter-spacing: 1.5px;
    }

    .settings-select {
        padding: 0.68rem 0.8rem;
        font-size: 0.9rem;
    }

    .pvp-note,
    .practice-note-card span,
    .quest-desc,
    .compare-row span,
    .trail-progress-meta {
        font-size: 0.8rem;
    }
}

@media (max-height: 760px) {
    .pvp-setup-modal .pvp-note {
        display: none;
    }

    .pvp-setup-modal .modal-scroll-region,
    .practice-modal .modal-scroll-region {
        gap: 0.7rem;
    }
}

/* Phase 3 diagnostics and soft-launch instrumentation surface */
.diagnostics-modal {
    width: min(94%, 1120px);
    max-width: 1120px;
    max-height: min(calc(100% - 1rem), 760px);
    padding: clamp(0.95rem, 1.8vh, 1.4rem);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.85rem;
    overflow: hidden;
    align-items: stretch;
    text-align: left;
}

.diagnostics-modal .title.small {
    margin-bottom: 0;
    text-align: center;
    font-size: clamp(2.5rem, 4.8vh, 3.8rem);
    line-height: 0.95;
}

.diagnostics-modal .modal-scroll-region {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.18rem;
}

.diagnostics-copy {
    text-align: center;
    max-width: 840px;
    margin: 0 auto;
    line-height: 1.42;
}

.diagnostics-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.52fr) minmax(300px, 0.94fr);
    gap: 0.95rem;
    align-items: start;
}

.diagnostics-main,
.diagnostics-side {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-width: 0;
}

.diagnostics-side {
    position: sticky;
    top: 0;
    align-self: start;
}

.diagnostics-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.diagnostic-card,
.diagnostic-note-card,
.diagnostics-context-card {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(12, 10, 16, 0.52));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    padding: 0.9rem 1rem;
}

.diagnostic-kicker,
.diagnostic-note-title {
    display: inline-block;
    color: var(--secondary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.65rem;
}

.diagnostic-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.diagnostic-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    padding: 0.48rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.diagnostic-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.diagnostic-row strong {
    color: var(--text-main);
    text-align: right;
    max-width: 60%;
    word-break: break-word;
}

.diagnostic-runtime-card .diagnostic-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1rem;
}

.diagnostic-runtime-card .diagnostic-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.18rem;
    padding: 0.55rem 0 0.35rem;
}

.diagnostic-runtime-card .diagnostic-row strong {
    text-align: left;
    max-width: 100%;
}

.diagnostic-log {
    min-height: 96px;
    max-height: 132px;
    overflow: auto;
    margin: 0;
    padding: 0.82rem 0.9rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.34);
    color: var(--text-main);
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.diagnostics-capture-card {
    min-height: 0;
}

.diagnostics-tools-card,
.diagnostic-seed-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.diagnostics-tools-card .diagnostic-helper,
.diagnostics-context-card {
    margin: 0;
}

.diagnostics-tool-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

#btn-export-diagnostics {
    grid-column: 1 / -1;
}

.diagnostic-helper {
    margin: 0;
    line-height: 1.45;
}

.diagnostic-seed-field {
    gap: 0.45rem;
    margin-bottom: 0;
}

.diagnostic-input {
    width: 100%;
    padding: 0.72rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.32);
    color: var(--text-main);
    font-size: 0.92rem;
}

.diagnostic-input:focus {
    outline: 2px solid rgba(234, 179, 8, 0.55);
    outline-offset: 2px;
}

.diagnostics-tool-list .btn {
    width: 100%;
}

.diagnostics-tools-card .btn,
.diagnostic-inline-actions .btn {
    min-height: 0;
    padding: 0.72rem 0.85rem;
    font-size: 0.88rem;
}

.diagnostic-inline-actions {
    justify-content: stretch;
    gap: 0.55rem;
    flex: 0 0 auto;
}

.diagnostic-inline-actions .btn {
    flex: 1 1 160px;
}

.diagnostics-footer {
    justify-content: flex-end;
    align-items: center;
}

.diagnostics-footer .btn {
    flex: 0 0 auto;
    min-width: 220px;
}

@media (max-height: 820px) {
    .diagnostics-modal {
        max-height: calc(100% - 1rem);
        padding: 0.85rem 0.95rem;
        gap: 0.75rem;
    }

    .diagnostics-copy,
    .diagnostic-row,
    .diagnostic-log,
    .diagnostic-helper,
    .diagnostic-input {
        font-size: 0.84rem;
    }

    .diagnostic-card,
    .diagnostic-note-card,
    .diagnostics-context-card {
        padding: 0.78rem 0.88rem;
    }
}

@media (max-height: 760px), (max-width: 1040px) {
    .diagnostics-shell,
    .diagnostics-summary-grid,
    .diagnostic-runtime-card .diagnostic-rows {
        grid-template-columns: 1fr;
    }

    .diagnostics-side {
        position: static;
    }

    .diagnostics-footer,
    .diagnostic-inline-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .diagnostics-footer .btn,
    .diagnostic-inline-actions .btn {
        width: 100%;
        flex: 0 0 auto;
    }
}

@media (max-width: 760px) {
    .diagnostics-tool-list {
        grid-template-columns: 1fr;
    }
}

/* ============================
   CUSTOM SCROLLBARS
   ============================ */
.list-container,
.shop-scroll-region,
.modal-scroll-region {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.list-container::-webkit-scrollbar,
.shop-scroll-region::-webkit-scrollbar,
.modal-scroll-region::-webkit-scrollbar {
    width: 6px;
}

.list-container::-webkit-scrollbar-track,
.shop-scroll-region::-webkit-scrollbar-track,
.modal-scroll-region::-webkit-scrollbar-track {
    background: transparent;
}

.list-container::-webkit-scrollbar-thumb,
.shop-scroll-region::-webkit-scrollbar-thumb,
.modal-scroll-region::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.list-container::-webkit-scrollbar-thumb:hover,
.shop-scroll-region::-webkit-scrollbar-thumb:hover,
.modal-scroll-region::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* ═══════════════════════════════════════════
   Phase 4-6 shared modal title fix
   ═══════════════════════════════════════════ */
.glass-modal .title.small {
    margin-bottom: 0;
    text-align: center;
    font-size: clamp(1.4rem, 3.2vw, 2.2rem);
    line-height: 1;
    white-space: nowrap;
    max-width: 100%;
}

/* ═══════════════════════════════════════════
   PHASE 4 — Monetization & Social UI
   ═══════════════════════════════════════════ */
.gems-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.gems-display { color: #A78BFA; font-weight: 700; }

.ad-stub-overlay { position: absolute; inset: 0; z-index: 900; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; }
.ad-stub-card { text-align: center; color: var(--text-main, #F8F9FA); padding: 2rem; }
.ad-stub-timer { font-size: 2.5rem; font-weight: 800; margin-top: 1rem; color: var(--secondary, #EAB308); }

.leaderboard-modal { max-width: 500px; }
.leaderboard-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.leaderboard-tabs .btn { flex: 1 1 120px; font-size: 0.75rem; padding: 0.45rem 0.55rem; }
.leaderboard-tabs .btn.active { background: var(--primary, #FF5A36); color: #fff; }
.leaderboard-list { display: flex; flex-direction: column; gap: 0.5rem; min-height: 140px; }
.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    width: 100%;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(18, 16, 26, 0.72);
    color: inherit;
    text-align: left;
}
.leaderboard-row.top-three { border-left: 3px solid var(--secondary, #EAB308); }
.leaderboard-row.selected {
    border-color: rgba(255, 90, 54, 0.45);
    background: linear-gradient(135deg, rgba(255, 90, 54, 0.16), rgba(18, 16, 26, 0.82));
}
.lb-rank { font-weight: 800; min-width: 1.5rem; color: var(--secondary, #EAB308); }
.lb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-name { flex: 1; font-weight: 700; }
.lb-subtitle { font-size: 0.72rem; color: rgba(248, 249, 250, 0.65); }
.lb-score { font-weight: 700; color: var(--primary, #FF5A36); white-space: nowrap; }
.lb-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.trust-preview { background: rgba(96, 165, 250, 0.18); color: #BFDBFE; }
.trust-friend { background: rgba(34, 197, 94, 0.18); color: #BBF7D0; }
.trust-local { background: rgba(251, 191, 36, 0.2); color: #FDE68A; }
.trust-verified { background: rgba(244, 63, 94, 0.18); color: #FDA4AF; }
.leaderboard-player {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem 0;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.1));
}

.most-wanted-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.most-wanted-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.most-wanted-kicker,
.most-wanted-profile-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(253, 224, 71, 0.9);
}
.most-wanted-title {
    margin: 0.2rem 0 0.35rem;
    font-size: 1.15rem;
}
.most-wanted-copy {
    max-width: 38rem;
    margin: 0;
}
.most-wanted-trust-note {
    max-width: 16rem;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.22);
    color: #DBEAFE;
    font-size: 0.78rem;
    line-height: 1.45;
}
.most-wanted-filters { margin-bottom: 0; }
.most-wanted-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.most-wanted-board-panel,
.most-wanted-profile-card {
    padding: 0.95rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(22, 18, 30, 0.84), rgba(12, 11, 18, 0.9));
}
.most-wanted-board-topline,
.most-wanted-profile-meta,
.most-wanted-profile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.76rem;
    color: rgba(248, 249, 250, 0.65);
}
.most-wanted-board-topline { margin-bottom: 0.8rem; }
.most-wanted-board-label,
.most-wanted-board-metric {
    font-weight: 700;
    color: rgba(248, 249, 250, 0.9);
}
.most-wanted-player-row strong {
    font-size: 1rem;
    color: #FDE68A;
}
.most-wanted-player-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(248, 249, 250, 0.68);
}
.most-wanted-player-note {
    font-size: 0.74rem;
    color: rgba(248, 249, 250, 0.58);
}
.most-wanted-profile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.most-wanted-profile-header h3 {
    margin: 0.2rem 0;
    font-size: 1.05rem;
}
.most-wanted-profile-handle {
    color: rgba(248, 249, 250, 0.7);
    font-size: 0.82rem;
}
.most-wanted-profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 1rem 0;
}
.most-wanted-stat {
    padding: 0.7rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}
.most-wanted-stat-label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(248, 249, 250, 0.55);
}
.most-wanted-profile-copy {
    margin: 0 0 1rem;
    color: rgba(248, 249, 250, 0.82);
    line-height: 1.5;
}
.most-wanted-profile-overlay {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(8, 7, 12, 0.72);
    backdrop-filter: blur(8px);
}
.most-wanted-profile-dialog {
    width: min(720px, calc(100% - 1rem));
    max-height: min(calc(100% - 1rem), 640px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.8rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(20, 17, 29, 0.96), rgba(10, 9, 16, 0.98));
    box-shadow: 0 24px 68px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}
.most-wanted-profile-dialog-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.most-wanted-profile-dialog-topline h4 {
    margin: 0.2rem 0 0;
    font-size: 1.18rem;
}
.most-wanted-profile-empty {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.most-wanted-actions {
    display: flex;
    justify-content: flex-end;
}
.leaderboard-empty {
    padding: 1.2rem 0.8rem;
    border-radius: 10px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 860px) {
    .most-wanted-header,
    .most-wanted-profile-header,
    .most-wanted-board-topline,
    .most-wanted-profile-meta,
    .most-wanted-profile-footer,
    .leaderboard-player {
        flex-direction: column;
        align-items: flex-start;
    }

    .most-wanted-trust-note {
        max-width: none;
        width: 100%;
    }

    .most-wanted-grid {
        grid-template-columns: 1fr;
    }

    .leaderboard-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .lb-score {
        order: 4;
    }
}

.store-modal { max-width: 560px; }
.store-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.store-item { padding: 1rem; text-align: center; }
.store-item h3 { font-size: 0.95rem; margin-bottom: 0.3rem; }
.store-item .btn { margin-top: 0.5rem; }
.store-restore-row { text-align: center; margin-top: 1rem; }

.rate-prompt-overlay { position: absolute; inset: 0; z-index: 850; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; }
.rate-prompt-card { max-width: 380px; padding: 1.5rem; text-align: center; }
.rate-prompt-actions { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1rem; }

/* ═══════════════════════════════════════════
   PHASE 5 — Battle Pass, Cosmetics, Tournament
   ═══════════════════════════════════════════ */
.battlepass-modal { max-width: 600px; }
.bp-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.85rem; }
.bp-tiers-list { display: flex; flex-direction: column; gap: 0.35rem; max-height: 340px; overflow-y: auto; }
.bp-tier-row { display: grid; grid-template-columns: 2rem 1fr 1fr; gap: 0.5rem; align-items: center; padding: 0.4rem 0.5rem; background: var(--glass-bg, rgba(26,26,36,0.7)); border-radius: 6px; font-size: 0.8rem; }
.bp-tier-row.locked { opacity: 0.5; }
.bp-tier-row.unlocked { opacity: 1; }
.bp-tier-num { font-weight: 700; text-align: center; color: var(--secondary, #EAB308); }
.bp-reward { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.bp-reward.claimed { opacity: 0.5; text-decoration: line-through; }
.bp-reward.locked-premium { opacity: 0.35; }
.bp-reward .bp-claim { font-size: 0.65rem; padding: 0.2rem 0.5rem; }

.cosmetics-modal { max-width: 600px; }
.cosmetic-section { margin-bottom: 1rem; }
.cosmetic-section h3 { font-size: 0.9rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.1)); padding-bottom: 0.3rem; }
.cosmetic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; }
.cosmetic-card { padding: 0.75rem; background: var(--glass-bg, rgba(26,26,36,0.7)); border-radius: 8px; border: 1px solid var(--glass-border, rgba(255,255,255,0.1)); }
.cosmetic-card.equipped { border-color: var(--primary, #FF5A36); }
.cosmetic-card.owned { border-color: var(--secondary, #EAB308); }
.cosmetic-name { font-weight: 700; font-size: 0.85rem; }
.cosmetic-desc { font-size: 0.75rem; margin: 0.3rem 0; }
.cosmetic-actions { margin-top: 0.4rem; }
.cosmetic-actions .btn { font-size: 0.7rem; padding: 0.2rem 0.6rem; }
.cosmetic-equipped-tag { font-size: 0.7rem; color: var(--primary, #FF5A36); font-weight: 700; }

.tournament-modal { max-width: 480px; }
.tournament-status { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: 0.85rem; }
.tournament-opponent { text-align: center; padding: 1rem; }
.tournament-opponent h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.tournament-history-row { display: flex; justify-content: space-between; padding: 0.4rem 0.75rem; background: var(--glass-bg, rgba(26,26,36,0.7)); border-radius: 6px; margin-bottom: 0.3rem; font-size: 0.85rem; }

.combo-text { color: var(--secondary, #EAB308); font-weight: 800; font-size: 1.3rem; text-shadow: 0 0 8px rgba(234,179,8,0.6); text-align: center; transform: translateX(-50%); }

/* Slow-mo + Screen shake */
.slow-mo canvas { transition: filter 0.3s; filter: contrast(1.1) saturate(1.2); }
@keyframes shake { 0%,100%{ transform:translate(0); } 25%{ transform:translate(-3px,2px); } 50%{ transform:translate(3px,-2px); } 75%{ transform:translate(-2px,-3px); } }

/* ═══════════════════════════════════════════
   PHASE 6 — Expansion UI
   ═══════════════════════════════════════════ */
.generic-modal { max-width: 560px; }

/* Status effects HUD */
.status-effects-hud { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 50; pointer-events: none; }
.status-effect-icon { display: flex; flex-direction: column; align-items: center; font-size: 1.4rem; background: rgba(0,0,0,0.5); border-radius: 8px; padding: 0.3rem 0.5rem; }
.status-timer { font-size: 0.6rem; color: var(--text-muted, #A1A1AA); }

/* QTE overlay */
.qte-overlay { position: absolute; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); }
.qte-overlay.hidden { display: none; }
.qte-prompt-card { text-align: center; padding: 2rem; }
.qte-prompt-text { font-family: var(--font-western, 'Rye', cursive); font-size: 3rem; color: var(--primary, #FF5A36); text-shadow: 0 0 20px rgba(255,90,54,0.6); animation: qte-pulse 0.4s ease-in-out infinite alternate; }
.qte-hint { margin-top: 0.5rem; color: var(--text-muted, #A1A1AA); }
.qte-timer-bar { width: 200px; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; margin: 1rem auto 0; overflow: hidden; }
.qte-timer-fill { height: 100%; background: var(--primary, #FF5A36); animation: qte-drain linear forwards; width: 100%; }
@keyframes qte-drain { from { width: 100%; } to { width: 0%; } }
@keyframes qte-pulse { from { transform: scale(1); } to { transform: scale(1.05); } }
.qte-result-flash { font-size: 2rem; font-weight: 800; text-align: center; }
.qte-result-flash.success { color: #34D399; }
.qte-result-flash.fail { color: #EF4444; }

/* Weapon mods */
.mod-slots { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.mod-slot { flex: 1; padding: 0.75rem; background: var(--glass-bg, rgba(26,26,36,0.7)); border-radius: 8px; text-align: center; border: 1px dashed var(--glass-border, rgba(255,255,255,0.1)); display: flex; align-items: center; justify-content: space-between; }
.mod-slot.filled { border-style: solid; border-color: var(--secondary, #EAB308); }
.mod-slot.empty { color: var(--text-muted, #A1A1AA); font-size: 0.8rem; }
.mod-inventory { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
.mod-card { padding: 0.75rem; background: var(--glass-bg, rgba(26,26,36,0.7)); border-radius: 8px; border: 1px solid var(--glass-border, rgba(255,255,255,0.1)); }
.mod-card.owned { border-color: var(--secondary, #EAB308); }
.mod-card.equipped { border-color: var(--primary, #FF5A36); }
.mod-name { font-weight: 700; font-size: 0.85rem; }
.mod-desc { font-size: 0.75rem; margin: 0.3rem 0; }
.mod-card .btn { font-size: 0.7rem; padding: 0.2rem 0.6rem; }

/* Hazard notice */
.hazard-notice { color: #F59E0B; font-weight: 700; font-size: 0.9rem; text-align: center; transform: translateX(-50%); background: rgba(0,0,0,0.6); padding: 0.4rem 1rem; border-radius: 6px; }

/* Lore cards */
.lore-card { padding: 1rem; background: var(--glass-bg, rgba(26,26,36,0.7)); border-radius: 8px; margin-bottom: 0.75rem; border: 1px solid var(--glass-border, rgba(255,255,255,0.1)); }
.lore-card.locked { opacity: 0.4; }
.lore-card.unlocked { border-left: 3px solid var(--secondary, #EAB308); }
.lore-card h3 { font-size: 0.95rem; margin-bottom: 0.3rem; }

/* Campaign map */
.campaign-map-track { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding: 0.5rem; }
.map-node { display: flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.6rem; background: var(--glass-bg, rgba(26,26,36,0.7)); border-radius: 6px; font-size: 0.75rem; border: 1px solid var(--glass-border, rgba(255,255,255,0.1)); }
.map-node.completed { opacity: 0.6; border-color: #34D399; }
.map-node.current { border-color: var(--primary, #FF5A36); background: rgba(255,90,54,0.15); }
.map-node.boss-node { border-color: var(--secondary, #EAB308); }
.map-node-marker { font-size: 1rem; }
.map-connector { width: 12px; height: 2px; background: var(--glass-border, rgba(255,255,255,0.1)); }

/* Accessibility - Colorblind filters */
.cb-protanopia { filter: url('#protanopia-filter') !important; }
.cb-deuteranopia { filter: url('#deuteranopia-filter') !important; }
.cb-tritanopia { filter: hue-rotate(180deg) !important; }
.cb-achromatopsia { filter: grayscale(100%) !important; }
.high-contrast { filter: contrast(1.4) !important; }

.a11y-slider { width: 100%; accent-color: var(--primary, #FF5A36); }

/* Weather effects */
.weather-dusty::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(139,90,43,0.08); z-index: 5; }
.weather-rainy::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 50%, rgba(100,149,237,0.03) 50%); background-size: 4px 4px; z-index: 5; animation: rain-move 0.3s linear infinite; }
@keyframes rain-move { from { background-position: 0 0; } to { background-position: 4px 4px; } }
.weather-foggy::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(200,200,200,0.06); z-index: 5; }
.weather-stormy::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; animation: storm-flash 4s ease-in-out infinite; }
@keyframes storm-flash { 0%,90%,100%{ background:transparent; } 92%{ background:rgba(255,255,255,0.15); } 94%{ background:transparent; } 96%{ background:rgba(255,255,255,0.08); } }

/* Cosmetic themes */
.theme-midnight { --primary: #6366F1; --secondary: #818CF8; }
.theme-sunset { --primary: #F59E0B; --secondary: #FBBF24; }
.theme-blood { --primary: #DC2626; --secondary: #F87171; }

/* =====================================================================
   March 2026 UX clarity pass
   ===================================================================== */
.btn {
    border-radius: 14px;
    font-size: 1rem;
    letter-spacing: 0.12em;
}

.btn.primary {
    border: 1px solid rgba(255, 190, 122, 0.28);
    background: linear-gradient(180deg, #ff6f47 0%, #de4b28 100%);
    box-shadow: 0 12px 24px rgba(255, 90, 54, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(255, 90, 54, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn.secondary {
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

#screen-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 7, 14, 0.86) 0%, rgba(5, 7, 14, 0.76) 22%, rgba(5, 7, 14, 0.38) 48%, rgba(5, 7, 14, 0.12) 68%, transparent 82%),
        radial-gradient(circle at 18% 45%, rgba(255, 180, 87, 0.14), transparent 34%);
    pointer-events: none;
}

.hub-container {
    position: relative;
    z-index: 1;
    width: min(1120px, 94%);
    height: min(86%, 620px);
    align-items: stretch;
    gap: clamp(1rem, 2vw, 2rem);
}

.hub-left-panel,
.hub-right-panel {
    justify-content: center;
}

.hub-left-panel {
    max-width: 420px;
}

.hub-brand {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1.2rem;
}

.menu-kicker {
    font-size: 0.76rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(248, 249, 250, 0.72);
}

.hub-title {
    margin-bottom: 0;
    max-width: 520px;
    font-size: clamp(3.7rem, 6vw, 5.25rem);
    line-height: 0.92;
    text-align: left;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.46));
}

.menu-subtitle {
    margin-bottom: 0;
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    color: rgba(248, 249, 250, 0.7);
}

.hub-menu-list {
    width: min(100%, 390px);
    gap: 0.72rem;
}

.nav-btn {
    min-height: 4rem;
    padding: 0.95rem 1.15rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    background: linear-gradient(180deg, rgba(11, 15, 24, 0.86), rgba(11, 15, 24, 0.7));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

.nav-btn:hover {
    transform: translateX(4px);
    background: linear-gradient(180deg, rgba(18, 24, 36, 0.94), rgba(12, 17, 27, 0.8));
    border-color: rgba(255, 186, 120, 0.24);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}

.nav-btn:active {
    transform: translateX(1px) scale(0.985);
}

.nav-btn .btn-text,
.nav-btn-sm .btn-text {
    letter-spacing: 0.14em;
}

.nav-btn .btn-text {
    font-size: 1rem;
}

.btn-icon-custom {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(255, 214, 102, 0.18);
    color: #fbbf24;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.2);
}

.hub-utility-group {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.2rem;
}

.hub-utility-label {
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(248, 249, 250, 0.62);
}

.hub-menu-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    width: min(100%, 390px);
}

.nav-btn-sm {
    min-height: 3.2rem;
    justify-content: flex-start;
    padding: 0.72rem 0.8rem;
    border-radius: 14px;
    background: rgba(8, 12, 20, 0.78);
    color: rgba(248, 249, 250, 0.92);
}

.nav-btn-sm .btn-text {
    font-size: 0.74rem;
}

.nav-btn-sm:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 214, 102, 0.16);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.nav-btn-sm.outline {
    border-style: solid;
    color: rgba(248, 249, 250, 0.84);
}

.menu-badge {
    top: 0.38rem;
    right: 0.42rem;
    min-width: 1.18rem;
    height: 1.18rem;
    font-size: 0.62rem;
}

.hub-right-panel {
    max-width: 360px;
    width: 100%;
    gap: 0.85rem;
    align-items: stretch;
}

.money-widget,
.equipped-widget,
.trail-widget {
    width: 100%;
}

.glass-widget {
    padding: 1.15rem 1.35rem;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(10, 14, 22, 0.82), rgba(10, 14, 22, 0.68));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.24);
}

.money-widget span:first-child,
.equipped-widget span:first-child,
.trail-widget > span:first-child {
    font-size: 0.74rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(248, 249, 250, 0.64);
}

.menu-widget-subtext {
    font-size: 0.92rem;
}

#menu-context-help {
    line-height: 1.48;
}

#screen-store.glass-modal {
    background: rgba(4, 7, 13, 0.8);
    backdrop-filter: blur(14px);
}

.store-modal {
    width: min(1080px, 94vw);
    max-width: 1080px;
    max-height: min(calc(100% - 1.5rem), 690px);
    padding: 0;
    gap: 0;
    overflow: hidden;
    align-items: stretch;
    text-align: left;
}

.store-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.store-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.3rem 1.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
}

.store-kicker,
.store-section-title,
.store-item-meta,
.store-balance-label {
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(248, 249, 250, 0.62);
}

.store-modal .title.small {
    text-align: left;
    white-space: normal;
    line-height: 0.92;
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
}

.store-copy {
    max-width: 620px;
    line-height: 1.52;
}

.store-balance {
    min-width: 220px;
    padding: 1rem 1.15rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

.store-balance-value {
    margin-top: 0.45rem;
    font-size: 1.7rem;
    font-weight: 800;
    color: #fbbf24;
}

.store-scroll-region {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.25rem 1.4rem 0.5rem;
}

.store-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.store-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 0.85rem;
}

.store-gem-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.store-item {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 0;
    padding: 1.15rem;
    text-align: left;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: linear-gradient(180deg, rgba(15, 20, 31, 0.9), rgba(10, 14, 22, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.store-item.featured {
    background: linear-gradient(180deg, rgba(76, 32, 20, 0.92), rgba(27, 16, 18, 0.86));
    border-color: rgba(255, 178, 102, 0.2);
}

.store-item.support {
    background: linear-gradient(180deg, rgba(17, 29, 46, 0.92), rgba(10, 14, 22, 0.86));
}

.store-item.owned {
    border-color: rgba(52, 211, 153, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(52, 211, 153, 0.12);
}

.store-item h3 {
    font-size: 1.15rem;
    margin-bottom: 0;
}

.store-item p {
    line-height: 1.5;
}

.store-item-note {
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(248, 249, 250, 0.74);
    font-size: 0.82rem;
    line-height: 1.45;
}

.store-item-price {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-main);
}

.store-item .btn {
    min-width: 140px;
    margin-top: auto;
    align-self: flex-start;
}

.store-restore-row {
    display: flex;
    justify-content: flex-start;
    padding-bottom: 0.75rem;
}

.store-footer {
    padding: 0 1.5rem 1.25rem;
    justify-content: flex-end;
}

.duel-status {
    top: 5.95rem;
    padding: 0.38rem 0.9rem;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
    background: rgba(7, 10, 16, 0.72);
}

.duel-prompt {
    font-size: clamp(4.2rem, 9vw, 6rem);
    letter-spacing: 0.08em;
    text-shadow: 0 0 14px rgba(255, 90, 54, 0.38), 0 6px 0 rgba(127, 29, 29, 0.8), 0 14px 20px rgba(0, 0, 0, 0.7);
}

.floating-text {
    font-size: 2.05rem;
    animation: floatUp 0.82s ease-out forwards;
}

.t-crit {
    font-size: 2.7rem;
    text-shadow: 0 0 14px rgba(52, 211, 153, 0.46);
}

.t-hit {
    color: #f59e0b;
}

.floating-text.t-dmg-heavy,
.t-dmg-heavy {
    font-size: 2.25rem;
}

.floating-text.t-dmg-light,
.t-dmg-light {
    font-size: 1.65rem;
}

.combo-text {
    padding: 0.34rem 0.75rem;
    border-radius: 999px;
    background: rgba(7, 10, 16, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fcd34d;
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-shadow: none;
}

.status-effects-hud {
    top: 5rem;
    gap: 0.35rem;
}

.status-effect-icon {
    font-size: 0.96rem;
    padding: 0.22rem 0.42rem;
    border-radius: 10px;
    background: rgba(7, 10, 16, 0.68);
}

.status-timer {
    font-size: 0.58rem;
}

.qte-overlay {
    inset: auto 50% 1.1rem auto;
    transform: translateX(50%);
    align-items: flex-end;
    justify-content: center;
    background: transparent;
    z-index: 55;
}

.qte-prompt-card {
    width: min(420px, calc(100vw - 2rem));
    padding: 0.95rem 1rem;
    border-radius: 18px;
    background: rgba(7, 10, 16, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.35);
}

.qte-prompt-text {
    font-size: 1.75rem;
    text-shadow: none;
    animation: none;
}

.qte-hint {
    font-size: 0.88rem;
}

.qte-result-flash {
    padding: 0.8rem 1rem;
    font-size: 1.05rem;
    border-radius: 14px;
    background: rgba(7, 10, 16, 0.84);
}

.hazard-notice {
    font-size: 0.76rem;
    padding: 0.32rem 0.75rem;
}

.weather-dusty::after {
    background: rgba(139, 90, 43, 0.04);
}

.weather-rainy::after {
    background: linear-gradient(transparent 50%, rgba(100, 149, 237, 0.02) 50%);
    background-size: 6px 12px;
    animation: rain-move 0.8s linear infinite;
}

.weather-foggy::after {
    background: rgba(200, 200, 200, 0.035);
}

.weather-stormy::after {
    background: transparent;
    animation: none;
}

@media (max-height: 820px) {
    .hub-container {
        height: 88%;
    }

    .hub-title {
        font-size: clamp(3.25rem, 5.4vw, 4.5rem);
    }

    .hub-menu-list {
        gap: 0.62rem;
    }
}

@media (max-width: 1080px) {
    .hub-container {
        flex-direction: column;
        justify-content: center;
        height: min(92%, 680px);
    }

    .hub-left-panel,
    .hub-right-panel {
        max-width: none;
        width: 100%;
    }

    .hub-right-panel {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .store-header,
    .store-feature-grid,
    .store-gem-grid,
    .hub-right-panel {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .store-item .btn {
        width: 100%;
        align-self: stretch;
    }
}

/* Follow-up adjustments for menu readability */
.hub-brand {
    padding-top: 0.95rem;
}

.hub-title {
    font-size: clamp(3.05rem, 5.2vw, 4.5rem);
}

.menu-subtitle {
    font-size: 0.88rem;
    letter-spacing: 0.18em;
}

#screen-menu.active .hub-brand,
#screen-menu.active .nav-btn,
#screen-menu.active .nav-btn-sm,
#screen-menu.active .glass-widget,
#screen-menu.active .subtitle {
    animation: menuRiseClean 320ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes menuRiseClean {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Laptop-height menu fit pass */
.hub-brand {
    margin-bottom: 0.85rem;
    padding-top: 0.35rem;
}

.hub-title {
    font-size: clamp(2.65rem, 4.5vw, 3.95rem);
}

.menu-subtitle {
    font-size: 0.8rem;
    letter-spacing: 0.16em;
}

.hub-menu-list {
    gap: 0.56rem;
}

.nav-btn {
    min-height: 3.45rem;
    padding: 0.78rem 1rem;
}

.nav-btn .btn-text {
    font-size: 0.93rem;
}

.nav-btn-sm {
    min-height: 2.7rem;
    padding: 0.58rem 0.72rem;
}

.nav-btn-sm .btn-text {
    font-size: 0.68rem;
}

.hub-utility-group {
    gap: 0.38rem;
}

.btn-icon-custom {
    width: 30px;
    height: 30px;
    margin-right: 0.65rem;
    font-size: 1rem;
}

.btn-icon-custom.sm,
.nav-btn-sm .btn-icon-custom {
    width: 22px;
    height: 22px;
    margin-right: 0.45rem;
    font-size: 0.8rem;
}

.glass-widget {
    padding: 1rem 1.15rem;
}

.hub-right-panel {
    gap: 0.72rem;
}

/* ═══════════════════════════════════════════
   Phase 7 — Account bootstrap modal
   ═══════════════════════════════════════════ */
.account-profile-modal {
    width: min(100%, 1080px);
    max-width: 1080px;
    max-height: min(88vh, 860px);
}

.account-profile-modal .modal-scroll-region {
    gap: 0.72rem;
}

.account-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
}

.account-overview-card {
    min-height: 104px;
}

.account-profile-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0;
    padding: 0.95rem 1.05rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(255, 90, 54, 0.18), rgba(17, 24, 39, 0.9));
}

.account-profile-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(253, 224, 71, 0.92);
}

.account-profile-banner h3 {
    margin: 0.25rem 0 0.2rem;
    font-size: 1.25rem;
}

.account-profile-handle {
    color: rgba(248, 249, 250, 0.72);
    font-size: 0.86rem;
}

.account-profile-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.42rem 0.75rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.18);
    color: #FDE68A;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.account-profile-chip.account-profile-chip-live {
    background: rgba(34, 197, 94, 0.18);
    color: #BBF7D0;
}

.account-profile-chip.account-profile-chip-supporter {
    background: rgba(251, 191, 36, 0.18);
    color: #FDE68A;
}

.account-launch-note {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.95rem 1.05rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.03));
    color: rgba(248, 249, 250, 0.82);
    line-height: 1.38;
}

.account-launch-note strong {
    color: rgba(248, 249, 250, 0.98);
    font-size: 0.82rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.account-launch-note span {
    color: rgba(248, 249, 250, 0.76);
    font-size: 0.92rem;
}

.account-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
    gap: 0.95rem;
}

.account-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.account-card-setup {
    gap: 0.9rem;
}

.account-meta-list {
    display: grid;
    gap: 0.46rem;
}

.account-meta-list-identity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.account-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8rem;
    color: rgba(248, 249, 250, 0.72);
}

.account-meta-row strong {
    max-width: 65%;
    color: rgba(248, 249, 250, 0.96);
    text-align: right;
    word-break: break-word;
}

.account-meta-list-identity .account-meta-row {
    display: grid;
    justify-content: flex-start;
    gap: 0.14rem;
    padding: 0.62rem 0.74rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}

.account-meta-list-identity .account-meta-row strong {
    max-width: none;
    text-align: left;
}

.account-handle-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    align-items: center;
    gap: 0.5rem;
}

.account-setup-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    align-items: end;
}

.account-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.account-field .competitive-input {
    width: 100%;
    min-height: 3rem;
    padding: 0.78rem 0.92rem;
    font-size: 0.98rem;
}

.account-field-handle .account-handle-row .competitive-input {
    min-width: 0;
}

.account-handle-row .btn {
    min-width: 112px;
    min-height: 3rem;
    padding-inline: 0.85rem;
    font-size: 0.84rem;
}

.account-feedback {
    min-height: 0;
    padding: 0.68rem 0.82rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(248, 249, 250, 0.72);
    line-height: 1.38;
    font-size: 0.9rem;
}

.account-feedback[data-tone="success"] {
    background: rgba(34, 197, 94, 0.14);
    color: #BBF7D0;
}

.account-feedback[data-tone="error"] {
    background: rgba(220, 38, 38, 0.18);
    color: #FECACA;
}

@media (max-width: 860px) {
    .account-overview-grid,
    .account-profile-grid {
        grid-template-columns: 1fr;
    }

    .account-meta-list-identity,
    .account-setup-grid {
        grid-template-columns: 1fr;
    }

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

    .account-profile-modal .footer-actions {
        flex-wrap: wrap;
    }

    .account-handle-row .btn {
        width: 100%;
    }
}

html {
    scroll-behavior: smooth;
}

/* ═══════════════════════════════════════════
   Hosted site shell
   ═══════════════════════════════════════════ */
.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: rgba(18, 10, 7, 0.94);
    color: #f7ead9;
    text-decoration: none;
    border: 1px solid rgba(255, 214, 153, 0.2);
    transform: translateY(-180%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

body.site-hosting {
    min-height: 100vh;
    height: auto;
    padding: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    color: #f6ecde;
    background:
        radial-gradient(circle at top, rgba(236, 151, 65, 0.18), transparent 28%),
        radial-gradient(circle at 20% 18%, rgba(168, 75, 39, 0.2), transparent 22%),
        linear-gradient(180deg, #140d0a 0%, #25160f 28%, #1a100b 62%, #0f0907 100%);
}

body.site-hosting a {
    color: inherit;
}

body.site-hosting a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.site-shell {
    position: relative;
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: clamp(1rem, 2.4vw, 1.8rem);
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 4.5rem);
}

.frontier-topbar {
    position: sticky;
    top: 0.75rem;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 225, 189, 0.1);
    background: rgba(17, 10, 8, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.frontier-brand {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    text-decoration: none;
}

.frontier-brand-kicker,
.section-kicker,
.manifest-kicker,
.mode-card-tag,
.ground-label,
.play-note-kicker,
.poster-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 226, 190, 0.68);
}

.frontier-brand-title {
    font-family: var(--font-western);
    font-size: 1.8rem;
    letter-spacing: 0.12em;
    color: #f7d8a6;
}

.frontier-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.frontier-nav a,
.site-footer-links a {
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247, 234, 217, 0.82);
    border: 1px solid transparent;
    transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.frontier-nav a:hover,
.frontier-nav a:focus-visible,
.site-footer-links a:hover,
.site-footer-links a:focus-visible {
    border-color: rgba(255, 211, 154, 0.18);
    background: rgba(255, 211, 154, 0.08);
    color: #fff4e5;
}

.frontier-hero,
.frontier-section {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    border: 1px solid rgba(255, 232, 205, 0.08);
    background:
        linear-gradient(180deg, rgba(39, 24, 17, 0.88), rgba(18, 11, 8, 0.92)),
        radial-gradient(circle at top right, rgba(255, 173, 92, 0.08), transparent 28%);
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.28);
}

.frontier-hero::before,
.frontier-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.frontier-hero::before {
    background:
        linear-gradient(120deg, rgba(0, 0, 0, 0.45), transparent 45%),
        url("assets/High Noon at the Ghost Town.webp") center center / cover;
    opacity: 0.16;
}

.frontier-section::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%),
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.025) 48%, transparent 100%);
    opacity: 0.85;
}

.frontier-hero > *,
.frontier-section > * {
    position: relative;
    z-index: 1;
}

.frontier-hero {
    min-height: min(980px, 100svh);
    padding: clamp(1.4rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
}

.hero-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(1.4rem, 3vw, 2.6rem);
    align-items: center;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.8rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: rgba(255, 229, 198, 0.08);
    border: 1px solid rgba(255, 229, 198, 0.1);
    color: rgba(255, 229, 198, 0.82);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.frontier-hero-title {
    margin-bottom: 1rem;
    max-width: 9ch;
    text-align: left;
    font-size: clamp(3.8rem, 8vw, 6.8rem);
    line-height: 0.9;
}

.hero-lead,
.section-copy,
.manifest-card p,
.mode-card p,
.ground-card p,
.play-note-card p,
.site-footer-copy p {
    color: rgba(246, 236, 222, 0.78);
    line-height: 1.68;
}

.hero-lead {
    max-width: 35rem;
    font-size: clamp(1rem, 1.55vw, 1.16rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.6rem;
}

.hero-cta {
    min-width: 210px;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    width: min(100%, 48rem);
    margin-top: 1.8rem;
}

.hero-stat,
.manifest-card,
.play-note-card {
    padding: 1.15rem 1.2rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 246, 233, 0.08), rgba(255, 246, 233, 0.02));
    border: 1px solid rgba(255, 236, 212, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hero-stat-value {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-western);
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: 0.06em;
    color: #f3c47b;
}

.hero-stat-label {
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(246, 236, 222, 0.76);
}

.hero-visual {
    display: flex;
    justify-content: center;
}

.poster-stack {
    position: relative;
    width: min(100%, 520px);
    min-height: 620px;
}

.wanted-poster {
    position: absolute;
    width: clamp(220px, 34vw, 280px);
    padding: 0.95rem;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255, 230, 189, 0.98), rgba(215, 182, 136, 0.96)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent 50%);
    color: #3d2413;
    border: 1px solid rgba(125, 82, 46, 0.28);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.3);
}

.wanted-poster img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    object-position: center bottom;
    border-radius: 18px;
    background:
        radial-gradient(circle at top, rgba(255, 246, 232, 0.75), rgba(208, 175, 128, 0.3)),
        linear-gradient(180deg, rgba(88, 55, 33, 0.22), transparent 60%);
}

.poster-copy {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.8rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #4a2f1e;
}

.poster-copy strong {
    font-family: var(--font-western);
    font-size: 1.3rem;
    color: #7f3419;
}

.poster-featured {
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(-1.5deg);
    z-index: 3;
}

.poster-left {
    left: 0;
    bottom: 0.25rem;
    transform: rotate(-7deg);
    z-index: 1;
}

.poster-right {
    right: 0;
    bottom: 1.4rem;
    transform: rotate(8deg);
    z-index: 2;
}

.frontier-main {
    display: flex;
    flex-direction: column;
    gap: clamp(2.4rem, 4vw, 4rem);
}

.frontier-section {
    padding: clamp(1.4rem, 3vw, 2rem);
}

.section-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 48rem;
    margin-bottom: 1.75rem;
}

.frontier-section-title {
    margin-bottom: 0;
    text-align: left;
    font-size: clamp(2.5rem, 5vw, 4.15rem);
    line-height: 0.94;
}

.manifest-grid,
.mode-grid,
.ground-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.manifest-card h3,
.mode-card h3,
.ground-card h3,
.play-note-card h3 {
    margin: 0.5rem 0 0.7rem;
    font-size: 1.28rem;
    line-height: 1.15;
    color: #fff3e0;
    text-wrap: balance;
}

.mode-card,
.ground-card {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    border-radius: 28px;
    border: 1px solid rgba(255, 236, 212, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
}

.mode-card {
    display: flex;
    align-items: flex-end;
    padding: 0;
    background-size: cover;
    background-position: center;
}

.mode-card::before,
.ground-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(12, 7, 5, 0.1) 0%, rgba(12, 7, 5, 0.18) 32%, rgba(12, 7, 5, 0.68) 66%, rgba(12, 7, 5, 0.94) 100%),
        linear-gradient(90deg, rgba(12, 7, 5, 0.18), transparent 32%, transparent 68%, rgba(12, 7, 5, 0.18));
}

.mode-card-copy,
.ground-card-copy {
    position: relative;
    z-index: 1;
}

.mode-card-copy,
.ground-card-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.55rem;
    width: 100%;
    margin-top: auto;
    padding: 1.15rem 1.25rem 1.25rem;
    background:
        linear-gradient(180deg, rgba(16, 10, 8, 0.02), rgba(16, 10, 8, 0.74) 28%, rgba(16, 10, 8, 0.92) 100%);
    border-top: 1px solid rgba(255, 236, 212, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mode-card-campaign {
    background-image:
        linear-gradient(180deg, rgba(58, 28, 16, 0.08), rgba(58, 28, 16, 0.08)),
        url("assets/The Saloon.webp");
}

.mode-card-competitive {
    background-image:
        linear-gradient(180deg, rgba(58, 28, 16, 0.08), rgba(58, 28, 16, 0.08)),
        url("assets/High Noon at the Ghost Town.webp");
}

.mode-card-social {
    background-image:
        linear-gradient(180deg, rgba(58, 28, 16, 0.08), rgba(58, 28, 16, 0.08)),
        url("assets/The Desert Canyon Ambush.webp");
}

.ground-card {
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
}

.ground-saloon {
    background-image: url("assets/The Saloon.webp");
}

.ground-ghost-town {
    background-image: url("assets/High Noon at the Ghost Town.webp");
}

.ground-canyon {
    background-image: url("assets/The Desert Canyon Ambush.webp");
}

.mode-card-tag,
.ground-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.32rem 0.58rem;
    border-radius: 999px;
    background: rgba(255, 214, 164, 0.08);
    border: 1px solid rgba(255, 214, 164, 0.14);
    color: rgba(255, 230, 195, 0.82);
}

.mode-card p,
.ground-card p {
    margin: 0;
    max-width: 32ch;
    color: rgba(250, 240, 228, 0.84);
}

.play-section {
    background:
        linear-gradient(180deg, rgba(23, 13, 9, 0.95), rgba(11, 6, 5, 0.98)),
        radial-gradient(circle at top right, rgba(255, 160, 74, 0.1), transparent 22%);
    scroll-margin-top: 1rem;
}

.play-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.play-sidecar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.game-stage-shell {
    border-radius: 32px;
    padding: clamp(0.95rem, 2vw, 1.2rem);
    background:
        linear-gradient(180deg, rgba(123, 79, 48, 0.96), rgba(70, 38, 23, 0.98)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent 45%);
    border: 1px solid rgba(255, 216, 175, 0.16);
    box-shadow: 0 28px 58px rgba(0, 0, 0, 0.34);
}

.game-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
    padding-inline: 0.15rem;
}

.game-stage-label,
.site-footer-brand {
    font-family: var(--font-western);
    letter-spacing: 0.08em;
    color: #f7d7a3;
}

.game-stage-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(24, 12, 9, 0.36);
    border: 1px solid rgba(255, 216, 175, 0.14);
    color: rgba(255, 236, 214, 0.86);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.game-stage-note {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: rgba(19, 11, 8, 0.38);
    border: 1px solid rgba(255, 216, 175, 0.08);
    color: rgba(255, 236, 213, 0.82);
    line-height: 1.6;
}

.game-stage {
    border-radius: 28px;
    padding: clamp(0.45rem, 1vw, 0.8rem);
    background: linear-gradient(180deg, rgba(15, 8, 6, 0.98), rgba(8, 4, 3, 0.99));
    border: 1px solid rgba(255, 216, 175, 0.08);
}

body.site-hosting #game-container {
    width: min(1280px, 100%);
    height: auto;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    max-height: none;
    margin: 0 auto;
    border-radius: 22px;
    box-shadow:
        0 28px 64px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 0 1px rgba(255, 216, 175, 0.08);
}

#play:target .section-copy {
    display: none;
}

#play:target .section-header {
    margin-bottom: 1rem;
}

#play:target .play-layout {
    grid-template-columns: 1fr;
}

#play:target .play-sidecar {
    display: none;
}

#play:target .game-stage-shell {
    max-width: min(1320px, 100%);
    margin: 0 auto;
}

#play:target .game-stage-note {
    margin-bottom: 0.75rem;
    padding: 0.72rem 0.85rem;
}

body.site-hosting #play:target #game-container {
    width: min(1280px, 100%, calc((100svh - 18.5rem) * 16 / 9));
    max-height: calc(100svh - 18.5rem);
}

.play-back-link {
    display: none;
}

.launch-stage-shell {
    min-height: 100%;
}

.launch-stage {
    min-height: clamp(320px, 42vw, 460px);
}

.launch-preview {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
    gap: clamp(1rem, 2vw, 1.6rem);
    align-items: stretch;
}

.launch-preview-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.35rem);
}

.launch-preview-copy p {
    margin: 0;
    color: rgba(255, 237, 219, 0.82);
    line-height: 1.7;
}

.launch-stage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.launch-preview-poster {
    min-height: clamp(280px, 34vw, 420px);
    border-radius: 24px;
    padding: clamp(1rem, 2vw, 1.25rem);
    background:
        linear-gradient(180deg, rgba(24, 11, 7, 0.28), rgba(24, 11, 7, 0.88)),
        linear-gradient(135deg, rgba(255, 169, 84, 0.12), transparent 45%),
        url("assets/High Noon at the Ghost Town.webp");
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 216, 175, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 245, 227, 0.08);
    display: flex;
    align-items: flex-end;
}

.launch-preview-frame {
    width: min(100%, 20rem);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1.05rem;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(25, 12, 8, 0.82), rgba(10, 5, 4, 0.94));
    border: 1px solid rgba(255, 216, 175, 0.14);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

.launch-preview-chip {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(247, 215, 163, 0.12);
    border: 1px solid rgba(255, 216, 175, 0.14);
    color: #f7d7a3;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.launch-preview-title {
    font-family: var(--font-western);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 0.92;
    color: #fff0d8;
}

.launch-preview-subtitle {
    color: rgba(255, 237, 219, 0.78);
    line-height: 1.6;
}

body.full-window-play {
    min-height: 100svh;
    height: 100svh;
    padding: 0;
    display: block;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(190, 76, 33, 0.22), transparent 24%),
        linear-gradient(180deg, #1a0d08, #050303 74%);
}

body.full-window-play .site-shell {
    width: 100%;
    max-width: none;
    min-height: 100svh;
    padding: 0;
    gap: 0;
}

body.full-window-play .frontier-main {
    min-height: 100svh;
    gap: 0;
}

body.full-window-play .frontier-hero,
body.full-window-play .frontier-main > :not(.play-section),
body.full-window-play .site-footer,
body.full-window-play .section-header,
body.full-window-play .play-sidecar,
body.full-window-play .game-stage-header,
body.full-window-play .game-stage-note {
    display: none;
}

body.full-window-play .frontier-section.play-section {
    min-height: 100svh;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.full-window-play .frontier-section.play-section::before {
    display: none;
}

body.full-window-play .play-layout {
    display: block;
    min-height: 100svh;
}

body.full-window-play .game-stage-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body.full-window-play .game-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100svh;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

body.full-window-play #game-container {
    width: min(100vw, calc(100svh * 16 / 9));
    height: min(100svh, calc(100vw * 9 / 16));
    max-width: none;
    max-height: none;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
}

body.full-window-play .play-back-link {
    position: fixed;
    top: max(0.75rem, calc(var(--safe-top) + 0.45rem));
    left: max(0.75rem, calc(var(--safe-left) + 0.45rem));
    z-index: 4200;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    background: rgba(16, 8, 6, 0.76);
    border: 1px solid rgba(255, 216, 175, 0.16);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
    color: #fff0d8;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(8px);
}

body.full-window-play .play-back-link:hover,
body.full-window-play .play-back-link:focus-visible {
    background: rgba(34, 16, 10, 0.86);
    border-color: rgba(255, 216, 175, 0.26);
}

.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding: 0 0.25rem 2rem;
}

.site-footer-copy {
    max-width: 34rem;
}

.site-footer-brand {
    display: inline-block;
    margin-bottom: 0.45rem;
    font-size: 1.5rem;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

body.site-hosting.site-legal .site-shell {
    gap: 1.65rem;
}

body.site-hosting.site-legal .frontier-main {
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
}

.legal-hero {
    min-height: auto;
    padding: clamp(1.25rem, 2.7vw, 1.9rem);
}

.legal-hero::before {
    opacity: 0.2;
}

.legal-privacy .legal-hero::before {
    background:
        linear-gradient(120deg, rgba(0, 0, 0, 0.52), transparent 48%),
        url("assets/The Saloon.webp") center center / cover;
}

.legal-support .legal-hero::before {
    background:
        linear-gradient(120deg, rgba(0, 0, 0, 0.52), transparent 48%),
        url("assets/High Noon at the Ghost Town.webp") center center / cover;
}

.legal-terms .legal-hero::before {
    background:
        linear-gradient(120deg, rgba(0, 0, 0, 0.52), transparent 48%),
        url("assets/The Desert Canyon Ambush.webp") center center / cover;
}

.legal-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr);
    gap: 1.2rem;
    align-items: stretch;
}

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1rem;
}

.legal-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.48rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 220, 176, 0.14);
    background: rgba(21, 10, 6, 0.5);
    color: #fbe7c3;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.legal-pill.warn {
    color: #ffd7a8;
    border-color: rgba(255, 182, 107, 0.22);
    background: rgba(78, 33, 10, 0.42);
}

.legal-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 232, 205, 0.11);
    background:
        linear-gradient(180deg, rgba(30, 16, 11, 0.92), rgba(16, 9, 7, 0.96)),
        radial-gradient(circle at top left, rgba(255, 160, 74, 0.11), transparent 32%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.legal-aside h2 {
    margin: 0;
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    line-height: 1.02;
}

.legal-aside p {
    margin: 0;
    color: rgba(246, 236, 222, 0.8);
    line-height: 1.65;
}

.legal-reminder {
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 186, 112, 0.18);
    background: rgba(81, 34, 12, 0.28);
}

.legal-reminder strong {
    display: block;
    margin-bottom: 0.35rem;
    color: #ffd7a3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

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

.legal-card {
    padding: 1.15rem;
    border-radius: 22px;
    border: 1px solid rgba(255, 232, 205, 0.08);
    background:
        linear-gradient(180deg, rgba(29, 18, 13, 0.9), rgba(14, 8, 6, 0.95)),
        radial-gradient(circle at top left, rgba(255, 166, 84, 0.08), transparent 34%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.legal-card h3 {
    margin: 0 0 0.65rem;
    font-size: 1.05rem;
    color: #fff2de;
}

.legal-card p,
.legal-card li {
    color: rgba(246, 236, 222, 0.82);
    line-height: 1.68;
}

.support-form-grid {
    align-items: start;
}

.support-form-card {
    grid-column: 1 / -1;
}

.support-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.support-form-row {
    display: grid;
    gap: 1rem;
}

.support-form-row-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.support-field span {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f5ca71;
}

.support-field input,
.support-field select,
.support-field textarea {
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(255, 220, 176, 0.12);
    background:
        linear-gradient(180deg, rgba(19, 14, 18, 0.92), rgba(11, 8, 13, 0.98)),
        radial-gradient(circle at top left, rgba(255, 122, 74, 0.12), transparent 38%);
    color: #fff5e8;
    padding: 0.95rem 1rem;
    font-size: 0.98rem;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.support-field select {
    color-scheme: dark;
}

.support-field select option,
.support-field select optgroup {
    color: #1f120b;
    background: #fff3e2;
}

.support-field textarea {
    min-height: 12rem;
    resize: vertical;
}

.support-field input::placeholder,
.support-field textarea::placeholder {
    color: rgba(255, 239, 221, 0.42);
}

.support-field input:focus,
.support-field select:focus,
.support-field textarea:focus {
    outline: none;
    border-color: rgba(255, 155, 89, 0.48);
    box-shadow: 0 0 0 3px rgba(255, 107, 61, 0.16);
    transform: translateY(-1px);
}

.support-field-compact select {
    min-height: 3.35rem;
}

.support-form-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding-top: 0.2rem;
}

.support-form-note,
.support-form-noscript {
    margin: 0;
    color: rgba(246, 236, 222, 0.68);
    line-height: 1.6;
}

.support-form-status {
    min-height: 1.5rem;
    font-weight: 700;
    line-height: 1.45;
    color: rgba(246, 236, 222, 0.72);
}

.support-form-status.is-info {
    color: #f5d38f;
}

.support-form-status.is-success {
    color: #76e7b1;
}

.support-form-status.is-error {
    color: #ff9780;
}

.support-submit {
    min-width: 18rem;
}

.support-submit:disabled {
    opacity: 0.72;
    cursor: wait;
}

.support-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.legal-list {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.legal-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1rem;
}

.legal-link-row a {
    text-decoration: none;
}

.legal-callout-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.15rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 220, 176, 0.12);
    background: rgba(26, 14, 9, 0.72);
}

.legal-callout-bar p {
    margin: 0;
    color: rgba(246, 236, 222, 0.82);
    line-height: 1.6;
}

.legal-callout-bar strong {
    color: #fbe2bb;
}

.legal-footer-note {
    color: rgba(246, 236, 222, 0.68);
    font-size: 0.9rem;
}

@media (max-height: 860px) {
    #play .section-copy {
        display: none;
    }

    #play .section-header {
        margin-bottom: 1rem;
    }

    #play .play-note-card {
        padding: 0.95rem 1rem;
    }

    #play .play-note-card p {
        line-height: 1.55;
    }

    #play .game-stage-header {
        margin-bottom: 0.65rem;
    }

    #play .game-stage-note {
        margin-bottom: 0.7rem;
        padding: 0.72rem 0.85rem;
        line-height: 1.5;
    }

    body.site-hosting #play #game-container {
        width: min(1280px, 100%, calc((100svh - 22rem) * 16 / 9));
        max-height: calc(100svh - 22rem);
    }
}

@media (max-width: 1180px) {
    .hero-grid,
    .play-layout,
    .legal-hero-grid,
    .legal-grid {
        grid-template-columns: 1fr;
    }

    .support-form-row-two {
        grid-template-columns: 1fr;
    }

    .launch-preview {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        order: 1;
    }

    .hero-visual {
        order: 2;
    }

    .hero-stats,
    .manifest-grid,
    .mode-grid,
    .ground-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .poster-stack {
        margin: 0 auto;
    }
}

@media (max-width: 860px) {
    .frontier-topbar {
        position: static;
        border-radius: 28px;
        flex-direction: column;
        align-items: stretch;
    }

    .frontier-nav,
    .site-footer-links {
        justify-content: flex-start;
    }

    .hero-stats,
    .manifest-grid,
    .mode-grid,
    .ground-grid {
        grid-template-columns: 1fr;
    }

    .frontier-hero-title,
    .frontier-section-title {
        text-align: left;
    }

    .site-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .legal-meta,
    .legal-callout-bar {
        align-items: flex-start;
    }

    .support-submit {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 680px) {
    .site-shell {
        padding: 0.85rem;
        gap: 2rem;
    }

    .frontier-hero,
    .frontier-section {
        border-radius: 28px;
    }

    .hero-actions {
        width: 100%;
    }

    .hero-cta {
        flex: 1 1 100%;
        min-width: 0;
    }

    .poster-stack {
        width: min(100%, 320px);
        min-height: 780px;
    }

    .launch-stage-actions .hero-cta {
        width: 100%;
    }

    .wanted-poster {
        width: min(86vw, 280px);
    }

    .poster-featured {
        top: 0;
        left: 50%;
        transform: translateX(-50%) rotate(-1deg);
    }

    .poster-left {
        top: 270px;
        left: 50%;
        bottom: auto;
        transform: translateX(-56%) rotate(-6deg);
    }

    .poster-right {
        top: 520px;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translateX(-42%) rotate(6deg);
    }

    .game-stage-shell {
        padding: 0.8rem;
        border-radius: 24px;
    }

    body.site-hosting #game-container {
        border-radius: 16px;
    }
}

@media (max-width: 520px) {
    .frontier-brand-title {
        font-size: 1.45rem;
    }

    .frontier-brand-kicker,
    .section-kicker,
    .manifest-kicker,
    .mode-card-tag,
    .ground-label,
    .play-note-kicker,
    .poster-kicker {
        font-size: 0.66rem;
        letter-spacing: 0.22em;
    }

    .frontier-hero-title {
        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    .frontier-section-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .frontier-nav a,
    .site-footer-links a {
        font-size: 0.74rem;
        letter-spacing: 0.1em;
    }

    .game-stage-header {
        align-items: flex-start;
    }
}

@media (max-width: 860px), (max-height: 860px) {
    body.full-window-play .play-back-link {
        top: max(0.5rem, calc(var(--safe-top) + 0.25rem));
        left: max(0.5rem, calc(var(--safe-left) + 0.25rem));
        padding: 0.55rem 0.78rem;
        font-size: 0.72rem;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    #screen-menu {
        justify-content: flex-start;
        align-items: stretch;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0.65rem 0.75rem;
        scrollbar-width: thin;
    }

    .hub-container {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(270px, 0.92fr);
        align-items: start;
        justify-content: stretch;
        width: min(1120px, 100%);
        height: auto;
        min-height: 100%;
        max-width: none;
        gap: 0.72rem;
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
    }

    .hub-left-panel,
    .hub-right-panel {
        justify-content: flex-start;
        align-self: start;
    }

    .hub-left-panel {
        min-width: 0;
        max-width: none;
    }

    .hub-right-panel {
        display: flex;
        grid-template-columns: none;
        max-width: none;
        min-width: 0;
        gap: 0.55rem;
    }

    .hub-brand {
        margin-bottom: 0.55rem;
        padding-top: 0;
        gap: 0.28rem;
    }

    .menu-kicker,
    .hub-utility-label,
    .money-widget span:first-child,
    .equipped-widget span:first-child,
    .trail-widget > span:first-child {
        font-size: 0.62rem;
        letter-spacing: 0.18em;
    }

    .hub-title {
        font-size: clamp(1.95rem, 4.7vw, 2.65rem);
        line-height: 0.88;
    }

    .menu-subtitle {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
    }

    .hub-menu-list {
        width: 100%;
        gap: 0.42rem;
    }

    .nav-btn {
        min-height: 2.6rem;
        padding: 0.5rem 0.78rem;
        border-radius: 14px;
    }

    .nav-btn .btn-text {
        font-size: 0.76rem;
        letter-spacing: 0.1em;
    }

    .btn-icon-custom {
        width: 24px;
        height: 24px;
        margin-right: 0.5rem;
        font-size: 0.86rem;
    }

    .hub-utility-group {
        gap: 0.28rem;
        margin-top: 0.05rem;
    }

    .hub-menu-secondary {
        width: 100%;
        gap: 0.38rem;
    }

    .nav-btn-sm {
        min-height: 2.18rem;
        padding: 0.42rem 0.58rem;
        border-radius: 12px;
    }

    .nav-btn-sm .btn-text {
        font-size: 0.6rem;
        letter-spacing: 0.08em;
    }

    .nav-btn-sm .btn-icon-custom,
    .btn-icon-custom.sm {
        width: 18px;
        height: 18px;
        margin-right: 0.3rem;
        font-size: 0.65rem;
    }

    .menu-badge {
        top: 0.28rem;
        right: 0.3rem;
        min-width: 1rem;
        height: 1rem;
        font-size: 0.54rem;
    }

    .glass-widget {
        padding: 0.72rem 0.8rem;
        border-radius: 16px;
        gap: 0.22rem;
    }

    .money-display {
        font-size: 1.28rem;
        line-height: 1.05;
    }

    #menu-equipped-char,
    #trail-opponent {
        font-size: 0.9rem;
        line-height: 1.15;
    }

    .menu-widget-subtext,
    .trail-progress-meta,
    #menu-context-help {
        font-size: 0.68rem;
        line-height: 1.34;
    }

    .trail-widget-header,
    .trail-progress-meta {
        gap: 0.35rem;
    }

    .mastery-progress-track {
        margin-top: 0.42rem;
    }

    body.full-window-play .play-back-link {
        top: max(0.38rem, calc(var(--safe-top) + 0.12rem));
        left: max(0.38rem, calc(var(--safe-left) + 0.12rem));
        padding: 0.38rem 0.54rem;
        font-size: 0.6rem;
        letter-spacing: 0.06em;
        border-radius: 999px;
        opacity: 0.92;
    }

    body.full-window-play:has(#screen-duel.active) .play-back-link {
        opacity: 0;
        pointer-events: none;
    }

    body.full-window-play:has(.glass-modal.active) .play-back-link,
    body.full-window-play:has(#screen-results.active) .play-back-link,
    body.full-window-play:has(#screen-shop.active) .play-back-link {
        opacity: 0;
        pointer-events: none;
    }

    .glass-modal,
    #screen-results,
    #screen-shop {
        justify-content: flex-start;
        align-items: stretch;
        overflow-y: auto;
        overflow-x: hidden;
        padding:
            max(0.4rem, calc(var(--safe-top) + 0.16rem))
            max(0.58rem, calc(var(--safe-right) + 0.34rem))
            max(0.58rem, calc(var(--safe-bottom) + 0.28rem))
            max(0.58rem, calc(var(--safe-left) + 0.34rem));
        scrollbar-width: thin;
    }

    .screen-panel,
    .store-modal,
    .pvp-setup-modal,
    .practice-modal,
    .tutorial-modal,
    .bounty-modal,
    .settings-modal,
    .duel-modes-modal,
    .competitive-setup-modal,
    .diagnostics-modal,
    .account-profile-modal,
    .preview-modal,
    .result-content {
        width: min(100%, 1024px);
        max-width: none;
        max-height: calc(100svh - var(--safe-top) - var(--safe-bottom) - 0.96rem);
        margin: 0 auto;
        border-radius: 18px;
        padding: 0.72rem 0.84rem;
        gap: 0.68rem;
    }

    .modal-scroll-region,
    .shop-scroll-region,
    .shop-compare-grid,
    .quest-list,
    .achievements-grid,
    .bounty-tab-content,
    .armory-tab-content {
        padding-right: 0.14rem;
        overscroll-behavior: contain;
    }

    .modal-footer,
    .panel-footer {
        position: sticky;
        bottom: -0.05rem;
        z-index: 2;
        align-items: stretch;
        gap: 0.52rem;
        padding-top: 0.45rem;
        background: linear-gradient(180deg, rgba(26, 26, 36, 0), rgba(26, 26, 36, 0.94) 30%);
    }

    .footer-actions {
        width: 100%;
        gap: 0.42rem;
        justify-content: stretch;
    }

    .context-help,
    .panel-subtitle,
    .pvp-note,
    .settings-help {
        font-size: 0.66rem;
        line-height: 1.28;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .context-help {
        width: 100%;
        min-width: 0;
        padding: 0.58rem 0.72rem;
    }

    .panel-subtitle,
    .pvp-note {
        margin: 0 auto;
        max-width: none;
    }

    .pvp-setup-modal .title.small,
    .practice-modal .title.small,
    .tutorial-modal .title.small,
    .bounty-modal .title.small,
    .settings-modal .title.small,
    .store-modal .title.small,
    .shop-panel .title.small,
    .duel-modes-modal .title.small,
    .competitive-setup-modal .title.small,
    .diagnostics-modal .title.small,
    .account-profile-modal .title.small {
        font-size: clamp(1.86rem, 4.8vw, 2.5rem);
        line-height: 0.9;
    }

    .preview-actions .btn,
    .footer-actions .btn,
    .panel-footer .btn,
    .modal-footer > .btn,
    .reward-row .btn,
    .armory-tabs .tab-btn,
    .screen-tabs .tab-btn,
    .setting-choice,
    .competitive-choice {
        min-height: 2.18rem;
        padding: 0.5rem 0.68rem;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }

    .armory-tabs,
    .screen-tabs,
    .settings-choice-row,
    .competitive-toggle-row,
    .pause-actions {
        gap: 0.42rem;
    }

    .settings-choice-row,
    .competitive-toggle-row,
    .pause-actions,
    .reward-row,
    .bounty-card-header,
    .shop-inspector-header,
    .compare-row,
    .quest-row {
        flex-wrap: wrap;
    }

    .reward-row .btn {
        flex: 1 1 180px;
        width: 100%;
    }

    .practice-grid,
    .practice-notes,
    .bounty-liveops,
    .shop-grid,
    .pvp-setup-grid,
    .competitive-setup-grid,
    .account-profile-grid {
        grid-template-columns: 1fr;
        gap: 0.58rem;
    }

    .duel-mode-card,
    .pvp-card,
    .practice-note-card,
    .bounty-card,
    .shop-inspector,
    .compare-row,
    .quest-row,
    .stat-card,
    .diagnostic-card,
    .account-card {
        padding: 0.62rem 0.72rem;
        border-radius: 14px;
    }

    .store-modal {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        width: min(100%, 840px);
        overflow: hidden;
    }

    .store-shell,
    .store-header > * {
        min-width: 0;
    }

    .store-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.58rem;
        padding: 0.78rem 0.9rem 0.68rem;
    }

    .store-kicker,
    .store-section-title,
    .store-item-meta,
    .store-balance-label {
        font-size: 0.58rem;
        letter-spacing: 0.17em;
    }

    .store-modal .title.small {
        font-size: clamp(1.72rem, 4.3vw, 2.22rem);
        line-height: 0.86;
    }

    .store-copy {
        max-width: none;
        font-size: 0.72rem;
        line-height: 1.3;
    }

    .store-balance {
        min-width: 0;
        width: 100%;
        padding: 0.62rem 0.78rem;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.58rem;
    }

    .store-balance-value {
        margin-top: 0;
        font-size: 1.15rem;
        line-height: 1;
    }

    .store-scroll-region {
        gap: 0.72rem;
        padding: 0.78rem 0.9rem 0.18rem;
        overflow-x: hidden;
    }

    .store-section {
        gap: 0.52rem;
    }

    .store-feature-grid,
    .store-gem-grid {
        grid-template-columns: 1fr;
        gap: 0.52rem;
    }

    .store-item {
        min-width: 0;
        gap: 0.42rem;
        padding: 0.78rem 0.82rem;
        border-radius: 14px;
    }

    .store-item h3 {
        font-size: 0.96rem;
        line-height: 1.04;
    }

    .store-item p {
        margin: 0;
        font-size: 0.7rem;
        line-height: 1.28;
    }

    .store-item-price {
        font-size: 1rem;
    }

    .store-item .btn,
    .store-restore-row .btn,
    .store-footer .btn {
        width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .store-footer {
        padding: 0 0.9rem 0.78rem;
        justify-content: stretch;
    }

    .tutorial-modal .modal-scroll-region,
    .settings-modal .modal-scroll-region {
        gap: 0.56rem;
    }

    .tutorial-modal .title.small,
    .settings-modal .title.small {
        font-size: clamp(1.74rem, 4.2vw, 2.18rem);
    }

    .tutorial-steps {
        min-height: 0;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .tutorial-step {
        gap: 0.42rem;
        width: 100%;
    }

    .tut-icon {
        font-size: 1.5rem;
        margin-top: 0.04rem;
    }

    .tutorial-step h3 {
        font-size: 0.96rem;
        letter-spacing: 0.08em;
    }

    .tutorial-step p {
        max-width: none;
        font-size: 0.72rem;
        line-height: 1.22;
        margin: 0;
    }

    .tutorial-nav {
        gap: 0.42rem;
        margin-top: 0.18rem;
    }

    .tut-progress {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
    }

    .tutorial-modal .context-help {
        display: none;
    }

    .tutorial-modal .tutorial-nav .btn,
    #btn-tut-practice {
        min-height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.68rem;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }

    #btn-tut-practice {
        margin-top: 0.08rem;
    }

    .settings-modal .settings-group,
    .settings-modal .a11y-settings-group {
        display: flex;
        flex-direction: column;
        gap: 0.36rem;
        min-width: 0;
    }

    .settings-modal .settings-group > p {
        margin: 0;
        font-size: 0.74rem;
        line-height: 1.24;
    }

    .settings-modal .settings-choice-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        width: 100%;
    }

    .settings-modal .a11y-settings-group .settings-choice-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-modal .settings-choice-row > .btn,
    .settings-modal .setting-choice,
    .settings-modal .a11y-cb-mode {
        width: 100%;
        min-width: 0;
        white-space: normal;
        line-height: 1.14;
        padding: 0.46rem 0.42rem;
    }

    .settings-modal .a11y-slider {
        margin-top: 0.08rem;
    }

    .settings-modal #btn-toggle-high-contrast,
    .settings-modal #btn-open-diagnostics {
        width: 100%;
    }

    .result-content {
        width: min(96%, 760px);
        align-items: stretch;
        text-align: center;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .result-title-anim {
        margin-bottom: 0;
        font-size: clamp(2.55rem, 8.6vw, 4.2rem);
        line-height: 0.86;
    }

    .result-subtitle {
        font-size: 0.84rem;
        line-height: 1.28;
    }

    .result-chips {
        width: 100%;
        gap: 0.45rem;
    }

    .result-chip {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.42rem 0.38rem;
        border-radius: 12px;
    }

    .result-chip-value {
        font-size: 1.1rem;
    }

    .result-chip-label {
        font-size: 0.56rem;
        letter-spacing: 0.08em;
    }

    .result-reward-row {
        margin-top: -0.1rem;
    }

    .result-reward-amount {
        font-size: 1.08rem;
    }

    .result-status {
        padding: 0.48rem 0.62rem;
        font-size: 0.7rem;
        line-height: 1.28;
        border-radius: 12px;
    }

    #screen-results .result-actions {
        order: 8;
        width: 100%;
        gap: 0.42rem;
        position: sticky;
        bottom: -0.05rem;
        z-index: 2;
        padding-top: 0.45rem;
        background: linear-gradient(180deg, rgba(26, 26, 36, 0), rgba(26, 26, 36, 0.94) 34%);
    }

    #screen-results .result-actions .btn {
        flex: 1 1 180px;
        min-height: 2.18rem;
        padding: 0.5rem 0.68rem;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }

    #screen-results #btn-share-result,
    #screen-results #btn-watch-ad-double {
        order: 9;
        width: 100%;
        min-height: 2.02rem;
        padding: 0.45rem 0.62rem;
        font-size: 0.64rem;
        letter-spacing: 0.08em;
    }

    .top-hud {
        top: max(0.45rem, calc(var(--safe-top) + 0.2rem));
        left: 0.9rem;
        right: 0.9rem;
        width: auto;
    }

    .health-bar-container {
        width: min(240px, 33%);
        min-width: 0;
    }

    .name-tag {
        margin-bottom: 0.26rem;
        font-size: 0.72rem;
        line-height: 1.08;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .health-bar {
        height: 14px;
    }

    .versus-text {
        margin-top: 0.25rem;
        font-size: 1.45rem;
    }

    .duel-status {
        top: 3.3rem;
        padding: 0.28rem 0.72rem;
        font-size: 0.62rem;
        letter-spacing: 0.1em;
    }

    .duel-prompt {
        top: 44%;
        font-size: clamp(3.2rem, 8vw, 4.8rem);
        text-shadow: 0 0 10px rgba(255, 90, 54, 0.34), 0 4px 0 rgba(127, 29, 29, 0.78), 0 10px 18px rgba(0, 0, 0, 0.64);
    }

    .reflex-ui {
        bottom: 17%;
        left: max(0.9rem, calc(var(--safe-left) + 0.9rem));
        transform: none;
        width: 168px;
        align-items: flex-start;
    }

    .reflex-ui-right {
        left: auto !important;
        right: max(0.9rem, calc(var(--safe-right) + 0.9rem));
        transform: none;
        align-items: flex-end;
    }

    .target-box {
        width: 112px;
        height: 112px;
        border-width: 2px;
        border-radius: 14px;
    }

    .input-hint {
        margin-top: 0.42rem;
        max-width: 168px;
        font-size: 0.62rem;
        line-height: 1.22;
        letter-spacing: 0.08em;
        text-align: left;
    }

    .reflex-ui-right .input-hint {
        text-align: right;
    }

    .preview-modal {
        width: min(94%, 640px);
        max-width: 640px;
        max-height: calc(100% - 0.75rem);
        padding: 0.82rem 0.95rem;
        gap: 0.72rem;
        overflow-y: auto;
    }

    .preview-modal .title.small {
        font-size: clamp(2rem, 5vw, 2.6rem);
    }

    .preview-name {
        font-size: 1.9rem;
        margin-bottom: 0.35rem;
    }

    .preview-dialogue {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
        padding: 0;
    }

    .preview-stats {
        gap: 0.5rem;
    }

    .preview-stat {
        padding: 0.55rem;
        gap: 0.2rem;
    }

    .preview-label {
        font-size: 0.58rem;
        letter-spacing: 0.12em;
    }

    .preview-value {
        font-size: 1.02rem;
    }

    .preview-loadout {
        padding: 0.62rem;
    }

    .preview-your-gear,
    .preview-stage {
        font-size: 0.72rem;
    }

    .preview-modal .preview-actions {
        margin-top: 0;
        gap: 0.55rem;
    }

    .preview-actions .btn {
        min-height: 2.7rem;
        padding: 0.65rem 0.8rem;
        font-size: 0.88rem;
    }
}

@media (orientation: landscape) and (max-height: 430px) {
    #screen-menu {
        padding: 0.45rem 0.55rem;
    }

    .hub-container {
        grid-template-columns: minmax(0, 1.06fr) minmax(248px, 0.94fr);
        gap: 0.52rem;
    }

    .hub-title {
        font-size: clamp(1.72rem, 4.1vw, 2.28rem);
    }

    .menu-subtitle {
        font-size: 0.64rem;
    }

    .nav-btn {
        min-height: 2.32rem;
        padding: 0.42rem 0.68rem;
    }

    .nav-btn .btn-text {
        font-size: 0.7rem;
    }

    .nav-btn-sm {
        min-height: 1.98rem;
        padding: 0.34rem 0.48rem;
    }

    .nav-btn-sm .btn-text {
        font-size: 0.56rem;
    }

    .glass-widget {
        padding: 0.6rem 0.68rem;
    }

    .money-display {
        font-size: 1.1rem;
    }

    .menu-widget-subtext,
    .trail-progress-meta,
    #menu-context-help {
        font-size: 0.62rem;
        line-height: 1.28;
    }

    .top-hud {
        top: max(0.38rem, calc(var(--safe-top) + 0.12rem));
        left: 0.75rem;
        right: 0.75rem;
    }

    .health-bar-container {
        width: min(226px, 32%);
    }

    .name-tag {
        font-size: 0.66rem;
    }

    .duel-status {
        top: 3rem;
        font-size: 0.56rem;
        padding: 0.24rem 0.6rem;
    }

    .duel-prompt {
        top: 43%;
        font-size: clamp(2.8rem, 7.2vw, 4.1rem);
    }

    .reflex-ui {
        bottom: 15%;
        width: 152px;
    }

    .target-box {
        width: 98px;
        height: 98px;
    }

    .input-hint {
        max-width: 152px;
        font-size: 0.56rem;
    }

    .preview-modal {
        padding: 0.68rem 0.8rem;
        gap: 0.42rem;
    }

    .preview-modal .title.small {
        font-size: clamp(1.42rem, 3.7vw, 1.95rem);
        line-height: 0.9;
    }

    .preview-name {
        font-size: 1.26rem;
        margin-bottom: 0.1rem;
    }

    .preview-dialogue {
        font-size: 0.62rem;
        line-height: 1.16;
        margin-bottom: 0;
    }

    .preview-stat {
        padding: 0.34rem 0.42rem;
        gap: 0.12rem;
    }

    .preview-value {
        font-size: 0.78rem;
    }

    .preview-loadout {
        padding: 0.42rem;
    }

    .preview-label,
    .preview-your-gear,
    .preview-stage {
        font-size: 0.66rem;
    }

    .preview-actions .btn {
        min-height: 2.12rem;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
    }

    .context-help,
    .panel-subtitle,
    .pvp-note,
    .settings-help {
        display: none;
    }

    .screen-panel,
    .store-modal,
    .pvp-setup-modal,
    .practice-modal,
    .tutorial-modal,
    .bounty-modal,
    .settings-modal,
    .duel-modes-modal,
    .competitive-setup-modal,
    .diagnostics-modal,
    .account-profile-modal,
    .preview-modal,
    .result-content {
        padding: 0.58rem 0.68rem;
        gap: 0.48rem;
    }

    .armory-tabs,
    .screen-tabs {
        gap: 0.32rem;
        margin-bottom: 0.55rem;
    }

    .store-modal {
        width: min(100%, 760px);
        padding: 0;
    }

    .store-header {
        gap: 0.42rem;
        padding: 0.62rem 0.68rem 0.52rem;
    }

    .store-modal .title.small {
        font-size: clamp(1.5rem, 4vw, 1.94rem);
    }

    .store-copy {
        font-size: 0.64rem;
        line-height: 1.2;
    }

    .store-balance {
        padding: 0.5rem 0.6rem;
        gap: 0.4rem;
    }

    .store-balance-value {
        font-size: 1rem;
    }

    .store-scroll-region {
        gap: 0.52rem;
        padding: 0.62rem 0.68rem 0.14rem;
    }

    .store-item {
        gap: 0.34rem;
        padding: 0.62rem 0.68rem;
    }

    .store-item h3 {
        font-size: 0.88rem;
    }

    .store-item p {
        font-size: 0.62rem;
        line-height: 1.18;
    }

    .store-item-price {
        font-size: 0.92rem;
    }

    .store-footer {
        padding: 0 0.68rem 0.6rem;
    }

    .tutorial-modal .title.small,
    .settings-modal .title.small {
        font-size: clamp(1.48rem, 3.9vw, 1.9rem);
    }

    .tutorial-step {
        gap: 0.32rem;
    }

    .tut-icon {
        font-size: 1.18rem;
    }

    .tutorial-step h3 {
        font-size: 0.84rem;
    }

    .tutorial-step p {
        font-size: 0.62rem;
        line-height: 1.14;
    }

    .tut-progress {
        font-size: 0.54rem;
    }

    .tutorial-modal .tutorial-nav .btn,
    #btn-tut-practice {
        min-height: 2.38rem;
        padding: 0.38rem 0.5rem;
        font-size: 0.62rem;
    }

    .settings-modal .settings-group > p {
        font-size: 0.66rem;
    }

    .settings-modal .settings-choice-row,
    .settings-modal .a11y-settings-group .settings-choice-row {
        gap: 0.3rem;
    }

    .settings-modal .settings-choice-row > .btn,
    .settings-modal .setting-choice,
    .settings-modal .a11y-cb-mode {
        min-height: 1.84rem;
        padding: 0.34rem 0.36rem;
        font-size: 0.56rem;
        letter-spacing: 0.05em;
    }

    .armory-tabs .tab-btn,
    .screen-tabs .tab-btn,
    .setting-choice,
    .competitive-choice,
    .footer-actions .btn,
    .panel-footer .btn,
    .modal-footer > .btn,
    .preview-actions .btn,
    .result-actions .btn {
        min-height: 1.98rem;
        padding: 0.38rem 0.5rem;
        font-size: 0.62rem;
    }

    .result-title-anim {
        font-size: clamp(2.18rem, 7.2vw, 3.5rem);
    }

    .result-chip {
        padding: 0.34rem 0.28rem;
    }

    .result-chip-value {
        font-size: 0.92rem;
    }

    .result-chip-label {
        font-size: 0.5rem;
    }

    .result-status {
        font-size: 0.62rem;
        padding: 0.4rem 0.5rem;
    }

    #screen-results #btn-share-result,
    #screen-results #btn-watch-ad-double {
        min-height: 1.86rem;
        font-size: 0.58rem;
    }
}

/* Browser-first launch follow-up fixes */
.settings-card-accessibility,
.settings-card-advanced {
    grid-column: 1 / -1;
}

.settings-card-accessibility > .settings-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    align-items: start;
}

.settings-card-accessibility > .settings-stack > .btn {
    min-width: 0;
}

.settings-card-accessibility #settings-accessibility-extra {
    grid-column: 1 / -1;
}

.settings-card-accessibility #settings-accessibility-extra .settings-stack {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
    gap: 0.55rem;
    align-items: start;
}

.settings-card-accessibility #settings-accessibility-extra .settings-group:first-child {
    grid-column: 1 / -1;
}

.settings-card-accessibility .a11y-settings-group .settings-group:first-child .settings-choice-row {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.settings-card-accessibility .a11y-slider {
    width: 100%;
}

.settings-card-accessibility > .settings-stack > .btn,
.settings-card-accessibility .a11y-cb-mode,
.settings-card-accessibility #btn-toggle-high-contrast {
    min-height: 2.6rem;
    padding: 0.42rem 0.5rem;
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    line-height: 1.08;
}

.settings-card-accessibility .settings-group > p {
    font-size: 0.7rem;
    line-height: 1.18;
}

.settings-card-advanced .settings-tip-list {
    list-style: none;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.48rem;
}

.settings-card-advanced .settings-tip-list li {
    padding: 0.55rem 0.68rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    line-height: 1.35;
}

.settings-modal .context-help {
    display: none;
}

.settings-modal .modal-footer {
    justify-content: flex-end;
}

.bounty-tab-content[data-tab="ranks"] {
    min-height: 0;
    display: block;
    flex: 1 1 auto;
}

.most-wanted-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    gap: 0.72rem;
}

.most-wanted-grid {
    min-height: 0;
    align-items: stretch;
    height: auto;
}

.most-wanted-board-panel,
.most-wanted-profile-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.most-wanted-list {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    padding-right: 0;
}

.most-wanted-profile-card {
    overflow-y: auto;
}

.most-wanted-board-panel {
    width: 100%;
    height: auto;
    min-height: 0;
}

.most-wanted-list .leaderboard-row {
    width: 100%;
    min-height: 0;
    padding: 0.54rem 0.72rem;
    gap: 0.55rem;
    border-radius: 12px;
}

.most-wanted-list {
    gap: 0.34rem;
}

.most-wanted-list .lb-rank {
    min-width: 1.15rem;
    font-size: 0.96rem;
}

.most-wanted-list .lb-name {
    font-size: 0.92rem;
    line-height: 1.08;
}

.most-wanted-list .lb-subtitle {
    font-size: 0.66rem;
    line-height: 1.16;
}

.most-wanted-list .lb-score {
    font-size: 0.94rem;
}

.most-wanted-list .lb-chip {
    font-size: 0.56rem;
    padding: 0.16rem 0.36rem;
}

.most-wanted-board-topline {
    margin-bottom: 0.45rem;
}

.most-wanted-player-row {
    margin-top: 0.45rem;
    padding: 0.45rem 0.05rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.most-wanted-player-row > div {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.most-wanted-player-note {
    font-size: 0.64rem;
    line-height: 1.15;
    color: rgba(248, 249, 250, 0.56);
}

.most-wanted-player-label {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
}

.most-wanted-actions {
    padding-top: 0.42rem;
}

.most-wanted-actions .btn {
    width: min(200px, 100%);
}

@media (max-width: 1180px) {
    .most-wanted-board-panel {
        min-height: 0;
    }
}

.most-wanted-actions {
    align-items: center;
    justify-content: flex-end;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.most-wanted-actions .btn {
    width: min(220px, 100%);
}

@media (max-width: 1180px) {
    .settings-card-accessibility > .settings-stack,
    .settings-card-accessibility #settings-accessibility-extra .settings-stack {
        grid-template-columns: 1fr;
    }

    .settings-card-accessibility .a11y-settings-group .settings-group:first-child .settings-choice-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-card-advanced .settings-tip-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .most-wanted-actions .btn {
        width: 100%;
    }

    .most-wanted-profile-dialog-topline,
    .most-wanted-profile-header,
    .most-wanted-profile-meta,
    .most-wanted-profile-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Armory polish override */
.armory-tabs {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.armory-loadout-header {
    margin-bottom: 0.15rem;
}

.shop-panel .shop-scroll-region {
    display: grid;
    gap: 1rem;
}

.armory-column-header {
    display: grid;
    gap: 0.24rem;
    margin-bottom: 0.72rem;
}

.armory-column-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.armory-column-header p {
    margin: 0;
    max-width: 48ch;
    line-height: 1.45;
}

.shop-panel .shop-grid {
    align-items: start;
}

.shop-panel .list-container {
    display: grid;
    gap: 0.8rem;
}

.shop-panel .shop-item {
    display: grid;
    gap: 0.8rem;
    justify-content: stretch;
    align-items: stretch;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(10, 8, 14, 0.66));
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.shop-panel .shop-item:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(14, 11, 18, 0.76));
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.shop-panel .shop-item.locked {
    opacity: 0.8;
    filter: grayscale(0.12);
}

.shop-panel .shop-item-topline {
    align-items: flex-start;
    gap: 0.9rem;
}

.shop-panel .item-info {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.shop-item-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(248, 249, 250, 0.54);
}

.shop-panel .item-info h4 {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.1;
}

.shop-panel .item-desc {
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(248, 249, 250, 0.76);
}

.shop-item-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 0.55rem;
}

.shop-item-metrics.character-metrics {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.shop-metric-pill {
    display: grid;
    gap: 0.14rem;
    padding: 0.62rem 0.68rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.2);
}

.shop-metric-pill span {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(248, 249, 250, 0.52);
}

.shop-metric-pill strong {
    font-size: 0.92rem;
    line-height: 1.2;
}

.shop-metric-pill em {
    font-style: normal;
    font-size: 0.72rem;
    color: rgba(248, 249, 250, 0.66);
}

.shop-metric-pill.good {
    border-color: rgba(74, 222, 128, 0.18);
}

.shop-metric-pill.tradeoff {
    border-color: rgba(255, 183, 77, 0.18);
}

.shop-panel .shop-item .item-ability {
    display: grid;
    gap: 0.2rem;
    padding: 0.68rem 0.78rem;
    margin: 0;
    border-radius: 14px;
    background: rgba(255, 214, 102, 0.08);
    border: 1px solid rgba(255, 214, 102, 0.12);
}

.shop-panel .shop-item .item-ability span {
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 214, 102, 0.8);
}

.shop-panel .shop-item-footer {
    align-items: flex-end;
    gap: 0.75rem;
}

.shop-panel .shop-item-hint {
    flex: 1;
    max-width: 52ch;
    font-size: 0.76rem;
    line-height: 1.45;
    color: rgba(248, 249, 250, 0.62);
}

.shop-item-action-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.46rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(248, 249, 250, 0.88);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.shop-panel .shop-item.equipped .shop-item-action-chip {
    background: rgba(255, 90, 54, 0.14);
    border-color: rgba(255, 90, 54, 0.24);
    color: #ffd8cf;
}

.mods-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: end;
    gap: 1rem;
    margin-bottom: 0.7rem;
}

.mods-hero-copy {
    display: grid;
    gap: 0.3rem;
}

.mods-hero-copy p {
    margin: 0;
    max-width: 58ch;
}

.mods-hero-stats {
    align-self: stretch;
    min-width: 220px;
    padding: 0.3rem 0;
}

.mods-hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.mods-metric-card {
    display: grid;
    gap: 0.18rem;
    padding: 0.72rem 0.8rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mods-metric-card span {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(248, 249, 250, 0.52);
}

.mods-metric-card strong {
    font-size: 0.96rem;
}

.mod-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
}

.mod-slot {
    min-height: 138px;
    border-radius: 18px;
    padding: 0.9rem 1rem;
}

.mod-slot.filled {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.mod-slot-copy {
    display: grid;
    gap: 0.26rem;
}

.mod-slot-copy strong {
    font-size: 1rem;
}

.mods-section-header {
    align-items: end;
    margin: 0.2rem 0 0.15rem;
}

.mod-inventory {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.72rem;
}

.mod-card {
    display: grid;
    gap: 0.55rem;
    min-height: 100%;
    padding: 0.9rem 0.95rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(11, 9, 16, 0.72));
}

.mod-card-topline {
    align-items: flex-start;
    gap: 0.8rem;
}

.mod-card-subtitle {
    font-size: 0.75rem;
    line-height: 1.35;
}

.mod-card .mod-bonus-row {
    margin-top: 0.1rem;
}

.mod-bonus-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.mod-bonus-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.54rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    color: rgba(248, 249, 250, 0.82);
}

.mod-card-footer {
    margin-top: auto;
    gap: 0.7rem;
}

.mod-card .btn[disabled] {
    opacity: 0.52;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 980px) {
    .mods-hero-card,
    .mods-hero-metrics,
    .mod-slots {
        grid-template-columns: 1fr;
    }

    .mods-hero-stats {
        min-width: 0;
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 780px) {
    .armory-column-header {
        margin-bottom: 0.58rem;
    }

    .shop-panel .shop-item {
        padding: 0.85rem 0.9rem;
        gap: 0.68rem;
    }

    .shop-item-metrics,
    .shop-item-metrics.character-metrics,
    .mod-inventory {
        grid-template-columns: 1fr;
    }

    .shop-panel .shop-item-footer,
    .mod-card-footer {
        align-items: stretch;
    }

    .shop-item-action-chip,
    .mod-card-footer .btn,
    .mod-slot .btn {
        width: 100%;
    }
}

/* Armory layout correction */
.shop-panel .shop-scroll-region {
    grid-auto-rows: min-content;
    align-content: start;
}

.shop-panel .shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    min-height: auto;
    margin: 0;
}

.shop-panel .shop-column {
    display: grid;
    align-content: start;
    gap: 0;
    min-height: 0;
}

.shop-panel .list-container {
    max-height: clamp(250px, 31vh, 340px);
    overflow: auto;
    padding-right: 0.35rem;
}

.shop-panel .shop-inspector {
    display: grid;
    gap: 0.8rem;
    align-self: start;
    margin: 0.2rem 0 0;
}

#armory-mods {
    display: grid;
    gap: 1rem;
    align-content: start;
}

#armory-mods .mod-inventory {
    max-height: clamp(220px, 28vh, 300px);
    overflow: auto;
    padding-right: 0.35rem;
}

@media (max-width: 980px) {
    .shop-panel .shop-grid {
        grid-template-columns: 1fr;
    }

    .shop-panel .list-container,
    #armory-mods .mod-inventory {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

@media (min-width: 981px) {
    .armory-loadout-header {
        gap: 0.24rem;
        margin-bottom: 0;
    }

    .armory-loadout-header h3 {
        font-size: 1.04rem;
    }

    .armory-loadout-header .armory-pane-copy {
        font-size: 0.92rem;
        line-height: 1.38;
        max-width: 58ch;
    }

    .armory-overview-grid {
        gap: 0.7rem;
        margin-bottom: 0.8rem;
    }

    .armory-overview-card {
        padding: 0.78rem 0.9rem;
        gap: 0.18rem;
    }

    .armory-overview-card .text-muted {
        font-size: 0.8rem;
        line-height: 1.35;
    }

    .armory-column-header {
        gap: 0.16rem;
        margin-bottom: 0.5rem;
    }

    .armory-column-header p {
        font-size: 0.84rem;
        line-height: 1.35;
        max-width: 36ch;
    }

    .shop-panel .list-container {
        max-height: clamp(190px, 24vh, 255px);
    }
}

/* Armory IA reset */
.armory-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.shop-panel .armory-tab-content:not(.hidden) {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.armory-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.armory-summary-card {
    display: grid;
    gap: 0.45rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        rgba(16, 14, 21, 0.76);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}

.armory-summary-card strong {
    font-size: 1.2rem;
    line-height: 1.15;
}

.armory-summary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.armory-summary-callout {
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(234, 179, 8, 0.22);
    background: linear-gradient(180deg, rgba(234,179,8,0.08), rgba(0,0,0,0.08));
}

.armory-catalog-shell {
    display: grid;
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

#armory-character-detail,
#armory-weapon-detail {
    display: grid;
}

.armory-selection-panel {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--armory-accent, var(--secondary)) 18%, transparent), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        rgba(16, 14, 21, 0.8);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
}

.armory-selection-panel.empty {
    min-height: 220px;
    align-content: center;
}

.armory-selection-header {
    display: grid;
    gap: 0.35rem;
}

.armory-selection-header h3 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.05;
}

.armory-compare-grid {
    display: grid;
    gap: 0.55rem;
}

.armory-compare-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.75rem;
    padding: 0.72rem 0.85rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.armory-compare-row span,
.armory-compare-row strong,
.armory-compare-row em {
    margin: 0;
}

.armory-compare-row span {
    color: var(--text-muted);
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.armory-compare-row strong {
    font-size: 1rem;
    text-align: right;
}

.armory-compare-row em {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-style: normal;
    line-height: 1.4;
}

.armory-selection-callout {
    display: grid;
    gap: 0.12rem;
    padding: 0.85rem 0.95rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.armory-selection-label {
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.armory-selection-footer {
    display: grid;
    gap: 0.6rem;
}

.armory-selection-footer strong,
.armory-selection-footer span {
    display: block;
}

.armory-selection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.armory-card-grid.list-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

.shop-panel .shop-item {
    display: grid;
    gap: 0.7rem;
    align-content: start;
    min-height: 0;
    padding: 0.85rem 0.9rem;
    border-radius: 18px;
}

.shop-panel .shop-item.selected {
    border-color: rgba(234, 179, 8, 0.45);
    box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.35), 0 18px 38px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

.shop-panel .shop-item-topline {
    align-items: start;
}

.shop-panel .item-info {
    gap: 0.3rem;
}

.shop-panel .item-desc {
    font-size: 0.9rem;
    line-height: 1.45;
}

.shop-item-status {
    min-width: 84px;
    text-align: center;
}

.shop-item-metrics {
    gap: 0.55rem;
}

.shop-panel .shop-item-footer {
    align-items: start;
    gap: 0.45rem;
}

.shop-item-action-chip {
    align-self: flex-start;
}

.mods-workshop-strip {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.05rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        rgba(16, 14, 21, 0.78);
}

.mods-workshop-copy {
    display: grid;
    gap: 0.35rem;
}

.mods-workshop-copy h3 {
    margin: 0;
}

.mods-workshop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
    align-content: start;
}

.mods-workshop-meta span {
    padding: 0.65rem 0.8rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mods-metric-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.mods-metric-chip {
    display: grid;
    gap: 0.15rem;
    padding: 0.72rem 0.8rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mods-metric-chip span {
    color: var(--text-muted);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mod-slots.compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.mod-slot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
}

.mod-slot.empty {
    justify-content: flex-start;
}

.mod-slot-copy {
    display: grid;
    gap: 0.28rem;
}

.mod-slot-label {
    color: var(--text-muted);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mods-locker-shell {
    display: grid;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.mods-locker-panel {
    display: grid;
    gap: 0.8rem;
}

.mods-section-header.compact {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.8rem;
}

.mods-section-header.compact h3 {
    margin: 0.1rem 0 0;
}

.mods-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.mod-selection-panel {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
        rgba(16, 14, 21, 0.78);
}

.mod-selection-panel.empty {
    align-content: center;
    min-height: 220px;
}

.mod-inventory.compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

.mod-card {
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.mod-card.selected {
    border-color: rgba(234, 179, 8, 0.4);
    box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.3), 0 16px 36px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

.mods-empty-state {
    padding: 1rem;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 1180px) {
    .armory-summary-grid,
    .mods-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .armory-catalog-shell,
    .mods-locker-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px), (max-height: 720px) {
    .armory-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #armory-character-detail,
    #armory-weapon-detail {
        order: 2;
    }

    .armory-card-grid.list-container {
        order: 1;
    }

    .mods-workshop-strip,
    .mods-section-header.compact {
        flex-direction: column;
        align-items: stretch;
    }

    .mods-workshop-meta {
        justify-content: flex-start;
    }

    .mod-slots.compact {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .armory-summary-grid,
    .mods-metric-strip,
    .armory-tabs {
        grid-template-columns: 1fr;
    }

    .armory-selection-actions,
    .armory-summary-actions {
        flex-direction: column;
    }

    .armory-selection-actions .btn,
    .armory-summary-actions .btn {
        width: 100%;
    }
}

@media (max-height: 760px) {
    .shop-panel .panel-header p,
    .armory-pane-copy,
    .mods-workshop-copy p {
        display: none;
    }

    .shop-panel .panel-header {
        gap: 0.35rem;
    }

    .armory-pane-header,
    .armory-summary-grid,
    .armory-catalog-shell,
    .mods-locker-shell,
    .mods-metric-strip,
    .mod-slots.compact {
        gap: 0.75rem;
    }

    .armory-summary-card,
    .armory-selection-panel,
    .mod-selection-panel,
    .mods-workshop-strip {
        padding: 0.85rem 0.95rem;
    }

    .armory-pane-header h3,
    .mods-workshop-copy h3,
    .armory-selection-header h3 {
        font-size: 1.22rem;
    }
}

@media (max-height: 520px) {
    .shop-panel .title.small {
        font-size: 2.9rem;
        margin-bottom: 0.1rem;
    }

    .armory-tabs .tab-btn {
        min-height: 0;
        padding: 0.68rem 0.78rem;
        font-size: 0.92rem;
    }

    .armory-tab-content[data-tab="summary"] .armory-pane-header {
        display: none;
    }

    .armory-summary-card .text-muted {
        display: none;
    }

    .armory-summary-grid {
        gap: 0.6rem;
    }

    .armory-summary-card {
        gap: 0.2rem;
        padding: 0.72rem 0.82rem;
    }

    .armory-summary-card .btn {
        margin-top: 0.2rem;
    }

    .mods-workshop-strip {
        padding: 0.78rem 0.85rem;
    }

    .mods-workshop-strip .text-muted {
        display: none;
    }

    .mods-workshop-meta span {
        padding: 0.55rem 0.68rem;
    }

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

/* Armory density rebalance */
@media (min-width: 901px) {
    .armory-catalog-shell {
        grid-template-columns: minmax(225px, 270px) minmax(0, 1fr);
        gap: 0.85rem;
        align-items: start;
    }

    .armory-selection-panel.compact {
        grid-template-columns: 1fr;
        gap: 0.65rem;
        align-items: stretch;
        padding: 0.82rem 0.86rem;
    }

    .armory-selection-panel.compact.empty {
        min-height: 0;
    }

    .armory-selection-overview,
    .armory-selection-meta {
        display: grid;
        gap: 0.4rem;
        align-content: start;
    }

    .armory-selection-overview .text-muted {
        margin: 0;
        line-height: 1.35;
    }

    .armory-selection-meta {
        justify-items: stretch;
    }

    .armory-selection-status {
        display: grid;
        gap: 0.22rem;
        padding: 0.72rem 0.8rem;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .armory-selection-callout.compact {
        padding: 0.72rem 0.8rem;
        gap: 0.12rem;
    }

    .armory-selection-actions .btn {
        width: 100%;
    }

    .armory-compare-grid {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .armory-compare-row {
        gap: 0.1rem 0.45rem;
        padding: 0.5rem 0.58rem;
    }

    .armory-compare-row span {
        font-size: 0.68rem;
    }

    .armory-compare-row strong {
        text-align: left;
        font-size: 0.94rem;
    }

    .armory-compare-row em {
        font-size: 0.7rem;
        line-height: 1.28;
    }

    .armory-card-grid.list-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.72rem;
        align-items: start;
        grid-auto-rows: min-content;
    }

    .armory-card-grid.list-container .shop-item {
        align-self: start;
        height: auto !important;
        gap: 0.5rem;
        padding: 0.72rem 0.78rem;
    }

    .armory-card-grid.list-container .shop-item-topline {
        gap: 0.55rem;
    }

    .armory-card-grid.list-container .item-info h4 {
        font-size: 1rem;
    }

    .armory-card-grid.list-container .item-desc {
        font-size: 0.78rem;
        line-height: 1.32;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .armory-card-grid.list-container .shop-item .item-ability {
        padding: 0.48rem 0.58rem;
        font-size: 0.72rem;
    }

    .armory-card-grid.list-container .shop-item-metrics,
    .armory-card-grid.list-container .shop-item-metrics.character-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.38rem;
    }

    .armory-card-grid.list-container .shop-metric-pill {
        gap: 0.08rem;
        padding: 0.42rem 0.5rem;
    }

    .armory-card-grid.list-container .shop-metric-pill span {
        font-size: 0.58rem;
    }

    .armory-card-grid.list-container .shop-metric-pill strong {
        font-size: 0.82rem;
    }

    .armory-card-grid.list-container .shop-metric-pill em {
        font-size: 0.62rem;
        line-height: 1.15;
    }

    .armory-card-grid.list-container .shop-item-footer {
        margin-top: 0;
        justify-content: flex-end;
        gap: 0.32rem;
    }

    .armory-card-grid.list-container .shop-item-hint {
        display: none;
    }

    .armory-card-grid.list-container .shop-item-action-chip {
        width: 100%;
        justify-content: center;
        font-size: 0.66rem;
        letter-spacing: 0.12em;
        padding: 0.38rem 0.55rem;
    }
}

@media (max-width: 1320px) and (min-width: 901px) {
    .armory-card-grid.list-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) and (min-width: 901px) {
    .armory-catalog-shell {
        grid-template-columns: minmax(210px, 235px) minmax(0, 1fr);
    }

    .armory-card-grid.list-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Armory desktop overflow correction */
@media (min-width: 901px) {
    .armory-catalog-shell,
    #armory-character-detail,
    #armory-weapon-detail,
    .armory-selection-panel.compact,
    .armory-selection-overview,
    .armory-selection-meta,
    .armory-compare-grid {
        min-width: 0;
        width: 100%;
    }

    .armory-catalog-shell {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .armory-selection-panel.compact {
        grid-template-columns: minmax(220px, 0.95fr) minmax(360px, 1.35fr) minmax(240px, 0.95fr);
        gap: 0.72rem 0.85rem;
        overflow: hidden;
        padding: 0.82rem 0.88rem;
    }

    .armory-selection-panel.compact.empty {
        grid-template-columns: 1fr;
    }

    .armory-selection-overview,
    .armory-selection-meta {
        align-content: start;
    }

    .armory-selection-meta {
        gap: 0.55rem;
    }

    .armory-selection-callout.compact,
    .armory-selection-status {
        min-width: 0;
    }

    .armory-compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.42rem;
    }

    .armory-compare-row {
        min-width: 0;
        padding: 0.48rem 0.56rem;
    }

    .armory-compare-row span {
        font-size: 0.62rem;
    }

    .armory-compare-row strong {
        font-size: 0.84rem;
    }

    .armory-compare-row em {
        font-size: 0.62rem;
        line-height: 1.18;
    }

    .armory-card-grid.list-container {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 0.68rem;
        align-items: start;
        grid-auto-rows: min-content;
    }

    .armory-card-grid.list-container .shop-item {
        align-self: start;
        height: auto !important;
        min-width: 0;
        gap: 0.48rem;
        padding: 0.68rem 0.72rem;
    }

    .armory-card-grid.list-container .shop-item-topline {
        gap: 0.45rem;
    }

    .armory-card-grid.list-container .item-info {
        gap: 0.18rem;
    }

    .armory-card-grid.list-container .item-info h4 {
        font-size: 0.94rem;
        line-height: 1.05;
    }

    .armory-card-grid.list-container .item-desc {
        font-size: 0.74rem;
        line-height: 1.24;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .armory-card-grid.list-container .shop-item .item-ability {
        padding: 0.42rem 0.5rem;
        font-size: 0.68rem;
    }

    .armory-card-grid.list-container .shop-item-metrics,
    .armory-card-grid.list-container .shop-item-metrics.character-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.34rem;
    }

    .armory-card-grid.list-container .shop-metric-pill {
        padding: 0.36rem 0.44rem;
    }

    .armory-card-grid.list-container .shop-metric-pill span {
        font-size: 0.54rem;
    }

    .armory-card-grid.list-container .shop-metric-pill strong {
        font-size: 0.78rem;
    }

    .armory-card-grid.list-container .shop-metric-pill em {
        font-size: 0.58rem;
        line-height: 1.1;
    }

    .armory-card-grid.list-container .shop-item-footer {
        margin-top: 0;
        justify-content: flex-end;
        gap: 0.28rem;
    }

    .armory-card-grid.list-container .shop-item-hint {
        display: none;
    }

    .armory-card-grid.list-container .shop-item-action-chip {
        width: 100%;
        justify-content: center;
        font-size: 0.62rem;
        padding: 0.34rem 0.48rem;
    }
}

@media (max-width: 1280px) and (min-width: 901px) {
    .armory-selection-panel.compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .armory-selection-meta {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) and (min-width: 901px) {
    .armory-selection-panel.compact {
        grid-template-columns: 1fr;
    }

    .armory-selection-meta {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .armory-card-grid.list-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Armory desktop final split */
@media (min-width: 901px) {
    .armory-catalog-shell {
        grid-template-columns: minmax(245px, 275px) minmax(0, 1fr);
        gap: 0.8rem;
        align-items: start;
    }

    #armory-character-detail,
    #armory-weapon-detail,
    .armory-selection-panel.compact {
        min-width: 0;
        width: 100%;
    }

    .armory-selection-panel.compact {
        grid-template-columns: 1fr;
        gap: 0.55rem;
        overflow: hidden;
        padding: 0.72rem 0.78rem;
    }

    .armory-selection-panel.compact.empty {
        min-height: 0;
    }

    .armory-selection-overview .text-muted {
        font-size: 0.76rem;
        line-height: 1.25;
    }

    .armory-selection-meta {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .armory-selection-status,
    .armory-selection-callout.compact {
        padding: 0.56rem 0.62rem;
    }

    .armory-compare-grid {
        grid-template-columns: 1fr;
        gap: 0.34rem;
    }

    .armory-compare-row {
        padding: 0.4rem 0.48rem;
    }

    .armory-compare-row span {
        font-size: 0.58rem;
    }

    .armory-compare-row strong {
        font-size: 0.78rem;
    }

    .armory-compare-row em {
        font-size: 0.56rem;
        line-height: 1.1;
    }

    .armory-card-grid.list-container {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 0.64rem;
    }
}

@media (max-width: 1180px) and (min-width: 901px) {
    .armory-catalog-shell {
        grid-template-columns: minmax(225px, 245px) minmax(0, 1fr);
    }

    .armory-card-grid.list-container {
        grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    }
}

/* Armory desktop left-rail layout */
@media (min-width: 901px) {
    .armory-tab-content[data-tab="gunfighters"] .armory-catalog-shell,
    .armory-tab-content[data-tab="weapons"] .armory-catalog-shell {
        grid-template-columns: clamp(280px, 31%, 360px) minmax(0, 1fr);
        gap: 0.95rem;
        align-items: start;
    }

    .armory-tab-content[data-tab="gunfighters"] #armory-character-detail,
    .armory-tab-content[data-tab="weapons"] #armory-weapon-detail {
        grid-column: 1;
        order: 1;
        align-self: start;
        min-width: 0;
    }

    .armory-tab-content[data-tab="gunfighters"] #character-list,
    .armory-tab-content[data-tab="weapons"] #weapon-list {
        grid-column: 2;
        order: 2;
        min-width: 0;
        align-self: start;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-selection-panel.compact,
    .armory-tab-content[data-tab="weapons"] .armory-selection-panel.compact {
        grid-template-columns: 1fr;
        gap: 0.68rem;
        align-content: start;
        padding: 0.86rem 0.92rem;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-selection-header,
    .armory-tab-content[data-tab="weapons"] .armory-selection-header,
    .armory-tab-content[data-tab="gunfighters"] .armory-selection-overview,
    .armory-tab-content[data-tab="weapons"] .armory-selection-overview,
    .armory-tab-content[data-tab="gunfighters"] .armory-selection-meta,
    .armory-tab-content[data-tab="weapons"] .armory-selection-meta {
        gap: 0.42rem;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-compare-grid,
    .armory-tab-content[data-tab="weapons"] .armory-compare-grid {
        gap: 0.4rem;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-compare-row,
    .armory-tab-content[data-tab="weapons"] .armory-compare-row {
        padding: 0.48rem 0.56rem;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.7rem;
        align-items: start;
        grid-auto-rows: min-content;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .shop-item,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .shop-item {
        align-self: start;
        gap: 0.52rem;
        padding: 0.78rem 0.82rem;
    }
}

@media (min-width: 1500px) {
    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) and (min-width: 901px) {
    .armory-tab-content[data-tab="gunfighters"] .armory-catalog-shell,
    .armory-tab-content[data-tab="weapons"] .armory-catalog-shell {
        grid-template-columns: minmax(255px, 32%) minmax(0, 1fr);
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container {
        grid-template-columns: 1fr;
    }
}

/* Armory desktop row catalog */
@media (min-width: 901px) {
    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container {
        grid-template-columns: 1fr;
        gap: 0.68rem;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .shop-item,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .shop-item {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.95fr) auto;
        grid-template-areas:
            "topline metrics footer"
            "ability metrics footer";
        align-items: center;
        gap: 0.4rem 0.78rem;
        padding: 0.72rem 0.78rem;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .shop-item-topline,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .shop-item-topline {
        grid-area: topline;
        margin: 0;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .item-info,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .item-info {
        gap: 0.16rem;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .item-info h4,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .item-info h4 {
        font-size: 1rem;
        line-height: 1.05;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .item-desc,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .item-desc {
        font-size: 0.77rem;
        line-height: 1.24;
        -webkit-line-clamp: 2;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .item-ability,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .item-ability {
        grid-area: ability;
        align-self: start;
        margin: 0;
        padding: 0.42rem 0.52rem;
        font-size: 0.68rem;
        line-height: 1.2;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .item-ability span,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .item-ability span {
        font-size: 0.58rem;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .shop-item-metrics,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .shop-item-metrics {
        grid-area: metrics;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-self: center;
        gap: 0.36rem;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .shop-item-metrics.character-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .shop-metric-pill,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .shop-metric-pill {
        gap: 0.08rem;
        padding: 0.4rem 0.48rem;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .shop-metric-pill span,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .shop-metric-pill span {
        font-size: 0.56rem;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .shop-metric-pill strong,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .shop-metric-pill strong {
        font-size: 0.8rem;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .shop-metric-pill em,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .shop-metric-pill em {
        font-size: 0.6rem;
        line-height: 1.1;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .shop-item-footer,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .shop-item-footer {
        grid-area: footer;
        margin: 0;
        align-self: center;
        justify-content: flex-end;
    }

    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .shop-item-action-chip,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .shop-item-action-chip {
        width: auto;
        min-width: 150px;
        padding: 0.42rem 0.72rem;
        font-size: 0.64rem;
    }
}

@media (max-width: 1360px) and (min-width: 901px) {
    .armory-tab-content[data-tab="gunfighters"] .armory-card-grid.list-container .shop-item,
    .armory-tab-content[data-tab="weapons"] .armory-card-grid.list-container .shop-item {
        grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.9fr) auto;
    }
}

@media (max-height: 420px) and (orientation: landscape) {
    .store-header {
        padding: 0.62rem 0.78rem 0.54rem;
    }

    .store-copy {
        display: none;
    }

    .store-balance {
        padding: 0.5rem 0.65rem;
    }

    .store-scroll-region {
        gap: 0.56rem;
        padding: 0.62rem 0.78rem 0;
    }

    .store-item {
        gap: 0.32rem;
        padding: 0.68rem 0.72rem;
    }

    .store-item p {
        font-size: 0.64rem;
        line-height: 1.18;
    }

    .store-item-note {
        display: none;
    }

    .store-item-price {
        font-size: 0.92rem;
    }

    .store-item .btn {
        padding: 0.68rem 0.8rem;
        font-size: 0.76rem;
    }

    .store-footer {
        padding: 0 0.78rem 0.62rem;
    }
}