/* =====================================================
   mobile.css — Comprehensive mobile overrides
   Breakpoints: 600px (mobile), 900px (tablet)
   Covers every page in the Netorbus RPG application
   ===================================================== */

/* ──────────────────────────────────────────
   WELCOME PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .welcome-container { padding: 1rem; }
    .player-banner { flex-direction: column; gap: 1rem; padding: 1.2rem 1rem; text-align: center; }
    .player-avatar { width: 80px; height: 80px; }
    .player-info { width: 100%; }
    .quick-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; }
    .score-breakdown-bars { gap: 0.5rem; }
    .welcome-grid { grid-template-columns: 1fr !important; }
    .action-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .daily-claim-section { padding: 1rem; }
}
@media (max-width: 600px) {
    .welcome-container { padding: 0.5rem; }
    .player-banner { padding: 0.8rem 0.6rem; gap: 0.7rem; }
    .quick-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem; }
    .action-cards-grid { grid-template-columns: 1fr !important; }
    .player-banner h1, .player-banner h2 { font-size: 1.1rem; }
    .wheel-of-fortune-btn { width: 100%; }
}

/* ──────────────────────────────────────────
   BANK PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .bank-container { padding: 1rem; }
    .transaction-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
    .balance-limits { flex-direction: column; gap: 8px; }
    .balance-amount { font-size: 2rem; }
}
@media (max-width: 600px) {
    .bank-container { padding: 0.5rem; }
    .transaction-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
    .transaction-card { padding: 14px; }
    .balance-amount { font-size: 1.6rem; }
    .transaction-btn { padding: 10px; font-size: 0.9rem; }
    .bank-dashboard { margin-top: 10px; }
    .account-overview { margin-bottom: 20px; }
}

/* ──────────────────────────────────────────
   MARKET PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .market-container { padding: 1rem; }
    .market-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
    .market-header { flex-wrap: wrap; gap: 0.5rem; }
    .filter-section { flex-wrap: wrap; gap: 0.5rem; }
    .market-header h1 { font-size: 1.5rem; }
}
@media (max-width: 600px) {
    .market-container { padding: 0.5rem; }
    .market-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
    .market-header { padding: 0.6rem; }
    .market-header h1 { font-size: 1.2rem; }
    .filter-btn { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
    .market-card-actions { flex-direction: column; gap: 0.4rem; }
    .market-card-actions input, .market-card-actions button { width: 100%; }
}

/* ──────────────────────────────────────────
   INVENTORY PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .inventory-container { padding: 1rem; }
    .inventory-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .inventory-tabs { flex-wrap: wrap; gap: 0.4rem; }
    .inventory-tab { font-size: 0.85rem; padding: 0.4rem 0.7rem; }
}
@media (max-width: 600px) {
    .inventory-container { padding: 0.5rem; }
    .inventory-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem; }
    .inventory-item { padding: 0.7rem; }
    .inventory-tabs { gap: 0.3rem; }
    .inventory-tab { font-size: 0.78rem; padding: 0.3rem 0.5rem; }
}

/* ──────────────────────────────────────────
   PROFILE PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .profile-container { padding: 1rem; }
    .profile-header { flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
    .profile-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; }
    .profile-actions { flex-wrap: wrap; gap: 0.5rem; }
    .attack-popup-content { padding: 1.5rem; }
}
@media (max-width: 600px) {
    .profile-container { padding: 0.5rem; }
    .profile-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem; }
    .profile-actions { flex-direction: column; }
    .profile-actions button, .profile-actions a { width: 100%; justify-content: center; }
    .profile-bio { font-size: 0.9rem; }
    .attack-popup { padding: 0.5rem; }
    .attack-popup-content { padding: 1rem; width: 95vw; max-width: 95vw; }
}

/* ──────────────────────────────────────────
   LEADERBOARD PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .leaderboard-container { padding: 1rem; }
    .leaderboard-filters { flex-wrap: wrap; gap: 0.5rem; }
    .leaderboard-filters select, .leaderboard-filters button { flex: 1; min-width: 120px; }
}
@media (max-width: 600px) {
    .leaderboard-container { padding: 0.5rem; }
    .leaderboard-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .leaderboard-table { min-width: 500px; }
    .leaderboard-filters { flex-direction: column; }
    .leaderboard-filters select, .leaderboard-filters button { width: 100%; }
}

/* ──────────────────────────────────────────
   FACTION PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .faction-container { padding: 1rem; }
    .faction-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .faction-actions { flex-wrap: wrap; gap: 0.5rem; }
    .faction-members-list { gap: 0.75rem; }
}
@media (max-width: 600px) {
    .faction-container { padding: 0.5rem; }
    .faction-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem; }
    .faction-actions { flex-direction: column; }
    .faction-actions button, .faction-actions a { width: 100%; }
    .member-item { flex-wrap: wrap; }
    .faction-header { flex-direction: column; text-align: center; gap: 0.5rem; }
}

/* ──────────────────────────────────────────
   AUCTION PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .auction-container { padding: 1rem; }
    .auction-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
}
@media (max-width: 600px) {
    .auction-container { padding: 0.5rem; }
    .auction-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
    .auction-card-actions { flex-direction: column; gap: 0.4rem; }
    .auction-card-actions input, .auction-card-actions button { width: 100%; }
}

/* ──────────────────────────────────────────
   STORE / RANK STORE PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .store-container { padding: 1rem; }
    .store-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
    .store-filters { flex-wrap: wrap; gap: 0.5rem; }
}
@media (max-width: 600px) {
    .store-container { padding: 0.5rem; }
    .store-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
    .store-item { flex-direction: column; text-align: center; }
    .store-item-actions { width: 100%; justify-content: center; }
    .rank-store-grid { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────
   CASINO / CRASH GAME
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .casino-container { padding: 1rem; }
    .meiko-casino-crash { padding: 1rem; }
    #multiplier-graph { max-height: 250px; }
    .crash-controls { flex-wrap: wrap; gap: 0.75rem; }
}
@media (max-width: 600px) {
    .casino-container { padding: 0.5rem; }
    .meiko-casino-crash { padding: 0.6rem; }
    #multiplier { font-size: 2.5rem !important; }
    #multiplier-graph { max-height: 180px; }
    .crash-bet-row { flex-direction: column; gap: 0.5rem; }
    .crash-bet-row input, .crash-bet-row button { width: 100%; }
    #place-bet, #cash-out { width: 100%; padding: 12px; font-size: 1rem; }
}

/* ──────────────────────────────────────────
   BLACKJACK
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .blackjack-container { padding: 1rem; }
    .blackjack-table { padding: 1rem; }
    .card-hand { gap: 0.5rem; }
    .playing-card { width: 65px; height: 95px; font-size: 1rem; }
}
@media (max-width: 600px) {
    .blackjack-container { padding: 0.5rem; }
    .blackjack-table { padding: 0.7rem; border-radius: 10px; }
    .playing-card { width: 50px; height: 72px; font-size: 0.85rem; }
    .blackjack-controls { flex-wrap: wrap; gap: 0.4rem; }
    .blackjack-controls button { flex: 1; min-width: 80px; }
    .blackjack-bet-section { flex-direction: column; gap: 0.5rem; }
    .blackjack-bet-section input, .blackjack-bet-section button { width: 100%; }
}

/* ──────────────────────────────────────────
   FIGHTING / TRAINING
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .fighting-container { padding: 1rem; }
    .fighting-styles-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
    .training-info { flex-wrap: wrap; gap: 0.5rem; }
}
@media (max-width: 600px) {
    .fighting-container { padding: 0.5rem; }
    .fighting-styles-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
    .fighting-card { padding: 1rem; }
    .training-progress { flex-direction: column; gap: 0.4rem; }
    .challenges-list { overflow-x: auto; }
}

/* ──────────────────────────────────────────
   EDUCATION PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .education-container { padding: 1rem; }
    .edu-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
    .edu-stats-row { flex-wrap: wrap; gap: 0.75rem; }
}
@media (max-width: 600px) {
    .education-container { padding: 0.5rem; }
    .edu-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
    .edu-card { padding: 1rem; }
    .edu-stats-row { flex-direction: column; gap: 0.5rem; }
    .study-btn { width: 100%; }
}

/* ──────────────────────────────────────────
   JOBS PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .jobs-container { padding: 1rem; }
    .jobs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
}
@media (max-width: 600px) {
    .jobs-container { padding: 0.5rem; }
    .jobs-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
    .job-card { padding: 1rem; }
    .job-actions { flex-direction: column; gap: 0.4rem; }
    .job-actions button { width: 100%; }
}

/* ──────────────────────────────────────────
   AGRICULTURE PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .agriculture-container { padding: 1rem; }
    .plants-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
    .plant-info-table { overflow-x: auto; }
}
@media (max-width: 600px) {
    .agriculture-container { padding: 0.5rem; }
    .plants-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
    .plant-card { padding: 1rem; }
    .plant-actions { flex-wrap: wrap; gap: 0.4rem; }
    .plant-actions button, .plant-actions select { width: 100%; }
}

/* ──────────────────────────────────────────
   CRYPTO MINING
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .crypto-container { padding: 1rem; }
    .crypto-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
    .crypto-stats { flex-wrap: wrap; gap: 0.75rem; }
}
@media (max-width: 600px) {
    .crypto-container { padding: 0.5rem; }
    .crypto-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
    .crypto-card { padding: 1rem; }
    .crypto-actions { flex-direction: column; gap: 0.5rem; }
    .crypto-actions input, .crypto-actions button { width: 100%; }
    .crypto-stats { flex-direction: column; gap: 0.5rem; }
}

/* ──────────────────────────────────────────
   HOUSE / CAR ASSETS
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .assets-container { padding: 1rem; }
    .assets-tabs { flex-wrap: wrap; }
    .assets-gallery { gap: 1rem; }
}
@media (max-width: 600px) {
    .assets-container { padding: 0.5rem; }
    .asset-card { flex-direction: column; }
    .asset-card-image { width: 100%; height: 160px; }
    .gallery-slide { min-width: 100%; }
    .gallery-controls button { padding: 0.4rem 0.7rem; }
    .assets-purchase { flex-direction: column; gap: 0.5rem; }
    .assets-purchase button { width: 100%; }
}

/* ──────────────────────────────────────────
   BILLS PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .bills-container { padding: 1rem; }
    .bills-summary { flex-wrap: wrap; gap: 0.75rem; }
}
@media (max-width: 600px) {
    .bills-container { padding: 0.5rem; }
    .bills-summary { flex-direction: column; gap: 0.5rem; }
    .bill-item { flex-wrap: wrap; gap: 0.4rem; }
    .bill-item .pay-btn { width: 100%; margin-top: 0.3rem; }
    .bills-total-row { flex-direction: column; gap: 0.4rem; align-items: flex-start; }
    .pay-all-btn { width: 100%; }
}

/* ──────────────────────────────────────────
   COMPANY PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .company-container { padding: 1rem; }
    .company-header { flex-direction: column; gap: 1rem; align-items: flex-start; }
    .company-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
    .company-tabs { flex-wrap: wrap; gap: 0.4rem; }
}
@media (max-width: 600px) {
    .company-container { padding: 0.5rem; }
    .company-stats-row { grid-template-columns: 1fr !important; gap: 0.5rem; }
    .company-header { padding: 0.8rem; }
    .company-actions { flex-wrap: wrap; gap: 0.4rem; }
    .company-actions button, .company-actions a { width: 100%; }
    .employee-list { overflow-x: auto; }
}

/* ──────────────────────────────────────────
   ACHIEVEMENTS PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .achievements-container { padding: 1rem; }
    .achievements-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem; }
    .achievements-filter { flex-wrap: wrap; gap: 0.5rem; }
}
@media (max-width: 600px) {
    .achievements-container { padding: 0.5rem; }
    .achievements-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem; }
    .achievement-card { padding: 0.7rem; }
    .achievement-icon { font-size: 1.5rem; }
    .achievement-name { font-size: 0.8rem; }
    .achievement-desc { font-size: 0.72rem; }
    .achievements-filter { flex-direction: column; }
    .achievements-filter button { width: 100%; }
}

/* ──────────────────────────────────────────
   DAILY & STORY QUESTS
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .quests-container { padding: 1rem; }
    .quest-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
}
@media (max-width: 600px) {
    .quests-container { padding: 0.5rem; }
    .quest-card { padding: 0.8rem; }
    .quest-card-header { flex-wrap: wrap; gap: 0.4rem; }
    .quest-reward { flex-wrap: wrap; gap: 0.3rem; }
    .story-container { padding: 0.5rem; }
    .quest-npc { flex-direction: column; align-items: center; text-align: center; }
}

/* ──────────────────────────────────────────
   TRADING PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .trades-container { padding: 1rem; }
    .trade-form-grid { grid-template-columns: 1fr !important; gap: 1rem; }
}
@media (max-width: 600px) {
    .trades-container { padding: 0.5rem; }
    .trade-card { padding: 0.8rem; }
    .trade-header { flex-wrap: wrap; gap: 0.4rem; }
    .trade-actions { flex-direction: column; gap: 0.4rem; }
    .trade-actions button { width: 100%; }
    .trade-items-section { overflow-x: auto; }
}

/* ──────────────────────────────────────────
   SETTINGS PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .settings-container { padding: 1rem; }
    .settings-section { padding: 1rem; }
    .cosmetics-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.75rem; }
}
@media (max-width: 600px) {
    .settings-container { padding: 0.5rem; }
    .settings-section { padding: 0.8rem; }
    .settings-row { flex-direction: column; gap: 0.5rem; }
    .settings-row input, .settings-row select, .settings-row button { width: 100%; }
    .cosmetics-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.5rem; }
    .cosmetic-item { padding: 0.5rem; }
}

/* ──────────────────────────────────────────
   MAGNET FISHING
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .magnetfishing-container { padding: 1rem; }
    #mfCanvas { max-width: 100%; height: auto !important; }
    .mf-controls { flex-wrap: wrap; gap: 0.75rem; }
}
@media (max-width: 600px) {
    .magnetfishing-container { padding: 0.5rem; }
    #mfCanvas { width: 100% !important; height: 220px !important; }
    .mf-btn-cast, .mf-btn-catch { width: 100%; padding: 12px; }
    .mf-result-card { padding: 0.8rem; }
    .mf-log { font-size: 0.8rem; }
}

/* ──────────────────────────────────────────
   MAP PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .map-container { padding: 1rem; }
    #worldMapCanvas { max-width: 100%; height: 400px !important; }
    .map-controls { flex-wrap: wrap; gap: 0.5rem; }
}
@media (max-width: 600px) {
    .map-container { padding: 0.5rem; }
    #worldMapCanvas { height: 300px !important; }
    .map-controls { flex-direction: column; }
    .map-info-panel { font-size: 0.85rem; }
}

/* ──────────────────────────────────────────
   CHAT PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .chat-container { padding: 1rem; }
    .chat-messages { max-height: 55vh; }
    .chat-input-row { flex-wrap: nowrap; gap: 0.5rem; }
}
@media (max-width: 600px) {
    .chat-container { padding: 0.4rem; }
    .chat-messages { max-height: 50vh; font-size: 0.9rem; }
    .chat-input-row { gap: 0.3rem; }
    .chat-input { font-size: 0.9rem; padding: 0.4rem 0.6rem; }
    .chat-send-btn { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
    .chat-message { padding: 0.5rem 0.6rem; }
    .chat-username { font-size: 0.8rem; }
}

/* ──────────────────────────────────────────
   RADIO PAGE
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .radio-container { padding: 1rem; }
    .radio-player { padding: 1rem; }
    .playlist-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    .radio-container { padding: 0.5rem; }
    .radio-controls { flex-wrap: wrap; gap: 0.5rem; }
    .radio-controls button { flex: 1; }
    .playlist-item { flex-wrap: wrap; gap: 0.3rem; }
    .playlist-item-actions { width: 100%; }
}

/* ──────────────────────────────────────────
   BOUNTIES & REFERRALS
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .bounties-container, .referrals-container { padding: 1rem; }
    .bounties-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    .bounties-container, .referrals-container { padding: 0.5rem; }
    .bounty-card { padding: 0.8rem; }
    .bounty-actions { flex-direction: column; gap: 0.4rem; }
    .bounty-actions button, .bounty-actions input { width: 100%; }
    .referral-code-box { flex-direction: column; gap: 0.4rem; }
    .referral-code-box input, .referral-code-box button { width: 100%; }
}

/* ──────────────────────────────────────────
   WORLD EVENTS & CLAN WARS
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .events-container, .clanwars-container { padding: 1rem; }
    .events-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
    .events-container, .clanwars-container { padding: 0.5rem; }
    .event-card { padding: 0.8rem; }
    .war-card-actions { flex-direction: column; gap: 0.4rem; }
    .war-card-actions button { width: 100%; }
}

/* ──────────────────────────────────────────
   SEARCH PAGE
   ────────────────────────────────────────── */
@media (max-width: 600px) {
    .search-container { padding: 0.5rem; }
    .search-form { flex-direction: column; gap: 0.5rem; }
    .search-form input, .search-form button { width: 100%; }
    .search-results-grid { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────
   PACKS (ATTACK / DEFENSE)
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .packs-container { padding: 1rem; }
    .packs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
}
@media (max-width: 600px) {
    .packs-container { padding: 0.5rem; }
    .packs-grid { grid-template-columns: 1fr !important; gap: 0.75rem; }
    .pack-card { padding: 1rem; }
    .pack-upgrade-btn { width: 100%; }
    .hitmen-controls { flex-direction: column; gap: 0.4rem; }
    .hitmen-controls input, .hitmen-controls button { width: 100%; }
}

/* ──────────────────────────────────────────
   ANNOUNCEMENTS
   ────────────────────────────────────────── */
@media (max-width: 600px) {
    .announcement-banner { flex-wrap: wrap; gap: 0.3rem; padding: 0.5rem 0.7rem; font-size: 0.85rem; }
    .ann-title { font-size: 0.9rem; }
    .ann-badge { font-size: 0.7rem; padding: 0.15rem 0.4rem; }
}

/* ──────────────────────────────────────────
   GAME BUTTONS (global game-btn class)
   ────────────────────────────────────────── */
@media (max-width: 600px) {
    .game-btn { padding: 8px 14px; font-size: 0.85rem; }
    .game-btn i { font-size: 0.85rem; }
    .full-width { width: 100%; }
}

/* ──────────────────────────────────────────
   NOTIFICATION POPUP (header)
   ────────────────────────────────────────── */
@media (max-width: 600px) {
    .notification-popup { min-width: 94vw; max-width: 98vw; right: -1vw; }
    #friend-requests-list { max-height: 260px; }
}

/* ──────────────────────────────────────────
   PRIVATE CHAT POPUPS
   ────────────────────────────────────────── */
@media (max-width: 600px) {
    .private-chat-popup { width: 96vw !important; right: 2vw !important; bottom: 0 !important; border-radius: 12px 12px 0 0 !important; }
    .private-chat-messages { height: 45vh !important; }
    .private-chat-input-row { flex-wrap: nowrap; }
}

/* ──────────────────────────────────────────
   POPUP / MODAL OVERLAYS (game-popup)
   ────────────────────────────────────────── */
@media (max-width: 600px) {
    .game-popup-box, .success-popup, .error-popup { width: 94vw !important; max-width: 94vw !important; padding: 1.2rem !important; }
    .game-popup-box h2, .success-popup h2, .error-popup h2 { font-size: 1.1rem; }
    .game-popup-box p, .success-popup p, .error-popup p { font-size: 0.9rem; }
    .confirm-dialog { padding: 18px; }
    .confirm-dialog h3 { font-size: 1.1rem; }
    .confirm-dialog-actions { flex-direction: column; gap: 8px; }
    .confirm-dialog-actions button { width: 100%; }
}

/* ──────────────────────────────────────────
   TUTORIAL BUBBLES (global)
   ────────────────────────────────────────── */
@media (max-width: 600px) {
    .tutorial-bubble { width: 88vw !important; left: 6vw !important; right: 6vw !important; font-size: 0.88rem; padding: 0.8rem 1rem; }
    #tutorial-next { width: 100%; margin-top: 0.5rem; }
}

/* ──────────────────────────────────────────
   FOOTER
   ────────────────────────────────────────── */
@media (max-width: 600px) {
    .rpg-footer { flex-direction: column; text-align: center; gap: 0.5rem; padding: 0.7rem; font-size: 0.82rem; }
    .footer-legal { flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
}

/* ──────────────────────────────────────────
   LANDING PAGE (guest)
   ────────────────────────────────────────── */
@media (max-width: 900px) {
    .landing-hero { flex-direction: column; padding: 2rem 1rem; text-align: center; }
    .landing-stats-row { flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
    .landing-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .landing-cta-group { flex-direction: column; gap: 0.75rem; align-items: center; }
}
@media (max-width: 600px) {
    .landing-hero { padding: 1.2rem 0.7rem; }
    .landing-hero h1 { font-size: 1.8rem; }
    .landing-features-grid { grid-template-columns: 1fr !important; }
    .landing-stats-row { flex-direction: column; align-items: center; gap: 0.5rem; }
    .landing-cta-group a, .landing-cta-group button { width: 100%; text-align: center; }
}

/* ──────────────────────────────────────────
   STEELWORKS / SMELTING
   ────────────────────────────────────────── */
@media (max-width: 600px) {
    .smelting-container { padding: 0.5rem; }
    .smelting-stats { flex-direction: column; gap: 0.5rem; }
    .smelting-form { flex-direction: column; gap: 0.5rem; }
    .smelting-form input, .smelting-form select, .smelting-form button { width: 100%; }
}

/* ──────────────────────────────────────────
   GENERAL UTILITY: overflow-x for tables
   ────────────────────────────────────────── */
@media (max-width: 600px) {
    .table-responsive-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-responsive-wrap table { min-width: 480px; }
}

/* ──────────────────────────────────────────
   ATTACK POPUP (Profile page)
   ────────────────────────────────────────── */
@media (max-width: 600px) {
    .attack-popup {
        padding: 1rem !important;
        align-items: flex-end !important;
    }
    .attack-popup-content {
        width: 95vw !important;
        max-width: 95vw !important;
        padding: 1.2rem !important;
        border-radius: 16px 16px 0 0 !important;
    }
}