/* pixland-hud.css — PIXLAND canon skin for the live game HUD.
   Loaded AFTER game-ui.css so its rules win specificity battles when both
   target the same selector. Pure CSS overlay — does NOT modify markup or
   game logic. Tokens come from pixland.css (--gold, --gold-l, --bord,
   --pix font stack). Gild corner decoration is supplied via empty
   ::before/::after — no extra DOM needed. */

/* ── Player info card (top-left): avatar + name + HP + BM/VIP ───────── */
#player-info {
    background: linear-gradient(180deg, #1a1208 0%, #0e0a06 100%) !important;
    border: 2px solid var(--bord) !important;
    border-radius: 0 !important;          /* canon: square corners */
    box-shadow: 0 0 0 1px rgba(231,184,76,.10), 0 4px 14px rgba(0,0,0,.55) !important;
    position: fixed;
    overflow: visible !important;
}
/* Faint gold bevel hint via inset border */
#player-info::before {
    content: '';
    position: absolute; inset: 1px;
    border: 1px solid rgba(231,184,76,.12);
    pointer-events: none;
}
#pi-avatar {
    border: 2px solid var(--bord) !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(231,184,76,.18), 0 2px 6px rgba(0,0,0,.6) !important;
}
#pi-name { font-family: var(--display, 'Unbounded', sans-serif) !important; letter-spacing: .4px; color: var(--gold-l) !important; }
#pi-level { font-family: var(--pix, 'Rubik', sans-serif) !important; letter-spacing: .4px; color: var(--gold) !important; font-weight: 600; }
#pi-bm, #pi-vip { font-family: var(--pix, 'Rubik', sans-serif) !important; letter-spacing: .3px; }
#pi-hp-bar {
    background: #0a0604 !important;
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.6) !important;
}
#pi-hp-fill {
    background: linear-gradient(180deg, #f87171 0%, #b91c1c 60%, #7f1d1d 100%) !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}
#pi-hp-text { font-family: var(--num, 'Rubik', sans-serif) !important; letter-spacing: .3px; }

/* ── Top-right currency pills (Gold/FARM) ─────────────────────────── */
#top-bar .currency {
    background: linear-gradient(180deg, #1a1208 0%, #0e0a06 100%) !important;
    border: 2px solid var(--bord) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 1px rgba(231,184,76,.08), 0 3px 10px rgba(0,0,0,.5) !important;
    position: relative;
}
#top-bar .currency::before {
    content: '';
    position: absolute; inset: 1px;
    border: 1px solid rgba(231,184,76,.10);
    pointer-events: none;
}
#top-bar .currency .val-bg {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
#top-bar .currency .val-bg span,
#gold-val, #farm-val {
    font-family: var(--num, 'Rubik', sans-serif) !important;
    color: var(--gold-l) !important;
    letter-spacing: .4px;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
#top-bar .currency .plus-btn,
#btn-buy-farm {
    background: linear-gradient(180deg, var(--gold-l), var(--gold)) !important;
    color: #2a1a06 !important;
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
#btn-settings {
    background: linear-gradient(180deg, #1a1208, #0e0a06) !important;
    border: 2px solid var(--bord) !important;
    border-radius: 0 !important;
    color: var(--gold-l) !important;
}

/* Side-row sits below the top-bar currencies so neither overlaps the
   other. The top-bar currency stack ends around y≈36–48px; pills start
   below that with a small gap so the FARM tile stays comfortably
   tappable. */
#hud-side-row {
    top: clamp(64px, 11vh, 88px) !important;
}

/* ── Right-side pills (Market/Earn/Pass/Clans) ──────────────────────── */
/* Pills are wide enough that the longest RU label ("Пропуск" 7 chars) fits
   in full — no truncation, no ellipsis. Switched label font from Unbounded
   to Rubik because Unbounded is too wide for short pill widths. */
.hud-pill {
    background: linear-gradient(180deg, #1a1208 0%, #0e0a06 100%) !important;
    border: 2px solid var(--bord) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 1px rgba(231,184,76,.08), 0 3px 10px rgba(0,0,0,.55) !important;
    width: 62px !important;                            /* fits "Пропуск" comfortably */
    padding: 5px 3px 5px !important;
    position: relative;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    overflow: visible;
}
.hud-pill::before {
    content: '';
    position: absolute; inset: 1px;
    border: 1px solid rgba(231,184,76,.10);
    pointer-events: none;
}
.hud-pill:hover {
    border-color: var(--gold) !important;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(231,184,76,.22), 0 5px 14px rgba(0,0,0,.6) !important;
}
/* Icon container — reverted from the earlier +7% bump (was too large for
   the canvas; user's call). Stays at the original game-ui.css size. */
.hud-pill-inner {
    width: 36px !important;
    height: 36px !important;
}
.hud-pill-inner svg {
    width: 26px !important;
    height: 26px !important;
}
.hud-pill-label {
    font-family: var(--pix, 'Rubik', sans-serif) !important;     /* Rubik fits more chars per px than Unbounded */
    font-size: 8px !important;
    letter-spacing: 0 !important;
    color: var(--gold-l) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    /* No overflow:hidden / text-overflow:ellipsis here on purpose — the
       pill is wide enough; if a label ever does overflow we want to see
       it and adjust the pill width, not silently cut off characters. */
}
@media (max-width: 480px) {
    .hud-pill { width: 56px !important; }
    .hud-pill-inner { width: 30px !important; height: 30px !important; }
    .hud-pill-inner svg { width: 22px !important; height: 22px !important; }
    .hud-pill-label { font-size: 7.5px !important; }
}
@media (max-width: 380px) {
    .hud-pill { width: 50px !important; }
    .hud-pill-inner { width: 26px !important; height: 26px !important; }
    .hud-pill-inner svg { width: 19px !important; height: 19px !important; }
    .hud-pill-label { font-size: 7px !important; }
}
#hud-toggle {
    background: linear-gradient(180deg, #1a1208, #0e0a06) !important;
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
}

/* ── Limited-offer button — fold into canon, keep its glow ──────────── */
#btn-limited-offer .lo-btn-inner {
    border-radius: 0 !important;
    border: 2px solid var(--gold) !important;
    background: linear-gradient(180deg, #3a2a10 0%, #1a1208 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}
#btn-limited-offer .lo-btn-text {
    font-family: var(--display, 'Unbounded', sans-serif) !important;
    color: var(--gold-l) !important;
    letter-spacing: .8px !important;
}

/* ── Thin XP strip (replaces the chunky 20px exp bar) ──────────────── */
#exp-bar-container {
    height: 4px !important;
    border-top: 1px solid var(--bord) !important;
    background: #0a0604 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.6), 0 -1px 2px rgba(0,0,0,.4) !important;
}
#exp-fill {
    background: linear-gradient(180deg, var(--gold-l) 0%, var(--gold) 50%, #8B6914 100%) !important;
    box-shadow: 0 0 6px rgba(231,184,76,.45) !important;
}
#exp-fill::after { display: none !important; } /* drop the white strip — too noisy at 4px */
#exp-text { display: none !important; }       /* canon: thin strip, NO numbers */

/* ── Boss arena (.ba-popup family) — canon skin ─────────────────────── */
.ba-popup { background: rgba(8,6,6,.82) !important; backdrop-filter: blur(3px) !important; }
.ba-popup-card {
    background: linear-gradient(180deg, #16110a 0%, #08060a 100%) !important;
    border: 2px solid var(--bord) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 1px rgba(231,184,76,.08), 0 8px 28px rgba(0,0,0,.7) !important;
    color: var(--txt, #d6c08a) !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
}
.ba-popup-head {
    background: linear-gradient(180deg, #1a140c 0%, #0a0806 100%) !important;
    border-bottom: 1px solid var(--bord) !important;
    box-shadow: 0 1px 0 rgba(231,184,76,.12) !important;
}
.ba-popup-title {
    font-family: var(--display, 'Unbounded', sans-serif) !important;
    color: var(--gold-l) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}
.ba-popup-x {
    background: linear-gradient(180deg, #14100a, #0a0806) !important;
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
    color: var(--gold-l) !important;
    width: 24px !important;
    height: 24px !important;
}
.ba-popup-x:hover { background: linear-gradient(180deg, #6b2010, #3a1208) !important; color: #fff !important; }

/* Boss zone cards in #window-areas */
.ba-zone-card {
    background: linear-gradient(180deg, #16110a 0%, #08060a 100%) !important;
    border: 2px solid var(--bord) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 1px rgba(231,184,76,.08), 0 3px 10px rgba(0,0,0,.55) !important;
}
.ba-zone-title {
    font-family: var(--display, 'Unbounded', sans-serif) !important;
    color: var(--gold-l) !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
}
.ba-zone-go {
    background: linear-gradient(180deg, #4a3a18, #2a1f0c) !important;
    border: 1px solid #5a4220 !important;
    border-radius: 0 !important;
    color: var(--gold-l) !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.ba-zone-go:hover { background: linear-gradient(180deg, #5a4520, #382712) !important; }

/* Banner picker rows */
.ba-banner {
    background: linear-gradient(180deg, #14100a, #0a0806) !important;
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
}
.ba-banner:not(.locked):hover { border-color: var(--gold) !important; }

/* Boss HP overlay (in-fight) — canon palette */
#ba-boss-hp-wrap {
    font-family: var(--pix, 'Rubik', sans-serif) !important;
}
#ba-boss-hp-name { font-family: var(--display, 'Unbounded', sans-serif) !important; color: var(--gold-l) !important; letter-spacing: .8px !important; text-transform: uppercase !important; }

/* Confirm popup (typed yes/no) */
#ba-confirm-cancel, #ba-confirm-ok, #ba-result-continue {
    background: linear-gradient(180deg, #4a3a18, #2a1f0c) !important;
    border: 1px solid #5a4220 !important;
    border-radius: 0 !important;
    color: var(--gold-l) !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Result popup */
#ba-result-title { font-family: var(--display, 'Unbounded', sans-serif) !important; color: var(--gold-l) !important; letter-spacing: 1px !important; text-transform: uppercase !important; }

/* ── Popup modal cards (backdrops + cards) ────────────────────────────
   Sweeping skin for in-game popup modals: x2 boost, settings, limited
   offer + its sub-popups, AFK reward/congrats, stats, VIP, season pass,
   privacy, summon info, sell-card, ui-confirm, etc. Each popup follows
   the pattern <id="xxx-popup"> wraps a <id="xxx-window"|"xxx-card">
   inner card. We restyle the inner card under canon and tighten the
   backdrop. Market & clan UI are excluded — they have their own canon
   already. */

/* Backdrops — slightly darker + tiny blur for canon feel */
#boost-popup, #settings-popup, #stats-popup, #vip-popup,
#lo-popup, #lo-rules-popup, #lo-claim-popup, #lo-unlocked-popup,
#afk-reward-popup, #afk-congrats-popup,
#sp-popup, #reward-popup, #wo-success-popup,
#privacy-popup, #soon-popup, #expand-popup,
#summon-info-popup, #sell-card-popup, #card-upgrade-popup,
#card-sell-success-popup, #card-shop-popup, #skill-detail-popup,
#enhance-detail-popup, #vip-claim-result-popup, #promo-result-popup,
#ui-confirm-popup, #amb-modal-popup, #market-card-detail-popup,
#inf-leaderboard-popup, #inf-rewards-popup {
    background: rgba(8, 6, 6, .82) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}

/* Inner cards — dark stone gradient, gold border, square corners */
#boost-window, #settings-window, #stats-window, #vip-window,
#lo-popup-card, #lo-rules-card, #lo-claim-card, #lo-unlocked-card,
#afk-reward-window, #afk-congrats-window,
#sp-popup-card, #reward-popup-card, #wo-success-card,
#privacy-window, #soon-window, #expand-window,
#summon-info-window, #sell-card-window,
#vip-claim-result-window, #ui-confirm-card,
#enhance-detail-card, #skill-detail-card, #amb-modal-window,
#donate-window {
    background: linear-gradient(180deg, #16110a 0%, #08060a 100%) !important;
    border: 2px solid var(--bord) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 0 1px rgba(231,184,76,.08), 0 8px 28px rgba(0,0,0,.7) !important;
    color: var(--txt, #d6c08a) !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    position: relative !important;
}
/* Inner gold-thread bevel (shared with .game-window) */
#boost-window::before, #settings-window::before, #stats-window::before,
#vip-window::before, #lo-popup-card::before, #lo-rules-card::before,
#lo-claim-card::before, #lo-unlocked-card::before,
#afk-reward-window::before, #afk-congrats-window::before,
#sp-popup-card::before, #reward-popup-card::before,
#wo-success-card::before, #privacy-window::before,
#soon-window::before, #expand-window::before,
#summon-info-window::before, #sell-card-window::before,
#vip-claim-result-window::before, #ui-confirm-card::before,
#enhance-detail-card::before, #skill-detail-card::before,
#amb-modal-window::before, #donate-window::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    border: 1px solid rgba(231,184,76,.10);
    pointer-events: none;
    z-index: 0;
}

/* Common header strip inside these popups */
#stats-window .stats-top,
#settings-window .settings-header,
#vip-window .vip-header,
#boost-window .boost-header,
.lo-rules-header,
#lo-popup-header,
#privacy-window .privacy-header {
    background: linear-gradient(180deg, #1a140c 0%, #0a0806 100%) !important;
    border-bottom: 1px solid var(--bord) !important;
    box-shadow: 0 1px 0 rgba(231,184,76,.12) !important;
}
/* Headline text inside popup headers — Unbounded uppercase canon */
#stats-name,
#settings-window .settings-title,
#vip-window .vip-title,
#boost-window .boost-title,
#lo-popup-title,
#lo-rules-title,
#lo-unlocked-card .lo-unlocked-title,
#sp-popup-card .sp-title,
#donate-window .donate-title {
    font-family: var(--display, 'Unbounded', sans-serif) !important;
    color: var(--gold-l) !important;
    letter-spacing: .8px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

/* Generic close icons inside popups — canon square */
#stats-close, #settings-close, #vip-close, #boost-close, #privacy-close,
#lo-popup-close, #afk-reward-close, #afk-congrats-close,
#sp-close, #reward-close, #expand-close, #soon-close,
#summon-info-close, #sell-card-close,
#ui-confirm-close, #vip-claim-result-close,
#donate-close {
    background: linear-gradient(180deg, #14100a, #0a0806) !important;
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
    color: var(--gold-l) !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
}

/* ── Craft window — re-skin under canon (was a fiolet/dark variant) ── */
#window-craft.game-window {
    border: 2px solid var(--bord) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #16110a 0%, #08060a 100%) !important;
}
#craft-root {
    background: linear-gradient(180deg, #16110a 0%, #08060a 100%) !important;
    color: var(--txt, #d6c08a) !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
}
.cr-topbar {
    background: linear-gradient(180deg, #1a140c, #0a0806) !important;
    border-bottom: 1px solid var(--bord) !important;
    box-shadow: 0 1px 0 rgba(231,184,76,.12) !important;
}
.cr-cur {
    background: #14100a !important;
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
    color: var(--txt) !important;
}
.cr-cur b { color: var(--gold-l) !important; font-family: var(--num, 'Rubik', sans-serif) !important; }
.cr-guide-btn {
    background: linear-gradient(180deg, #4a3a18, #2a1f0c) !important;
    border: 1px solid #5a4220 !important;
    border-radius: 0 !important;
    color: var(--gold-l) !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    text-transform: uppercase;
}
.cr-guide-btn:hover { background: linear-gradient(180deg, #5a4520, #382712) !important; box-shadow: none !important; }
.cr-slot {
    background: #0e0a06 !important;
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
}
.cr-slot:hover { border-color: var(--gold) !important; }
.cr-slot-result.ready {
    border-color: var(--gold-l) !important;
    box-shadow: 0 0 12px rgba(231,184,76,.45) !important;
}
.cr-modal {
    background: rgba(8,6,6,.82) !important;
    backdrop-filter: blur(3px) !important;
}
.cr-modal-card {
    background: linear-gradient(180deg, #16110a 0%, #08060a 100%) !important;
    border: 2px solid var(--bord) !important;
    border-radius: 0 !important;
    color: var(--txt, #d6c08a) !important;
    box-shadow: 0 0 0 1px rgba(231,184,76,.08), 0 8px 28px rgba(0,0,0,.7) !important;
}
.cr-modal-head {
    background: linear-gradient(180deg, #1a140c, #0a0806) !important;
    border-bottom: 1px solid var(--bord) !important;
    box-shadow: 0 1px 0 rgba(231,184,76,.12) !important;
    font-family: var(--display, 'Unbounded', sans-serif) !important;
    color: var(--gold-l) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}
.cr-modal-x {
    background: linear-gradient(180deg, #14100a, #0a0806) !important;
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
    color: var(--gold-l) !important;
}
.cr-modal-x:hover { background: linear-gradient(180deg, #6b2010, #3a1208) !important; color: #fff !important; }

/* ── Enhance window — compact merge-bar + currencies row ─────────────
   Old #enhance-slot-bonus took ~8px*2 + a fat 8px bar + 8px gap (~32px).
   Now: single tight row, 4px bar, gold-l text, no decorative padding. */
#enhance-slot-bonus {
    background: linear-gradient(180deg, rgba(231,184,76,.06), transparent), #0e0a06 !important;
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
    padding: 4px 8px !important;
    margin-bottom: 6px !important;
    gap: 3px !important;
}
#enhance-slot-bonus .esb-info {
    font-size: 9px !important;
    line-height: 1.2 !important;
    color: var(--txt) !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
}
#enhance-slot-bonus .esb-info b { color: var(--gold-l) !important; font-family: var(--num, 'Rubik', sans-serif) !important; }
#enhance-slot-bonus .esb-bar {
    height: 4px !important;
    background: #0a0604 !important;
    border-radius: 0 !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.6) !important;
}
#enhance-slot-bonus .esb-bar-fill {
    background: linear-gradient(90deg, #C9A020, var(--gold-l)) !important;
}

/* Currencies row inside Enhance > Skills tab. Was a wide chip taking
   the whole row — switch to a small inline pill. */
#skill-tc-bar {
    display: inline-flex !important;
    width: auto !important;
    padding: 3px 10px !important;
    background: linear-gradient(180deg, #1a140c, #0e0a06) !important;
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
    color: var(--gold-l) !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    font-size: 9px !important;
    margin: 4px 0 6px !important;
}

/* The merge-all button in upgrades — give it the canon brown look */
.enhance-merge-all {
    background: linear-gradient(180deg, #4a3a18, #2a1f0c) !important;
    border: 1px solid #5a4220 !important;
    border-radius: 0 !important;
    color: var(--gold-l) !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding: 5px !important;
    margin-bottom: 6px !important;
    font-size: 9px !important;
}
.enhance-merge-all:hover { background: linear-gradient(180deg, #5a4520, #382712) !important; }

/* ── Earn window (#window-earn): full-screen popup like Market ────────
   Was a bottom-sheet that obscured the game canvas only partially.
   Promote to a full overlay positioned exactly like #window-market. */
#window-earn.game-window {
    top: 20px !important;
    bottom: 20px !important;
    left: 10px !important;
    right: 10px !important;
    height: auto !important;
    z-index: 200 !important;
    display: none !important;
    flex-direction: column !important;
    box-shadow: 0 0 40px rgba(0,0,0,.85), inset 0 0 20px rgba(0,0,0,.3) !important;
}
#window-earn.game-window.visible { display: flex !important; }
#window-earn .win-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    padding-bottom: 20px !important;
}

/* ── Game windows (.game-window family) ──────────────────────────────
   Skin overlay for the in-game popups opened from the bottom menu and
   side pills (Inventory, Growth, Enhance, Craft, Areas, Shop, Stats,
   Earn, Pass, etc.). Preserves layout (bottom-sheet vs overlay), only
   changes visual chrome — fonts, borders, header. Skips #window-market
   on purpose because the user said the current market visual is good. */

/* Don't apply this skin to the market window — it has its own custom look. */
.game-window:not(#window-market) {
    background: linear-gradient(180deg, #16110a 0%, #08060a 100%) !important;
    border-top: 2px solid var(--bord) !important;
    border-bottom: 2px solid var(--bord) !important;
    box-shadow: 0 -4px 24px rgba(0,0,0,.7), inset 0 0 0 1px rgba(231,184,76,.06) !important;
    border-radius: 0 !important;
}
.game-window:not(#window-market)::before {
    border: 1px solid rgba(231,184,76,.10) !important;
    top: 2px !important; left: 2px !important; right: 2px !important; bottom: 2px !important;
}

/* Header — Unbounded display title, dark gradient, gold underline */
.game-window:not(#window-market) .win-header {
    background: linear-gradient(180deg, #1a140c 0%, #0a0806 100%) !important;
    border-bottom: 1px solid var(--bord) !important;
    box-shadow: 0 1px 0 rgba(231,184,76,.12), 0 2px 6px rgba(0,0,0,.5) !important;
    padding: 9px 14px !important;
}
.game-window:not(#window-market) .win-title {
    font-family: var(--display, 'Unbounded', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--gold-l) !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.7) !important;
}

/* Close button — square canon */
.game-window:not(#window-market) .win-close {
    width: 26px !important;
    height: 26px !important;
    background: linear-gradient(180deg, #14100a, #0a0806) !important;
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
    color: var(--gold-l) !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    font-size: 13px !important;
}
.game-window:not(#window-market) .win-close:hover {
    background: linear-gradient(180deg, #6b2010, #3a1208) !important;
    color: #fff !important;
    border-color: #8B2E1F !important;
}

/* Body — Rubik default font, dark ink-on-stone backdrop */
.game-window:not(#window-market) .win-body {
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    color: var(--txt, #d6c08a) !important;
}

/* Numeric values inside window content — tabular Rubik */
.game-window:not(#window-market) .win-body b,
.game-window:not(#window-market) .win-body strong {
    font-family: var(--num, 'Rubik', sans-serif) !important;
    color: var(--gold-l) !important;
    font-feature-settings: 'tnum' 1;
}

/* Generic in-window tabs (Growth/Enhance use these) — square canon */
#growth-tabs, #enhance-tabs {
    border: 1px solid var(--bord) !important;
    border-radius: 0 !important;
    background: #0a0806 !important;
}
#growth-tabs > *, #enhance-tabs > * {
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
}

/* Section titles inside windows — Unbounded small caps */
.game-window:not(#window-market) .section-title,
.game-window:not(#window-market) h2,
.game-window:not(#window-market) h3 {
    font-family: var(--display, 'Unbounded', sans-serif) !important;
    color: var(--gold-l) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* ── Bottom menu (Inventory · Shop · Areas · Craft · Profile) ──────────
   Five-button bar at the bottom-edge under the thin XP strip. White SVG
   icons, no gold outline — matches the bottom-card chrome but slightly
   lighter so the menu reads as the primary navigation. */
#bottom-bar {
    background: linear-gradient(180deg, #16110a 0%, #08060a 100%) !important;
    border-top: 1px solid #3a2e18 !important;
    padding: 5px 8px 7px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 -2px 8px rgba(0,0,0,.55) !important;
    gap: 4px !important;
}
#menu-icons { gap: 5px !important; }
.menu-btn {
    background: linear-gradient(180deg, #1a140c 0%, #0e0a06 100%) !important;
    border: 1px solid #3a2e18 !important;
    border-radius: 0 !important;
    height: 50px !important;
    padding: 5px 2px 3px !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 2px 5px rgba(0,0,0,.45) !important;
    transition: background .12s, border-color .12s, transform .08s !important;
}
.menu-btn::before {
    content: '';
    position: absolute; inset: 1px;
    border: 1px solid rgba(255,248,230,.05);
    pointer-events: none;
}
.menu-btn:hover {
    background: linear-gradient(180deg, #221a10 0%, #14100a 100%) !important;
    border-color: #5a4220 !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 3px 8px rgba(0,0,0,.55) !important;
}
.menu-btn:active { transform: translateY(1px) !important; }
.menu-btn.active {
    background: linear-gradient(180deg, #2a2010 0%, #160e08 100%) !important;
    border-color: #6b3000 !important;                     /* warm brown — not gold, not red */
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(107,48,0,.4) !important;
}
.menu-btn svg {
    width: clamp(18px, 5.6vw, 26px) !important;
    height: clamp(18px, 5.6vw, 26px) !important;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.6));
}
.menu-btn span {
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    font-size: clamp(6px, 1.7vw, 7.5px) !important;
    color: #d6c08a !important;
    font-weight: 600 !important;
    letter-spacing: .2px !important;
    text-shadow: 0 1px 0 #000 !important;
    margin-top: 3px !important;
}
.menu-btn.active span { color: #fde68a !important; }

/* Red-dot notifier — inherit but recolor border to match canon */
.menu-btn .red-dot {
    border-color: #16110a !important;
}

/* ── Wave-locked menu buttons (Craft<10, Areas<30) ──
   Dim the icon/label, lay a translucent black sheet on top, and stamp
   "🔒 WAVE10" badge so the player understands what unlocks it. */
.menu-btn { position: relative !important; }
.menu-btn.locked {
    pointer-events: none !important;
    filter: grayscale(.85) brightness(.5) !important;
}
.menu-btn .menu-lock {
    position: absolute; inset: 0;
    display: none;
    flex-direction: column; align-items: center; justify-content: center;
    background: rgba(8,6,10,.45);
    border-radius: 0;
    pointer-events: none;
    z-index: 3;
    gap: 1px;
}
.menu-btn.locked .menu-lock { display: flex; }
.menu-btn .menu-lock-icon {
    font-size: clamp(11px, 3.6vw, 16px);
    line-height: 1;
    filter: drop-shadow(0 1px 0 #000);
}
.menu-btn .menu-lock-text {
    font-family: var(--pix, 'Rubik', sans-serif);
    font-size: clamp(5.5px, 1.6vw, 7px);
    font-weight: 800;
    color: #fde68a;
    letter-spacing: .4px;
    text-shadow: 0 1px 0 #000, 0 0 4px rgba(240,192,64,.4);
    white-space: nowrap;
}
.menu-btn .menu-lock-text span { display: inline; }

/* ── Season-pool button (yellow $ alert, left-center) ───────────────── */
/* No left border — the tile reads as if it's peeking out from the left
   edge of the screen. -15% scale composed onto translateY(-50%). */
#season-pool-btn,
#season-pool-btn.season-alert {
    background: linear-gradient(180deg, #3a2a10, #1a1208) !important;
    border-top: 2px solid var(--gold) !important;
    border-right: 2px solid var(--gold) !important;
    border-bottom: 2px solid var(--gold) !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: 4px 0 12px rgba(231,184,76,.35), 4px 3px 10px rgba(0,0,0,.55) !important;
    transform: translateY(-50%) scale(.85) !important;
    transform-origin: left center !important;
    padding-left: 6px !important;
}
.spb-amount {
    font-family: var(--num, 'Rubik', sans-serif) !important;
    color: var(--gold-l) !important;
    letter-spacing: .3px;
}

/* ── Top-bar currency symmetry. Both tiles = [icon][val-bg(+plus)].
   Gold val-bg = 76px. FARM val-bg = 56px + 20px plus button = 76px.
   Both have the same overall footprint. Wider than before so 7-digit
   numbers (1.2M, 184K…) fit comfortably without trimming. */
#top-bar .currency .val-bg {
    min-width: 76px !important;
    max-width: 76px !important;
    width: 76px !important;
    box-sizing: border-box !important;
    padding: 2px 4px !important;
}
#top-bar .currency.farm .val-bg {
    min-width: 56px !important;
    max-width: 56px !important;
    width: 56px !important;
}
#top-bar .currency .plus-btn {
    width: 20px !important;
    height: 22px !important;
}

/* ── Bottom-edge widget cards ─────────────────────────────────────────
   Three primary cards (daily-cap + quest on the left, wave on the right)
   plus the compact x2-boost chip. All share a unified visual: dark
   ink-on-stone gradient, hard square corners, subtle inner highlight,
   NO gold outline. Each card has a small white badge-icon in its
   top-left corner so they feel labeled at a glance. */

/* Common card chrome — not a real selector, but every card below
   replicates these props. Kept in one place via CSS custom props. */
:root {
    --card-bg:        linear-gradient(180deg, #16110a 0%, #0a0806 100%);
    --card-bord:      1px solid #3a2e18;
    --card-shadow:    0 2px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
    --card-bord-warn: 1px solid #6b3000;        /* daily cap full / boost active */
    --icon-w:         #fff8e6;                   /* warm white for white icons */
}

/* All four bottom cards share chrome — dark stone gradient, hard square
   corners, subtle inner highlight, no gold outline. NO badge icons (the
   widgets are self-explanatory by their numbers/labels). */
#daily-kill-cap-panel,
#quest-panel,
#wave-panel,
#btn-boost {
    background: var(--card-bg) !important;
    border: var(--card-bord) !important;
    border-radius: 0 !important;
    box-shadow: var(--card-shadow) !important;
    position: fixed;
}

/* Compact half-size widgets, sitting just above the bottom menu bar.
   The menu (#bottom-bar ≈ 60px) + exp-bar (4px) form a 64-66px stack at
   the bottom edge. Widgets are placed a couple pixels above that stack. */
#daily-kill-cap-panel {
    bottom: 100px !important;
    width: 96px !important;
    padding: 3px 6px !important;
    min-height: 0 !important;
}
#daily-kill-cap-num {
    font-family: var(--num, 'Rubik', sans-serif) !important;
    color: #d6c08a !important;
    font-size: 6px !important;
    letter-spacing: .3px;
    margin-bottom: 2px !important;
}
#daily-kill-cap-bar { height: 2px !important; }
#daily-kill-cap-fill { background: linear-gradient(90deg, #fbbf24, #f59e0b) !important; }
#daily-kill-cap-panel.full { border: var(--card-bord-warn) !important; }
#daily-kill-cap-panel.full #daily-kill-cap-fill { background: linear-gradient(90deg, #ef4444, #b91c1c) !important; }

#quest-panel {
    bottom: 70px !important;
    width: 96px !important;
    min-height: 0 !important;
    max-height: 30px !important;
    padding: 3px 6px !important;
    border: var(--card-bord) !important;
}
#quest-panel.complete { border: 1px solid #4ade80 !important; box-shadow: 0 0 8px rgba(74,222,128,.25), var(--card-shadow) !important; }
#quest-title    { font-family: var(--pix, 'Rubik', sans-serif) !important; letter-spacing: .2px; color: #d6c08a !important; font-size: 6px !important; min-height: 0 !important; max-height: 10px !important; margin-bottom: 2px !important; }
#quest-bar      { height: 2px !important; }
#quest-progress { font-family: var(--num, 'Rubik', sans-serif) !important; color: #8e7a4d !important; font-size: 6px !important; margin-top: 1px !important; }

#wave-panel {
    bottom: 70px !important;
    width: 86px !important;
    padding: 3px 6px !important;
    gap: 2px !important;
    min-height: 0 !important;
}
#wave-bar       { height: 2px !important; }
#wave-label     { font-family: var(--pix, 'Rubik', sans-serif) !important; color: #d6c08a !important; font-size: 7px !important; letter-spacing: .3px; line-height: 1.1; }
#wave-sub       { font-family: var(--num, 'Rubik', sans-serif) !important; color: #8e7a4d !important; font-size: 6px !important; }
#wave-fill      { background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; }
#btn-next-wave {
    background: linear-gradient(180deg, #4a3a18, #2a1f0c) !important;
    border: 1px solid #5a4220 !important;
    border-radius: 0 !important;
    color: #fde68a !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 3px 4px !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    font-size: 7px !important;
}
/* CRITICAL: must NOT force display here — the JS keeps this element on
   display:none during stage 1 (mobs alive) and only flips it to block
   when the wave is cleared. A `display:flex !important` would expose
   the button on every wave (the bug user reported). */
#btn-next-wave:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#btn-next-wave:hover { background: linear-gradient(180deg, #5a4520, #382712) !important; }

/* x2 boost — micro-chip above the wave panel. */
#btn-boost {
    bottom: 100px !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 6px !important;
    min-height: 0 !important;
    height: 18px !important;
}
#btn-boost.active { border: var(--card-bord-warn) !important; box-shadow: 0 0 8px rgba(245,158,11,.35), var(--card-shadow) !important; }
.boost-icon  { font-size: 9px !important; line-height: 1 !important; color: #fde68a !important; text-shadow: 0 0 6px rgba(245,158,11,.45) !important; }
.boost-label { font-family: var(--pix, 'Rubik', sans-serif) !important; font-size: 5.5px !important; letter-spacing: .4px; color: #8e7a4d !important; }

/* ─────────────────────────────────────────────────────────────────────
   ONBOARDING TUTORIAL — Pixland canon skin
   Overrides the legacy purple chrome from game-ui.css:1955+. Reuses the
   same DOM (#tut-panel · #tut-text · #tut-btns · #tut-skip · #tut-next ·
   #tut-dots) so JS doesn't need to know. Same palette as .game-window:
   black gradient bg, gold border, gold-thread bevel, square corners,
   Unbounded display title, Rubik body, gold accents on <b>.
   ───────────────────────────────────────────────────────────────────── */
/* Overlay must outrank Clans UI root (z-index:99000) and any modal it
   spawns — otherwise the wave-16 sequence opens behind the clan window. */
#tut-overlay { z-index: 99500 !important; }

/* Generic confirm + toast must sit ABOVE the clans overlay too — they
   are user-action acknowledgments and must always be visible. Stacking:
     clans-overlay 99000 < tut-overlay 99500 < ui-confirm 99800 < toast 99900 */
#ui-confirm-popup { z-index: 99800 !important; }
#ui-toast         { z-index: 99900 !important; }
#tut-panel {
    width: min(88vw, 320px) !important;
    background: linear-gradient(180deg, #16110a 0%, #08060a 100%) !important;
    border: 2px solid var(--bord) !important;
    border-radius: 0 !important;
    padding: 14px 16px 12px !important;
    box-shadow: 0 6px 30px rgba(0,0,0,.85), 0 0 0 1px rgba(231,184,76,.10), inset 0 0 0 1px rgba(231,184,76,.06) !important;
    z-index: 99502 !important;
}
#tut-panel.pos-top    { top: 64px !important; }
#tut-panel.pos-bottom { bottom: 92px !important; }
/* Inner gold-thread bevel (same trick the .game-window family uses). */
#tut-panel::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    border: 1px solid rgba(231,184,76,.16);
    pointer-events: none;
}
/* Tiny ornamental gold corner brackets — top-left + bottom-right. Echoes
   the .pi-frame and .game-window decoration so the tutorial reads as part
   of the same UI family rather than a stranger overlay. */
#tut-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, var(--gold-l) 0 6px, transparent 6.5px) top left / 14px 14px no-repeat,
        linear-gradient(-45deg, var(--gold-l) 0 6px, transparent 6.5px) bottom right / 14px 14px no-repeat;
    opacity: .55;
}

/* Body — Rubik default, off-white ink. */
#tut-text {
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    font-size: 11.5px !important;
    line-height: 1.6 !important;
    color: var(--txt, #d6c08a) !important;
    font-weight: 500 !important;
    letter-spacing: .2px;
    /* Push text below the corner ornament so the first glyph never collides. */
    padding-top: 2px;
}
#tut-text b,
#tut-text strong {
    color: var(--gold-l, #FCDF7A) !important;
    font-weight: 700 !important;
}
/* Title — display font, uppercase, gold underline strip. */
#tut-text .tut-title {
    font-family: var(--display, 'Unbounded', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gold-l, #FCDF7A) !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    margin: 0 0 10px 0 !important;
    padding-bottom: 8px !important;
    display: block !important;
    border-bottom: 1px solid rgba(139,105,20,.5);
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
}

/* Action buttons row. */
#tut-btns {
    display: flex !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding-top: 2px;
}

/* Skip — secondary, dark stone with bord outline. */
#tut-skip {
    flex: 1 !important;
    padding: 8px 6px !important;
    background: linear-gradient(180deg, #14100a, #0a0806) !important;
    border: 1px solid var(--bord, #8B6914) !important;
    border-radius: 0 !important;
    color: var(--txt-dim, #8a8070) !important;
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
#tut-skip:hover  { background: linear-gradient(180deg, #1c1610, #100c08) !important; color: var(--txt, #d6c08a) !important; }
#tut-skip:active { transform: translateY(1px); }

/* Next — primary, gold gradient with dark text. The CTA. */
#tut-next {
    flex: 2 !important;
    padding: 9px 12px !important;
    background: linear-gradient(180deg, var(--gold-l, #FCDF7A) 0%, var(--gold, #E7B84C) 60%, var(--gold-d, #9B7A20) 100%) !important;
    border: 1px solid var(--bord, #8B6914) !important;
    border-radius: 0 !important;
    color: #1a1408 !important;
    font-family: var(--display, 'Unbounded', sans-serif) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.55);
    cursor: pointer;
    transition: filter .15s;
}
#tut-next:hover  { filter: brightness(1.06); }
#tut-next:active { filter: brightness(.92); transform: translateY(1px); }

/* Step dots — gold filled vs deep-gold empty, square pixel-art shape. */
#tut-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-top: 12px !important;
    padding-top: 2px;
}
.tut-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 0 !important;            /* square — pixel canon */
    background: rgba(139,105,20,.35) !important;
    border: 1px solid var(--bord, #8B6914) !important;
    transition: background .2s, transform .2s;
}
.tut-dot.active {
    background: var(--gold-l, #FCDF7A) !important;
    box-shadow: 0 0 6px rgba(252,223,122,.5);
    transform: scale(1.2);
}

/* ─── Reward popup (#tut-reward-popup) — same canon ─────────────────── */
/* Inline styles in HTML get overridden via id+!important specificity. */
#tut-reward-popup > div {
    background: linear-gradient(180deg, #16110a 0%, #08060a 100%) !important;
    border: 2px solid var(--bord, #8B6914) !important;
    border-radius: 0 !important;
    padding: 22px 18px 18px !important;
    max-width: 360px !important;
    box-shadow: 0 8px 38px rgba(0,0,0,.85), 0 0 0 1px rgba(231,184,76,.10), inset 0 0 0 1px rgba(231,184,76,.06) !important;
    position: relative;
}
/* Gold-thread bevel matching the panel. */
#tut-reward-popup > div::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    border: 1px solid rgba(231,184,76,.16);
    pointer-events: none;
}
#tut-reward-popup [data-i18n="tut_reward_title"] {
    font-family: var(--display, 'Unbounded', sans-serif) !important;
    font-size: 17px !important;
    color: var(--gold-l, #FCDF7A) !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
    margin-bottom: 4px !important;
}
#tut-reward-popup [data-i18n="tut_reward_sub"] {
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    color: var(--txt-dim, #8a8070) !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
    margin-bottom: 14px !important;
}
#tut-reward-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}
#tut-reward-list > div {
    background: linear-gradient(180deg, #1a140c 0%, #0a0806 100%) !important;
    border: 1px solid var(--bord, #8B6914) !important;
    border-radius: 0 !important;
    padding: 12px 8px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.5);
}
#tut-reward-list > div > div:nth-child(2) {       /* the +amount line */
    font-family: var(--num, 'Rubik', sans-serif) !important;
    font-feature-settings: 'tnum' 1;
    color: var(--gold-l, #FCDF7A) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
}
#tut-reward-list > div > div:nth-child(3) {       /* the label line */
    font-family: var(--pix, 'Rubik', sans-serif) !important;
    color: var(--txt-dim, #8a8070) !important;
    font-size: 9.5px !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
}
#tut-reward-ok {
    background: linear-gradient(180deg, var(--gold-l, #FCDF7A) 0%, var(--gold, #E7B84C) 60%, var(--gold-d, #9B7A20) 100%) !important;
    border: 1px solid var(--bord, #8B6914) !important;
    border-radius: 0 !important;
    color: #1a1408 !important;
    font-family: var(--display, 'Unbounded', sans-serif) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 11px 32px !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 2px 6px rgba(0,0,0,.55);
}
#tut-reward-ok:hover  { filter: brightness(1.06); }
#tut-reward-ok:active { filter: brightness(.92); transform: translateY(1px); }
/* Mute the 🎉 emoji a touch — feels too cartoony against the canon. */
#tut-reward-popup > div > div:first-child { opacity: .85 !important; }

/* ── Bound craft-currency tile (cr-bag-bound) ──
   Tutorial/quest crystals that the player can spend on crafting but cannot
   list on the market. Visually marked with a small white 🔒 in the top-
   right corner and a subtle gold-tinted backdrop so the player can spot
   them at a glance. */
.cr-bag-item.cr-bag-bound {
    position: relative;
    background: linear-gradient(180deg, rgba(252,223,122,.08), rgba(252,223,122,.02)) !important;
    border-color: rgba(252,223,122,.35) !important;
    box-shadow: inset 0 0 0 1px rgba(252,223,122,.08) !important;
}
.cr-bag-lock {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 9px;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.7);
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 2px rgba(0,0,0,.6));
}