/* ═══════════════════════════════════════════════════════════════════════
   Galaxy Strike Online — Main Styles
   Mobile-first. Scales up to tablet (≥640px) and desktop (≥1024px).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary-color:      #00d4ff;
    --secondary-color:    #ff6b35;
    --accent-color:       #ff00ff;
    --bg-primary:         #0a0e1a;
    --bg-secondary:       #151923;
    --bg-tertiary:        #1e2433;
    --text-primary:       #ffffff;
    --text-secondary:     #b8c5d6;
    --text-muted:         #6b7c93;
    --border-color:       #2a3241;
    --success-color:      #00ff88;
    --warning-color:      #ffaa00;
    --error-color:        #ff3366;
    --card-bg:            rgba(30,36,51,0.8);
    --hover-bg:           rgba(0,212,255,0.1);
    --gradient-primary:   linear-gradient(135deg,#00d4ff,#0099cc);
    --gradient-secondary: linear-gradient(135deg,#ff6b35,#ff4500);
    /* Layout tokens */
    --header-h:    52px;
    --nav-h:       56px;
    --pg:          0.75rem;
    --r:           10px;
}

html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Space Mono', monospace;
    background: var(--bg-primary); color: var(--text-primary);
    overflow: hidden; height: 100dvh;
    background-image:
        radial-gradient(circle at 20% 50%,rgba(0,212,255,.08) 0%,transparent 50%),
        radial-gradient(circle at 80% 80%,rgba(255,107,53,.08) 0%,transparent 50%),
        radial-gradient(circle at 40% 20%,rgba(255,0,255,.04) 0%,transparent 50%);
}
h1,h2,h3,.logo,.section-title,.menu-title { font-family:'Orbitron',sans-serif; }
.hidden { display:none!important; }
.text-center{text-align:center} .w-full{width:100%}
.flex{display:flex} .flex-column{flex-direction:column}
.flex-center{align-items:center;justify-content:center}
.flex-between{justify-content:space-between} .flex-wrap{flex-wrap:wrap}
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem}
.mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem}
.p-1{padding:.5rem} .p-2{padding:1rem}

/* ── Scrollbars ──────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:3px}
::-webkit-scrollbar-thumb{background:rgba(0,212,255,.35);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,212,255,.6)}

/* ══════════════════════════════════════════════════════════════════════
   LOADING SCREEN
   ══════════════════════════════════════════════════════════════════════ */
.loading-screen {
    position:fixed;inset:0;background:var(--bg-primary);
    display:flex;align-items:center;justify-content:center;
    z-index:9999;transition:opacity .5s ease;
}
.loading-content{text-align:center;width:90%;max-width:340px;padding:2rem}
.game-title {
    font-family:'Orbitron',sans-serif;
    font-size:clamp(1.6rem,8vw,3rem);font-weight:900;
    background:var(--gradient-primary);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    margin-bottom:2rem;text-transform:uppercase;letter-spacing:3px;
}
.loading-bar{width:100%;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden;margin-bottom:1rem}
.loading-progress{height:100%;background:var(--gradient-primary);width:0%;transition:width .3s ease;animation:loading-pulse 2s infinite}
@keyframes loading-pulse{0%,100%{opacity:1}50%{opacity:.7}}
.loading-text{color:var(--text-secondary);font-size:.8rem}
.loading-indicator {
    position:fixed;top:0;left:0;width:100%;height:3px;
    background:linear-gradient(90deg,var(--primary-color) 0%,rgba(0,212,255,.3) 50%,var(--primary-color) 100%);
    background-size:200% 100%;animation:loading-gradient 2s ease-in-out infinite;
    z-index:10000;transition:opacity .3s ease;
}
.loading-indicator.hidden{opacity:0;pointer-events:none}
.loading-indicator.complete{background:linear-gradient(90deg,#4CAF50,#45a049);animation:none}
.loading-indicator.error{background:linear-gradient(90deg,#f44336,#d32f2f);animation:none}
@keyframes loading-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.loading-status {
    position:fixed;top:8px;left:50%;transform:translateX(-50%);
    background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;
    padding:6px 14px;color:var(--text-primary);font-size:.82rem;z-index:10001;
    transition:all .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.loading-status.error{background:linear-gradient(90deg,#f44336,#d32f2f);color:#fff;border-color:#d32f2f}
.loading-status.hidden{opacity:0;transform:translateX(-50%) translateY(-20px)}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP ELECTRON TITLE BAR
   ══════════════════════════════════════════════════════════════════════ */
.title-bar {
    position:fixed;top:0;left:0;right:0;height:32px;
    background:var(--bg-primary);border-bottom:1px solid var(--border-color);
    display:none;justify-content:space-between;align-items:center;padding:0 8px;
    z-index:10000;-webkit-app-region:drag;user-select:none;
}
body.electron-app .title-bar{display:flex}
body.electron-app #app{margin-top:32px}
.title-bar-title{font-size:13px;font-weight:600;color:var(--text-primary);font-family:'Orbitron',monospace}
.title-bar-right{display:flex;gap:4px}
.title-bar-btn{
    width:24px;height:24px;border:none;background:transparent;
    color:var(--text-primary);border-radius:4px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    font-size:12px;-webkit-app-region:no-drag;transition:background .2s;
}
.title-bar-btn:hover{background:var(--bg-secondary)}
.title-bar-btn.close-btn:hover{background:#e74c3c;color:#fff}
body.fullscreen .title-bar{display:none}
body.fullscreen #app{margin-top:0}

/* ══════════════════════════════════════════════════════════════════════
   MAIN MENU
   ══════════════════════════════════════════════════════════════════════ */
.main-menu {
    position:fixed;inset:0;background:var(--bg-primary);
    display:flex;align-items:center;justify-content:center;
    overflow-y:auto;padding:1rem 0;
    background-image:radial-gradient(circle at 20% 50%,rgba(0,212,255,.1) 0%,transparent 50%),
        radial-gradient(circle at 80% 80%,rgba(255,107,53,.1) 0%,transparent 50%);
}
.menu-container {
    width:95%;max-width:800px;background:var(--card-bg);
    border-radius:16px;border:1px solid var(--border-color);
    box-shadow:0 20px 60px rgba(0,0,0,.5);backdrop-filter:blur(10px);overflow:hidden;margin:auto;
}
.menu-header{text-align:center;padding:clamp(1.5rem,5vw,2.5rem) 1rem 1.2rem;background:var(--gradient-primary)}
.menu-title{font-size:clamp(1.4rem,6vw,3rem);font-weight:900;color:var(--text-primary);text-transform:uppercase;letter-spacing:3px;margin-bottom:.5rem;text-shadow:0 0 20px rgba(0,212,255,.5)}
.menu-subtitle{font-size:clamp(.85rem,2.5vw,1.2rem);color:var(--text-secondary)}
.menu-content{padding:clamp(1rem,4vw,2rem)}
.menu-section{animation:fadeInUp .5s ease-out}
.section-title{font-size:clamp(1.1rem,4vw,1.8rem);color:var(--primary-color);text-align:center;margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:2px}
.login-options{display:flex;flex-direction:column;gap:1rem;margin-bottom:1rem}
.btn-large{
    padding:clamp(.9rem,3vw,1.25rem) clamp(1rem,4vw,2.5rem);
    font-size:clamp(.9rem,2.5vw,1.2rem);font-weight:600;border-radius:10px;
    transition:all .3s;width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;
}
.login-notice{text-align:center;padding:.75rem;background:rgba(0,212,255,.1);border:1px solid var(--primary-color);border-radius:8px;color:var(--text-secondary);font-size:.85rem}
.login-notice i{color:var(--primary-color);margin-right:.4rem}

/* Server browser */
.server-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;gap:.75rem;flex-wrap:wrap}
.server-filters{display:flex;gap:.5rem;flex-wrap:wrap}
.filter-select{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:.5rem .75rem;color:var(--text-primary);font-family:'Space Mono',monospace;font-size:.85rem;cursor:pointer}
.filter-select:focus{outline:none;border-color:var(--primary-color)}
.server-list{max-height:min(55vh,360px);overflow-y:auto;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-tertiary);margin-bottom:1rem}
.server-item{display:flex;justify-content:space-between;align-items:center;padding:.85rem 1rem;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .2s,border-left .2s}
.server-item:last-child{border-bottom:none}
.server-item:hover{background:var(--hover-bg);border-left:4px solid var(--primary-color)}
.server-name{font-size:1rem;font-weight:600;margin-bottom:3px}
.server-details{font-size:.8rem;color:var(--text-secondary);display:flex;gap:.75rem;flex-wrap:wrap}
.server-actions-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.server-player-count,.server-region{background:var(--bg-secondary);padding:3px 8px;border-radius:4px;font-size:.75rem;color:var(--text-secondary);border:1px solid var(--border-color)}
.server-type{padding:3px 8px;border-radius:4px;font-size:.75rem;font-weight:600;text-transform:uppercase}
.server-type.public{background:rgba(0,255,136,.15);color:var(--success-color);border:1px solid var(--success-color)}
.server-type.private{background:rgba(255,170,0,.15);color:var(--warning-color);border:1px solid var(--warning-color)}
.server-loading,.server-empty{text-align:center;padding:3rem 1rem;color:var(--text-muted)}
.server-loading i,.server-empty i{font-size:2.5rem;margin-bottom:.75rem;opacity:.5;display:block}
.server-loading i{animation:pulse 1.5s infinite}

/* Server/Save confirmation — mobile: stacked */
.server-confirmation,.save-confirmation,.options-grid{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}
.server-preview,.save-preview,.save-info-display{background:rgba(0,212,255,.08);border:2px solid rgba(0,212,255,.3);border-radius:10px;padding:1rem;font-family:'Space Mono',monospace}
.server-preview h3,.save-preview h3,.save-info-display h3{color:var(--primary-color);margin-bottom:.75rem;text-align:center;font-size:1rem}
.server-details{color:var(--text-secondary);font-size:.9rem;line-height:1.6}
.server-info{margin:6px 0;display:flex;justify-content:space-between;align-items:center}
.server-info span{font-weight:600;color:var(--text-primary)}
.confirm-actions-left,.confirm-actions-right,.options-left,.options-right{display:flex;flex-direction:row;gap:.75rem;flex-wrap:wrap}
.confirm-actions-left .btn-large,.confirm-actions-right .btn-large,.options-left .btn-large,.options-right .btn-large{position:static;width:auto;flex:1;min-width:130px}
.confirm-navigation,.options-actions,.save-actions{display:flex;justify-content:center;margin-top:1rem}
.btn-join-server{background:linear-gradient(135deg,#00ff88,#00cc66)!important;color:#000!important;border:3px solid #00ff88!important;box-shadow:0 6px 20px rgba(0,255,136,.4)!important;font-weight:700!important}
.btn-join-server:hover{background:linear-gradient(135deg,#00ffaa,#00ff88)!important;transform:scale(1.04) translateY(-2px);box-shadow:0 8px 25px rgba(0,255,136,.5)!important}
.selected-server-info-center,.selected-save-info-center,.options-center{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}
.save-details{color:#fff;font-size:.9em;line-height:1.6;white-space:pre-wrap}
.save-info{margin:3px 0;font-family:'Space Mono',monospace}
#saveInfoDetails{color:#fff;font-size:.9em;line-height:1.4}
.save-info-content{background:rgba(0,100,200,.2);border-radius:8px;padding:.75rem;margin:0}

/* Save slots */
.save-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.5rem}
.save-slot{background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:10px;padding:1rem;cursor:pointer;transition:all .3s}
.save-slot:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,212,255,.2)}
.slot-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}
.slot-number{font-family:'Orbitron',sans-serif;font-weight:700}
.slot-status{padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase}
.slot-status.empty{background:var(--bg-tertiary);color:var(--text-muted)}
.slot-status.has-data{background:var(--success-color);color:var(--bg-primary)}
.slot-name{font-weight:700;color:var(--text-primary);margin-bottom:4px}
.slot-details{color:var(--text-muted);font-size:.9rem}
.slot-btn{width:100%;padding:.55rem;background:var(--gradient-primary);border:none;border-radius:6px;color:var(--text-primary);font-weight:600;cursor:pointer;transition:all .3s}
.slot-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,212,255,.3)}

/* Menu footer */
.menu-footer{padding:.9rem 1.5rem;background:var(--bg-secondary);border-top:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.version-text{color:var(--text-muted);font-size:.8rem}
.footer-links{display:flex;gap:1rem}
.link-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.85rem;transition:color .3s}
.link-btn:hover{color:var(--primary-color)}

/* ══════════════════════════════════════════════════════════════════════
   GAME INTERFACE
   ══════════════════════════════════════════════════════════════════════ */
.game-interface{width:100vw;height:100dvh;display:flex;flex-direction:column;overflow:hidden}

/* Header */
.game-header{
    height:var(--header-h);background:var(--bg-secondary);
    border-bottom:1px solid var(--border-color);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 .75rem;backdrop-filter:blur(10px);flex-shrink:0;
    position:sticky;top:0;z-index:500;
}
.header-left{display:flex;align-items:center;gap:.6rem;min-width:0}
.logo{font-size:clamp(1rem,4vw,1.5rem);font-weight:900;color:var(--primary-color);text-shadow:0 0 10px rgba(0,212,255,.5);white-space:nowrap}
.player-info{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.player-info>div{display:flex;align-items:center;gap:.25rem;min-width:0}
.player-name{font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:18ch}
.player-title{font-size:.75rem;color:var(--text-secondary);display:none}
.player-username{font-weight:600;color:var(--accent-color);font-size:.78rem}
.player-level{font-size:.75rem;color:var(--primary-color);white-space:nowrap}

.header-center{flex:1;display:flex;justify-content:center;overflow:hidden;min-width:0;padding:0 .4rem}
.resources{display:flex;gap:.35rem;align-items:center;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none;padding:.15rem 0}
.resources::-webkit-scrollbar{display:none}
.resource{display:flex;align-items:center;gap:.3rem;padding:.28rem .55rem;background:var(--bg-tertiary);border-radius:20px;border:1px solid var(--border-color);white-space:nowrap;font-size:.75rem;transition:border-color .2s;flex-shrink:0}
.resource:hover{border-color:var(--primary-color)}
.resource i{color:var(--primary-color);font-size:.78rem}

.header-right{display:flex;gap:.3rem;flex-shrink:0}
.header-right .btn{padding:.4rem .55rem;font-size:.8rem;border-radius:7px}

/* ── TOP NAV — desktop only ──────────────────────────────────────────── */
.main-nav{
    height:46px;background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);
    display:none;align-items:center;padding:0 .75rem;gap:.3rem;
    overflow-x:auto;position:sticky;top:var(--header-h);z-index:490;
    scrollbar-width:none;
}
.main-nav::-webkit-scrollbar{display:none}
.nav-btn{
    display:flex;align-items:center;gap:.35rem;padding:.38rem .7rem;
    background:transparent;border:1px solid transparent;border-radius:7px;
    color:var(--text-secondary);cursor:pointer;transition:all .25s;
    white-space:nowrap;font-family:'Space Mono',monospace;font-size:.78rem;
}
.nav-btn:hover{background:var(--hover-bg);color:var(--text-primary);border-color:var(--primary-color)}
.nav-btn.active{background:var(--gradient-primary);color:var(--bg-primary);border-color:transparent;font-weight:700}
.nav-btn i{font-size:.85rem}

/* ── BOTTOM NAV — mobile primary navigation ──────────────────────────── */
.bottom-nav{
    position:fixed;bottom:0;left:0;right:0;
    height:var(--nav-h);
    background:var(--bg-secondary);border-top:1px solid var(--border-color);
    display:flex;align-items:stretch;z-index:600;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    padding-bottom:env(safe-area-inset-bottom,0px);
}
.bottom-nav::-webkit-scrollbar{display:none}
.bottom-nav-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:.28rem .4rem;background:transparent;border:none;
    color:var(--text-muted);cursor:pointer;transition:color .2s,background .2s;
    font-family:'Space Mono',monospace;font-size:.52rem;line-height:1.1;
    flex:1;min-width:48px;max-width:68px;white-space:nowrap;overflow:hidden;
    border-top:2px solid transparent;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.bottom-nav-btn i{font-size:1rem;display:block}
.bottom-nav-btn.active{color:var(--primary-color);border-top-color:var(--primary-color);background:rgba(0,212,255,.06)}
.bottom-nav-more{
    background:transparent;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:.28rem .4rem;min-width:48px;max-width:68px;flex-shrink:0;
    color:var(--text-muted);cursor:pointer;font-size:.52rem;border-top:2px solid transparent;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:'Space Mono',monospace;
}
.bottom-nav-more i{font-size:1rem;display:block}
.bottom-nav-more:hover,.bottom-nav-more.open{color:var(--primary-color)}

/* ── NAV DRAWER ──────────────────────────────────────────────────────── */
.nav-drawer{
    position:fixed;bottom:var(--nav-h);left:0;right:0;
    background:var(--bg-secondary);border-top:1px solid var(--border-color);
    border-radius:16px 16px 0 0;z-index:590;
    transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    max-height:58dvh;overflow-y:auto;padding:.75rem 0;
    box-shadow:0 -8px 32px rgba(0,0,0,.4);
}
.nav-drawer.open{transform:translateY(0)}
.nav-drawer-handle{width:36px;height:4px;background:var(--border-color);border-radius:2px;margin:0 auto .75rem;cursor:pointer}
.nav-drawer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem;padding:0 .75rem .5rem}
.nav-drawer-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;padding:.6rem .4rem;
    background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;
    color:var(--text-secondary);cursor:pointer;font-size:.68rem;line-height:1.2;
    transition:all .2s;text-align:center;font-family:'Space Mono',monospace;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.nav-drawer-btn i{font-size:1.1rem;color:var(--text-muted)}
.nav-drawer-btn:hover,.nav-drawer-btn.active{background:var(--hover-bg);border-color:var(--primary-color);color:var(--primary-color)}
.nav-drawer-btn.active i{color:var(--primary-color)}
.nav-drawer-overlay{position:fixed;inset:0;z-index:580;background:rgba(0,0,0,.45);display:none}
.nav-drawer-overlay.open{display:block}

/* ── MAIN CONTENT ────────────────────────────────────────────────────── */
.main-content{
    flex:1;overflow-y:auto;overflow-x:hidden;
    padding:var(--pg);background:var(--bg-primary);
    padding-bottom:calc(var(--nav-h) + var(--pg) + env(safe-area-inset-bottom,0px));
    -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
}
.tab-content{display:none;animation:fadeIn .2s ease}
.tab-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ── DASHBOARD ───────────────────────────────────────────────────────── */
.dashboard-grid{display:grid;grid-template-columns:1fr;gap:.75rem;max-width:1200px;margin:0 auto}
.card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--r);padding:1rem;backdrop-filter:blur(10px);transition:border-color .3s,box-shadow .3s}
.card:hover{border-color:var(--primary-color);box-shadow:0 0 18px rgba(0,212,255,.15)}
.card h3{color:var(--primary-color);margin-bottom:.75rem;font-family:'Orbitron',sans-serif;font-size:.88rem;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.fleet-info,.idle-stats,.quick-actions{display:flex;flex-direction:column;gap:.6rem}
.ship-status{display:flex;align-items:center;gap:.75rem}
.ship-status i{font-size:1.6rem;color:var(--secondary-color)}
.player-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.stat{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--border-color);font-size:.8rem}
.stat:last-child{border-bottom:none}
.stat-label{color:var(--text-secondary)} .stat-value{color:var(--primary-color);font-weight:700}

/* ── DUNGEONS ────────────────────────────────────────────────────────── */
.dungeons-container{display:flex;flex-direction:column;gap:.75rem}
.dungeon-selector{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--r);padding:.75rem}
.dungeon-list{display:flex;flex-direction:column;gap:.4rem}
.dungeon-view{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--r);padding:1rem;min-height:180px;display:flex;align-items:center;justify-content:center}
.dungeon-placeholder{text-align:center;color:var(--text-muted)}
.dungeon-placeholder i{font-size:2.8rem;margin-bottom:.75rem;opacity:.5;display:block}

/* ── SKILLS ──────────────────────────────────────────────────────────── */
.skills-container{max-width:1200px;margin:0 auto}
.skill-categories,.quest-tabs,.crafting-categories,.shop-categories{
    display:flex;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap;overflow-x:auto;
    scrollbar-width:none;padding-bottom:.2rem;
}
.skill-categories::-webkit-scrollbar,.quest-tabs::-webkit-scrollbar,.crafting-categories::-webkit-scrollbar,.shop-categories::-webkit-scrollbar{display:none}
.skill-cat-btn,.quest-tab-btn,.crafting-cat-btn,.shop-cat-btn{
    padding:.4rem .85rem;background:var(--bg-tertiary);border:1px solid var(--border-color);
    border-radius:7px;color:var(--text-secondary);cursor:pointer;transition:all .25s;
    white-space:nowrap;font-family:'Space Mono',monospace;font-size:.78rem;flex-shrink:0;
}
.skill-cat-btn:hover,.quest-tab-btn:hover,.crafting-cat-btn:hover,.shop-cat-btn:hover{border-color:var(--primary-color);color:var(--text-primary)}
.skill-cat-btn.active,.quest-tab-btn.active,.crafting-cat-btn.active,.shop-cat-btn.active{background:var(--gradient-primary);color:var(--bg-primary);border-color:transparent}
.skills-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
.skills-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;flex-wrap:wrap;gap:.5rem}
.skills-header h2{color:var(--primary-color);font-size:1rem;font-weight:600;display:flex;align-items:center;gap:.5rem;margin:0}
.skill-points-display{background:var(--bg-tertiary);padding:.4rem .75rem;border-radius:7px;border:1px solid var(--border-color)}
.skill-points{color:var(--warning-color);font-weight:600;font-size:.95rem}

/* ── BASE ────────────────────────────────────────────────────────────── */
.base-container{display:flex;flex-direction:column;gap:.75rem}
.base-view,.base-upgrades{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--r);padding:.75rem}
.base-navigation{display:flex;gap:.35rem;margin-bottom:1rem;flex-wrap:wrap}
.base-nav-btn{padding:.4rem .8rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:7px;color:var(--text-secondary);cursor:pointer;transition:all .25s;font-size:.78rem;white-space:nowrap;font-family:'Space Mono',monospace}
.base-nav-btn:hover{border-color:var(--primary-color);color:var(--text-primary)}
.base-nav-btn.active{background:var(--gradient-primary);color:var(--bg-primary);border-color:transparent}
.base-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:.5rem}
.room-item{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:.55rem .4rem;cursor:pointer;transition:all .25s;text-align:center;min-height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.room-item:hover{border-color:var(--primary-color);transform:translateY(-2px)}
.room-item i{font-size:1.2rem;margin-bottom:.3rem;color:var(--primary-color)}
.room-item h4{margin:0;color:var(--text-primary);font-size:.7rem;font-weight:600}
.room-item p{margin:.15rem 0 0;color:var(--text-secondary);font-size:.62rem}

.starbases-container{display:flex;flex-direction:column;gap:.75rem}
.starbase-section{display:flex;flex-direction:column}
.starbase-section h3{margin:0 0 .6rem;color:var(--text-primary);font-size:1rem;font-weight:600}
.starbase-list,.starbase-shop{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--r);padding:.75rem;max-height:45dvh;overflow-y:auto}
.starbase-item{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:.75rem;margin-bottom:.5rem;cursor:pointer;transition:all .25s;max-height:140px;overflow-y:auto}
.starbase-item:hover{border-color:var(--primary-color)}
.starbase-item h4{margin:0 0 .35rem;color:var(--text-primary);font-size:.85rem}
.starbase-item p{margin:0;color:var(--text-secondary);font-size:.78rem}
.starbase-item .level{color:var(--primary-color);font-weight:600}
.starbase-item .description{margin-top:.25rem;line-height:1.3;max-height:55px;overflow-y:auto;padding-right:.4rem}
.starbase-purchase-list{overflow-y:auto;max-height:40dvh}

.base-visualization-container{display:flex;flex-direction:column;gap:.75rem}
#baseCanvas{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--r);width:100%;height:min(260px,38dvh)}
.base-info-overlay{display:flex;flex-direction:column;gap:.5rem}
.base-stats-overlay{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--r);padding:.75rem;max-height:220px;overflow-y:auto}
.base-stats-overlay h3{margin:0 0 .6rem;color:var(--text-primary);font-size:1rem;font-weight:600}
#baseInfoDisplay{color:var(--text-secondary);font-size:.88rem;line-height:1.4}

.upgrade-list{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;max-height:380px;overflow-y:auto;padding:.3rem}
.upgrade-item{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:.75rem;cursor:pointer;transition:all .25s}
.upgrade-item:hover{border-color:var(--primary-color);transform:translateY(-2px)}
.upgrade-item h4{margin:0 0 .3rem;color:var(--text-primary);font-size:.82rem}
.upgrade-item p{margin:0;color:var(--text-secondary);font-size:.75rem}
.upgrade-item .cost{margin-top:.3rem;color:var(--primary-color);font-weight:600;font-size:.8rem}

/* ── QUESTS ──────────────────────────────────────────────────────────── */
.quests-container{max-width:1200px;margin:0 auto}
.quest-list{display:flex;flex-direction:column;gap:.75rem}
.quest-difficulty{display:flex;gap:2px;font-size:.88rem;color:#ffd700;margin-right:.75rem}
.difficulty-1{color:#4ade80} .difficulty-2{color:#60a5fa} .difficulty-3{color:#f59e0b} .difficulty-4{color:#ef4444}
.quest-header-info{display:flex;align-items:center;gap:.75rem}
.all-objectives-completed{color:#4ade80;font-weight:600;padding:.4rem;background:rgba(74,222,128,.1);border-radius:4px;text-align:center;font-size:.85rem}
.completion-time{font-size:.78rem;color:var(--text-secondary);margin-top:.4rem;text-align:right}
.daily-countdown,.weekly-countdown{margin-bottom:1rem;padding:.65rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px}
.countdown-container{display:flex;align-items:center;gap:.4rem;justify-content:center;color:var(--text-primary);font-size:.85rem}
.countdown-container i{color:var(--primary-color)}

/* ── INVENTORY ───────────────────────────────────────────────────────── */
.inventory-container{display:flex;flex-direction:column;gap:.75rem}
.inventory-grid{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--r);padding:.75rem;overflow-y:auto;max-height:50dvh}
.item-details{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--r);padding:.75rem;min-height:110px}
.inventory-main{display:flex;gap:1rem;flex:1;min-height:0;flex-direction:column}
.inventory-section{flex:1;min-height:0;display:flex;flex-direction:column}
.inventory-section h3{margin:0 0 .75rem;color:var(--text-primary);font-size:1rem;font-weight:600}
#inventoryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem;padding:.35rem}
.inventory-slot{width:100%;aspect-ratio:1;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;display:flex;align-items:center;justify-content:center;position:relative}
.inventory-slot.starbase-bonus-slot{border:2px solid var(--primary-color);background:rgba(0,212,255,.08)}

/* Equipment */
.equipment-section{margin-bottom:1.5rem;padding:.75rem;background:var(--bg-secondary);border-radius:10px;border:1px solid var(--border-color)}
.equipment-section h3{margin:0 0 .75rem;color:var(--text-primary);font-size:1rem;font-weight:600}
.equipment-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:.75rem}
.equipment-slot{display:flex;flex-direction:column;align-items:center;text-align:center}
.slot-label{font-size:.82rem;color:var(--text-secondary);margin-bottom:.4rem;font-weight:500}
.slot-container{width:70px;height:70px;border:2px solid var(--border-color);border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);transition:all .3s;cursor:pointer}
.slot-container:hover{border-color:var(--primary-color);box-shadow:0 0 10px rgba(0,123,255,.3)}

/* ── SHOP ────────────────────────────────────────────────────────────── */
.shop-container{max-width:1200px;margin:0 auto}
.shop-items{display:grid;grid-template-columns:1fr;gap:.75rem}
.shop-item.legacy{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:1rem;transition:all .3s}
.shop-item.legacy:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,212,255,.2)}
.shop-item-content{display:flex!important;align-items:flex-start!important;gap:.75rem!important}
.shop-item-image{flex-shrink:0!important;width:64px!important;height:64px!important;border-radius:6px!important;overflow:hidden!important;background:rgba(0,0,0,.3)!important;display:flex!important;align-items:center!important;justify-content:center!important}
.shop-item-name{font-size:1rem!important;font-weight:600!important;color:#00d4ff!important;margin-bottom:4px!important}
.shop-item-description{color:#fff!important;font-size:.85rem!important;margin-bottom:.5rem!important;line-height:1.4!important}
.shop-item-stats{display:flex!important;flex-wrap:wrap!important;gap:.4rem!important;margin-bottom:.5rem!important}
.shop-item-price{font-size:.95rem!important;font-weight:600!important;color:#ffd700!important;margin-bottom:.25rem!important}
.shop-item-rarity{display:inline-block!important;padding:2px 8px!important;border-radius:4px!important;font-size:.75rem!important;font-weight:600!important;text-transform:uppercase!important;margin-bottom:.5rem!important}
.shop-item-rarity.common{background:rgba(128,128,128,.2)!important;color:#808080!important;border:1px solid rgba(128,128,128,.4)!important}
.shop-item-rarity.uncommon{background:rgba(0,255,0,.2)!important;color:#00ff00!important;border:1px solid rgba(0,255,0,.4)!important}
.shop-item-rarity.rare{background:rgba(0,100,255,.2)!important;color:#0064ff!important;border:1px solid rgba(0,100,255,.4)!important}
.shop-item-rarity.epic{background:rgba(128,0,255,.2)!important;color:#8000ff!important;border:1px solid rgba(128,0,255,.4)!important}
.shop-item-rarity.legendary{background:rgba(255,128,0,.2)!important;color:#ff8000!important;border:1px solid rgba(255,128,0,.4)!important}
.shop-item-purchase-btn{width:100%!important;padding:.5rem 1rem!important;background:var(--gradient-primary)!important;color:#fff!important;border:none!important;border-radius:4px!important;cursor:pointer!important;font-weight:600!important;transition:all .3s!important;margin-top:.5rem!important}
.shop-item-purchase-btn:hover:not(.disabled){background:linear-gradient(135deg,#00ffcc,#00ccaa)!important;transform:translateY(-1px)!important}
.shop-item-purchase-btn.disabled{background:rgba(100,100,100,.3)!important;color:#666!important;cursor:not-allowed!important}
.shop-refresh-info{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:.75rem;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.refresh-info-left{display:flex;flex-direction:column;gap:.35rem}
.refresh-countdown,.purchase-limit-info{display:flex;align-items:center;gap:.4rem;color:var(--text-secondary);font-size:.82rem}
.refresh-countdown i{color:var(--primary-color)}
.purchase-limit-info i{color:#ffd700}
.refresh-shop-btn{background:var(--gradient-primary);color:#fff;border:none;border-radius:6px;padding:.4rem .85rem;font-size:.82rem;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.refresh-shop-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,212,255,.3)}

/* ── CRAFTING ────────────────────────────────────────────────────────── */
.crafting-container{max-width:1200px;margin:0 auto}
.crafting-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;flex-wrap:wrap;gap:.5rem}
.crafting-header h2{color:var(--primary-color);font-size:1rem;font-weight:600;display:flex;align-items:center;gap:.5rem;margin:0}
.crafting-info{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.crafting-level,.crafting-experience{background:var(--bg-tertiary);padding:.38rem .7rem;border-radius:7px;border:1px solid var(--border-color);display:flex;align-items:center;gap:.4rem;color:var(--text-primary);font-size:.78rem}
.crafting-level i,.crafting-experience i{color:var(--primary-color)}
.crafting-content{display:flex;flex-direction:column;gap:.75rem}
.crafting-sidebar{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:.75rem}
.crafting-categories h3{color:var(--primary-color);font-size:1rem;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
.crafting-main{display:flex;flex-direction:column;gap:.75rem}
.recipe-list{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:.75rem;overflow-y:auto;max-height:45dvh}
.crafting-details{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:.75rem}
.crafting-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
.selected-recipe{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--text-muted)}
.selected-recipe i{font-size:2.5rem;margin-bottom:.75rem;opacity:.5}
.selected-recipe h3{margin-bottom:.5rem;color:var(--text-secondary)}

/* Recipe items */
.recipe-item{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:.85rem;margin-bottom:.75rem;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.recipe-item:hover{background:var(--hover-bg);border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,212,255,.2)}
.recipe-item.selected{background:var(--gradient-primary);border-color:var(--primary-color);box-shadow:0 4px 12px rgba(0,212,255,.3)}
.recipe-item.locked{opacity:.55;cursor:not-allowed}
.recipe-item.locked:hover{transform:none;border-color:var(--border-color)}
.recipe-item.can-craft{border-color:var(--success-color)}
.recipe-item.can-craft:hover{box-shadow:0 4px 12px rgba(0,255,136,.2)}
.recipe-item.missing-materials{opacity:.7;border-color:var(--warning-color)}
.recipe-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.recipe-header h4{color:var(--text-primary);font-size:.95rem}
.recipe-level{background:var(--bg-primary);color:var(--warning-color);padding:3px 7px;border-radius:4px;font-size:.75rem;font-weight:600}
.recipe-description{color:var(--text-secondary);font-size:.82rem;margin-bottom:.6rem}
.recipe-materials{display:flex;gap:.4rem;flex-wrap:wrap}
.material-tag{background:var(--bg-primary);color:var(--text-muted);padding:2px 6px;border-radius:4px;font-size:.72rem}
.material-item{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.82rem}
.material-item:last-child{border-bottom:none}
.material-item.missing{color:var(--error-color)}
.material-name{color:var(--text-secondary)} .material-quantity{font-size:.82rem;font-weight:600;color:var(--text-primary)}
.material-item.missing .material-quantity{color:var(--error-color);font-weight:600}
.missing-materials-text{color:var(--error-color);font-size:.78rem;margin-top:.5rem;padding:.5rem;background:rgba(255,51,102,.1);border-radius:4px;border:1px solid rgba(255,51,102,.3)}
.recipe-time{display:flex;align-items:center;gap:.35rem;color:var(--text-muted);font-size:.78rem;margin-top:.4rem}
.recipe-time i{color:var(--primary-color)}

/* ── CONSOLE WINDOW ──────────────────────────────────────────────────── */
.console-window{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(580px,95vw);height:min(380px,75dvh);background:var(--bg-secondary);border:2px solid var(--primary-color);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.8);display:none;flex-direction:column;z-index:10000;font-family:'Courier New',monospace}
.console-header{background:var(--gradient-primary);padding:10px 15px;border-radius:6px 6px 0 0;display:flex;justify-content:space-between;align-items:center;font-weight:bold;font-size:14px}
.console-close{background:none;border:none;color:var(--text-primary);font-size:18px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .3s}
.console-close:hover{background:rgba(255,255,255,.2)}
.console-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
.console-output{flex:1;padding:12px;overflow-y:auto;background:var(--bg-primary);color:var(--text-primary);font-size:12px;line-height:1.4;border-bottom:1px solid var(--border-color)}
.console-line{margin-bottom:4px;word-wrap:break-word}
.console-line.console-info{color:var(--primary-color)} .console-line.console-success{color:var(--success-color)} .console-line.console-error{color:var(--error-color)} .console-line.console-warning{color:var(--warning-color)}
.console-input-container{padding:10px;background:var(--bg-secondary)}
.console-input{width:100%;background:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);padding:7px 11px;font-family:'Courier New',monospace;font-size:12px;border-radius:4px;outline:none}
.console-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px rgba(0,212,255,.2)}

/* ══════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════════════════ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes progressShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ══════════════════════════════════════════════════════════════════════
   TABLET  ≥ 640px
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:640px){
    :root{--header-h:56px;--pg:1rem}
    html{font-size:15px}
    .player-title{display:inline}
    .player-name{max-width:22ch}
    .dashboard-grid{grid-template-columns:repeat(2,1fr)}
    .skills-grid{grid-template-columns:repeat(2,1fr)}
    .shop-items{grid-template-columns:repeat(2,1fr)}
    .crafting-grid{grid-template-columns:repeat(2,1fr)}
    #inventoryGrid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
    .starbases-container{flex-direction:row}
    .starbase-section{flex:1}
    .base-rooms{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
    .upgrade-list{grid-template-columns:repeat(3,1fr)}
    .nav-drawer-grid{grid-template-columns:repeat(5,1fr)}
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP  ≥ 1024px  — switch to top nav
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:1024px){
    :root{--header-h:60px;--pg:1rem}
    html{font-size:15px}
    .main-nav{display:flex}
    .bottom-nav,.bottom-nav-more,.nav-drawer,.nav-drawer-overlay{display:none!important}
    .main-content{padding-bottom:var(--pg)}
    .player-title{display:inline}
    .player-name{max-width:26ch;font-size:.95rem}
    .resource{font-size:.85rem}
    .dashboard-grid{grid-template-columns:repeat(3,1fr);gap:1rem}
    .dungeons-container{flex-direction:row}
    .dungeon-selector{width:270px;flex-shrink:0;max-height:calc(100dvh - 160px);overflow-y:auto}
    .dungeon-view{flex:1;min-height:300px}
    .base-container{flex-direction:row}
    .base-view{flex:1}
    .base-upgrades{width:270px;flex-shrink:0}
    .skills-grid{grid-template-columns:repeat(3,1fr)}
    .shop-items{grid-template-columns:repeat(3,1fr)}
    .crafting-grid{grid-template-columns:repeat(3,1fr)}
    .crafting-content{flex-direction:row}
    .crafting-sidebar{width:210px;flex-shrink:0}
    .crafting-main{flex-direction:row;flex:1}
    .recipe-list{flex:1;max-height:none}
    .crafting-details{width:290px;flex-shrink:0}
    .inventory-container{flex-direction:row}
    .inventory-main{flex-direction:row}
    .inventory-grid{flex:1;max-height:none}
    .item-details{width:270px;flex-shrink:0}
    .starbases-container{flex-direction:row}
    .starbase-list,.starbase-shop{max-height:calc(100dvh - 250px)}
    .base-visualization-container{flex-direction:row}
    #baseCanvas{flex:1;height:auto;min-height:280px}
    .base-info-overlay{width:270px;flex-shrink:0}
    .base-stats-overlay{max-height:calc(100dvh - 310px)}
    .upgrade-list{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
    #inventoryGrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
    .server-confirmation,.save-confirmation,.options-grid{flex-direction:row;gap:2rem}
    .confirm-actions-left,.confirm-actions-right,.options-left,.options-right{flex-direction:column;gap:.75rem;min-width:175px}
    .confirm-actions-left .btn-large,.confirm-actions-right .btn-large,.options-left .btn-large,.options-right .btn-large{width:100%;flex:none;min-width:auto}
    .base-navigation{justify-content:center}
    .skill-categories,.quest-tabs,.crafting-categories,.shop-categories{justify-content:center;flex-wrap:nowrap}
    .player-stats-grid{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════════════════════════
   WIDE  ≥ 1280px
   ══════════════════════════════════════════════════════════════════════ */
@media(min-width:1280px){
    .dashboard-grid{grid-template-columns:repeat(4,1fr)}
    .skills-grid{grid-template-columns:repeat(4,1fr)}
}