* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Space Mono', monospace;
    background: #1a1a1a;
    color: #ffffff;
    overflow: hidden;
}

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

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hidden {
    display: none !important;
}

/* Main Menu */
#mainMenu h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #ff6b35;
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
}

#battleSelectionScreen h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #00bcd4;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

button {
    font-family: 'Space Mono', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 1rem 2rem;
    background: #2a2a2a;
    color: #ffffff;
    border: 2px solid #444;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 200px;
}

/* Profile button (top-left fixed corner) */
/* @tweakable The emoji/icon shown on the profile button */
.profile-button {
    position: absolute;
    top: var(--profile-btn-top, 16px);
    left: var(--profile-btn-left, 16px);
    z-index: 2100;
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff11, #ffffff06);
    color: #ffffff;
    border: 2px solid #444;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Prevent movement on hover: keep hover visual but no translation */
}
.profile-button:hover {
    background: linear-gradient(180deg, #fff3d6, #ffca5a);
}

/* Gift button specific styling (placed in top-right of main menu) */
.gift-button {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2100;
    width: 44px;
    height: 44px;
    padding: 6px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffefc7, #ffd166);
    color: #8b3e00;
    border: 2px solid #ffcc66;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gift-button:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #fff3d6, #ffca5a);
}

button:hover {
    background: #ff6b35;
    border-color: #ff6b35;
    transform: translateY(-2px);
}

/* Dealership styles */
#dealership {
    background: #1a1a1a;
    justify-content: flex-start;
    padding-top: 5vh;
}

#dealership h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #00bcd4; /* Sleek futuristic color */
}

#dealershipUI {
    width: 90%;
    max-width: 1000px;
    padding: 20px;
    background: #202020;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 188, 212, 0.1);
}

#poundsDisplay {
    font-size: 1.5rem;
    color: #00bcd4;
    margin-bottom: 15px;
    text-align: right;
    padding: 5px;
}

.dealership-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.dealership-controls span {
    color: #aaa;
    margin-right: 10px;
}

.sort-btn, .filter-btn, .tier-filter-btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    min-width: auto;
    background: #333;
    border: 1px solid #555;
}

.sort-btn.selected, .filter-btn.selected {
    background: #00bcd4;
    border-color: #00bcd4;
    color: #1a1a1a;
}

/* Striped blue hover effect for component buttons */
.dealership-component-card button:hover:not(.purchased),
.sort-btn:hover:not(.selected),
.filter-btn:hover:not(.selected),
.tier-filter-btn:hover:not(.selected) {
    /* Striped Blue Background: Linear gradient with repeating blue/dark-blue segments */
    background: repeating-linear-gradient(
        45deg,
        #005a78,
        #005a78 10px,
        #00bcd4 10px,
        #00bcd4 12px
    );
    border-color: #00bcd4;
    color: white;
    transform: none; /* Override general button hover transform */
}

.component-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #333;
}

.dealership-component-card {
    background: #2a2a2a;
    padding: 15px;
    border: 2px solid #444;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

.dealership-component-card h4 {
    color: #ff6b35;
    margin-bottom: 5px;
}

.dealership-component-card p {
    font-size: 0.85rem;
    color: #ccc;
    margin-bottom: 10px;
}

.dealership-component-card button {
    margin-top: auto;
    padding: 0.5rem;
    font-size: 1rem;
}

.dealership-component-card .purchased {
    background: #4CAF50;
    cursor: default;
    border-color: #4CAF50;
    color: #1a1a1a;
    font-weight: bold;
}
.dealership-component-card .purchased:hover {
    background: #4CAF50;
    border-color: #4CAF50;
    transform: none;
}

#backToMenuDealership {
    margin-top: 20px;
}
/* Tank Builder */
#tankBuilder {
    justify-content: flex-start;
    padding-top: 2rem;
    padding-bottom: 2rem;
    overflow-y: auto; /* Fallback scroll for overall screen if necessary */
}

#tankBuilder h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #ff6b35;
}

.builder-content {
    display: flex;
    gap: 3rem;
    width: 90%;
    max-width: 1200px;
    flex: 1; /* Occupy remaining space */
    min-height: 0;
    align-items: flex-start; /* Align content blocks to the top */
}

.component-selection {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* @tweakable Maximum height for the component selection panel in Tank Builder */
    max-height: 75vh;
    overflow-y: auto;
    padding-right: 15px;
    min-height: 0;
}

.component-group h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: #cccccc;
}

.component-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.component-btn {
    font-size: 1rem;
    padding: 0.8rem 1rem;
    min-width: auto;
}

.component-btn.selected {
    background: #ff6b35;
    border-color: #ff6b35;
}

.tank-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#previewCanvas {
    border: 2px solid #444;
    background: #2a2a2a;
}

#selectedComponentDetails {
    margin-top: 2rem;
    width: 100%;
    max-width: 300px; /* Align with tank-stats or adjust as needed */
    text-align: left;
    background: #2a2a2a;
    padding: 1rem;
    border: 2px solid #444;
}

#selectedComponentDetails h3 {
    font-size: 1.2rem;
    color: #ff6b35;
    margin-bottom: 1rem;
    text-align: center;
}

.part-detail-group {
    margin-bottom: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px dashed #444;
}

.part-detail-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.part-detail-group h4 {
    font-size: 1rem;
    color: #cccccc;
    margin-bottom: 0.4rem;
}

.part-detail-group div {
    font-size: 0.9rem;
    color: #afafaf;
    margin-left: 0.5rem;
}

.tank-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
    max-width: 300px;
}

.stat {
    font-size: 0.9rem;
    color: #cccccc;
    white-space: nowrap;
}

#backToMenu {
    position: absolute;
    top: 2rem;
    left: 2rem;
}

#tierTooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
    pointer-events: none;
    display: none;
    z-index: 10;
    transition: opacity 0.2s;
}

/* Game Screen */
#gameScreen {
    justify-content: flex-start;
    align-items: stretch;
}

#gameUI {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#coordinatesDisplay {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 1rem;
    color: #00bcd4;
    z-index: 101;
}

/* Minimap */
#minimapContainer {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 100;
    width: 150px;
    height: 150px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid #00bcd4;
    border-radius: 8px;
    overflow: hidden;
}

#minimapCanvas {
    display: block;
}

.bar {
    width: 200px;
    height: 20px;
    background: #333;
    border: 1px solid #666;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: #4CAF50;
    transition: width 0.3s ease;
}

.bar-label {
    font-size: 0.8rem;
    color: #ccc;
    margin-bottom: 0.2rem;
}

#ammoInfo {
    font-size: 0.9rem;
    color: #ccc;
}

#targetingInfo {
    font-size: 0.9rem;
    color: #ccc;
    text-transform: capitalize;
}

#gameCanvas {
    width: 100%;
    height: 100%;
    background: #2d4a2d;
    display: block;
}

#pauseBtn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    min-width: auto;
    padding: 0.5rem 1rem;
}

#damageIndicators {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.damage-indicator {
    position: absolute;
    font-size: 1.2rem;
    font-weight: bold;
    color: #ff4444;
    animation: damageFloat 1s ease-out forwards;
    pointer-events: none;
}

@keyframes damageFloat {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}

#mobileControls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 200;
}

#joystickZone {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    pointer-events: auto;
}

#aimZone {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    pointer-events: auto;
}

#fireBtn {
    position: absolute;
    bottom: 50px;
    right: 50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ff6b35;
    border: none;
    color: white;
    font-weight: bold;
    pointer-events: auto;
}

/* Economy Screen */
#economyScreen {
    justify-content: flex-start;
    padding-top: 5vh;
}

#economyScreen h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #ff6b35;
}

#economyUI {
    width: 90%;
    max-width: 500px;
    padding: 20px;
    background: #202020;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.1);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#economyPoundsDisplay, #economyCreditsDisplay {
    font-size: 1.2rem;
    text-align: center;
}

.conversion-section, .crate-section {
    padding: 15px;
    border: 1px dashed #444;
    border-radius: 4px;
}

.conversion-block {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.conversion-block h4 {
    margin: 0;
    flex-basis: 100%;
}
.conversion-block input {
    padding: 8px;
    background: #1a1a1a;
    border: 1px solid #ff6b35;
    color: white;
    width: 100px;
}

.conversion-block button {
    padding: 8px 15px;
    font-size: 0.9rem;
    min-width: auto;
    background: #ff6b35;
    border-color: #ff6b35;
}
.conversion-block button:hover {
    background: #cc562a;
    border-color: #cc562a;
}
.conversion-block p {
    flex-basis: 100%;
    font-size: 0.9rem;
    color: #ccc;
}

.crate-section button {
    margin-right: 10px;
    padding: 8px 15px;
    font-size: 0.9rem;
    min-width: auto;
}
.crate-section button#buyCrateBtn {
    background: #00bcd4;
    border-color: #00bcd4;
}
.crate-section button#buyCrateBtn:hover {
    background: #00a0b2;
    border-color: #00a0b2;
}

/* Probability modal small-screen adjustments */
#probabilityModal #probabilityModalCard {
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
}

/* Probability list entries */
#probabilityList .prob-row {
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding:8px;
    border-bottom:1px dashed #333;
}
#probabilityList .prob-row .label {
    color:#ccc;
}
#probabilityList .prob-row .pct {
    color:#ff6b35;
    font-weight:700;
}

/* Make Probability button visually consistent */
#showProbabilitiesBtn {
    background: #444;
    border-color: #666;
    color: #fff;
}
#showProbabilitiesBtn:hover {
    background: repeating-linear-gradient(
        45deg,
        #005a78,
        #005a78 10px,
        #00bcd4 10px,
        #00bcd4 12px
    );
    border-color: #00bcd4;
    color: white;
}

/* Disclaimer text shown under crate unboxing results */
.disclaimer {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #ffd166;
    font-style: italic;
    opacity: 0.95;
}

/* Back button positioning for economy screen */
#backToMenuEconomy {
    margin-top: 20px;
}

/* Global back button (left upper corner with left arrow) */
/* @tweakable The horizontal (left) offset for all back buttons */
:root { --back-btn-left: 16px; --back-btn-top: 16px; }

/* Shared style for back buttons */
.back-button {
    position: absolute;
    top: var(--back-btn-top);
    left: var(--back-btn-left);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    color: #ffffff;
    border: 2px solid #444;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    z-index: 999;
    min-width: auto;
    height: 38px;
    line-height: 1;
    transition: all 0.12s ease;
}

.back-button:hover {
    background: #ff6b35;
    border-color: #ff6b35;
    color: #1a1a1a;
    transform: translateY(-2px);
}

/* Make sure multiple screens' back buttons don't stack exactly on top of one another:
   screen-specific overrides will offset further if needed */
#backToMenuDealership { top: calc(var(--back-btn-top) + 0px); left: calc(var(--back-btn-left) + 0px); }
#backToMenuEconomy { top: calc(var(--back-btn-top) + 0px); left: calc(var(--back-btn-left) + 0px); }
#backToMenu { top: calc(var(--back-btn-top) + 0px); left: calc(var(--back-btn-left) + 0px); }
#backToMenuBattleSelect { top: calc(var(--back-btn-top) + 0px); left: calc(var(--back-btn-left) + 0px); }

/* Mobile styles */
@media (max-width: 768px) {
    .builder-content {
        flex-direction: column;
        gap: 2rem;
    }
    
    #mainMenu h1 {
        font-size: 2.5rem;
    }
    
    .component-options {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .component-btn {
        flex: 1;
        min-width: 100px;
    }

    #minimapContainer {
        width: 100px;
        height: 100px;
        bottom: 120px; /* Above joystick */
        right: 10px;
    }
}

body.in-game {
    cursor: none;
}

/* Brainrot back-button: fully transparent except for text (no border/shadow).
   Kept separate so other back-buttons retain their standard chrome. */
#brainrotScreen .back-button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* keep pointer interactions */
    pointer-events: auto;
    /* make sure the button text is readable on top of the video */
    color: white;
}

/* Main menu custom cursor element (hidden by default). It is positioned via JS. */
.menu-cursor {
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 2000;
    display: none;
    will-change: transform, opacity;
    border-radius: 50%;
    box-shadow: 0 0 0px rgba(0,0,0,0);
}

/* When the .hide-system-cursor class is applied to body, force the OS/system cursor to be hidden
   over interactive buttons and the brainrot video overlay. This allows the site's custom cursor
   or simply no pointer to be shown without changing internal pointer behavior elsewhere. */
.hide-system-cursor button,
.hide-system-cursor #brainrotScreen video {
    cursor: none !important; /* @tweakable Hide system cursor on buttons & video overlays (CSS rule) */
}

/* Hide native pointer when main menu is visible to show the custom cursor */
#mainMenu { cursor: none; }