/* ============================================================
 * Market V2 / resource modal — readable mobile-game font.
 * Loaded after market_v2.css. Self-contained additive layer.
 * ONLY changes the font + a few size tweaks to keep things tight.
 * Original colour scheme from market_v2.css is preserved.
 *
 * Revert: remove the <link> in index.html + delete this file.
 *
 * Font choice: Nunito — clean rounded sans, game-friendly,
 * great readability on dark backgrounds at small sizes.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800&display=swap');

/* Apply Nunito only inside market V2 / modals / toast / resource modal.
   Body retains its global 'Press Start 2P' for the rest of the HUD. */
#market-v2-root, #market-v2-root *,
.mv2-modal, .mv2-modal *,
.mv2-toast,
.resource-modal, .resource-modal * {
    font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    letter-spacing: 0;
}

/* ── Sizing pass: tighten so labels stop overflowing on 480px ── */
#market-v2-root        { font-size: 13px; }
.mv2-modal             { font-size: 13px; }

.mv2-modal-title       { font-size: 15px !important; font-weight: 800 !important; letter-spacing: 0.2px; }
.mv2-section-name      { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.4px; text-transform: uppercase; }
.mv2-section-hdr       { font-size: 11px !important; letter-spacing: 0.4px; }

.mv2-tab               { font-size: 12px !important; font-weight: 700 !important; padding: 5px 12px !important; }
.mv2-limit-tab         { font-size: 13px !important; font-weight: 700 !important; }
.mv2-chart-tab         { font-size: 11px !important; font-weight: 700 !important; }

.mv2-bal-val           { font-size: 14px !important; font-weight: 800 !important; }
.mv2-bal-lbl           { font-size: 11px !important; font-weight: 600 !important; }
.mv2-bal-escrow        { font-size: 10px !important; }

.mv2-item-name         { font-size: 13px !important; font-weight: 700 !important; }
.mv2-item-meta         { font-size: 11px !important; font-weight: 500 !important; }
.mv2-meta-pair b       { font-weight: 700 !important; }
.mv2-price-val         { font-size: 15px !important; font-weight: 800 !important; }
.mv2-price-lbl         { font-size: 9px !important; letter-spacing: 0.4px; text-transform: uppercase; }
.mv2-pct               { font-size: 11px !important; font-weight: 800 !important; padding: 2px 6px !important; }

.mv2-hero-lbl          { font-size: 10px !important; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 600 !important; }
.mv2-hero-val          { font-size: 14px !important; font-weight: 800 !important; }

.mv2-chip-lbl          { font-size: 9px !important; letter-spacing: 0.4px; font-weight: 600 !important; text-transform: uppercase; }
.mv2-chip-val          { font-size: 13px !important; font-weight: 800 !important; }

.mv2-instant-title     { font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; min-height: 0 !important; }
.mv2-empty             { font-size: 13px !important; }
.mv2-empty-tiny, .mv2-empty-sm { font-size: 11px !important; }

.mv2-book-title        { font-size: 10px !important; letter-spacing: 0.5px; font-weight: 700 !important; }
.mv2-book-row          { font-size: 12px !important; }
.mv2-book-price        { font-size: 12px !important; font-weight: 700 !important; }
.mv2-book-qty          { font-size: 11px !important; }

.mv2-limit-flbl        { font-size: 10px !important; letter-spacing: 0.4px; font-weight: 600 !important; text-transform: uppercase; }
.mv2-limit-info        { font-size: 11px !important; }

.mv2-order-name        { font-size: 13px !important; font-weight: 700 !important; }
.mv2-order-meta        { font-size: 11px !important; }
.mv2-order-verb        { font-weight: 800 !important; }
.mv2-order-total       { font-size: 12px !important; font-weight: 700 !important; }
.mv2-order-progress-lbl { font-size: 10px !important; }

.mv2-trade-name        { font-size: 12px !important; font-weight: 700 !important; }
.mv2-trade-meta        { font-size: 11px !important; }
.mv2-trade-amount      { font-size: 13px !important; font-weight: 800 !important; }
.mv2-trade-time        { font-size: 10px !important; }

.mv2-cm-line           { font-size: 12px !important; }
.mv2-cm-line b         { font-weight: 700 !important; }
.mv2-cm-total          { font-size: 13px !important; }
.mv2-cm-total b        { font-size: 14px !important; font-weight: 800 !important; }
.mv2-cm-hint           { font-size: 10px !important; }

.mv2-toast             { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.2px; }

/* CTA buttons */
.mv2-btn               { font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.2px; padding: 7px 14px !important; }
.mv2-btn-instant       { font-size: 13px !important; }
.mv2-btn-wide          { font-size: 14px !important; padding: 9px !important; }
.mv2-btn-sm            { font-size: 11px !important; padding: 4px 10px !important; }
.mv2-btn-confirm       { font-size: 14px !important; }

/* Inputs */
.mv2-input             { font-size: 13px !important; font-weight: 600 !important; padding: 6px 10px !important; }
.mv2-input-qty         { font-size: 13px !important; max-width: 80px !important; }
.mv2-search            { font-size: 13px !important; }
.mv2-select            { font-size: 12px !important; }

/* Resource modal */
.resource-modal-title  { font-size: 15px !important; font-weight: 800 !important; }
.resource-modal-desc   { font-size: 12px !important; line-height: 1.4; }
.resource-stat-row     { font-size: 12px !important; }
.resource-stat-row b   { font-weight: 800 !important; }
.resource-modal-btn    { font-size: 13px !important; font-weight: 800 !important; letter-spacing: 0.2px; padding: 9px 14px !important; }
.resource-modal-status { font-size: 11px !important; }

/* Anti-overflow safety */
.mv2-instant-title,
.mv2-section-hdr,
.mv2-item-name,
.mv2-order-name,
.mv2-trade-name,
.mv2-modal-title,
.resource-modal-title {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Tighten line-height on tall pseudo-banner labels so the row doesn't grow */
.mv2-chip, .mv2-stat-box { line-height: 1.2; }
.mv2-hero-row { line-height: 1.3; }

/* ── Item description (shown to buyers, helps when item isn't familiar) ── */
.mv2-item-desc {
    background: rgba(74,58,168,0.10);
    border: 1px solid rgba(107,163,245,0.25);
    border-left: 3px solid #6ba3f5;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 0;  /* parent .mv2-modal-body already has gap */
}
.mv2-item-desc-lbl {
    font-size: 9px !important;
    letter-spacing: 0.5px;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: #8aa8d8 !important;
}
.mv2-item-desc-text {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #ddd !important;
    line-height: 1.4;
}

/* ── Limit form tabs styled as proper buttons (not text + underline) ─── */
.mv2-limit-tabs {
    display: flex !important;
    gap: 6px !important;
    border-bottom: none !important;
    padding: 2px !important;
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
}
.mv2-limit-tab {
    flex: 1 !important;
    text-align: center !important;
    padding: 8px 10px !important;
    border: 1px solid #2a2a35 !important;
    border-radius: 6px !important;
    background: #25252e !important;
    color: #aaa !important;
    cursor: pointer !important;
    user-select: none;
    margin-bottom: 0 !important;
    transition: background 0.15s, border-color 0.15s, transform 0.06s;
}
.mv2-limit-tab:hover {
    background: #2e2e3a !important;
    color: #ddd !important;
}
.mv2-limit-tab.active {
    background: linear-gradient(135deg, #4a3aa8, #38298a) !important;
    color: #fff !important;
    border-color: #6b5bc8 !important;
    border-bottom: 1px solid #6b5bc8 !important;
    box-shadow: 0 2px 6px rgba(74,58,168,0.4);
    transform: translateY(-1px);
}
/* Variant: if first tab (Buy) is active — accent buy-blue; second (Sell) — accent sell-green */
.mv2-limit-tab[data-tab="buy"].active  { background: linear-gradient(135deg, #2c6bff, #1e4dba) !important; border-color: #4781ff !important; }
.mv2-limit-tab[data-tab="sell"].active { background: linear-gradient(135deg, #2bbf3d, #1a8c2a) !important; border-color: #4dd060 !important; }

/* ── Compact orderbook: ALWAYS 2-column, even on mobile ────── */
.mv2-book {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
}
.mv2-book-col {
    padding: 5px 6px !important;
    min-width: 0 !important;
}
.mv2-book-rows {
    max-height: 110px !important;
    gap: 1px !important;
}
.mv2-book-row {
    padding: 2px 5px !important;
    font-size: 11px !important;
}
.mv2-book-price {
    font-size: 11px !important;
}

/* ── Anti-wrap for stat values & labels (numbers must NOT wrap) ── */
.mv2-bal-val, .mv2-bal-escrow,
.mv2-price-val, .mv2-pct,
.mv2-hero-val, .mv2-hero-row,
.mv2-chip-val, .mv2-chip-lbl,
.mv2-stat-val, .mv2-stat-lbl,
.mv2-book-row, .mv2-book-price, .mv2-book-qty, .mv2-book-title,
.mv2-order-total, .mv2-order-meta, .mv2-order-progress-lbl,
.mv2-trade-amount, .mv2-trade-meta, .mv2-trade-time,
.mv2-meta-pair,
.mv2-limit-flbl,
.mv2-cm-line, .mv2-cm-total,
.mv2-section-name, .mv2-section-count {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Allow item names to wrap (they can be long) */
.mv2-item-name, .mv2-order-name, .mv2-trade-name, .mv2-modal-title, .mv2-instant-title { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }

/* Helper text under inputs (e.g. "доступно 11") sits below input,
   own line, no wrap on it either. */
.mv2-limit-fhint {
    font-size: 10px !important;
    color: #888 !important;
    letter-spacing: 0.2px;
    margin-top: 2px;
    white-space: nowrap;
    display: block;
}

/* Hero-row layout robustness — let each row's parts share space gracefully */
.mv2-hero-row { display: flex !important; align-items: baseline; gap: 6px; min-width: 0; }
.mv2-hero-lbl { flex: 0 0 auto; }
.mv2-hero-val { flex: 1 1 auto; min-width: 0; text-align: right; }
.mv2-hero-row .mv2-pct { flex: 0 0 auto; }

/* Browse-card meta — keep "всего N • продают M" on one line */
.mv2-item-meta { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
.mv2-item-price-row { gap: 4px !important; min-width: 0; }
.mv2-item-minprice { min-width: 0; }
.mv2-price-val { overflow: hidden; text-overflow: ellipsis; }

/* ── Instant buy/sell live preview ─────────────────────────────────── */
.mv2-iprev {
    font-size: 11px !important;
    color: #c8d2e0 !important;
    margin-top: 4px;
    line-height: 1.35;
    min-height: 14px;
}
.mv2-iprev b { color: #ffd166 !important; font-weight: 700 !important; }
.mv2-iprev-empty { color: #888 !important; font-style: italic; }
.mv2-iprev-warn { color: #ff9b59 !important; }
.mv2-iprev-detail { color: #888 !important; font-size: 10px !important; }

/* ── Modal title row + "О товаре" button ───────────────────────────── */
.mv2-modal-title-row {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mv2-modal-title-row .mv2-modal-title { flex: 1 1 auto; min-width: 0; }
.mv2-about-btn {
    flex: 0 0 auto;
    background: rgba(255, 209, 102, 0.12) !important;
    border: 1px solid rgba(255, 209, 102, 0.35) !important;
    color: #ffd166 !important;
    border-radius: 6px;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer;
}
.mv2-about-btn:hover { background: rgba(255, 209, 102, 0.22) !important; }

/* ── About item popup (overlay + box) ──────────────────────────────── */
.mv2-about-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.mv2-about-box {
    background: #1a1f2e;
    border: 1px solid rgba(255, 209, 102, 0.35);
    border-radius: 12px;
    max-width: 360px; width: 100%;
    max-height: 85vh; overflow: auto;
    padding: 14px 16px;
    color: #e0e6f0;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}
.mv2-about-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mv2-about-title { font-size: 14px !important; font-weight: 700 !important; flex: 1 1 auto; }
.mv2-about-close {
    background: transparent !important;
    border: none !important;
    color: #888 !important;
    font-size: 22px !important;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px !important;
}
.mv2-about-close:hover { color: #fff !important; }
.mv2-about-body { display: flex; gap: 12px; align-items: flex-start; }
.mv2-about-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 8px; image-rendering: pixelated; }
.mv2-about-desc {
    flex: 1 1 auto; min-width: 0;
    font-size: 12px !important;
    line-height: 1.5;
    color: #c8d2e0 !important;
    white-space: pre-wrap;
}