/* 
 * Zorlian-X Main CSS
 * Mobile-first stylesheet - no media queries needed
 * 
 * Design principles:
 * - Touch targets: minimum 44x44px
 * - Larger fonts for readability
 * - Drawer-based navigation
 * - Full-screen modals
 * - Bottom navigation
 * - No hover states (touch only)
 */

/* ===========================================
   CSS VARIABLES - Mobile Optimized
   =========================================== */
:root {
    /* Colors - Same as desktop for consistency */
    --primary-color: #00d4ff;
    --secondary-color: #ff6b00;
    --background-dark: #0a0a1a;
    --bg-dark: #0a0a1a;  /* Alias for legacy/compact usage */
    --background-medium: #141428;
    --background-light: #1e1e3c;
    --text-primary: #ffffff;
    --text-secondary: #b0b0c0;
    --success-color: #4CAF50;
    --warning-color: #ff9800;
    --danger-color: #f44336;
    --gold-color: #ffd700;
    
    /* Player/game theme colors (matching main.css) */
    --player-primary: #00ffff;
    --player-secondary: #00bfff;
    --player-accent: #00d4ff;
    
    /* Mobile-specific sizing */
    --touch-target-min: 44px;
    --font-size-base: 16px;
    --font-size-large: 18px;
    --font-size-xlarge: 22px;
    --font-size-title: 28px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    
    /* Safe areas for notched devices */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ===========================================
   BASE STYLES
   =========================================== */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: var(--font-size-base);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Exo 2', 'Segoe UI', sans-serif;
    background: var(--background-dark);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
    overflow-x: hidden;
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
}

/* Prevent pull-to-refresh on mobile */
body {
    overscroll-behavior-y: contain;
}

body.shipyard-scroll-lock {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    scrollbar-width: none;
}

body.shipyard-scroll-lock::-webkit-scrollbar {
    display: none;
}

/* ===========================================
   TYPOGRAPHY - Mobile Optimized
   =========================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Orbitron', monospace;
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.2;
}

h1 { font-size: var(--font-size-title); }
h2 { font-size: var(--font-size-xlarge); }
h3 { font-size: var(--font-size-large); }

p {
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.5;
}

/* ===========================================
   BUTTONS - Touch Friendly
   =========================================== */
button, .btn {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    font-family: 'Orbitron', monospace;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: transform 0.1s ease, opacity 0.1s ease;
    -webkit-user-select: none;
    user-select: none;
}

button:active, .btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

button:disabled, .btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #0099cc);
    color: var(--background-dark);
}

.btn-secondary {
    background: var(--background-light);
    color: var(--text-primary);
    border: 1px solid var(--primary-color);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #c62828);
    color: white;
}

.btn-success {
    background: linear-gradient(135deg, var(--success-color), #388E3C);
    color: white;
}

.btn-full-width {
    width: 100%;
}

/* Notification dot for menu buttons (green=action available, red=response) */
.menu-notify-dot {
    display: none;
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4caf50;
    border: 2px solid var(--background-dark, #0a0e1a);
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.6);
    animation: dot-pulse 2s ease-in-out infinite;
}
.menu-notify-dot.red {
    background: #f44336;
    box-shadow: 0 0 6px rgba(244, 67, 54, 0.6);
}
.menu-notify-dot.active {
    display: block;
}
@keyframes dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.85); }
}

/* ===========================================
   SCREEN CONTAINERS
   =========================================== */
.screen {
    display: none;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--spacing-md);
    padding-left: calc(var(--spacing-md) + var(--safe-area-left));
    padding-right: calc(var(--spacing-md) + var(--safe-area-right));
}

.screen.active {
    display: flex;
    flex-direction: column;
}

#game-container {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ===========================================
   AUTH LOADING SCREEN
   =========================================== */
.auth-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--background-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    z-index: 9999;
}

.auth-loading-emblem img {
    width: 360px;
    height: 360px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}

.auth-loading-text {
    text-align: center;
    margin-top: var(--spacing-lg);
}

.auth-loading-title {
    font-size: var(--font-size-xlarge);
    color: var(--primary-color);
}

.auth-loading-subtitle {
    color: var(--text-secondary);
}

.auth-loading-progress {
    width: 100%;
    max-width: 300px;
    margin-top: var(--spacing-lg);
}

.auth-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.auth-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #d4af37);
    width: 0%;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
}

.auth-progress-step {
    color: #8ecae6;
    font-size: 0.85rem;
    margin-top: 12px;
    opacity: 0.7;
    text-align: center;
}

/* ===========================================
   WELCOME GATE SCREEN
   =========================================== */
#welcome-screen {
    justify-content: center;
    align-items: center;
    background: radial-gradient(ellipse at 50% 30%, rgba(0, 50, 80, 0.4) 0%, transparent 70%),
                var(--background-dark);
}

.welcome-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 420px;
    width: 100%;
    padding: var(--spacing-lg);
}

.welcome-emblem {
    width: 120px;
    height: 120px;
    margin-bottom: var(--spacing-lg);
    animation: emblemFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.3));
}

.welcome-emblem img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes emblemFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.welcome-title {
    font-family: 'Orbitron', monospace;
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--primary-color);
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.5),
                 0 0 60px rgba(0, 212, 255, 0.2);
    margin-bottom: var(--spacing-lg);
    letter-spacing: 3px;
}

.welcome-text {
    margin-bottom: var(--spacing-xl);
}

.welcome-headline {
    font-family: 'Orbitron', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--spacing-md);
}

.welcome-subtext {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.welcome-subtext-accent {
    color: var(--primary-color);
    font-weight: 600;
    margin-top: var(--spacing-md);
    font-size: 1.05rem;
}

.welcome-cta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.welcome-cta .btn {
    font-size: 1rem;
    padding: 14px 20px;
}

.welcome-cta .btn-primary {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.welcome-divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    opacity: 0.6;
    margin: var(--spacing-xs) 0;
}

.welcome-divider::before,
.welcome-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.btn-google-tertiary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    gap: 10px;
}

.btn-google-tertiary:active {
    background: rgba(255, 255, 255, 0.05);
}

/* Password input with toggle button */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    padding-right: 48px;
}

.toggle-password-btn {
    position: absolute;
    right: 4px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    opacity: 0.5;
    transition: opacity 0.2s;
    line-height: 1;
}

.toggle-password-btn:active,
.toggle-password-btn.showing {
    opacity: 1;
}

/* Password hints hidden until field is focused */
.password-group .password-feedback {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.password-group:focus-within .password-feedback {
    max-height: 50px;
    opacity: 1;
}

/* ===========================================
   MAIN MENU - Mobile Layout
   =========================================== */
#main-menu {
    display: none;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    padding: var(--spacing-md);
    padding-bottom: 120px; /* Space for floating buttons in lower right */
}

#main-menu.active {
    display: flex;
}

/* Hide the full dashboard on mobile */
#main-dashboard {
    display: none !important;
}

/* ===========================================
   MOBILE CURRENCY WIDGET - Right side of menu
   =========================================== */
/* Currency + Chat anchor container */
#currency-chat-anchor {
    position: absolute;
    top: 0;
    right: calc(-50vw + 50% + 15px); /* Push to 15px from viewport right edge */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    z-index: 50;
}

#mobile-currency-widget {
    background: rgba(10, 20, 30, 0.9);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Labels hidden by default, shown when expanded */
.mcw-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    margin-right: 0;
}

#mobile-currency-widget.mcw-expanded .mcw-label {
    max-width: 120px;
    opacity: 1;
    margin-right: 6px;
}

/* When expanded, show full numbers instead of abbreviated */
#mobile-currency-widget.mcw-expanded .mcw-value {
    min-width: 60px;
    text-align: right;
}

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

.mcw-icon {
    font-size: 14px;
    width: 18px;
    text-align: center;
}

.mcw-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #00ffff;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

/* Menu content: centered with max width */
#main-menu .menu-content {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    max-width: 100%;
    width: 100%;
    padding: 0;
}

/* Header section with title */
#main-menu .game-title {
    font-size: var(--font-size-title);
    color: var(--primary-color);
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    margin-bottom: var(--spacing-xs);
    text-align: center;
}

#main-menu .game-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

/* Cloud Sync Status Indicator */
.sync-status {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    padding: 4px 12px;
    margin-bottom: var(--spacing-md);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.3);
}

.sync-status.synced {
    color: #4ade80;
}

.sync-status.offline {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
}

.sync-status.error {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

/* Tablet/Mobile timer bar - shown inline under title */
.tablet-timer-bar {
    display: flex !important;
    justify-content: center;
    gap: var(--spacing-lg);
    font-size: 14px;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 212, 255, 0.1);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.tablet-timer-bar span {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Active Booster Indicator Bar */
.booster-indicator-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 14px;
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.15), rgba(255, 215, 0, 0.1));
    border-radius: var(--radius-md);
    border: 1px solid rgba(243, 156, 18, 0.4);
    animation: boosterGlow 2s ease-in-out infinite;
}

@keyframes boosterGlow {
    0%, 100% {
        box-shadow: 0 0 6px rgba(243, 156, 18, 0.2);
    }
    50% {
        box-shadow: 0 0 14px rgba(243, 156, 18, 0.4);
    }
}

.booster-indicator-icon {
    font-size: 1.1rem;
}

.booster-indicator-label {
    color: #f39c12;
    font-weight: 700;
}

.booster-indicator-timer {
    color: #ffd700;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ========================================
   Commander Level Bar — Main Menu
   ======================================== */
.cmd-level-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(10, 20, 40, 0.85);
    border: 1px solid rgba(0, 191, 255, 0.25);
    border-radius: 8px;
    margin-bottom: 10px;
}

.cmd-level-info {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.cmd-level-label {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
}

.cmd-level-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

.cmd-rank-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}

.cmd-xp-bar-wrap {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cmd-xp-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.cmd-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #00b4d8, #00ffff);
    border-radius: 3px;
    transition: width 0.5s ease;
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.3);
}

.cmd-xp-text {
    font-family: 'Exo 2', sans-serif;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
}

/* Rank rainbow animation (shared across all rank displays) */
.cmd-rank-rainbow {
    background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #8800ff, #ff0000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: cmdRainbow 3s linear infinite;
}

@keyframes cmdRainbow {
    to { background-position: 200% center; }
}

/* Rank badge (used in leaderboards) */
.cmd-rank-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: 9px;
    font-weight: 600;
}

/* ========================================
   Commander Level-Up Celebration Modal
   ======================================== */
.cmd-levelup-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cmd-levelup-modal.active {
    opacity: 1;
}

.cmd-levelup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
}

.cmd-levelup-content {
    position: relative;
    background: linear-gradient(135deg, #0a1628 0%, #1a2a4a 50%, #0a1628 100%);
    border: 2px solid #00ffff;
    border-radius: 16px;
    padding: 30px 24px;
    max-width: 320px;
    width: 90%;
    text-align: center;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.3), inset 0 0 40px rgba(0, 255, 255, 0.05);
    animation: cmdLevelUpPulse 1.5s ease-in-out infinite;
}

@keyframes cmdLevelUpPulse {
    0%, 100% {
        box-shadow: 0 0 40px rgba(0, 255, 255, 0.3), inset 0 0 40px rgba(0, 255, 255, 0.05);
    }
    50% {
        box-shadow: 0 0 60px rgba(0, 255, 255, 0.5), inset 0 0 40px rgba(0, 255, 255, 0.1);
    }
}

.cmd-levelup-stars {
    font-size: 32px;
    margin-bottom: 8px;
    animation: cmdStarBounce 0.6s ease-out;
}

@keyframes cmdStarBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.cmd-levelup-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    margin-bottom: 16px;
    letter-spacing: 3px;
}

.cmd-levelup-level-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}

.cmd-levelup-level-label {
    font-family: 'Exo 2', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
}

.cmd-levelup-level-number {
    font-family: 'Orbitron', sans-serif;
    font-size: 48px;
    font-weight: 700;
    color: #00ffff;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
    line-height: 1;
}

.cmd-levelup-rank-display {
    margin-bottom: 20px;
}

.cmd-levelup-rank {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.cmd-levelup-rewards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.cmd-reward-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Exo 2', sans-serif;
    font-size: 14px;
    color: #e0e0e0;
    padding: 4px 12px;
    background: rgba(0, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(0, 255, 255, 0.1);
}

.cmd-reward-icon {
    font-size: 16px;
}

.cmd-levelup-milestone {
    margin-bottom: 16px;
}

.cmd-milestone-header {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    color: #ffd700;
    margin-bottom: 6px;
}

.cmd-milestone-desc {
    font-family: 'Exo 2', sans-serif;
    font-size: 13px;
    color: #a855f7;
    padding: 6px 12px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
}

.cmd-levelup-close-btn {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0a1628;
    background: linear-gradient(135deg, #00d4ff, #00ffff);
    border: none;
    border-radius: 8px;
    padding: 10px 32px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.cmd-levelup-close-btn:active {
    transform: scale(0.95);
}

/* ========================================
   Commander Token Claim Buttons (Settings)
   ======================================== */
.cmd-token-claims {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cmd-claim-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 8px;
}

.cmd-claim-label {
    font-family: 'Exo 2', sans-serif;
    font-size: 13px;
    color: #e0e0e0;
}

.cmd-claim-btn {
    padding: 6px 16px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 6px;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

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

.cmd-claim-btn:disabled,
.cmd-claim-btn.cmd-claimed {
    background: rgba(100, 100, 100, 0.3);
    border-color: rgba(100, 100, 100, 0.3);
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
}

/* ========================================
   Outpost Mulligan Button
   ======================================== */
.od-mulligan-btn {
    flex: 0 0 auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.4), rgba(124, 58, 237, 0.4));
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: var(--radius-sm);
    color: #d8b4fe;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.od-mulligan-btn:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.6), rgba(124, 58, 237, 0.6));
}

.od-mulligan-btn:disabled {
    background: rgba(100, 100, 100, 0.3);
    border-color: rgba(100, 100, 100, 0.3);
    color: rgba(255, 255, 255, 0.3);
    cursor: default;
}

/* ========================================
   Free Arena Blitz Button
   ======================================== */
.ar-free-blitz-btn {
    background: linear-gradient(135deg, #ffd700, #ff9800) !important;
    border-color: rgba(255, 215, 0, 0.6) !important;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.3);
}

.ar-free-blitz-btn:disabled {
    background: rgba(100, 100, 100, 0.3) !important;
    border-color: rgba(100, 100, 100, 0.3) !important;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: default;
}
#main-menu .menu-row,
#main-menu .menu-row-2,
#main-menu .menu-row-3,
#main-menu .menu-button-row {
    display: contents; /* Makes children act as if parent doesn't exist */
}

#main-menu .menu-divider {
    display: none;
}

/* Make menu-buttons use flex-wrap for remaining visible items */
#main-menu .menu-buttons {
    position: relative; /* Anchor for currency widget */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

/* Base button style for menu */
#main-menu .btn {
    min-height: var(--touch-target-min);
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

/* Full width buttons */
#main-menu .btn-full,
#main-menu .btn.btn-full {
    width: 100%;
}

/* GAME QUESTS CARD */
#game-quests-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;
    order: 2;
    width: 100%;
    min-height: 50px;
    font-size: 0.95rem;
    padding: 12px 15px;
    background: rgba(255, 165, 0, 0.15);
    border: 1px solid rgba(255, 165, 0, 0.4);
    color: #ffa500;
    text-shadow: 0 0 8px rgba(255, 165, 0, 0.5);
}

/* WEEKLY EVENT CARD */
#weekly-event-btn {
    justify-content: center;
    align-items: center;
    order: 3;
    width: 100%;
    min-height: 50px;
    font-size: 0.95rem;
    padding: 12px 15px;
    background: rgba(138, 43, 226, 0.15);
    border: 1px solid rgba(138, 43, 226, 0.4);
    color: #da70d6;
    text-shadow: 0 0 8px rgba(218, 112, 214, 0.5);
}

/* OUTPOST RUSH CARD - TOP PRIORITY */
#outpost-defense-btn {
    justify-content: center;
    align-items: center;
    order: 1;
    width: 100%;
    min-height: 50px;
    font-size: 0.9rem;
    padding: 12px 15px;
    background: linear-gradient(135deg, rgba(10, 30, 80, 0.9), rgba(20, 50, 120, 0.85));
    border: 2px solid #1a5fa8;
    color: #e0e8ff;
    text-shadow: 0 0 6px rgba(100, 160, 255, 0.4);
    font-weight: 700;
}

/* FRIENDS button */
#friends-btn {
    order: 4;
    flex: 1 1 calc(50% - 4px);
}

/* Alliance invite badge */
.alliance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    margin-left: 6px;
    vertical-align: middle;
}

.al-request-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.16), 0 0 10px rgba(239,68,68,0.35);
}

/* ALLIANCE button — navy blue background with gold text, emblem icon */
#alliance-btn {
    order: 4;
    flex: 1 1 calc(50% - 4px);
    background: linear-gradient(180deg, #1b2d5a 0%, #152347 40%, #1a2c55 60%, #0f1c3d 100%) !important;
    border: 2px solid #c8a23a !important;
    color: #d4a843 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    font-weight: 800 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.alliance-btn-emblem {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 4px;
    margin-top: -2px;
}

/* COMMS button - HIDDEN from menu, only shows as floating button when has-messages */
#comms-btn {
    display: none !important;
}

/* COMMAND CONSOLE button - prominent at bottom */
#command-console-btn {
    display: flex !important;
    justify-content: center;
    align-items: center;
    order: 5;
    width: 100%;
    min-height: 50px;
    font-size: 1rem;
    background: linear-gradient(135deg, rgba(0, 100, 180, 0.8), rgba(0, 150, 220, 0.6));
    border: 2px solid #00bfff;
    margin-top: 5px;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(0, 191, 255, 0.5);
    box-shadow: 0 2px 10px rgba(0, 191, 255, 0.3);
}

/* Hide these on mobile - they go in Command Console */
#combat-training-btn,
#start-game-btn,
#arena-btn,
#quests-btn,
#daily-checkin-btn,
#fleet-management-btn,
#shipyard-btn,
#inventory-btn,
#merchant-btn,
#help-btn,
#settings-btn,
#outpost-leaderboard-btn {
    display: none !important;
}

/* ===========================================
   FLOATING ACTION BUTTONS - Bottom Right Stack
   =========================================== */
.floating-action-stack {
    position: fixed;
    bottom: calc(var(--spacing-md) + var(--safe-area-bottom));
    right: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    z-index: 100;
}

/* MISSION STATUS floating button - visibility controlled by JS */
#mission-status-btn {
    /* Position as floating button when visible */
    position: fixed !important;
    bottom: 15px !important;
    right: 15px !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    min-width: auto;
    min-height: auto;
    padding: 10px 12px !important;
    font-size: 0.75rem !important;
    border-radius: 20px;
    z-index: 100;
    /* Blue theme - matching desktop */
    background: linear-gradient(135deg, rgba(0, 100, 150, 0.8), rgba(0, 150, 200, 0.6));
    border: 1px solid #00bfff;
    color: #00ffff;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    box-shadow: 0 2px 10px rgba(0, 191, 255, 0.3);
    /* Note: display is controlled by JS - don't override with !important */
}

/* When rewards are available, add green glow */
#mission-status-btn.mission-rewards-available {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.8), rgba(32, 201, 151, 0.6));
    border-color: #28a745;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
    box-shadow: 0 2px 10px rgba(40, 167, 69, 0.4);
    animation: rewardPulse 2s ease-in-out infinite;
}

@keyframes rewardPulse {
    0%, 100% { box-shadow: 0 2px 10px rgba(40, 167, 69, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(40, 167, 69, 0.7); }
}

/* COMMS floating button - only visible when has messages, positioned top-left */
#comms-btn.has-messages {
    display: flex !important;
    position: fixed !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    left: 15px !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
    min-width: auto;
    min-height: auto;
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
    border-radius: 20px;
    /* Green theme - draws attention */
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.9), rgba(32, 201, 151, 0.7)) !important;
    border: 1px solid #28a745 !important;
    color: #ffffff;
    z-index: 100;
    animation: rewardPulse 2s ease-in-out infinite;
    box-shadow: 0 2px 10px rgba(40, 167, 69, 0.4);
}

#comms-btn .comms-icon {
    font-size: 14px;
}

#comms-btn .comms-badge {
    display: none; /* Badge already indicated by button visibility */
}

/* ===========================================
   TRANSMISSION OVERLAY - Mobile Layout
   Image on left, message box below (not overlaid)
   Using !important because outpost-defense.css loads after mobile.css
   =========================================== */
.transmission-officer-container {
    max-width: 95% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.transmission-officer-image {
    max-height: 25vh !important;
    width: auto !important;
    max-width: 35% !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.transmission-message-box {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: var(--spacing-md) !important;
    padding: 15px 18px !important;
}

.transmission-message-text {
    font-family: 'Exo 2', 'Share Tech Mono', monospace !important;
    font-size: 0.95rem !important;
    min-height: 60px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.3px !important;
}

.transmission-message-text .comms-tight-list {
    line-height: 1.3 !important;
    display: block;
    margin: 4px 0;
}

/* ===========================================
   COMMAND CONSOLE DRAWER - Mobile Optimized
   =========================================== */
.drawer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.drawer-overlay.open {
    display: block;
}

.command-console-drawer {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(20, 20, 40, 0.98);
    border-top: 2px solid var(--primary-color);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    padding: var(--spacing-md);
    padding-bottom: 50px; /* Extra padding for fade gradient */
    z-index: 1000;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: slideUp 0.3s ease;
    scrollbar-width: none; /* Firefox - hide scrollbar */
    -ms-overflow-style: none; /* IE/Edge - hide scrollbar */
}

/* Bottom fade gradient - scroll affordance */
.command-console-drawer::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom, rgba(20, 20, 40, 0), rgba(20, 20, 40, 0.95));
    pointer-events: none;
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.command-console-drawer.open::after {
    opacity: 1;
}

/* Hide scrollbar for Chrome/Safari/Opera */
.command-console-drawer::-webkit-scrollbar {
    display: none;
}

.command-console-drawer.open {
    display: block;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Drawer header */
.command-console-drawer .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    position: sticky;
    top: 0;
    background: rgba(20, 20, 40, 0.98);
    z-index: 1;
    margin-top: calc(-1 * var(--spacing-md));
    padding-top: var(--spacing-md);
}

.command-console-drawer .drawer-title {
    font-family: 'Orbitron', sans-serif;
    font-size: var(--font-size-large);
    color: var(--primary-color);
}

.command-console-drawer .drawer-close {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    font-size: 24px;
    color: var(--primary-color);
    cursor: pointer;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Drawer grid - 3 columns for icons */
.command-console-drawer .drawer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

/* Drawer buttons */
.command-console-drawer .drawer-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-sm);
    min-height: 80px;
    font-size: 13px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-md);
    color: white;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.1s ease;
}

.command-console-drawer .drawer-btn:active {
    background: rgba(0, 212, 255, 0.3);
    transform: scale(0.95);
}

/* Primary drawer buttons (Training, Campaign, Arena) - more prominent */
.command-console-drawer .drawer-btn.drawer-primary {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 128, 255, 0.3) 100%);
    border: 2px solid rgba(0, 212, 255, 0.6);
    min-height: 90px;
    font-weight: 600;
}

.command-console-drawer .drawer-btn.drawer-primary .icon {
    font-size: 28px;
}

.command-console-drawer .drawer-btn .icon {
    font-size: 24px;
    margin-bottom: var(--spacing-xs);
}

.command-console-drawer .drawer-btn span:last-child {
    text-align: center;
    line-height: 1.2;
}

/* Badge indicator for drawer buttons (e.g., help button bug updates) */
.command-console-drawer .drawer-btn {
    position: relative;
}

.drawer-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    background: #ff4444;
    border-radius: 50%;
    border: 2px solid rgba(10, 14, 20, 0.9);
    box-shadow: 0 0 6px rgba(255, 68, 68, 0.6);
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 68, 68, 0.6); }
    50% { box-shadow: 0 0 12px rgba(255, 68, 68, 0.9); }
}

/* ===========================================
   MODALS - Full Screen on Mobile
   =========================================== */
.ltv-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    align-items: center;
    justify-content: center;
    padding: max(18px, var(--safe-area-top)) max(14px, var(--safe-area-right)) max(18px, var(--safe-area-bottom)) max(14px, var(--safe-area-left));
    background: rgba(2, 6, 23, 0.86);
}

.ltv-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 36%, rgba(0, 212, 255, 0.18), transparent 44%),
        rgba(0, 0, 0, 0.48);
}

.ltv-stage {
    position: relative;
    width: min(94vw, 860px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.ltv-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 212, 255, 0.62);
    border-radius: 8px;
    background: #020617;
    box-shadow: 0 0 28px rgba(0, 212, 255, 0.28), 0 24px 70px rgba(0, 0, 0, 0.72);
    transform-origin: center;
}

.ltv-overlay.ltv-open .ltv-frame {
    animation: ltvZoomOpen 0.34s ease-out both;
}

.ltv-signal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 8px 12px;
    gap: 12px;
    color: #dff9ff;
    font-family: 'Orbitron', 'Exo 2', sans-serif;
    font-size: 13px;
    letter-spacing: 0;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.18), rgba(255, 107, 0, 0.16));
    border-bottom: 1px solid rgba(0, 212, 255, 0.35);
}

.ltv-live-chip {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 4px;
    color: #06111a;
    background: #ffb020;
    font-size: 11px;
    font-weight: 800;
}

.ltv-video {
    display: block;
    width: 100%;
    max-height: min(72vh, 620px);
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
}

.ltv-start-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    min-width: 210px;
    max-width: min(82vw, 320px);
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid rgba(0, 212, 255, 0.72);
    border-radius: 6px;
    color: #06111a;
    background: linear-gradient(135deg, #00d4ff, #ffd166);
    font-family: 'Orbitron', 'Exo 2', sans-serif;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
}

.ltv-start-btn:active {
    transform: translate(-50%, -50%) scale(0.98);
}

.ltv-start-btn:disabled {
    transform: translate(-50%, -50%);
}

.join-alliance-video-status {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 68px;
    min-height: 0;
    color: #ffd166;
    font: 800 13px 'Exo 2', sans-serif;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.ltv-later-btn {
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    color: #b8ecff;
    background: transparent;
    font: 700 14px 'Exo 2', sans-serif;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.join-alliance-video-actions {
    width: min(100%, 640px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.join-alliance-video-action-btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.15;
    white-space: normal;
}

.ltv-overlay.ltv-completing .ltv-later-btn,
.ltv-overlay.ltv-closing .ltv-later-btn,
.ltv-overlay.ltv-completing .ltv-start-btn,
.ltv-overlay.ltv-closing .ltv-start-btn,
.ltv-overlay.ltv-completing .join-alliance-video-status,
.ltv-overlay.ltv-closing .join-alliance-video-status,
.ltv-overlay.ltv-completing .join-alliance-video-actions,
.ltv-overlay.ltv-closing .join-alliance-video-actions {
    display: none !important;
}

.ltv-overlay.ltv-closing .ltv-frame {
    animation: ltvCornerClose 0.82s cubic-bezier(0.7, 0, 0.22, 1) forwards;
}

.ltv-overlay.ltv-closing .ltv-backdrop {
    animation: ltvBackdropFade 0.82s ease forwards;
}

@keyframes ltvCornerClose {
    0% {
        transform: scale(1);
        clip-path: inset(0 0 0 0 round 8px);
        opacity: 1;
    }
    68% {
        transform: scale(0.34);
        clip-path: inset(18% 18% 18% 18% round 8px);
        opacity: 1;
    }
    100% {
        transform: scale(0.02);
        clip-path: inset(50% 50% 50% 50% round 8px);
        opacity: 0;
    }
}

@keyframes ltvBackdropFade {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes ltvZoomOpen {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 520px) {
    .ltv-stage {
        width: 96vw;
    }

    .ltv-signal-bar {
        font-size: 12px;
    }

    .join-alliance-video-actions {
        grid-template-columns: 1fr;
    }

    .join-alliance-video-status {
        left: 10px;
        right: 10px;
        bottom: 60px;
        font-size: 12px;
    }
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--background-dark);
    z-index: 2000;
    display: none;
    flex-direction: column;
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
}

.modal.active {
    display: flex;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--background-light);
    flex-shrink: 0;
}

.modal-close {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
}

.modal-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--background-light);
    flex-shrink: 0;
}

/* ===========================================
   FORMS - Mobile Optimized
   =========================================== */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: inherit;
    background: var(--background-light);
    border: 1px solid var(--background-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    -webkit-appearance: none;
    appearance: none;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

/* ===========================================
   CARDS
   =========================================== */
.card {
    background: var(--background-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.card-title {
    font-size: var(--font-size-large);
    margin: 0;
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */
.text-center { text-align: center; }
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--text-secondary); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-danger { color: var(--danger-color); }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.hidden { display: none !important; }

/* ===========================================
   GAME CANVAS - Full Screen
   =========================================== */
#game-screen {
    padding: 0;
}

#game-canvas {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: block;
    touch-action: none;
}

/* ===========================================
   FLEET MANAGEMENT - Mobile Cards
   =========================================== */
.ship-card {
    background: var(--background-medium);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.ship-card-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.ship-card-image {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.ship-card-info {
    flex: 1;
}

.ship-card-name {
    font-family: 'Orbitron', monospace;
    font-size: var(--font-size-large);
    color: var(--primary-color);
}

.ship-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.ship-stat {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.ship-stat-label {
    color: var(--text-secondary);
}

.ship-stat-value {
    color: var(--text-primary);
}

/* ===========================================
   LOADING STATES
   =========================================== */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--background-light);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===========================================
   NOTIFICATIONS / TOASTS
   =========================================== */
.notification {
    position: fixed;
    top: calc(var(--spacing-md) + var(--safe-area-top));
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    max-width: 400px;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: var(--background-medium);
    color: var(--text-primary);
    border-left: 4px solid var(--primary-color);
    z-index: 3000;
    animation: slideIn 0.3s ease;
}

.notification.success { border-left-color: var(--success-color); }
.notification.warning { border-left-color: var(--warning-color); }
.notification.error { border-left-color: var(--danger-color); }

@keyframes slideIn {
    from { transform: translate(-50%, -100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* ===========================================
   SHIP SELECTION SCREEN - Mobile Redesign
   =========================================== */

/* Main ship selection layout */
#ship-selection .ship-selection-content {
    padding: var(--spacing-md);
    padding-bottom: 100px; /* Room for action buttons */
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

#ship-selection .ship-selection-content h2 {
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

#ship-selection .ship-selection-content p {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-md);
}

/* Selection Counter */
.ship-selection-counter {
    text-align: center;
    font-size: 1.3rem;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    color: var(--accent-color);
    margin: 0 auto var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: rgba(0, 255, 255, 0.1);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-md);
    display: inline-block;
    width: auto;
    max-width: 200px;
}

/* Center the counter in parent */
.ship-selection-header {
    text-align: center;
}

.ship-selection-counter #selection-count {
    color: var(--success-color);
}

/* Available Ships Container */
.available-ships-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Allow shrinking */
}

.available-ships-container h3 {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

/* Available Ships Header with Auto-Fill */
.available-ships-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    padding: 0 var(--spacing-sm);
}

.available-ships-header h3 {
    margin-bottom: 0;
}

.btn-auto-fill {
    padding: 6px 12px;
    font-size: 0.75rem;
    background: linear-gradient(135deg, #20b2aa, #1a8a7a);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-auto-fill:hover,
.btn-auto-fill:active {
    background: linear-gradient(135deg, #2ac9b5, var(--accent-secondary));
    transform: scale(1.05);
}

.btn-auto-fill:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Low CP Warning Badge */
.low-cp-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 152, 0, 0.2);
    border: 1px solid var(--warning-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    margin: var(--spacing-sm);
    color: var(--warning-color);
    font-size: 0.8rem;
}

.low-cp-warning i {
    font-size: 1rem;
}

/* Ship Carousel Row with Scroll Arrows */
.ships-carousel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Ship Scroll Arrow Buttons */
.ships-scroll-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 60px;
    background: linear-gradient(145deg, rgba(0, 191, 255, 0.2), rgba(0, 100, 150, 0.3));
    border: 2px solid rgba(0, 191, 255, 0.4);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ships-scroll-btn:hover:not(:disabled) {
    background: linear-gradient(145deg, rgba(0, 191, 255, 0.4), rgba(0, 100, 150, 0.5));
    border-color: rgba(0, 191, 255, 0.8);
    color: #fff;
}

.ships-scroll-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Highlighted state when more content exists */
.ships-scroll-btn.has-more {
    background: linear-gradient(145deg, rgba(0, 191, 255, 0.4), rgba(0, 150, 200, 0.5));
    border-color: rgba(0, 191, 255, 0.8);
    color: #00d4ff;
    animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% { 
        box-shadow: 0 0 8px rgba(0, 191, 255, 0.4);
    }
    50% { 
        box-shadow: 0 0 16px rgba(0, 191, 255, 0.7);
    }
}

/* Ship Carousel Wrapper */
.ship-carousel-wrapper {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-sm);
    scrollbar-width: none;
}

.ship-carousel-wrapper::-webkit-scrollbar {
    display: none;
}

/* Compact Ship Card for Carousel */
.ship-card-carousel {
    flex: 0 0 auto;
    width: 140px;
    min-height: 160px;
    background: linear-gradient(145deg, rgba(30, 40, 60, 0.9), rgba(20, 30, 50, 0.9));
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.ship-card-carousel:active {
    transform: scale(0.95);
}

/* Ship image in carousel card */
.carousel-card-image {
    width: 90px;
    height: 90px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(0, 191, 255, 0.3));
}

/* Pilot badge in corner */
.carousel-pilot-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.9rem;
    background: rgba(59, 130, 246, 0.8);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card info section */
.carousel-card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

/* Ship name */
.carousel-ship-name {
    font-size: 0.75rem;
    font-family: 'Orbitron', monospace;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* CP display */
.carousel-ship-cp {
    font-size: 0.9rem;
    color: #4ade80;
    font-family: 'Share Tech Mono', monospace;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(74, 222, 128, 0.5);
}

/* Legacy support */
.ship-card-carousel .ship-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.ship-card-carousel .ship-name {
    font-size: 0.75rem;
    font-family: 'Orbitron', monospace;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Selection toggle circle — always visible in upper-left */
.carousel-select-circle {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(148, 163, 184, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgba(148, 163, 184, 0.5);
    z-index: 2;
    cursor: pointer;
    transition: all 0.15s ease;
    background: rgba(0, 0, 0, 0.4);
    line-height: 1;
}

.carousel-select-circle:active {
    transform: scale(1.2);
}

/* Selected state - green border + filled check circle */
.ship-card-carousel.selected {
    border-color: var(--success-color);
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.4);
}

.ship-card-carousel.selected .carousel-select-circle {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
    font-size: 13px;
    font-weight: bold;
}

.ship-card-carousel.selection-disabled {
    opacity: 0.48;
}

.ship-card-carousel.selection-disabled .carousel-select-circle {
    border-color: rgba(239, 68, 68, 0.75);
    color: #ef4444;
    cursor: not-allowed;
}

/* Pilot tag below carousel card */
.carousel-pilot-tag {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 0 0;
    margin-top: 2px;
    border-top: 1px solid rgba(59, 130, 246, 0.25);
}

.carousel-pilot-tag-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.carousel-pilot-tag-multi {
    margin-top: 0;
    padding-top: 2px;
    border-top: 0;
}

.carousel-pilot-tag-stack .carousel-pilot-tag-multi:first-child {
    padding-top: 4px;
    border-top: 1px solid rgba(59, 130, 246, 0.25);
}

.carousel-pilot-tag-icon {
    font-size: 0.7rem;
    line-height: 1;
}

.carousel-pilot-tag-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(59, 130, 246, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ship Selection Actions */
.ship-selection-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-md) + var(--safe-area-bottom));
    background: linear-gradient(to bottom, transparent, rgba(10, 15, 30, 0.95) 30%);
    display: flex;
    gap: var(--spacing-sm);
    z-index: 100;
}

.ship-selection-actions button {
    flex: 1;
    min-height: 56px;
}

/* ===========================================
   SHIP PREVIEW BOTTOM SHEET
   =========================================== */

.ship-preview-sheet {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000; /* Above tutorial overlay (9998) */
}

.ship-preview-sheet.open {
    display: block;
}

.ship-preview-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.ship-preview-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 80vh;
    background: linear-gradient(145deg, #1a1f3a, #0d1220);
    border-top: 2px solid var(--primary-color);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-md) + var(--safe-area-bottom));
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Preview Header */
.ship-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.ship-preview-header h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    color: var(--text-primary);
    margin: 0;
}

.ship-preview-level {
    background: var(--primary-gradient);
    color: white;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Stars */
.ship-preview-stars {
    font-size: 1rem;
    letter-spacing: 2px;
    margin-bottom: var(--spacing-sm);
}

.ship-preview-stars .gold-stars {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* Level with inline stars */
.ship-preview-level .gold-stars {
    color: #ffd700;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
    margin-left: 4px;
}

/* Pilot Section - Simplified single line */
.ship-preview-pilot {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.pilot-name-full {
    font-family: 'Orbitron', monospace;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Stats Section */
.ship-preview-stats {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.stats-header {
    font-size: 0.7rem;
    color: var(--primary-color);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-sm);
}

.stat-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-row:last-child {
    border-bottom: none;
}

/* Left: Stat label */
.stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    width: 70px;
    flex-shrink: 0;
}

/* Center: Agent emojis */
.stat-agents {
    flex: 1;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 4px;
}

/* Right: Value with bonus */
.stat-value {
    text-align: right;
    color: var(--accent-color);
    font-family: 'Share Tech Mono', monospace;
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 100px;
    flex-shrink: 0;
}

.stat-bonus {
    color: var(--success-color);
    font-size: 0.8rem;
    margin-left: 4px;
}

/* Abilities Section */
.ship-preview-abilities {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.abilities-header {
    font-size: 0.7rem;
    color: var(--primary-color);
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xs);
}

.abilities-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.ability-tag {
    background: rgba(0, 191, 255, 0.2);
    color: var(--accent-color);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

/* Preview Actions - Side by side buttons */
.ship-preview-actions {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-sm);
}

.ship-preview-actions button {
    flex: 1;
    min-height: 44px;
    font-size: 0.9rem;
}

#ship-preview-select-btn {
    background: var(--success-color);
    border-color: var(--success-color);
}

#ship-preview-select-btn:disabled {
    background: var(--text-secondary);
    border-color: var(--text-secondary);
    opacity: 0.6;
}

#ship-preview-select-btn.remove-mode {
    background: var(--danger-color);
    border-color: var(--danger-color);
}

/* ===========================================
   CAMPAIGN MISSION SELECTION - Mobile Redesign
   =========================================== */

/* Main mission screen layout */
#mission-select .mission-content {
    padding: var(--spacing-md);
    padding-bottom: 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Mission Screen Header with Close Button */
.mission-screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.mission-screen-header h2 {
    font-size: 1.3rem;
    color: var(--text-primary);
    margin: 0;
}

/* --- MOBILE SELECTOR ROW: Dropdowns for Class & Level --- */
.mobile-mission-selectors {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.mobile-mission-select {
    flex: 1;
    padding: var(--spacing-md);
    min-height: 48px;
    background: var(--background-medium);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-weight: 600;
    font-size: 0.9rem;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300bfff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
    cursor: pointer;
}

.mobile-mission-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.3);
}

.mobile-mission-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--background-dark);
}

.mobile-mission-select option {
    background-color: #0a0f1e !important;
    color: #e0e0e0 !important;
    padding: 12px;
    font-size: 1rem;
}

.mobile-mission-select option:disabled {
    color: #666 !important;
    background-color: #0d1220 !important;
}

.mobile-mission-select option:checked,
.mobile-mission-select option:hover {
    background-color: #0a4a6e !important;
    color: #00ffff !important;
}

/* Force dark styling on the select element itself */
.mobile-mission-select {
    color-scheme: dark;
}

/* ============================================
   MOBILE DROPDOWN COMPONENT (Bottom Sheet)
   Replaces native <select> with themed picker
   ============================================ */

/* Body scroll lock when dropdown is open */
.mobile-dropdown-body-lock {
    overflow: hidden !important;
    touch-action: none;
}

/* --- Trigger Button (replaces the visible select) --- */
.mobile-dropdown-trigger {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    min-height: 48px;
    background: var(--background-medium);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.mobile-dropdown-trigger:active {
    border-color: var(--accent-color, #00ffff);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

.mobile-dropdown-value {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-dropdown-chevron {
    margin-left: 8px;
    color: var(--primary-color);
    font-size: 1rem;
    flex-shrink: 0;
}

/* --- Backdrop --- */
.mobile-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease-out, visibility 150ms ease-out;
}

.mobile-dropdown-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* --- Bottom Sheet --- */
.mobile-dropdown-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    max-height: 70vh;
    background: linear-gradient(180deg, #141432 0%, #0a0a1a 100%);
    border-top: 2px solid rgba(0, 212, 255, 0.4);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 200ms ease-out, visibility 200ms ease-out;
    overflow: hidden;
}

.mobile-dropdown-sheet.visible {
    transform: translateY(0);
    visibility: visible;
}

/* --- Drag Handle --- */
.mobile-dropdown-handle-area {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    cursor: grab;
    touch-action: none;
}

.mobile-dropdown-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
}

/* --- Sheet Header --- */
.mobile-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 12px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15);
}

.mobile-dropdown-title {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-color);
    letter-spacing: 0.5px;
}

.mobile-dropdown-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.3rem;
    padding: 4px 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-dropdown-close:active {
    color: var(--text-primary);
}

/* --- Option List --- */
.mobile-dropdown-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
}

/* --- Option Row --- */
.mobile-dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 12px 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.mobile-dropdown-option:last-child {
    border-bottom: none;
}

.mobile-dropdown-option:active:not(.disabled) {
    background: rgba(0, 212, 255, 0.1);
}

/* Selected state */
.mobile-dropdown-option.selected {
    background: rgba(0, 212, 255, 0.12);
    border-left: 3px solid var(--primary-color);
    padding-left: 17px; /* compensate for border */
}

.mobile-dropdown-option.selected .mobile-dropdown-option-label {
    color: var(--primary-color);
    font-weight: 700;
}

/* Disabled / Locked state */
.mobile-dropdown-option.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.mobile-dropdown-option.disabled .mobile-dropdown-option-label {
    color: var(--text-secondary);
}

/* --- Option Label --- */
.mobile-dropdown-option-label {
    flex: 1;
    font-family: 'Orbitron', monospace;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

/* --- Option Indicator (checkmark / lock) --- */
.mobile-dropdown-option-indicator {
    flex-shrink: 0;
    margin-left: 12px;
    font-size: 1rem;
    min-width: 24px;
    text-align: center;
}

.mobile-dropdown-option-indicator.check {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Safe area padding at bottom for notched phones */
.mobile-dropdown-sheet::after {
    content: '';
    display: block;
    height: env(safe-area-inset-bottom, 0px);
}

/* Hide the original tab containers on mobile */
.mission-class-tabs,
.mission-level-tabs {
    display: none !important;
}

/* --- MISSION TYPE SEGMENTED CONTROL (XP / Agent) --- */
.mission-type-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--spacing-md);
    padding: 0;
    background: var(--background-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--primary-color);
}

.mission-type-tab {
    flex: 1;
    padding: var(--spacing-md);
    min-height: 48px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-secondary);
    font-family: 'Orbitron', monospace;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: unset;
    box-shadow: none;
}

.mission-type-tab:hover {
    background: rgba(0, 191, 255, 0.1);
    transform: none;
    box-shadow: none;
}

.mission-type-tab.active {
    background: var(--primary-gradient);
    color: var(--text-primary);
    box-shadow: none;
}

/* --- MISSION DISPLAY AREA --- */
.mission-display-area {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Header info - simplified */
.mission-header-info {
    text-align: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(0, 191, 255, 0.3);
}

.mission-header-info h3 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
}

.mission-header-info p {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* --- MISSION LIST: Vertical Cards --- */
#mission-list-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* --- MISSION CARD STYLING --- */
.mission-item {
    background: linear-gradient(145deg, rgba(30, 40, 60, 0.9), rgba(20, 30, 50, 0.9));
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-height: 56px; /* Touch target */
}

.mission-item:active:not(.locked) {
    transform: scale(0.98);
    border-color: var(--accent-color);
}

.mission-item.locked {
    opacity: 0.6;
    cursor: not-allowed;
    border-color: var(--text-secondary);
}

/* Mission header - title + difficulty badge */
.mission-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.mission-header h4 {
    font-size: 1rem;
    font-family: 'Orbitron', monospace;
    color: var(--text-primary);
    flex: 1;
    line-height: 1.2;
}

.mission-difficulty {
    background: var(--primary-gradient);
    color: white;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Mission description */
.mission-description {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: var(--spacing-md);
}

/* Mission rewards row */
.mission-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.mission-rewards span {
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--accent-color);
    font-family: 'Share Tech Mono', monospace;
}

/* Mission info row - duration + ship requirement */
.mission-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mission-duration {
    font-family: 'Share Tech Mono', monospace;
    color: var(--primary-color);
}

.mission-ship-req {
    color: var(--warning-color);
    font-weight: 600;
}

/* --- AGENT MISSION CARDS --- */
.agent-mission-item {
    background: linear-gradient(145deg, rgba(30, 30, 70, 0.95), rgba(20, 40, 80, 0.95));
    border: 2px solid var(--primary-color);
}

.agent-mission-item:active {
    border-color: var(--accent-color);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.mission-cost {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 700;
}

.mission-cost.free-mission {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: white;
    animation: pulse-free 2s infinite;
}

.mission-cost.paid-mission {
    background: linear-gradient(135deg, #fb923c, #f97316);
    color: white;
}

@keyframes pulse-free {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.agent-mission-details {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.agent-mission-rewards,
.agent-pool-display,
.special-skill-chance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    font-size: 0.8rem;
}

.reward-label, .pool-label, .skill-label {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.75rem;
}

.pool-icons {
    display: flex;
    gap: 4px;
}

.agent-pool-icon {
    font-size: 1.2rem;
}

.skill-percentage {
    color: #fbbf24;
    font-family: 'Orbitron', monospace;
    font-weight: 700;
}

/* --- BACK BUTTON FOOTER --- */
#mission-select .screen-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-md) + var(--safe-area-bottom));
    background: linear-gradient(to bottom, transparent, rgba(10, 15, 30, 0.95) 30%);
    z-index: 100;
}

#back-to-menu-from-missions-btn {
    width: 100%;
    min-height: 56px;
    font-size: 1rem;
}

/* ===========================================
   PLACEHOLDER - More styles to be added
   =========================================== */
/* 
 * TODO: Add styles for:
 * - Registration/Login screens
 * - Fleet Management details
 * - Shipyard
 * - Arena
 * - Training
 * - Outpost Defense
 * - Daily Quests modal
 * - Inventory modal
 * - Merchant store
 * - Settings modal
 * - Help modal
 * - Combat UI overlay
 * - Boss battle controls
 * - And more...
 */

/* ===========================================
   MISSION DEPARTURE ANIMATION - Mobile Optimized
   =========================================== */

.mission-launch-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at center, #0a0a2e 0%, #000000 70%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.launch-title {
    position: absolute;
    top: 15%;
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    color: #00d4ff;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
    z-index: 10;
    text-align: center;
}

.launch-subtitle {
    position: absolute;
    top: 22%;
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    color: var(--text-secondary);
    z-index: 10;
    text-align: center;
}

.launch-ships-container {
    position: relative;
    width: 100%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px;
    overflow: visible;
}

/* Mobile-scaled ships */
.launch-ship {
    width: 80px;
    height: 80px;
    position: absolute;
    transform-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.ship-position-1 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.ship-position-2 {
    top: 70%;
    left: 65%;
    transform: translate(-50%, -50%) scale(0.85);
    z-index: 2;
}

.ship-position-3 {
    top: 70%;
    left: 35%;
    transform: translate(-50%, -50%) scale(0.85);
    z-index: 2;
}

.ship-position-1, .ship-position-2, .ship-position-3 {
    animation: formationFlyby 4s ease-in-out 2s forwards;
}

@keyframes formationFlyby {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        transform: translate(-50%, -200%) scale(0.3);
        opacity: 0;
    }
}

.ship-sprite {
    width: 70px;
    height: 70px;
    object-fit: contain;
    z-index: 3;
    background: transparent !important;
}

.launch-space-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background: 
        radial-gradient(2px 2px at 20px 30px, white, transparent),
        radial-gradient(2px 2px at 40px 70px, white, transparent),
        radial-gradient(1px 1px at 90px 40px, white, transparent),
        radial-gradient(1px 1px at 130px 80px, white, transparent),
        radial-gradient(2px 2px at 160px 30px, white, transparent),
        radial-gradient(1px 1px at 200px 60px, white, transparent);
    background-repeat: repeat;
    background-size: 100px 400px;
    animation: starsStreamBy 4s linear infinite;
}

@keyframes starsStreamBy {
    0% { transform: translateY(0); }
    100% { transform: translateY(400px); }
}

/* ===========================================
   MOBILE MISSION STATUS MODAL
   =========================================== */

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

.mobile-mission-modal.active {
    display: flex;
}

.mobile-mission-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
}

.mobile-mission-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #0a1628;
    overflow: hidden;
}

.mobile-mission-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.mobile-mission-modal-header h3 {
    margin: 0;
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.accelerator-count {
    font-size: 0.85rem;
    color: #00bfff;
    font-weight: 600;
}

.modal-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
}

.mobile-mission-cards-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Mission Card */
.mission-status-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.mission-status-card.complete {
    border-color: var(--success-color);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

.mission-card-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mission-card-name {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.mission-card-type {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mission-card-type.agent {
    color: #a855f7;
}

/* Fleet Section */
.mission-card-fleet {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fleet-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fleet-ships {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ship-chip {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 0.75rem;
    color: var(--text-primary);
}

/* Rewards Section */
.mission-card-rewards {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rewards-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rewards-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reward-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.reward-chip.nc { color: #fbbf24; }
.reward-chip.fp { color: #60a5fa; }
.reward-chip.fxp { color: #10b981; }
.reward-chip.agent { color: #a855f7; }

/* Status Section */
.mission-card-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.status-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.status-label.complete {
    color: var(--success-color);
}

.status-label.in-progress {
    color: var(--warning-color);
}

.status-timer {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    color: var(--warning-color);
}

/* Action Buttons */
.mission-card-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.mission-card-actions button {
    width: 100%;
    min-height: 48px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-collect {
    background: var(--success-color);
    color: white;
}

.btn-collect:hover {
    background: #059669;
}

.btn-collect:active {
    transform: scale(0.98);
}

.btn-redeploy {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color);
}

.btn-redeploy:hover {
    background: rgba(59, 130, 246, 0.3);
}

.btn-accelerate {
    background: linear-gradient(135deg, #0ea5e9, #3b82f6);
    color: white;
}

.btn-accelerate:hover {
    background: linear-gradient(135deg, #0284c7, #2563eb);
}

.btn-accelerate:disabled {
    background: var(--text-secondary);
    opacity: 0.5;
    cursor: not-allowed;
}

/* No Missions State */
.no-missions-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--text-secondary);
}

.no-missions-message .icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.no-missions-message p {
    font-size: 1rem;
    margin: 0;
}

/* Loading modal - full styles for mobile */
.upgrade-loading-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.upgrade-loading-modal.show {
    opacity: 1;
}

.upgrade-loading-modal.fade-out {
    opacity: 0;
}

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

.upgrade-loading-content {
    position: relative;
    text-align: center;
    padding: 30px 50px;
    background: linear-gradient(135deg, rgba(0, 20, 40, 0.95), rgba(0, 10, 30, 0.98));
    border: 2px solid var(--player-primary);
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(0, 191, 255, 0.3);
}

.upgrade-loading-spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    border: 4px solid rgba(0, 191, 255, 0.2);
    border-top-color: var(--player-primary);
    border-radius: 50%;
    animation: upgrade-spin 1s linear infinite;
}

@keyframes upgrade-spin {
    to { transform: rotate(360deg); }
}

.upgrade-loading-content h3 {
    color: var(--player-primary);
    margin: 0;
    font-family: 'Orbitron', sans-serif;
}

/* Override agent reward claim modal z-index to appear above mobile mission modal */
#agent-reward-claim-modal {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    background: rgba(0, 0, 0, 0.9);
}

/* ===========================================
   STARTER FLEET CONFIRMATION MODAL
   =========================================== */
.starter-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10003; /* Above ship selection screen */
}

.starter-confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.starter-confirm-content {
    background: linear-gradient(145deg, #1a1f3a, #0d1220);
    border: 2px solid var(--warning-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    max-width: 360px;
    width: 100%;
    text-align: center;
    animation: scaleIn 0.2s ease;
}

@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.starter-confirm-content h3 {
    color: var(--warning-color);
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    margin: 0 0 var(--spacing-md) 0;
}

.starter-confirm-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.4;
}

.starter-confirm-ships {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: center;
    margin: var(--spacing-md) 0;
}

.starter-ship-badge {
    background: rgba(0, 212, 255, 0.2);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 0.85rem;
    color: var(--primary-color);
    font-family: 'Orbitron', monospace;
}

.starter-confirm-buttons {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.starter-confirm-buttons .btn {
    flex: 1;
    padding: 14px 16px;
    font-size: 0.95rem;
}

/* ===========================================
   STARTER FLEET LOADING MODAL
   =========================================== */
.starter-loading-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10004; /* Above confirmation modal */
}

.starter-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.starter-loading-content {
    text-align: center;
    color: var(--text-primary);
}

.starter-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 212, 255, 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto var(--spacing-md);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.starter-loading-content p {
    font-size: 1rem;
    margin: 0;
    color: var(--text-secondary);
}

/* ===========================================
   QUEST/SETTINGS MODAL (Mobile)
   =========================================== */
.quest-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.quest-modal-content {
    position: relative;
    width: 95%;
    max-width: 500px;
    max-height: 85vh;
    background: linear-gradient(145deg, #1a1f3a, #0d1220);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 212, 255, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.quest-modal .modal-header {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 150, 255, 0.05));
    border-bottom: 1px solid var(--primary-color);
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.quest-modal .modal-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    color: var(--primary-color);
    margin: 0;
}

.quest-modal .modal-close-btn {
    background: rgba(255, 100, 100, 0.2);
    border: 1px solid rgba(255, 100, 100, 0.5);
    color: #ff6b6b;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.quest-modal .modal-close-btn:active {
    background: rgba(255, 100, 100, 0.4);
}

.quest-modal .modal-body {
    padding: var(--spacing-md);
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* Help Modal - Accordion */
.help-accordion-section {
    border: 1px solid #334155;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.5);
}

.help-accordion-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.5), rgba(30, 41, 59, 0.5));
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease;
}

.help-accordion-header:active {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.8), rgba(30, 41, 59, 0.8));
}

.help-accordion-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-right: 10px;
}

.help-accordion-title {
    flex: 1;
    text-align: left;
    color: #e2e8f0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.help-accordion-chevron {
    color: #94a3b8;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.help-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 16px;
}

.help-accordion-section.accordion-open .help-accordion-body {
    max-height: 1200px;
    padding: 16px;
}

.help-accordion-section.accordion-open[data-accordion="alliance-tokens"] .help-accordion-body {
    max-height: 2200px;
}

.help-accordion-section.accordion-open .help-accordion-chevron {
    transform: rotate(0deg);
}

/* Help Modal - Tutorial Replay Buttons */
.help-tutorial-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.help-tutorial-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(16, 185, 129, 0.12));
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.help-tutorial-btn:active {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(16, 185, 129, 0.3));
    border-color: rgba(34, 197, 94, 0.5);
    transform: scale(0.98);
}

.help-tutorial-btn-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-right: 12px;
}

.help-tutorial-btn-label {
    flex: 1;
    text-align: left;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
}

.help-tutorial-btn-arrow {
    color: rgba(34, 197, 94, 0.6);
    font-size: 12px;
    flex-shrink: 0;
}

.help-doc-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.help-doc-btn:active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
    border-color: rgba(139, 92, 246, 0.5);
    transform: scale(0.98);
}

.help-doc-btn .help-tutorial-btn-arrow {
    color: rgba(139, 92, 246, 0.6);
}

.help-token-guide {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.help-token-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(8, 47, 73, 0.72), rgba(20, 83, 45, 0.58));
}

.help-token-hero-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(125, 211, 252, 0.28);
    font-size: 22px;
    flex: 0 0 auto;
}

.help-token-hero-title {
    color: #f8fafc;
    font-size: 15px;
    font-weight: 800;
}

.help-token-hero-subtitle {
    color: #bae6fd;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 3px;
}

.help-token-source-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.help-token-source-card,
.help-token-panel,
.help-token-spend-row {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.66);
}

.help-token-source-card {
    padding: 12px;
    min-width: 0;
}

.help-token-source-top {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
}

.help-token-source-icon {
    font-size: 18px;
    flex: 0 0 auto;
}

.help-token-source-title,
.help-token-panel-title {
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 800;
}

.help-token-source-value {
    color: #facc15;
    font-size: 22px;
    font-weight: 900;
    margin-top: 8px;
}

.help-token-source-card p,
.help-token-fineprint,
.help-token-spend-row {
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.45;
}

.help-token-source-card p {
    margin: 4px 0 8px;
}

.help-token-note {
    color: #7dd3fc;
    font-size: 11px;
    line-height: 1.35;
}

.help-token-panel {
    padding: 12px;
}

.help-token-table-wrap {
    overflow-x: auto;
    margin-top: 8px;
}

.help-token-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 360px;
    font-size: 12px;
}

.help-token-table th {
    color: #67e8f9;
    background: rgba(8, 47, 73, 0.62);
    text-align: left;
    padding: 7px 8px;
    font-weight: 800;
}

.help-token-table td {
    color: #dbeafe;
    padding: 7px 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.help-token-table tr:last-child td {
    border-bottom: 0;
}

.help-token-map-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.help-token-map-row span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: 10px;
    color: #bae6fd;
    background: rgba(8, 47, 73, 0.56);
    border: 1px solid rgba(125, 211, 252, 0.18);
    font-size: 11px;
    font-weight: 800;
}

.help-token-map-row strong {
    color: #facc15;
    font-size: 13px;
}

.help-token-fineprint {
    margin: 9px 0 0;
    color: #94a3b8;
}

.help-token-spend-row {
    padding: 11px 12px;
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(20, 83, 45, 0.34);
}

@media (max-width: 560px) {
    .help-token-source-grid {
        grid-template-columns: 1fr;
    }
}

/* Help Modal - Topic Grid */
.help-topics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.help-topic-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.help-topic-btn:active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.4), rgba(139, 92, 246, 0.4));
    border-color: rgba(139, 92, 246, 0.6);
    transform: scale(0.97);
}

.help-topic-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.help-topic-title {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
}

.help-topic-desc {
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.4;
}

@media (max-width: 360px) {
    .help-topics-grid {
        grid-template-columns: 1fr;
    }
    .help-topic-btn {
        flex-direction: row;
        gap: 10px;
        padding: 12px;
        text-align: left;
    }
    .help-topic-icon {
        font-size: 24px;
        margin-bottom: 0;
    }
}

/* Help Modal - Support & Bug Report Section */
.help-support-section {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.help-support-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.help-support-icon {
    font-size: 22px;
}

.help-support-title {
    font-size: 16px;
    font-weight: 700;
    color: #e2e8f0;
    letter-spacing: 0.3px;
}

.help-support-desc {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.help-report-bug-btn,
.help-support-email {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(249, 115, 22, 0.15));
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 10px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.help-support-email {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.15));
    border-color: rgba(59, 130, 246, 0.3);
}

.help-report-bug-btn:active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(249, 115, 22, 0.3));
    border-color: rgba(239, 68, 68, 0.5);
    transform: scale(0.98);
}

.help-support-email:active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(99, 102, 241, 0.3));
    border-color: rgba(59, 130, 246, 0.5);
    transform: scale(0.98);
}

.help-bug-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.help-bug-text {
    flex: 1;
    text-align: left;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    margin-left: 12px;
}

.help-bug-arrow {
    color: #64748b;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.help-report-bug-btn:active .help-bug-arrow,
.help-support-email:active .help-bug-arrow {
    transform: translateX(3px);
}

/* Settings sections */
.settings-section {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section h3 {
    font-family: 'Orbitron', monospace;
    font-size: 0.95rem;
    color: var(--primary-color);
    margin: 0 0 var(--spacing-xs) 0;
}

.settings-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.4;
}

/* Audio controls */
.audio-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.audio-control-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.audio-control-row label:not(.toggle-label) {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.volume-slider {
    width: 120px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}

.volume-value {
    font-size: 0.8rem;
    color: var(--primary-color);
    width: 40px;
    text-align: right;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.toggle-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.settings-hint {
    font-size: 0.7rem;
    color: #888;
    margin: 4px 0 0 28px;
    line-height: 1.3;
}

/* Backup/Logout buttons */
.backup-actions,
.logout-actions,
.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.backup-actions .btn,
.logout-actions .btn,
.legal-links .btn {
    flex: 1;
    min-width: 140px;
    padding: 12px 16px;
    font-size: 0.85rem;
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    border: 1px solid #ef4444;
}

.btn-danger:active {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
}

.btn-small {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
}

/* Backup list */
.backup-list {
    max-height: 150px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
}

/* ===========================================
   SETTINGS ACCORDION (Mobile)
   =========================================== */

/* Accordion container */
.set-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Individual section card */
.set-section {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Section header — tappable */
.set-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    min-height: 48px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.set-section-header:active {
    background: rgba(255, 255, 255, 0.05);
}

.set-section-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
}

.set-chevron {
    font-size: 0.7rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

/* Expanded chevron rotates */
.set-section.expanded .set-chevron {
    transform: rotate(180deg);
}

/* Section body — collapsed by default */
.set-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* When expanded */
.set-section.expanded .set-section-body {
    max-height: 500px;
}

/* Inner padding (applied inside body so collapse hides padding too) */
.set-section-body > :first-child {
    padding-top: 4px;
}

.set-section-body > :last-child {
    padding-bottom: 16px;
}

/* --- Rows inside sections --- */
.set-row {
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
    min-height: 48px;
    justify-content: center;
}

.set-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    min-height: 44px;
}

.set-toggle-text {
    font-size: 0.88rem;
    color: var(--text-primary);
}

.set-row-hint {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin: 2px 0 0 28px;
    line-height: 1.3;
}

/* --- Slider row (volume) --- */
.set-slider-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 16px;
}

.set-slider-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.set-slider-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.set-slider-control .volume-slider {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    outline: none;
}

.set-slider-control .volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.4);
}

.set-slider-value {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 600;
    width: 42px;
    text-align: right;
    flex-shrink: 0;
}

/* --- Account section --- */
.set-account-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 16px;
    margin-bottom: 12px;
}

.set-account-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.set-account-name {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
}

.set-signout-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px;
    padding: 12px;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    border: 1px solid #ef4444;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 48px;
    transition: opacity 0.2s ease;
}

.set-signout-btn:active {
    opacity: 0.8;
}

/* --- Game Info section --- */
.set-info-block {
    padding: 4px 16px 12px;
}

.set-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.set-info-row:last-child {
    border-bottom: none;
}

.set-info-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.set-info-value {
    font-size: 0.82rem;
    color: var(--text-primary);
    text-align: right;
}

.set-link {
    color: #60a5fa;
    text-decoration: none;
}

.set-link:active {
    color: #93bbfc;
}

.set-support-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Legal section --- */
.set-legal-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 16px 8px;
}

.set-legal-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    min-height: 48px;
    transition: background 0.15s ease;
}

.set-legal-btn:active {
    background: rgba(255, 255, 255, 0.1);
}

.set-copyright {
    font-size: 0.7rem;
    color: #555;
    text-align: center;
    padding: 8px 16px 0;
    margin: 0;
}

/* --- Legal Bottom Sheet --- */
.set-legal-sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    animation: set-fade-in 0.2s ease;
}

.set-legal-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 85vh;
    background: linear-gradient(145deg, #1a1f3a, #0d1220);
    border-top: 2px solid var(--primary-color);
    border-radius: 16px 16px 0 0;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    animation: set-slide-up 0.3s ease;
}

.set-legal-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.set-legal-sheet-title {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    color: var(--primary-color);
    margin: 0;
}

.set-legal-sheet-close {
    background: rgba(255, 100, 100, 0.2);
    border: 1px solid rgba(255, 100, 100, 0.5);
    color: #ff6b6b;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.set-legal-sheet-close:active {
    background: rgba(255, 100, 100, 0.4);
}

.set-legal-sheet-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 32px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.set-legal-sheet-content h3 {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin: 20px 0 8px;
}

.set-legal-sheet-content h3:first-child {
    margin-top: 4px;
}

.set-legal-sheet-content p {
    margin: 0 0 12px;
}

.set-legal-sheet-content ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.set-legal-sheet-content li {
    margin-bottom: 4px;
}

@keyframes set-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes set-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Tablet (768px+) --- */
@media (min-width: 768px) {
    .set-section-title {
        font-size: 1rem;
    }

    .set-legal-sheet {
        max-width: 600px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 16px 16px 0 0;
    }

    @keyframes set-slide-up {
        from { transform: translateX(-50%) translateY(100%); }
        to { transform: translateX(-50%) translateY(0); }
    }

    .set-legal-btn {
        max-width: 400px;
    }
}

/* ===========================================
   ARENA (Mobile) — ar- prefix
   =========================================== */

/* Screen overrides */
#arena-screen {
    max-width: 100vw;
    padding: 0;
}

#arena-screen.active {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---- Page wrapper spacing ---- */
#arena-screen > * {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Sticky top: header + daily + nav */
.ar-sticky-top {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--background-dark);
    padding-bottom: 2px;
}

/* ---- HEADER CARD ---- */
.ar-header-card {
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.95), rgba(30, 20, 50, 0.95));
    border: 1px solid rgba(255, 107, 0, 0.3);
    border-radius: var(--radius-lg);
    padding: 10px var(--spacing-md);
    margin-top: var(--spacing-sm);
    margin-bottom: 6px;
}

/* Title row: title left, stat pills right */
.ar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ar-title {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary-color);
}

.ar-stat-pills {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ar-stat {
    font-size: 1.25rem;
    color: var(--text-secondary);
}

.ar-stat span {
    color: var(--text-primary);
    font-weight: 700;
}

/* Rank row: icon, name, progress bar (flex: 1), points */
.ar-rank-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ar-rank-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ar-rank-name {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Progress bar fills remaining space */
.ar-progress-bar {
    flex: 1;
    height: 6px;
    min-width: 40px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(255, 107, 0, 0.25);
}

.ar-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--secondary-color), #ffa040);
    border-radius: 3px;
    transition: width 0.5s ease;
    box-shadow: 0 0 6px rgba(255, 107, 0, 0.4);
}

.ar-rank-points {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.0rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- DAILY CHALLENGE (single line) ---- */
.ar-daily-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-md);
    padding: 8px var(--spacing-md);
    margin-bottom: 6px;
}

.ar-daily-label {
    font-size: 0.88rem;
    color: var(--primary-color);
    font-weight: 700;
}

.ar-daily-reward {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.ar-daily-card.completed {
    border-color: rgba(76, 175, 80, 0.4);
    background: rgba(76, 175, 80, 0.08);
}

/* ---- PILL NAVIGATION ---- */
.ar-nav {
    display: flex;
    gap: 6px;
    margin-bottom: var(--spacing-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.ar-nav::-webkit-scrollbar {
    display: none;
}

.ar-nav-btn {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    padding: 7px 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: var(--text-secondary);
    font-family: 'Exo 2', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ar-nav-btn.active {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 150, 200, 0.15));
    border-color: var(--primary-color);
    color: var(--primary-color);
}

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

/* ---- TAB CONTENT ---- */
.ar-tab-content {
    display: none;
    flex: 1;
}

.ar-tab-content.active {
    display: flex;
    flex-direction: column;
}

/* Section description text */
.ar-section-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

/* ---- BLITZ BAR ---- */
.ar-blitz-bar {
    margin-bottom: var(--spacing-sm);
}

.ar-blitz-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--spacing-md);
    background: linear-gradient(135deg, #ff9800, #f57c00);
    border: 1px solid rgba(255, 152, 0, 0.5);
    border-radius: var(--radius-md);
    color: #fff;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 152, 0, 0.3);
    transition: transform 0.1s;
}

.ar-blitz-btn:active {
    transform: scale(0.97);
}

/* ---- NPC TEAMS LIST ---- */
.ar-npc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: var(--spacing-md);
}

/* NPC team card — bordered card with 3 rows */
.ar-npc-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s;
}

.ar-npc-card.defeated {
    opacity: 0.4;
    border-color: rgba(76, 175, 80, 0.3);
}

/* Row 1: name + difficulty badge */
.ar-npc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ar-npc-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Difficulty badge */
.ar-difficulty {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.ar-difficulty-easy {
    background: rgba(76, 175, 80, 0.2);
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.4);
}

.ar-difficulty-medium {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.4);
}

.ar-difficulty-hard {
    background: rgba(255, 107, 0, 0.2);
    color: #ff9800;
    border: 1px solid rgba(255, 107, 0, 0.4);
}

.ar-difficulty-vhard {
    background: rgba(244, 67, 54, 0.2);
    color: #ef5350;
    border: 1px solid rgba(244, 67, 54, 0.4);
}

/* Row 2: meta line (tier + skills) */
.ar-npc-meta {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Row 3: rewards left, fight button right */
.ar-npc-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.ar-npc-reward {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.ar-npc-cooldown {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Fight button */
.ar-fight-btn {
    min-width: 80px;
    min-height: 34px;
    padding: 5px 14px;
    background: linear-gradient(135deg, var(--primary-color), #0099cc);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--background-dark);
    font-family: 'Orbitron', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.1s;
}

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

.ar-fight-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: default;
}

/* ---- COMING SOON PANELS (PvP, History) ---- */
.ar-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
}

.ar-coming-soon-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.7;
}

.ar-coming-soon h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.ar-coming-soon-label {
    font-size: 0.85rem;
    color: var(--warning-color);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.ar-coming-soon-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.ar-coming-soon-list li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 4px 0;
    position: relative;
    padding-left: 18px;
}

.ar-coming-soon-list li::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: var(--primary-color);
}

/* ---- ARENA SHOP ---- */
.ar-shop-header {
    margin-bottom: var(--spacing-sm);
}

.ar-shop-balances {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.ar-shop-bal {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.ar-shop-bal span {
    color: var(--text-primary);
    font-weight: 600;
}

.ar-shop-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: var(--spacing-md);
}

/* Shop section title */
.ar-shop-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--spacing-sm);
}

.ar-shop-section-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Individual shop card — horizontal row */
.ar-shop-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ar-shop-card.disabled {
    opacity: 0.45;
}

.ar-shop-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

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

.ar-shop-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1px;
}

.ar-shop-desc {
    font-size: 0.68rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.ar-shop-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.ar-shop-cost {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    color: var(--warning-color);
    white-space: nowrap;
}

.ar-shop-btn {
    min-width: 56px;
    min-height: 30px;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--primary-color), #0099cc);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--background-dark);
    font-family: 'Orbitron', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s;
}

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

.ar-shop-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: default;
}

.ar-shop-soon {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: var(--radius-sm);
    color: var(--warning-color);
    font-family: 'Orbitron', monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ---- BACK BUTTON ---- */
.ar-back-btn {
    position: sticky;
    bottom: 0;
    z-index: 20;
    width: 100%;
    padding: 14px 0;
    min-height: 48px;
    margin-top: auto;
    margin-bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    background: var(--background-dark);
    color: #c0c8d8;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: calc(14px + var(--safe-area-bottom, 0px));
}

.ar-back-btn:active {
    background: rgba(255, 255, 255, 0.12);
}

/* ---- NPC EMPTY STATE ---- */
.ar-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.ar-empty-icon {
    font-size: 2.2rem;
    margin-bottom: var(--spacing-sm);
    opacity: 0.7;
}

.ar-empty-sub {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 4px;
}

/* ---- HIDE DESKTOP ARENA MODAL ON MOBILE ---- */
#arena-team-selection-modal {
    display: none !important;
}

/* ---- BLITZ SUMMARY MODAL (bottom sheet) ---- */
.ar-blitz-summary-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ar-blitz-summary-sheet {
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    background: var(--background-medium);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    padding-bottom: calc(var(--spacing-lg) + var(--safe-area-bottom, 0px));
    overflow-y: auto;
}

.ar-blitz-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.ar-blitz-stats-row {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.ar-blitz-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 80px;
}

.ar-blitz-stat-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.4rem;
    font-weight: 700;
}

.ar-blitz-stat-win .ar-blitz-stat-val { color: var(--success-color); }
.ar-blitz-stat-loss .ar-blitz-stat-val { color: var(--error-color); }

.ar-blitz-stat-lbl {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ar-blitz-rewards {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
    padding: 10px;
    background: rgba(0, 230, 255, 0.06);
    border: 1px solid rgba(0, 230, 255, 0.15);
    border-radius: var(--radius-md);
}

.ar-blitz-reward {
    font-size: 0.82rem;
    color: var(--text-primary);
}

.ar-blitz-reward strong {
    color: var(--primary-color);
}

.ar-blitz-details {
    margin-bottom: var(--spacing-md);
}

.ar-blitz-details summary {
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
}

.ar-blitz-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.ar-blitz-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
}

.ar-blitz-row-win {
    background: rgba(76, 175, 80, 0.08);
    border-left: 2px solid var(--success-color);
}

.ar-blitz-row-loss {
    background: rgba(244, 67, 54, 0.08);
    border-left: 2px solid var(--error-color);
}

.ar-blitz-row-icon {
    flex-shrink: 0;
    font-size: 0.9rem;
}

.ar-blitz-row-name {
    flex: 1;
    color: var(--text-primary);
}

.ar-blitz-row-rewards {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.ar-blitz-continue-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--primary-color), #0099cc);
    border: none;
    border-radius: var(--radius-md);
    color: var(--background-dark);
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.ar-blitz-continue-btn:active {
    transform: scale(0.97);
}

/* ---- DAILY CARD COMPLETED STATE ---- */
.ar-daily-card.completed .ar-daily-label {
    color: var(--success-color);
}

.ar-daily-card.completed .ar-daily-reward {
    color: var(--success-color);
    opacity: 0.7;
}

/* ---- TABLET BREAKPOINT (768px+) ---- */
@media (min-width: 768px) {
    .ar-header-card {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .ar-daily-card {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .ar-nav {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .ar-tab-content {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .ar-back-btn {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    /* 2-column shop on tablet */
    #npc-teams-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .ar-empty-state {
        grid-column: 1 / -1;
    }
}

/* ===========================================
   SELL/CONFIRMATION MODAL (Mobile)
   =========================================== */
.sell-confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.sell-confirmation-content {
    background: linear-gradient(145deg, #1a1f3a, #0d1220);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    max-width: 340px;
    width: 90%;
    text-align: center;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sell-confirmation-content h3 {
    color: var(--primary-color);
    font-family: 'Orbitron', monospace;
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1.2rem;
}

.sell-ship-info {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
}

.sell-ship-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.sell-ship-details {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.sell-confirmation-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
}

.sell-confirm-btn, .sell-cancel-btn, .signout-confirm-btn {
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    font-weight: bold;
    cursor: pointer;
    border: 2px solid;
    font-size: 0.9rem;
    min-width: 100px;
}

.sell-confirm-btn {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    color: #ffd700;
}

.sell-cancel-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}

.signout-confirm-btn {
    background: rgba(255, 100, 100, 0.2);
    border-color: #ff6464;
    color: #ff6464;
}

/* ===========================================
   DAILY CHECK-IN MODAL (Mobile-First Redesign v2)
   Hero → Streak → Bonuses → Requirements → Timeline → Calendar
   =========================================== */

/* ==================== Founders Pack Modal ==================== */
#founder-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.founder-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.founder-card {
    position: relative;
    width: 92%;
    max-width: 400px;
    background: linear-gradient(145deg, #0f1d35 0%, #0a1428 50%, #0d0f2a 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.15), 0 0 120px rgba(255, 215, 0, 0.05);
    animation: founderCardIn 0.5s ease-out;
    overflow: hidden;
}

.founder-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.06) 0%, transparent 60%);
    animation: founderGlowPulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes founderCardIn {
    from { transform: scale(0.8) translateY(30px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes founderGlowPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.founder-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #1a0a00;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 4px 16px;
    border-radius: 20px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.founder-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px 0;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.founder-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 24px 0;
    line-height: 1.4;
}

.founder-rewards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.founder-reward-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    opacity: 0;
    animation: founderRewardIn 0.4s ease-out forwards;
}

.founder-reward-row:nth-child(1) { animation-delay: 0.3s; }
.founder-reward-row:nth-child(2) { animation-delay: 0.45s; }
.founder-reward-row:nth-child(3) { animation-delay: 0.6s; }
.founder-reward-row:nth-child(4) { animation-delay: 0.75s; }
.founder-reward-row:nth-child(5) { animation-delay: 0.9s; }
.founder-reward-row:nth-child(6) { animation-delay: 1.05s; }

@keyframes founderRewardIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

.founder-reward-icon {
    font-size: 24px;
    min-width: 36px;
    text-align: center;
}

.founder-reward-text {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.founder-claim-btn {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    font-weight: 800;
    color: #1a0a00;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
    opacity: 0;
    animation: founderRewardIn 0.4s ease-out 1.3s forwards;
}

.founder-claim-btn:active {
    transform: scale(0.97);
}

.founder-claim-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Full-screen overlay */
.checkin-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: flex-end; /* slide up from bottom on mobile */
    justify-content: center;
}

.checkin-modal .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Main container - full-height sheet on mobile */
.checkin-modal-content {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 95vh;
    background: linear-gradient(180deg, #0d1829 0%, #0a1420 100%);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 40px rgba(0, 212, 255, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: checkinSlideUp 0.35s ease-out;
}

@keyframes checkinSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Header */
.checkin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15);
    flex-shrink: 0;
    gap: 8px;
}

.checkin-header-text {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.checkin-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

.checkin-day-badge {
    font-size: 0.75rem;
    color: #000;
    background: var(--accent-color);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.checkin-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.checkin-close-btn:active {
    background: rgba(255, 100, 100, 0.3);
    border-color: #ff6464;
}

/* Scrollable body */
.checkin-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 24px;
}

/* ─── 1. HERO: Today's Reward ─── */
.checkin-hero {
    text-align: center;
    padding: 24px 16px 20px;
    margin: 0 -16px; /* bleed to edges */
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.08) 0%, transparent 100%);
}

.checkin-hero-label {
    font-size: 0.85rem;
    color: var(--accent-color);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.checkin-hero-icon {
    font-size: 3rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.4));
}

.checkin-hero-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.checkin-hero-desc {
    font-size: 0.95rem;
    color: #ccc;
    margin-bottom: 16px;
}

/* Claim button */
.checkin-claim-btn {
    width: 100%;
    max-width: 300px;
    padding: 14px 24px;
    font-size: 1.05rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00aa44, #00dd55);
    border: none;
    border-radius: 12px;
    color: #000;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 255, 100, 0.3);
    transition: all 0.2s;
}

.checkin-claim-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 10px rgba(0, 255, 100, 0.2);
}

.checkin-claim-btn:disabled {
    background: linear-gradient(135deg, #1a2a1a, #223322);
    color: #66aa66;
    box-shadow: none;
    cursor: default;
}

.checkin-hero.claimed .checkin-hero-icon {
    opacity: 0.6;
}

/* ─── 2. STREAK STATUS (accordion toggle) ─── */
.checkin-streak-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    margin-top: 16px;
    background: rgba(255, 100, 0, 0.08);
    border: 1px solid rgba(255, 100, 0, 0.2);
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
}

.checkin-streak-status:active {
    background: rgba(255, 100, 0, 0.15);
}

.checkin-streak-arrow {
    font-size: 0.9rem;
    color: #aaa;
    margin-left: auto;
    transition: transform 0.3s ease;
}

.checkin-streak-arrow.open {
    transform: rotate(180deg);
}

.checkin-streak-fire {
    font-size: 1.3rem;
}

.checkin-streak-text {
    font-size: 1.05rem;
    color: #eee;
}

.checkin-streak-text strong {
    color: var(--accent-color);
    font-size: 1.1rem;
}

.checkin-status {
    text-align: center;
    font-size: 0.88rem;
    color: #aaa;
    margin-top: 6px;
    line-height: 1.4;
    min-height: 0; /* collapse when empty */
}

/* ─── 3. STREAK BONUSES ─── */
.checkin-streak-bonuses {
    margin-top: 16px;
}

.checkin-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.checkin-bonus-cards {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
}

.checkin-bonus-cards::-webkit-scrollbar {
    display: none;
}

.checkin-bonus-card {
    flex: 0 0 auto;
    min-width: 130px;
    padding: 12px;
    background: rgba(40, 40, 60, 0.6);
    border: 1.5px solid rgba(100, 100, 120, 0.3);
    border-radius: 10px;
    text-align: center;
    scroll-snap-align: start;
    transition: all 0.2s;
}

.checkin-bonus-card.achieved {
    background: linear-gradient(135deg, rgba(0, 80, 40, 0.5), rgba(0, 50, 30, 0.5));
    border-color: #00ff88;
}

.checkin-bonus-card.next {
    border-color: var(--accent-color);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
}

.checkin-bonus-card.locked {
    opacity: 0.5;
}

.checkin-bonus-days {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.checkin-bonus-card.achieved .checkin-bonus-days {
    color: #00ff88;
}

.checkin-bonus-card.next .checkin-bonus-days {
    color: var(--accent-color);
}

.checkin-bonus-card.locked .checkin-bonus-days {
    color: #888;
}

.checkin-bonus-reward {
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.4;
}

.checkin-bonus-card.achieved .checkin-bonus-reward {
    color: #88ddaa;
}

/* ─── 4. REQUIREMENTS (collapsible) ─── */
.checkin-requirements {
    margin-top: 16px;
}

.checkin-requirements.met {
    opacity: 0.7;
}

.checkin-req-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255, 152, 0, 0.08);
    border: 1px solid rgba(255, 152, 0, 0.2);
    border-radius: 10px;
    color: #eee;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.checkin-requirements.met .checkin-req-toggle {
    background: rgba(0, 255, 136, 0.08);
    border-color: rgba(0, 255, 136, 0.2);
}

.checkin-req-arrow {
    color: #888;
    font-size: 1rem;
    transition: transform 0.2s;
}

.checkin-req-arrow.open {
    transform: rotate(180deg);
}

.checkin-req-details {
    padding: 12px 14px;
    margin-top: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.checkin-req-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.checkin-req-icon {
    font-size: 1rem;
    width: 24px;
    text-align: center;
}

.checkin-req-text {
    flex: 1;
    font-size: 0.95rem;
    color: #ddd;
}

.checkin-req-check {
    font-size: 1rem;
    width: 24px;
    text-align: center;
}

.checkin-req-divider,
.checkin-req-plus {
    text-align: center;
    font-size: 0.75rem;
    color: #666;
    font-weight: 700;
    padding: 2px 0;
}

/* ─── 5. PROGRESSION TIMELINE ─── */
.checkin-timeline-section {
    margin-top: 20px;
}

.checkin-timeline {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 8px 0 12px;
}

.checkin-timeline::-webkit-scrollbar {
    height: 3px;
}

.checkin-timeline::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
}

.checkin-timeline::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.3);
    border-radius: 2px;
}

.checkin-tl-day {
    flex: 0 0 auto;
    width: 56px;
    padding: 8px 4px;
    background: rgba(20, 30, 50, 0.7);
    border: 1.5px solid rgba(100, 100, 120, 0.2);
    border-radius: 8px;
    text-align: center;
    scroll-snap-align: center;
    transition: all 0.2s;
}

.checkin-tl-day.claimed {
    background: rgba(0, 50, 30, 0.5);
    border-color: rgba(0, 200, 100, 0.3);
}

.checkin-tl-day.current {
    background: rgba(0, 40, 80, 0.6);
    border-color: var(--primary-color);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
    transform: scale(1.08);
}

.checkin-tl-day.locked {
    opacity: 0.4;
}

.checkin-tl-num {
    font-size: 0.6rem;
    color: #888;
    margin-bottom: 2px;
}

.checkin-tl-day.current .checkin-tl-num {
    color: var(--primary-color);
    font-weight: 700;
}

.checkin-tl-icon {
    font-size: 1.2rem;
}

.checkin-tl-day.claimed .checkin-tl-icon {
    opacity: 0.5;
}

.checkin-tl-check {
    font-size: 0.65rem;
    color: #00ff88;
    margin-top: 2px;
}

/* ─── 6. FULL CALENDAR (collapsible) ─── */
.checkin-calendar-section {
    margin-top: 16px;
    padding-bottom: 8px;
}

.checkin-calendar-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 10px;
    color: #aaa;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.checkin-calendar-toggle:active {
    background: rgba(0, 212, 255, 0.12);
}

.checkin-calendar-grid {
    margin-top: 12px;
}

/* Rewards Grid - used inside full calendar */
.rewards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0;
}

.reward-card {
    position: relative;
    background: rgba(20, 30, 50, 0.8);
    border: 1px solid rgba(100, 100, 120, 0.3);
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.reward-card.claimed {
    background: rgba(0, 50, 30, 0.5);
    border-color: rgba(0, 200, 100, 0.4);
    opacity: 0.7;
}

.reward-card.current-day {
    background: rgba(0, 50, 100, 0.6);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 212, 255, 0.4); }
    50% { box-shadow: 0 0 25px rgba(0, 212, 255, 0.7); }
}

.reward-day {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.65rem;
    color: #aaa;
    font-weight: 600;
}

.reward-icon {
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.reward-name {
    font-size: 0.85rem;
    color: #fff;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
    font-weight: 600;
}

/* ─── TABLET LAYOUT (768px+) ─── */
@media (min-width: 768px) {
    .checkin-modal {
        align-items: center; /* centered on tablet */
    }

    .checkin-modal-content {
        max-width: 560px;
        max-height: 85vh;
        border-radius: 20px;
    }

    .checkin-hero {
        padding: 28px 24px;
    }

    .checkin-bonus-cards {
        justify-content: center;
    }

    .rewards-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .checkin-timeline {
        justify-content: center;
        flex-wrap: wrap;
    }
}

#commander-name-modal {
    z-index: 10001 !important;
}

/* ========================================
   TRAINING SELECTION SCREEN (Mobile)
   ======================================== */

.training-selection-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    overflow: hidden;
}

/* Training Screen Header with Close Button */
.training-screen-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.training-header-text {
    flex: 1;
}

.training-header-text h2 {
    margin: 0 0 4px 0;
    font-size: 1.4rem;
    color: var(--text-primary);
}

.training-header-text .training-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.screen-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.screen-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.screen-close-btn:active {
    background: rgba(255, 255, 255, 0.3);
}

/* Tier Progress Strip */
.training-tier-progress {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.tier-progress-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tier-progress-item:last-child {
    border-bottom: none;
}

.tier-progress-item.active {
    color: var(--accent-color);
}

.tier-progress-item.locked {
    color: var(--text-muted);
    opacity: 0.6;
}

.tier-progress-item.completed {
    color: #10b981;
}

.tier-progress-icon {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.tier-progress-name {
    flex: 1;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
}

.tier-progress-status {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
}

.tier-progress-item.active .tier-progress-status {
    background: var(--accent-color);
    color: var(--bg-dark);
}

.tier-progress-item.completed .tier-progress-status {
    background: #10b981;
    color: var(--bg-dark);
}

.tier-unlock-requirement {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: 34px;
    margin-top: 2px;
}

/* Tier Header */
.training-tier-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 8px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Training Levels List (scrollable) */
.training-levels-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

/* ---- Compact Fight Row (matches Arena NPC card pattern) ---- */
.tl-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s;
}

.tl-card.clickable {
    cursor: pointer;
}

.tl-card.clickable:active {
    transform: scale(0.98);
    border-color: var(--player-primary);
}

.tl-card.locked {
    opacity: 0.45;
}

.tl-card.completed {
    border-color: rgba(76, 175, 80, 0.3);
}

/* Row 1: Level title + difficulty badge */
.tl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tl-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Difficulty badge (reuse Arena palette) */
.tl-difficulty {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tl-diff-easy {
    background: rgba(76, 175, 80, 0.2);
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.4);
}

.tl-diff-medium {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.4);
}

.tl-diff-hard {
    background: rgba(255, 107, 0, 0.2);
    color: #ff9800;
    border: 1px solid rgba(255, 107, 0, 0.4);
}

/* Row 2: requirement */
.tl-requirement {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* Row 3: rewards left, fight btn right */
.tl-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.tl-rewards {
    font-size: 0.72rem;
    color: var(--text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tl-fight-btn {
    min-width: 80px;
    min-height: 34px;
    padding: 5px 14px;
    background: linear-gradient(135deg, var(--primary-color), #0099cc);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--background-dark);
    font-family: 'Orbitron', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.1s;
}

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

.tl-locked-badge {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* Unlocked training but player has no ships at required level */
.tl-need-ships {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.3);
    font-size: 0.62rem;
}

.tl-card.no-eligible-ships {
    opacity: 0.7;
}

.tl-card.no-eligible-ships .tl-requirement {
    color: #f59e0b;
}

/* Row 4 (optional): bonus pills */
.tl-bonus-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.tl-bonus-pill {
    display: inline-block;
    font-size: 0.68rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
}

.tl-protected-pill {
    display: inline-block;
    font-size: 0.68rem;
    color: #a855f7;
    background: rgba(168, 85, 247, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ========================================
   COMBAT SCREEN (Mobile)
   ======================================== */

#battle-screen {
    /* NOTE: display is controlled by .screen/.screen.active classes */
    /* Don't override display here - it breaks screen switching! */
    flex-direction: column;
    height: 100%;
    height: 100dvh;
    background: var(--background-dark);
    overflow: hidden;
}

#battle-screen.active {
    display: flex;
}

.mobile-combat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* Combat Top Bar */
.mobile-combat-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 48px;
    flex-shrink: 0;
}

.combat-menu-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.combat-title {
    flex: 1;
    text-align: center;
    font-family: 'Orbitron', monospace;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

.combat-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 2x Speed Boost Icon (overlaid on canvas) */
.mobile-canvas-container {
    position: relative;
}

.combat-speed-boost {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Button reset */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
}

.speed-boost-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    opacity: 0.35;
    filter: grayscale(80%);
    transition: opacity 0.2s, filter 0.2s;
}

.combat-speed-boost.speed-active .speed-boost-icon {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(255, 200, 0, 0.7));
}

/* NC Balance Display in Combat */
.combat-nc-display {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 191, 255, 0.15);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 0.85rem;
    color: var(--accent-color);
    font-family: 'Share Tech Mono', monospace;
}

.combat-nc-display .nc-icon {
    font-size: 0.9rem;
    color: #00d4ff;
}

/* FP Balance Display in Combat */
.combat-fp-display {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 0.85rem;
    color: #3b82f6;
    font-family: 'Share Tech Mono', monospace;
}

.combat-fp-display .fp-icon {
    font-size: 0.9rem;
    color: #3b82f6;
}

.combat-tokens-display {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 0.9rem;
    color: var(--gold-color);
    cursor: pointer;
}

.combat-tokens-display .token-icon {
    font-size: 1rem;
}

.combat-timer-display {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 0.9rem;
    color: #2ecc71;
    font-family: 'Orbitron', monospace;
}

.combat-timer-display.safe {
    background: rgba(46, 204, 113, 0.15);
    border-color: rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

.combat-timer-display.warning {
    background: rgba(255, 152, 0, 0.2);
    border-color: rgba(255, 152, 0, 0.5);
    color: #ff9800;
}

.combat-timer-display.critical {
    background: rgba(244, 67, 54, 0.3);
    border-color: rgba(244, 67, 54, 0.7);
    color: #f44336;
    animation: timer-critical-pulse 0.5s ease-in-out infinite;
}

@keyframes timer-critical-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.combat-mute-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Boss HP Container (Mobile) */
.mobile-boss-hp-container {
    background: rgba(0, 0, 0, 0.5);
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.boss-hp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.boss-hp-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.boss-hp-percent {
    font-size: 0.85rem;
    font-family: 'Orbitron', monospace;
    color: #d4af37;
}

.boss-hp-bar-wrapper {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.boss-hp-bar-wrapper .hp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #d4af37);
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.4);
}

.boss-attempts-display {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 4px;
}

/* Canvas Container - Adaptive viewport-relative sizing */
.mobile-canvas-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
    position: relative;
    min-height: 45vh; /* Minimum canvas height for phones */
    max-height: 80vh; /* Maximum canvas height for tablets */
}

.mobile-canvas-container #battle-canvas {
    width: 100%;
    height: 100%;
    /* Let container control size - no hard pixel constraints */
    /* Soft aspect ratio: allow natural sizing within 3:2 to 16:9 bounds */
}

/* Action Message Line */
.mobile-action-message {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-action-message #action-message {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-family: 'Exo 2', sans-serif;
}

/* Combat Bottom Controls */
.mobile-combat-controls {
    background: rgba(0, 0, 0, 0.7);
    padding: 12px;
    padding-bottom: calc(12px + var(--safe-area-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.mobile-training-controls,
.mobile-boss-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.combat-btn-row {
    display: flex;
    gap: 8px;
    width: 100%;
}

.combat-btn {
    flex: 1;
    padding: 14px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.1s, opacity 0.1s;
    min-height: var(--touch-target-min);
}

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

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

/* Prevent double-tap zoom and long-press context menu on mobile */
.combat-btn {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.combat-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #0099cc);
    color: var(--background-dark);
}

.combat-btn-farm {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
    color: white;
}

.combat-btn-warning {
    background: linear-gradient(135deg, var(--warning-color), #e65100);
    color: var(--background-dark);
}

.combat-btn-success {
    background: linear-gradient(135deg, var(--success-color), #2e7d32);
    color: white;
}

.combat-btn-exit {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

/* Arena Retreat Button */
.arena-retreat-btn {
    display: block !important;
    width: 100%;
    padding: 14px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    margin-top: 8px;
}

/* Combat Menu Drawer */
.combat-menu-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.combat-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.combat-menu-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    max-width: 80vw;
    height: 100%;
    background: var(--background-medium);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
}

.combat-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
}

.combat-menu-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
}

.combat-menu-options {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.combat-menu-option {
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
}

.combat-menu-option:active {
    background: rgba(255, 255, 255, 0.1);
}

/* Accelerator Token Bottom Sheet */
.accelerator-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: var(--background-medium);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-height: 80vh;
    overflow-y: auto;
}

.accelerator-sheet.active {
    transform: translateY(0);
}

.accelerator-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.accelerator-sheet-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.accelerator-sheet-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
}

.accelerator-sheet-content {
    padding: 16px;
}

.accelerator-balance {
    text-align: center;
    padding: 16px;
    background: rgba(255, 215, 0, 0.1);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.accelerator-balance-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.accelerator-balance-value {
    font-size: 2rem;
    font-family: 'Orbitron', monospace;
    color: var(--gold-color);
}

.accelerator-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accelerator-option-btn {
    width: 100%;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accelerator-option-btn:active {
    background: rgba(255, 255, 255, 0.1);
}

.accelerator-option-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.accelerator-option-label {
    font-weight: 600;
}

.accelerator-option-cost {
    color: var(--gold-color);
}

/* Farming Progress Notification */
.farming-progress-notification {
    position: fixed;
    top: 60px; /* Below mobile header */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
    z-index: 1000;
    animation: farmingSlideIn 0.3s ease-out;
    border: 2px solid #388E3C;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.farming-progress-notification:active {
    transform: translateX(-50%) scale(0.96);
}

.farming-progress-tap-hint {
    font-size: 0.7rem;
    font-weight: normal;
    opacity: 0.8;
    margin-top: 2px;
}

.farming-progress-notification.hiding {
    animation: farmingSlideOut 0.3s ease-in forwards;
}

@keyframes farmingSlideIn {
    from {
        transform: translateX(-50%) translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes farmingSlideOut {
    from {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) translateY(-50px);
        opacity: 0;
    }
}

/* Mobile Battle Results Sheet */
.mobile-results-sheet {
    position: fixed;
    top: auto !important; /* Override .modal's top: 0 */
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto !important; /* Override .modal's height: 100vh */
    max-height: 90vh;
    z-index: 2001; /* Above .modal's 2000 */
    background: var(--background-medium);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    flex-direction: column; /* Override .modal's display: flex */
}

.mobile-results-sheet.active {
    transform: translateY(0);
}

.mobile-results-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000; /* Just below .mobile-results-sheet (2001) */
    display: none;
}

.mobile-results-overlay.active {
    display: block;
}

/* Content must be above overlay */
.mobile-results-content {
    position: relative;
    z-index: 2002;
    background: var(--background-medium);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 20px 16px 24px;
    text-align: center; /* Horizontally center content */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Victory/Defeat Header */
.mobile-results-content .results-header {
    margin-bottom: 20px;
}

.mobile-results-content .results-header h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    margin: 0;
    color: var(--success-color);
}

/* Rewards Section - Card-like presentation */
.mobile-results-content .results-rewards {
    width: 100%;
    max-width: 320px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
}

.mobile-results-content .results-rewards h4 {
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mobile-results-content .reward-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
}

.mobile-results-content .reward-icon {
    font-size: 1.2rem;
}

.mobile-results-content .reward-amount {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--primary-color);
    min-width: 60px;
}

.mobile-results-content .reward-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Battle Summary - De-emphasized */
.mobile-results-content .results-summary {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.mobile-results-content .summary-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Button row for side-by-side Continue + Farm Again */
.results-btn-row {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 560px;
    justify-content: center;
}

/* Continue Button */
.mobile-results-content #continue-battle-btn {
    flex: 1;
    max-width: 260px;
    padding: 14px 16px;
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: bold;
    background: var(--primary-color);
    color: var(--background-dark);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Farm Again Button */
.mobile-results-content .results-farm-again-btn {
    flex: 1;
    max-width: 260px;
    padding: 14px 16px;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mobile-results-content .results-farm-again-btn:active {
    background: rgba(0, 255, 255, 0.15);
}

/* Auto-Farm ×5 Button — enabled state (Guardian active) */
.mobile-results-content .results-auto-farm-btn {
    flex: 1;
    max-width: 260px;
    padding: 14px 16px;
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.25), rgba(255, 100, 0, 0.15));
    color: #ffaa00;
    border: 2px solid #ffaa00;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 8px rgba(255, 165, 0, 0.3);
    transition: opacity 0.2s, box-shadow 0.2s;
}

.mobile-results-content .results-auto-farm-btn:active {
    background: rgba(255, 165, 0, 0.3);
    box-shadow: 0 0 14px rgba(255, 165, 0, 0.5);
}

/* Auto-Farm ×5 Button — disabled state (no Guardian) */
.mobile-results-content .results-auto-farm-btn.disabled {
    opacity: 0.45;
    background: rgba(128, 128, 128, 0.15);
    color: #888;
    border-color: #555;
    box-shadow: none;
    cursor: pointer; /* still tappable for teaser */
}

/* Auto-Farm countdown banner */
.auto-farm-countdown-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.2), rgba(255, 100, 0, 0.1));
    border: 1px solid rgba(255, 165, 0, 0.4);
    border-radius: var(--radius-md);
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    color: #ffaa00;
}

.auto-farm-countdown-banner .countdown-text {
    flex: 1;
}

.auto-farm-countdown-banner .countdown-cancel-btn {
    padding: 6px 14px;
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    font-weight: bold;
    background: transparent;
    color: #ff6666;
    border: 1px solid #ff6666;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-transform: uppercase;
}

/* Auto-Farm teaser modal */
.auto-farm-teaser-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.auto-farm-teaser-modal {
    background: var(--card-bg, #1a1a2e);
    border: 1px solid rgba(255, 165, 0, 0.4);
    border-radius: var(--radius-lg);
    padding: 24px;
    max-width: 320px;
    width: 90%;
    text-align: center;
}

.auto-farm-teaser-modal h3 {
    font-family: 'Orbitron', monospace;
    color: #ffaa00;
    margin: 0 0 12px;
    font-size: 1.1rem;
}

.auto-farm-teaser-modal p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 20px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.auto-farm-teaser-modal .teaser-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 8px;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.auto-farm-teaser-modal .teaser-merchant-btn {
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.3), rgba(255, 100, 0, 0.15));
    color: #ffaa00;
    border: 2px solid #ffaa00;
}

.auto-farm-teaser-modal .teaser-inventory-btn {
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.3), rgba(0, 150, 255, 0.15));
    color: #00ccff;
    border: 2px solid #00ccff;
}

.auto-farm-teaser-modal .teaser-ok-btn {
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Make button row wrap to 2 rows on narrow screens with 3 buttons */
.results-btn-row {
    flex-wrap: wrap;
}

.results-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.results-sheet-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
}

.results-sheet-title.victory {
    color: var(--success-color);
}

.results-sheet-title.defeat {
    color: var(--danger-color);
}

.results-sheet-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
}

.results-sheet-content {
    padding: 16px;
}

/* Single Battle Results */
.single-battle-results {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.battle-rewards-section {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: 16px;
}

.battle-rewards-title {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.battle-rewards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.battle-reward-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
}

.battle-reward-icon {
    font-size: 1.2rem;
}

.battle-reward-value {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
}

/* Farming Session Summary */
.farming-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.farming-summary-header {
    text-align: center;
    padding: 16px;
    background: rgba(147, 51, 234, 0.15);
    border-radius: var(--radius-md);
}

.farming-summary-count {
    font-size: 2.5rem;
    font-family: 'Orbitron', monospace;
    color: var(--primary-color);
}

.farming-summary-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Mobile Farming Summary (inside results modal) */
.mobile-farming-summary {
    width: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.mobile-farming-summary .farming-summary-header {
    text-align: center;
    margin-bottom: 12px;
}

.mobile-farming-summary .farming-summary-header h4 {
    font-size: 1.1rem;
    color: var(--success-color);
    margin: 0 0 4px 0;
}

.mobile-farming-summary .farming-totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.mobile-farming-summary .farming-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.mobile-farming-summary .farming-total-row span:last-child {
    font-family: 'Orbitron', monospace;
    color: var(--primary-color);
}

/* Agent Drops Collapsible Section */
.farming-drops-section {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 12px;
}

.farming-drops-collapsed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.farming-drops-collapsed:active {
    background: rgba(255, 255, 255, 0.1);
}

#farming-drops-summary {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.drops-chevron {
    color: var(--text-secondary);
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.drops-chevron.expanded {
    transform: rotate(90deg);
}

.farming-drops-expanded {
    padding: 0 16px 16px;
}

.farming-drops-title {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Agent Cards Horizontal Scroll */
.farming-drops-cards {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.farming-drops-cards::-webkit-scrollbar {
    display: none;
}

/* Scroll row wrapper for arrow alignment */
.farming-drops-scroll-row {
    overflow: hidden;
}

/* Navigation arrows for agent cards - hidden on mobile, shown on desktop */
.farming-drops-nav {
    display: none;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: 8px;
}

.farming-drops-arrow {
    width: 40px;
    height: 32px;
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--primary-color);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.farming-drops-arrow:hover {
    background: rgba(0, 212, 255, 0.25);
    border-color: var(--primary-color);
}

.farming-drops-arrow:active {
    transform: scale(0.95);
}

.farming-drops-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Show arrows on desktop (mouse users) */
@media (min-width: 768px) and (pointer: fine) {
    .farming-drops-nav {
        display: flex;
    }
}

/* Compact Agent Card */
.mobile-agent-card {
    flex: 0 0 auto;
    width: 70px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: var(--radius-sm);
    padding: 8px 6px;
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.mobile-agent-card.tier-1 {
    border-color: #888;
}

.mobile-agent-card.tier-2 {
    border-color: #2ecc71;
}

.mobile-agent-card.tier-3 {
    border-color: #9b59b6;
}

.mobile-agent-card.tier-4 {
    border-color: #f39c12;
}

.mobile-agent-icon {
    font-size: 1.2rem;
    display: block;
    margin-bottom: 4px;
}

.mobile-agent-tier {
    font-size: 0.65rem;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 2px;
}

.mobile-agent-tier.t1 { background: #888; color: #000; }
.mobile-agent-tier.t2 { background: #2ecc71; color: #000; }
.mobile-agent-tier.t3 { background: #9b59b6; color: #fff; }
.mobile-agent-tier.t4 { background: #f39c12; color: #000; }

.mobile-agent-level {
    font-size: 0.7rem;
    color: var(--text-secondary);
    display: block;
}

.mobile-agent-qty {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--primary-color);
    display: block;
    margin-top: 2px;
}

.mobile-agent-skill {
    font-size: 0.8rem;
    display: block;
    margin-top: 2px;
}

/* Farming Bonus Indicator */
.farming-bonus-indicator {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(147, 51, 234, 0.1));
    border: 1px solid rgba(147, 51, 234, 0.3);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    text-align: center;
}

#farming-bonus-text {
    font-size: 0.9rem;
    color: var(--primary-color);
}

/* ========================================
   EVENT SHOP (Mobile)
   ======================================== */
.event-shop-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--background-dark);
}

/* Shop Top Bar */
.shop-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--background-medium);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    position: sticky;
    top: 0;
    z-index: 100;
}

.shop-back-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.5rem;
    padding: 8px;
    cursor: pointer;
    line-height: 1;
}

.shop-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0;
    font-weight: 600;
}

.shop-token-balance {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 175, 55, 0.15);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.shop-token-balance .token-icon {
    font-size: 1rem;
}

.shop-token-balance #shop-token-count {
    font-family: 'Orbitron', monospace;
    font-size: 0.95rem;
    color: #d4af37;
    font-weight: 600;
}

/* Shop Sections Container */
.shop-sections-container {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Shop Section */
.shop-section {
    background: var(--background-medium);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.shop-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.shop-section-header:active {
    background: rgba(0, 212, 255, 0.1);
}

.shop-section-header .section-title {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.shop-section-header .section-chevron {
    color: var(--text-secondary);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.shop-section-content.collapsed + .shop-section-header .section-chevron,
.shop-section-header[aria-expanded="false"] .section-chevron {
    transform: rotate(-90deg);
}

.shop-section-content {
    transition: max-height 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

.shop-section-content.expanded {
    max-height: 2000px;
    padding: 0 16px 16px;
}

.shop-section-content.collapsed {
    max-height: 0;
    padding: 0 16px;
}

/* Shop Items Grid */
.shop-items-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Tablet: 2-column grid */
@media (min-width: 768px) {
    .shop-items-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* Shop Item Card */
.shop-item-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shop-item-card.not-affordable {
    opacity: 0.6;
}

.shop-item-card.purchased-max {
    opacity: 0.5;
    border-color: rgba(100, 100, 100, 0.3);
}

.shop-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shop-item-icon {
    font-size: 2rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 212, 255, 0.1);
    border-radius: var(--radius-sm);
}

.shop-item-info {
    flex: 1;
}

.shop-item-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.shop-item-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.shop-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.shop-item-cost {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    color: #d4af37;
    font-weight: 600;
}

.shop-item-cost .token-icon {
    font-size: 0.9rem;
}

.shop-item-cost.not-affordable {
    color: var(--text-secondary);
}

.shop-item-limit {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.shop-item-limit.maxed {
    color: var(--success-color);
}

.shop-purchase-btn {
    padding: 10px 20px;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #000;
    background: linear-gradient(135deg, var(--primary-color), #0099cc);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.2s ease;
}

.shop-purchase-btn:active {
    transform: scale(0.97);
}

.shop-purchase-btn:disabled {
    background: rgba(100, 100, 100, 0.5);
    cursor: not-allowed;
}

.shop-purchase-btn.purchased {
    background: rgba(46, 204, 113, 0.3);
    color: var(--success-color);
    cursor: default;
}

/* Purchase Confirmation Styles */
.shop-confirm-content {
    text-align: center;
}

.shop-confirm-header {
    margin-bottom: 20px;
}

.shop-confirm-header h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    color: var(--text-primary);
    margin: 0;
}

.shop-confirm-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
}

.confirm-item-icon {
    font-size: 2.5rem;
}

.confirm-item-name {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.confirm-item-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.shop-confirm-cost {
    margin-bottom: 24px;
}

/* Quantity selector row */
.shop-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.shop-qty-label {
    font-size: 1rem;
    color: var(--text-secondary);
}
.shop-qty-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.shop-qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.shop-qty-btn:active {
    background: rgba(59, 130, 246, 0.35);
}
.shop-qty-slider {
    width: 100px;
    accent-color: #3b82f6;
    cursor: pointer;
}
.shop-qty-value {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    font-size: 1.1rem;
    color: #60a5fa;
    min-width: 24px;
    text-align: center;
}

.shop-confirm-cost .cost-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 1rem;
}

.shop-confirm-cost .cost-row:first-child {
    background: rgba(212, 175, 55, 0.1);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.shop-confirm-cost .cost-row:last-child {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.cost-value {
    font-family: 'Orbitron', monospace;
    font-weight: 600;
    color: #d4af37;
}

.balance-value {
    font-family: 'Orbitron', monospace;
    color: var(--text-secondary);
}

.shop-confirm-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shop-confirm-buttons .btn-primary-action {
    width: 100%;
    padding: 16px;
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #000;
    background: linear-gradient(135deg, var(--primary-color), #0099cc);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.shop-confirm-buttons .btn-secondary-action {
    width: 100%;
    padding: 14px;
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
}

/* ========================================
   BOSS BATTLE SUMMARY (Mobile)
   ======================================== */
.mobile-boss-summary {
    width: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.mobile-boss-summary .boss-summary-header {
    text-align: center;
    margin-bottom: 16px;
}

.mobile-boss-summary .boss-summary-header h4 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin: 0;
    font-family: 'Orbitron', monospace;
}

.mobile-boss-summary .boss-damage-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.mobile-boss-summary .boss-damage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
}

.mobile-boss-summary .boss-damage-row.primary {
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.2), rgba(0, 191, 255, 0.1));
    border: 1px solid rgba(0, 191, 255, 0.3);
}

.mobile-boss-summary .boss-damage-row .damage-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.mobile-boss-summary .boss-damage-row .damage-value {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    color: var(--primary-color);
    font-weight: 600;
}

.mobile-boss-summary .boss-damage-row.primary .damage-value {
    font-size: 1.1rem;
    color: #00ffff;
}

.mobile-boss-summary .boss-hp-progress-section {
    margin-bottom: 16px;
}

.mobile-boss-summary .boss-hp-progress-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 6px;
}

.mobile-boss-summary .boss-hp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #d4af37, #ff6b6b);
    border-radius: 5px;
    transition: width 0.5s ease;
}

.mobile-boss-summary .boss-hp-remaining {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
}

.mobile-boss-summary .boss-tokens-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--radius-sm);
}

.mobile-boss-summary .boss-tokens-section .tokens-icon {
    font-size: 1.3rem;
}

.mobile-boss-summary .boss-tokens-section .tokens-earned {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    color: #d4af37;
    font-weight: 700;
}

.mobile-boss-summary .boss-tokens-section .tokens-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.farming-totals-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.farming-total-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
}

.farming-total-icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.farming-total-value {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.farming-total-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Agent Drops Section */
.agent-drops-section {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.agent-drops-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
}

.agent-drops-title {
    font-size: 0.9rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.agent-drops-count {
    background: var(--primary-color);
    color: var(--background-dark);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
}

.agent-drops-toggle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: transform 0.3s;
}

.agent-drops-toggle.expanded {
    transform: rotate(180deg);
}

.agent-drops-list {
    padding: 12px 16px;
    display: none;
}

.agent-drops-list.expanded {
    display: block;
}

.agent-drop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.agent-drop-item:last-child {
    border-bottom: none;
}

.agent-drop-name {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.agent-drop-quantity {
    color: var(--primary-color);
    font-family: 'Orbitron', monospace;
}

/* Results Action Buttons */
.results-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-bottom: calc(8px + var(--safe-area-bottom));
}

.results-btn {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Orbitron', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    min-height: var(--touch-target-min);
}

.results-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #0099cc);
    color: var(--background-dark);
}

.results-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

/* Hide desktop combat elements on mobile */
#battle-screen .side-panel,
#battle-screen .desktop-combat-log,
#battle-screen .combat-sidebar {
    display: none !important;
}

/* ============================================
   Mobile Bottom Sheet (Generic)
   ============================================ */
.mobile-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2000;
    pointer-events: none;
}

.mobile-bottom-sheet.active {
    pointer-events: auto;
}

.bottom-sheet-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.mobile-bottom-sheet.active .bottom-sheet-overlay {
    background: rgba(0, 0, 0, 0.6);
}

.bottom-sheet-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--background-medium);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-height: 80vh;
    overflow-y: auto;
}

.mobile-bottom-sheet.active .bottom-sheet-content {
    transform: translateY(0);
}

.bottom-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-sheet-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.bottom-sheet-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
}

.bottom-sheet-body {
    padding: 16px;
}

/* Accelerator Sheet Specific */
.accelerator-info {
    text-align: center;
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.accelerator-info strong {
    color: var(--gold-color);
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
}

.accelerator-desc {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.accelerator-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.accelerator-action-btn {
    flex: 1;
    max-width: 100px;
    padding: 16px 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    border-radius: var(--radius-md);
    color: #000;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.2s ease;
}

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

.accelerator-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.1);
}

/* ================================================
   SHIPYARD - MOBILE
   ================================================ */

/* Hide desktop shipyard on mobile */
#shipyard {
    display: none !important;
}

#shipyard-mobile {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-dark, #0a0a1a);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#shipyard-mobile::-webkit-scrollbar {
    display: none;
}

#shipyard-mobile.active {
    display: flex;
}

/* Header */
.sy-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(20, 20, 40, 0.95);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    flex-shrink: 0;
}

.sy-back-btn {
    background: none;
    border: none;
    color: var(--primary-color, #00d4ff);
    font-size: 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: calc(-1 * var(--spacing-xs)) calc(-1 * var(--spacing-sm));
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    transition: all 0.15s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.sy-back-btn:active {
    background: rgba(0, 212, 255, 0.15);
    transform: scale(0.95);
}

.sy-title {
    flex: 1;
    text-align: center;
    font-size: 1.2rem;
    margin: 0;
    color: var(--text-primary, #ffffff);
    font-family: 'Orbitron', monospace;
}

/* Resource Bar */
.sy-resource-bar {
    display: flex;
    justify-content: space-around;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.sy-resource {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary, #b0b0b0);
}

.sy-resource-icon {
    font-size: 1rem;
}

/* Segmented Control */
.sy-mode-toggle {
    display: flex;
    gap: 0;
    margin: var(--spacing-md);
    background: var(--background-dark, #0d1117);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    border: 2px solid var(--primary-color, #00d4ff);
    flex-shrink: 0;
}

.sy-mode-btn {
    flex: 1;
    padding: var(--spacing-md);
    min-height: 48px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--text-secondary, #b0b0b0);
    font-family: 'Orbitron', monospace;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sy-mode-btn.active {
    background: var(--primary-gradient, linear-gradient(135deg, #00d4ff, #0099cc));
    color: var(--background-dark, #0d1117);
}

.sy-mode-btn:active {
    transform: scale(0.97);
}

/* Content Areas */
.sy-content-area {
    flex: 1;
    padding: 0 var(--spacing-md) var(--spacing-md);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sy-content-area::-webkit-scrollbar {
    display: none;
}

/* Tier Selector Pills */
.sy-tier-row {
    display: flex;
    gap: var(--spacing-xs, 4px);
    padding: var(--spacing-sm) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
}

.sy-tier-row::-webkit-scrollbar {
    display: none;
}

.sy-tier-btn {
    flex-shrink: 0;
    flex: 1;
    padding: 10px 16px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-secondary, #b0b0b0);
    font-size: 0.85rem;
    font-family: 'Orbitron', monospace;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    text-align: center;
}

.sy-tier-btn.active {
    background: var(--primary-color, #00d4ff);
    color: #000;
    border-color: var(--primary-color, #00d4ff);
    font-weight: 700;
}

.sy-tier-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.sy-tier-btn.locked::after {
    content: ' 🔒';
}

.sy-tier-btn:active:not(.locked) {
    transform: scale(0.95);
}

/* Class Info */
.sy-class-info {
    text-align: center;
    padding: var(--spacing-sm) 0;
}

.sy-class-title {
    font-size: 1.1rem;
    margin: 0 0 4px;
    color: var(--text-primary, #ffffff);
    font-family: 'Orbitron', monospace;
}

.sy-class-desc {
    font-size: 0.85rem;
    margin: 0;
    color: var(--text-secondary, #b0b0b0);
}

/* Ship Preview Grid (2×2) */
.sy-ship-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs, 4px);
    padding: var(--spacing-sm) 0;
}

.sy-ship-card {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.9), rgba(20, 20, 40, 0.9));
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: var(--radius-md, 12px);
    padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
    text-align: center;
}

.sy-ship-img {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.sy-ship-img img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    image-rendering: pixelated;
}

.sy-ship-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    font-family: 'Orbitron', monospace;
    line-height: 1.2;
}

.sy-ship-desc {
    display: none;
}

/* Purchase Area */
.sy-purchase-area {
    padding: var(--spacing-md) 0;
    text-align: center;
}

.sy-fleet-status {
    font-size: 0.85rem;
    color: var(--text-secondary, #b0b0b0);
    margin-bottom: var(--spacing-sm);
}

.sy-purchase-btn {
    font-size: 1rem;
    font-weight: 700;
    padding: var(--spacing-md) var(--spacing-lg);
}

.sy-purchase-note {
    font-size: 0.75rem;
    color: var(--text-secondary, #b0b0b0);
    margin-top: var(--spacing-sm);
    opacity: 0.7;
}

/* ===== PILOTS MODE ===== */

/* Recruitment Card */
.sy-recruit-card {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.9), rgba(20, 20, 40, 0.9));
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-lg, 16px);
    padding: var(--spacing-lg, 20px);
    margin-top: var(--spacing-sm);
}

.sy-recruit-header {
    text-align: center;
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--spacing-md);
}

.sy-recruit-title {
    font-size: 1.1rem;
    margin: 0 0 4px;
    color: var(--text-primary, #ffffff);
    font-family: 'Orbitron', monospace;
}

.sy-recruit-desc {
    font-size: 0.85rem;
    margin: 0;
    color: var(--text-secondary, #b0b0b0);
}

/* Pilot Showcase Carousel */
.sy-pilot-showcase {
    margin: 0 calc(-1 * var(--spacing-xs, 4px)) var(--spacing-md);
    padding: 0 34px 2px;
    position: relative;
    overflow: visible;
}

.sy-pilot-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding: 2px var(--spacing-xs, 4px) 8px;
}

.sy-pilot-carousel::-webkit-scrollbar {
    display: none;
}

.sy-pilot-arrow {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 58px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 212, 255, 0.5);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.22), rgba(10, 12, 28, 0.94));
    color: #ffffff;
    font-family: 'Orbitron', monospace;
    font-size: 1.85rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32), inset 0 0 12px rgba(0, 212, 255, 0.12);
}

.sy-pilot-arrow-left {
    left: 0;
}

.sy-pilot-arrow-right {
    right: 0;
}

.sy-pilot-arrow:active:not(:disabled) {
    transform: translateY(-50%) scale(0.94);
}

.sy-pilot-arrow:disabled {
    opacity: 0.32;
    cursor: default;
    box-shadow: none;
}

.sy-pilot-showcase-card {
    flex: 0 0 clamp(126px, 28vw, 172px);
    min-height: 188px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px 8px;
    background: radial-gradient(circle at 50% 18%, rgba(255, 215, 0, 0.16), transparent 34%), linear-gradient(160deg, rgba(18, 32, 58, 0.96), rgba(12, 13, 34, 0.96));
    border: 1px solid rgba(0, 212, 255, 0.28);
    border-radius: 8px;
    box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.28);
    position: relative;
    overflow: hidden;
}

.sy-pilot-showcase-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0.72;
}

.sy-pilot-showcase-card > * {
    position: relative;
    z-index: 1;
}

.sy-pilot-showcase-portrait {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08), rgba(0, 212, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08), 0 0 20px rgba(0, 212, 255, 0.16);
    overflow: hidden;
}

.sy-pilot-showcase-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sy-pilot-showcase-fallback {
    font-size: 2.4rem;
    line-height: 1;
}

.sy-pilot-nameplate {
    width: 100%;
    min-height: 74px;
    margin-top: 10px;
    padding: 7px 7px 6px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.18), rgba(0, 0, 0, 0.42));
    border: 1px solid rgba(255, 215, 0, 0.36);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 14px rgba(0, 0, 0, 0.24);
    position: relative;
    overflow: hidden;
}

.sy-pilot-nameplate::before {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 4px;
    height: 1px;
    background: rgba(255, 255, 255, 0.42);
    opacity: 0.75;
}

.sy-pilot-nameplate > * {
    position: relative;
    z-index: 1;
}

.sy-pilot-showcase-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.76rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.sy-pilot-showcase-role {
    margin-top: 4px;
    font-size: 0.62rem;
    line-height: 1.15;
    color: rgba(210, 235, 255, 0.78);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sy-pilot-showcase-tier {
    margin-top: 5px;
    font-size: 0.58rem;
    line-height: 1;
    color: #ffd76a;
    text-transform: uppercase;
    letter-spacing: 0;
}

.sy-pilot-tier-basic {
    background: radial-gradient(circle at 50% 18%, rgba(0, 212, 255, 0.18), transparent 34%), linear-gradient(160deg, rgba(17, 38, 62, 0.97), rgba(8, 14, 31, 0.98));
    border-color: rgba(0, 212, 255, 0.42);
    box-shadow: inset 0 0 22px rgba(0, 212, 255, 0.1), 0 10px 22px rgba(0, 0, 0, 0.3);
}

.sy-pilot-tier-basic::before {
    box-shadow: inset 0 0 0 1px rgba(95, 221, 255, 0.1);
}

.sy-pilot-tier-basic .sy-pilot-showcase-portrait {
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1), 0 0 20px rgba(0, 212, 255, 0.18);
}

.sy-pilot-tier-basic .sy-pilot-nameplate {
    background: linear-gradient(180deg, rgba(55, 161, 196, 0.3), rgba(8, 18, 31, 0.86) 48%, rgba(5, 10, 18, 0.94));
    border-color: rgba(0, 212, 255, 0.48);
}

.sy-pilot-tier-basic .sy-pilot-showcase-tier {
    color: #5fe4ff;
}

.sy-pilot-tier-premier {
    background: radial-gradient(circle at 50% 18%, rgba(205, 232, 255, 0.24), transparent 35%), linear-gradient(160deg, rgba(25, 44, 70, 0.97), rgba(9, 13, 31, 0.98));
    border-color: rgba(163, 215, 255, 0.54);
    box-shadow: inset 0 0 24px rgba(132, 198, 255, 0.14), 0 10px 24px rgba(0, 0, 0, 0.32);
}

.sy-pilot-tier-premier::before {
    background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.1) 28%, transparent 46%);
}

.sy-pilot-tier-premier .sy-pilot-showcase-portrait {
    border-color: rgba(220, 242, 255, 0.34);
    box-shadow: 0 0 0 3px rgba(166, 216, 255, 0.12), 0 0 22px rgba(132, 198, 255, 0.24);
}

.sy-pilot-tier-premier .sy-pilot-nameplate {
    background: linear-gradient(180deg, rgba(238, 247, 255, 0.28), rgba(35, 71, 103, 0.72) 43%, rgba(7, 12, 24, 0.94));
    border-color: rgba(190, 229, 255, 0.64);
}

.sy-pilot-tier-premier .sy-pilot-showcase-tier {
    color: #cfeeff;
}

.sy-pilot-tier-elite {
    background: radial-gradient(circle at 50% 18%, rgba(255, 190, 66, 0.24), transparent 34%), linear-gradient(160deg, rgba(48, 35, 19, 0.97), rgba(11, 10, 24, 0.98));
    border-color: rgba(255, 186, 72, 0.58);
    box-shadow: inset 0 0 24px rgba(255, 176, 45, 0.14), 0 10px 24px rgba(0, 0, 0, 0.34);
}

.sy-pilot-tier-elite::before {
    background: linear-gradient(180deg, rgba(255, 207, 101, 0.12), transparent 42%);
}

.sy-pilot-tier-elite .sy-pilot-showcase-portrait {
    border-color: rgba(255, 216, 135, 0.34);
    box-shadow: 0 0 0 3px rgba(255, 190, 66, 0.13), 0 0 24px rgba(255, 174, 33, 0.26);
}

.sy-pilot-tier-elite .sy-pilot-nameplate {
    background: linear-gradient(180deg, rgba(255, 197, 73, 0.32), rgba(66, 42, 16, 0.82) 43%, rgba(8, 8, 16, 0.96));
    border-color: rgba(255, 198, 74, 0.7);
}

.sy-pilot-tier-elite .sy-pilot-showcase-tier {
    color: #ffd06a;
}

.sy-pilot-tier-ultimate {
    background: radial-gradient(circle at 50% 18%, rgba(255, 58, 124, 0.22), transparent 33%), radial-gradient(circle at 72% 0%, rgba(108, 92, 255, 0.18), transparent 32%), linear-gradient(160deg, rgba(52, 13, 35, 0.97), rgba(8, 8, 23, 0.98));
    border-color: rgba(255, 77, 130, 0.62);
    box-shadow: inset 0 0 26px rgba(255, 58, 124, 0.14), 0 10px 26px rgba(0, 0, 0, 0.36);
}

.sy-pilot-tier-ultimate::before {
    background: linear-gradient(120deg, rgba(0, 212, 255, 0.12), transparent 28%, rgba(255, 214, 106, 0.14) 54%, transparent 76%);
}

.sy-pilot-tier-ultimate .sy-pilot-showcase-portrait {
    border-color: rgba(255, 152, 188, 0.42);
    box-shadow: 0 0 0 3px rgba(255, 58, 124, 0.14), 0 0 24px rgba(255, 58, 124, 0.28), 0 0 30px rgba(80, 190, 255, 0.1);
}

.sy-pilot-tier-ultimate .sy-pilot-nameplate {
    background: linear-gradient(180deg, rgba(255, 72, 133, 0.34), rgba(82, 24, 61, 0.82) 43%, rgba(9, 8, 20, 0.96));
    border-color: rgba(255, 112, 162, 0.72);
}

.sy-pilot-tier-ultimate .sy-pilot-showcase-tier {
    color: #ff9dc0;
}

.sy-pilot-empty-showcase {
    min-height: 120px;
    display: flex;
    align-items: center;
    color: var(--text-secondary, #b0b0b0);
    font-size: 0.85rem;
}

/* Recruit Info Rows */
.sy-recruit-info {
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--spacing-md);
}

.sy-recruit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.sy-recruit-label {
    font-size: 0.85rem;
    color: var(--text-secondary, #b0b0b0);
}

.sy-recruit-value {
    font-size: 0.9rem;
    color: var(--text-primary, #ffffff);
    font-weight: 600;
}

.sy-pity-row .sy-recruit-value {
    color: var(--primary-color, #00d4ff);
}

.sy-pity-note {
    font-size: 0.75rem;
    color: rgba(255, 215, 0, 0.7);
    text-align: right;
    margin-top: 2px;
}

/* Pull Rates */
.sy-recruit-rates {
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.sy-rates-title {
    font-size: 0.9rem;
    color: var(--text-primary, #ffffff);
    margin: 0 0 var(--spacing-sm);
    font-family: 'Orbitron', monospace;
}

.sy-rate-row {
    display: flex;
    align-items: center;
    padding: 4px 0;
    font-size: 0.85rem;
}

.sy-rate-stars {
    width: 80px;
    flex-shrink: 0;
    color: #C0C0C0;
    font-size: 0.75rem;
}

.sy-rate-label {
    flex: 1;
    color: var(--text-secondary, #b0b0b0);
}

.sy-rate-pct {
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    min-width: 40px;
    text-align: right;
}

.sy-rate-gold {
    background: rgba(255, 215, 0, 0.08);
    border-radius: var(--radius-sm, 8px);
    padding: 4px 8px;
    margin: 2px -8px;
}

.sy-rate-gold .sy-rate-stars {
    color: #FFD700;
}

.sy-rate-gold .sy-rate-label {
    color: #FFD700;
    font-weight: 600;
}

.sy-rate-gold .sy-rate-pct {
    color: #FFD700;
}

/* Recruit Button */
.sy-token-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.sy-recruit-btn {
    font-size: 1rem;
    font-weight: 700;
    padding: var(--spacing-md) var(--spacing-lg);
    margin-top: 0;
    min-height: 52px;
}

.sy-universal-token-btn:not(:disabled) {
    background: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
    border-color: rgba(125, 211, 252, 0.85);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(8, 145, 178, 0.28);
}

.sy-universal-token-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(8, 145, 178, 0.22);
}

/* Token Section */
.sy-token-section {
    margin-top: var(--spacing-md);
}

.sy-token-divider {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary, #b0b0b0);
    margin-bottom: var(--spacing-sm);
    opacity: 0.6;
}

.sy-token-btn {
    font-size: 0.9rem;
}

/* ===== PILOT REVEAL OVERLAY ===== */

.sy-pilot-reveal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

.sy-reveal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.sy-reveal-container {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Rarity Glow */
.sy-reveal-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    animation: syRevealGlow 1s ease-out forwards;
    pointer-events: none;
}

.sy-reveal-glow.star-1 { background: #808080; }
.sy-reveal-glow.star-2 { background: #4CAF50; }
.sy-reveal-glow.star-3 { background: #2196F3; }
.sy-reveal-glow.star-4 { background: #9C27B0; }
.sy-reveal-glow.star-5 { background: #FF9800; }
.sy-reveal-glow.star-6 { background: #FFD700; }

@keyframes syRevealGlow {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
    100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
}

/* Reveal Card */
.sy-reveal-card {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: linear-gradient(145deg, #1a1f3a, #0d1220);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-lg, 16px);
    padding: var(--spacing-lg, 20px);
    opacity: 0;
    transform: translateY(40px);
    animation: syRevealCardIn 0.5s ease-out 0.5s forwards;
}

@keyframes syRevealCardIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sy-reveal-stars {
    text-align: center;
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
    min-height: 40px;
    color: #b0b8c8;
}

.sy-reveal-stars.gold-star {
    font-size: 3rem;
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.sy-reveal-name {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    font-family: 'Orbitron', monospace;
    margin-bottom: 4px;
}

/* Pilot headshot portrait in reveal */
.sy-reveal-portrait {
    text-align: center;
    margin-bottom: 8px;
}
.sy-reveal-headshot {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-color, #00d4ff);
    box-shadow: 0 0 16px rgba(0, 212, 255, 0.4);
}

.sy-reveal-class {
    text-align: center;
    font-size: 0.85rem;
    color: var(--primary-color, #00d4ff);
    margin-bottom: var(--spacing-md);
}

/* Stats Grid */
.sy-reveal-stats h3 {
    font-size: 0.85rem;
    color: var(--text-secondary, #b0b0b0);
    margin: 0 0 var(--spacing-sm);
    font-family: 'Orbitron', monospace;
    text-align: center;
}

.sy-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: var(--spacing-md);
}

.sy-stat-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm, 8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.sy-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary, #b0b0b0);
    font-weight: 600;
}

.sy-stat-value {
    font-size: 0.8rem;
    color: var(--text-primary, #ffffff);
    font-weight: 700;
}

/* Skills Section */
.sy-reveal-skills {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.sy-reveal-skills h3 {
    font-size: 0.85rem;
    color: var(--text-secondary, #b0b0b0);
    margin: 0 0 var(--spacing-sm);
    font-family: 'Orbitron', monospace;
    text-align: center;
}

.sy-skill-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}

.sy-skill-arrow {
    background: rgba(255, 149, 0, 0.15);
    border: 1px solid rgba(255, 149, 0, 0.4);
    color: #ff9500;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm, 8px);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 40px;
    padding: 0;
}

.sy-skill-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.sy-skill-arrow:active:not(:disabled) {
    transform: scale(0.9);
    background: rgba(255, 149, 0, 0.3);
}

.sy-skill-counter {
    font-size: 0.8rem;
    color: var(--text-secondary, #b0b0b0);
}

.sy-skill-detail {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm, 8px);
    padding: var(--spacing-sm) var(--spacing-md);
}

.sy-skill-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ff9500;
    margin-bottom: 4px;
}

.sy-skill-desc {
    font-size: 0.8rem;
    color: var(--text-secondary, #b0b0b0);
    line-height: 1.4;
    margin-bottom: 6px;
}

.sy-skill-meta {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Continue Button */
.sy-reveal-continue {
    font-size: 1rem;
    font-weight: 700;
    margin-top: var(--spacing-sm);
}

/* ================================================
   FLEET MANAGEMENT - MOBILE
   ================================================ */

#fleet-management-mobile {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-dark, #0a0a1a);
}

#fleet-management-mobile.active {
    display: flex;
}

/* Header */
.fm-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(20, 20, 40, 0.95);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.fm-back-btn {
    background: none;
    border: none;
    color: var(--primary-color, #00d4ff);
    font-size: 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: calc(-1 * var(--spacing-xs)) calc(-1 * var(--spacing-sm));
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    transition: all 0.15s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.fm-back-btn:active {
    background: rgba(0, 212, 255, 0.15);
    transform: scale(0.95);
}

.fm-title {
    flex: 1;
    text-align: center;
    font-size: 1.2rem;
    margin: 0;
    color: var(--text-primary, #ffffff);
}

/* Resource Bar */
.fm-resource-bar {
    display: flex;
    justify-content: space-around;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fm-resource {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary, #b0b0b0);
}

.fm-resource-icon {
    font-size: 1rem;
}

/* Filter Rows */
.fm-filter-row {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.fm-filter-row::-webkit-scrollbar {
    display: none;
}

.fm-filter-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-secondary, #b0b0b0);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.fm-filter-btn:active {
    transform: scale(0.95);
    background: rgba(0, 212, 255, 0.1);
}

.fm-filter-btn.active {
    background: var(--primary-color, #00d4ff);
    color: #000;
    border-color: var(--primary-color, #00d4ff);
}

.fm-filter-btn.active:active {
    background: #00b8e0;
}

.fm-filter-btn.locked {
    opacity: 0.5;
    color: var(--text-muted, #666);
}

.fm-filter-btn.locked::after {
    content: ' 🔒';
}

/* Ship List */
.fm-ship-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ================================================
   FLEET MANAGEMENT - MODE TOGGLE
   ================================================ */

.fm-mode-toggle {
    display: flex;
    gap: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
}

.fm-mode-btn {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-secondary, #b0b0b0);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.fm-mode-btn:first-child {
    border-radius: 20px 0 0 20px;
    border-right: none;
}

.fm-mode-btn:last-child {
    border-radius: 0 20px 20px 0;
}

.fm-mode-btn.active {
    background: var(--primary-color, #00d4ff);
    color: #000;
    border-color: var(--primary-color, #00d4ff);
    font-weight: 600;
}

.fm-mode-btn:active {
    transform: scale(0.97);
}

/* ================================================
   FLEET MANAGEMENT - PILOT LIST & FILTERS
   ================================================ */

.fm-pilot-filters {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
}

.fm-pilot-filter-btn {
    padding: 8px 16px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-secondary, #b0b0b0);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.fm-pilot-filter-btn:active {
    transform: scale(0.95);
    background: rgba(0, 212, 255, 0.1);
}

.fm-pilot-filter-btn.has-filters,
.fm-pilot-filter-btn.filters-active {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--primary-color, #00d4ff);
    color: var(--primary-color, #00d4ff);
}

.fm-pilot-count {
    font-size: 0.8rem;
    color: var(--text-muted, #666);
    margin-left: auto;
}

/* ============================================
   Pilot Filter Bottom Sheet (.pf-*)
   ============================================ */

.pf-content {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.pf-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 0;
}

.pf-section {
    margin-bottom: 16px;
}

.pf-section-label {
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #b0b0b0);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.pf-section-hint {
    font-size: 0.7rem;
    color: var(--text-muted, #666);
    margin-bottom: 8px;
    font-style: italic;
}

.pf-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-chip {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted, #888);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.pf-chip.active {
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.5);
    color: var(--primary-color, #00d4ff);
}

.pf-chip:active {
    transform: scale(0.93);
}

/* Tier chip color accents when active */
.pf-tier-chip.basic.active {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.5);
    color: #94a3b8;
}

.pf-tier-chip.premier.active {
    background: rgba(52, 211, 153, 0.15);
    border-color: rgba(52, 211, 153, 0.5);
    color: #34d399;
}

.pf-tier-chip.elite.active {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.5);
    color: #60a5fa;
}

.pf-tier-chip.ultimate.active {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.5);
    color: #a855f7;
}

/* Gold star chip */
.pf-star-chip.gold.active {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.5);
    color: #f59e0b;
}

/* Name search input */
.pf-search-input {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-primary, #fff);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.pf-search-input:focus {
    border-color: rgba(0, 212, 255, 0.5);
}

.pf-search-input::placeholder {
    color: var(--text-muted, #666);
}

/* Name chips scrollable area */
.pf-name-chips {
    max-height: 120px;
    overflow-y: auto;
}

/* Actions bar (sticky at bottom) */
.pf-actions {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pf-reset-btn,
.pf-apply-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.pf-reset-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary, #b0b0b0);
}

.pf-reset-btn:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.97);
}

.pf-apply-btn {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(0, 150, 200, 0.3));
    border: 1px solid rgba(0, 212, 255, 0.5);
    color: #00d4ff;
}

.pf-apply-btn:active {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.5), rgba(0, 150, 200, 0.5));
    transform: scale(0.97);
}

.fm-pilot-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.fm-pilot-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #666);
    font-size: 1rem;
}

/* ================================================
   FLEET MANAGEMENT - PILOT CARDS
   ================================================ */

.fm-pilot-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.9), rgba(20, 20, 40, 0.9));
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.fm-pilot-card:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, rgba(40, 40, 80, 0.9), rgba(30, 30, 60, 0.9));
}

.fm-pilot-icon {
    font-size: 2rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 50%;
}

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

.fm-pilot-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fm-pilot-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary, #b0b0b0);
    margin-bottom: 4px;
}

.fm-pilot-sep {
    opacity: 0.5;
}

.fm-pilot-level {
    color: var(--text-secondary, #b0b0b0);
}

.fm-pilot-tier {
    font-weight: 500;
}

.fm-pilot-tier.basic { color: #b0b0b0; }
.fm-pilot-tier.premier { color: #4fc3f7; }
.fm-pilot-tier.elite { color: #ab47bc; }
.fm-pilot-tier.ultimate { color: #ffd740; }

.fm-pilot-stars-row {
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.fm-pilot-stars {
    color: #b0b8c8;
}

.fm-pilot-stars.gold-star {
    font-size: 1rem;
    color: #ffd740;
}

.fm-pilot-badge-area {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.fm-pilot-auto-assign-btn {
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.2), rgba(0, 120, 200, 0.3));
    border: 1px solid rgba(0, 191, 255, 0.4);
    border-radius: 8px;
    color: #00bfff;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.fm-pilot-auto-assign-btn:active {
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.4), rgba(0, 120, 200, 0.5));
    transform: scale(0.95);
}

.fm-pilot-badge {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    white-space: nowrap;
}

.fm-pilot-badge.upgrade {
    background: rgba(171, 71, 188, 0.2);
    border: 1px solid rgba(171, 71, 188, 0.4);
    color: #ce93d8;
}

/* Ship Card */
.fm-ship-card {
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.9), rgba(20, 20, 40, 0.9));
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.fm-ship-card:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, rgba(40, 40, 80, 0.9), rgba(30, 30, 60, 0.9));
}

.fm-ship-card-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 14px 16px;
    position: relative;
}

/* Lock badge on fleet cards */
.fm-lock-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 0.7rem;
    line-height: 1;
    z-index: 2;
    opacity: 0.8;
}

.fm-ship-image {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}

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

.fm-ship-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    margin-bottom: 2px;
}

.fm-ship-level {
    font-size: 0.8rem;
    color: var(--text-secondary, #b0b0b0);
    margin-bottom: 6px;
}

.fm-ship-xp-bar {
    height: 5px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 2px;
}

.fm-ship-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color, #00d4ff), #d4af37);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.fm-ship-xp-text {
    font-size: 0.65rem;
    color: var(--text-secondary, #8899aa);
    margin-top: 1px;
    line-height: 1;
}

.fm-ship-xp-text.fm-xp-max {
    color: #d4af37;
    font-weight: 600;
}

.fm-ship-stats {
    text-align: right;
}

.fm-ship-cp {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color, #00d4ff);
}

.fm-ship-cp-label {
    font-size: 0.7rem;
    color: var(--text-muted, #666);
}

/* ---- Pilot Chip (collapsed row) ---- */
.fm-pilot-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.fm-pilot-chip-assigned {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.5);
}

.fm-pilot-chip-empty {
    background: rgba(80, 80, 100, 0.2);
    border: 1px solid rgba(80, 80, 100, 0.4);
}

.fm-pilot-chip-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(59, 130, 246, 0.9);
    line-height: 1;
}

.fm-pilot-chip-none {
    color: var(--text-muted, #666);
    font-weight: 400;
}

.fm-pilot-chip-lvl {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(59, 130, 246, 0.7);
    line-height: 1;
}

/* ---- Pilot Expanded (accordion) ---- */
.fm-ship-card-expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.fm-ship-card.fm-expanded .fm-ship-card-expand {
    max-height: 80px;
}

.fm-pilot-expanded {
    padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0;
}

.fm-pilot-expanded-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.fm-pilot-expanded-icon {
    font-size: 0.9rem;
}

.fm-pilot-expanded-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(59, 130, 246, 0.9);
}

.fm-pilot-expanded-level {
    font-size: 0.75rem;
    color: var(--text-secondary, #b0b0b0);
    margin-left: auto;
}

.fm-pilot-no-pilot {
    color: var(--text-muted, #666);
    font-weight: 400;
    font-style: italic;
}

.fm-pilot-xp-bar {
    height: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 2px;
}

.fm-pilot-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.6), rgba(129, 170, 246, 0.7));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.fm-pilot-xp-text {
    font-size: 0.65rem;
    color: var(--text-muted, #666);
    text-align: right;
}

/* Empty State */
.fm-empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #666);
    font-size: 1rem;
}

/* ================================================
   SHIP DETAIL - MOBILE
   ================================================ */

#ship-detail-mobile {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-dark, #0a0a1a);
}

#ship-detail-mobile.active {
    display: flex;
}

/* Header */
.sd-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(20, 20, 40, 0.95);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    position: sticky;
    top: 0;
    z-index: 10;
}

.sd-back-btn {
    background: none;
    border: none;
    color: var(--primary-color, #00d4ff);
    font-size: 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: calc(-1 * var(--spacing-xs)) calc(-1 * var(--spacing-sm));
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    transition: all 0.15s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.sd-back-btn:active {
    background: rgba(0, 212, 255, 0.15);
    transform: scale(0.95);
}

.sd-title {
    flex: 1;
    text-align: center;
    font-size: 1.1rem;
    margin: 0;
    color: var(--text-primary, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-header-spacer {
    width: 60px; /* Balance the back button */
}

/* Lock button in header */
.sd-lock-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.25rem;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}

.sd-lock-btn:active {
    transform: scale(0.9);
}

.sd-lock-btn.sd-lock-active {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.1);
}

/* Scrollable Content */
.sd-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 80px; /* Space for sticky footer */
}

/* Overview Card */
.sd-overview {
    padding: 12px var(--spacing-md);
    background: linear-gradient(135deg, rgba(30, 30, 60, 0.9), rgba(20, 20, 40, 0.9));
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.sd-ship-visual {
    text-align: center;
    margin-bottom: 4px;
}

.sd-ship-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.sd-ship-identity {
    text-align: center;
    margin-bottom: 8px;
}

.sd-ship-class {
    font-size: 0.8rem;
    color: var(--text-secondary, #b0b0b0);
    text-transform: capitalize;
    margin-bottom: 0;
}

.sd-ship-level {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    display: inline;
}

.sd-xp-progress {
    margin-top: 6px;
    width: 100%;
}

.sd-xp-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.sd-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color, #00d4ff), #d4af37);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.sd-xp-fill.sd-xp-max {
    background: linear-gradient(90deg, #d4af37, #ffd700);
}

.sd-xp-text {
    font-size: 0.75rem;
    color: var(--text-secondary, #8899aa);
    line-height: 1.2;
}

.sd-xp-max-text {
    color: #d4af37;
    font-weight: 600;
}

.sd-ship-cp {
    font-size: 0.9rem;
    color: var(--primary-color, #00d4ff);
    font-weight: 600;
    display: inline;
    margin-left: 8px;
}

.sd-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    text-align: center;
}

.sd-stat {
    padding: 2px;
}

.sd-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
}

.sd-stat-label {
    font-size: 0.6rem;
    color: var(--text-muted, #666);
    text-transform: uppercase;
}

/* Sections */
.sd-section {
    padding: var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sd-section-header {
    margin-bottom: var(--spacing-sm);
}

.sd-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
}

.sd-booster-info {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    line-height: 1.5;
}

.sd-booster-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sd-booster-btn {
    width: 100%;
    min-height: 58px;
    padding: 10px 8px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 150, 200, 0.25));
    color: #7dd3fc;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all 0.15s ease;
}

.sd-booster-btn:active {
    transform: scale(0.97);
}

.sd-booster-btn.ship-xp {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.14), rgba(22, 163, 74, 0.24));
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.32);
}

.sd-booster-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.sd-booster-count {
    font-size: 0.7rem;
    opacity: 0.72;
}

.sd-booster-empty {
    color: #94a3b8;
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 6px;
}

/* Pilot Slot */
.sd-pilot-slot {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm, 8px);
    padding: var(--spacing-md);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.sd-pilot-slot:active {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 212, 255, 0.3);
}

/* Assigned pilot state */
.sd-pilot-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
}

.sd-pilot-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-pilot-headshot {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

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

.sd-pilot-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    font-family: 'Orbitron', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-pilot-meta {
    font-size: 0.8rem;
    color: var(--text-secondary, #b0b0b0);
    margin-top: 2px;
}

.sd-pilot-meta .sd-pilot-stars {
    color: #b0b8c8;
    letter-spacing: 1px;
}

.sd-pilot-meta .sd-pilot-stars.gold-star {
    color: #FFD700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.sd-pilot-badges {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.sd-pilot-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.sd-pilot-badge.upgrade-badge {
    background: rgba(33, 150, 243, 0.15);
    color: #64B5F6;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.sd-pilot-badge.pity-badge {
    background: rgba(156, 39, 176, 0.15);
    color: #CE93D8;
    border: 1px solid rgba(156, 39, 176, 0.3);
}

.sd-pilot-chevron {
    color: var(--text-muted, #666);
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Empty pilot state */
.sd-pilot-empty {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
}

.sd-pilot-empty-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
    opacity: 0.4;
}

.sd-pilot-empty-text {
    flex: 1;
}

.sd-pilot-empty-label {
    font-size: 0.9rem;
    color: var(--text-muted, #666);
}

.sd-pilot-empty-cta {
    font-size: 0.8rem;
    color: var(--primary-color, #00d4ff);
    margin-top: 2px;
}

/* Copilot team state in ship detail pilot section */
.sd-copilot-team {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-copilot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sd-copilot-title {
    color: var(--text-primary, #ffffff);
    font-size: 0.9rem;
    font-weight: 700;
}

.sd-copilot-hint {
    color: var(--text-secondary, #9ca3af);
    font-size: 0.75rem;
}

.sd-copilot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.sd-copilot-card {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    min-width: 0;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.sd-copilot-card:active {
    border-color: rgba(0, 212, 255, 0.45);
    background: rgba(0, 212, 255, 0.08);
}

.sd-copilot-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.sd-copilot-headshot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.35);
}

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

.sd-copilot-name {
    color: var(--text-primary, #ffffff);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-copilot-meta {
    color: var(--text-secondary, #9ca3af);
    font-size: 0.7rem;
    margin-top: 1px;
}

.sd-copilot-tier {
    color: #60a5fa;
    font-size: 0.68rem;
    margin-top: 1px;
}

.sd-copilot-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.sd-copilot-missing {
    color: #fbbf24;
    font-size: 0.8rem;
    line-height: 1.3;
    padding: 8px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 8px;
    background: rgba(251, 191, 36, 0.08);
}

.sd-remove-copilot-btn {
    appearance: none;
    border: 1px solid rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.sd-remove-copilot-btn:active {
    background: rgba(239, 68, 68, 0.2);
}

/* ================================================
   PILOT DETAIL DRAWER (Drawer A) - pd-* prefix
   ================================================ */

/* Z-index stacking when Drawer A is opened on top of Drawer B */
#pilot-detail-drawer.pd-stacked {
    z-index: 10000;
}

/* Override bottom-sheet max-height for pilot drawer */
#pilot-detail-drawer .pd-content {
    max-height: 90vh;
    max-height: 90dvh;
}

/* Pilot header (name, level, stars, tier) */
.pd-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-bottom: 16px;
}

.pd-pilot-icon {
    font-size: 2.2rem;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-pilot-headshot {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #3b82f6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

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

.pd-pilot-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.pd-pilot-meta {
    font-size: 0.85rem;
    color: #b0b0b0;
    margin-bottom: 4px;
}

.pd-pilot-stars {
    letter-spacing: -1px;
    color: #b0b8c8;
}

.pd-pilot-stars.gold-star {
    color: #FFD700;
    filter: drop-shadow(0 0 4px gold);
}

.pd-tier-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
}

.pd-tier-badge.basic { background: rgba(148, 163, 184, 0.25); color: #cbd5e1; }
.pd-tier-badge.premier { background: rgba(96, 165, 250, 0.25); color: #60a5fa; }
.pd-tier-badge.elite { background: rgba(168, 85, 247, 0.25); color: #a855f7; }
.pd-tier-badge.ultimate { background: rgba(251, 191, 36, 0.25); color: #fbbf24; }

.pd-xp-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.pd-xp-bar-fill {
    height: 100%;
    background: var(--primary-color, #00d4ff);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.pd-xp-text {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 2px;
}

/* Section titles */
.pd-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* Stats grid: 2 cols x 3 rows */
.pd-stats-section {
    margin-bottom: 16px;
}

.pd-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pd-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border-left: 3px solid rgba(255, 255, 255, 0.1);
}

.pd-stat-item.has-bonus {
    border-left-color: #4ade80;
}

.pd-stat-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    font-weight: 600;
}

.pd-stat-value {
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 600;
}

.pd-stat-bonus {
    font-size: 0.75rem;
    color: #4ade80;
    margin-left: 4px;
}

/* Skills carousel */
.pd-skills-section {
    margin-bottom: 16px;
}

.pd-skill-counter {
    font-size: 0.75rem;
    color: #64748b;
    font-family: inherit;
}

.pd-skills-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.pd-skill-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    gap: 0;
    border-radius: 8px;
}

.pd-skill-track::-webkit-scrollbar {
    display: none;
}

.pd-skill-card {
    scroll-snap-align: start;
    min-width: 100%;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 14px;
    box-sizing: border-box;
}

.pd-skill-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    color: #00d4ff;
    margin-bottom: 6px;
    font-weight: 600;
}

.pd-skill-desc {
    font-size: 0.8rem;
    color: #b0b0b0;
    line-height: 1.4;
    margin-bottom: 10px;
}

.pd-skill-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pd-skill-stat {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 212, 255, 0.1);
    color: #7dd3fc;
}

/* Skill navigation arrows — always visible, below the skill cards */
.pd-skill-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
}

.pd-skill-arrow {
    width: 36px;
    height: 36px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50%;
    color: #00d4ff;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.15s;
}

.pd-skill-arrow:active {
    background: rgba(0, 212, 255, 0.25);
}

.pd-skill-counter {
    font-size: 0.8rem;
    color: #8899aa;
    font-family: 'Orbitron', sans-serif;
    min-width: 40px;
    text-align: center;
}

/* Upgrade section */
.pd-upgrade-section {
    margin-bottom: 12px;
}

.pd-upgrade-info {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    line-height: 1.5;
}

.pd-upgrade-locked {
    padding: 12px;
    background: rgba(100, 116, 139, 0.15);
    border: 1px solid rgba(100, 116, 139, 0.25);
    border-radius: 8px;
    text-align: center;
    color: #64748b;
    font-size: 0.85rem;
}

.pd-upgrade-locked .lock-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 6px;
}

.pd-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pd-action-btn {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pd-action-btn:active {
    transform: scale(0.97);
}

.pd-action-btn.upgrade-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: 1px solid rgba(34, 197, 94, 0.6);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

.pd-action-btn.star-btn {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.3));
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.4);
}

.pd-action-btn.reset-btn {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(59, 130, 246, 0.25));
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.pd-action-btn.stellar-btn {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(234, 179, 8, 0.25));
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.35);
}

.pd-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.pd-token-count {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Remove section */
.pd-remove-section {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 4px;
}

.pd-remove-btn {
    width: 100%;
    padding: 10px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    color: #ef4444;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pd-remove-btn:active {
    background: rgba(239, 68, 68, 0.25);
    transform: scale(0.97);
}

.pd-sell-btn {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.25);
    color: #f59e0b;
}

.pd-sell-btn:active {
    background: rgba(245, 158, 11, 0.25);
}

.pd-sell-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    color: #94a3b8;
    background: rgba(100, 116, 139, 0.1);
    border-color: rgba(100, 116, 139, 0.2);
}

/* XP Booster section (sub-level-15 pilots) */
.pd-booster-info {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    line-height: 1.5;
}

.pd-booster-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pd-booster-btn {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 150, 200, 0.25)) !important;
    color: #7dd3fc !important;
    border-color: rgba(0, 212, 255, 0.3) !important;
    font-size: 0.8rem !important;
    padding: 10px 8px !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.pd-booster-btn .pd-token-count {
    font-size: 0.7rem;
    opacity: 0.7;
}

.pd-level-booster-btn {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(139, 92, 246, 0.25)) !important;
    color: #c4b5fd !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}

/* ================================================
   PILOT ASSIGN DRAWER (Drawer B) - pa-* prefix
   ================================================ */

#pilot-assign-drawer .pa-content {
    max-height: 90vh;
    max-height: 90dvh;
}

.pa-subtext {
    font-size: 0.85rem;
    color: #94a3b8;
    padding: 0 16px 12px;
}

/* Filter row - sticky below header */
.pa-filter-row {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: inherit;
}

.pa-filter-select {
    flex: 1;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%2394a3b8'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    padding-right: 28px;
}

.pa-filter-select:focus {
    outline: none;
    border-color: var(--primary-color, #00d4ff);
}

/* Pilot list body */
.pa-body {
    padding-top: 0;
}

.pa-pilot-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Individual pilot row */
.pa-pilot-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.15s ease;
}

.pa-pilot-row {
    cursor: pointer;
}

.pa-pilot-row:active {
    background: rgba(0, 0, 0, 0.45);
}

.pa-pilot-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

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

.pa-pilot-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 3px;
}

.pa-pilot-meta {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 3px;
}

.pa-pilot-stars {
    letter-spacing: -1px;
    color: #b0b8c8;
}

.pa-pilot-stars.gold-star {
    color: #FFD700;
    filter: drop-shadow(0 0 3px gold);
}

.pa-tier-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
    vertical-align: middle;
}

.pa-tier-badge.basic { background: rgba(148, 163, 184, 0.25); color: #cbd5e1; }
.pa-tier-badge.premier { background: rgba(96, 165, 250, 0.25); color: #60a5fa; }
.pa-tier-badge.elite { background: rgba(168, 85, 247, 0.25); color: #a855f7; }
.pa-tier-badge.ultimate { background: rgba(251, 191, 36, 0.25); color: #fbbf24; }

.pa-pilot-stats-mini {
    display: flex;
    gap: 8px;
    font-size: 0.7rem;
    color: #64748b;
}

.pa-pilot-stats-mini span {
    white-space: nowrap;
}

/* Assign button */
.pa-assign-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(0, 150, 200, 0.3));
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 8px;
    color: #00d4ff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pa-assign-btn:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(0, 150, 200, 0.4));
}

.pa-assign-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Empty state */
.pa-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
}

.pa-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.pa-empty-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    color: #94a3b8;
    margin-bottom: 6px;
}

.pa-empty-text {
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Upgrade result modal (mobile override) */
.upgrade-result-modal,
.reset-result-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
}

.upgrade-result-modal.show,
.reset-result-modal.show {
    opacity: 1;
}

.upgrade-result-modal.fade-out,
.reset-result-modal.fade-out {
    opacity: 0;
}

.upgrade-result-content,
.reset-result-content {
    background: #141428;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 12px;
    max-width: 380px;
    width: 100%;
    padding: 20px;
    text-align: center;
}

.upgrade-result-content.special {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.15);
}

.upgrade-result-header h3,
.reset-result-header h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    color: #00d4ff;
    margin: 0 0 6px;
}

.upgrade-result-content.special .upgrade-result-header h3 {
    color: #fbbf24;
}

.pilot-name {
    color: #94a3b8;
    font-size: 0.85rem;
    margin: 0 0 14px;
}

.upgrade-result-stats h4,
.upgrade-result-totals h4,
.reset-result-bonuses h4,
.catchup-bonuses h4 {
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: uppercase;
    margin: 0 0 8px;
}

.stat-gains,
.total-bonuses,
.cleared-bonuses {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 12px;
}

.stat-gain-item {
    padding: 4px 10px;
    background: rgba(74, 222, 128, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 6px;
    font-size: 0.85rem;
}

.stat-gain-item .stat-name {
    color: #94a3b8;
    font-size: 0.7rem;
    margin-right: 4px;
}

.stat-gain-item .stat-value {
    color: #4ade80;
    font-weight: 600;
}

.stat-gain-item.jackpot {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.1);
}

.stat-gain-item.jackpot .stat-value {
    color: #fbbf24;
}

.stat-gain-item.catchup {
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.1);
}

.stat-gain-item.catchup .stat-value {
    color: #a855f7;
}

.total-bonus-item,
.cleared-bonus-item {
    padding: 3px 8px;
    background: rgba(0, 212, 255, 0.1);
    border-radius: 4px;
    font-size: 0.8rem;
    color: #7dd3fc;
}

.cleared-bonus-item {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.max-upgrades-notice {
    padding: 14px;
    margin-bottom: 12px;
}

.max-upgrades-notice .miss {
    color: #ef4444;
    font-weight: 700;
}

.star-chance {
    color: #94a3b8;
    font-size: 0.85rem;
}

.upgrade-special {
    padding: 16px;
    margin: 12px 0;
    border-radius: 8px;
}

.upgrade-special.star-upgrade {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.upgrade-special.jackpot {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.special-icon {
    font-size: 2rem;
    margin-bottom: 6px;
}

.special-text strong {
    font-size: 1rem;
    color: #fbbf24;
}

.upgrades-used {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
}

.reset-tier-change {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 1rem;
}

.tier-arrow { color: #64748b; }
.new-tier { color: #4ade80; font-weight: 600; }

.new-min-bonus {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-bottom: 12px;
}

.reset-cost {
    color: #fbbf24;
    font-size: 0.85rem;
    margin: 10px 0;
}

.close-upgrade-modal,
.close-reset-modal {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #00b8dd, #0077aa);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}

/* Upgrade loading modal */
.upgrade-loading-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.upgrade-loading-modal.show {
    opacity: 1;
}

.upgrade-loading-modal.fade-out {
    opacity: 0;
}

.upgrade-loading-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.upgrade-loading-content {
    position: relative;
    text-align: center;
    color: #ffffff;
}

.upgrade-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 212, 255, 0.2);
    border-top-color: #00d4ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Special Ability */
.sd-special-content {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm, 8px);
    padding: var(--spacing-md);
}

.sd-special-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    margin-bottom: 4px;
}

.sd-special-level {
    font-size: 0.85rem;
    color: var(--text-secondary, #b0b0b0);
    margin-bottom: 4px;
}

.sd-special-effect {
    font-size: 0.85rem;
    color: var(--primary-color, #00d4ff);
    margin-bottom: var(--spacing-sm);
}

.sd-special-locked {
    font-size: 0.85rem;
    color: var(--text-muted, #666);
    font-style: italic;
}

.sd-special-maxed {
    font-size: 0.85rem;
    color: #4ade80;
    font-weight: 600;
}

.sd-special-balance {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 8px 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.sd-balance-item {
    color: #4ade80;
}

.sd-balance-item.insufficient {
    color: #ef4444;
}

.sd-btn-upgrade-special {
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #d4af37, #aa8a2e);
    border: none;
    border-radius: var(--radius-sm, 8px);
    color: #000;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: var(--spacing-sm);
}

.sd-btn-upgrade-special:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Agent Grid - 3x2 layout */
.sd-agent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.sd-agent-slot {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm, 8px);
    padding: var(--spacing-sm);
    text-align: center;
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

/* Upgrade chip on installed agent slots */
.sd-agent-info-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 8px;
    background: rgba(10, 10, 30, 0.85);
    border: 1.5px solid #d4af37;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.4;
    cursor: pointer;
    z-index: 2;
    transition: all 0.15s ease;
}

/* Slot number label on agent slot cards */
.sd-agent-slot-label {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.55rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    z-index: 1;
    line-height: 1.4;
}

/* When upgrade button is present, push it below the slot label */
.sd-agent-slot .sd-agent-slot-label + .sd-agent-info-btn {
    top: 18px;
}

/* Tier badge on agent slot cards */
.sd-agent-tier-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    z-index: 2;
    line-height: 1.4;
}

.sd-agent-tier-badge.tier-1 {
    background: rgba(0, 180, 216, 0.25);
    border: 1px solid rgba(0, 180, 216, 0.5);
    color: #00b4d8;
}

.sd-agent-tier-badge.tier-2 {
    background: rgba(74, 222, 128, 0.25);
    border: 1px solid rgba(74, 222, 128, 0.5);
    color: #4ade80;
}

.sd-agent-tier-badge.tier-3 {
    background: rgba(168, 85, 247, 0.25);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #a855f7;
}

.sd-agent-tier-badge.tier-4 {
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.5);
    color: #f59e0b;
}

.sd-agent-tier-badge.tier-5 {
    background: rgba(239, 68, 68, 0.25);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.sd-agent-info-btn:active {
    background: rgba(212, 175, 55, 0.2);
    transform: scale(1.05);
}

.sd-agent-slot.has-skill {
    padding-top: 14px;
}

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

.sd-agent-slot.fixed {
    border-left: 3px solid rgba(0, 212, 255, 0.5);
}

.sd-agent-slot.configurable {
    border-left: 3px solid rgba(212, 175, 55, 0.5);
}

.sd-agent-slot.empty {
    border-style: dashed;
}

.sd-agent-icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.sd-agent-name {
    font-size: 0.75rem;
    color: var(--text-primary, #ffffff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sd-agent-level {
    font-size: 0.65rem;
    color: var(--text-secondary, #b0b0b0);
}

.sd-agent-level-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
    margin-top: 2px;
}

.sd-agent-level-num {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary, #ffffff);
    letter-spacing: 0.5px;
}

.sd-agent-progress {
    width: 80%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.sd-agent-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00d4ff, #4ade80);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.sd-agent-bonus {
    font-size: 0.65rem;
    color: #4ade80;
}

.sd-agent-empty-text {
    font-size: 0.75rem;
    color: var(--text-muted, #666);
}

/* Actions Footer - only visible when ship-detail screen is active */
.sd-actions {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-md);
    background: rgba(10, 10, 26, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#ship-detail-mobile.active .sd-actions {
    display: block; /* Only show when parent screen is active */
}

.sd-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--radius-sm, 8px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.sd-btn-danger {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
    border: 1px solid #f44336;
}

.sd-btn-danger:active {
    background: rgba(244, 67, 54, 0.4);
}

/* ================================================
   AI AGENT PICKER - MOBILE (Option A: Global Install Bar)
   ================================================ */

#agent-picker-mobile {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-dark, #0a0a1a);
}

#agent-picker-mobile.active {
    display: flex;
}

/* Header */
.ap-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(20, 20, 40, 0.95);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    flex-shrink: 0;
}

.ap-close-btn {
    background: none;
    border: none;
    color: var(--text-secondary, #8892b0);
    font-size: 1.5rem;
    padding: var(--spacing-sm);
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 8px);
    transition: all 0.15s ease;
}

.ap-close-btn:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.95);
}

.ap-title {
    flex: 1;
    text-align: center;
    font-size: 1.1rem;
    margin: 0;
    color: var(--text-primary, #ccd6f6);
}

.ap-slot-info {
    font-size: 0.75rem;
    color: var(--text-muted, #5a6785);
    min-width: 80px;
    text-align: right;
}

/* Sort & Filter Controls */
.ap-controls {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ap-control-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-primary, #ccd6f6);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ap-control-btn:active {
    transform: scale(0.97);
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.4);
}

.ap-control-icon {
    font-size: 1rem;
}

.ap-control-label {
    font-weight: 500;
}

/* Bottom Sheet Overlay */
.ap-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideInScale {
    from {
        transform: scale(0.8) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutScale {
    from {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    to {
        transform: scale(0.8) translateY(-20px);
        opacity: 0;
    }
}

/* Bottom Sheet */
.ap-sheet {
    width: 100%;
    max-width: 500px;
    background: linear-gradient(135deg, rgba(20, 35, 60, 0.98), rgba(10, 20, 40, 0.98));
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom));
    animation: slideUp 0.2s ease;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.ap-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ap-sheet-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #ccd6f6);
}

.ap-sheet-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary, #8892b0);
    font-size: 1rem;
    cursor: pointer;
}

.ap-sheet-close:active {
    background: rgba(255, 255, 255, 0.2);
}

.ap-sheet-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.ap-sheet-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-primary, #ccd6f6);
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ap-sheet-option:active {
    transform: scale(0.98);
    background: rgba(0, 212, 255, 0.1);
}

.ap-sheet-option.active {
    background: rgba(0, 212, 255, 0.15);
    border-color: rgba(0, 212, 255, 0.5);
    color: #00d4ff;
}

.ap-sheet-option.active::after {
    content: '✓';
    margin-left: auto;
    color: #00d4ff;
}

/* Scrollable Content Area */
.ap-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 80px; /* Space for install bar */
}

/* Installed Section */
.ap-installed-section {
    padding: var(--spacing-md);
    background: rgba(0, 212, 255, 0.05);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.ap-installed-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #8892b0);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ap-installed-agent {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm, 8px);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.ap-installed-icon {
    font-size: 1.5rem;
}

.ap-installed-info {
    flex: 1;
}

.ap-installed-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #ccd6f6);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ap-installed-desc {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary, #8892b0);
}

.ap-special-indicator {
    font-size: 0.65rem;
    background: linear-gradient(135deg, #d4af37, #aa8a2e);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.ap-installed-tier {
    font-size: 0.8rem;
    color: var(--text-secondary, #8892b0);
}

/* Available Section */
.ap-available-section {
    padding: var(--spacing-md);
}

.ap-available-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.ap-available-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #8892b0);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ap-available-count {
    font-size: 0.75rem;
    color: var(--text-muted, #5a6785);
    letter-spacing: 0.5px;
}

/* Agent Grid - 3 columns for compact view */
.ap-agent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

/* Agent Card - Simplified, selection only */
.ap-agent-card {
    background: linear-gradient(135deg, rgba(15, 25, 45, 0.95), rgba(10, 18, 35, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm, 8px);
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

/* Info button on card */
.ap-card-info-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    padding: 0;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 0.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.15s ease;
    z-index: 2;
}

.ap-card-info-btn:active {
    opacity: 1;
    background: rgba(0, 212, 255, 0.3);
}

/* Tier-colored borders */
.ap-agent-card.tier-1 { border-color: #00b4d8; }
.ap-agent-card.tier-2 { border-color: #4ade80; }
.ap-agent-card.tier-3 { border-color: #a855f7; }
.ap-agent-card.tier-4 { border-color: #f39c12; }
.ap-agent-card.tier-5 { border-color: #ef4444; }

.ap-agent-card:active {
    transform: scale(0.95);
}

/* Selected State */
.ap-agent-card.selected {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(25, 40, 70, 0.95), rgba(20, 35, 60, 0.95));
}

/* Special Skill Banner - Pill style like desktop */
.ap-special-banner {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    font-weight: 700;
    padding: 2px 8px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 1;
}

/* Skill-specific colors */
.ap-special-banner.skill-invincibility {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
}
.ap-special-banner.skill-auto-repair {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #fff;
}
.ap-special-banner.skill-rampage {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: #000;
}
.ap-special-banner.skill-stealth {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
}
.ap-special-banner.skill-defense-break {
    background: linear-gradient(135deg, #d946ef, #c026d3);
    color: #fff;
}
.ap-special-banner.skill-tactical-coord {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
}
.ap-special-banner.skill-ion-burn {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff;
}
.ap-special-banner.skill-cryo-stasis {
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    color: #000;
}
.ap-special-banner.skill-surge-strike {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
}
.ap-special-banner.skill-vital-regen {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}
.ap-special-banner.skill-precision-strike {
    background: linear-gradient(135deg, #e2e8f0, #94a3b8);
    color: #000;
}
.ap-special-banner.skill-stasis-ward {
    background: linear-gradient(135deg, #7c2dff 0%, #db2777 52%, #ff7a18 100%);
    border-color: rgba(253,224,71,0.85);
    box-shadow: 0 0 10px rgba(219,39,119,0.65), inset 0 1px 0 rgba(255,255,255,0.35);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}

.ap-agent-card.special-skill {
    padding-top: 10px;
}

.ap-agent-card.special-skill.selected {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

/* Card Content */
.ap-agent-card-icon {
    font-size: 1.5rem;
    margin-bottom: 2px;
}

.ap-agent-card.special-skill .ap-agent-card-icon {
    margin-top: 4px;
}

.ap-agent-card-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary, #ccd6f6);
    text-align: center;
    line-height: 1.1;
}

.ap-agent-card-stats {
    font-size: 0.65rem;
    color: var(--text-secondary, #8892b0);
}

/* Tier-colored text */
.ap-agent-card.tier-1 .ap-agent-card-name,
.ap-agent-card.tier-1 .ap-agent-card-stats { color: #00b4d8; }
.ap-agent-card.tier-2 .ap-agent-card-name,
.ap-agent-card.tier-2 .ap-agent-card-stats { color: #4ade80; }
.ap-agent-card.tier-3 .ap-agent-card-name,
.ap-agent-card.tier-3 .ap-agent-card-stats { color: #a855f7; }
.ap-agent-card.tier-4 .ap-agent-card-name,
.ap-agent-card.tier-4 .ap-agent-card-stats { color: #f59e0b; }
.ap-agent-card.tier-5 .ap-agent-card-name,
.ap-agent-card.tier-5 .ap-agent-card-stats { color: #ef4444; }

/* Level Progress Bar */
.ap-level-bar {
    width: 90%;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    margin-top: 4px;
    overflow: hidden;
    position: relative;
}

.ap-level-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s ease;
}

/* Tier-colored progress bars (T4=gold, T5=orange) */
.ap-agent-card.tier-1 .ap-level-bar-fill { background: linear-gradient(90deg, #0090b8, #00b4d8); }
.ap-agent-card.tier-2 .ap-level-bar-fill { background: linear-gradient(90deg, #22c55e, #4ade80); }
.ap-agent-card.tier-3 .ap-level-bar-fill { background: linear-gradient(90deg, #9333ea, #a855f7); }
.ap-agent-card.tier-4 .ap-level-bar-fill { background: linear-gradient(90deg, #e08a0e, #f39c12); }
.ap-agent-card.tier-5 .ap-level-bar-fill { background: linear-gradient(90deg, #dc2626, #ef4444); }

.ap-level-text {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 1px;
}

/* Tier-colored level text */
.ap-agent-card.tier-1 .ap-level-text { color: rgba(0, 180, 216, 0.8); }
.ap-agent-card.tier-2 .ap-level-text { color: rgba(74, 222, 128, 0.8); }
.ap-agent-card.tier-3 .ap-level-text { color: rgba(168, 85, 247, 0.8); }
.ap-agent-card.tier-4 .ap-level-text { color: rgba(245, 158, 11, 0.8); }
.ap-agent-card.tier-5 .ap-level-text { color: rgba(239, 68, 68, 0.8); }

/* Empty State */
.ap-empty-state {
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
}

.ap-empty-text {
    font-size: 0.95rem;
    color: var(--text-secondary, #8892b0);
    margin-bottom: var(--spacing-xs);
}

.ap-empty-hint {
    font-size: 0.8rem;
    color: var(--text-muted, #5a6785);
}

/* ========================================
   STICKY INSTALL BAR (Bottom)
   ======================================== */

.ap-install-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(20, 30, 50, 0.98), rgba(10, 20, 35, 0.98));
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    transform: translateY(100%);
    transition: transform 0.2s ease;
    z-index: 100;
}

.ap-install-bar.visible {
    transform: translateY(0);
}

.ap-install-bar-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.ap-install-bar-desc {
    font-size: 1.05rem;
    color: var(--text-secondary, #8892b0);
    line-height: 1.4;
    padding: 10px 12px;
    background: rgba(0, 212, 255, 0.06);
    border: 1px solid rgba(0, 212, 255, 0.12);
    border-radius: 6px;
}

.ap-install-bar-desc .ap-desc-label {
    color: var(--text-primary, #ccd6f6);
    font-weight: 600;
    font-size: 1.05rem;
    display: block;
    margin-bottom: 2px;
}

.ap-install-bar-desc .ap-desc-bonus {
    color: #00d4ff;
    font-weight: 600;
}

.ap-install-bar-desc .ap-desc-special {
    display: block;
    margin-top: 4px;
    color: #d4af37;
    font-weight: 600;
}

.ap-install-bar-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.ap-install-bar-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.ap-install-bar-details {
    min-width: 0;
}

.ap-install-bar-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary, #ccd6f6);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ap-install-bar-skill {
    font-size: 0.6rem;
    background: linear-gradient(135deg, #d4af37, #aa8a2e);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.ap-install-bar-tier {
    font-size: 0.8rem;
    color: var(--text-secondary, #8892b0);
}

.ap-install-bar-btn {
    flex-shrink: 0;
    padding: 14px 28px;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    border: none;
    border-radius: 8px;
    color: #000;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ap-install-bar-btn:active {
    background: linear-gradient(135deg, #00b8dd, #0088bb);
    transform: scale(0.98);
}

/* ================================================
   AGENT INSTALLATION WARNING MODAL (MOBILE)
   ================================================ */
.agent-installation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
    box-sizing: border-box;
}

.agent-installation-modal .agent-install-content {
    background: #141428;
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 12px;
    max-width: 400px;
    width: 100%;
    overflow: hidden;
}

.agent-installation-modal .agent-install-header {
    background: rgba(251, 191, 36, 0.15);
    padding: 14px 20px;
    border-bottom: 1px solid rgba(251, 191, 36, 0.3);
}

.agent-installation-modal .agent-install-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #fbbf24;
    font-family: 'Orbitron', sans-serif;
}

.agent-installation-modal .agent-install-body {
    padding: 20px;
}

.agent-installation-modal .agent-install-body p {
    line-height: 1.5;
}

.agent-installation-modal .agent-install-btn {
    padding: 10px 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: 'Orbitron', sans-serif;
    cursor: pointer;
    min-width: 120px;
}

/* ================================================
   SPECIAL SKILL INTRO MODAL
   ================================================ */

.ssi-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    padding: 1rem;
}
.ssi-modal-overlay.ssi-active { opacity: 1; }
.ssi-modal-overlay.ssi-closing { opacity: 0; }

.ssi-modal {
    background: #0d1b2a;
    border: 1px solid var(--primary-color, #00e5ff);
    border-radius: 12px;
    max-width: 440px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    transition: transform 0.25s ease;
}
.ssi-active .ssi-modal { transform: translateY(0); }
.ssi-closing .ssi-modal { transform: translateY(20px); }

.ssi-header {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 1rem 1rem 0.5rem;
    color: #ffd700;
}

.ssi-body {
    padding: 0 1rem;
    flex: 1;
}

.ssi-intro-text {
    color: #e0e0e0;
    font-size: 0.95rem;
    margin: 0 0 0.6rem;
    text-align: center;
    line-height: 1.4;
}

.ssi-hint-text {
    color: #8899aa;
    font-size: 0.85rem;
    margin: 0 0 0.6rem;
    text-align: center;
    line-height: 1.4;
}

.ssi-skill-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.ssi-skill-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
}

.ssi-skill-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
}

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

.ssi-skill-name {
    font-weight: 600;
    color: var(--primary-color, #00e5ff);
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}

.ssi-skill-agent {
    color: #fbbf24;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.ssi-skill-desc {
    color: #99aabb;
    font-size: 0.8rem;
    line-height: 1.35;
}

.ssi-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem 1rem;
}

.ssi-page-dots {
    display: flex;
    gap: 0.4rem;
}

.ssi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.2s;
}
.ssi-dot.active {
    background: var(--primary-color, #00e5ff);
}

.ssi-next-btn {
    background: var(--primary-color, #00e5ff);
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
.ssi-next-btn:active { opacity: 0.8; }

/* ================================================
   AGENT DETAIL VIEW - MOBILE
   ================================================ */

#agent-detail-mobile {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-dark, #0a0a1a);
}

#agent-detail-mobile.active {
    display: flex;
}

/* Header */
.agd-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(20, 20, 40, 0.95);
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    flex-shrink: 0;
}

.agd-back-btn {
    background: none;
    border: none;
    color: var(--primary-color, #00d4ff);
    font-size: 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: calc(-1 * var(--spacing-xs)) calc(-1 * var(--spacing-sm));
    cursor: pointer;
    border-radius: var(--radius-sm, 8px);
    transition: all 0.15s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.agd-back-btn:active {
    background: rgba(0, 212, 255, 0.15);
    transform: scale(0.95);
}

.agd-title {
    flex: 1;
    text-align: center;
    font-size: 1.1rem;
    margin: 0;
    color: var(--text-primary, #ccd6f6);
}

/* Content Area */
.agd-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Agent Header Card */
.agd-agent-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(20, 30, 50, 0.95), rgba(15, 25, 45, 0.95));
    border: 2px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-md, 12px);
}

/* Tier-colored header borders */
.agd-agent-header.tier-1 { border-color: #00b4d8; }
.agd-agent-header.tier-2 { border-color: #4ade80; }
.agd-agent-header.tier-3 { border-color: #a855f7; }
.agd-agent-header.tier-4 { border-color: #f39c12; }
.agd-agent-header.tier-5 { border-color: #ef4444; }

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

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

.agd-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary, #ccd6f6);
    margin-bottom: 4px;
}

.agd-tier-level {
    font-size: 0.9rem;
    color: var(--text-secondary, #8892b0);
    margin-bottom: 8px;
}

/* Tier-colored tier text */
.agd-agent-header.tier-1 .agd-tier-level { color: #00b4d8; }
.agd-agent-header.tier-2 .agd-tier-level { color: #4ade80; }
.agd-agent-header.tier-3 .agd-tier-level { color: #a855f7; }
.agd-agent-header.tier-4 .agd-tier-level { color: #f59e0b; }
.agd-agent-header.tier-5 .agd-tier-level { color: #ef4444; }

/* Level Progress Bar in Header */
.agd-level-progress {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
}

.agd-level-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Tier-colored progress fills */
.agd-agent-header.tier-1 .agd-level-progress-fill { background: linear-gradient(90deg, #0090b8, #00b4d8); }
.agd-agent-header.tier-2 .agd-level-progress-fill { background: linear-gradient(90deg, #22c55e, #4ade80); }
.agd-agent-header.tier-3 .agd-level-progress-fill { background: linear-gradient(90deg, #9333ea, #a855f7); }
.agd-agent-header.tier-4 .agd-level-progress-fill { background: linear-gradient(90deg, #e08a0e, #f39c12); }
.agd-agent-header.tier-5 .agd-level-progress-fill { background: linear-gradient(90deg, #dc2626, #ef4444); }

/* Bonuses Section */
.agd-bonuses {
    background: rgba(20, 30, 50, 0.7);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-md, 12px);
    padding: var(--spacing-md);
}

.agd-bonuses-title {
    font-size: 0.75rem;
    color: var(--text-secondary, #8892b0);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

.agd-bonus-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.agd-bonus-row:last-child {
    border-bottom: none;
}

.agd-bonus-stat {
    font-size: 0.9rem;
    color: var(--text-primary, #ccd6f6);
}

.agd-bonus-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4ade80;
}

/* Special Skill Section */
.agd-special-skill {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(170, 138, 46, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--radius-md, 12px);
    padding: var(--spacing-md);
}

.agd-special-title {
    font-size: 0.75rem;
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xs);
}

.agd-special-name {
    font-size: 1rem;
    font-weight: 700;
    color: #d4af37;
    margin-bottom: var(--spacing-xs);
}

.agd-special-desc {
    font-size: 0.85rem;
    color: var(--text-secondary, #8892b0);
    line-height: 1.4;
}

.agd-skill-stats {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.agd-skill-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.agd-skill-label {
    color: var(--text-secondary, #8892b0);
}

.agd-skill-values {
    color: #d4af37;
    font-weight: 600;
}

.agd-skill-arrow {
    color: var(--text-secondary, #8892b0);
    margin: 0 2px;
    font-size: 0.75rem;
}

.agd-skill-next {
    color: #4ecdc4;
    font-weight: 600;
}

/* Actions Section */
.agd-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
}

.agd-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    border: none;
    border-radius: var(--radius-md, 12px);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.agd-btn:active {
    transform: scale(0.98);
}

.agd-btn-install {
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    color: #000;
}

.agd-btn-install:active {
    background: linear-gradient(135deg, #00b8dd, #0088bb);
}

.agd-btn small {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 2px;
}

/* NC Balance Display */
.agd-nc-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
}

.agd-nc-label {
    font-size: 0.85rem;
    color: var(--text-secondary, #8892b0);
}

.agd-nc-value {
    font-size: 1rem;
    font-weight: 700;
    color: #00d4ff;
}

.agd-btn-upgrade {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
}

.agd-btn-upgrade:disabled {
    background: linear-gradient(135deg, #555, #444);
    color: #888;
    cursor: not-allowed;
    opacity: 0.6;
}

.agd-btn-upgrade:active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Auto-leveler divider and button */
.agd-autoleveler-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.agd-autoleveler-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.agd-autoleveler-divider-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.agd-btn-autoleveler {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* Primary style: shown above the slider when NC is insufficient */
.agd-btn-autoleveler-primary {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    font-size: 1.1rem;
    padding: 14px 16px;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
    animation: agd-pulse-glow 2s ease-in-out infinite;
}

@keyframes agd-pulse-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 16px rgba(34, 197, 94, 0.6); }
}

.agd-btn-autoleveler:active {
    background: linear-gradient(135deg, #16a34a, #15803d);
}

.agd-autoleveler-text {
    font-size: 1rem;
    font-weight: 700;
}

.agd-autoleveler-sub {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.85;
}

/* Upgrade button text styling */
.agd-upgrade-text {
    font-size: 1rem;
    font-weight: 700;
    color: #000;
}

.agd-upgrade-cost {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 2px;
}

.agd-btn-back {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

.agd-btn-back:active {
    background: rgba(255, 255, 255, 0.2);
}

.agd-maxed {
    text-align: center;
    padding: var(--spacing-md);
    color: #4ade80;
    font-size: 1rem;
    font-weight: 600;
}

/* ================================================
   AGENT DETAILS — TABLET LAYOUT (768px+)
   Combines agent header, stat bonuses, and special
   skill into a single horizontal row.
   ================================================ */
@media (min-width: 768px) {
    /* Wrap the top three cards in a row */
    .agd-content {
        flex-wrap: wrap;
        flex-direction: row;
        align-items: stretch;
        align-content: flex-start;
    }

    /* --- Compact agent header: icon + name + tier inline, progress bar full-width below --- */
    .agd-agent-header {
        position: relative;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 8px 12px 6px 12px !important;
        gap: 0 10px !important;
        overflow: hidden;
    }

    .agd-agent-header .agd-icon {
        font-size: 1.6rem;
        line-height: 1;
        flex-shrink: 0;
    }

    .agd-agent-header .agd-header-info {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        flex: 1;
        min-width: 0;
    }

    .agd-agent-header .agd-name {
        font-size: 0.95rem;
        margin-bottom: 0;
        white-space: nowrap;
    }

    .agd-agent-header .agd-tier-level {
        font-size: 0.8rem;
        margin-bottom: 0;
        white-space: nowrap;
    }

    /* Progress bar: full width on its own row below icon+name */
    .agd-agent-header .agd-level-progress {
        flex: 0 0 100%;
        height: 5px;
        border-radius: 3px;
        margin-top: 4px;
    }

    /* === 3-column layout (agent has special skill) === */
    .has-special-skill .agd-agent-header {
        flex: 0 0 40%;
        max-width: 40%;
    }

    /* Stat bonuses — center column */
    .has-special-skill .agd-bonuses {
        flex: 0 0 calc(20% - var(--spacing-md));
        max-width: calc(20% - var(--spacing-md));
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Special skill — right column */
    .has-special-skill .agd-special-skill {
        flex: 0 0 calc(40% - var(--spacing-md));
        max-width: calc(40% - var(--spacing-md));
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* === 2-column layout (no special skill) === */
    .agd-content:not(.has-special-skill) .agd-agent-header {
        flex: 0 0 55%;
        max-width: 55%;
    }

    .agd-content:not(.has-special-skill) .agd-bonuses {
        flex: 0 0 calc(45% - var(--spacing-md));
        max-width: calc(45% - var(--spacing-md));
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Actions row spans full width below */
    .agd-actions {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* NC balance row spans full width */
    .agd-nc-balance {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Slider card spans full width */
    .agd-slider-card {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Slightly smaller fonts for tighter columns */
    .agd-bonuses-title {
        font-size: 0.7rem;
    }

    .agd-bonus-stat,
    .agd-bonus-value {
        font-size: 0.85rem;
    }

    .agd-special-title {
        font-size: 0.7rem;
    }

    .agd-special-name {
        font-size: 0.95rem;
    }

    .agd-special-desc {
        font-size: 0.8rem;
    }
}

/* ================================================
   AGENT UPGRADE SLIDER
   ================================================ */

.agd-slider-card {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 8px;
}

.agd-slider-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #8892b0);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.agd-slider-target {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.agd-slider-from {
    font-size: 1rem;
    color: var(--text-secondary, #8892b0);
}

.agd-slider-arrow {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.4);
}

.agd-slider-to {
    font-family: 'Orbitron', monospace;
    font-size: 1.6rem;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

/* Slider Controls Row */
.agd-slider-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.agd-slider-step-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 10px;
    background: rgba(0, 212, 255, 0.1);
    color: #00d4ff;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    flex-shrink: 0;
    touch-action: none; /* Prevent browser from handling touch for scroll/gestures during hold */
}

.agd-slider-step-btn:active:not(:disabled) {
    background: rgba(0, 212, 255, 0.25);
    transform: scale(0.94);
}

.agd-slider-step-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Range Slider Styling */
.agd-slider-input {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.agd-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.agd-slider-input::-moz-range-thumb {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d4ff, #0099cc);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.agd-slider-input:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.agd-slider-input:disabled::-webkit-slider-thumb {
    background: #555;
    box-shadow: none;
}

/* Cost Display Row */
.agd-slider-cost-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.agd-slider-cost-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agd-slider-cost-label {
    font-size: 0.75rem;
    color: var(--text-secondary, #8892b0);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agd-slider-cost-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #00d4ff;
}

.agd-slider-max-hint {
    font-size: 0.8rem;
    color: #fbbf24;
    text-align: center;
    margin-top: 6px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 6px;
    padding: 5px 10px;
    font-weight: 600;
}

.agd-slider-insufficient {
    text-align: center;
    color: #f87171;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 0;
}

/* ================================================
   WEEKLY EVENT - MOBILE STYLES
   ================================================ */

/* Screen container - prevent horizontal overflow */
#weekly-event {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Page wrapper */
.weekly-event-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-xl) + var(--safe-area-bottom, 0px));
    min-height: 100vh;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ---- BOSS HEADER (always visible) ---- */
.we-boss-header {
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.95), rgba(30, 30, 60, 0.95));
    border: 1px solid rgba(255, 107, 0, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    text-align: center;
}

.we-boss-event-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    gap: 8px;
}

.we-back-arrow-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.5rem;
    padding: 4px 8px;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
}

.we-back-arrow-btn:active {
    opacity: 0.6;
}

.we-boss-event-title #we-event-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary-color);
}

.we-event-countdown {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.we-boss-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.we-mission-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.we-boss-hp-container {
    margin-bottom: var(--spacing-sm);
}

.we-boss-hp-bar {
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.4);
}

.we-boss-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #d4af37);
    border-radius: 12px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.4);
}

.we-boss-hp-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-top: 4px;
}

.we-boss-attempts {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 600;
}

.we-boss-damage-stats {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.we-damage-separator {
    opacity: 0.5;
}

/* ---- PRIMARY ACTION SECTION ---- */
.we-action-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.we-btn-primary-action {
    width: 100%;
    padding: 18px 24px;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    background: linear-gradient(135deg, var(--primary-color), #0099cc);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}

.we-btn-primary-action:active {
    transform: scale(0.98);
}

.we-btn-primary-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.we-no-attempts-message {
    text-align: center;
    padding: var(--spacing-md);
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid #ff9800;
    border-radius: var(--radius-md);
    color: #ff9800;
    font-weight: 600;
}

.we-no-attempts-message .we-refresh-icon {
    margin-right: 8px;
}

/* ---- FLEET PREVIEW ---- */
.we-fleet-preview {
    background: rgba(20, 20, 40, 0.8);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.we-fleet-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.we-fleet-note {
    font-size: 0.75rem;
    color: #888;
    margin: 0 0 var(--spacing-sm) 0;
    font-style: italic;
}

.we-btn-link {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
}

.we-fleet-ships {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    overflow-x: auto;
    padding-bottom: var(--spacing-xs);
}

.we-fleet-ships::-webkit-scrollbar {
    display: none;
}

.we-fleet-ships .we-ship-mini-card {
    flex: 0 0 80px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs);
}

.we-fleet-ships .we-ship-mini-card img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.we-fleet-ships .we-ship-mini-card .we-ship-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.we-fleet-total-cp {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: var(--spacing-xs);
    padding: 6px 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fbbf24;
    letter-spacing: 0.3px;
}

/* ---- COLLAPSIBLE SECTIONS ---- */
.we-section {
    background: rgba(20, 20, 40, 0.8);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.we-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.we-section-header:active {
    background: rgba(0, 212, 255, 0.1);
}

.we-section-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.we-section-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.we-section-chevron {
    color: var(--text-secondary);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.we-section-content {
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.we-section-content.expanded {
    max-height: 700px;
    padding: 0 var(--spacing-md) var(--spacing-md);
}

.we-section-content.collapsed {
    max-height: 0;
    padding: 0 var(--spacing-md);
}

/* Rotate chevron when expanded */
.we-section-header[aria-expanded="true"] .we-section-chevron {
    transform: rotate(180deg);
}

/* ---- QUEST CAROUSEL ---- */
.we-quest-carousel-wrapper {
    position: relative;
}

.we-quest-carousel {
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-xs) 0;
    scroll-behavior: smooth;
}

.we-quest-carousel::-webkit-scrollbar {
    display: none;
}

/* Carousel navigation arrows - hidden on mobile, shown on desktop */
.we-carousel-nav {
    display: none;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.we-carousel-arrow {
    width: 40px;
    height: 32px;
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--primary-color);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.we-carousel-arrow:hover {
    background: rgba(0, 212, 255, 0.25);
    border-color: var(--primary-color);
}

.we-carousel-arrow:active {
    transform: scale(0.95);
}

.we-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Show arrows on desktop (mouse users) */
@media (min-width: 768px) and (pointer: fine) {
    .we-carousel-nav {
        display: flex;
    }
}

.we-quest-card {
    flex: 0 0 140px;
    scroll-snap-align: start;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.we-quest-card.active {
    border-color: var(--primary-color);
    background: rgba(0, 212, 255, 0.1);
}

.we-quest-card.completed {
    border-color: var(--success-color);
}

.we-quest-card.claimable {
    border-color: var(--success-color);
    animation: we-pulse-claimable 1.5s infinite;
}

@keyframes we-pulse-claimable {
    0%, 100% { box-shadow: 0 0 5px rgba(76, 175, 80, 0.3); }
    50% { box-shadow: 0 0 12px rgba(76, 175, 80, 0.6); }
}

.we-quest-card .we-quest-icon {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.we-quest-card .we-quest-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* New quest card progress styles */
.we-quest-card .we-quest-progress-total {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.we-quest-card .we-quest-progress-dual {
    font-size: 0.6rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 2px;
}

.we-quest-card .we-quest-next {
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.we-quest-card .we-quest-next.ready {
    color: var(--success-color);
    font-weight: 700;
}

/* Legacy - keep for backwards compatibility */
.we-quest-card .we-quest-progress {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.we-quest-card .we-quest-progress.ready {
    color: var(--success-color);
    font-weight: 700;
}

/* Quest detail expansion */
.we-quest-detail {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.we-quest-detail .we-quest-full-name {
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.we-quest-detail .we-quest-description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* Quest Summary Section */
.we-quest-summary {
    margin-bottom: var(--spacing-xs);
}

.we-quest-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}

.we-summary-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.we-summary-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Quest Progress Bar (uses boss HP gradient) */
.we-quest-progress-bar-container {
    margin-bottom: var(--spacing-xs);
}

.we-quest-progress-bar {
    height: 16px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.we-quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #d4af37);
    border-radius: 8px;
    transition: width 0.5s ease;
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.4);
}

.we-quest-progress-fill.earn {
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
}

.we-quest-progress-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 4px;
}

/* Dual Progress (for spend_nc quest) */
.we-quest-dual-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--spacing-xs);
}

.we-quest-progress-section {
    flex: 1;
}

.we-progress-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.we-quest-detail .we-quest-tiers {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.we-quest-tier-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    flex-wrap: nowrap;
    gap: 4px;
    min-height: 36px;
}

.we-quest-tier-row.claimed {
    opacity: 0.6;
    background: rgba(76, 175, 80, 0.1);
}

.we-quest-tier-row.claimable {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.we-quest-tier-row.locked {
    opacity: 0.7;
}

.we-quest-tier-row .we-tier-label {
    font-size: 0.75rem;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}

.we-quest-tier-row .we-tier-reward {
    font-size: 0.75rem;
    color: #ffd700;
    margin: 0 8px;
}

.we-quest-tier-row .we-tier-status {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.we-quest-tier-row .we-tier-status.claimed {
    color: var(--success-color);
}

.we-quest-tier-row .we-tier-status.locked {
    color: #888;
}

.we-btn-claim-tier {
    padding: 4px 10px;
    font-size: 0.7rem;
    background: var(--success-color);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease;
    white-space: nowrap;
}

.we-btn-claim-tier:active {
    transform: scale(0.95);
}

/* Claim All button */
.we-btn-claim-all {
    padding: 6px 14px;
    font-size: 0.8rem;
    background: linear-gradient(135deg, var(--success-color), #45a049);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-weight: 600;
    cursor: pointer;
}

/* ---- MILESTONE TRACK ---- */
.we-milestone-track {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-md) var(--spacing-sm);
    position: relative;
}

/* Progress line behind milestones */
.we-milestone-track::before {
    content: '';
    position: absolute;
    top: calc(var(--spacing-md) + 18px);
    left: 10%;
    right: 10%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 0;
}

.we-milestone-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    cursor: pointer;
}

.we-milestone-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(30, 30, 60, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.we-milestone-node.reached .we-milestone-circle {
    border-color: #ffd700;
    color: #ffd700;
}

.we-milestone-node.claimed .we-milestone-circle {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.we-milestone-node.claimable .we-milestone-circle {
    border-color: var(--success-color);
    animation: we-pulse-glow 1.5s infinite;
}

@keyframes we-pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); }
    50% { box-shadow: 0 0 15px rgba(76, 175, 80, 0.8); }
}

/* Grand prize info banner below milestone track */
.we-grand-prize-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px var(--spacing-sm) var(--spacing-md);
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 165, 0, 0.06));
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 10px;
}

.we-grand-prize-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.we-grand-prize-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.we-grand-prize-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.we-grand-prize-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffd700;
}

/* Quest progress counter in section header */
.we-quest-progress-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.we-quest-progress-count.all-done {
    color: var(--success-color);
}

.we-milestone-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.we-milestone-reward {
    font-size: 0.6rem;
    color: #ffd700;
}

/* ---- SHOP ENTRY BUTTON ---- */
.we-shop-entry {
    padding: 0;
}

.we-shop-button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.we-shop-button .we-shop-icon {
    font-size: 1.5rem;
}

.we-shop-button .we-shop-label {
    flex: 1;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.we-shop-button .we-shop-balance {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    color: #ffd700;
    font-weight: 600;
}

.we-shop-button .we-shop-chevron {
    color: var(--text-secondary);
}

/* ---- BOSS LEADERBOARD ---- */
.we-lb-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.we-lb-tab {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 200, 255, 0.2);
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.we-lb-tab.active {
    background: rgba(0, 200, 255, 0.15);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.we-lb-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 400px;
    overflow-y: auto;
}

.we-lb-header-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0, 200, 255, 0.15);
    margin-bottom: 4px;
}

.we-lb-row {
    display: flex;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    font-size: 1rem;
}

.we-lb-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.05);
}

.we-lb-me {
    background: rgba(0, 200, 255, 0.12) !important;
    border: 1px solid rgba(0, 200, 255, 0.3);
}

.we-lb-rank {
    width: 36px;
    text-align: center;
    font-weight: 700;
    flex-shrink: 0;
}

.we-lb-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
}

.we-lb-damage {
    width: 70px;
    text-align: right;
    font-weight: 600;
    color: #ff6b6b;
    flex-shrink: 0;
}

.we-lb-kills {
    width: 40px;
    text-align: center;
    flex-shrink: 0;
    color: var(--accent-primary);
}

.we-lb-loading,
.we-lb-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ---- FOOTER (removed - back button moved to header) ---- */

.we-btn-secondary-action {
    width: 100%;
    padding: 14px 24px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.we-btn-secondary-action:active {
    background: rgba(255, 255, 255, 0.15);
}

/* ================================================
   BOSS DEFEAT MODAL - MOBILE STYLES
   ================================================ */
.boss-defeat-backdrop {
    -webkit-overflow-scrolling: touch;
}

.boss-defeat-modal {
    -webkit-overflow-scrolling: touch;
}

/* Smaller screens - optimize for mobile */
@media (max-width: 480px) {
    .boss-defeat-modal {
        padding: 20px !important;
        max-width: 95vw !important;
    }
    
    /* Hide confetti on small screens for performance */
    .boss-defeat-modal .victory-confetti {
        display: none !important;
    }
}

/* ================================================
   WEEKLY EVENT - TABLET BREAKPOINTS
   ================================================ */

@media (min-width: 768px) {
    .weekly-event-page {
        padding: var(--spacing-lg);
        gap: var(--spacing-lg);
    }
    
    .we-boss-header {
        padding: var(--spacing-lg);
    }
    
    .we-boss-name {
        font-size: 1.5rem;
    }
    
    .we-boss-hp-bar {
        height: 32px;
    }
    
    .we-quest-card {
        flex: 0 0 160px;
        padding: var(--spacing-md);
    }
    
    .we-milestone-circle {
        width: 44px;
        height: 44px;
        font-size: 0.75rem;
    }
    
    .we-btn-primary-action {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
    .weekly-event-page {
        display: grid;
        grid-template-columns: 1.35fr 0.95fr;
        grid-template-rows: auto auto auto auto auto;
        align-items: start;
        gap: var(--spacing-lg);
    }
    
    /* Boss header spans full width */
    .we-boss-header {
        grid-column: 1 / -1;
    }
    
    /* Action section spans full width */
    .we-action-section {
        grid-column: 1 / -1;
    }
    
    .we-action-section .we-btn-primary-action {
        max-width: 500px;
    }
    
    /* Fleet preview in left column */
    .we-fleet-preview {
        grid-column: 1;
    }
    
    /* Daily Progress spans full width */
    #we-daily-progress-section {
        grid-column: 1 / -1;
    }
    
    /* Milestones in right column, spanning multiple rows */
    #we-milestones-section {
        grid-column: 2;
        grid-row: 3 / 5;
    }
    
    /* Shop entry spans full width */
    .we-shop-entry {
        grid-column: 1 / -1;
    }

    /* Leaderboard spans full width on tablet */
    #we-leaderboard-section {
        grid-column: 1 / -1;
    }

    .we-lb-damage {
        width: 120px;
    }

    .we-lb-kills {
        width: 70px;
    }

    .we-lb-name {
        padding: 0 16px;
    }
}

/* ================================================
   OUTPOST DEFENSE (MOBILE) - REGISTRATION UI
   ================================================ */

/* Screen container */
#outpost-defense {
    overflow-x: hidden;
    max-width: 100vw;
    padding: 0;
}

/* Screen content wrapper - each phase has one */
.od-screen-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-md);
    padding-top: calc(var(--spacing-md) + var(--safe-area-top, 0px));
    padding-bottom: calc(var(--spacing-xl) + var(--safe-area-bottom, 0px));
    box-sizing: border-box;
}

/* ---- HEADER COMPONENT ---- */
.od-header {
    background: linear-gradient(135deg, rgba(20, 30, 40, 0.95), rgba(15, 25, 35, 0.98));
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

/* Identity Bar - always visible */
.od-identity-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: linear-gradient(90deg, rgba(0, 191, 255, 0.1), rgba(0, 150, 200, 0.05));
    border-bottom: 1px solid rgba(0, 191, 255, 0.2);
}

.od-icon {
    font-size: 1.5rem;
}

.od-outpost-name {
    flex: 1;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.od-status-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.5px;
}

.od-badge-registration {
    background: rgba(0, 200, 100, 0.2);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.4);
}

.od-badge-live {
    background: rgba(10, 20, 40, 0.8);
    color: #ff4444;
    border: 1px solid rgba(255, 68, 68, 0.4);
}

.od-badge-locked {
    background: rgba(150, 150, 150, 0.2);
    color: #aaaaaa;
    border: 1px solid rgba(170, 170, 170, 0.4);
}

/* Summary Panel - collapsible */
.od-summary-panel {
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background 0.2s ease;
}

.od-summary-panel:hover {
    background: rgba(0, 191, 255, 0.05);
}

.od-summary-collapsed {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.od-countdown {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: var(--primary-color);
}

.od-expand-icon {
    font-size: 1rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.od-summary-panel.expanded .od-expand-icon {
    transform: rotate(180deg);
}

.od-summary-expanded {
    display: none;
    padding-top: var(--spacing-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: var(--spacing-sm);
}

.od-summary-panel.expanded .od-summary-expanded {
    display: block;
}

.od-stat-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.85rem;
}

.od-stat-label {
    color: var(--text-secondary);
}

.od-stat-value {
    color: var(--text-primary);
    font-weight: 600;
}

/* ---- MAIN CONTENT AREA ---- */
.od-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl) var(--spacing-md);
}

/* Teams Counter */
.od-teams-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 300px;
}

.od-counter-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.od-counter-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Primary Button */
.od-primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 300px;
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--primary-color), #0066cc);
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 191, 255, 0.3);
}

.od-primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 191, 255, 0.4);
}

.od-primary-btn:active {
    transform: translateY(0);
}

.od-primary-btn:disabled {
    background: rgba(100, 100, 100, 0.5);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.od-btn-icon {
    font-size: 1.2rem;
}

/* Links */
.od-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.od-link {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.95rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    transition: color 0.2s ease;
}

.od-link:hover {
    color: #00ddff;
    text-decoration: underline;
}

/* Secondary Button */
.od-secondary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.od-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--text-primary);
}

/* Footer */
.od-footer {
    display: flex;
    justify-content: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---- TEAM CONFIGURATION SCREEN ---- */

.od-config-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    overflow: hidden;
}

.od-config-header {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.od-config-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.od-config-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Teams List */
.od-teams-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-right: var(--spacing-xs);
    min-height: 150px;
}

.od-empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
}

.od-empty-state p {
    margin: var(--spacing-xs) 0;
}

/* Team Row */
.od-team-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
}

.od-team-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.od-team-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.od-team-ships {
    display: flex;
    gap: 0;
}

.od-ship-thumb {
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 var(--spacing-md);
    border-right: 1px solid rgba(0, 191, 255, 0.3);
}

.od-ship-thumb:last-child {
    border-right: none;
}

.od-ship-thumb img {
    width: 44px;
    height: 44px;
    background: rgba(0, 191, 255, 0.1);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.od-ship-name {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-align: center;
}

.od-ship-thumb.empty {
    width: 40px;
    height: 40px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    background: transparent;
    justify-content: center;
}

.od-team-cp {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: var(--primary-color);
    white-space: nowrap;
}

.od-team-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.od-team-action-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.od-team-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.od-team-action-btn.delete:hover {
    background: rgba(255, 80, 80, 0.3);
    border-color: rgba(255, 80, 80, 0.5);
    color: #ff5050;
}

/* Add Team Button */
.od-add-team-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md);
    background: rgba(0, 191, 255, 0.1);
    border: 2px dashed rgba(0, 191, 255, 0.4);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.od-add-team-btn:hover {
    background: rgba(0, 191, 255, 0.2);
    border-color: rgba(0, 191, 255, 0.6);
}

.od-add-team-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Top Navigation Bar (battle phase) */
.od-top-nav {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-sm);
    align-items: center;
}

.od-top-nav .od-secondary-btn {
    flex: 0 0 auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.8rem;
}

.od-top-nav .od-primary-btn {
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.8rem;
}

.od-top-nav .od-view-all-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 40, 80, 0.6);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: var(--radius-md);
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.od-top-nav .od-view-all-btn:active {
    background: rgba(0, 60, 120, 0.6);
    transform: scale(0.98);
}

/* Sticky Footer */
.od-sticky-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin: 0 calc(-1 * var(--spacing-md));
    margin-bottom: calc(-1 * var(--spacing-xl) - var(--safe-area-bottom, 0px));
    background: linear-gradient(to top, rgba(10, 15, 25, 0.98) 70%, transparent);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.od-sticky-footer .od-secondary-btn {
    flex: 0 0 auto;
}

.od-sticky-footer .od-primary-btn {
    flex: 1;
}

.od-lock-btn {
    background: linear-gradient(135deg, #00cc66, #009944);
}

.od-lock-btn:hover {
    box-shadow: 0 6px 20px rgba(0, 204, 102, 0.4);
}

/* ====================================
   Outpost Defense - Waves Viewer
   ==================================== */

.od-waves-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.od-wave-card {
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.od-wave-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 191, 255, 0.1);
    border-bottom: 1px solid rgba(0, 191, 255, 0.2);
}

.od-wave-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.od-wave-number {
    color: var(--primary-color);
}

.od-wave-enemies {
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.od-enemy-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.od-enemy-row:last-child {
    border-bottom: none;
}

.od-enemy-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.od-enemy-icon {
    font-size: 1.2rem;
}

.od-enemy-name {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.od-enemy-level {
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xs);
}

.od-enemy-badges {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.od-enemy-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    font-weight: 600;
}

.od-enemy-badge.pilot {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.od-enemy-badge.agent {
    background: rgba(156, 39, 176, 0.2);
    color: #ce93d8;
}

.od-enemy-badge.skill {
    background: rgba(244, 67, 54, 0.2);
    color: #ef5350;
}

/* ====================================
   Outpost Defense - Wave Test Buttons
   ==================================== */

.od-wave-test-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 191, 255, 0.05);
    border-top: 1px solid rgba(0, 191, 255, 0.15);
}

.od-test-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
    margin-right: var(--spacing-xs);
}

.od-test-team-btn {
    min-width: 36px;
    height: 28px;
    padding: 0 var(--spacing-sm);
    font-size: 0.75rem;
    font-weight: 700;
    font-family: 'Orbitron', sans-serif;
    background: linear-gradient(180deg, rgba(0, 150, 200, 0.6), rgba(0, 100, 150, 0.6));
    color: var(--text-primary);
    border: 1px solid rgba(0, 191, 255, 0.5);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.od-test-team-btn:active {
    background: linear-gradient(180deg, rgba(0, 191, 255, 0.8), rgba(0, 150, 200, 0.8));
    border-color: rgba(0, 191, 255, 0.8);
    transform: scale(0.95);
}

/* ====================================
   Outpost Defense - Lock-In Modal
   ==================================== */

.od-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--spacing-md);
}

/* ===== Tutorial Modal Overlay (pilots unlock, special skills, special abilities) ===== */
.tutorial-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: var(--spacing-md);
}

.tutorial-modal-content {
    background: linear-gradient(180deg, rgba(0, 30, 60, 0.98), rgba(0, 15, 30, 0.98));
    border: 1px solid rgba(0, 191, 255, 0.4);
    border-radius: var(--radius-lg);
    max-width: 420px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--spacing-lg);
    box-shadow: 0 10px 40px rgba(0, 191, 255, 0.3);
    color: #e0e0e0;
}

.tutorial-modal-content h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    text-align: center;
    color: #00bfff;
    margin: 0 0 var(--spacing-md) 0;
}

.tutorial-modal-content h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.95rem;
    color: #00bfff;
    margin: var(--spacing-md) 0 var(--spacing-sm) 0;
}

.tutorial-celebration {
    text-align: center;
}

.celebration-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
}

.celebration-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    color: #ffd700;
    margin-bottom: var(--spacing-sm);
}

.reward-box {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-top: var(--spacing-md);
}

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

.reward-text {
    text-align: left;
}

.reward-text strong {
    color: #ffd700;
    display: block;
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.reward-text p {
    margin: 0;
    font-size: 0.85rem;
}

.tutorial-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-sm) 0;
}

.tutorial-list li {
    padding: 4px 0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.tutorial-list.numbered {
    list-style: decimal;
    padding-left: var(--spacing-md);
}

.cost-list {
    list-style: none;
    padding-left: var(--spacing-md);
    margin-top: 4px;
}

.cost-list li {
    font-size: 0.8rem;
    padding: 2px 0;
}

.tutorial-link-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(0, 191, 255, 0.05);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.tutorial-callout {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(0, 191, 255, 0.1);
    border: 1px solid rgba(0, 191, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-md) 0;
    font-size: 0.85rem;
}

.callout-icon {
    font-size: 1.3rem;
}

.tutorial-tip {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-top: var(--spacing-sm);
}

.tutorial-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: var(--spacing-md) 0;
}

.progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.3s;
}

.progress-dot.active {
    background: #00bfff;
    box-shadow: 0 0 6px rgba(0, 191, 255, 0.5);
}

.progress-dot.completed {
    background: rgba(0, 191, 255, 0.5);
}

.tutorial-modal-content .modal-buttons {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-md);
}

.tutorial-close {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
}

/* Special skills tutorial specific styles */
.tutorial-info-section ul,
.tutorial-info-section ol {
    padding-left: var(--spacing-md);
}

.tutorial-highlight-card {
    background: rgba(0, 191, 255, 0.08);
    border: 1px solid rgba(0, 191, 255, 0.2);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-sm) 0;
}

.od-modal {
    background: linear-gradient(180deg, rgba(0, 30, 60, 0.98), rgba(0, 15, 30, 0.98));
    border: 1px solid rgba(0, 191, 255, 0.4);
    border-radius: var(--radius-lg);
    max-width: 400px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 191, 255, 0.2);
}

.od-modal-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: rgba(0, 191, 255, 0.1);
    border-bottom: 1px solid rgba(0, 191, 255, 0.2);
}

.od-modal-header .od-modal-icon {
    font-size: 1.5rem;
}

.od-modal-header h3 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.od-modal-body {
    padding: var(--spacing-md);
}

.od-modal-body p {
    margin: 0 0 var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.od-modal-warning {
    color: #f59e0b !important;
    font-weight: 600;
}

.od-lock-summary {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.od-lock-summary-item {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    font-size: 0.85rem;
}

.od-lock-summary-item .label {
    color: var(--text-secondary);
}

.od-lock-summary-item .value {
    color: var(--primary-color);
    font-weight: 600;
}

.od-modal-footer {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-top: 1px solid rgba(0, 191, 255, 0.2);
}

.od-modal-footer .od-secondary-btn {
    flex: 0 0 auto;
}

.od-modal-footer .od-primary-btn {
    flex: 1;
}

/* Locked state styling */
.od-teams-locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #00cc66, #009944);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.od-team-row.locked {
    opacity: 0.8;
}

.od-team-row.locked .od-team-actions {
    display: none;
}

.od-add-team-btn:disabled,
.od-lock-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Locked confirmation state - green checkmark button */
.od-locked-confirmed {
    background: linear-gradient(135deg, #1a5c2a 0%, #0d3d18 100%) !important;
    border: 1px solid rgba(0, 255, 100, 0.4) !important;
    color: #00ff64 !important;
    opacity: 1 !important;
    cursor: default !important;
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 255, 100, 0.3);
}

.od-locked-confirmed:hover {
    transform: none !important;
    background: linear-gradient(135deg, #1a5c2a 0%, #0d3d18 100%) !important;
}

/* ====================================
   Outpost Defense - Battle Phase
   ==================================== */

.od-badge-live {
    background: rgba(10, 20, 40, 0.8) !important;
    color: #ff4444 !important;
    border: 1px solid rgba(255, 68, 68, 0.4) !important;
    animation: pulse-live 2s ease-in-out infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.od-battle-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 191, 255, 0.2);
}

.od-battle-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.od-battle-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.od-battle-stat .od-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.od-battle-stat .od-stat-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.od-battle-stat-divider {
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin: 0 var(--spacing-xs);
}

.od-battle-countdown {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: right;
}

#od-battle-next-run-text {
    color: #00ff88;
    font-weight: 600;
}

#od-battle-countdown-text {
    color: var(--text-secondary);
}

/* Wave Progress List */
.od-wave-progress-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.od-wave-progress-card {
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.od-wave-progress-card.od-wave-victory {
    border-color: rgba(0, 200, 100, 0.5);
    background: rgba(0, 40, 20, 0.8);
}

.od-wave-progress-card.od-wave-defeat {
    border-color: rgba(200, 50, 50, 0.5);
    background: rgba(40, 10, 10, 0.8);
}

.od-wave-progress-card.od-wave-pending {
    opacity: 0.7;
}

.od-wave-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.2);
}

.od-wave-progress-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.od-wave-progress-title .od-wave-number {
    color: var(--primary-color);
    font-weight: 600;
}

.od-wave-progress-title .od-wave-desc {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.od-wave-status {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.od-wave-status.od-status-victory {
    background: rgba(0, 200, 100, 0.3);
    color: #00cc66;
}

.od-wave-status.od-status-defeat {
    background: rgba(200, 50, 50, 0.3);
    color: #ff5555;
}

.od-wave-status.od-status-pending {
    background: rgba(150, 150, 150, 0.2);
    color: #888;
}

.od-wave-progress-details {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    flex-wrap: wrap;
}

.od-detail-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.od-detail-icon {
    font-size: 0.9rem;
}

.od-wave-attempts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--spacing-sm) var(--spacing-md);
}

.od-wave-attempt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.18);
}

.od-wave-attempt-row.od-attempt-victory {
    border-color: rgba(0, 200, 100, 0.24);
}

.od-wave-attempt-row.od-attempt-defeat {
    border-color: rgba(255, 85, 85, 0.24);
}

.od-wave-attempt-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
}

.od-attempt-result,
.od-attempt-team,
.od-attempt-stat {
    font-size: 0.76rem;
    line-height: 1.2;
    color: var(--text-secondary);
    white-space: nowrap;
}

.od-attempt-result {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    color: var(--text-primary);
}

.od-attempt-replay-btn {
    flex: 0 0 auto;
    padding: 6px 8px;
    background: linear-gradient(180deg, rgba(100, 50, 200, 0.6), rgba(80, 40, 160, 0.6));
    color: var(--text-primary);
    border: 1px solid rgba(150, 100, 255, 0.5);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.od-attempt-replay-btn:active {
    background: linear-gradient(180deg, rgba(150, 100, 255, 0.8), rgba(100, 50, 200, 0.8));
    transform: scale(0.98);
}

.od-wave-enemy-preview {
    display: flex;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    flex-wrap: wrap;
}

.od-enemy-preview-item {
    font-size: 0.7rem;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
}

.od-replay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - var(--spacing-md) * 2);
    margin: var(--spacing-sm) var(--spacing-md);
    padding: var(--spacing-sm);
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(180deg, rgba(100, 50, 200, 0.6), rgba(80, 40, 160, 0.6));
    color: var(--text-primary);
    border: 1px solid rgba(150, 100, 255, 0.5);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.od-replay-btn:active {
    background: linear-gradient(180deg, rgba(150, 100, 255, 0.8), rgba(100, 50, 200, 0.8));
    transform: scale(0.98);
}

/* ====================================
   Outpost Defense - Run Selector
   ==================================== */

.od-run-selector {
    padding: var(--spacing-xs) var(--spacing-md);
    position: relative;
}

.od-run-selector-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 30, 60, 0.8);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.od-run-selector-btn:active {
    border-color: rgba(0, 191, 255, 0.6);
}

.od-run-selector-arrow {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.od-run-dropdown {
    position: absolute;
    top: 100%;
    left: var(--spacing-md);
    right: var(--spacing-md);
    background: rgba(0, 15, 30, 0.98);
    border: 1px solid rgba(0, 191, 255, 0.4);
    border-radius: var(--radius-md);
    z-index: 50;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.od-run-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: none;
    border: none;
    border-bottom: 1px solid rgba(0, 191, 255, 0.1);
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.od-run-option:last-child {
    border-bottom: none;
}

.od-run-option:active, .od-run-option.active {
    background: rgba(0, 191, 255, 0.15);
}

.od-run-option-badge {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* ====================================
   Outpost Defense - Claim All Banner
   ==================================== */

.od-claim-all-banner {
    padding: var(--spacing-xs) var(--spacing-md);
}

.od-claim-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(135deg, rgba(255, 200, 50, 0.3), rgba(255, 150, 0, 0.25));
    border: 1px solid rgba(255, 200, 50, 0.5);
    border-radius: var(--radius-md);
    color: #ffdd88;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: od-claim-glow 2s infinite alternate;
}

@keyframes od-claim-glow {
    from { box-shadow: 0 0 8px rgba(255, 200, 50, 0.2); }
    to { box-shadow: 0 0 16px rgba(255, 200, 50, 0.4); }
}

.od-claim-all-btn:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, rgba(255, 200, 50, 0.5), rgba(255, 150, 0, 0.45));
}

/* ====================================
   Outpost Defense - Windowed Waves
   ==================================== */

/* Wave reward preview in card header */
.od-wave-reward-preview {
    display: inline-block;
    margin-left: var(--spacing-xs);
    font-size: 0.7rem;
    color: #ffdd88;
    font-family: sans-serif;
    opacity: 0.85;
}

/* Current/next wave highlight */
.od-wave-progress-card.od-wave-next {
    border-color: rgba(0, 191, 255, 0.7);
    box-shadow: 0 0 12px rgba(0, 191, 255, 0.25);
    animation: od-wave-pulse 2.5s infinite alternate;
}

@keyframes od-wave-pulse {
    from { box-shadow: 0 0 8px rgba(0, 191, 255, 0.15); }
    to { box-shadow: 0 0 16px rgba(0, 191, 255, 0.35); }
}

/* Paging buttons */
.od-wave-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--spacing-sm);
    background: rgba(0, 30, 60, 0.5);
    border: 1px dashed rgba(0, 191, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--primary-color);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.od-wave-page-btn:active {
    background: rgba(0, 60, 120, 0.5);
}



/* ====================================
   Outpost Defense - View All Waves Overlay
   ==================================== */

.od-all-waves-overlay {
    display: none;
    flex-direction: column;
    height: 100%;
    background: var(--bg-primary);
}

.od-all-waves-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(0, 191, 255, 0.2);
}

.od-all-waves-back-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: none;
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--primary-color);
    font-size: 0.85rem;
    cursor: pointer;
}

.od-all-waves-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.od-all-waves-run-badge {
    margin-left: auto;
    font-size: 0.7rem;
    padding: 2px 8px;
    background: rgba(0, 191, 255, 0.15);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: var(--radius-sm);
    color: var(--primary-color);
}

.od-all-waves-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* ====================================
   Outpost Defense - Claim Summary Content
   ==================================== */

.od-cs-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.od-claim-total-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 200, 50, 0.15);
}

.od-claim-icon {
    font-size: 1.5rem;
}

.od-claim-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.od-claim-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.od-claim-run-breakdown {
    margin-bottom: var(--spacing-sm);
}

.od-claim-run-line {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 4px 0;
}

/* Wave buttons container (current run) */
.od-wave-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: var(--spacing-xs);
    padding: 0 var(--spacing-xs);
}

/* Replay button in wave card (left side) */
.od-wave-buttons .od-replay-btn {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.7rem;
}

/* Claim button for current run waves (right side) */
.od-claim-btn {
    flex: 0 0 auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: linear-gradient(135deg, rgba(255, 200, 50, 0.4), rgba(255, 150, 0, 0.4));
    border: 1px solid rgba(255, 200, 50, 0.5);
    border-radius: var(--radius-sm);
    color: #ffdd88;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.od-claim-btn:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, rgba(255, 200, 50, 0.6), rgba(255, 150, 0, 0.6));
}

/* ========================================
   OUTPOST LEADERBOARD
   ======================================== */

/* Last Week Results Banner */
.od-last-week-results {
    background: linear-gradient(135deg, rgba(255, 200, 50, 0.1), rgba(255, 150, 0, 0.05));
    border: 1px solid rgba(255, 200, 50, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.od-lw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.od-lw-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffd700;
}

.od-lw-week-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.od-lw-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs);
    text-align: center;
}

.od-lw-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xs);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
}

.od-lw-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
}

.od-lw-stat-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.od-lw-reward-summary {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Weekly Summary Modal (auto-show on Monday) */
.od-weekly-summary {
    max-width: 360px;
}

.od-ws-week-label {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.od-ws-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs);
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.od-ws-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-xs);
    background: rgba(255, 200, 50, 0.08);
    border: 1px solid rgba(255, 200, 50, 0.15);
    border-radius: var(--radius-sm);
}

.od-ws-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffd700;
}

.od-ws-stat-label {
    font-size: 0.65rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.od-ws-ranking-context {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.od-ws-ranking-context:empty {
    display: none;
}

.od-ws-no-data {
    text-align: center;
    padding: var(--spacing-md) 0;
}

.od-ws-no-data p {
    margin: 0 0 var(--spacing-xs);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Week Toggle Tabs */
.od-lb-week-toggle {
    display: flex;
    gap: 2px;
    margin-bottom: var(--spacing-md);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: 3px;
}

.od-lb-tab {
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.od-lb-tab.active {
    background: rgba(0, 191, 255, 0.2);
    color: var(--primary-color);
    border: 1px solid rgba(0, 191, 255, 0.3);
}

/* Loading */
.od-lb-loading {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Table */
.od-lb-table {
    flex: 1;
    overflow-y: auto;
}

.od-lb-header-row {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(0, 191, 255, 0.15);
    border: 1px solid rgba(0, 191, 255, 0.2);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.od-lb-row {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: var(--spacing-sm);
}

.od-lb-row:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.od-lb-row.od-lb-self {
    background: rgba(0, 191, 255, 0.1);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: var(--radius-sm);
}

.od-lb-row.od-lb-rank-1 .od-lb-col-rank {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.od-lb-row.od-lb-rank-2 .od-lb-col-rank {
    color: #c0c0c0;
    text-shadow: 0 0 8px rgba(192, 192, 192, 0.5);
}
.od-lb-row.od-lb-rank-3 .od-lb-col-rank {
    color: #cd7f32;
    text-shadow: 0 0 8px rgba(205, 127, 50, 0.5);
}

.od-lb-col-rank {
    flex: 0 0 35px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
}

.od-lb-col-name {
    flex: 1;
    font-size: 0.85rem;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-lb-col-wave {
    flex: 0 0 45px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #00ff88;
}

.od-lb-col-damage {
    flex: 0 0 55px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Rows container */
.od-lb-rows {
    max-height: calc(100vh - 360px);
    max-height: calc(100dvh - 360px);
    overflow-y: auto;
}

/* Empty State */
.od-lb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
    color: var(--text-secondary);
}

.od-lb-empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.od-lb-empty-sub {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: var(--spacing-xs);
}

/* Updated At footer text */
.od-lb-updated {
    text-align: center;
    padding: var(--spacing-xs);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
}

/* ========================================
   DRAG-TO-DISMISS BOTTOM SHEET (Reusable)
   ======================================== */
.drag-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.drag-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
}

.drag-sheet-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    max-height: 85dvh;
    min-height: 200px;
    background: var(--background-dark, #0a0a1a);
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    touch-action: none;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
}

.drag-sheet-handle-bar {
    padding: 10px 0 4px;
    text-align: center;
    cursor: grab;
    flex-shrink: 0;
}

.drag-sheet-handle {
    width: 40px;
    height: 4px;
    background: #555;
    border-radius: 2px;
    margin: 0 auto;
}

.drag-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.drag-sheet-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-family: 'Orbitron', monospace;
    color: var(--text-primary);
}

.drag-sheet-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
}

.drag-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

.drag-sheet-footer {
    padding: 12px 16px;
    padding-bottom: calc(12px + var(--safe-area-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--background-dark);
    flex-shrink: 0;
}

/* ========================================
   MOBILE INVENTORY SCREEN
   ======================================== */
#inventory-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    background: var(--background-dark);
    padding: 0; /* Override .screen padding — inventory manages its own */
    z-index: 100;
}

#inventory-mobile.active {
    display: flex;
}

/* --- Header --- */
.inv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-top: calc(var(--spacing-sm) + var(--safe-area-top));
    background: var(--background-medium);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.inv-back-btn {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1rem;
    font-family: 'Exo 2', sans-serif;
    cursor: pointer;
    padding: var(--spacing-xs) var(--spacing-sm);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
}

.inv-title {
    font-size: 1.2rem;
    font-family: 'Orbitron', monospace;
    color: var(--text-primary);
    margin: 0;
    text-align: center;
    flex: 1;
}

.inv-agent-count {
    font-size: 0.8rem;
    font-family: 'Exo 2', sans-serif;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    min-width: var(--touch-target-min);
    text-align: center;
}

.inv-count-green { color: var(--success-color); }
.inv-count-yellow { color: var(--warning-color); }
.inv-count-red { color: var(--danger-color); }
.inv-count-filtered { color: #f5deb3; }

.inv-agent-capacity-banner {
    margin: var(--spacing-sm) var(--spacing-md);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.12);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inv-agent-capacity-banner.danger {
    border-color: rgba(239, 68, 68, 0.65);
    background: rgba(239, 68, 68, 0.14);
}

.inv-agent-capacity-banner.warning {
    border-color: rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.12);
}

.inv-agent-capacity-title {
    color: var(--warning-color);
    font-weight: 700;
    font-size: 0.9rem;
}

.inv-agent-capacity-banner.danger .inv-agent-capacity-title {
    color: var(--danger-color);
}

.inv-agent-capacity-banner.warning .inv-agent-capacity-title {
    color: var(--warning-color);
}

.inv-agent-capacity-copy {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.35;
}

/* --- Tab Bar --- */
.inv-tab-bar {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    overflow-x: auto;
    white-space: nowrap;
    flex-shrink: 0;
    background: var(--background-medium);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.inv-tab-bar::-webkit-scrollbar {
    display: none;
}

.inv-tab {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: 'Exo 2', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
}

.inv-tab.active {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

/* --- Tab Content Container --- */
.inv-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md);
    -webkit-overflow-scrolling: touch;
}

/* --- Tab Placeholder (stub for future phases) --- */
.inv-tab-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
    min-height: 200px;
}

.inv-placeholder-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.4;
}

.inv-placeholder-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* ======================================================= */
/* Phase 2: Boosters Tab — Accordion + Booster Rows        */
/* ======================================================= */

/* --- Accordion --- */
.inv-accordion {
    margin-bottom: var(--spacing-sm);
}

.inv-accordion-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px var(--spacing-md);
    background: var(--background-medium);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.inv-accordion-header:active {
    background: rgba(255, 255, 255, 0.08);
}

.inv-accordion-header.expanded {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom-color: transparent;
}

.inv-accordion-arrow {
    margin-right: var(--spacing-sm);
    font-size: 0.9rem;
    color: var(--primary-color);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.inv-accordion-title {
    flex: 1;
}

.inv-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(20, 20, 40, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.inv-accordion-body.expanded {
    max-height: 1000px; /* generous max so content is never clipped */
}

/* --- Active Effect Banner --- */
.inv-active-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-sm);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05));
    border: 1px solid rgba(76, 175, 80, 0.35);
    border-radius: var(--radius-md);
}

.inv-active-banner-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.inv-active-banner-info {
    flex: 1;
    min-width: 0;
}

.inv-active-banner-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.inv-active-banner-status {
    font-size: 0.8rem;
    color: var(--success-color);
    margin-top: 2px;
}

.inv-booster-countdown {
    font-weight: 600;
}

/* --- Booster Row (shared for Timed + Fleet) --- */
.inv-booster-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0 var(--spacing-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    min-height: var(--touch-target-min);
}

.inv-booster-row:last-child {
    border-bottom: none;
    margin-bottom: var(--spacing-sm);
}

.inv-booster-row:first-child {
    margin-top: var(--spacing-sm);
}

.inv-booster-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    width: 28px;
    text-align: center;
}

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

.inv-booster-name {
    font-size: 0.88rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-booster-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color);
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
}

/* --- Activate / Go to Fleet Buttons --- */
.inv-activate-btn,
.inv-fleet-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.inv-activate-btn {
    background: linear-gradient(135deg, var(--success-color), #388E3C);
    color: #fff;
}

.inv-activate-btn:active {
    opacity: 0.8;
}

.inv-activate-btn.inv-btn-disabled,
.inv-activate-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: default;
    opacity: 0.6;
}

.inv-fleet-btn {
    background: linear-gradient(135deg, var(--primary-color), #0099cc);
    color: #fff;
}

.inv-fleet-btn:active {
    opacity: 0.8;
}

/* ======================================================= */
/* Reward Booster Visual Indicators — Farming Summary      */
/* ======================================================= */

/* Banner at top of farming summary */
.farming-boost-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.15));
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 10px;
    animation: boost-pulse 2s ease-in-out infinite;
}

.boost-banner-icon {
    font-size: 1.3rem;
}

.boost-banner-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

@keyframes boost-pulse {
    0%, 100% { border-color: rgba(255, 215, 0, 0.5); }
    50% { border-color: rgba(255, 215, 0, 0.9); box-shadow: 0 0 12px rgba(255, 215, 0, 0.15); }
}

/* Boosted value styling in reward rows */
.boost-value {
    color: #ffd700;
    font-weight: 700;
}

.boost-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
}

/* ======================================================= */
/* Phase 3: AI Agents Browse Tab                           */
/* ======================================================= */

/* --- Agents toolbar (outside scroll, between tabs and content) --- */
.inv-agents-toolbar {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    flex-shrink: 0;
    background: var(--background-dark);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.inv-agents-btn {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.inv-agents-btn:active {
    background: rgba(255, 255, 255, 0.12);
}

.inv-agents-btn--filter {
    border-color: rgba(0, 212, 255, 0.3);
}

.inv-agents-btn--filter.active {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.inv-agents-btn--guide {
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.inv-agents-btn--guide:active {
    background: rgba(34, 197, 94, 0.14);
}

.inv-agents-btn--sell {
    border-color: rgba(239, 83, 80, 0.3);
    color: #ef5350;
}

.inv-agent-guide {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 4px;
}

.inv-agent-guide-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(8, 47, 73, 0.72), rgba(20, 83, 45, 0.58));
}

.inv-agent-guide-hero-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(125, 211, 252, 0.28);
    font-size: 22px;
    flex: 0 0 auto;
}

.inv-agent-guide-hero-title {
    color: #f8fafc;
    font-size: 15px;
    font-weight: 800;
}

.inv-agent-guide-hero-subtitle {
    color: #bae6fd;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 3px;
}

.inv-agent-guide-callouts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
}

.inv-agent-guide-callout {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.66);
}

.inv-agent-guide-callout > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 18px;
}

.inv-agent-guide-callout strong {
    display: block;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 3px;
}

.inv-agent-guide-callout p,
.inv-agent-guide-copy,
.inv-agent-guide-tier-row p {
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}

.inv-agent-guide-callout.protect { border-color: rgba(34, 197, 94, 0.28); }
.inv-agent-guide-callout.sell { border-color: rgba(250, 204, 21, 0.28); }
.inv-agent-guide-callout.imprint { border-color: rgba(251, 146, 60, 0.32); }

.inv-agent-guide-section {
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.66);
}

.inv-agent-guide-section-title {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 9px;
}

.inv-agent-guide-tier-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inv-agent-guide-tier-row {
    padding: 10px;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.38);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.inv-agent-guide-tier-row.inv-t4 { border-color: rgba(251, 146, 60, 0.34); }
.inv-agent-guide-tier-row.inv-t5 { border-color: rgba(239, 68, 68, 0.34); }

.inv-agent-guide-tier-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.inv-agent-guide-tier-icon {
    font-size: 16px;
    flex: 0 0 auto;
}

.inv-agent-guide-tier-name {
    display: block;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 900;
}

.inv-agent-guide-tier-value {
    display: block;
    color: #93c5fd;
    font-size: 11px;
    font-weight: 700;
    margin-top: 1px;
}

.inv-agent-guide-tier-status {
    display: inline-flex;
    margin: 8px 0 6px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.inv-agent-guide-tier-status.sell {
    color: #fde68a;
    background: rgba(250, 204, 21, 0.12);
    border: 1px solid rgba(250, 204, 21, 0.24);
}

.inv-agent-guide-tier-status.protect {
    color: #bbf7d0;
    background: rgba(34, 197, 94, 0.13);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.inv-agent-guide-tier-status.future {
    color: #bfdbfe;
    background: rgba(59, 130, 246, 0.13);
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.inv-agent-guide-skill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.inv-agent-guide-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 800;
}

.inv-agent-guide-close {
    width: 100%;
    padding: 13px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #22c55e, #06b6d4);
    color: #020617;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
}

/* --- 2-column agent grid --- */
.inv-agent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
}

.inv-agent-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--text-secondary);
    opacity: 0.6;
    font-size: 0.9rem;
}

/* --- Compact agent card (inventory browse) --- */
.inv-agent-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
    position: relative;
    min-height: 88px;
}

.inv-agent-card:active {
    background: rgba(255, 255, 255, 0.06);
}

/* Tier border colors */
.inv-agent-card.inv-tier-1 { border-color: #888; }
.inv-agent-card.inv-tier-2 { border-color: #2ecc71; }
.inv-agent-card.inv-tier-3 { border-color: #9b59b6; }
.inv-agent-card.inv-tier-4 { border-color: #f39c12; }
.inv-agent-card.inv-tier-5 { border-color: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, 0.2); }

/* Agent icon */
.inv-agent-card-icon {
    font-size: 1.4rem;
    line-height: 1;
}

/* Tier badge (top-left corner) */
.inv-agent-card-tier {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    color: #fff;
    line-height: 1.2;
}

.inv-agent-card-tier.inv-t1 { background: #888; }
.inv-agent-card-tier.inv-t2 { background: #2ecc71; }
.inv-agent-card-tier.inv-t3 { background: #9b59b6; }
.inv-agent-card-tier.inv-t4 { background: #f39c12; }
.inv-agent-card-tier.inv-t5 { background: #ef4444; }

/* Skill name banner — top-center pill overlapping card edge */
.inv-skill-banner {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.5rem;
    font-weight: 700;
    padding: 2px 8px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 1;
}

.inv-skill-banner.skill-invincibility { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; }
.inv-skill-banner.skill-auto-repair   { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; }
.inv-skill-banner.skill-rampage       { background: linear-gradient(135deg, #eab308, #ca8a04); color: #000; }
.inv-skill-banner.skill-stealth       { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.inv-skill-banner.skill-defense-break { background: linear-gradient(135deg, #d946ef, #c026d3); color: #fff; }
.inv-skill-banner.skill-tactical-coord{ background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
.inv-skill-banner.skill-ion-burn      { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; }
.inv-skill-banner.skill-cryo-stasis   { background: linear-gradient(135deg, #22d3ee, #06b6d4); color: #000; }
.inv-skill-banner.skill-surge-strike  { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; }
.inv-skill-banner.skill-vital-regen   { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.inv-skill-banner.skill-precision-strike { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #000; }
.inv-skill-banner.skill-stasis-ward {
    background: linear-gradient(135deg, #7c2dff 0%, #db2777 52%, #ff7a18 100%);
    border-color: rgba(253,224,71,0.85);
    box-shadow: 0 0 10px rgba(219,39,119,0.65), inset 0 1px 0 rgba(255,255,255,0.35);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.75);
}

.inv-agent-card.has-skill {
    padding-top: 14px;
}

/* Skill badge — upper-right corner of card */
.inv-agent-card-skill-badge {
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: 0.95rem;
    line-height: 1;
    letter-spacing: 2px;
}

/* Quantity inline with level */
.inv-agent-card-qty {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Agent name + level row */
.inv-agent-card-name {
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}

.inv-agent-card-level {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* --- Filter bottom sheet content --- */
.inv-filter-section {
    margin-bottom: var(--spacing-lg);
}

.inv-filter-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inv-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.inv-filter-chip {
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}

.inv-filter-chip.selected {
    background: rgba(0, 212, 255, 0.15);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

.inv-filter-apply-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-color), #0099cc);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-top: var(--spacing-sm);
}

.inv-filter-apply-btn:active {
    opacity: 0.85;
}

/* --- Agent detail bottom sheet content --- */
.inv-agent-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.inv-agent-detail-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.inv-agent-detail-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

.inv-agent-detail-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.inv-agent-detail-tier {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    color: #fff;
}

.inv-agent-detail-tier.inv-t1 { background: #888; }
.inv-agent-detail-tier.inv-t2 { background: #2ecc71; }
.inv-agent-detail-tier.inv-t3 { background: #9b59b6; }
.inv-agent-detail-tier.inv-t4 { background: #f39c12; }
.inv-agent-detail-tier.inv-t5 { background: #ef4444; }

.inv-agent-detail-level {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.inv-agent-detail-qty {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.inv-agent-detail-section {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
}

.inv-agent-detail-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.inv-agent-detail-section-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.inv-agent-detail-skill {
    color: #ffd700;
    font-weight: 600;
}

.inv-agent-detail-sell-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #ef5350, #c62828);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
}

.inv-agent-detail-sell-btn:active {
    opacity: 0.85;
}

.inv-agent-detail-sell-btn:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    cursor: default;
    opacity: 0.5;
}

.inv-agent-detail-sell-price {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: -4px;
}

/* --- Sell quantity slider row --- */
.inv-sell-qty-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 0 4px;
}

.inv-sell-qty-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inv-sell-qty-btn:active {
    background: rgba(255, 255, 255, 0.18);
}

.inv-sell-qty-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}
.inv-sell-qty-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef5350, #c62828);
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
}
.inv-sell-qty-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef5350, #c62828);
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.inv-sell-qty-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    min-width: 48px;
    text-align: center;
    flex-shrink: 0;
}

/* ======================================================= */
/* Phase 4: Sell Mode                                      */
/* ======================================================= */

/* --- Sell mode toolbar controls --- */
.inv-sell-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.inv-sell-controls-row {
    display: flex;
    gap: var(--spacing-sm);
}

.inv-sell-quick-btn {
    flex: 1;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}

.inv-sell-quick-btn:active {
    background: rgba(255, 255, 255, 0.14);
}

.inv-sell-quick-btn.inv-sell-quick-level {
    border-color: rgba(0, 212, 255, 0.3);
    color: var(--primary-color);
}

.inv-sell-toggle {
    flex: 1;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}

.inv-sell-toggle.active {
    background: rgba(255, 215, 0, 0.12);
    border-color: rgba(255, 215, 0, 0.4);
    color: #ffd700;
}

/* --- Sell mode card states --- */
.inv-agent-card.inv-sell-selected {
    border-color: #4caf50 !important;
    background: rgba(76, 175, 80, 0.12);
    box-shadow: 0 0 6px rgba(76, 175, 80, 0.25);
}

.inv-agent-card.inv-sell-protected {
    opacity: 0.4;
    pointer-events: none;
}

.inv-agent-card.inv-sell-excluded {
    opacity: 0.35;
    pointer-events: none;
}

/* Above-farmable agents — dimmed with orange border */
.inv-agent-card.inv-sell-above-farm {
    opacity: 0.55;
    border-color: #ff8c00;
}

.inv-sell-above-farm-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
    line-height: 1;
}

/* Checkbox overlay (bottom-right) */
.inv-sell-check {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-secondary);
}

.inv-agent-card.inv-sell-selected .inv-sell-check {
    color: #4caf50;
}

/* Lock icon for protected agents */
.inv-sell-lock {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 0.8rem;
    line-height: 1;
    opacity: 0.6;
}

/* --- Sticky bottom sell bar --- */
.inv-sell-bar {
    flex-shrink: 0;
    padding: 10px var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--background-dark);
}

.inv-sell-bar-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.inv-sell-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.inv-sell-totals {
    display: flex;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

#inv-sell-nc {
    color: #ffd700;
}

#inv-sell-fp {
    color: #00d4ff;
}

.inv-sell-bar-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.inv-sell-cancel-btn {
    flex: 1;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.inv-sell-cancel-btn:active {
    background: rgba(255, 255, 255, 0.12);
}

.inv-sell-confirm-btn {
    flex: 1.5;
    padding: 12px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #ef5350, #c62828);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
}

.inv-sell-confirm-btn:active {
    opacity: 0.85;
}

.inv-sell-confirm-btn:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    cursor: default;
    opacity: 0.5;
}

/* ======================================================= */
/* Phase 6: Skill Imprinters Tab                           */
/* ======================================================= */

.inv-imprinter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
}

.inv-imprinter-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 14px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

.inv-imprinter-card.inv-imp-disabled {
    opacity: 0.5;
}

.inv-imp-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.inv-imp-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.inv-imp-target {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.2;
}

.inv-imp-count {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-blue, #4fc3f7);
    margin-top: 2px;
}

.inv-imp-eligible {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.inv-imp-use-btn {
    margin-top: 6px;
    padding: 7px 20px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--primary-blue, #4fc3f7);
    color: #000;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.inv-imp-use-btn:active {
    opacity: 0.85;
}

.inv-imp-use-btn:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    cursor: default;
}

/* --- Imprinter Use Flow (drag sheet contents) --- */

.inv-imp-eligible-count {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 8px 0 4px;
}

.inv-imp-agent-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0 12px;
}

.inv-imp-agent-row {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}

.inv-imp-agent-row:active {
    background: rgba(255, 255, 255, 0.08);
}

.inv-imp-agent-row.inv-imp-agent-selected {
    border-color: var(--primary-blue, #4fc3f7);
    background: rgba(79, 195, 247, 0.1);
}

.inv-imp-recommended {
    display: block;
    font-size: 0.65rem;
    color: #fbbf24;
    font-weight: 700;
    margin-bottom: 2px;
    letter-spacing: 0.03em;
}

.inv-imp-agent-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inv-imp-agent-icon {
    font-size: 1.3rem;
}

.inv-imp-agent-info {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
}

.inv-imp-agent-tier {
    font-weight: 700;
    margin-right: 4px;
}

.inv-imp-agent-location {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 3px;
    padding-left: 30px;
}

/* --- Imprinter footer --- */
.inv-imp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.inv-imp-footer-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-imp-footer-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.inv-imp-cancel-btn {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.inv-imp-confirm-btn {
    padding: 8px 18px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--primary-blue, #4fc3f7);
    color: #000;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.inv-imp-confirm-btn:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    cursor: default;
}

.inv-placeholder-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* ---- Tokens Tab (Phase 7) ---- */
.inv-token-section {
    margin-bottom: 20px;
}

.inv-token-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 4px 8px;
}

.inv-token-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
}

.inv-token-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.inv-token-card-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.inv-token-card-info {
    flex: 1;
    min-width: 0;
}

.inv-token-card-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}

.inv-token-card-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.inv-token-card-count {
    font-size: 0.9rem;
    font-weight: 700;
    color: #4ade80;
    flex-shrink: 0;
}

.inv-token-status {
    font-size: 0.8rem;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 8px;
}

.inv-token-status-active {
    background: rgba(74, 222, 128, 0.12);
    color: #4ade80;
}

.inv-token-status-inactive {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
}

.inv-token-countdown {
    font-weight: 600;
}

.inv-token-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.inv-token-activate-btn {
    flex: 1;
    min-width: 100px;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.inv-token-activate-btn:active {
    opacity: 0.8;
    transform: scale(0.97);
}

/* Token Rows (Shipyard / Missions) */
.inv-token-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    margin-bottom: 8px;
}

.inv-token-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.inv-token-row-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.inv-token-row-label {
    font-size: 0.88rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-token-row-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.inv-token-row-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4ade80;
}

.inv-token-nav-btn {
    padding: 7px 12px;
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.inv-token-nav-btn:active {
    background: rgba(59, 130, 246, 0.3);
}

.inv-token-nav-btn-disabled,
.inv-token-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* ====================================
   GALACTIC MERCHANT — Mobile Store
   ==================================== */

/* Screen container — display controlled by .screen / .screen.active */
#merchant-store {
    background: var(--bg-primary, #0a0e1a);
    color: #e0e0e0;
}

#merchant-store.active {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header */
.merch-header {
    padding: 16px 16px 12px;
    text-align: center;
}

.merch-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #fff;
}

.merch-subtitle {
    font-size: 0.8rem;
    color: #8892a4;
    margin: 0 0 12px;
}

.merch-currency-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.merch-currency-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Store Toggle (sticky) */
.merch-store-toggle {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-primary, #0a0e1a);
    padding: 8px 16px;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.merch-toggle-btn {
    flex: 1;
    padding: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: transparent;
    color: #8892a4;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.merch-toggle-btn.active {
    background: linear-gradient(135deg, rgba(0, 200, 255, 0.15), rgba(0, 150, 255, 0.1));
    border-color: rgba(0, 200, 255, 0.5);
    color: #00d4ff;
}

/* Tab Content */
.merch-tab-content {
    flex: 1;
    padding: 0 12px 12px;
    overflow-y: auto;
}

/* Reset Notice */
.merch-reset-notice {
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 6px;
    background: rgba(255, 200, 50, 0.08);
    border: 1px solid rgba(255, 200, 50, 0.2);
    color: #ffc832;
    font-size: 0.75rem;
    text-align: center;
}

.merch-premium-notice {
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 6px;
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    color: #ffd700;
    font-size: 0.75rem;
    text-align: center;
}

.merch-tax-note {
    margin: 12px 0 4px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.65rem;
    text-align: center;
}

/* Category Accordion */
.merch-category {
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.merch-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.95rem;
    font-weight: 600;
    color: #c0c8d8;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 48px;
    user-select: none;
}

.merch-category-header:active {
    background: rgba(255, 255, 255, 0.08);
}

.merch-chevron {
    font-size: 0.7rem;
    display: inline-block;
    width: 14px;
    text-align: center;
    /* Chevron glyph is swapped in JS (▶/▼) — no CSS rotation needed */
}

/* Category Items — collapse/expand */
.merch-category-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.merch-category.expanded .merch-category-items {
    max-height: 3000px;
}

/* Card */
.merch-card {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.02);
}

.merch-card:first-child {
    border-top: none;
}

.merch-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.merch-card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e8ecf4;
}

.merch-card-rarity {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.rarity-premium {
    background: rgba(0, 200, 255, 0.15);
    color: #00d4ff;
    border: 1px solid rgba(0, 200, 255, 0.3);
}

.rarity-elite {
    background: rgba(160, 80, 255, 0.15);
    color: #c084fc;
    border: 1px solid rgba(160, 80, 255, 0.3);
}

.rarity-legendary {
    background: rgba(255, 170, 0, 0.15);
    color: #ffaa00;
    border: 1px solid rgba(255, 170, 0, 0.3);
}

.rarity-ultimate {
    background: rgba(255, 50, 80, 0.15);
    color: #ff5566;
    border: 1px solid rgba(255, 50, 80, 0.3);
}

.merch-card-desc {
    font-size: 0.78rem;
    color: #8892a4;
    margin: 0 0 8px;
    line-height: 1.3;
}

.merch-card-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 4px;
}

.merch-price-usd {
    color: #ffd700;
}

.merch-founder-sale .merch-price-usd {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.merch-sale-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(244, 63, 94, 0.18);
    border: 1px solid rgba(244, 63, 94, 0.65);
    color: #ff4d5e;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.1;
}

.merch-original-price {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
}

.merch-sale-price {
    color: #ff4d5e;
    font-weight: 800;
}

.merch-card-limit {
    font-size: 0.72rem;
    color: #6b7280;
    margin-bottom: 10px;
}

/* Purchase Button */
.merch-buy-btn {
    width: 100%;
    padding: 12px 0;
    min-height: 48px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(135deg, #00b4d8, #0077b6);
    color: #fff;
}

.merch-buy-btn:active:not(:disabled) {
    transform: scale(0.97);
    filter: brightness(0.85);
}

.merch-buy-btn:disabled {
    opacity: 0.5;
    cursor: default;
    background: #2a2a3a;
    color: #6b7280;
}

.merch-btn-disabled {
    background: #2a2a3a !important;
    color: #6b7280 !important;
    opacity: 0.6;
}

/* Premium Card Accent */
.merch-premium {
    border-left: 3px solid rgba(255, 215, 0, 0.5);
}

/* Featured Card (Annual Pass etc.) */
.merch-featured {
    border: 2px solid rgba(255, 215, 0, 0.6);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(184, 134, 11, 0.05));
    position: relative;
}

.merch-featured .merch-card-desc {
    color: #d4d4d8;
}

.merch-featured.merch-pass-active {
    border-color: rgba(34, 197, 94, 0.6);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(22, 163, 74, 0.05));
}

.merch-premium .merch-buy-btn:not(:disabled) {
    background: linear-gradient(135deg, #b8860b, #daa520);
}

.premium-cart-summary {
    display: none;
    margin: 8px 0;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(56, 189, 248, 0.28);
    background: rgba(14, 165, 233, 0.08);
}

.premium-cart-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #7dd3fc;
    margin-bottom: 4px;
}

.premium-cart-sub,
.premium-cart-next,
.premium-cart-total {
    font-size: 0.72rem;
    color: #cbd5e1;
    line-height: 1.35;
}

.premium-cart-total {
    color: #facc15;
    font-weight: 700;
    margin-top: 6px;
}

.premium-cart-stepper {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.premium-cart-stepper button {
    min-height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
}

.premium-cart-stepper button:disabled {
    opacity: 0.35;
}

.premium-cart-stepper span {
    text-align: center;
    color: #e5e7eb;
    font-weight: 700;
}

.premium-cart-sticky-bar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + var(--safe-area-bottom));
    z-index: 900;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(250, 204, 21, 0.35);
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.premium-cart-sticky-bar div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.premium-cart-sticky-bar strong {
    color: #f8fafc;
    font-size: 0.78rem;
}

.premium-cart-sticky-bar span {
    color: #facc15;
    font-size: 0.7rem;
    white-space: nowrap;
}

.premium-cart-sticky-bar button {
    min-height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #f59e0b, #facc15);
    color: #111827;
    font-weight: 800;
}

.premium-cart-review-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.72);
}

.premium-cart-review-sheet {
    width: 100%;
    max-width: 620px;
    max-height: 86vh;
    overflow-y: auto;
    padding: 16px;
    padding-bottom: calc(16px + var(--safe-area-bottom));
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: #101827;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.premium-cart-review-title {
    color: #f8fafc;
    font-weight: 800;
    text-align: center;
    margin-bottom: 12px;
}

.premium-cart-review-lines,
.premium-cart-review-totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.premium-cart-review-line,
.premium-cart-review-totals > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.premium-cart-review-line strong,
.premium-cart-review-line span {
    display: block;
}

.premium-cart-review-line strong {
    color: #e5e7eb;
    font-size: 0.78rem;
}

.premium-cart-review-line span,
.premium-cart-review-totals span {
    color: #94a3b8;
    font-size: 0.7rem;
}

.premium-cart-review-line-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.premium-cart-review-line-actions button {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-weight: 800;
}

.premium-cart-review-totals {
    margin-top: 10px;
}

.premium-cart-review-totals strong {
    color: #f8fafc;
    font-size: 0.78rem;
}

.premium-cart-review-totals .premium-cart-final {
    border: 1px solid rgba(250, 204, 21, 0.3);
    background: rgba(250, 204, 21, 0.08);
}

.premium-cart-review-note {
    margin: 10px 0;
    color: #94a3b8;
    font-size: 0.72rem;
    text-align: center;
}

.premium-cart-review-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.premium-cart-review-actions button {
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
    font-weight: 800;
}

#premium-cart-checkout-btn {
    border: none;
    background: linear-gradient(135deg, #38bdf8, #facc15);
    color: #111827;
}

.merch-coming-soon {
    display: block;
    text-align: center;
    color: #6b7280;
    font-size: 0.7rem;
    margin-top: 6px;
}

/* Bottom Nav */
.merch-bottom-nav {
    position: sticky;
    bottom: 0;
    padding: 12px 16px;
    background: var(--bg-primary, #0a0e1a);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.merch-back-btn {
    width: 100%;
    padding: 12px 0;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #c0c8d8;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.merch-back-btn:active {
    background: rgba(255, 255, 255, 0.12);
}

/* Tablet (768px+) — 2-column grid */
@media (min-width: 768px) {
    .merch-category-items {
        display: flex;
        flex-wrap: wrap;
    }
    
    .merch-category.expanded .merch-category-items {
        max-height: 5000px;
    }
    
    .merch-card {
        width: 50%;
        box-sizing: border-box;
    }
}

/* ===========================================
   QUESTS — Mobile Full-Screen Page (Daily + Game tabs)
   =========================================== */

/* Override screen padding so header goes edge-to-edge */
#quests-screen.screen {
    padding: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

.dq-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--background-dark);
}

/* --- Sticky Header --- */
.dq-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(180deg, rgba(0, 30, 60, 0.95), rgba(0, 20, 40, 0.9));
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    flex-shrink: 0;
}

.dq-back-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    font-size: 1.3rem;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.dq-back-btn:active {
    background: rgba(255, 255, 255, 0.1);
}

.dq-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    color: var(--primary-color);
    margin: 0;
    flex: 1;
}

.dq-timer {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: var(--primary-color);
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.25);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Summary Bar --- */
.dq-summary-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(0, 212, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.dq-summary-progress {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dq-summary-rewards {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* --- Scrollable Quest List --- */
.dq-quest-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* --- Quest Card --- */
.dq-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    transition: border-color 0.2s ease, opacity 0.3s ease;
}

.dq-card.claimable {
    border-color: var(--success-color);
    animation: dq-pulse-claimable 1.5s infinite;
}

@keyframes dq-pulse-claimable {
    0%, 100% { box-shadow: 0 0 5px rgba(76, 175, 80, 0.3); }
    50% { box-shadow: 0 0 15px rgba(76, 175, 80, 0.5); }
}

.dq-card.in-progress {
    border-color: rgba(0, 212, 255, 0.3);
}

.dq-card.completed {
    opacity: 0.5;
    border-color: rgba(76, 175, 80, 0.3);
}

/* Card Header — name + status badge */
.dq-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.dq-card-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    flex: 1;
    margin-right: var(--spacing-sm);
}

.dq-card-status {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.dq-card-status.claimable {
    background: rgba(76, 175, 80, 0.25);
    color: var(--success-color);
}

.dq-card-status.in-progress {
    background: rgba(0, 212, 255, 0.15);
    color: var(--primary-color);
}

.dq-card-status.completed {
    background: rgba(76, 175, 80, 0.15);
    color: var(--success-color);
}

/* Card Description */
.dq-card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

/* Card Rewards */
.dq-card-rewards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.dq-reward-pill {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.dq-reward-pill.nc {
    background: rgba(255, 215, 0, 0.15);
    color: var(--gold-color);
}

.dq-reward-pill.fp {
    background: rgba(0, 212, 255, 0.15);
    color: var(--primary-color);
}

.dq-reward-pill.token {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

/* Card Progress Bar */
.dq-card-progress {
    margin-bottom: var(--spacing-sm);
}

.dq-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.dq-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #0080ff);
    border-radius: 4px;
    transition: width 0.4s ease;
}

.dq-card.claimable .dq-progress-fill,
.dq-card.completed .dq-progress-fill {
    background: linear-gradient(90deg, var(--success-color), #66bb6a);
}

.dq-progress-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Card Action — CTA button */
.dq-card-action {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

.dq-claim-btn {
    background: linear-gradient(135deg, var(--success-color), #388E3C);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    min-height: var(--touch-target-min);
    transition: opacity 0.2s ease;
}

.dq-claim-btn:active {
    opacity: 0.8;
}

.dq-claim-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.dq-claim-btn.claiming {
    pointer-events: none;
}

/* Claimed flash animation */
.dq-card-claimed-flash {
    animation: dq-claimed-flash 0.5s ease forwards;
}

@keyframes dq-claimed-flash {
    0% { background: rgba(255, 255, 255, 0.05); }
    40% { background: rgba(76, 175, 80, 0.25); border-color: var(--success-color); }
    100% { background: rgba(76, 175, 80, 0.08); opacity: 0.5; }
}

/* All-done congratulations banner */
.dq-all-done-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg) var(--spacing-md);
    background: rgba(76, 175, 80, 0.08);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: var(--radius-md);
    text-align: center;
}

.dq-all-done-icon {
    font-size: 2rem;
}

.dq-all-done-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--success-color);
    font-family: 'Orbitron', monospace;
}

.dq-all-done-total {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.dq-nav-btn {
    background: rgba(0, 212, 255, 0.15);
    color: var(--primary-color);
    border: 1px solid rgba(0, 212, 255, 0.4);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    min-height: var(--touch-target-min);
    transition: background 0.2s ease;
}

.dq-nav-btn:active {
    background: rgba(0, 212, 255, 0.3);
}

/* Completed badge checkmark */
.dq-card.completed .dq-card-name::after {
    content: ' ✓';
    color: var(--success-color);
}

/* Empty / All Complete state */
.dq-empty-state {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--text-secondary);
}

.dq-empty-state h3 {
    color: var(--primary-color);
    font-family: 'Orbitron', monospace;
    margin-bottom: var(--spacing-sm);
}

/* --- Tablet (768px+) --- */
@media (min-width: 768px) {
    .dq-title {
        font-size: 1.3rem;
    }
    
    .dq-timer {
        font-size: 0.9rem;
    }
    
    .dq-card {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    
    .dq-card-name {
        font-size: 1.05rem;
    }
}

/* ================================================
   GAME QUESTS — Category Filter Bar & Tab Content
   ================================================ */

/* Quest tab toggle uses .fm-mode-toggle / .fm-mode-btn from fleet management */
#quest-mode-toggle {
    flex-shrink: 0;
}

/* Category filter chip bar */
.gq-category-bar {
    display: flex;
    gap: 6px;
    padding: 8px var(--spacing-md);
    overflow-x: auto;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.gq-category-bar::-webkit-scrollbar {
    display: none;
}

.gq-cat-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0, 212, 255, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-secondary, #b0b0b0);
    font-family: 'Exo 2', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.gq-cat-btn.active {
    background: var(--primary-color, #00d4ff);
    color: #000;
    border-color: var(--primary-color, #00d4ff);
    font-weight: 600;
}

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

/* Game quest tab content needs flex column for scrolling */
#game-quest-tab {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

#daily-quest-tab {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

/* ================================================
   BUG REPORT SYSTEM
   ================================================ */

/* Report Bug button in Settings */
.set-report-bug-btn {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(255, 100, 50, 0.15);
    border: 1px solid rgba(255, 100, 50, 0.4);
    border-radius: 8px;
    color: #ff8844;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.set-report-bug-btn:active {
    background: rgba(255, 100, 50, 0.3);
    border-color: rgba(255, 100, 50, 0.7);
}

/* Bug Report Modal */
.bug-report-modal-content {
    max-width: 500px;
}

.bug-report-hint {
    color: #aaa;
    font-size: 0.85rem;
    margin-bottom: 12px;
    line-height: 1.4;
}

.bug-report-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    background: rgba(0, 20, 40, 0.8);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    resize: vertical;
    box-sizing: border-box;
}

.bug-report-textarea:focus {
    outline: none;
    border-color: rgba(0, 255, 255, 0.7);
}

.bug-report-textarea::placeholder {
    color: #556;
}

.bug-report-char-count {
    text-align: right;
    font-size: 0.75rem;
    color: #667;
    margin-top: 4px;
}

.bug-report-log-info {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 6px;
    color: #88aacc;
    font-size: 0.8rem;
}

.bug-report-status {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.bug-report-status.success {
    background: rgba(0, 255, 100, 0.1);
    border: 1px solid rgba(0, 255, 100, 0.3);
    color: #44ff88;
}

.bug-report-status.error {
    background: rgba(255, 50, 50, 0.1);
    border: 1px solid rgba(255, 50, 50, 0.3);
    color: #ff6666;
}

.bug-report-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.bug-report-actions .btn {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.bug-report-actions .btn-secondary {
    background: rgba(100, 100, 120, 0.3);
    border: 1px solid rgba(100, 100, 120, 0.5);
    color: #aaa;
}

.bug-report-actions .btn-primary {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 150, 255, 0.3));
    border: 1px solid rgba(0, 255, 255, 0.5);
    color: #00ffff;
}

.bug-report-actions .btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bug-report-actions .btn-primary:active:not(:disabled) {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.35), rgba(0, 150, 255, 0.45));
}

/* Bug Report Tabs */
.bug-report-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid rgba(0, 255, 255, 0.15);
    padding-bottom: 0;
}

.bug-tab {
    flex: 1;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #667;
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -2px;
}

.bug-tab.active {
    color: #00ffff;
    border-bottom-color: #00ffff;
}

.bug-tab:not(.active):active {
    color: #88ccdd;
}

/* My Reports List */
.bug-reports-loading {
    text-align: center;
    color: #667;
    padding: 24px 0;
    font-size: 0.85rem;
}

.bug-reports-empty {
    text-align: center;
    color: #556;
    padding: 24px 16px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.bug-reports-error {
    text-align: center;
    color: #ff6666;
    padding: 16px;
    font-size: 0.85rem;
}

.bug-reports-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 50vh;
    overflow-y: auto;
}

.bug-report-card {
    background: rgba(0, 20, 40, 0.6);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 8px;
    padding: 12px;
    border-left: 4px solid #cccc44;
}

.bug-report-card.bug-status-open {
    border-left-color: #cccc44;
}

.bug-report-card.bug-status-in-progress {
    border-left-color: #4488ff;
}

.bug-report-card.bug-status-resolved {
    border-left-color: #44ff88;
}

.bug-report-card.bug-status-closed {
    border-left-color: #888;
}

.bug-report-card.bug-status-resolved--awaiting-verification {
    border-left-color: #bb66ff;
}

.bug-report-card.bug-status-user-acceptance-failed {
    border-left-color: #ff4444;
}

/* Verification action area */
.bug-verify-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(187, 102, 255, 0.2);
}

.bug-verify-prompt {
    color: #cc99ff;
    font-size: 0.82rem;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.bug-verify-buttons {
    display: flex;
    gap: 10px;
}

.bug-verify-btn {
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.bug-verify-btn:active {
    transform: scale(0.97);
}

.bug-verify-yes {
    background: rgba(0, 200, 100, 0.2);
    border: 1px solid rgba(0, 200, 100, 0.4);
    color: #66ffaa;
}

.bug-verify-no {
    background: rgba(255, 60, 60, 0.15);
    border: 1px solid rgba(255, 60, 60, 0.3);
    color: #ff8888;
}

.bug-rejection-options {
    margin-top: 10px;
}

.bug-rejection-comment {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
    color: #eee;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.bug-rejection-comment::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.bug-attach-log-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
    cursor: pointer;
}

.bug-attach-log-label input[type="checkbox"] {
    accent-color: #60a5fa;
}

.bug-rejection-submit {
    width: 100%;
    background: rgba(255, 60, 60, 0.2);
    border: 1px solid rgba(255, 60, 60, 0.4);
    color: #ff8888;
}

.bug-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.bug-status-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #eee;
}

.bug-card-date {
    font-size: 0.7rem;
    color: #667;
}

.bug-card-description {
    color: #bbb;
    font-size: 0.82rem;
    line-height: 1.4;
}

.bug-admin-response {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(0, 255, 100, 0.06);
    border: 1px solid rgba(0, 255, 100, 0.2);
    border-radius: 6px;
    color: #88ddaa;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Needs-info: response section */
.bug-report-card.bug-status-needs-info {
    border-left-color: #ff9900;
}

.bug-report-card.bug-status-player-responded {
    border-left-color: #4488ff;
}

.bug-report-card.bug-status-cannot-reproduce {
    border-left-color: #888;
}

.bug-report-card.bug-status-duplicate {
    border-left-color: #888;
}

.bug-needs-info-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 153, 0, 0.2);
}

.bug-needs-info-prompt {
    color: #ffbb44;
    font-size: 0.82rem;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.bug-response-textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(255, 153, 0, 0.3);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
}

.bug-response-textarea:focus {
    outline: none;
    border-color: rgba(255, 153, 0, 0.6);
}

.bug-response-textarea::placeholder {
    color: #556;
}

.bug-response-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.bug-response-submit-btn {
    padding: 8px 20px;
    background: rgba(255, 153, 0, 0.2);
    border: 1px solid rgba(255, 153, 0, 0.4);
    border-radius: 8px;
    color: #ffbb44;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.bug-response-submit-btn:active {
    transform: scale(0.97);
    background: rgba(255, 153, 0, 0.35);
}

.bug-response-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Player response display */
.bug-player-response {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(68, 136, 255, 0.08);
    border: 1px solid rgba(68, 136, 255, 0.2);
    border-radius: 6px;
    color: #88aadd;
    font-size: 0.8rem;
    line-height: 1.4;
}

.bug-waiting-msg {
    margin-top: 8px;
    color: #667;
    font-size: 0.75rem;
    font-style: italic;
}

/* Closed/cannot-reproduce/duplicate message */
.bug-closed-msg {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(100, 100, 100, 0.1);
    border: 1px solid rgba(100, 100, 100, 0.2);
    border-radius: 6px;
    color: #999;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* ===========================================
   COOKIE/STORAGE NOTICE BANNER
   =========================================== */
.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-top: 2px solid #00d4ff;
    padding: 15px 20px;
    min-height: 60px;
    z-index: 10000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.4s ease-out;
    display: flex;
    align-items: center;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.cookie-notice-content {
    margin: 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-direction: column;
    text-align: center;
    width: 100%;
}

.cookie-text {
    color: #c0c0c0 !important;
    margin: 0;
    font-size: 0.85em;
    text-align: center;
}

.cookie-icon {
    font-size: 1.5em;
    color: #ffffff;
}

.cookie-link-btn {
    background: none;
    border: none;
    color: #60a5fa;
    cursor: pointer;
    font-size: 0.85em;
    text-decoration: underline;
    padding: 5px 10px;
}

.cookie-link-btn:hover {
    color: #93c5fd;
}

/* ===========================================
   FULLSCREEN PROMPT
   =========================================== */
.fullscreen-prompt {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    background: linear-gradient(135deg, rgba(0, 30, 60, 0.95), rgba(0, 15, 35, 0.98));
    border: 1px solid rgba(0, 212, 255, 0.6);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3), 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: fsPromptSlideUp 0.4s ease-out;
    max-width: calc(100vw - 32px);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.fullscreen-prompt.hiding {
    animation: fsPromptSlideDown 0.3s ease-in forwards;
}

@keyframes fsPromptSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes fsPromptSlideDown {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

.fullscreen-prompt-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.fullscreen-prompt-text {
    flex: 1;
    color: #e0e0e0;
    font-size: 0.85rem;
    line-height: 1.3;
}

.fullscreen-prompt-text strong {
    color: var(--primary-color, #00d4ff);
    display: block;
    margin-bottom: 2px;
    font-size: 0.9rem;
}

.fullscreen-prompt-btn {
    background: linear-gradient(135deg, #00d4ff, #0088cc);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.fullscreen-prompt-dismiss {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: #667;
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

/* Fullscreen exit hint toast */
.fullscreen-exit-hint {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9500;
    background: rgba(0, 30, 60, 0.9);
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 12px;
    padding: 12px 20px;
    color: #ccc;
    font-size: 0.8rem;
    text-align: center;
    animation: fsHintFade 4s ease-in-out forwards;
    pointer-events: none;
}

@keyframes fsHintFade {
    0% { opacity: 0; }
    10% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

/* ===========================================
   iOS "ADD TO HOME SCREEN" PROMPT
   =========================================== */
.pwa-install-prompt {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    background: linear-gradient(135deg, rgba(0, 30, 60, 0.95), rgba(0, 15, 35, 0.98));
    border: 1px solid rgba(0, 212, 255, 0.6);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3), 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: fsPromptSlideUp 0.4s ease-out;
    max-width: calc(100vw - 32px);
    width: 320px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pwa-install-prompt.hiding {
    animation: fsPromptSlideDown 0.3s ease-in forwards;
}

.pwa-install-prompt-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pwa-install-prompt-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.pwa-install-prompt-title {
    flex: 1;
}

.pwa-install-prompt-title strong {
    color: var(--primary-color, #00d4ff);
    display: block;
    margin-bottom: 2px;
    font-size: 0.9rem;
}

.pwa-install-prompt-title span {
    color: #b0b0b0;
    font-size: 0.8rem;
}

.pwa-install-prompt-dismiss {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: #667;
    font-size: 1rem;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

.pwa-install-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pwa-install-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d0d0d0;
    font-size: 0.82rem;
    line-height: 1.3;
}

.pwa-install-steps li .step-num {
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #00d4ff;
    flex-shrink: 0;
}

.pwa-install-steps li .share-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
}
/* ========================================
   CHAT SYSTEM STYLES
   Mobile-first design, responsive drawer/bottom sheet
   ======================================== */

/* ========================================
   FRIENDS SYSTEM
   ======================================== */

/* Friends button badge */
.friends-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 8px;
    background: #ef4444;
    color: #fff;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Friends screen layout */
#friends-screen {
    background: var(--bg-primary, #0a0e1a);
    padding: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
}

#friends-screen .screen-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: linear-gradient(180deg, rgba(0, 30, 60, 0.95), rgba(0, 20, 40, 0.9));
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    flex-shrink: 0;
}

#friends-screen .screen-header h2 {
    margin: 0;
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    color: var(--primary-color);
    flex: 1;
}

.fr-back-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    font-size: 1.3rem;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.fr-back-btn:active {
    background: rgba(255, 255, 255, 0.1);
}

/* Gift collection banner */
.fr-gift-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: 12px 16px 0;
    background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.15));
    border: 1px solid rgba(251,191,36,0.4);
    border-radius: 12px;
    animation: fr-gift-pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes fr-gift-pulse {
    0%, 100% { border-color: rgba(251,191,36,0.4); }
    50% { border-color: rgba(251,191,36,0.8); }
}

.fr-gift-banner-icon {
    font-size: 1.75rem;
}

.fr-gift-banner-text {
    flex: 1;
    font-size: 0.9rem;
    color: #fbbf24;
}

.fr-gift-amount {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fbbf24;
    margin-top: 2px;
}

.fr-collect-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

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

/* Tabs */
.fr-tabs {
    display: flex;
    gap: 0;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.fr-tab {
    flex: 1;
    padding: 10px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    position: relative;
}

.fr-tab:hover {
    color: rgba(255,255,255,0.7);
}

.fr-tab.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}

.fr-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    background: #ef4444;
    color: #fff;
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Send All Gifts bar */
.fr-send-all-bar {
    padding: 10px 16px 0;
    flex-shrink: 0;
}

.fr-send-all-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.fr-send-all-btn:active {
    transform: scale(0.98);
}

.fr-send-all-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tab content */
.fr-tab-content {
    display: none;
    padding: 12px 16px;
}

.fr-tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* List container */
.fr-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Friend card */
.fr-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}

.fr-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fr-card-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
}

.fr-card-level {
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
}

.fr-card-stats {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.fr-card-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
}

.fr-card-actions button {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.fr-btn-dm {
    background: rgba(96,165,250,0.2);
    color: #60a5fa;
}

.fr-btn-gift {
    background: rgba(16,185,129,0.2);
    color: #10b981;
}

.fr-btn-gift.gifted {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.3);
    cursor: default;
}

.fr-btn-remove {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}

.fr-btn-accept {
    background: rgba(16,185,129,0.2);
    color: #10b981;
}

.fr-btn-decline {
    background: rgba(239,68,68,0.15);
    color: #ef4444;
}

.fr-btn-cancel {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
}

.fr-btn-add {
    background: rgba(96,165,250,0.2);
    color: #60a5fa;
}

.fr-btn-add:disabled,
.fr-btn-cancel:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Request card */
.fr-request-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}

.fr-request-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.fr-request-actions {
    display: flex;
    gap: 8px;
}

/* Search bar */
.fr-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.fr-search-bar input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
}

.fr-search-bar input:focus {
    border-color: #60a5fa;
}

.fr-search-submit {
    padding: 10px 16px;
    background: rgba(96,165,250,0.2);
    color: #60a5fa;
    border: 1px solid rgba(96,165,250,0.3);
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

/* Search result card */
.fr-search-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}

.fr-search-name {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Section titles */
.fr-section-title {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Empty state */
.fr-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255,255,255,0.35);
}

.fr-empty-state p {
    margin: 4px 0;
}

/* Loading overlay */
.fr-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
    z-index: 10;
}

.fr-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: fr-spin 0.8s linear infinite;
}

@keyframes fr-spin {
    to { transform: rotate(360deg); }
}

/* Online status dot */
.fr-status-dot {
    font-size: 0.65rem;
}

/* Status label */
.fr-status-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    margin-left: auto;
}

/* ========================================
   ALLIANCE SCREEN STYLES (al-* prefix)
   ======================================== */

#alliance-screen {
    background: #0a0a1a;
    min-height: 100vh;
    overflow-x: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}

.al-container {
    width: 100%;
    max-width: 1100px;
    min-width: 0;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

#al-in-alliance,
#al-no-alliance,
.al-hub-view,
.al-sub-view {
    max-width: 100%;
    min-width: 0;
}

.al-top-bar {
    display: flex;
    align-items: center;
    padding: 12px 0;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 12px;
}

.al-back-btn {
    background: none;
    border: none;
    color: #60a5fa;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px 8px;
}

.al-title {
    color: #e0e0ff;
    font-size: 1.2rem;
    margin: 0;
}

.al-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Sections */
.al-section {
    margin-bottom: 20px;
}

.al-section-title {
    color: #aab4ff;
    font-size: 0.9rem;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.al-empty {
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    text-align: center;
    padding: 16px;
}

/* Input fields */
.al-input {
    width: 100%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 10px 12px;
    color: #e0e0ff;
    font-size: 0.9rem;
    margin-bottom: 8px;
    box-sizing: border-box;
}
.al-input:focus {
    outline: none;
    border-color: #60a5fa;
}
.al-input::placeholder {
    color: rgba(255,255,255,0.3);
}

/* Create form */
.al-create-form {
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 12px;
    margin-top: 8px;
}

.al-create-btn {
    width: 100%;
}

/* Search row */
.al-search-row {
    display: flex;
    gap: 8px;
}
.al-search-row .al-input {
    flex: 1;
    margin-bottom: 0;
}
.al-search-submit {
    background: #60a5fa;
    border: none;
    border-radius: 8px;
    color: #fff;
    padding: 0 16px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

/* Search results */
.al-search-item {
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.al-search-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.al-search-name {
    color: #e0e0ff;
    font-weight: 600;
    font-size: 0.9rem;
}
.al-search-meta {
    color: rgba(255,255,255,0.45);
    font-size: 0.75rem;
}
.al-search-action {
    flex-shrink: 0;
}
.al-action-btn.al-join-btn {
    min-width: 132px;
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid rgba(187,247,208,0.9);
    border-radius: 8px;
    background: linear-gradient(135deg, #22c55e 0%, #14f1d9 100%);
    box-shadow: 0 0 14px rgba(20,241,217,0.38), inset 0 1px 0 rgba(255,255,255,0.45);
    color: #03161a;
    font-size: 0.76rem;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.al-action-btn.al-join-btn:active {
    background: linear-gradient(135deg, #16a34a 0%, #06b6d4 100%);
    transform: translateY(1px);
}
.al-action-btn.al-join-btn:disabled {
    cursor: default;
    opacity: 0.75;
}
.al-action-btn.al-requested-btn {
    border-color: rgba(147,197,253,0.45);
    background: rgba(96,165,250,0.18);
    box-shadow: none;
    color: #bfdbfe;
    text-shadow: none;
}

.al-browse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.al-browse-header .al-section-title {
    margin-bottom: 0;
}

.al-browse-pager {
    display: flex;
    align-items: center;
    gap: 8px;
}

.al-page-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(96,165,250,0.45);
    background: rgba(96,165,250,0.14);
    color: #dbeafe;
    font-size: 1rem;
}

.al-page-btn:disabled {
    opacity: 0.35;
}

.al-page-count {
    min-width: 52px;
    color: rgba(255,255,255,0.62);
    font-size: 0.78rem;
    text-align: center;
}

.al-browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.al-browse-card {
    margin-top: 0;
    align-items: stretch;
}

.al-browse-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}

.al-browse-rank {
    color: #93c5fd;
    font-size: 0.72rem;
    font-weight: 800;
}

.al-member-pill {
    min-width: 48px;
    border-radius: 8px;
    padding: 3px 7px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
}

.al-member-pill.has-room {
    background: rgba(34,197,94,0.16);
    color: #bbf7d0;
}

.al-member-pill.is-full {
    background: rgba(248,113,113,0.14);
    color: #fecaca;
}

@media (max-width: 520px) {
    .al-search-item {
        align-items: stretch;
        flex-direction: column;
    }
    .al-action-btn.al-join-btn {
        width: 100%;
    }
    .al-browse-header {
        align-items: flex-start;
        flex-direction: column;
    }
    .al-browse-pager {
        width: 100%;
        justify-content: space-between;
    }
}

/* Alliance Header (in-alliance view) */
.al-header {
    background: linear-gradient(135deg, rgba(96,165,250,0.15), rgba(139,92,246,0.15));
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

/* ====== COMMAND BRIDGE LAYOUT ====== */

/* Starfield background decoration */
.al-bg-stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 30% 55%, rgba(255,255,255,0.15), transparent),
        radial-gradient(1.5px 1.5px at 50% 25%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 70% 72%, rgba(255,255,255,0.18), transparent),
        radial-gradient(1px 1px at 85% 40%, rgba(255,255,255,0.22), transparent),
        radial-gradient(1px 1px at 20% 85%, rgba(255,255,255,0.12), transparent),
        radial-gradient(1.5px 1.5px at 60% 90%, rgba(255,255,255,0.16), transparent),
        radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 45% 60%, rgba(139,92,246,0.15), transparent),
        radial-gradient(1px 1px at 75% 30%, rgba(96,165,250,0.12), transparent);
}

.al-hub-view {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    position: relative;
    z-index: 1;
}

@media (min-width: 900px) {
    .al-hub-view {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    /* Command header spans full width */
    .al-cmd-card {
        grid-column: 1 / -1;
    }
}

/* ====== COMMAND HEADER CARD ====== */
.al-cmd-card {
    background: url('../images/galaxy.png?v=1778263500') center/cover no-repeat;
    border: 1px solid rgba(82, 165, 245, 0.5);
    border-radius: 14px;
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(84, 174, 255, 0.12) inset,
        0 0 18px rgba(53, 122, 222, 0.18),
        0 14px 34px rgba(0, 0, 0, 0.48);
}

/* Faint emblem watermark inside card */
.al-cmd-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: url('../images/ZorlianX_Emblem.png') center/contain no-repeat;
    opacity: 0.05;
    pointer-events: none;
}

.al-cmd-card > * {
    position: relative;
    z-index: 1;
}

.al-cmd-emblem-wrap {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(132, 204, 255, 0.32), rgba(38, 75, 160, 0.08) 58%, transparent 74%);
    box-shadow: 0 0 20px rgba(96,165,250,0.36), 0 0 44px rgba(168,85,247,0.2);
}

.al-cmd-emblem {
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(96,165,250,0.4));
}

.al-cmd-name {
    font-size: 1.08rem;
    font-weight: 700;
    color: #e8eaff;
    font-family: 'Orbitron', monospace;
    text-align: center;
    letter-spacing: 0.3px;
    text-shadow: 0 0 10px rgba(96, 165, 250, 0.68), 0 2px 8px rgba(0, 0, 0, 0.7);
}

.al-cmd-tag {
    font-size: 0.76rem;
    font-weight: 600;
    color: #60a5fa;
    letter-spacing: 1px;
    margin-top: -4px;
}

.al-cmd-stats-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 4px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.al-cmd-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 14px;
    min-width: 72px;
}

.al-cmd-stat-progress {
    align-items: stretch;
    width: min(32vw, 260px);
    min-width: 180px;
}

.al-cmd-stat-heading {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.al-cmd-stat-val {
    font-size: 0.92rem;
    font-weight: 700;
    color: #e0e0ff;
    font-family: 'Share Tech Mono', monospace;
}

.al-cmd-stat-label {
    font-size: 0.58rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.al-cmd-stat-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.1);
}

.al-cmd-meta {
    width: 100%;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.92);
    font-weight: 800;
    margin-top: 2px;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.75);
}

.al-cmd-boost-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.al-cmd-boost-label {
    font-size: 12px;
    color: #bbb;
}

.al-cmd-boost-label.is-active {
    color: #4caf50;
}

/* ====== PROGRESS CARD ====== */
.al-progress-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px;
}

.al-progress-card-inline {
    width: min(100%, 620px);
    margin-top: 8px;
    padding: 12px;
    background: rgba(255,255,255,0.035);
    border-color: rgba(96,165,250,0.16);
    border-radius: 10px;
}

.al-progress-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.al-progress-card-inline .al-progress-header {
    margin-bottom: 8px;
    text-align: left;
}

.al-progress-bar-wrap {
    margin-bottom: 12px;
}

.al-cmd-stat-progress .al-progress-bar-wrap {
    margin: 3px 0 0;
}

.al-progress-card-inline .al-progress-bar-wrap {
    margin-bottom: 10px;
}

.al-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.08);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 4px;
}

.al-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #60a5fa, #8b5cf6);
    border-radius: 5px;
    transition: width 0.4s ease;
}

.al-progress-text {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.4);
    text-align: right;
    font-family: 'Share Tech Mono', monospace;
}

.al-cmd-stat-progress .al-progress-text {
    font-size: 0.58rem;
    font-weight: 800;
    color: rgba(255,255,255,0.92);
    opacity: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.75);
}

.al-progress-reward {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(96,165,250,0.08);
    border: 1px solid rgba(96,165,250,0.15);
    border-radius: 8px;
    padding: 10px 12px;
}

.al-progress-reward-compact {
    width: min(100%, 520px);
    justify-content: center;
    gap: 6px;
    padding: 5px 9px;
    margin-top: 1px;
    background: rgba(96,165,250,0.055);
    border-color: rgba(96,165,250,0.12);
    white-space: nowrap;
    overflow: hidden;
}

.al-progress-card-inline .al-progress-reward {
    padding: 8px 10px;
}

.al-progress-reward-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.al-progress-reward-compact .al-progress-reward-icon {
    font-size: 0.9rem;
}

.al-progress-card-inline .al-progress-reward-icon {
    font-size: 1.15rem;
}

.al-progress-reward-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.al-progress-reward-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.al-progress-reward-compact .al-progress-reward-label {
    font-size: 0.56rem;
    flex: 0 0 auto;
}

.al-progress-reward-val {
    font-size: 0.85rem;
    color: #60a5fa;
    font-weight: 600;
}

.al-progress-reward-compact .al-progress-reward-val {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.68rem;
}

@media (max-width: 520px) {
    .al-cmd-stat-progress {
        order: 5;
        width: 100%;
        max-width: 300px;
        padding-top: 4px;
    }

    .al-cmd-stat-divider:first-of-type {
        display: none;
    }

    .al-progress-reward-compact {
        max-width: 300px;
    }
}

.al-progress-card-inline .al-progress-reward-val {
    font-size: 0.8rem;
}

/* ====== ACTIVE MEMBERS CARD ====== */
.al-members-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px;
}

.al-members-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.al-members-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.al-member-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.al-member-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.al-member-status-online { background: #4ade80; box-shadow: 0 0 4px rgba(74,222,128,0.5); }
.al-member-status-today  { background: #fbbf24; }
.al-member-status-offline { background: rgba(255,255,255,0.2); }

.al-member-row-name {
    color: #e0e0ff;
    font-size: 0.85rem;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-member-row-role {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    flex-shrink: 0;
}

.al-members-cta {
    width: 100%;
    text-align: center;
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px;
    color: #60a5fa;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.al-members-cta:active {
    background: rgba(96,165,250,0.1);
}

/* ====== ACTION CARDS ====== */
.al-actions-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 900px) {
    .al-actions-grid {
        grid-column: 2;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}

.al-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.al-action-card:active {
    background: rgba(255,255,255,0.1);
}

.al-action-patrol {
    border-color: rgba(139,92,246,0.2);
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(96,165,250,0.05));
}

.al-action-patrol:active {
    background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(96,165,250,0.1));
}

.al-action-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.al-action-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.al-action-title {
    color: #e0e0ff;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.al-action-desc {
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
}
/* Hub chevron (reused by action cards) */
.al-hub-chevron {
    color: rgba(255,255,255,0.3);
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* Sub-view back button */
.al-sub-back {
    background: none;
    border: none;
    color: #60a5fa;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 8px;
}
/* Tabs */
.al-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.al-tab {
    flex: 1;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    padding: 10px;
    font-size: 0.85rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.al-tab.active {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
}
.al-tab-content {
    display: none;
}
.al-tab-content.active {
    display: block;
}

/* Roster */
.al-roster-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
    gap: 6px;
}
.al-roster-me {
    border: 1px solid rgba(96,165,250,0.3);
}
.al-roster-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.al-roster-role {
    font-size: 1rem;
}
.al-roster-name {
    color: #e0e0ff;
    font-size: 0.9rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.al-roster-role-label {
    color: rgba(255,255,255,0.35);
    font-size: 0.7rem;
    text-transform: uppercase;
}
.al-roster-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Action buttons */
.al-action-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 4px;
    color: #e0e0ff;
    padding: 2px 7px;
    font-size: 0.65rem;
    cursor: pointer;
    line-height: 1.1;
    min-height: auto;
    min-width: auto;
}
.al-action-btn:active {
    background: rgba(255,255,255,0.2);
}
.al-accept-btn {
    background: rgba(34,197,94,0.3);
    color: #4ade80;
}
.al-kick-btn {
    background: rgba(239,68,68,0.2);
    color: #f87171;
}

/* Invite items */
.al-invite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
}
.al-invite-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.al-invite-name {
    color: #e0e0ff;
    font-size: 0.9rem;
    font-weight: 500;
}
.al-invite-by {
    color: rgba(255,255,255,0.4);
    font-size: 0.75rem;
}
.al-invite-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Actions tab */
.al-actions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}
.al-actions-subsection {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.al-actions-subtitle {
    margin: 0;
    color: #aab4ff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.al-join-request-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(96,165,250,0.24);
    border-radius: 8px;
    background: rgba(96,165,250,0.08);
}
.al-join-request-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}
.al-join-request-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.al-join-request-btn {
    min-width: 64px;
    min-height: 30px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
}
.al-join-requests-empty {
    margin: 0;
    padding: 10px;
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 8px;
}
.al-shop-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid rgba(96,165,250,0.25);
    background: linear-gradient(90deg, rgba(96,165,250,0.12), rgba(96,165,250,0.04));
}
.al-shop-balance-label {
    color: rgba(224,224,255,0.8);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.al-shop-balance-value {
    color: #cfe2ff;
    font-size: 0.95rem;
    font-weight: 700;
}
.al-shop-item {
    align-items: center;
    gap: 12px;
}
.al-shop-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.al-shop-cost {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #facc15;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.al-shop-buy-btn {
    border-radius: 6px;
    min-width: 132px;
    min-height: 34px;
    padding: 7px 10px;
    color: #e0f2fe;
    background: rgba(96,165,250,0.25);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}
.al-shop-buy-btn:disabled {
    color: rgba(224,224,255,0.72);
    background: rgba(255,255,255,0.1);
    cursor: default;
}

@media (max-width: 520px) {
    .al-join-request-item {
        align-items: stretch;
        flex-direction: column;
    }
    .al-join-request-actions {
        width: 100%;
    }
    .al-join-request-btn {
        flex: 1;
    }
    .al-shop-item {
        align-items: stretch;
        flex-direction: column;
    }
    .al-shop-buy-btn {
        width: 100%;
    }
}
.al-actions-list .btn-danger {
    background: rgba(239,68,68,0.3);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.3);
}

/* Invite bottom sheet */
.al-bottom-sheet {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.al-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
}
.al-sheet-content {
    position: relative;
    background: #1a1a2e;
    border-radius: 16px 16px 0 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px;
}
.al-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    color: #e0e0ff;
    font-size: 1rem;
    font-weight: 600;
}
.al-sheet-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.5rem;
    cursor: pointer;
}
.al-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.al-invite-pick-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 10px 12px;
    color: #e0e0ff;
    font-size: 0.9rem;
}

/* Floating Chat Button */
.chat-floating-btn {
    position: relative;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #00ff88 0%, #00ccff 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 9998;
    user-select: none;
}

.chat-floating-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 255, 136, 0.6);
}

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

.chat-unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff4444;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Chat Container - Mobile Bottom Sheet (default) */
.chat-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 60vh;
    height: 60dvh; /* dynamic viewport height for mobile browsers */
    max-height: 90vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-top: 2px solid #00ff88;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.chat-container.open {
    transform: translateY(0);
}

/* Chat Header */
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2);
    flex-shrink: 0;
}

.chat-tabs {
    display: flex;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.chat-tab {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 8px;
    padding: 6px 10px;
    color: #00ff88;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    white-space: nowrap;
}

.chat-tab:hover:not(.disabled) {
    background: rgba(0, 255, 136, 0.2);
    border-color: #00ff88;
}

.chat-tab.active {
    background: #00ff88;
    color: #0a0a1a;
}

.chat-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: #666;
}

.chat-tab-badge {
    position: absolute;
    top: -8px;
    right: -7px;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ff4444;
    color: #ffffff;
    border-radius: 50%;
    border: 2px solid #10172f;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.45);
    pointer-events: none;
}

.chat-tab-badge-alliance {
    background: #1a3a6e;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.45);
}

.chat-close-btn {
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid rgba(255, 68, 68, 0.4);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4444;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-close-btn:hover {
    background: rgba(255, 68, 68, 0.3);
    border-color: #ff4444;
}

/* Messages Area */
.chat-messages-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    min-height: 0;
    max-height: calc(60vh - 120px); /* Reserve space for header + input on mobile */
}

.chat-message-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Message Bubbles */
.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: messageSlideIn 0.2s ease;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message-other {
    align-self: flex-start;
}

.chat-message-self {
    align-self: flex-end;
}

.chat-message-system {
    align-self: center;
    max-width: 90%;
    text-align: center;
}

.chat-message-command {
    align-self: center;
    max-width: 94%;
    width: min(94%, 560px);
    padding: 8px 10px 10px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(15, 22, 45, 0.94), rgba(8, 12, 28, 0.96));
    border: 1px solid rgba(255, 216, 107, 0.24);
    box-shadow: 0 8px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

.chat-message-command .chat-message-header {
    justify-content: space-between;
    margin-bottom: 6px;
}

.chat-message-command .chat-message-sender {
    color: #ffd86b;
    cursor: default;
}

.chat-message-command .chat-message-sender:hover {
    text-decoration: none;
}

.chat-message-command .chat-message-time {
    color: #8fa0c8;
}

.chat-command-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin-bottom: 6px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 216, 107, 0.13);
    border: 1px solid rgba(255, 216, 107, 0.28);
    color: #ffe49a;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.chat-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 11px;
}

.chat-message-sender {
    color: #00ff88;
    font-weight: 600;
    cursor: pointer;
}

.chat-message-sender:hover {
    text-decoration: underline;
}

.chat-message-time {
    color: #666;
    font-size: 10px;
}

.chat-message-content {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 12px;
    padding: 8px 12px;
    color: #e0e0e0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-message-read-indicator {
    margin-top: 4px;
    color: #62d6ff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.9;
}

.chat-message-self .chat-message-read-indicator {
    text-align: right;
}

.chat-message-other .chat-message-read-indicator {
    text-align: left;
}

.chat-message-self .chat-message-content {
    background: #fff8e1 !important;
    color: #2a2a2a !important;
    border: 1px solid #e0d5b0 !important;
}

.chat-message-system .chat-message-content {
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: #00d4ff;
    font-style: italic;
}

.chat-message-command .chat-message-content {
    background: rgba(255, 216, 107, 0.08);
    border: 1px solid rgba(255, 216, 107, 0.28);
    border-radius: 8px;
    color: #fff3c4;
    text-align: left;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: inset 3px 0 0 rgba(255, 216, 107, 0.6);
}

.chat-command-boost {
    border-color: rgba(255, 180, 64, 0.35);
}

.chat-command-boost .chat-message-content {
    background: rgba(255, 180, 64, 0.1);
    border-color: rgba(255, 180, 64, 0.34);
    box-shadow: inset 3px 0 0 rgba(255, 180, 64, 0.72);
}

.chat-command-ready {
    border-color: rgba(0, 212, 255, 0.28);
}

.chat-command-ready .chat-command-badge {
    background: rgba(0, 212, 255, 0.12);
    border-color: rgba(0, 212, 255, 0.3);
    color: #a9f0ff;
}

.chat-command-ready .chat-message-content {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.28);
    color: #d9f8ff;
    box-shadow: inset 3px 0 0 rgba(0, 212, 255, 0.62);
}

/* Empty States */
.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #666;
    text-align: center;
    padding: 20px;
}

.chat-empty-state p {
    margin: 8px 0;
    font-size: 16px;
    font-weight: 600;
}

.chat-empty-hint {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #888;
}

.chat-new-dm-btn {
    background: rgba(0, 255, 136, 0.2);
    border: 1px solid #00ff88;
    border-radius: 8px;
    padding: 8px 16px;
    color: #00ff88;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
    transition: all 0.2s ease;
}

.chat-new-dm-btn:hover {
    background: rgba(0, 255, 136, 0.3);
    transform: translateY(-2px);
}

.chat-discord-panel {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 4px;
}

.chat-discord-card {
    width: min(100%, 330px);
    padding: 18px 16px;
    border: 1px solid rgba(0, 255, 136, 0.32);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(15, 22, 45, 0.94), rgba(8, 12, 28, 0.96));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: #e0e0e0;
    text-align: left;
}

.chat-discord-card h3 {
    margin: 0 0 10px;
    color: #00ff88;
    font-size: 17px;
    line-height: 1.25;
    text-align: center;
}

.chat-discord-card p {
    margin: 0 0 10px;
    color: #c8d4e8;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

.chat-discord-card ul {
    margin: 0 0 16px;
    padding-left: 20px;
    color: #e8eef8;
    font-size: 14px;
    line-height: 1.55;
}

.chat-discord-card li::marker {
    color: #00ff88;
}

.chat-discord-join-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    border: 1px solid #00ff88;
    border-radius: 8px;
    background: #00ff88;
    color: #0a0a1a;
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 14px rgba(0, 255, 136, 0.24);
}

.chat-discord-join-btn:hover {
    background: #00ffaa;
    transform: translateY(-1px);
    box-shadow: 0 0 18px rgba(0, 255, 136, 0.34);
}

/* Loading/Error States */
.chat-loading,
.chat-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #888;
}

.chat-error-state button {
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid #ff4444;
    border-radius: 8px;
    padding: 8px 16px;
    color: #ff4444;
    font-size: 13px;
    cursor: pointer;
    margin-top: 12px;
}

/* Input Container */
.chat-input-container {
    display: none;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(0, 255, 136, 0.2);
    background: rgba(10, 10, 26, 0.8);
    flex-shrink: 0;
    min-height: 64px;
}

#chat-input {
    flex: 1;
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    color: #e0e0e0;
    font-size: 14px;
    font-family: inherit;
}

#chat-input:focus {
    outline: none;
    border-color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
}

.chat-send-btn {
    background: #00ff88;
    border: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0a0a1a;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-send-btn:hover {
    background: #00ffaa;
    transform: scale(1.05);
}

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

.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* DM Inbox List */
.chat-dm-inbox-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.chat-dm-inbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-dm-inbox-item {
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.chat-dm-inbox-item:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: #00ff88;
    transform: translateX(4px);
}

.chat-unread-dot {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
}

.chat-dm-inbox-item-content {
    margin-left: 16px;
}

.chat-dm-inbox-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.chat-dm-inbox-commander {
    color: #00ff88;
    font-weight: 600;
    font-size: 14px;
}

.chat-dm-inbox-time {
    color: #666;
    font-size: 11px;
}

.chat-dm-inbox-preview {
    color: #aaa;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* DM Thread Header */
.chat-dm-thread-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 255, 136, 0.2);
}

.chat-dm-back-btn {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 8px;
    padding: 6px 12px;
    color: #00ff88;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-dm-back-btn:hover {
    background: rgba(0, 255, 136, 0.2);
    border-color: #00ff88;
}

.chat-dm-thread-name {
    color: #00ff88;
    font-weight: 600;
    font-size: 16px;
}

/* Commander Context Menu */
.chat-commander-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.chat-commander-menu {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #00ff88;
    border-radius: 16px;
    padding: 20px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-commander-menu-header {
    color: #00ff88;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
}

.chat-commander-menu button {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 8px;
    padding: 12px;
    color: #00ff88;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-commander-menu button:hover {
    background: rgba(0, 255, 136, 0.2);
    border-color: #00ff88;
    transform: translateY(-2px);
}

.chat-commander-menu button:last-child {
    background: rgba(255, 68, 68, 0.1);
    border-color: rgba(255, 68, 68, 0.3);
    color: #ff4444;
}

.chat-commander-menu button:last-child:hover {
    background: rgba(255, 68, 68, 0.2);
    border-color: #ff4444;
}

/* Commander Picker (New DM) */
.chat-commander-picker {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #00bfff;
    border-radius: 16px;
    padding: 20px;
    width: 90vw;
    max-width: 360px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: slideUp 0.3s ease;
}

.chat-commander-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #00bfff;
    font-size: 17px;
    font-weight: 600;
}

.chat-picker-close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.chat-picker-close-btn:hover {
    color: #fff;
}

.chat-picker-search-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

.chat-picker-search-input:focus {
    border-color: #00bfff;
    background: rgba(255, 255, 255, 0.12);
}

.chat-picker-results {
    overflow-y: auto;
    max-height: 40vh;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chat-picker-hint {
    color: #888;
    font-size: 13px;
    text-align: center;
    padding: 16px 0;
}

.chat-picker-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(0, 191, 255, 0.08);
    border: 1px solid rgba(0, 191, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-picker-result-item:hover {
    background: rgba(0, 191, 255, 0.18);
    border-color: rgba(0, 191, 255, 0.4);
}

.chat-picker-result-name {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

.chat-picker-result-arrow {
    color: #00bfff;
    font-size: 16px;
}

/* === @Mention Highlights in Messages === */
.chat-mention {
    color: #00d4ff;
    font-weight: 700;
}

.chat-mention-me {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 4px;
    padding: 0 3px;
}

/* === @Mention Toast Notification === */
.chat-mention-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    width: 90vw;
    max-width: 380px;
    background: linear-gradient(135deg, #1a1a2e 0%, #0d2137 50%, #1a1a2e 100%);
    border: 2px solid #ffd700;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10005;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.35), 0 8px 32px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    opacity: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.chat-mention-toast-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.chat-mention-toast-icon {
    font-size: 28px;
    flex-shrink: 0;
    animation: mentionBounce 0.6s ease 0.4s;
}

.chat-mention-toast-body {
    flex: 1;
    min-width: 0;
}

.chat-mention-toast-title {
    color: #ffd700;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 3px;
}

.chat-mention-toast-preview {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes mentionBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* Persistent gold state when there's an unread @mention */
.chat-has-mention {
    background: linear-gradient(135deg, #ffd700 0%, #ffab00 100%) !important;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.5) !important;
}

/* Chat button pulse when @mentioned (plays on top of gold state) */
.chat-mention-pulse {
    animation: chatMentionPulse 1.5s ease-in-out infinite !important;
}

@keyframes chatMentionPulse {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 215, 0, 0.3), 0 0 24px rgba(255, 215, 0, 0.6);
    }
}

/* ============================================
   GALAXY PATROL
   ============================================ */

/* Container — full width for map display */
#galaxy-patrol-screen {
    padding: 0;
}

.gp-container {
    width: 100%;
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Top bar */
.gp-top-bar {
    display: flex;
    align-items: center;
    padding: 12px 0;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 8px;
}

.gp-title {
    color: #e0e0ff;
    font-size: 1.2rem;
    margin: 0;
    flex: 0 0 auto;
}

.gp-lb-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 1.1rem;
    cursor: pointer;
    color: #e0e0ff;
}

/* Status bar */
.gp-status-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    padding: 0;
    border-bottom: 0;
    margin: 0;
    scrollbar-width: none;
}

.gp-status-bar::-webkit-scrollbar {
    display: none;
}

.gp-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 0.74rem;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

.gp-stat span {
    font-weight: 700;
    color: #e0e0ff;
}

.gp-stat-penalty {
    color: #ff9800;
    font-weight: 700;
}

.gp-reset-btn {
    background: linear-gradient(135deg, #1a237e, #283593);
    color: #90caf9;
    border: 1px solid rgba(144,202,249,0.4);
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}

.gp-reset-btn:active {
    background: linear-gradient(135deg, #283593, #3949ab);
    box-shadow: 0 0 8px rgba(144,202,249,0.4);
}

.gp-buy-attempts-btn {
    background: linear-gradient(135deg, #00e676, #00c853);
    color: #04210f;
    border: 1px solid rgba(185,255,202,0.95);
    box-shadow: 0 0 12px rgba(0,230,118,0.45);
}

.gp-buy-attempts-btn:active {
    background: linear-gradient(135deg, #24f98c, #00e676);
    box-shadow: 0 0 16px rgba(0,230,118,0.7);
}

/* Map level indicator in status bar */
.gp-stat-level {
    color: #90caf9;
    font-weight: 700;
}

.gp-stat-cleared {
    color: #b8f5ff;
    font-weight: 800;
}

.gp-stat-cleared-complete {
    color: #7dff9e;
    text-transform: uppercase;
    letter-spacing: 0;
    text-shadow: 0 0 10px rgba(125, 255, 158, 0.45);
}

.gp-scout-dashboard-item {
    border-color: rgba(79, 195, 247, 0.35);
    background: rgba(79, 195, 247, 0.08);
}

#gp-scout-dashboard-label {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-scouts-card {
    background: rgba(12, 24, 46, 0.78);
    border: 1px solid rgba(79, 195, 247, 0.24);
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

@media (min-width: 900px) {
    .al-scouts-card {
        align-self: start;
        display: flex;
        flex-direction: column;
        max-height: 265px;
        min-height: 0;
    }

    .al-scouts-card .al-active-scouts-list {
        overflow-y: auto;
        min-height: 0;
        padding-right: 4px;
        overscroll-behavior: contain;
    }
}

.al-activity-card {
    background: rgba(14, 22, 42, 0.82);
    border: 1px solid rgba(255, 216, 107, 0.22);
    border-radius: 8px;
    padding: 12px;
    margin-top: 12px;
}

.al-hub-view > .al-activity-card,
.al-hub-view > .al-scouts-card {
    margin-top: 0;
}

.al-activity-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.al-activity-totals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.al-activity-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 8px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.08);
}

.al-activity-total span {
    color: #fff3c4;
    font-size: 0.95rem;
    font-weight: 900;
}

.al-activity-total small {
    color: #9fb0d8;
    font-size: 0.67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.al-activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.al-activity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    min-height: 54px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.al-activity-active {
    border-color: rgba(255, 216, 107, 0.24);
    background: rgba(255, 216, 107, 0.07);
}

.al-activity-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.al-activity-name {
    color: #f0f5ff;
    font-size: 0.86rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-activity-meta {
    color: #9fb0d8;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-activity-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    gap: 2px;
    color: #fff3c4;
    font-size: 0.76rem;
    font-weight: 900;
    white-space: nowrap;
}

.al-activity-note {
    color: #9fb0d8;
    font-size: 0.7rem;
    text-align: center;
}

.al-active-scouts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.al-scout-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    min-height: 48px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.al-scout-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.al-scout-system {
    color: #e8fbff;
    font-size: 0.86rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-scout-meta {
    color: rgba(209, 232, 255, 0.62);
    font-size: 0.74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-scout-time {
    flex: 0 0 auto;
    color: #7dff9e;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.al-scout-ready .al-scout-time {
    color: #ffd86b;
}

.al-scouts-empty {
    color: rgba(209, 232, 255, 0.58);
    font-size: 0.82rem;
    padding: 6px 0 2px;
    text-align: center;
}

/* Cleared badge on planet nodes */
.gp-node-cleared {
    display: block;
    font-size: 0.5rem;
    line-height: 1;
}

/* Wave progress in system sheet */
.gp-sheet-wave-progress {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 2px;
}

/* Dark mode overlay (Sat-Sun) */
.gp-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 30, 0.85);
    border-radius: 12px;
}

.gp-dark-content {
    text-align: center;
    padding: 32px 24px;
}

.gp-dark-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.gp-dark-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #90caf9;
    margin-bottom: 8px;
}

.gp-dark-message {
    font-size: 0.95rem;
    color: #8888cc;
    line-height: 1.5;
}

.gp-dark-back-btn {
    margin-top: 24px;
    padding: 10px 28px;
    background: rgba(144, 202, 249, 0.15);
    border: 1px solid rgba(144, 202, 249, 0.4);
    border-radius: 8px;
    color: #90caf9;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

/* Galaxy Patrol Battle Results Modal */
.gp-result-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.gp-result-modal {
    background: linear-gradient(145deg, #1a1a3e, #0d0d2b);
    border: 1px solid rgba(144, 202, 249, 0.3);
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 380px;
    width: 100%;
    text-align: center;
}

.gp-result-header {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gp-result-icon {
    font-size: 1.6rem;
}

.gp-result-system {
    font-size: 0.9rem;
    color: #8888cc;
    margin-bottom: 16px;
}

.gp-result-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.gp-result-stat {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gp-result-label {
    font-size: 0.7rem;
    color: #8888cc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gp-result-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #e0e0ff;
}

.gp-result-bonus {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #ffc107;
    margin-bottom: 12px;
}

.gp-result-footer {
    font-size: 0.8rem;
    color: #6666aa;
    margin-bottom: 16px;
}

.gp-result-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #1565c0, #0d47a1);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* Galaxy Map — fills available space like combat canvas */
.gp-map {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 50vh;
    background: url('../images/galaxy_patrol.png?v=1778252760') center/cover no-repeat;
    border-radius: 8px;
    overflow: hidden;
}

/* SVG connection lines */
.gp-connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Connection lines hidden — stellar chart image has its own arrows */
.gp-line,
.gp-line-active {
    stroke: transparent;
    stroke-width: 0;
}

/* System nodes — overlays on stellar chart planets */
.gp-node {
    position: absolute;
    transform: translate(-50%, -110%);
    background: rgba(5,8,25,0.92);
    border: 2px solid rgba(255,255,255,0.55);
    border-radius: 10px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    cursor: pointer;
    min-width: 60px;
    transition: transform 0.15s, box-shadow 0.15s;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.gp-node:active {
    transform: translate(-50%, -110%) scale(0.96);
}

.gp-node-current {
    background: rgba(20,60,160,0.9);
    border-color: #60a5fa;
    box-shadow: 0 0 12px rgba(96,165,250,0.6), 0 0 4px rgba(96,165,250,0.8);
}

.gp-node-current::before {
    content: '📍 YOU';
    font-size: 0.55rem;
    color: #60a5fa;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.gp-node-adjacent {
    opacity: 0.85;
}

.gp-node-locked {
    opacity: 0.65;
}

.gp-node-scouting {
    animation: gpScoutPulse 2s ease-in-out infinite;
}

.gp-node-intel-ready {
    background: rgba(7, 24, 35, 0.96);
    border-width: 2px;
}

@keyframes gpScoutPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.gp-node-tier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

.gp-node-target {
    font-size: 0.72rem;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(255, 216, 107, 0.7));
}

.gp-node-name {
    font-size: 0.75rem;
    color: #fff;
    white-space: nowrap;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}

.gp-node-scout-icon {
    font-size: 0.7rem;
}

.gp-node-intel {
    font-size: 0.55rem;
    color: rgba(255,255,255,0.5);
}

.gp-node-intel-complete {
    color: #ffd86b;
    text-shadow: 0 0 6px rgba(255, 216, 107, 0.45);
}

.gp-node-intel-complete strong {
    font-weight: 900;
}

/* System Bottom Sheet */
.gp-system-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #1a1d35, #0e1025);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px 16px 0 0;
    padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 16px);
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
    z-index: 100;
    max-height: 55vh;
    overflow-y: auto;
    color: #dce7ff;
}

.gp-system-sheet.gp-sheet-open {
    transform: translateY(0);
}

.gp-sheet-header {
    position: relative;
    margin-bottom: 12px;
}

.gp-sheet-title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.gp-sheet-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f0f5ff;
}

.gp-sheet-tier {
    font-size: 0.75rem;
    font-weight: 600;
}

.gp-sheet-modifier {
    font-size: 0.75rem;
    color: #9fb0d8;
    margin-top: 2px;
    font-style: italic;
}

.gp-sheet-close {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    color: #9fb0d8;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
}

/* Intel section */
.gp-sheet-intel {
    margin-bottom: 12px;
}

.gp-sheet-section-title {
    color: #aab4ff;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.gp-intel-empty {
    color: #8fa0c8;
    font-size: 0.8rem;
    text-align: center;
    padding: 10px 0;
}

.gp-intel-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.gp-intel-cat {
    font-size: 0.8rem;
    color: #dce7ff;
    font-weight: 600;
}

.gp-intel-detail {
    font-size: 0.75rem;
    color: #b9c8f2;
    text-align: right;
    max-width: 60%;
}

/* Guardian info */
.gp-guardian-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,152,0,0.1);
    border: 1px solid rgba(255,152,0,0.2);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: #ff9800;
}

.gp-guardian-icon {
    font-size: 1rem;
}

/* Action buttons */
.gp-sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gp-action-btn {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.gp-btn-battle {
    background: linear-gradient(135deg, #f44336, #d32f2f);
    color: #fff;
}

.gp-btn-battle:active {
    background: linear-gradient(135deg, #d32f2f, #b71c1c);
}

.gp-btn-scout {
    background: linear-gradient(135deg, #7c4dff, #651fff);
    color: #fff;
}

.gp-btn-scout:active {
    background: linear-gradient(135deg, #651fff, #5e00e0);
}

.gp-btn-buy-attempts {
    background: linear-gradient(135deg, #00e676, #00c853);
    color: #04210f;
    border: 1px solid rgba(185,255,202,0.95);
    box-shadow: 0 0 12px rgba(0,230,118,0.35);
}

.gp-btn-buy-attempts:active {
    background: linear-gradient(135deg, #24f98c, #00e676);
}

.gp-btn-move {
    background: linear-gradient(135deg, #42a5f5, #1e88e5);
    color: #fff;
}

.gp-btn-move:active {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
}

.gp-btn-disabled {
    background: rgba(255,255,255,0.08);
    color: #aab8de;
    cursor: not-allowed;
}

.gp-sheet-actions .gp-btn-disabled {
    background: rgba(95, 111, 159, 0.18);
    border: 1px solid rgba(159, 176, 216, 0.18);
    color: #dce7ff;
    opacity: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

.gp-sheet-actions .gp-action-btn:disabled {
    opacity: 1;
}

.gp-btn-disabled.gp-scout-boosted {
    background: linear-gradient(135deg, rgba(124,77,255,0.18), rgba(255,215,0,0.12));
    border: 1px solid rgba(124,77,255,0.4);
    color: #fff3c4;
    box-shadow: 0 0 12px rgba(124,77,255,0.12);
}

.gp-info-text {
    text-align: center;
    font-size: 0.8rem;
    color: #8fa0c8;
    padding: 8px 0;
}

/* Scout ship picker overlay */
.gp-scout-picker {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 110;
}

.gp-picker-content {
    background: linear-gradient(180deg, #1e2140, #12152a);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px 20px 0 0;
    padding: 20px 16px 24px;
    width: 100%;
    max-width: 440px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    animation: gpPickerSlideUp 0.25s ease-out;
}

@keyframes gpPickerSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.gp-picker-header {
    text-align: center;
    margin-bottom: 16px;
}

.gp-picker-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e0e0ff;
    font-family: 'Orbitron', monospace;
    margin-bottom: 4px;
}

.gp-picker-subtitle {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
}

.gp-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    overflow-y: auto;
    padding: 4px 2px 12px;
    margin-bottom: 8px;
}

.gp-scout-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(145deg, rgba(30,40,60,0.9), rgba(20,30,50,0.9));
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 12px 8px 10px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}

.gp-scout-card:active {
    transform: scale(0.95);
    border-color: #7c4dff;
    box-shadow: 0 0 12px rgba(124,77,255,0.4);
}

.gp-scout-card-locked {
    opacity: 0.35;
    pointer-events: none;
}

.gp-scout-card-img {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.gp-scout-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(124,77,255,0.35));
}

.gp-scout-card-name {
    font-size: 0.75rem;
    font-family: 'Orbitron', monospace;
    color: #e0e0ff;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}

.gp-scout-card-level {
    font-size: 0.8rem;
    color: #4ade80;
    font-family: 'Share Tech Mono', monospace;
    font-weight: 700;
}

.gp-picker-cancel {
    width: 100%;
    padding: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    color: rgba(255,255,255,0.55);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

/* Leaderboard overlay */
.gp-leaderboard {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 110;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.gp-leaderboard.gp-lb-open {
    opacity: 1;
    pointer-events: auto;
}

.gp-lb-content {
    background: linear-gradient(180deg, #1e2140, #12152a);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    max-width: 400px;
    max-height: 70vh;
    overflow-y: auto;
}

.gp-lb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.gp-lb-header h3 {
    color: #e0e0ff;
    font-size: 1rem;
    margin: 0;
}

.gp-lb-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gp-lb-loading,
.gp-lb-empty {
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 0.85rem;
    padding: 20px 0;
}

.gp-lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
}

.gp-lb-row.gp-lb-top {
    background: rgba(96,165,250,0.08);
}

.gp-lb-rank {
    font-size: 0.8rem;
    font-weight: 700;
    color: #60a5fa;
    width: 32px;
    flex-shrink: 0;
}

.gp-lb-name {
    flex: 1;
    font-size: 0.85rem;
    color: #e0e0ff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gp-lb-score {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffd740;
    flex-shrink: 0;
}

/* ====== GP HELP OVERLAY ====== */
.gp-top-bar-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.gp-help-content {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.gp-help-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gp-help-section h4 {
    color: #60a5fa;
    font-size: 0.9rem;
    margin: 0 0 6px;
}

.gp-help-section p {
    color: #c0c8e0;
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0 0 6px;
}

.gp-help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin: 6px 0;
}

.gp-help-table th {
    background: rgba(96,165,250,0.12);
    color: #60a5fa;
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
}

.gp-help-table td {
    padding: 5px 8px;
    color: #c0c8e0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.gp-help-table tr:last-child td {
    border-bottom: none;
}

/* ====== ALLIANCE PATROL FEED ====== */
.gp-feed {
    background: rgba(5,8,25,0.85);
    border: 1px solid rgba(96,165,250,0.15);
    border-radius: 12px;
    margin: 12px 0 0;
    overflow: hidden;
}

.gp-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.gp-feed-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #aab4ff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gp-feed-live {
    font-size: 0.65rem;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: 0.5px;
    animation: gpFeedPulse 2s ease-in-out infinite;
}

.gp-feed-hint {
    display: none;
    color: rgba(255,255,255,0.58);
    font-size: 0.78rem;
    font-weight: 700;
}

@keyframes gpFeedPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.gp-feed-scroll {
    height: 120px;
    overflow: hidden;
    position: relative;
}

.gp-feed-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 14px;
    transition: transform 0.5s ease;
}

.gp-feed-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.78rem;
    line-height: 1.35;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    opacity: 0;
    animation: gpFeedIn 0.4s ease forwards;
}

@keyframes gpFeedIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.gp-feed-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}

.gp-feed-dot-status { background: #94a3b8; }
.gp-feed-dot-battle { background: #f97316; }
.gp-feed-dot-intel { background: #a78bfa; }

.gp-feed-player {
    font-weight: 700;
    color: #e0e0ff;
    flex-shrink: 0;
}

.gp-feed-player-me {
    color: #60a5fa;
}

.gp-feed-msg {
    color: rgba(255,255,255,0.6);
}

.gp-feed-msg .gp-feed-system {
    color: #ffd740;
    font-weight: 600;
}

.gp-feed-msg .gp-feed-score {
    color: #4ade80;
    font-weight: 600;
}

.gp-feed-empty {
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    padding: 30px 0;
}

@media (max-width: 719px) {
    .gp-top-bar {
        flex-wrap: wrap;
    }
    .gp-title {
        flex: 1 1 auto;
    }
    .gp-status-bar {
        order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        padding-top: 4px;
    }
}

@media (max-height: 760px) and (min-width: 720px) {
    .gp-container {
        position: relative;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding: 0 6px;
    }
    .gp-top-bar {
        gap: 8px;
        margin-bottom: 4px;
        padding: 6px 0;
    }
    .gp-title {
        font-size: 1rem;
    }
    .gp-lb-btn {
        min-width: 38px;
        min-height: 34px;
        padding: 4px 8px;
        font-size: 0.95rem;
    }
    .gp-status-bar {
        gap: 5px;
    }
    .gp-stat {
        font-size: 0.68rem;
    }
    .gp-reset-btn {
        min-height: 32px;
        padding: 4px 9px;
        font-size: 0.68rem;
        border-radius: 7px;
    }
    .gp-map {
        flex: 1 1 auto;
        min-height: 0;
        border-radius: 6px;
    }
    .gp-feed {
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 6px;
        max-height: 32px;
        margin: 0;
        border-radius: 8px;
        background: rgba(5,8,25,0.88);
        backdrop-filter: blur(6px);
        transition: max-height 0.2s ease;
        z-index: 4;
    }
    .gp-feed.gp-feed-open {
        max-height: 154px;
    }
    .gp-feed-header {
        position: relative;
        cursor: pointer;
        min-height: 30px;
        padding: 5px 10px 4px;
        border-bottom: 0;
    }
    .gp-feed.gp-feed-open .gp-feed-header {
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .gp-feed-title {
        font-size: 0.82rem;
    }
    .gp-feed-hint {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        white-space: nowrap;
        font-size: 0.84rem;
    }
    .gp-feed.gp-feed-open .gp-feed-hint {
        display: none;
    }
    .gp-feed-live {
        font-size: 0.68rem;
    }
    .gp-feed-scroll {
        height: 0;
        transition: height 0.2s ease;
    }
    .gp-feed.gp-feed-open .gp-feed-scroll {
        height: 112px;
    }
    .gp-feed-list {
        padding: 3px 10px;
        gap: 0;
    }
    .gp-feed-item {
        padding: 3px 0;
        font-size: 0.86rem;
        line-height: 1.3;
    }
}

/* Desktop Drawer (>= 768px) */
@media (min-width: 768px) {
    .chat-container {
        right: 0;
        left: auto;
        top: 0;
        bottom: 0;
        width: 360px;
        height: 100vh; /* fallback */
        height: 100dvh; /* dynamic viewport height - works on mobile browsers */
        max-height: none;
        border-top: none;
        border-left: 2px solid #00ff88;
        border-radius: 0;
        transform: translateX(100%);
    }
    
    .chat-container.open {
        transform: translateX(0);
    }
    
    .chat-floating-btn {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }
    
    /* Ensure input is always visible in drawer mode */
    .chat-messages-area {
        overflow-y: auto;
        max-height: none;
        flex: 1;
        min-height: 0;
    }

    .chat-input-container {
        position: sticky;
        bottom: 0;
    }
}

/* Tablet adjustments (>= 768px and < 1024px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .chat-container {
        width: 320px;
    }
}