#lobby-screen {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

/* Service worker "new version available" banner — top-of-screen, dismissed on tap */
#sw-update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: #8b3a1a;
    color: #f5e1b0;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(245, 225, 176, 0.3);
}

#sw-update-banner:active {
    background: #6f2d14;
}

/* Maintenance / version-gate overlay — blocks the app when the RTDB
   min_version is higher than the client's APP_VERSION. Styled to match
   the parchment/menu aesthetic so it doesn't look like a browser error. */
.maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background: radial-gradient(circle at center, #2a1408 0%, #0f0604 100%);
}

.maintenance-panel {
    max-width: 420px;
    width: 100%;
    padding: 36px 26px 28px;
    background-image: url('../assets/images/user-menu/background_menu.png');
    background-size: cover;
    background-position: center;
    border: 4px solid #3e2210;
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.25);
    text-align: center;
}

.maintenance-title {
    font-family: 'BJ Cree', serif;
    font-size: 32px;
    font-weight: 900;
    color: #5a1d0c;
    letter-spacing: 4px;
    margin: 0 0 18px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.maintenance-message {
    font-family: 'BJ Cree', serif;
    font-size: 15px;
    color: #3e2210;
    line-height: 1.5;
    margin: 0 0 26px;
    padding: 0 6px;
}

.maintenance-btn {
    display: inline-block;
    min-width: 180px;
    padding: 12px 32px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 30%, rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(180deg, #d6b37d 0%, #b8935a 55%, #a07840 100%);
    border: 3px solid #3e2210;
    border-radius: 12px;
    font-family: 'BJ Cree', serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #3e2210;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.1s;
}

.maintenance-btn:active {
    transform: scale(0.96);
}

.maintenance-subtext {
    font-family: 'BJ Cree', serif;
    font-size: 11px;
    color: rgba(62, 34, 16, 0.55);
    margin: 16px 0 0;
    letter-spacing: 1px;
}

/* ─── Wampum Shop ────────────────────────────────────────────── */
.wampum-shop-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
}

.wampum-shop-panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 32px 20px 22px;
    background-image: url('../assets/images/user-menu/background_menu.png');
    background-size: cover;
    background-position: center;
    border: 4px solid #3e2210;
    border-radius: 18px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.25);
    text-align: center;
}

.wampum-shop-close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #5a1d0c;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    font-family: 'BJ Cree', serif;
}

.wampum-shop-title {
    font-family: 'BJ Cree', serif;
    font-size: 26px;
    font-weight: 900;
    color: #5a1d0c;
    letter-spacing: 3px;
    margin: 0 0 6px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
}

.wampum-shop-sub {
    font-family: 'BJ Cree', serif;
    font-size: 13px;
    color: #3e2210;
    margin: 0 0 20px;
    opacity: 0.75;
}

.wampum-shop-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.wampum-pack-card {
    position: relative;
    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 30%, rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(180deg, #d6b37d 0%, #b8935a 55%, #a07840 100%);
    border: 3px solid #3e2210;
    border-radius: 14px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
    font-family: 'BJ Cree', serif;
    color: #3e2210;
    text-align: left;
    transition: transform 0.1s;
}

.wampum-pack-card:active:not(:disabled) {
    transform: scale(0.98);
}

.wampum-pack-card:disabled {
    opacity: 0.6;
    cursor: wait;
}

.wampum-pack-icon {
    width: 54px;
    height: 54px;
    background-image: url('../assets/images/economy/wampum.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.wampum-pack-amount {
    font-family: 'Ultra', serif;
    font-size: 26px;
    line-height: 1;
    color: #3e2210;
    letter-spacing: 1px;
}

.wampum-pack-currency {
    grid-column: 2;
    grid-row: 2;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: 0.7;
    text-transform: uppercase;
    margin-top: 2px;
}

.wampum-pack-price {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-family: 'BJ Cree', serif;
    font-size: 22px;
    font-weight: 900;
    color: #5a1d0c;
    padding: 6px 12px;
    background: rgba(255, 240, 200, 0.55);
    border: 2px solid #3e2210;
    border-radius: 10px;
}

.wampum-pack-bonus {
    position: absolute;
    top: -1px;
    right: 12px;
    padding: 4px 10px;
    background: #c8442a;
    color: #fff6dd;
    border: 2px solid #3e2210;
    border-radius: 999px;
    font-family: 'BJ Cree', serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

.wampum-shop-secure {
    font-family: 'BJ Cree', serif;
    font-size: 10px;
    color: rgba(62, 34, 16, 0.55);
    margin: 0;
    letter-spacing: 1px;
}

.lobby-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/images/homepage.png');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/* --- Sundown Showdown: dedicated lobby background during the event window.
   Same mechanism as the default lobby bg (a PNG on .lobby-bg), swapped via a
   `.sundown` class toggled by ui-manager. The keyframe gives the swap a soft
   fade-in so the change is noticeable. --- */
.lobby-bg.sundown {
    background-image: url('../assets/images/homepage_sundown_showdown.png');
    animation: hn-sundown-bg-in 900ms ease-out;
}
@keyframes hn-sundown-bg-in {
    from { opacity: 0.15; filter: brightness(1.6) saturate(1.3); }
    to   { opacity: 1;    filter: none; }
}

/* Lobby countdown for the Sundown Showdown — sits just below the Daily Bounty
   badge (top-right column). */
.sundown-countdown-wrapper {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 108px);
    right: 16px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    text-align: center;
}
.sundown-countdown-label {
    font-family: var(--hn-font-head);
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--hn-rust-deep);
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.4);
    text-transform: uppercase;
}
.sundown-countdown-time {
    font-family: var(--hn-font-typewriter);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--hn-ink);
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.4);
    margin-top: 3px;
    line-height: 1.2;
}
/* Active state — warm glow + pulse while the event is live. */
.sundown-countdown-wrapper.active .sundown-countdown-label {
    color: var(--hn-gold-light);
    text-shadow: 0 0 8px rgba(244, 195, 106, 0.7), 0 1px 0 rgba(0, 0, 0, 0.5);
    animation: hn-claim-pulse 1.8s ease-in-out infinite;
}
.sundown-countdown-wrapper.active .sundown-countdown-time {
    color: var(--hn-gold-light);
    text-shadow: 0 0 6px rgba(244, 195, 106, 0.55), 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* ×2 bonus badge — stylish gold pill, glowing halo pulse + diagonal sheen
   sweep. Hidden until the event is LIVE (only then is the multiplier active). */
.sundown-countdown-x2 {
    display: none;
    position: relative;
    overflow: hidden;
    margin-top: 5px;
    padding: 2px 11px;
    border-radius: 9px;
    font-family: var(--hn-font-head);
    font-size: 17px;
    letter-spacing: 0.04em;
    color: var(--hn-ink);
    background: linear-gradient(to bottom, var(--hn-gold-light) 0%, var(--hn-gold) 55%, var(--hn-rust) 100%);
    border: 1.5px solid var(--hn-gold-light);
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.65);
    animation: hn-sundown-x2-pulse 1.6s ease-in-out infinite;
}
.sundown-countdown-wrapper.active .sundown-countdown-x2 {
    display: inline-block;
}
/* Diagonal sheen sweep across the badge. */
.sundown-countdown-x2::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
    transform: skewX(-20deg);
    animation: hn-sundown-x2-sheen 2.6s ease-in-out infinite;
}
@keyframes hn-sundown-x2-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(244, 195, 106, 0.85), 0 0 20px rgba(244, 195, 106, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    }
    50% {
        transform: scale(1.09);
        box-shadow: 0 0 16px rgba(244, 195, 106, 1), 0 0 32px rgba(244, 195, 106, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }
}
@keyframes hn-sundown-x2-sheen {
    0% { left: -60%; }
    55%, 100% { left: 130%; }
}

/* One-shot "event started" banner. */
.sundown-start-banner {
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 90;
    padding: 12px 22px;
    border-radius: 14px;
    background: linear-gradient(to bottom, var(--hn-rust-light) 0%, var(--hn-rust) 55%, var(--hn-rust-deep) 100%);
    border: 2.5px solid var(--hn-saddle-night);
    box-shadow: inset 0 1px 0 rgba(255, 235, 205, 0.3), 0 6px 18px rgba(0, 0, 0, 0.55);
    font-family: var(--hn-font-head);
    color: var(--hn-dust);
    text-align: center;
    text-shadow: 0 2px 0 var(--hn-saddle-night);
    pointer-events: none;
    animation: hn-sundown-banner 3000ms cubic-bezier(.2, .9, .3, 1.2) forwards;
}
.sundown-start-banner .sb-title { font-size: 17px; letter-spacing: 0.08em; }
.sundown-start-banner .sb-sub {
    margin-top: 4px; font-size: 10px; letter-spacing: 0.14em;
    color: var(--hn-gold-light);
}
@keyframes hn-sundown-banner {
    0%   { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.92); }
    15%  { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
    80%  { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(1); }
}

/* --- MENU --- */
.menu-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    background: transparent;
    border: none;
    width: 64px;
    /* Slightly larger for custom icon */
    height: 64px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: transform 0.2s;
}

.menu-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

.menu-btn:active {
    transform: scale(0.9);
    background: transparent;
}

/* --- RANKING HEADER (centered) --- */
.lobby-ranking-header {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
}

/* --- BOUNTY BADGE (right of leaderboard) --- */
.bounty-badge-wrapper {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: 16px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bounty-timer-label {
    font-family: var(--hn-font-typewriter);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--hn-ink);
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.4);
    text-align: center;
    margin-top: 6px;
    line-height: 1.3;
    max-width: 120px;
}

/* Lobby HUD pill — saddle-wood plate, ported from WoodTheme SaddlePanel.
   Used by #ranking-worldwide and #bounty-badge. Class name kept for JS. */
.ranking-box {
    position: relative;
    background: linear-gradient(to bottom,
            var(--hn-saddle-light) 0%,
            var(--hn-saddle) 55%,
            var(--hn-saddle-dark) 100%);
    border: 2.5px solid var(--hn-saddle-dark);
    border-radius: 10px;
    padding: 7px 22px 9px;
    text-align: center;
    min-width: 112px;
    box-shadow:
        inset 0 1px 0 rgba(242, 231, 210, 0.28),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3),
        0 3px 0 var(--hn-saddle-night),
        0 5px 10px rgba(0, 0, 0, 0.45);
    font-family: var(--hn-font-body);
    cursor: pointer;
    overflow: hidden;
    transition: transform 90ms ease, box-shadow 90ms ease;
}

/* inner hairline */
.ranking-box::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 7px;
    border: 1px solid rgba(242, 231, 210, 0.22);
    pointer-events: none;
}

/* diagonal weave overlay */
.ranking-box::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image: repeating-linear-gradient(45deg,
            rgba(242, 231, 210, 0.15) 0 6px,
            transparent 6px 14px);
}

.ranking-box:active {
    transform: translateY(2px);
    box-shadow:
        inset 0 3px 7px rgba(0, 0, 0, 0.5),
        0 1px 0 var(--hn-saddle-night);
}

.ranking-label {
    position: relative;
    z-index: 1;
    font-family: var(--hn-font-head);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--hn-gold);
    margin-bottom: 2px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.ranking-position {
    position: relative;
    z-index: 1;
    font-family: var(--hn-font-head);
    font-size: 22px;
    color: var(--hn-dust);
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.6),
        0 0 8px rgba(0, 0, 0, 0.35);
    line-height: 1.05;
    letter-spacing: 0.02em;
}

/* ====== FULL-SCREEN MENU ====== */
.app-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
}

.menu-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #d4b483 0%, #c4a67a 50%, #a88048 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 13% 8% 10%;
    box-sizing: border-box;
}

/* ═══ Western-style panel (shared by main menu + settings subpage) ═══ */
.menu-panel {
    padding: 18px 6% 14px;
    overflow-y: auto;
}

.menu-header {
    position: relative;
    width: 100%;
    padding: 18px 0 12px;
    text-align: center;
    border-bottom: 3px solid #5d3a1a;
    margin-bottom: 12px;
}

.menu-header-sub {
    padding-top: 32px;
    /* leave room for the back button */
}

.menu-title-text {
    font-family: 'BJ Cree', serif;
    font-size: 28px;
    font-weight: 900;
    color: #5a1d0c;
    letter-spacing: 4px;
    margin: 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* ---- Main menu rows (cards with icon + title + subtitle + arrow) ---- */
.menu-rows {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 0;
    padding-bottom: 10px;
}

.menu-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 30%, rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(180deg, #d6b37d 0%, #b8935a 55%, #a07840 100%);
    border: 3px solid #3e2210;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform 0.1s, box-shadow 0.15s;
}

.menu-row:active {
    transform: scale(0.98);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.menu-row-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    background: linear-gradient(180deg, #e6c28d 0%, #c89a60 100%);
    border: 2px solid #6b4220;
    border-radius: 10px;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2), inset 0 -1px 2px rgba(255, 255, 255, 0.2);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.menu-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-row-title {
    font-family: 'BJ Cree', serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #5a1d0c;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    line-height: 1.05;
    /* Let long labels like "Buy Wampum" stay intact rather than truncate */
    white-space: normal;
    overflow-wrap: break-word;
}

.menu-row-sub {
    font-size: 11px;
    color: #3e2210;
    opacity: 0.8;
    line-height: 1.2;
}

.menu-row-arrow {
    flex: 0 0 auto;
    font-size: 18px;
    color: #5a1d0c;
    opacity: 0.65;
    padding-left: 4px;
}

/* Danger variant (Log Off) — warmer red hue */
.menu-row-danger {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 35%, rgba(0, 0, 0, 0.15) 100%),
        linear-gradient(180deg, #d59072 0%, #b96846 55%, #8e4028 100%);
}

.menu-row-danger .menu-row-title {
    color: #3a0f06;
}

.menu-row-danger .menu-row-icon {
    background: linear-gradient(180deg, #e9b39a 0%, #c88063 100%);
}

/* ---- Footer (Discord + Close) ---- */
.menu-footer {
    display: flex;
    gap: 10px;
    width: 100%;
    padding-top: 10px;
    border-top: 2px dashed rgba(93, 58, 26, 0.35);
}

.menu-footer-btn {
    flex: 1;
    padding: 12px 14px;
    font-family: 'BJ Cree', serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #2c1507;
    background: linear-gradient(180deg, #d6b37d 0%, #b8935a 50%, #a07840 100%);
    border: 2px solid #6b4220;
    border-radius: 999px;
    box-shadow: 0 3px 0 #3e2210, 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.menu-footer-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #3e2210, 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.menu-footer-discord {
    background: linear-gradient(180deg, #7984ff 0%, #5865f2 55%, #3e47c1 100%);
    color: #fff;
    border-color: #2a3494;
    box-shadow: 0 3px 0 #2a3494, 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.menu-footer-discord:active {
    box-shadow: 0 1px 0 #2a3494, 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.menu-footer-icon {
    font-size: 16px;
}

/* ═══ Settings subpage cards ═══ */
.settings-section {
    width: 100%;
    margin-bottom: 14px;
}

.settings-section-title {
    font-family: 'BJ Cree', serif;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 4px;
    color: #8b3a1a;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 8px;
    position: relative;
    padding-bottom: 6px;
}

.settings-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(93, 58, 26, 0.55), transparent);
}

.settings-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 30%, rgba(0, 0, 0, 0.1) 100%),
        linear-gradient(180deg, #d6b37d 0%, #b8935a 55%, #a07840 100%);
    border: 3px solid #3e2210;
    border-radius: 14px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    padding: 6px 14px;
}

.settings-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}

.settings-card-col {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.settings-card-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.settings-card-label {
    font-family: 'BJ Cree', serif;
    font-size: 15px;
    font-weight: 900;
    color: #5a1d0c;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.settings-card-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(62, 34, 16, 0.35), transparent);
}

/* Sensitivity value pill */
.settings-value-pill {
    min-width: 42px;
    padding: 3px 10px;
    background: linear-gradient(180deg, #3e2210 0%, #2c1507 100%);
    color: #f0c040;
    border: 2px solid #8b6914;
    border-radius: 999px;
    font-family: 'BJ Cree', serif;
    font-size: 15px;
    font-weight: 900;
    text-align: center;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Exchange card (Wampum -> Gold) */
.settings-card-exchange {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.exchange-balance-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'BJ Cree', serif;
    color: #5a1d0c;
    font-size: 14px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.exchange-currency-icon {
    width: 24px;
    height: 24px;
}

.exchange-balance-label {
    opacity: 0.8;
    margin-right: 4px;
}

.exchange-balance-value {
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1px;
}

.exchange-rate-row {
    text-align: center;
    font-family: 'BJ Cree', serif;
    font-size: 12px;
    color: rgba(62, 34, 16, 0.75);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.exchange-stepper {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 8px;
}

.exchange-step-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    font-family: 'BJ Cree', serif;
    font-size: 22px;
    font-weight: 900;
    color: #3e2210;
    background: linear-gradient(180deg, #e8c375 0%, #b8935a 100%);
    border: 2px solid #3e2210;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.exchange-step-btn:active {
    transform: scale(0.94);
}

#exchange-amount {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    text-align: center;
    font-family: 'BJ Cree', serif;
    font-size: 20px;
    font-weight: 900;
    color: #f0c040;
    background: linear-gradient(180deg, #3e2210 0%, #2c1507 100%);
    border: 2px solid #8b6914;
    border-radius: 10px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
    -moz-appearance: textfield;
}

#exchange-amount::-webkit-outer-spin-button,
#exchange-amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.exchange-max-btn {
    padding: 0 12px;
    height: 40px;
    font-family: 'BJ Cree', serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #f0c040;
    background: linear-gradient(180deg, #5a1d0c 0%, #3e1407 100%);
    border: 2px solid #8b6914;
    border-radius: 10px;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.exchange-max-btn:active {
    transform: scale(0.94);
}

.exchange-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    background: rgba(62, 34, 16, 0.12);
    border-radius: 8px;
    font-family: 'BJ Cree', serif;
    font-size: 14px;
    font-weight: 900;
    color: #3e2210;
}

.exchange-preview-icon {
    width: 20px;
    height: 20px;
}

.exchange-arrow {
    font-size: 18px;
    color: #5a1d0c;
    font-weight: 900;
}

.exchange-convert-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 12px;
    font-family: 'BJ Cree', serif;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #fff;
    background: linear-gradient(180deg, #e8b942 0%, #a07017 100%);
    border: 3px solid #3e2210;
    border-radius: 12px;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.1s, opacity 0.15s;
}

.exchange-convert-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.exchange-convert-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Language card */
.settings-card-lang .language-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 10px 0;
}

.menu-version {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 9px;
    color: rgba(80, 55, 30, 0.4);
    font-family: 'BJ Cree', serif;
    z-index: 1;
}

/* ---- Main Menu: image buttons ---- */
.menu-img-buttons {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.menu-img-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 72%;
    max-width: 260px;
    transition: transform 0.1s;
    display: block;
}

.menu-img-btn img {
    width: 100%;
    height: auto;
    display: block;
}

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

/* Text-only fallback button (no image asset) */
.menu-text-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-family: 'BJ Cree', serif;
    font-size: 14px;
    letter-spacing: 1.5px;
    color: #2c1507;
    text-transform: uppercase;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0) 40%,
            rgba(0, 0, 0, 0.06) 100%),
        linear-gradient(180deg, #b8935a 0%, #a07840 50%, #96703a 100%);
    border-radius: 5px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

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

/* ---- Bottom row (close / discord) ---- */
.menu-bottom-row {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
    padding-top: 8px;
}

.menu-bottom-row--single {
    justify-content: center;
}

.menu-img-btn--bottom {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 38%;
    max-width: 150px;
    transition: transform 0.1s;
}

.menu-img-btn--bottom img {
    width: 100%;
    height: auto;
    display: block;
}

.menu-img-btn--bottom:active {
    transform: scale(0.95);
}

/* ---- Back button positioning ---- */
.section-back-pos {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

.menu-back-btn {
    align-self: flex-start;
}

/* ---- User Menu (character-tap hub) ---- */
#user-menu-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
}

.user-menu-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #c4a67a;
    background-image: url('../assets/images/user-menu/background_menu.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 56px 4% 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.user-menu-back-pos {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

/* Two-column main: character + currency on the left, rows on the right */
.user-menu-main {
    flex: 1;
    display: flex;
    gap: 10px;
    min-height: 0;
}

.user-menu-left {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 2px;
    min-height: 0;
}

.user-menu-char {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 0;
}

.user-menu-char .char-img {
    flex: 1;
    width: 160%;
    min-height: 0;
    /* Character art is taller than wide — ~2:3 gives a big, readable sprite */
    aspect-ratio: 2 / 3;
    max-width: 180%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}

/* Name plaque — dark wooden plank with warm ivory lettering */
.user-menu-char .char-label {
    flex: 0 0 auto;
    font-family: 'BJ Cree', serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #f5d98f;
    text-transform: uppercase;
    padding: 6px 14px;
    background: linear-gradient(180deg, #5d3a1a 0%, #3e2210 100%);
    border: 2px solid #8b6914;
    border-radius: 16px;
    box-shadow:
        0 3px 0 #2c1507,
        0 4px 8px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    max-width: 100%;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.1;
}

/* Rank + score badge — gold seal style, two-line layout */
.user-menu-char .char-rank {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'BJ Cree', serif;
    font-weight: 900;
    color: #3e2210;
    text-transform: uppercase;
    padding: 6px 14px;
    background: linear-gradient(180deg, #ffe089 0%, #d4a438 100%);
    border: 2px solid #6b4220;
    border-radius: 14px;
    box-shadow:
        0 2px 0 #6b4220,
        0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    text-align: center;
    line-height: 1.1;
}

.user-menu-rank-title {
    font-size: 13px;
    letter-spacing: 1.5px;
}

.user-menu-rank-score {
    font-size: 11px;
    letter-spacing: 1px;
    opacity: 0.85;
    margin-top: 2px;
}

.user-menu-currency-col {
    align-items: flex-start;
    flex: 0 0 auto;
}

.user-menu-list {
    flex: 0 0 60%;
    max-width: 60%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.user-menu-row {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px 10px 4px 6px;
    background: linear-gradient(180deg, #d6b37d 0%, #b8935a 50%, #a07840 100%);
    border: 2px solid #6b4220;
    border-radius: 10px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    text-align: left;
    transition: transform 0.1s;
    font-family: inherit;
}

.user-menu-row:active {
    transform: scale(0.98);
}

.user-menu-icon {
    flex: 0 0 auto;
    height: 85%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    box-shadow: none;
    overflow: visible;
}

.user-menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.user-menu-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.user-menu-title {
    font-family: 'BJ Cree', serif;
    font-size: 17px;
    color: #8b3a1a;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    text-transform: capitalize;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-subtitle {
    font-size: 11px;
    color: #3e2210;
    letter-spacing: 0.2px;
    line-height: 1.15;
}

.user-menu-footer {
    display: flex;
    gap: 10px;
    padding-top: 10px;
}

.user-menu-footer-btn {
    flex: 1;
    padding: 12px 16px;
    font-family: 'BJ Cree', serif;
    font-size: 18px;
    color: #2c1507;
    letter-spacing: 1px;
    background: linear-gradient(180deg, #d6b37d 0%, #b8935a 50%, #a07840 100%);
    border: 2px solid #6b4220;
    border-radius: 10px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    cursor: pointer;
    text-transform: capitalize;
    transition: transform 0.1s;
}

.user-menu-footer-btn:active {
    transform: translateY(1px);
}

/* ---- Image-based BACK button (shared across settings, store, sections) ---- */
.back-img-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 90px;
    transition: transform 0.1s;
    display: block;
}

.back-img-btn img {
    width: 100%;
    height: auto;
    display: block;
}

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

/* ---- Settings Subpage ---- */
.settings-subpage-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    overflow-y: auto;
    padding-bottom: 8px;
}

.settings-subpage-content .settings-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    justify-content: center;
    margin-bottom: 0;
}

.settings-subpage-content .settings-label {
    color: #2c1507;
    font-family: 'BJ Cree', serif;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.settings-subpage-content .sensitivity-header,
.settings-subpage-content .language-header {
    justify-content: center;
    margin-top: 6px;
}

.settings-subpage-content .sensitivity-row {
    gap: 10px;
}

.settings-subpage-content .settings-value {
    color: #2c1507;
    font-family: 'Ultra', serif;
    font-size: 18px;
    min-width: 30px;
    text-align: center;
}

.settings-subpage-content .lang-btn {
    background: rgba(44, 21, 7, 0.12);
    color: #5a3a1e;
    border-color: rgba(44, 21, 7, 0.25);
}

.settings-subpage-content .lang-btn.active {
    background: rgba(44, 21, 7, 0.22);
    color: #2c1507;
    border-color: #8b6d47;
}

/* ====== STATS PANEL — Parchment Footer ====== */
/* Panel expands upward to meet the wooden platform — no dead space. */
/* top + bottom define the height dynamically (155px matches .lobby-floor-container offset). */
.lobby-stats-panel {
    position: absolute;
    bottom: 0;
    top: calc(100% - 155px - env(safe-area-inset-bottom));
    left: 0;
    width: 100vw;
    background: linear-gradient(to bottom,
            var(--hn-sand-light) 0%,
            var(--hn-sand) 45%,
            var(--hn-tumbleweed) 100%);
    border-top: 2.5px solid var(--hn-saddle);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.7),
        inset 0 -2px 6px rgba(107, 59, 34, 0.25),
        0 -2px 0 var(--hn-saddle-dark),
        0 -8px 24px rgba(0, 0, 0, 0.45);
    padding: 11px 16px calc(8px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--hn-saddle-dark);
    font-family: var(--hn-font-body);
    z-index: 10;
    overflow: hidden;
}

/* inner hairline (matches SandCard) */
.lobby-stats-panel::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid var(--hn-saddle);
    opacity: 0.32;
    border-radius: 4px;
    pointer-events: none;
}

.lobby-stats-panel > * {
    position: relative;
    z-index: 1;
}

/* Shared row */
.sp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Row 1: Username + Level */
.sp-row-top {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(74, 39, 19, 0.28);
}

.sp-username-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-username {
    font-family: var(--hn-font-head);
    font-size: 20px;
    color: var(--hn-saddle-dark);
    margin: 0;
    line-height: 1;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.55);
}

/* Saddle-pill mini button (CHANGE) */
.sp-change-name-btn {
    padding: 3px 9px 4px;
    font-family: var(--hn-font-head);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hn-dust);
    background: linear-gradient(to bottom,
            var(--hn-saddle-light) 0%,
            var(--hn-saddle) 55%,
            var(--hn-saddle-dark) 100%);
    border: 1.5px solid var(--hn-saddle-dark);
    border-radius: 6px;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
    line-height: 1.3;
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 205, 0.28),
        0 1.5px 0 var(--hn-saddle-night);
    transition: transform 80ms ease;
}

.sp-change-name-btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.45),
        0 0 0 var(--hn-saddle-night);
}

/* Rename Modal */
.rename-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
}

.rename-modal-card {
    background: linear-gradient(180deg, #f5e6c8 0%, #d4b88c 100%);
    border: 3px solid #8a6d10;
    border-radius: 12px;
    padding: 24px 20px;
    width: 85%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.rename-title {
    font-family: 'BJ Cree', serif;
    font-size: 20px;
    color: #2c1507;
    margin: 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

.rename-input {
    width: 100%;
    padding: 10px 12px;
    font-family: 'BJ Cree', serif;
    font-size: 16px;
    color: #2c1507;
    background: #fff8ec;
    border: 2px solid #8a6d10;
    border-radius: 6px;
    outline: none;
    text-align: center;
    box-sizing: border-box;
}

.rename-input::placeholder {
    color: #b8a080;
    font-size: 13px;
}

.rename-input:focus {
    border-color: #c9a227;
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.3);
}

.rename-confirm-btn {
    width: 100%;
    padding: 12px 16px;
    font-family: 'BJ Cree', serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(180deg, #c9a227 0%, #8a6d10 100%);
    border: 2px solid #d4af37;
    border-radius: 6px;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.rename-confirm-btn:active {
    transform: scale(0.97);
}

.rename-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.rename-cancel-btn {
    background: none;
    border: none;
    font-family: 'BJ Cree', serif;
    font-size: 12px;
    color: #5d3a1a;
    cursor: pointer;
    letter-spacing: 1px;
    opacity: 0.7;
}

.rename-cancel-btn:active {
    opacity: 1;
}

.sp-level-block {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-level {
    font-family: var(--hn-font-head);
    font-size: 30px;
    color: var(--hn-saddle-dark);
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow:
        0 1px 0 rgba(255, 245, 220, 0.55),
        0 2px 4px rgba(74, 39, 19, 0.25);
}

.sp-reward-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.sp-reward-score {
    font-family: var(--hn-font-head);
    font-size: 14px;
    color: var(--hn-rust-deep);
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
}

.sp-reward-label {
    font-family: var(--hn-font-head);
    font-size: 8px;
    color: var(--hn-saddle);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
}

/* Row 2: Gold + XP bar */
.sp-row-mid {
    gap: 10px;
}

.sp-currency-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.sp-currency-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.sp-gold-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sp-wampum-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sp-gold-value {
    font-family: var(--hn-font-head);
    font-size: 18px;
    color: var(--hn-saddle-dark);
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
    letter-spacing: 0.02em;
}

.sp-wampum-value {
    font-family: var(--hn-font-head);
    font-size: 16px;
    color: var(--hn-saddle-dark);
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
    letter-spacing: 0.02em;
}

.sp-gold-buy-btn {
    margin-left: 6px;
    padding: 3px 10px 4px;
    font-family: var(--hn-font-head);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hn-dust);
    background: linear-gradient(to bottom,
            var(--hn-saddle-light) 0%,
            var(--hn-saddle) 55%,
            var(--hn-saddle-dark) 100%);
    border: 1.5px solid var(--hn-saddle-dark);
    border-radius: 6px;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
    line-height: 1.3;
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 205, 0.28),
        0 1.5px 0 var(--hn-saddle-night);
    transition: transform 80ms ease;
}

.sp-gold-buy-btn:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.45),
        0 0 0 var(--hn-saddle-night);
}

/* ── Wampum BUY — gold→rust gradient pill, pulsing + sheen sweep ── */
#lobby-buy-wampum-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom,
            var(--hn-gold-light) 0%,
            var(--hn-gold) 50%,
            var(--hn-rust) 100%);
    border-color: var(--hn-saddle-dark);
    color: var(--hn-dust);
    text-shadow: 0 1px 0 rgba(74, 19, 10, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 210, 0.45),
        0 1.5px 0 var(--hn-saddle-dark),
        0 0 0 rgba(244, 195, 106, 0);
    animation: wampum-buy-pulse 2.2s ease-in-out infinite;
}

#lobby-buy-wampum-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg,
            rgba(255, 245, 210, 0) 0%,
            rgba(255, 245, 210, 0.6) 50%,
            rgba(255, 245, 210, 0) 100%);
    transform: skewX(-20deg);
    animation: wampum-buy-shine 3.5s ease-in-out infinite;
    pointer-events: none;
}

#lobby-buy-wampum-btn:active {
    animation: none;
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 4px rgba(74, 19, 10, 0.45),
        0 0 0 var(--hn-saddle-dark);
}

@keyframes wampum-buy-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow:
            inset 0 1px 0 rgba(255, 245, 210, 0.45),
            0 1.5px 0 var(--hn-saddle-dark),
            0 0 0 rgba(244, 195, 106, 0);
    }

    50% {
        transform: scale(1.06);
        box-shadow:
            inset 0 1px 0 rgba(255, 245, 210, 0.45),
            0 1.5px 0 var(--hn-saddle-dark),
            0 0 14px rgba(244, 195, 106, 0.7);
    }
}

@keyframes wampum-buy-shine {
    0% {
        left: -80%;
    }

    55% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}

.sp-xp-block {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.sp-xp-label {
    font-family: var(--hn-font-head);
    font-size: 8px;
    color: var(--hn-saddle);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-align: right;
    flex-shrink: 0;
}

/* GoldProgressBar — gunmetal track + gold→rust fill */
.sp-xp-bar {
    width: 130px;
    height: 16px;
    background: linear-gradient(to bottom, var(--hn-ink) 0%, var(--hn-gunmetal) 100%);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    border: 1.5px solid var(--hn-saddle-dark);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.55);
    flex-shrink: 0;
}

.sp-xp-fill {
    height: 100%;
    background: linear-gradient(to bottom,
            var(--hn-gold-light) 0%,
            var(--hn-gold) 45%,
            var(--hn-rust) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 245, 210, 0.5);
    border-radius: 6px;
    transition: width 0.4s ease;
}

.sp-xp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--hn-font-head);
    font-size: 9px;
    letter-spacing: 0.06em;
    color: var(--hn-dust);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

/* Row 3: Energy */
.sp-row-bot {
    justify-content: flex-end;
}

.sp-energy-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-energy-label {
    font-family: var(--hn-font-head);
    font-size: 10px;
    color: var(--hn-saddle-dark);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.45);
}

.sp-energy-bolt {
    font-size: 14px;
    line-height: 1;
    filter: drop-shadow(0 1px 0 rgba(255, 245, 220, 0.45));
}

.sp-energy-timer {
    font-family: var(--hn-font-typewriter);
    font-size: 11px;
    color: var(--hn-saddle-dark);
    letter-spacing: 0.06em;
    opacity: 0.92;
}

.energy-slots {
    display: flex;
    gap: 4px;
}

.energy-slot {
    width: 7px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid var(--hn-saddle-dark);
    background: linear-gradient(to bottom, var(--hn-ink) 0%, var(--hn-gunmetal) 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.55);
}

.energy-slot.filled {
    background: linear-gradient(to bottom,
            var(--hn-gold-light) 0%,
            var(--hn-gold) 50%,
            var(--hn-rust) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 210, 0.45),
        0 0 4px rgba(244, 195, 106, 0.45);
}

/* --- FLOOR & CHARACTERS --- */
.lobby-floor-container {
    position: absolute;
    bottom: calc(155px + env(safe-area-inset-bottom));
    left: 0;
    width: 100%;
    height: 530px;
    /* Increased to accommodate 420px sprites + labels */
    z-index: 5;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
}

.lobby-floor-container::-webkit-scrollbar {
    display: none;
}

.character-carousel {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 0;
    padding: 0 50vw 40px;
    /* Padding for centering */
    width: max-content;
    height: 100%;
    background-image: url('../assets/images/lobby_plank.png');
    background-repeat: repeat-x;
    background-size: auto 580px;
    background-position: left bottom;
}

.char-slot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
    scroll-snap-align: center;
}

.char-slot:active {
    transform: scale(0.95);
}

.char-img {
    width: 280px;
    height: 385px;
    background-size: contain, contain;
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, center bottom;
    margin-bottom: 15px;
}

#dummy-slot .char-img,
#wildcard-slot .char-img {
    transform: scale(0.96);
    transform-origin: center bottom;
}

/* Carousel name pill — wood plate (SaddlePanel mood, ported from WoodTheme).
   The JS applySeasonBadge() overrides border + box-shadow + border-radius
   on every render; we keep the look in the gradient + ::before hairline
   so the rank glow halo composes cleanly on top. */
.char-label {
    position: relative;
    box-sizing: border-box;
    width: 148px;
    max-width: 148px;
    padding: 6px 12px 7px;
    background: linear-gradient(to bottom,
            var(--hn-saddle-light) 0%,
            var(--hn-saddle) 55%,
            var(--hn-saddle-dark) 100%);
    border: 2px solid var(--hn-saddle-dark);
    border-radius: 15px;
    text-align: center;
    overflow: hidden;
    font-family: var(--hn-font-body);
    box-shadow:
        inset 0 1px 0 rgba(242, 231, 210, 0.25),
        inset 0 -2px 5px rgba(0, 0, 0, 0.32),
        0 2px 0 var(--hn-saddle-night),
        0 4px 8px rgba(0, 0, 0, 0.4);
}

/* inner hairline (keeps the WoodTheme texture even when applySeasonBadge
   strips the outer border/shadow) */
.char-label::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 11px;
    border: 1px solid rgba(242, 231, 210, 0.22);
    pointer-events: none;
    z-index: 0;
}

/* diagonal weave overlay */
.char-label::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image: repeating-linear-gradient(45deg,
            rgba(242, 231, 210, 0.15) 0 6px,
            transparent 6px 14px);
    z-index: 0;
}

.char-label .char-name,
.char-label .battle-tag {
    position: relative;
    z-index: 1;
}

.char-label .char-name {
    display: block;
    font-family: var(--hn-font-head);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--hn-gold-light);
    text-transform: uppercase;
    text-shadow: 0 1.5px 0 rgba(0, 0, 0, 0.6);
    line-height: 1.05;
    /* single-line ellipsis when the username is too long for the slot */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rank/score line under the pill — Tagline-style monospace */
.char-rank {
    margin-top: 6px;
    font-family: var(--hn-font-typewriter);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--hn-dust);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.65),
        0 0 4px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    opacity: 0.92;
}

.char-rank .char-rank-title {
    font-family: var(--hn-font-head);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    color: var(--hn-dust);
    text-transform: uppercase;
}

.char-rank .char-rank-dot {
    color: var(--hn-rust-light);
    opacity: 0.85;
}

.char-rank .char-rank-score {
    font-family: var(--hn-font-head);
    color: var(--hn-gold-light);
    font-size: 11px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.char-rank .char-rank-pts {
    font-size: 9.5px;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

/* Invisible rank-line placeholder for dummy/wildcard slots so their pills
   line up with the player slots that always render a rank+score line. */
.char-rank.char-rank-spacer {
    visibility: hidden;
    pointer-events: none;
}

/* Action-tile labels (TRAINING CAMP, FIND DUEL): allow up to 2 lines so
   the text wraps after the first word instead of ellipsis-clipping. The
   resulting two-line pill height also matches the player pills, which
   stack name + battletag. */
#dummy-slot .char-label .char-name,
#wildcard-slot .char-label .char-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.1;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.difficulty-selector {
    display: none;
    /* Hidden from lobby now */
}

#prep-duel-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.prep-box {
    max-width: 450px;
}

.diff-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.diff-btn.active {
    background: #e67e22;
    border-color: #f1c40f;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 0 15px rgba(230, 126, 34, 0.5);
}

/* --- OUT OF TOWN OVERLAY --- */
.char-slot.online {
    filter: none;
    opacity: 1;
    pointer-events: auto;
    /* Online players eventually clickable for selection */
}

/* --- Fighting / Busy overlay (same size as .char-img) --- */
.char-overlay {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 385px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    z-index: 4;
    pointer-events: none;
}

.char-weapon-overlay {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    width: 280px;
    height: 385px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 3;
    pointer-events: none;
}

/* Single-weapon overlay — used when the skin has a _no_hand variant.
   Weapon and _no_hand skin assets share the same 1792×2400 canvas, so
   rendering the overlay at the same size/anchor as the skin makes the
   weapon's hand land naturally where the skin's hand was removed. */
.char-weapon-single {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 385px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: 3;
    pointer-events: none;
}

.out-of-town {
    cursor: default !important;
}

/* SEARCH OVERLAY */
/* --- Matchmaking Overlay --- */
/* ── Matchmaking searching overlay — WoodTheme port (SandCard body +
   SaddlePanel header). Same DOM, same JS; pure CSS retheme. ── */
.searching-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    background: rgba(15, 8, 4, 0.78);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    pointer-events: auto;
    animation: hn-popup-fade 220ms ease-out;
}

.search-box {
    position: relative;
    width: 92%;
    max-width: 400px;
    background: linear-gradient(to bottom,
            var(--hn-sand-light) 0%,
            var(--hn-sand) 45%,
            var(--hn-tumbleweed) 100%);
    border: 2.5px solid var(--hn-saddle);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.7),
        inset 0 -2px 6px rgba(107, 59, 34, 0.3),
        0 4px 0 var(--hn-saddle-dark),
        0 10px 24px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    text-align: center;
    color: var(--hn-saddle-dark);
    font-family: var(--hn-font-body);
    animation: hn-popup-rise 280ms cubic-bezier(.18, .9, .32, 1.2);
}

/* SandCard inner hairline */
.search-box::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid var(--hn-saddle);
    opacity: 0.32;
    border-radius: 11px;
    pointer-events: none;
    z-index: 0;
}

.search-box > * { position: relative; z-index: 1; width: 100%; }

/* Saddle-wood header plate (mirrors SaddlePanel + recap-header-zone) */
.search-header {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 18px 20px 14px;
    text-align: center;
    border-bottom: 2px solid var(--hn-saddle-dark);
    background: linear-gradient(to bottom,
            var(--hn-saddle-light) 0%,
            var(--hn-saddle) 55%,
            var(--hn-saddle-dark) 100%);
    box-shadow:
        inset 0 1px 0 rgba(242, 231, 210, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* diagonal weave overlay on header */
.search-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image: repeating-linear-gradient(45deg,
            rgba(242, 231, 210, 0.2) 0 6px,
            transparent 6px 14px);
}

.search-header > * { position: relative; z-index: 1; }

/* Gold-stud nails in the corners — matches the brass + saddle palette */
.search-nail {
    position: absolute;
    top: 8px;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle at 35% 30%,
            var(--hn-gold-light) 0%,
            var(--hn-gold) 50%,
            #8B5E1A 100%);
    border: 1px solid var(--hn-saddle-night);
    border-radius: 50%;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 210, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.55);
    z-index: 2;
}

.search-nail-left { left: 10px; }
.search-nail-right { right: 10px; }

.search-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 2px;
}

.search-star {
    font-size: 18px;
    color: var(--hn-gold-light);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
    filter: drop-shadow(0 0 4px rgba(244, 195, 106, 0.45));
}

.searching-title {
    font-family: var(--hn-font-head);
    font-size: 26px;
    color: var(--hn-dust);
    margin: 0;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.6),
        0 0 12px rgba(0, 0, 0, 0.4);
}

.search-subtitle {
    font-family: var(--hn-font-typewriter);
    font-size: 10.5px;
    color: var(--hn-dust);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 6px 0 0;
    font-style: italic;
    opacity: 0.85;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
    animation: search-dots 2s ease-in-out infinite;
}

@keyframes search-dots {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}

/* Body — sand surface with a tumbleweed loader and a sand-card tip tile */
.search-body {
    padding: 22px 16px 16px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.loader-container {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rotating-loader {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: rotate-step 4s infinite step-end;
    filter:
        drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 8px rgba(166, 75, 46, 0.25));
}

@keyframes rotate-step {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(90deg); }
    50%  { transform: rotate(180deg); }
    75%  { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}

/* Tip tile — sand pill inside the sand body, saddle border + 3D ledge */
.search-tip-container {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px 14px;
    border-radius: 10px;
    background: linear-gradient(to bottom,
            rgba(255, 245, 220, 0.55) 0%,
            rgba(228, 201, 154, 0.5) 100%);
    border: 2px solid var(--hn-saddle);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.6),
        0 2px 0 var(--hn-saddle-dark);
}

.tip-header {
    font-family: var(--hn-font-head);
    color: var(--hn-saddle-dark);
    font-size: 11px;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.20em;
    text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
}

.tip-text {
    font-family: var(--hn-font-body);
    font-style: italic;
    color: var(--hn-saddle-dark);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    opacity: 0.92;
}

/* Footer + Back-to-town saddle button (mirrors WoodTheme BackToTownBtn) */
.search-footer {
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px 16px;
}

.search-cancel-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    background: linear-gradient(to bottom,
            var(--hn-saddle-light) 0%,
            var(--hn-saddle) 50%,
            var(--hn-saddle-dark) 100%) !important;
    color: var(--hn-dust) !important;
    font-family: var(--hn-font-head);
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
    border: 2.5px solid var(--hn-saddle-dark) !important;
    border-radius: 12px !important;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 220, 0.25),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3),
        0 3px 0 var(--hn-saddle-night),
        0 5px 10px rgba(0, 0, 0, 0.45) !important;
    transition: transform 0.1s, box-shadow 0.1s;
}

.search-cancel-btn:active {
    transform: translateY(2px) !important;
    box-shadow:
        inset 0 3px 7px rgba(0, 0, 0, 0.5),
        0 1px 0 var(--hn-saddle-night) !important;
}

/* Legacy class kept for any JS references */
.cancel-btn {
    display: none;
}

.lobby-actions {
    position: absolute;
    bottom: calc(160px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.quick-duel-btn {
    position: fixed;
    bottom: calc(160px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: white;
    border: 3px solid #a04000;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s, box-shadow 0.2s;
    z-index: 100;
}

.quick-duel-btn:active {
    transform: translateX(-50%) scale(0.95);
}

.quick-duel-btn:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(241, 196, 15, 0.4);
}

.out-of-town .char-img,
.out-of-town .char-weapon-single,
.out-of-town .char-weapon-overlay {
    filter: grayscale(0.8) brightness(0.4);
}


.out-of-town .char-label {
    opacity: 0.5;
}

/* ====== HISTORY MODAL — Duel Ledger ====== */
.hist-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.hist-backdrop {
    display: none;
}

.hist-board {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background:
        url('https://www.transparenttextures.com/patterns/old-map.png'),
        linear-gradient(180deg, #c4a265 0%, #d4b483 15%, #d9bc8a 50%, #c8a86c 100%);
    overflow: hidden;
}

/* Header */
.hist-header {
    position: relative;
    padding: 20px 20px 14px;
    text-align: center;
    border-bottom: 3px solid #5d3a1a;
    background:
        repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(0, 0, 0, 0.03) 48px, rgba(0, 0, 0, 0.03) 50px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, transparent 40%, rgba(0, 0, 0, 0.08) 100%);
}

.hist-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2px;
}

.hist-title {
    font-family: 'BJ Cree', serif;
    font-size: 26px;
    color: #2c1507;
    margin: 0;
    letter-spacing: 3px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
    line-height: 1;
}

.hist-subtitle {
    font-family: 'Georgia', serif;
    font-size: 9px;
    color: #6b4c2a;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 6px 0 0;
    font-weight: bold;
}

/* List */
.hist-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 8px;
    touch-action: pan-y;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hist-list::-webkit-scrollbar {
    width: 6px;
}

.hist-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.hist-list::-webkit-scrollbar-thumb {
    background: rgba(93, 58, 26, 0.3);
    border-radius: 3px;
}

.hist-loading {
    color: #6b4c2a;
    text-align: center;
    font-family: 'Georgia', serif;
    font-style: italic;
    padding: 30px 0;
    font-size: 14px;
}

/* Individual duel row */
.hist-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 4px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.12);
    position: relative;
    gap: 10px;
}

.hist-row.hist-win {
    border-left: 4px solid #27ae60;
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
}

.hist-row.hist-loss {
    border-left: 4px solid #a03020;
    background: linear-gradient(135deg, rgba(160, 48, 32, 0.1) 0%, rgba(255, 255, 255, 0.08) 100%);
}

/* Result badge */
.hist-result {
    font-family: 'BJ Cree', serif;
    font-size: 12px;
    font-weight: 900;
    min-width: 40px;
    text-align: center;
    padding: 4px 0;
    border-radius: 3px;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.hist-win .hist-result {
    color: #1a6b3a;
}

.hist-loss .hist-result {
    color: #8b2010;
}

/* Duel info */
.hist-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hist-opponent {
    font-family: 'BJ Cree', serif;
    font-size: 14px;
    color: #2c1507;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hist-rewards {
    font-family: 'Georgia', serif;
    font-size: 10px;
    color: #7a5a38;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.hist-elo-pos {
    color: #1a6b3a;
}

.hist-elo-neg {
    color: #8b2010;
}

.hist-friendly {
    color: #2980b9;
    font-style: italic;
}

.hist-messages {
    font-family: 'Georgia', serif;
    font-size: 9px;
    color: #8a7050;
    font-style: italic;
    margin-top: 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Date */
.hist-date {
    font-family: 'Georgia', serif;
    font-size: 9px;
    color: #8a7050;
    text-align: right;
    flex-shrink: 0;
    line-height: 1.3;
}

/* Decorative divider */
.hist-row::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 15%;
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(93, 58, 26, 0.25), transparent);
}

.hist-row:last-child::after {
    display: none;
}

/* Close button */
.hist-close-btn {
    display: block;
    width: calc(100% - 28px);
    margin: 8px 14px 14px;
    padding: 14px;
    background: linear-gradient(180deg, #5d3a1a 0%, #3e2210 100%);
    color: #d4b483;
    font-family: 'BJ Cree', serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 2px solid #8b6914;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 3px 0 #2c1507, 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s, box-shadow 0.1s;
}

.hist-close-btn:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #2c1507, 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* --- MATCH FOUND reveal banner --- */
#match-found-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* Only take the vertical room we need so the banner sits at the top of the screen */
    height: auto;
    background: transparent;
    /* Above the pre-battle background but BELOW triggers + popup (see z-index below) */
    z-index: 2000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
    padding-top: 3vh;
}

.match-found-panel {
    width: 100%;
    padding: 34px 40px 42px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 30%, rgba(0, 0, 0, 0.18) 100%),
        linear-gradient(180deg, #d27754 0%, #b9573a 55%, #9b3f28 100%);
    color: #fff;
    font-family: 'BJ Cree', serif;
    text-align: center;
    clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    transform: translateX(-120%);
    position: relative;
}

/* Slide in from the left and stay put until .exit is added */
.match-found-panel.animate {
    animation: match-found-slide-in 0.55s cubic-bezier(0.18, 0.88, 0.25, 1) forwards;
}

/* Exit: slide out to the right (triggered when focus mode starts) */
.match-found-panel.exit {
    animation: match-found-slide-out 0.4s cubic-bezier(0.55, 0, 0.75, 0.2) forwards;
}

/* Thin lighter band running along the panel, like the Brawl Stars ribbon */
.match-found-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            transparent 44%,
            rgba(255, 255, 255, 0.18) 46%,
            rgba(255, 255, 255, 0.18) 54%,
            transparent 56%);
    pointer-events: none;
}

.match-found-name {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow:
        0 2px 0 #5a1d0c,
        0 3px 0 #5a1d0c,
        0 4px 8px rgba(0, 0, 0, 0.45);
    line-height: 1.05;
    word-break: break-word;
}

.match-found-score {
    margin-top: 10px;
    font-size: 18px;
    letter-spacing: 2px;
    color: #ffe4ba;
    text-shadow: 0 2px 0 #5a1d0c, 0 3px 4px rgba(0, 0, 0, 0.35);
}

.match-found-grade {
    margin-top: 6px;
    font-size: 14px;
    font-style: italic;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffd9b3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@keyframes match-found-slide-in {
    0% {
        transform: translateX(-120%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes match-found-slide-out {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(120%);
    }
}

.duel-confirm-status {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.status-indicator {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #888;
}

.status-indicator.ready {
    color: #2ecc71;
    background: rgba(46, 204, 113, 0.1);
}

.launch-countdown {
    font-size: 80px;
    color: #fff;
    font-weight: 900;
    margin-bottom: 20px;
    animation: countdown-bounce 1s infinite;
}

@keyframes countdown-bounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* --- DUEL FOCUS & FOG --- */
#duel-focus-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    z-index: 3000;
    display: none;
    background: #000;
    overflow: hidden;
}

#focus-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../assets/images/match_making.jpg') center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

#focus-badge {
    width: 45vw;
    max-width: 280px;
    object-fit: contain;
    animation: badge-spin 5s linear forwards;
    filter: drop-shadow(0 0 30px rgba(241, 196, 15, 0.8));
}

@keyframes badge-spin {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    85% {
        opacity: 1;
        transform: rotate(720deg);
    }

    100% {
        opacity: 0;
        transform: rotate(720deg);
    }
}

#focus-status {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    color: #e74c3c;
    font-size: 36px;
    font-family: 'BJ Cree', serif;
    letter-spacing: 4px;
    text-shadow: 0 0 20px rgba(231, 76, 60, 0.8);
    z-index: 10;
    white-space: nowrap;
}

#draw-start-btn {
    position: absolute;
    display: none;
    padding: 24px 60px;
    font-size: 42px;
    font-family: 'BJ Cree', serif;
    font-weight: bold;
    letter-spacing: 6px;
    color: #fff;
    background: #e74c3c;
    border: 4px solid #fff;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(231, 76, 60, 0.9), 0 0 80px rgba(231, 76, 60, 0.4);
    animation: appear-bounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
    cursor: pointer;
    text-transform: uppercase;
}

/* Energy System */
.energy-slot {
    width: 10px;
    height: 10px;
    background: #333;
    border: 1px solid #555;
    margin: 1px;
    transition: all 0.3s;
}

.energy-slot.filled {
    background: #2e7d32;
    /* Green for filled energy */
    border-color: #2e7d32;
    box-shadow: 0 0 5px #2e7d32;
}

@keyframes appear-bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* State for when the game is "Focused" — video overlay covers screen */
body.duel-focused .battle-screen {
    /* No blur — video overlay handles the focus phase */
}

/* Settings Toggle */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.settings-label {
    color: #fceabb;
    font-family: 'BJ Cree', serif;
    font-size: 18px;
    letter-spacing: 1px;
}

/* Language selector */
.language-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.lang-btn {
    padding: 8px 14px;
    font-family: 'BJ Cree', serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.5px;
    background: linear-gradient(180deg, #e6c28d 0%, #c89a60 100%);
    color: #3e2210;
    border: 2px solid #6b4220;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 2px 0 #3e2210, 0 3px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lang-btn.active {
    background: linear-gradient(180deg, #ffe089 0%, #c79a28 100%);
    color: #3e2210;
    border-color: #5a1d0c;
    box-shadow: 0 2px 0 #5a1d0c, 0 0 12px rgba(240, 192, 64, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.lang-btn:active {
    transform: translateY(1px);
    box-shadow: 0 0 0 #3e2210, 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider (toggle track) */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #3e2210 0%, #2c1507 100%);
    transition: .25s;
    border: 2px solid #5d3a1a;
    border-radius: 34px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background: radial-gradient(circle at 35% 30%, #e4c070 0%, #b8863a 60%, #6b4220 100%);
    transition: .25s;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

input:checked+.slider {
    background: linear-gradient(180deg, #8cc63f 0%, #4a7a1a 100%);
    border-color: #2c4e10;
}

input:checked+.slider:before {
    transform: translateX(22px);
    background: radial-gradient(circle at 35% 30%, #fff 0%, #f0c040 60%, #c79a28 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 8px rgba(240, 192, 64, 0.55);
}

/* Western Range Slider — leather track, brass knob */
.western-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    background: linear-gradient(180deg, #3e2210 0%, #5d3a1a 100%);
    border-radius: 5px;
    border: 2px solid #2c1507;
    outline: none;
    cursor: pointer;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45);
}

.western-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe089 0%, #c79a28 55%, #6b4220 100%);
    border: 2px solid #3e2210;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    cursor: pointer;
}

.western-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe089 0%, #c79a28 55%, #6b4220 100%);
    border: 2px solid #3e2210;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    cursor: pointer;
}

.settings-value {
    color: #e67e22;
    font-family: 'BJ Cree', serif;
    font-size: 18px;
    min-width: 30px;
    text-align: center;
}

/* ====== STORE SCREEN — Parchment Board ====== */
#store-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1500;
    display: none;
    font-family: 'Georgia', serif;
    overflow: hidden;
}

.store-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background:
        url('https://www.transparenttextures.com/patterns/old-map.png'),
        linear-gradient(180deg, #c4a265 0%, #d4b483 15%, #d9bc8a 50%, #c8a86c 100%);
}

/* --- Header --- */
.store-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 3px solid #5d3a1a;
    background:
        repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(0, 0, 0, 0.03) 48px, rgba(0, 0, 0, 0.03) 50px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, transparent 100%);
}

.store-header-center {
    position: relative;
    text-align: center;
}

.store-nail {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: radial-gradient(circle at 40% 35%, #aaa 0%, #666 50%, #444 100%);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.store-nail-l {
    left: -18px;
}

.store-nail-r {
    right: -18px;
}

.store-main-title {
    font-family: 'BJ Cree', serif;
    color: #2c1507;
    font-size: 20px;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

.store-balance {
    display: flex;
    align-items: center;
    gap: 4px;
}

.store-gold-coin {
    font-size: 22px;
    line-height: 1;
}

/* Wampum icon in the store balance row — uses the existing wampum.png asset
   (same one as the user-menu's wampum row). */
.store-wampum-coin {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-left: 10px;
    background-image: url('../assets/images/economy/wampum.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

#store-wampum-display {
    font-family: 'BJ Cree', serif;
    font-size: 22px;
    font-weight: 900;
    color: #2c1507;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Small wampum icon inside the "NEED X W" lock overlay on skin cards,
   and inside the BUY button price (replaces the 💰 emoji for skins). */
.wampum-lock-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url('../assets/images/economy/wampum.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.buy-currency-wampum {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    background-image: url('../assets/images/economy/wampum.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

#store-gold-display {
    font-family: 'BJ Cree', serif;
    font-size: 22px;
    font-weight: 900;
    color: #2c1507;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* --- Category Tabs --- */
.store-categories {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    justify-content: center;
}

/* Hub-mode: store opened from user-menu for a single category — hide tabs */
#store-screen.store-hub-mode .store-categories {
    display: none;
}

.store-cat-card {
    flex: 1;
    max-width: 90px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(93, 58, 26, 0.3);
    border-radius: 6px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.store-cat-card.active {
    background: linear-gradient(180deg, #5d3a1a 0%, #3e2210 100%);
    border-color: #8b6914;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.store-cat-card.active span {
    color: #d4b483;
}

.card-image-box {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.store-cat-card.active .card-image-box {
    background: rgba(255, 255, 255, 0.1);
}

.card-image-box img {
    width: 75%;
    height: 75%;
    object-fit: contain;
}

.store-cat-card span {
    font-size: 8px;
    font-weight: bold;
    color: #5d3a1a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stats tab */
.stats-icon-box {
    background: rgba(255, 255, 255, 0.25);
}

.stats-tab-icon {
    font-size: 22px;
    line-height: 1;
}

.stats-new-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #c0392b;
    color: #fff;
    font-size: 7px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 6px;
    line-height: 1;
    letter-spacing: 0.5px;
}

/* --- Items Grid --- */
.store-items-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    gap: 10px;
    row-gap: 10px;
    padding: 10px 14px 24px;
    overflow-y: auto;
    min-height: 0;
    flex-grow: 1;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.store-items-grid::-webkit-scrollbar {
    width: 4px;
}

.store-items-grid::-webkit-scrollbar-thumb {
    background: rgba(93, 58, 26, 0.3);
    border-radius: 2px;
}

.store-item-card {
    aspect-ratio: 1;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.1) 100%);
    border: 2px solid rgba(93, 58, 26, 0.25);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.15s, box-shadow 0.15s;
}

.store-item-card:active {
    transform: scale(0.95);
}

.store-item-card.equipped {
    border: 2px solid #8b6914;
    box-shadow: 0 0 10px rgba(139, 105, 20, 0.3), inset 0 0 8px rgba(139, 105, 20, 0.08);
}

.item-img-box {
    width: 85%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.item-img-box img {
    max-width: 70%;
    max-height: 70%;
    object-fit: contain;
}

.store-item-card .item-name-small {
    position: absolute;
    bottom: 4px;
    font-size: 1px;
    font-weight: bold;
    color: #5d3a1a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Rarity badges */
.rarity-badge {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 3px;
    z-index: 2;
    white-space: nowrap;
}

.rarity-common {
    background: #8d6e42;
    color: #fff;
}

.rarity-uncommon {
    background: #4a8c3f;
    color: #fff;
}

.rarity-rare {
    background: #2980b9;
    color: #fff;
}

.rarity-epic {
    background: #8e44ad;
    color: #fff;
}

.rarity-legendary {
    background: linear-gradient(135deg, #f39c12, #e74c3c);
    color: #fff;
}

.rarity-legacy {
    background: #6d4c41;
    color: #d7ccc8;
    font-style: italic;
}

/* --- Season 1 badge for S1 cards --- */
.rarity-s1 {
    background: #E65100;
    color: #fff;
    font-style: normal;
}

/* --- Store Section Dividers --- */
.store-section-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    margin: 6px 0 2px;
}

.store-section-divider::before,
.store-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(93, 58, 26, 0.3);
}

.store-section-divider span {
    font-size: 9px;
    font-weight: bold;
    color: #5d3a1a;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.store-section-divider.s1-divider span {
    color: #E65100;
}

.store-section-divider.s1-divider::before,
.store-section-divider.s1-divider::after {
    background: rgba(230, 81, 0, 0.3);
}

/* --- Season 1 Skin Cards --- */
.store-item-card.s1-card {
    border: 2px solid #6A4A10;
}

.store-item-card.s1-owned {
    background: linear-gradient(145deg, #9A7030 0%, #7A5A20 100%);
}

.store-item-card.s1-not-owned {
    background: linear-gradient(145deg, #6A5020 0%, #4A3A15 100%);
    border-color: rgba(106, 74, 16, 0.5);
}

.store-item-card.s1-not-owned .item-img-box img {
    opacity: 0.5;
}

.store-item-card.s1-not-owned .item-name-small {
    opacity: 0.6;
}

.store-item-card.s1-equipped {
    background: linear-gradient(145deg, #B89050 0%, #9A7030 100%);
    border-color: #E65100;
    box-shadow: 0 0 10px rgba(230, 81, 0, 0.3);
}

/* S1 card name positioning (make room for bottom label) */
.store-item-card.s1-card .item-name-small {
    bottom: 16px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* S1 bottom labels */
.s1-bottom-label {
    position: absolute;
    bottom: 3px;
    font-size: 6px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 8px;
    border-radius: 3px;
    z-index: 2;
}

.s1-equip-btn {
    background: #27ae60;
    color: #fff;
}

.s1-locked-label {
    background: rgba(0, 0, 0, 0.3);
    color: #999;
}

.s1-equipped-label {
    background: transparent;
    color: #FFD700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ── Season 3 PvP reward cards ───────────────────────────────── */
.store-section-divider.pvp-divider span {
    color: #b47cff;
    letter-spacing: 2px;
}

.store-section-divider.pvp-divider::before,
.store-section-divider.pvp-divider::after {
    background: linear-gradient(90deg, transparent, rgba(180, 124, 255, 0.6), transparent);
}

.store-item-card.pvp-card {
    /* Keep default card background so the skin art is fully visible — the
       purple accent was obscuring the reward. A warm amber glow + the
       trophy overlay carry the "PvP reward" signal instead. */
    position: relative;
    border: 2px solid #c89a3a;
    box-shadow:
        0 0 10px rgba(240, 200, 80, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.store-item-card.pvp-card .item-name-small {
    bottom: 16px;
}

.store-item-card.pvp-card.pvp-equipped {
    border-color: #ffd666;
    box-shadow: 0 0 16px rgba(255, 214, 102, 0.55);
}

/* Lock + tier label (e.g. "Top 10") shown when not yet earned */
.pvp-lock-overlay {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
    z-index: 2;
}

.pvp-lock-overlay .lock-icon {
    font-size: 26px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.pvp-tier-label {
    font-family: 'BJ Cree', serif;
    font-size: 9px;
    font-weight: 900;
    color: #f5d98f;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 214, 102, 0.55);
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.pvp-bottom-label {
    position: absolute;
    bottom: 3px;
    font-size: 6px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 8px;
    border-radius: 3px;
    z-index: 2;
}

.pvp-equip-btn {
    background: #27ae60;
    color: #fff;
}

.pvp-equipped-label {
    background: transparent;
    color: #f5d98f;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* S1 lock overlay (not-owned) */
.s1-lock-overlay {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}

.s1-lock-overlay .lock-icon {
    font-size: 20px;
    opacity: 0.7;
}

/* --- Info Toast --- */
.info-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(44, 21, 7, 0.92);
    color: #d4b483;
    font-size: 12px;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 8px;
    z-index: 3000;
    display: none;
    animation: infoToastFade 2.5s ease forwards;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@keyframes infoToastFade {

    0%,
    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Locked */
.store-item-card.locked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 21, 7, 0.5);
    z-index: 1;
}

.lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #d4b483;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.lock-icon {
    font-size: 22px;
    margin-bottom: 3px;
}

.unlock-text {
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
}

/* Owned */
.owned-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 4px;
    z-index: 2;
    pointer-events: none;
}

.owned-badge {
    background: #27ae60;
    color: white;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* Pointer events fix */
.store-item-card::after,
.lock-overlay,
.owned-overlay,
.equipped-overlay {
    pointer-events: none !important;
}

/* Equipped */
.equipped-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 4px;
    z-index: 2;
    pointer-events: none;
}

.equipped-badge {
    background: #8b6914;
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* ====== Item Detail Modal ====== */
.store-item-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.store-modal-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background:
        url('https://www.transparenttextures.com/patterns/old-map.png'),
        linear-gradient(175deg, #d4b483 0%, #c4a265 40%, #b8934a 100%);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 20px;
    padding-top: env(safe-area-inset-top, 20px);
    padding-bottom: env(safe-area-inset-bottom, 20px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.store-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 22px;
    background: none;
    border: none;
    color: #5d3a1a;
    cursor: pointer;
    padding: 4px 8px;
    box-shadow: none;
    font-weight: bold;
    opacity: 0.6;
}

.store-modal-close:active {
    opacity: 1;
}

.store-modal-img-container {
    width: 100%;
    flex: 1 1 55%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(93, 58, 26, 0.2);
    border-radius: 4px;
}

.store-modal-img-container img {
    max-width: 90%;
    max-height: 95%;
    object-fit: contain;
}

.store-modal-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.store-modal-info h2 {
    font-family: 'BJ Cree', serif;
    font-size: 24px;
    color: #2c1507;
    margin: 0;
    line-height: 1.1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

.store-modal-info h3 {
    font-size: 10px;
    color: #7a5a38;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
}

.store-modal-info p {
    font-size: 13px;
    line-height: 1.5;
    color: #5d3a1a;
    font-style: italic;
    margin: 4px 0 0;
}

.level-req-text {
    font-size: 11px;
    color: #7a5a38;
    font-weight: bold;
    font-style: normal !important;
}

.store-modal-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 4px;
}

.store-modal-status {
    font-family: 'BJ Cree', serif;
    font-size: 13px;
    font-weight: bold;
    color: #5d3a1a;
    letter-spacing: 1px;
}

.store-modal-status.locked {
    color: #a03020;
}

.store-buy-btn {
    width: 100%;
    background: linear-gradient(180deg, #5d3a1a 0%, #3e2210 100%);
    border: 2px solid #8b6914;
    border-radius: 4px;
    color: #d4b483;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-family: 'BJ Cree', serif;
    cursor: pointer;
    box-shadow: 0 3px 0 #2c1507, 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s, box-shadow 0.1s;
}

.store-buy-btn:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #2c1507;
}

.buy-text {
    font-weight: bold;
    letter-spacing: 2px;
}

.buy-price {
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 14px;
}

.store-buy-btn.locked {
    opacity: 0.4;
    pointer-events: none;
}

.level-badge {
    position: absolute;
    top: 0;
    right: 10%;
    background: #d4b483;
    border: 2px solid #5d3a1a;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #2c1507;
    font-size: 13px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ====== LEADERBOARD — "MOST WANTED" BOARD ====== */

.lb-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.lb-backdrop {
    display: none;
}

.lb-board {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background:
        url('https://www.transparenttextures.com/patterns/old-map.png'),
        linear-gradient(180deg, #c4a265 0%, #d4b483 15%, #d9bc8a 50%, #c8a86c 100%);
    overflow: hidden;
}

/* --- Header (nailed sign) --- */
.lb-header {
    position: relative;
    padding: 20px 20px 14px;
    text-align: center;
    border-bottom: 3px solid #5d3a1a;
    background:
        repeating-linear-gradient(90deg,
            transparent,
            transparent 48px,
            rgba(0, 0, 0, 0.03) 48px,
            rgba(0, 0, 0, 0.03) 50px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, transparent 40%, rgba(0, 0, 0, 0.08) 100%);
}

.lb-nail {
    position: absolute;
    top: 10px;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle at 40% 35%, #aaa 0%, #666 50%, #444 100%);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.lb-nail-left {
    left: 14px;
}

.lb-nail-right {
    right: 14px;
}

.lb-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2px;
}

.lb-star {
    font-size: 22px;
    color: #5d3a1a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.lb-title {
    font-family: 'BJ Cree', serif;
    font-size: 28px;
    color: #2c1507;
    margin: 0;
    letter-spacing: 3px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
    line-height: 1;
}

.lb-subtitle {
    font-family: 'Georgia', serif;
    font-size: 10px;
    color: #6b4c2a;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 6px 0 0;
    font-weight: bold;
}

/* --- List --- */
.lb-list {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 8px;
    touch-action: pan-y;
}

.lb-loading {
    color: #6b4c2a;
    text-align: center;
    font-family: 'Georgia', serif;
    font-style: italic;
    padding: 30px 0;
    font-size: 14px;
}

/* --- Individual player row --- */
.lb-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.12);
    position: relative;
    transition: transform 0.15s;
}

.lb-row:active {
    transform: scale(0.97);
}

/* Top 3 special styles */
.lb-row.lb-rank-1 {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(184, 134, 11, 0.15) 100%);
    border-color: #b8860b;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.2);
}

.lb-row.lb-rank-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.2) 0%, rgba(169, 169, 169, 0.1) 100%);
    border-color: #a9a9a9;
}

.lb-row.lb-rank-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.2) 0%, rgba(176, 101, 30, 0.1) 100%);
    border-color: #b0651e;
}

/* Rank badge */
.lb-rank-badge {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'BJ Cree', serif;
    font-size: 16px;
    font-weight: 900;
    color: #3e2210;
    flex-shrink: 0;
    margin-right: 12px;
    position: relative;
}

/* Sheriff star for top 3 */
.lb-rank-badge .lb-sheriff-star {
    position: absolute;
    width: 36px;
    height: 36px;
    color: #b8860b;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.lb-rank-2 .lb-rank-badge .lb-sheriff-star {
    color: #a9a9a9;
}

.lb-rank-3 .lb-rank-badge .lb-sheriff-star {
    color: #b0651e;
}

.lb-rank-badge .lb-rank-num {
    position: relative;
    z-index: 1;
    font-size: 13px;
}

/* Rank number for non-top-3 */
.lb-rank-plain {
    font-family: 'BJ Cree', serif;
    font-size: 18px;
    color: #5d3a1a;
    opacity: 0.7;
}

/* Player info */
.lb-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lb-name {
    font-family: 'BJ Cree', serif;
    font-size: 15px;
    color: #2c1507;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-rank-1 .lb-name {
    color: #1a0a00;
}

.lb-league {
    font-family: 'Georgia', serif;
    font-size: 10px;
    color: #7a5a38;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

/* Score */
.lb-score {
    font-family: 'BJ Cree', serif;
    font-size: 16px;
    font-weight: 900;
    color: #5d3a1a;
    text-align: right;
    flex-shrink: 0;
    margin-left: 10px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

.lb-rank-1 .lb-score {
    color: #8b6914;
    font-size: 18px;
}

.lb-pts-label {
    font-size: 9px;
    color: #8a7050;
    letter-spacing: 1px;
    font-family: 'Georgia', serif;
}

/* Current player highlight */
.lb-row.lb-me {
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.25) 0%, rgba(211, 84, 0, 0.12) 100%);
    border-color: #e67e22;
    box-shadow: 0 0 10px rgba(230, 126, 34, 0.15), inset 0 0 12px rgba(230, 126, 34, 0.06);
}

.lb-you-tag {
    position: absolute;
    top: -1px;
    right: -1px;
    background: #e67e22;
    color: #fff;
    font-family: 'BJ Cree', serif;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 0 4px 0 6px;
    letter-spacing: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Separator dots between top 10 and current player */
.lb-separator {
    text-align: center;
    color: #8a7050;
    font-size: 18px;
    letter-spacing: 6px;
    padding: 6px 0 2px;
}

/* Decorative divider between rows */
.lb-row::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 15%;
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(93, 58, 26, 0.3), transparent);
}

.lb-row:last-child::after {
    display: none;
}

/* --- Close button --- */
.lb-close-btn {
    display: block;
    width: calc(100% - 28px);
    margin: 8px 14px 14px;
    padding: 14px;
    background: linear-gradient(180deg, #5d3a1a 0%, #3e2210 100%);
    color: #d4b483;
    font-family: 'BJ Cree', serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 2px solid #8b6914;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 3px 0 #2c1507, 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s, box-shadow 0.1s;
}

.lb-close-btn:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #2c1507, 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* --- Scrollbar --- */
.lb-list::-webkit-scrollbar {
    width: 6px;
}

.lb-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.lb-list::-webkit-scrollbar-thumb {
    background: rgba(93, 58, 26, 0.3);
    border-radius: 3px;
}

/* ====== STATS Tab (4th tab in General Store) ====== */
.stats-icon-box {
    background: rgba(255, 255, 255, 0.3);
}

.stats-tab-icon {
    font-size: 24px;
    line-height: 1;
}

.store-cat-card {
    position: relative;
}

.stats-new-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e74c3c;
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 6px;
    line-height: 1;
    letter-spacing: 0.5px;
}

.store-stats-container {
    padding: 10px 16px;
    overflow-y: auto;
    max-height: calc(var(--vh, 1vh) * 100 - 200px);
}

/* ====== Profile Panel (shared layout for modal + STATS tab) ====== */
/* ====== Profile Panel Body ====== */
.profile-panel-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: 'BJ Cree', serif;
    padding: 10px 0;
}

.profile-header-name {
    font-size: 22px;
    color: #3E1F00;
    margin-bottom: 6px;
    word-break: break-word;
}

.profile-league-badge {
    display: inline-block;
    color: #fff;
    font-family: 'BJ Cree', serif;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 14px;
    border-radius: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.profile-points {
    font-size: 16px;
    color: #3E1F00;
    font-weight: bold;
    margin-bottom: 12px;
}

/* --- Season tabs (swap stats between seasons) --- */
.profile-tabs {
    display: flex;
    gap: 6px;
    width: 100%;
    margin: 4px 0 12px;
    padding: 3px;
    background: rgba(62, 34, 16, 0.15);
    border: 1px solid rgba(62, 34, 16, 0.25);
    border-radius: 999px;
}

.profile-tab {
    flex: 1;
    padding: 7px 10px;
    font-family: 'BJ Cree', serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #5d3a1a;
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.profile-tab.active {
    background: linear-gradient(180deg, #ffe089 0%, #c79a28 100%);
    color: #3e2210;
    box-shadow: 0 1px 2px rgba(62, 34, 16, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.profile-tab:active {
    transform: scale(0.98);
}

.profile-tabs-single .profile-tab {
    cursor: default;
}

.profile-tabs-single .profile-tab:active {
    transform: none;
}

.profile-tab-pane[hidden] {
    display: none !important;
}

/* Section divider: — SEASON 2 — (legacy, used elsewhere) */
.profile-section-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
}

.profile-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(141, 110, 99, 0.4);
}

.profile-divider-text {
    font-size: 11px;
    color: #8d6e63;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* S2 stats grid */
.profile-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-bottom: 12px;
}

.profile-stat-cell {
    background: #B89050;
    border: 0.5px solid #8B6914;
    border-radius: 8px;
    padding: 10px 8px;
}

.profile-stat-label {
    font-size: 10px;
    color: #F5E6C0;
    font-family: sans-serif;
    text-transform: uppercase;
    font-variant: small-caps;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.profile-stat-value {
    font-size: 22px;
    font-weight: bold;
    color: #3E1F00;
}

/* S1 cells — darker fill */
.profile-s1-cell {
    background: #9A7030;
    border-color: #6A4A10;
}

/* ====== Profile Modal (other-player tap) ====== */
.profile-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 250;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-modal-card {
    background: linear-gradient(135deg, #C8A96B, #D4B87A);
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px 20px 16px;
    border: 6px solid #5d4037;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), inset 0 0 0 0.5px rgba(62, 31, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-modal-close-btn {
    background: #3E1F00;
    border: 3px solid #2A1500;
    color: #B8860B;
    font-family: 'BJ Cree', serif;
    font-size: 16px;
    padding: 12px 30px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 0 #2A1500;
    width: 100%;
    text-transform: uppercase;
    margin-top: 12px;
    transition: transform 0.1s;
}

.profile-modal-close-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}

.profile-loading {
    color: #8d6e63;
    font-family: sans-serif;
    font-size: 14px;
    padding: 40px 0;
}

/* === GOLD PACKS — Store Cards === */
.gold-pack-divider span {
    color: #FFD700 !important;
}

.gold-pack-card {
    border: 2px solid #B8860B !important;
    background: linear-gradient(145deg, #5a4a10 0%, #3a3010 100%) !important;
}

.gold-pack-img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gold-pack-icon {
    font-size: 32px;
}

.gold-pack-price {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Georgia', serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.gold-modal-icon {
    font-size: 56px;
    display: block;
    text-align: center;
    line-height: 1;
}

/* === GOLD PACKS — Buy button === */
.gold-pack-buy-btn {
    background: linear-gradient(180deg, #c9a227 0%, #8a6d10 100%);
    color: #fff;
    cursor: pointer;
    border: 1px solid #d4af37;
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'BJ Cree', serif;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.gold-pack-buy-btn:active {
    transform: scale(0.96);
}

.gold-pack-buy-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* === GOLD PACKS — Lobby Modal === */
.gold-packs-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gold-packs-modal-card {
    position: relative;
    background: linear-gradient(180deg, #f5e6c8 0%, #d4b483 100%);
    border-radius: 12px;
    padding: 20px 16px 16px;
    width: 90%;
    max-width: 360px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.gold-packs-title {
    font-family: 'BJ Cree', serif;
    color: #2c1507;
    font-size: 18px;
    text-align: center;
    margin: 0 0 14px;
    letter-spacing: 2px;
}

.gold-pack-lobby-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(145deg, #5a4a10 0%, #3a3010 100%);
    border: 1px solid #B8860B;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.gold-pack-lobby-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.gold-pack-lobby-info {
    flex: 1;
    min-width: 0;
}

.gold-pack-lobby-amount {
    font-family: 'BJ Cree', serif;
    font-size: 14px;
    color: #FFD700;
    line-height: 1.2;
}

.gold-pack-lobby-desc {
    font-size: 10px;
    color: #b8a060;
    margin-top: 2px;
}

.gold-pack-lobby-price {
    font-family: 'BJ Cree', serif;
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    flex-shrink: 0;
    margin-right: 6px;
}

/* ====== Friend Badge (on Menu button) ====== */
.friend-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    font-family: 'Georgia', serif;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 9px;
    text-align: center;
    padding: 0 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 101;
}

/* ====== Friend List Modal ====== */
.friend-list-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 260;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.friend-list-card {
    background: linear-gradient(135deg, #C8A96B, #D4B87A);
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px 16px 16px;
    border: 6px solid #5d4037;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), inset 0 0 0 0.5px rgba(62, 31, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.friend-list-title {
    color: #3E1F00;
    font-family: 'BJ Cree', serif;
    font-size: 22px;
    letter-spacing: 2px;
    margin: 0 0 12px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.friend-list-content {
    width: 100%;
    max-height: 35vh;
    overflow-y: auto;
}

.friend-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: rgba(62, 31, 0, 0.15);
    border: 1px solid rgba(93, 64, 55, 0.3);
    border-radius: 6px;
    cursor: default;
}

.friend-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.friend-status-dot.online {
    background: #27ae60;
    box-shadow: 0 0 6px rgba(39, 174, 96, 0.6);
}

.friend-status-dot.offline {
    background: #7f8c8d;
}

.friend-info {
    flex: 1;
    min-width: 0;
}

.friend-name {
    font-family: 'Georgia', serif;
    font-size: 14px;
    font-weight: bold;
    color: #3E1F00;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-rank {
    font-size: 11px;
    color: #5d4037;
    margin-top: 1px;
}

.friend-remove-btn {
    background: none;
    border: none;
    color: #8b3a3a;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.friend-remove-btn:active {
    opacity: 1;
}

.friend-empty {
    color: #8d6e63;
    font-family: 'Georgia', serif;
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
}

/* ====== Friend Requests Section ====== */
.friend-requests-section {
    width: 100%;
    margin-top: 8px;
}

.friend-section-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.friend-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(62, 31, 0, 0.3);
}

.friend-divider-text {
    font-family: 'Georgia', serif;
    font-size: 10px;
    font-weight: bold;
    color: #5d4037;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.friend-requests-list {
    width: 100%;
}

.friend-request-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: rgba(192, 57, 43, 0.08);
    border: 1px solid rgba(192, 57, 43, 0.2);
    border-radius: 6px;
}

.friend-request-name {
    flex: 1;
    font-family: 'Georgia', serif;
    font-size: 14px;
    font-weight: bold;
    color: #3E1F00;
    word-break: break-word;
}

.friend-request-btn {
    font-family: 'Georgia', serif;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: transform 0.1s;
}

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

.friend-request-accept {
    background: #27ae60;
    color: #fff;
    box-shadow: 0 2px 0 #1e8449;
}

.friend-request-decline {
    background: transparent;
    color: #8b3a3a;
    border: 1px solid #8b3a3a;
}

/* ====== "Add Friend" button in Profile Modal ====== */
.profile-add-friend-btn {
    background: #5d4037;
    border: 2px solid #8d6e63;
    color: #f5f0e0;
    font-family: 'Georgia', serif;
    font-size: 13px;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 12px;
    transition: transform 0.1s, opacity 0.2s;
    box-shadow: 0 3px 0 #3E2723;
}

.profile-add-friend-btn:active {
    transform: translateY(3px);
    box-shadow: none;
}

.profile-add-friend-btn.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.profile-add-friend-btn.is-friend {
    background: transparent;
    border-color: #27ae60;
    color: #27ae60;
    pointer-events: none;
    box-shadow: none;
}

/* ====== Call Out Badge (Lobby top-left, below menu) ====== */
.callout-badge {
    position: absolute;
    top: 100px;
    left: 12px;
    z-index: 101;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    border: 2px solid #8b2500;
    border-radius: 8px;
    padding: 8px 14px;
    cursor: pointer;
    animation: callout-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.6);
    width: auto;
    height: auto;
    overflow: visible;
    -webkit-appearance: none;
}

.callout-badge span {
    display: block;
    color: #fff;
    font-family: 'Georgia', serif;
    font-size: 9px;
    font-weight: bold;
    white-space: nowrap;
    letter-spacing: 0.5px;
    line-height: 1;
}

@keyframes callout-pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 12px rgba(231, 76, 60, 0.6);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(231, 76, 60, 0.9);
    }
}

/* ====== Call Out Button (Profile Panel) ====== */
.profile-callout-btn {
    background: #8b2500;
    border: 2px solid #c0392b;
    color: #f5f0e0;
    font-family: 'Georgia', serif;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 24px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
    transition: transform 0.1s, opacity 0.2s;
    box-shadow: 0 3px 0 #5a1700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-callout-btn:active {
    transform: translateY(3px);
    box-shadow: none;
}

.profile-callout-btn.disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* ====== Call Out Button in Friend List ====== */
.friend-callout-btn {
    background: #8b2500;
    border: 1px solid #c0392b;
    color: #f5f0e0;
    font-family: 'Georgia', serif;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.friend-callout-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ====== Challenge List Modal ====== */
.callout-list-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 260;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.callout-list-card {
    background: linear-gradient(135deg, #C8A96B, #D4B87A);
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px 16px 16px;
    border: 6px solid #5d4037;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), inset 0 0 0 0.5px rgba(62, 31, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.callout-list-title {
    color: #3E1F00;
    font-family: 'BJ Cree', serif;
    font-size: 22px;
    letter-spacing: 2px;
    margin: 0 0 12px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.callout-list-content {
    width: 100%;
    max-height: 40vh;
    overflow-y: auto;
}

.callout-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: rgba(62, 31, 0, 0.15);
    border: 1px solid rgba(93, 64, 55, 0.3);
    border-radius: 6px;
}

.callout-challenger-name {
    flex: 1;
    color: #3E1F00;
    font-family: 'Georgia', serif;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.callout-timer {
    color: #8b2500;
    font-size: 12px;
    font-family: 'Georgia', serif;
    font-weight: bold;
    flex-shrink: 0;
}

.callout-btn-group {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.callout-accept-btn {
    background: #27ae60;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: 'Georgia', serif;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
}

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

.callout-decline-btn {
    background: #c0392b;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: 'Georgia', serif;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
}

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

/* ====== Experience Elixir Indicator (Lobby, above player character) ====== */
/* ====== Eye Skins Store Section ====== */
.eye-skins-banner {
    width: 100%;
    padding: 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(62, 31, 0, 0.15), rgba(139, 69, 19, 0.1));
    border: 1px solid rgba(139, 69, 19, 0.3);
    border-radius: 8px;
    text-align: center;
}

.eye-skins-title {
    font-family: 'BJ Cree', serif;
    font-size: 16px;
    color: #8b4513;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.eye-skins-desc {
    font-family: 'Georgia', serif;
    font-size: 11px;
    color: #5d3a1a;
    line-height: 1.5;
}

.eye-skins-desc strong {
    color: #c0392b;
}

.eye-skin-card {
    position: relative;
}

.eye-skin-rarity {
    font-family: 'Georgia', serif;
    font-size: 9px;
    color: #c0392b;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}

.eye-skin-equipped-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #27ae60;
    color: #fff;
    font-family: 'Georgia', serif;
    font-size: 8px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.elixir-indicator {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(52, 152, 219, 0.85);
    color: #fff;
    font-family: 'Georgia', serif;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 10px;
    z-index: 5;
    white-space: nowrap;
    letter-spacing: 0.5px;
    border: 1px solid rgba(41, 128, 185, 0.6);
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.4);
}

/* ====== ACHIEVEMENTS ====== */

.ach-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.ach-backdrop {
    display: none;
}

.ach-board {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background:
        url('https://www.transparenttextures.com/patterns/old-map.png'),
        linear-gradient(180deg, #c4a265 0%, #d4b483 15%, #d9bc8a 50%, #c8a86c 100%);
    overflow: hidden;
}

.ach-header {
    position: relative;
    padding: 20px 20px 14px;
    text-align: center;
    border-bottom: 3px solid #5d3a1a;
    background:
        repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(0, 0, 0, 0.03) 48px, rgba(0, 0, 0, 0.03) 50px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, transparent 40%, rgba(0, 0, 0, 0.08) 100%);
}

.ach-title {
    font-family: 'BJ Cree', serif;
    color: #2c1507;
    font-size: 26px;
    margin: 0;
    letter-spacing: 3px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}

.ach-subtitle {
    font-family: 'Georgia', serif;
    color: #6b4c2a;
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 6px 0 0;
    font-weight: bold;
}

.ach-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 8px;
    -webkit-overflow-scrolling: touch;
}

.ach-loading {
    color: #6b4c2a;
    text-align: center;
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 14px;
    padding: 30px 0;
}

.ach-close-btn {
    display: block;
    width: calc(100% - 28px);
    margin: 8px 14px 14px;
    padding: 14px;
    background: linear-gradient(180deg, #5d3a1a 0%, #3e2210 100%);
    color: #d4b483;
    font-family: 'BJ Cree', serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 2px solid #8b6914;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 3px 0 #2c1507, 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.1s, box-shadow 0.1s;
}

.ach-close-btn:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 #2c1507, 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ===== Summary card (overall trophy count) ===== */
.ach-summary-card {
    background: linear-gradient(180deg, #5d3a1a 0%, #3e2210 100%);
    border: 3px solid #8b6914;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-align: center;
    color: #f0c040;
    font-family: 'BJ Cree', serif;
}

.ach-summary-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #d4b483;
    opacity: 0.85;
}

.ach-summary-count {
    margin: 4px 0 10px;
    font-weight: 900;
}

.ach-summary-num {
    font-size: 34px;
    color: #f0c040;
    text-shadow: 0 2px 0 #3e2210, 0 0 18px rgba(240, 192, 64, 0.45);
}

.ach-summary-total {
    font-size: 18px;
    color: #d4b483;
    opacity: 0.75;
}

.ach-summary-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #8b6914;
}

.ach-summary-fill {
    height: 100%;
    background: linear-gradient(90deg, #f0c040 0%, #e67e22 100%);
    box-shadow: 0 0 12px rgba(240, 192, 64, 0.6);
    transition: width 0.4s ease-out;
}

/* ===== Tier pips strip (above each card) ===== */
.ach-pips {
    display: flex;
    gap: 4px;
    padding: 0 10px;
    margin-bottom: -6px;
    position: relative;
    z-index: 2;
}

.ach-pip {
    flex: 1;
    height: 18px;
    padding: 0 6px;
    background: linear-gradient(180deg, #b8935a 0%, #8b6914 100%);
    border: 2px solid #3e2210;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 10px;
    color: rgba(62, 34, 16, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s, height 0.15s;
}

.ach-pip:active {
    transform: translateY(1px);
}

/* The pip currently being viewed — grows a little and gets a glow */
.ach-pip.active {
    height: 22px;
    margin-top: -4px;
    box-shadow: 0 -2px 6px rgba(240, 192, 64, 0.55);
    color: #3e2210;
    font-size: 11px;
}

.ach-pip.done {
    background: linear-gradient(180deg, #8cc63f 0%, #4a7a1a 100%);
    color: #1a3a0a;
    border-color: #2c4e10;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.4), 0 0 6px rgba(140, 198, 63, 0.4);
}

.ach-pip.ready {
    background: linear-gradient(180deg, #ffd66e 0%, #e67e22 100%);
    color: #3e2210;
    animation: ach-pip-pulse 1.6s ease-in-out infinite;
}

.ach-pip.current {
    background: linear-gradient(180deg, #d6b37d 0%, #a07840 100%);
    color: rgba(62, 34, 16, 0.6);
}

@keyframes ach-pip-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(230, 126, 34, 0);
    }

    50% {
        box-shadow: 0 0 12px rgba(230, 126, 34, 0.7);
    }
}

/* ===== Achievement Card ===== */
.ach-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 25%, rgba(0, 0, 0, 0.12) 100%),
        linear-gradient(180deg, #d6b37d 0%, #b8935a 55%, #a07840 100%);
    border: 3px solid #3e2210;
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.15s, box-shadow 0.3s;
}

.ach-card-claimable {
    border-color: #b4550e;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(230, 126, 34, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: ach-card-glow 2s ease-in-out infinite;
}

@keyframes ach-card-glow {

    0%,
    100% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 10px rgba(230, 126, 34, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    50% {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 24px rgba(230, 126, 34, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

.ach-card-mastered {
    opacity: 0.85;
    border-color: #8b6914;
}

.ach-card-just-claimed {
    animation: ach-card-flash 1.2s cubic-bezier(0.2, 0.9, 0.25, 1);
}

@keyframes ach-card-flash {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 0 rgba(240, 192, 64, 0);
        filter: brightness(1);
    }

    15% {
        transform: scale(1.05);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 60px rgba(255, 230, 140, 1);
        filter: brightness(1.35);
    }

    35% {
        transform: scale(1.02);
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35), 0 0 40px rgba(240, 192, 64, 0.8);
        filter: brightness(1.15);
    }

    70% {
        transform: scale(1.0);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 24px rgba(240, 192, 64, 0.5);
        filter: brightness(1.05);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), 0 0 0 rgba(240, 192, 64, 0);
        filter: brightness(1);
    }
}

/* Floating +XG / +YW reward that shoots up and out from the card on claim */
.ach-reward-flyout {
    position: fixed;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: 'BJ Cree', serif;
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 15000;
    opacity: 0;
    transform: translateY(0) scale(0.7);
    animation: ach-reward-flyout 1.35s cubic-bezier(0.17, 0.89, 0.32, 1.1) forwards;
}

.ach-reward-flyout img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.ach-reward-flyout.flyout-gold {
    background: linear-gradient(180deg, #ffe089 0%, #c79a28 100%);
    color: #3e2210;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ach-reward-flyout.flyout-wampum {
    background: linear-gradient(180deg, #b79be8 0%, #4a2d6b 100%);
}

@keyframes ach-reward-flyout {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.6);
    }

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

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

    100% {
        opacity: 0;
        transform: translateY(-140px) scale(0.85);
    }
}

.ach-card-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 10px;
}

/* Icon tile */
.ach-icon-box {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    border: 2px solid #3e2210;
    background: linear-gradient(180deg, #e6c28d 0%, #c89a60 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 -2px 4px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ach-icon {
    font-size: 34px;
    line-height: 1;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

/* Tier-colored icon boxes */
.ach-icon-box.ach-tier-bronze {
    background: linear-gradient(180deg, #e3a36b 0%, #b76a2e 100%);
}

.ach-icon-box.ach-tier-silver {
    background: linear-gradient(180deg, #e8e8e8 0%, #9aa0a4 100%);
}

.ach-icon-box.ach-tier-gold {
    background: linear-gradient(180deg, #ffe089 0%, #c79a28 100%);
}

.ach-icon-box.ach-tier-platinum {
    background: linear-gradient(180deg, #e8f3f7 0%, #8fb7c6 100%);
}

.ach-icon-box.ach-tier-diamond {
    background: linear-gradient(180deg, #d6f0ff 0%, #6c8fb8 100%);
}

/* Info column */
.ach-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ach-name {
    font-family: 'BJ Cree', serif;
    font-size: 18px;
    font-weight: 900;
    color: #5a1d0c;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    line-height: 1.05;
    text-transform: uppercase;
}

.ach-desc {
    color: #3e2210;
    font-size: 11px;
    line-height: 1.2;
    opacity: 0.85;
}

.ach-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.ach-progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(62, 34, 16, 0.5);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #3e2210;
}

.ach-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b6914 0%, #f0c040 100%);
    box-shadow: 0 0 6px rgba(240, 192, 64, 0.6);
    transition: width 0.4s ease-out;
}

.ach-card-claimable .ach-progress-fill {
    background: linear-gradient(90deg, #e67e22 0%, #f0c040 100%);
}

.ach-progress-text {
    font-family: 'BJ Cree', serif;
    font-size: 11px;
    font-weight: 900;
    color: #3e2210;
    white-space: nowrap;
    padding: 2px 8px;
    background: rgba(62, 34, 16, 0.25);
    border-radius: 10px;
    border: 1px solid rgba(62, 34, 16, 0.3);
}

.ach-card-mastered .ach-progress-text {
    color: #f0c040;
    background: linear-gradient(180deg, #5d3a1a 0%, #3e2210 100%);
    border-color: #f0c040;
}

/* Reward column (right) */
.ach-reward-col {
    flex: 0 0 auto;
    min-width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ach-reward-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: 'BJ Cree', serif;
    color: #3e2210;
    width: 100%;
}

.ach-reward-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1;
}

.ach-reward-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.ach-reward-num {
    font-size: 20px;
    font-weight: 900;
    color: #8b3a1a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ach-reward-wampum {
    color: #4a2d6b;
}

.ach-reward-extra {
    width: 100%;
    text-align: center;
    font-size: 9px;
    letter-spacing: 1px;
    color: #3e2210;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 2px;
}

.ach-tier-tag {
    font-family: 'BJ Cree', serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 10px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.ach-tier-tag.ach-tier-bronze {
    background: linear-gradient(180deg, #b76a2e, #8b4a14);
}

.ach-tier-tag.ach-tier-silver {
    background: linear-gradient(180deg, #9aa0a4, #6b7177);
}

.ach-tier-tag.ach-tier-gold {
    background: linear-gradient(180deg, #c79a28, #8b6914);
}

.ach-tier-tag.ach-tier-platinum {
    background: linear-gradient(180deg, #8fb7c6, #557c8c);
}

.ach-tier-tag.ach-tier-diamond {
    background: linear-gradient(180deg, #6c8fb8, #3f5778);
}

.ach-claim-btn {
    position: relative;
    padding: 8px 18px;
    background: linear-gradient(180deg, #ffe089 0%, #e67e22 60%, #b4550e 100%);
    color: #fff;
    font-family: 'BJ Cree', serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.5px;
    border: 2px solid #5a1d0c;
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: 0 3px 0 #5a1d0c, 0 4px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    overflow: hidden;
    animation: ach-claim-wiggle 1.4s ease-in-out infinite;
    transition: filter 0.1s;
}

/* Moving shine band across the button */
.ach-claim-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg,
            transparent 0%,
            rgba(255, 255, 255, 0.65) 50%,
            transparent 100%);
    transform: skewX(-20deg);
    animation: ach-claim-shine 1.6s ease-in-out infinite;
    pointer-events: none;
}

.ach-claim-btn:active {
    filter: brightness(1.08);
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 1px 0 #5a1d0c, 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.ach-claim-btn:disabled {
    opacity: 0.6;
    cursor: default;
    animation: none;
}

.ach-claim-btn:disabled::before {
    display: none;
}

/* Subtle bob + rotate so the button looks alive */
@keyframes ach-claim-wiggle {

    0%,
    100% {
        transform: translateY(0) rotate(-1.5deg) scale(1);
        filter: drop-shadow(0 0 0 rgba(240, 192, 64, 0));
    }

    25% {
        transform: translateY(-2px) rotate(1.5deg) scale(1.04);
        filter: drop-shadow(0 0 12px rgba(240, 192, 64, 0.8));
    }

    50% {
        transform: translateY(0) rotate(-1deg) scale(1);
    }

    75% {
        transform: translateY(-2px) rotate(1deg) scale(1.04);
        filter: drop-shadow(0 0 12px rgba(240, 192, 64, 0.8));
    }
}

/* Light sweep across the surface */
@keyframes ach-claim-shine {
    0% {
        left: -60%;
    }

    60% {
        left: 120%;
    }

    100% {
        left: 120%;
    }
}

.ach-claimed-badge {
    font-family: 'BJ Cree', serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #1a3a0a;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    padding: 6px 14px;
    background: linear-gradient(180deg, #b7e070 0%, #8cc63f 55%, #4a7a1a 100%);
    border: 2px solid #2c4e10;
    border-radius: 999px;
    box-shadow: 0 2px 0 #2c4e10, 0 3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    /* Claimed = DONE. No motion, no shine, ever. */
    animation: none !important;
    pointer-events: none;
    cursor: default;
    white-space: nowrap;
}

.ach-mastered-badge {
    font-size: 16px;
    letter-spacing: 2px;
    color: #f0c040;
    text-shadow: 0 1px 0 #3e2210, 0 0 8px rgba(240, 192, 64, 0.7);
}

/* ====== ONBOARDING PROMPTS ====== */
.onboarding-prompt {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 15, 8, 0.95);
    color: #e67e22;
    font-family: 'BJ Cree', serif;
    font-size: 13px;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid #8b5e34;
    z-index: 9999;
    text-align: center;
    max-width: 85%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    animation: onboarding-float 2s ease-in-out infinite;
}

/* Elevated variant — used when the prompt must overlay a React mount (Hub /
   Items / shop screens), which sit at #hn-react-root z-index 2000000. Without
   this the bubble renders behind the React screen. Applied via
   showOnboardingPrompt(..., { elevate: true }). */
.onboarding-prompt.onboarding-prompt--elevated {
    z-index: 2000050;
}

/* "Skip Tutorial" — sits just below the onboarding prompt, clearly tappable. */
.onboarding-skip-btn {
    position: fixed;
    /* Top-left of the lobby HUD, mirroring the bounty badge (top-right) and
       clear of the centered ranking header — so it never sits over the
       carousel/items the onboarding prompt is pointing at. */
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    left: 16px;
    z-index: 10000;
    padding: 9px 20px;
    border-radius: 999px;
    background: linear-gradient(to bottom, var(--hn-saddle-light) 0%, var(--hn-saddle) 55%, var(--hn-saddle-dark) 100%);
    border: 2px solid var(--hn-saddle-night);
    box-shadow: inset 0 1px 0 rgba(255, 235, 205, 0.25), 0 3px 0 var(--hn-saddle-night), 0 4px 10px rgba(0, 0, 0, 0.5);
    color: var(--hn-dust);
    font-family: var(--hn-font-head);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.onboarding-skip-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 1px 0 rgba(255, 235, 205, 0.25), 0 1px 0 var(--hn-saddle-night), 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Pre-battle variant: sits at the opponent sprite's feet (roughly 55% from
   the top of the viewport) so the prompt doesn't overlap the Items/Weapons
   trigger row or the FIGHT button. */
.onboarding-prompt.onboarding-prompt--pre-battle {
    top: 56%;
    bottom: auto;
    animation: onboarding-float-prebattle 2s ease-in-out infinite;
}

@keyframes onboarding-float-prebattle {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-4px);
    }
}

/* FIGHT button gated by tutorial (Step 12A): visually grayed + pointer
   events blocked. The click is still swallowed server-side by the onReady
   gate in lobby-controller, but this prevents confusion. */
.tutorial-disabled {
    opacity: 0.45;
    filter: grayscale(0.7);
    pointer-events: none;
    cursor: not-allowed;
}

/* Tutorial hint rendered under the randomly-positioned DRAW button. */
.draw-btn-hint {
    position: fixed;
    transform: translateX(-50%);
    background: rgba(26, 15, 8, 0.92);
    color: #f1c40f;
    font-family: 'BJ Cree', serif;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid #8b5e34;
    z-index: 10001;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Tutorial post-victory message displayed below the Collect Gold button. */
.tutorial-victory-msg {
    margin-top: 14px;
    padding: 12px 18px;
    background: rgba(26, 15, 8, 0.92);
    border: 1px solid #8b5e34;
    border-radius: 10px;
    color: #e67e22;
    font-family: 'BJ Cree', serif;
    font-size: 13px;
    text-align: center;
    max-width: 92%;
    margin-left: auto;
    margin-right: auto;
}

/* Mystery Bag intro overlay — blocks the bag until the player acknowledges
   by tapping. Sits inside #victory-chest-popup so it scopes to the modal. */
.vb-intro-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10;
    padding: 24px;
    pointer-events: none;
    /* allow clicks to the bag underneath */
}

.vb-intro-text {
    background: rgba(26, 15, 8, 0.95);
    color: #e67e22;
    font-family: 'BJ Cree', serif;
    font-size: 14px;
    padding: 14px 22px;
    border-radius: 10px;
    border: 1px solid #8b5e34;
    text-align: center;
    max-width: 340px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}


@keyframes onboarding-float {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* ====== SEASON 3 ANNOUNCEMENT POPUP ====== */
.s3-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s;
}

.s3-popup {
    position: relative;
    width: 88%;
    max-width: 380px;
    background: linear-gradient(180deg, #2c1507 0%, #1a0f08 100%);
    border: 2px solid #8b5e34;
    border-radius: 12px;
    padding: 24px 20px 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
    text-align: center;
}

.s3-popup-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    color: #b38b4d;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}

.s3-popup-title {
    font-family: 'BJ Cree', serif;
    color: #e67e22;
    font-size: 20px;
    margin: 0 0 14px;
}

.s3-popup-body {
    color: #d4b483;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 18px;
}

.s3-popup-body strong {
    color: #e67e22;
}

.s3-popup-discord {
    display: inline-block;
    padding: 10px 24px;
    background: #5865F2;
    color: #fff;
    font-family: 'BJ Cree', serif;
    font-size: 14px;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.onboarding-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(26, 15, 8, 0.95);
    color: #6aa84f;
    font-family: 'BJ Cree', serif;
    font-size: 16px;
    padding: 16px 28px;
    border-radius: 10px;
    border: 1px solid #6aa84f;
    z-index: 99999;
    text-align: center;
    transition: opacity 0.5s;
}