/*
 * 4X SPACE CONQUEST - STYLESHEET
 * Version: 2.0.11
 *
 * Complete styling for the 4X space strategy game including:
 * - Layout and responsive design
 * - Button styles and animations
 * - Canvas and UI overlays
 * - Battle dialog styling
 * - Influence zone toggle button
 * - Version display
 * - Responsive launch menu (v2.0.11)
 *   - 4-container layout for PC/tablet
 *   - Portrait mode with sticky action buttons at top
 *   - Saved games More/Show Less functionality
 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}

body {
    background: #000;
    color: #fff;
    font-family: 'Exo 2', sans-serif;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

#gameContainer {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#gameCanvas {
    position: absolute;
    top: 0;
    left: 0;
}

/* Start Screen */
#startScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 30% 20%, #0a1628 0%, #050a12 50%, #000 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

#startScreen h1 {
    font-family: 'Orbitron', monospace;
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: 900;
    background: linear-gradient(135deg, #00f0ff, #0080ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 60px rgba(0, 240, 255, 0.5);
    margin-bottom: 10px;
    letter-spacing: 4px;
}

#startScreen .subtitle {
    font-size: clamp(0.8rem, 3vw, 1.2rem);
    color: #667;
    margin-bottom: 40px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.menu-section {
    margin-bottom: 30px;
    text-align: center;
}

.menu-section h2 {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    color: #0af;
    margin-bottom: 15px;
    letter-spacing: 3px;
}

.option-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.option-btn {
    padding: 15px 25px;
    background: rgba(0, 170, 255, 0.1);
    border: 2px solid rgba(0, 170, 255, 0.3);
    border-radius: 8px;
    color: #0af;
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
}

.option-btn:hover, .option-btn.selected {
    background: rgba(0, 170, 255, 0.3);
    border-color: #0af;
    box-shadow: 0 0 30px rgba(0, 170, 255, 0.4);
    transform: scale(1.05);
}

.option-btn.selected {
    background: rgba(0, 170, 255, 0.4);
    color: #fff;
}

.difficulty-easy { border-color: rgba(0, 255, 136, 0.3); color: #0f8; }
.difficulty-easy:hover, .difficulty-easy.selected { 
    border-color: #0f8; 
    background: rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.4);
}

.difficulty-medium { border-color: rgba(255, 200, 0, 0.3); color: #fc0; }
.difficulty-medium:hover, .difficulty-medium.selected { 
    border-color: #fc0; 
    background: rgba(255, 200, 0, 0.3);
    box-shadow: 0 0 30px rgba(255, 200, 0, 0.4);
}

.difficulty-hard { border-color: rgba(255, 68, 68, 0.3); color: #f44; }
.difficulty-hard:hover, .difficulty-hard.selected { 
    border-color: #f44; 
    background: rgba(255, 68, 68, 0.3);
    box-shadow: 0 0 30px rgba(255, 68, 68, 0.4);
}

#startBtn {
    margin-top: 30px;
    padding: 20px 60px;
    background: linear-gradient(135deg, #0080ff, #00f0ff);
    border: none;
    border-radius: 12px;
    color: #000;
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 3px;
}

#startBtn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 50px rgba(0, 240, 255, 0.6);
}

/* Color Picker */
.color-picker {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.color-tile {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.color-tile:hover {
    transform: scale(1.15);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.color-tile.selected {
    border-color: #0ff;
    border-width: 4px;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.6);
}

.color-tile.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.color-tile.disabled::before,
.color-tile.disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 3px;
    background: #ff0000;
    transform: translate(-50%, -50%) rotate(45deg);
}

.color-tile.disabled::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Transparency Slider */
.slider-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 20px;
}

#transparencySlider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, rgba(0, 150, 255, 0.1), rgba(0, 150, 255, 0.5));
    outline: none;
    -webkit-appearance: none;
}

#transparencySlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0ff;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    transition: all 0.2s ease;
}

#transparencySlider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

#transparencySlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0ff;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    transition: all 0.2s ease;
}

#transparencySlider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #888;
    font-family: 'Exo 2', sans-serif;
}

#transparencyValue {
    color: #0ff;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Game UI */
#ui {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(5, 15, 30, 0.95);
    padding: 15px;
    border-radius: 12px;
    border: 1px solid rgba(0, 170, 255, 0.3);
    backdrop-filter: blur(10px);
    display: none;
    flex-direction: column;
    width: 20%;
    min-width: 280px;
    max-width: 400px;
    z-index: 50;
}

.resources-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 10px;
    overflow-x: auto;
}

.resource {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(30, 40, 60, 0.8);
    border-radius: 6px;
    font-size: 0.85rem;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.resource-icon {
    font-size: 1rem;
}

.resource.energy { border-left: 3px solid #ff0; }
.resource.minerals { border-left: 3px solid #888; }
.resource.food { border-left: 3px solid #0f0; }
.resource.score { border-left: 3px solid #0af; }

#turnInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: rgba(0, 170, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(0, 170, 255, 0.2);
}

#turnInfo span {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
}

#endTurnBtn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #0080ff, #00c0ff);
    border: none;
    border-radius: 6px;
    color: #000;
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

#endTurnBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 200, 255, 0.5);
}

#influenceToggleBtn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 10px;
}

#influenceToggleBtn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

#influenceToggleBtn.active {
    background: rgba(0, 170, 255, 0.3);
    border-color: rgba(0, 170, 255, 0.5);
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.4);
}

#settingsBtn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 10px;
}

#settingsBtn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

/* Settings Overlay */
#settingsOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#settingsOverlay.active {
    display: flex;
}

.settings-panel {
    background: rgba(5, 15, 30, 0.98);
    border: 2px solid rgba(0, 170, 255, 0.5);
    border-radius: 15px;
    padding: 30px;
    min-width: 400px;
    max-width: 90%;
    box-shadow: 0 0 30px rgba(0, 170, 255, 0.3);
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(0, 170, 255, 0.3);
    padding-bottom: 15px;
}

.settings-header h2 {
    font-family: 'Orbitron', monospace;
    color: #0af;
    margin: 0;
    font-size: 1.5rem;
}

.settings-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.setting-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.setting-item h3 {
    font-family: 'Orbitron', monospace;
    color: #fff;
    margin: 0 0 15px 0;
    font-size: 1rem;
}

/* Action Buttons Container */
/* Unified Panel */
#unifiedPanel {
    position: absolute;
    top: 160px;
    left: 10px;
    width: 20%;
    min-width: 280px;
    max-width: 400px;
    max-height: calc(100vh - 180px);
    background: rgba(5, 15, 30, 0.98);
    border: 1px solid rgba(0, 170, 255, 0.4);
    border-radius: 12px;
    padding: 15px;
    display: none;
    z-index: 50;
    overflow-y: auto;
    overflow-x: hidden;
}

.unified-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.unified-header .planet-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #0f8;
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 170, 255, 0.3), transparent);
    margin: 20px 0;
}

.fleet-section h3,
.shipyard-section h3 {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    color: #0af;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.shipyard-section h3 {
    color: #fc0;
}

/* Two-column layout for ship lists */
#fleetContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Shipyard uses flex column layout to keep build options and queue separate */
#shipyardContent {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#fleetContent .ship-row {
    grid-column: span 1;
    padding: 6px;
    font-size: 0.85rem;
}

#fleetContent .ship-info {
    gap: 4px;
}

#fleetContent .ship-count {
    font-size: 0.7rem;
    padding: 1px 6px;
}

/* Fleet Panel */
#fleetPanel {
    position: absolute;
    top: 360px;
    left: 20px;
    width: 320px;
    height: 250px;
    max-width: calc(100vw - 40px);
    background: rgba(5, 15, 30, 0.98);
    border: 1px solid rgba(0, 170, 255, 0.4);
    border-radius: 12px;
    padding: 15px;
    padding-right: 25px;
    display: none;
    z-index: 60;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

#fleetPanel::-webkit-scrollbar {
    width: 6px;
    background: rgba(0, 170, 255, 0.1);
    border-radius: 3px;
}

#fleetPanel::-webkit-scrollbar-track {
    background: rgba(0, 170, 255, 0.1);
    border-radius: 3px;
}

#fleetPanel::-webkit-scrollbar-thumb {
    background: rgba(0, 170, 255, 0.6);
    border-radius: 3px;
    min-height: 40px;
}

/* Custom scroll track visible element for iOS */
.scroll-track {
    position: absolute;
    top: 50px;
    right: 6px;
    width: 20px;
    bottom: 15px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    z-index: 10;
    touch-action: none;
    cursor: pointer;
}

.scroll-thumb {
    position: absolute;
    top: 0;
    left: 6px;
    width: 8px;
    min-height: 40px;
    background: rgba(0, 170, 255, 0.7);
    border-radius: 4px;
    touch-action: none;
    cursor: grab;
}

.scroll-thumb:active {
    cursor: grabbing;
    background: rgba(0, 170, 255, 1);
}

#planetPanel .scroll-thumb {
    background: rgba(0, 255, 136, 0.7);
}

#planetPanel .scroll-thumb:active {
    background: rgba(0, 255, 136, 1);
}

/* Shipyard Button */
.shipyard-btn {
    border-color: rgba(255, 200, 0, 0.5) !important;
    color: #fc0 !important;
}

.shipyard-btn:hover {
    background: rgba(255, 200, 0, 0.2) !important;
    box-shadow: 0 0 30px rgba(255, 200, 0, 0.4) !important;
}

/* Shipyard Panel */
#shipyardPanel {
    position: absolute;
    top: 620px;
    left: 20px;
    width: 320px;
    height: 250px;
    max-width: calc(100vw - 40px);
    background: rgba(5, 15, 30, 0.98);
    border: 1px solid rgba(255, 200, 0, 0.4);
    border-radius: 12px;
    padding: 15px;
    padding-right: 25px;
    display: none;
    z-index: 50;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

#shipyardPanel .scroll-track {
    top: 50px;
}

#shipyardPanel .scroll-thumb {
    background: rgba(255, 200, 0, 0.7);
}

#shipyardPanel::-webkit-scrollbar {
    width: 6px;
    background: rgba(255, 200, 0, 0.1);
    border-radius: 3px;
}

#shipyardPanel::-webkit-scrollbar-thumb {
    background: rgba(255, 200, 0, 0.6);
    border-radius: 3px;
}

/* Fleet Tabs */
.fleet-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 170, 255, 0.2);
    padding-bottom: 10px;
}

.fleet-tab {
    flex: 1;
    padding: 8px 12px;
    background: rgba(0, 170, 255, 0.1);
    border: 1px solid rgba(0, 170, 255, 0.2);
    border-radius: 6px;
    color: #0af;
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.fleet-tab:hover {
    background: rgba(0, 170, 255, 0.2);
}

.fleet-tab.active {
    background: rgba(0, 170, 255, 0.3);
    border-color: #0af;
    color: #fff;
}

.fleet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 170, 255, 0.2);
}

.fleet-header h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    color: #0af;
}

.close-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #f44;
}

.fleet-planet {
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(30, 40, 60, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(0, 170, 255, 0.1);
}

.fleet-planet-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    color: #0f8;
    margin-bottom: 8px;
}

.ship-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    margin: 4px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.ship-row:hover {
    background: rgba(0, 170, 255, 0.1);
    border-color: rgba(0, 170, 255, 0.3);
}

.ship-row.selected {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
}

.ship-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ship-health {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 80px;
}

.health-bar {
    width: 40px;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
}

.health-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.health-text {
    font-size: 0.7rem;
    color: #aaa;
    min-width: 30px;
}

.ship-count {
    background: rgba(0, 170, 255, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.send-btn {
    padding: 6px 12px;
    background: rgba(168, 85, 247, 0.3);
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 4px;
    color: #a855f7;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.send-btn:hover {
    background: rgba(168, 85, 247, 0.5);
    color: #fff;
}

/* Individual ship selection */
.ship-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin: 3px 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.ship-item:hover {
    background: rgba(0, 170, 255, 0.1);
    border-color: rgba(0, 170, 255, 0.3);
}

.ship-item.selected {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.5);
}

.ship-item .ship-icon {
    font-size: 1.1rem;
}

.ship-item .ship-hp {
    font-size: 0.7rem;
    color: #0f8;
    background: rgba(0, 255, 136, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.ship-item .ship-hp.damaged {
    color: #fc0;
    background: rgba(255, 200, 0, 0.1);
}

.ship-item .ship-hp.critical {
    color: #f44;
    background: rgba(255, 68, 68, 0.1);
}

.fleet-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 170, 255, 0.2);
}

.fleet-action-btn {
    flex: 1;
    padding: 10px;
    background: rgba(168, 85, 247, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 6px;
    color: #a855f7;
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.fleet-action-btn:hover:not(:disabled) {
    background: rgba(168, 85, 247, 0.4);
    color: #fff;
}

.fleet-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.select-all-btn {
    padding: 4px 8px;
    background: rgba(0, 170, 255, 0.2);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 4px;
    color: #0af;
    font-size: 0.7rem;
    cursor: pointer;
    margin-left: auto;
}

.select-all-btn:hover {
    background: rgba(0, 170, 255, 0.4);
}

/* Planet Panel */
#planetPanel {
    position: absolute;
    top: 100px;
    left: 20px;
    width: 320px;
    height: 250px;
    max-width: calc(100vw - 40px);
    background: rgba(5, 15, 30, 0.98);
    border: 1px solid rgba(0, 255, 136, 0.4);
    border-radius: 12px;
    padding: 15px;
    padding-right: 25px;
    display: none;
    z-index: 50;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Planet Panel Custom Scrollbar Track */
#planetPanel::after {
    content: '';
    position: fixed;
    top: 20px;
    right: 20px;
    width: 6px;
    height: calc(100vh - 120px);
    background: rgba(0, 255, 136, 0.2);
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

#planetPanel.show-scroll::after {
    opacity: 1;
}

#planetPanel::-webkit-scrollbar {
    width: 6px;
    background: rgba(0, 255, 136, 0.1);
    border-radius: 3px;
}

#planetPanel::-webkit-scrollbar-track {
    background: rgba(0, 255, 136, 0.1);
    border-radius: 3px;
}

#planetPanel::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 136, 0.6);
    border-radius: 3px;
    min-height: 40px;
}

/* Ensure scrollable on iOS */
@supports (-webkit-touch-callout: none) {
    #planetPanel, #fleetPanel {
        -webkit-overflow-scrolling: touch;
    }
}

/* Scroll fade indicators */
.scroll-container {
    position: relative;
}

.scroll-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 8px;
    height: 30px;
    background: linear-gradient(transparent, rgba(5, 15, 30, 0.95));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.has-scroll .scroll-indicator {
    opacity: 1;
}

/* Force visible scrollbar on touch devices */
@media (pointer: coarse) {
    #planetPanel, #fleetPanel {
        scrollbar-width: auto;
    }
    
    #planetPanel::-webkit-scrollbar,
    #fleetPanel::-webkit-scrollbar {
        width: 12px;
        display: block !important;
        -webkit-appearance: none;
    }
    
    #planetPanel::-webkit-scrollbar-thumb,
    #fleetPanel::-webkit-scrollbar-thumb {
        min-height: 50px;
        border: 3px solid transparent;
        background-clip: padding-box;
    }
}

.planet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.planet-name {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
}

.planet-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 15px;
}

.stat {
    padding: 8px;
    background: rgba(30, 40, 60, 0.5);
    border-radius: 6px;
    font-size: 0.8rem;
}

.stat-label {
    color: #667;
    font-size: 0.7rem;
    margin-bottom: 2px;
}

/* Shipyard Section */
.shipyard-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 170, 255, 0.2);
}

.shipyard-section h4 {
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    color: #0af;
    margin-bottom: 10px;
}

.build-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.build-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: rgba(30, 40, 60, 0.5);
    border: 1px solid rgba(0, 170, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.build-btn:hover:not(:disabled) {
    background: rgba(0, 170, 255, 0.2);
    border-color: rgba(0, 170, 255, 0.5);
}

.build-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.build-cost {
    font-size: 0.7rem;
    color: #888;
}

/* Build Queue */
.build-queue {
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(168, 85, 247, 0.2);
}

.build-queue h4 {
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    color: #a855f7;
    margin-bottom: 8px;
}

.queue-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 80px;
    overflow-y: auto;
}

.queue-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
}

.queue-cancel {
    background: none;
    border: none;
    color: #f44;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.queue-cancel:hover {
    opacity: 1;
}

/* Notifications */
#notifications {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 70;
    pointer-events: none;
}

.notification {
    background: rgba(5, 15, 30, 0.95);
    border: 1px solid rgba(0, 170, 255, 0.5);
    border-radius: 8px;
    padding: 15px 25px;
    margin-bottom: 10px;
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    animation: notifyIn 0.3s ease, notifyOut 0.3s ease 2.7s;
    opacity: 0;
}

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

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

/* Victory/Defeat Screen */
#gameOverScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

#gameOverScreen h1 {
    font-family: 'Orbitron', monospace;
    font-size: clamp(2rem, 10vw, 5rem);
    margin-bottom: 20px;
}

#gameOverScreen.victory h1 {
    background: linear-gradient(135deg, #0f8, #0af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#gameOverScreen.defeat h1 {
    background: linear-gradient(135deg, #f44, #f80);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#gameOverScreen p {
    font-size: 1.2rem;
    color: #888;
    margin-bottom: 40px;
}

#restartBtn {
    padding: 15px 40px;
    background: linear-gradient(135deg, #0080ff, #00f0ff);
    border: none;
    border-radius: 10px;
    color: #000;
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* Zoom indicator */
#zoomIndicator {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 8px 15px;
    background: rgba(5, 15, 30, 0.8);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 6px;
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    color: #0af;
    display: none;
    z-index: 50;
}

#versionDisplay {
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.3);
    z-index: 40;
    pointer-events: none;
}

/* Selecting destination mode */
.selecting-destination #gameCanvas {
    cursor: crosshair;
}

.selecting-destination .destination-hint {
    display: block !important;
}

#destinationHint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 30px;
    background: rgba(168, 85, 247, 0.9);
    border-radius: 10px;
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    display: none;
    z-index: 55;
    pointer-events: none;
}

/* Battle Dialog */
#battleDialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(5, 15, 30, 0.98);
    border: 2px solid rgba(255, 68, 68, 0.8);
    border-radius: 16px;
    padding: 25px;
    display: none;
    z-index: 100;
    min-width: 320px;
    box-shadow: 0 0 50px rgba(255, 68, 68, 0.4);
}

#battleDialog h2 {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    color: #f44;
    margin-bottom: 15px;
    text-align: center;
}

.battle-info {
    background: rgba(30, 40, 60, 0.5);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.battle-info p {
    margin: 8px 0;
    font-size: 0.9rem;
}

.battle-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.battle-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.battle-btn.fight {
    background: linear-gradient(135deg, #f44, #ff8800);
    color: #fff;
}

.battle-btn.fight:hover {
    box-shadow: 0 0 30px rgba(255, 68, 68, 0.6);
    transform: scale(1.05);
}

.battle-btn.withdraw {
    background: rgba(100, 100, 100, 0.5);
    border: 1px solid #666;
    color: #aaa;
}

.battle-btn.withdraw:hover {
    background: rgba(100, 100, 100, 0.8);
    color: #fff;
}

/* Battle Results Dialog */
#battleResultsDialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(5, 15, 30, 0.98);
    border: 2px solid rgba(0, 255, 136, 0.8);
    border-radius: 16px;
    padding: 30px;
    display: none;
    z-index: 101;
    min-width: 500px;
    max-width: 700px;
    box-shadow: 0 0 50px rgba(0, 255, 136, 0.4);
}

#battleResultsDialog h2 {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    color: #0f8;
    margin-bottom: 15px;
    text-align: center;
}

.battle-summary {
    text-align: center;
    font-size: 1rem;
    color: #aaa;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.casualties-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.casualty-side {
    background: rgba(30, 40, 60, 0.5);
    border-radius: 8px;
    padding: 15px;
}

.casualty-side h4 {
    color: #0af;
    margin-bottom: 12px;
    font-size: 0.95rem;
    text-align: center;
    border-bottom: 1px solid rgba(0, 170, 255, 0.3);
    padding-bottom: 8px;
}

.casualty-stat {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 0.85rem;
}

.casualty-stat .stat-value {
    color: #0f8;
    font-weight: bold;
}

.damaged-ships {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
}

.damaged-ships strong {
    color: #fa0;
    display: block;
    margin-bottom: 6px;
}

.damaged-ships div {
    margin: 4px 0;
    padding-left: 10px;
    color: #aaa;
}

.battle-results-btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #0f8, #0c6);
    color: #000;
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.battle-results-btn:hover {
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.6);
    transform: scale(1.02);
}

/* Toggle Switch */
.toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 0.9rem;
    color: #888;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 30px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(100, 100, 100, 0.4);
    transition: 0.4s;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: rgba(0, 170, 255, 0.6);
    border-color: rgba(0, 170, 255, 0.8);
}

input:checked + .toggle-slider:before {
    transform: translateX(30px);
    background-color: #0af;
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.6);
}

.toggle-container span {
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
}

/* ============================================
   AUTH SCREEN STYLES
   ============================================ */
#authScreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 30% 20%, #0a1628 0%, #050a12 50%, #000 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

#authScreen h1 {
    font-family: 'Orbitron', monospace;
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: 900;
    background: linear-gradient(135deg, #00f0ff, #0080ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 60px rgba(0, 240, 255, 0.5);
    margin-bottom: 10px;
    letter-spacing: 4px;
}

#authScreen .subtitle {
    font-size: clamp(0.8rem, 3vw, 1.2rem);
    color: #667;
    margin-bottom: 40px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.auth-container {
    width: 100%;
    max-width: 400px;
    padding: 0 20px;
}

.auth-form {
    background: rgba(5, 15, 30, 0.95);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 20px;
}

.auth-form h2 {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    color: #0af;
    margin-bottom: 25px;
    text-align: center;
    letter-spacing: 2px;
}

.form-group {
    margin-bottom: 15px;
}

.form-group input {
    width: 100%;
    padding: 15px;
    background: rgba(30, 40, 60, 0.8);
    border: 1px solid rgba(0, 170, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus {
    outline: none;
    border-color: #0af;
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.3);
}

.form-group input::placeholder {
    color: #667;
}

.auth-error {
    color: #f44;
    font-size: 0.85rem;
    margin-bottom: 15px;
    min-height: 20px;
    text-align: center;
}

.auth-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #0080ff, #00f0ff);
    border: none;
    border-radius: 8px;
    color: #000;
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 2px;
}

.auth-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
}

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

.auth-switch {
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
    color: #888;
}

.auth-switch a {
    color: #0af;
    text-decoration: none;
    transition: color 0.2s;
}

.auth-switch a:hover {
    color: #0ff;
    text-decoration: underline;
}

/* Password Reset Styles */
.forgot-password {
    text-align: right;
    margin-top: -5px;
    margin-bottom: 15px;
    font-size: 0.85rem;
}

.forgot-password a {
    color: #0af;
    text-decoration: none;
    transition: color 0.2s;
}

.forgot-password a:hover {
    color: #0ff;
    text-decoration: underline;
}

.form-hint {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-bottom: 15px;
    text-align: center;
}

.auth-success {
    color: #0f8;
    font-size: 0.85rem;
    margin-bottom: 15px;
    min-height: 20px;
    text-align: center;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 25px 0;
}

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

.auth-divider span {
    padding: 0 15px;
    color: #667;
    font-size: 0.9rem;
}

.guest-btn {
    width: 100%;
    padding: 15px;
    background: rgba(100, 100, 100, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #aaa;
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 2px;
}

.guest-btn:hover {
    background: rgba(100, 100, 100, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.guest-note {
    text-align: center;
    margin-top: 10px;
    font-size: 0.8rem;
    color: #555;
}

/* ============================================
   START SCREEN HEADER & USER INFO
   ============================================ */
.start-header {
    text-align: center;
    margin-bottom: 30px;
}

.start-header h1 {
    font-family: 'Orbitron', monospace;
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: 900;
    background: linear-gradient(135deg, #00f0ff, #0080ff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 60px rgba(0, 240, 255, 0.5);
    margin-bottom: 10px;
    letter-spacing: 4px;
}

.start-header .subtitle {
    font-size: clamp(0.8rem, 3vw, 1.2rem);
    color: #667;
    margin-bottom: 20px;
    letter-spacing: 8px;
    text-transform: uppercase;
}

.user-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 0.9rem;
    color: #0af;
}

.logout-btn {
    padding: 6px 15px;
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid rgba(255, 68, 68, 0.4);
    border-radius: 5px;
    color: #f66;
    font-family: 'Exo 2', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.logout-btn:hover {
    background: rgba(255, 68, 68, 0.4);
    color: #fff;
}

/* ============================================
   SAVED GAMES SECTION
   ============================================ */
.saved-games-section {
    max-width: 600px;
    margin: 0 auto 30px;
}

.saved-games-list {
    max-height: 200px;
    overflow-y: auto;
    background: rgba(5, 15, 30, 0.8);
    border: 1px solid rgba(0, 170, 255, 0.2);
    border-radius: 10px;
    padding: 10px;
}

.saved-games-list::-webkit-scrollbar {
    width: 6px;
}

.saved-games-list::-webkit-scrollbar-thumb {
    background: rgba(0, 170, 255, 0.5);
    border-radius: 3px;
}

.saved-game-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: rgba(30, 40, 60, 0.5);
    border: 1px solid rgba(0, 170, 255, 0.1);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.saved-game-item:last-child {
    margin-bottom: 0;
}

.saved-game-item:hover {
    background: rgba(30, 40, 60, 0.8);
    border-color: rgba(0, 170, 255, 0.3);
}

.saved-game-info {
    flex: 1;
}

.saved-game-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    color: #0af;
    margin-bottom: 4px;
}

.saved-game-details {
    font-size: 0.75rem;
    color: #888;
}

.saved-game-actions {
    display: flex;
    gap: 8px;
}

.resume-btn {
    padding: 8px 16px;
    background: rgba(0, 255, 136, 0.2);
    border: 1px solid rgba(0, 255, 136, 0.4);
    border-radius: 5px;
    color: #0f8;
    font-family: 'Orbitron', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.resume-btn:hover {
    background: rgba(0, 255, 136, 0.4);
    color: #fff;
}

.delete-save-btn {
    padding: 8px 12px;
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid rgba(255, 68, 68, 0.4);
    border-radius: 5px;
    color: #f66;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-save-btn:hover {
    background: rgba(255, 68, 68, 0.4);
    color: #fff;
}

.no-saves {
    text-align: center;
    color: #555;
    font-size: 0.9rem;
    padding: 20px;
}

.new-game-divider {
    display: flex;
    align-items: center;
    max-width: 600px;
    margin: 30px auto;
}

.new-game-divider::before,
.new-game-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 170, 255, 0.4), transparent);
}

.new-game-divider span {
    padding: 0 20px;
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    color: #0af;
    letter-spacing: 2px;
}

/* ============================================
   LEADERBOARD BUTTON
   ============================================ */
.leaderboard-btn {
    padding: 15px 30px;
    background: rgba(168, 85, 247, 0.2);
    border: 2px solid rgba(168, 85, 247, 0.4);
    border-radius: 10px;
    color: #a855f7;
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 2px;
}

.leaderboard-btn:hover {
    background: rgba(168, 85, 247, 0.4);
    border-color: #a855f7;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
    color: #fff;
}

/* ============================================
   OVERLAY PANEL (shared styles)
   ============================================ */
.overlay-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.panel-content {
    background: rgba(5, 15, 30, 0.98);
    border: 2px solid rgba(0, 170, 255, 0.5);
    border-radius: 15px;
    padding: 30px;
    max-width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 0 50px rgba(0, 170, 255, 0.3);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 170, 255, 0.3);
}

.panel-header h2 {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    color: #0af;
    margin: 0;
}

/* ============================================
   LEADERBOARD PANEL
   ============================================ */
.leaderboard-content {
    width: 500px;
}

.leaderboard-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.leaderboard-tab {
    flex: 1;
    padding: 12px 20px;
    background: rgba(0, 170, 255, 0.1);
    border: 1px solid rgba(0, 170, 255, 0.2);
    border-radius: 8px;
    color: #0af;
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.leaderboard-tab:hover {
    background: rgba(0, 170, 255, 0.2);
}

.leaderboard-tab.active {
    background: rgba(0, 170, 255, 0.3);
    border-color: #0af;
    color: #fff;
}

.leaderboard-list {
    max-height: 400px;
    overflow-y: auto;
}

.leaderboard-entry {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: rgba(30, 40, 60, 0.5);
    border: 1px solid rgba(0, 170, 255, 0.1);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.leaderboard-entry:hover {
    background: rgba(30, 40, 60, 0.8);
    border-color: rgba(0, 170, 255, 0.4);
}

.leaderboard-rank {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fc0;
    width: 40px;
    text-align: center;
}

.leaderboard-rank.gold { color: #ffd700; }
.leaderboard-rank.silver { color: #c0c0c0; }
.leaderboard-rank.bronze { color: #cd7f32; }

.leaderboard-player {
    flex: 1;
    margin-left: 15px;
}

.leaderboard-player-name {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    color: #fff;
}

.leaderboard-player-details {
    font-size: 0.75rem;
    color: #888;
    margin-top: 2px;
}

.leaderboard-score {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    color: #0f8;
}

.leaderboard-hint {
    text-align: center;
    font-size: 0.8rem;
    color: #555;
    margin-top: 15px;
    font-style: italic;
}

.loading {
    text-align: center;
    color: #888;
    padding: 40px;
}

/* Leaderboard Difficulty Sections */
.leaderboard-difficulty-section {
    margin-bottom: 25px;
}

.leaderboard-difficulty-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.leaderboard-difficulty-header h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    margin: 0;
    letter-spacing: 1px;
}

.leaderboard-difficulty-header.easy h3 { color: #0f8; }
.leaderboard-difficulty-header.medium h3 { color: #fc0; }
.leaderboard-difficulty-header.hard h3 { color: #f44; }

.leaderboard-personal-best {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 10px;
}

.leaderboard-personal-best .pb-label {
    font-size: 0.7rem;
    color: #a855f7;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.leaderboard-personal-best .pb-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.leaderboard-personal-best .pb-score {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    color: #0f8;
}

.leaderboard-personal-best .pb-details {
    font-size: 0.75rem;
    color: #888;
}

.leaderboard-no-score {
    color: #555;
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
    padding: 10px;
}

.leaderboard-global-header {
    font-size: 0.75rem;
    color: #0af;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 10px 0 8px 0;
}

.leaderboard-entry.compact {
    padding: 8px 12px;
    margin-bottom: 5px;
}

.leaderboard-entry.compact .leaderboard-rank {
    font-size: 1rem;
    width: 30px;
}

.leaderboard-entry.compact .leaderboard-player-name {
    font-size: 0.85rem;
}

.leaderboard-entry.compact .leaderboard-player-details {
    font-size: 0.7rem;
}

.leaderboard-entry.compact .leaderboard-score {
    font-size: 0.95rem;
}

/* ============================================
   MAP VIEWER MODAL
   ============================================ */
.map-viewer-content {
    width: 700px;
}

.map-viewer-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(30, 40, 60, 0.5);
    border-radius: 8px;
}

.map-viewer-stat {
    display: flex;
    flex-direction: column;
}

.map-viewer-stat-label {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
}

.map-viewer-stat-value {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    color: #0af;
}

.map-viewer-container {
    position: relative;
    width: 100%;
    height: 400px;
    background: #000;
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

#mapViewerCanvas {
    width: 100%;
    height: 100%;
}

.map-viewer-controls {
    margin-top: 20px;
    text-align: center;
}

.replay-btn {
    padding: 15px 40px;
    background: linear-gradient(135deg, #0f8, #0c6);
    border: none;
    border-radius: 8px;
    color: #000;
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 2px;
}

.replay-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
}

/* ============================================
   DELETE CONFIRMATION DIALOG
   ============================================ */
.confirm-content {
    width: 350px;
    text-align: center;
}

.confirm-content h2 {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    color: #f66;
    margin-bottom: 15px;
}

.confirm-content p {
    color: #888;
    margin-bottom: 25px;
}

.confirm-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.confirm-btn {
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.confirm-btn.danger {
    background: linear-gradient(135deg, #f44, #ff6600);
    color: #fff;
}

.confirm-btn.danger:hover {
    box-shadow: 0 0 30px rgba(255, 68, 68, 0.5);
    transform: scale(1.05);
}

.confirm-btn:not(.danger) {
    background: rgba(100, 100, 100, 0.5);
    border: 1px solid #666;
    color: #aaa;
}

.confirm-btn:not(.danger):hover {
    background: rgba(100, 100, 100, 0.8);
    color: #fff;
}

/* ============================================
   GAME OVER SCREEN ENHANCEMENTS
   ============================================ */
.game-over-score {
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(30, 40, 60, 0.5);
    border-radius: 10px;
    text-align: center;
}

.game-over-score .score-value {
    font-family: 'Orbitron', monospace;
    font-size: 2.5rem;
    color: #0f8;
}

.game-over-score .score-label {
    font-size: 0.9rem;
    color: #888;
    margin-top: 5px;
}

.game-over-score .final-score {
    font-size: 1.2rem;
    color: #ccc;
    margin-bottom: 10px;
}

.game-over-score .final-turn {
    font-size: 1rem;
    color: #888;
}

.game-over-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.game-over-btn {
    padding: 15px 40px;
    min-width: 250px;
    border: none;
    border-radius: 10px;
    font-family: 'Orbitron', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.game-over-btn:not(.secondary) {
    background: linear-gradient(135deg, #0080ff, #00f0ff);
    color: #000;
}

.game-over-btn:not(.secondary):hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
}

.game-over-btn.secondary {
    background: rgba(100, 100, 100, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #aaa;
}

.game-over-btn.secondary:hover {
    background: rgba(100, 100, 100, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* In-game Transparency Slider */
#gameTransparencySlider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, rgba(0, 150, 255, 0.1), rgba(0, 150, 255, 0.5));
    outline: none;
    -webkit-appearance: none;
}

#gameTransparencySlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0ff;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    transition: all 0.2s ease;
}

#gameTransparencySlider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

#gameTransparencySlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0ff;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

#gameTransparencyValue {
    color: #0ff;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ============================================
   START SCREEN RESPONSIVE LAYOUT
   ============================================ */

/* Main container for start screen content */
.start-screen-content {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
    flex-wrap: wrap;
}

/* Container 1: Game Settings (Galaxy Size, AI Difficulty, Colors) */
.settings-container {
    flex: 1;
    min-width: 360px;
    max-width: 500px;
    text-align: center;
}

/* Right side column containing saved games and extra settings */
.right-side-column {
    flex: 1;
    min-width: 360px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Container 2: Saved Games */
.saved-games-container {
    width: 100%;
}

.saved-games-container .saved-games-section {
    margin: 0;
    max-width: none;
}

.saved-games-container .saved-games-list {
    max-height: none;
    overflow: visible;
}

.saved-games-container .saved-games-list.collapsed {
    max-height: none;
    overflow: hidden;
}

/* More/Show Less button for saved games */
.saved-games-more-btn {
    width: 100%;
    margin-top: 10px;
    padding: 10px 20px;
    background: rgba(0, 170, 255, 0.15);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 6px;
    color: #0af;
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 1px;
}

.saved-games-more-btn:hover {
    background: rgba(0, 170, 255, 0.3);
    border-color: #0af;
}

/* Container 3: Extra Settings (Influence & Planet Names) */
.extra-settings-container {
    width: 100%;
    text-align: center;
}

/* Container 4: Action Buttons */
.action-buttons-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin-top: 10px;
    width: 100%;
}

.action-buttons-container #startBtn {
    margin-top: 0;
}

.action-buttons-container .leaderboard-btn {
    padding: 20px 40px;
    font-size: 1rem;
}

/* ============================================
   PC/DESKTOP LAYOUT (min-width: 900px)
   ============================================ */
@media (min-width: 901px) {
    #startScreen {
        padding-top: 20px;
        padding-bottom: 20px;
        overflow-y: auto;
    }

    .start-screen-content {
        flex-wrap: nowrap;
    }

    .settings-container {
        flex: 0 0 auto;
        width: 480px;
    }

    .right-side-column {
        flex: 0 0 auto;
        width: 480px;
    }

    .action-buttons-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(5, 10, 18, 0.98) 0%, rgba(5, 10, 18, 0.9) 80%, transparent 100%);
        padding: 25px 20px 20px;
        margin-top: 0;
        z-index: 10;
    }

    /* Add bottom padding to content to account for fixed buttons */
    .start-screen-content {
        padding-bottom: 100px;
    }
}

/* ============================================
   TABLET LANDSCAPE LAYOUT
   ============================================ */
@media (min-width: 768px) and (max-width: 900px) and (orientation: landscape),
       (min-width: 900px) and (max-height: 600px) {
    #startScreen {
        padding: 10px 20px;
        overflow-y: auto;
    }

    .start-header {
        margin-bottom: 15px;
    }

    .start-header h1 {
        font-size: 2rem;
        margin-bottom: 5px;
    }

    .start-header .subtitle {
        margin-bottom: 10px;
    }

    .start-screen-content {
        flex-wrap: nowrap;
        gap: 20px;
    }

    .settings-container {
        flex: 1;
        min-width: 280px;
        max-width: 350px;
    }

    .right-side-column {
        flex: 1;
        min-width: 280px;
        max-width: 320px;
    }

    .menu-section {
        margin-bottom: 15px;
    }

    .menu-section h2 {
        font-size: 0.75rem;
        margin-bottom: 8px;
    }

    .option-btn {
        padding: 10px 15px;
        font-size: 0.75rem;
        min-width: 80px;
    }

    .color-tile {
        width: 35px;
        height: 35px;
    }

    .action-buttons-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(5, 10, 18, 0.98) 0%, rgba(5, 10, 18, 0.9) 80%, transparent 100%);
        padding: 15px 20px;
        margin-top: 0;
        z-index: 10;
    }

    .action-buttons-container #startBtn,
    .action-buttons-container .leaderboard-btn {
        padding: 12px 30px;
        font-size: 0.9rem;
    }

    .start-screen-content {
        padding-bottom: 80px;
    }
}

/* ============================================
   TABLET/MOBILE PORTRAIT LAYOUT
   ============================================ */
@media (max-width: 767px),
       (max-width: 900px) and (orientation: portrait) {
    #startScreen {
        padding: 10px;
        overflow-y: auto;
        justify-content: flex-start;
        padding-top: 10px;
    }

    .start-header {
        margin-bottom: 10px;
        position: relative;
    }

    .start-header h1 {
        font-size: 1.8rem;
        margin-bottom: 5px;
    }

    .start-header .subtitle {
        font-size: 0.7rem;
        margin-bottom: 10px;
        letter-spacing: 5px;
    }

    /* Fixed action buttons at top in portrait */
    .action-buttons-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to bottom, rgba(5, 10, 18, 0.98) 0%, rgba(5, 10, 18, 0.9) 80%, transparent 100%);
        padding: 10px 15px 20px;
        margin-top: 0;
        z-index: 100;
        flex-direction: row;
        gap: 10px;
    }

    .action-buttons-container #startBtn,
    .action-buttons-container .leaderboard-btn {
        flex: 1;
        padding: 12px 15px;
        font-size: 0.85rem;
    }

    /* Add top padding to account for fixed buttons */
    .start-header {
        margin-top: 70px;
    }

    .start-screen-content {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding-bottom: 20px;
    }

    /* Reorder containers for portrait - saved games first */
    .right-side-column {
        order: -1;
        width: 100%;
        max-width: 400px;
    }

    .settings-container {
        width: 100%;
        max-width: 400px;
    }

    .extra-settings-container {
        order: 1;
    }

    .menu-section {
        margin-bottom: 15px;
    }

    .menu-section h2 {
        font-size: 0.8rem;
        margin-bottom: 10px;
    }

    .option-btn {
        padding: 10px 18px;
        font-size: 0.8rem;
        min-width: 85px;
    }

    .option-group {
        gap: 8px;
    }

    .color-tile {
        width: 40px;
        height: 40px;
    }

    .color-picker {
        gap: 10px;
    }

    .saved-game-item {
        padding: 10px 12px;
        flex-wrap: wrap;
    }

    .save-actions {
        width: 100%;
        margin-top: 8px;
        justify-content: flex-end;
    }
}

/* ============================================
   SMALL MOBILE SCREENS
   ============================================ */
@media (max-width: 400px) {
    .start-header h1 {
        font-size: 1.5rem;
    }

    .option-btn {
        padding: 8px 12px;
        font-size: 0.75rem;
        min-width: 70px;
    }

    .color-tile {
        width: 35px;
        height: 35px;
    }

    .action-buttons-container #startBtn,
    .action-buttons-container .leaderboard-btn {
        padding: 10px 12px;
        font-size: 0.75rem;
    }
}

/* ============================================
   EDIT NICKNAME BUTTON & DIALOG
   ============================================ */
.edit-nickname-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.7;
}

.edit-nickname-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Nickname edit dialog styling */
#nicknameEditDialog .panel-content {
    border-color: rgba(0, 170, 255, 0.5);
}

#nicknameEditDialog h2 {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    color: #0af;
    margin-bottom: 20px;
    text-align: center;
}

#nicknameInput {
    width: 100%;
    padding: 12px 15px;
    background: rgba(30, 40, 60, 0.8);
    border: 1px solid rgba(0, 170, 255, 0.3);
    border-radius: 8px;
    color: #fff;
    font-family: 'Exo 2', sans-serif;
    font-size: 1rem;
    text-align: center;
}

#nicknameInput:focus {
    outline: none;
    border-color: #0af;
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.3);
}

/* Save info display adjustments */
.save-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.save-turn {
    font-family: 'Orbitron', monospace;
    font-size: 0.9rem;
    color: #0af;
}

.save-details {
    font-size: 0.75rem;
    color: #888;
    text-transform: capitalize;
}

.save-date {
    font-size: 0.7rem;
    color: #555;
}

.save-stats {
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    color: #aaa;
}

.save-actions {
    display: flex;
    gap: 8px;
}

.delete-btn {
    padding: 6px 10px;
    background: rgba(255, 68, 68, 0.2);
    border: 1px solid rgba(255, 68, 68, 0.3);
    border-radius: 5px;
    color: #f66;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-btn:hover {
    background: rgba(255, 68, 68, 0.4);
    color: #fff;
}

/* ============================================
   SHIP GROUPS (Fleet Panel)
   ============================================ */
.ship-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 170, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ship-group:hover {
    background: rgba(0, 170, 255, 0.15);
    border-color: rgba(0, 170, 255, 0.4);
}

.ship-group.has-selection {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
}

.ship-group.has-selection:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.6);
}

.ship-group.enemy {
    opacity: 0.6;
    cursor: default;
    border-color: rgba(255, 68, 68, 0.3);
}

.ship-group-icon {
    font-size: 1.4rem;
    min-width: 30px;
    text-align: center;
}

.ship-group-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ship-group-name {
    font-size: 0.85rem;
    color: #fff;
}

.ship-group-counts {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
    margin-top: 2px;
}

.available-count {
    color: #888;
}

.selected-count {
    color: #a855f7;
    font-weight: 600;
}

.enemy-count {
    color: #f66;
}