607 lines
47 KiB
CSS
607 lines
47 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════
|
|
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)}
|
|
}
|