*, *::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    overflow: auto; /* scrollbars only when content is larger than the viewport */
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
    background: #111111;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    user-select: none;
    cursor: default;
    font-family: 'Courier New', Courier, monospace;
}

/* --- Wrapper: panel + canvas column side by side --- */
#game-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

/* Canvas + bottom HUD row (same width as playfield, outside canvas) */
#game-canvas-wrap {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 1110px;
}

/* Rocket stats — matches top HUD row styling (ore/coins rows), below game world */
.hud-bottom-row {
    width: 100%;
    box-sizing: border-box;
    background: #141414;
    border-top: 1px solid #2e2e2e;
    padding: 10px 14px;
    font: bold 16px "Courier New", monospace;
    letter-spacing: 0.5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
    flex-shrink: 0;
}

.hud-bottom-label {
    color: #4a4a4a;
    margin-right: 2px;
}

.hud-bottom-sep {
    color: #505050;
    margin: 0 8px 0 6px;
    user-select: none;
}

.hud-bottom-highlight {
    color: #e8e8e8;
}

.hud-bottom-muted {
    color: #b0b0b0;
}

.hud-bottom-radio {
    display: flex;
    align-items: center;
    margin-right: 8px;
    cursor: pointer;
}

.hud-bottom-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #a855f7;
    cursor: pointer;
}

/* --- Bottom HUD progress bars (rocket + laser rows) --- */
.hud-bar-track {
    width: 360px;
    flex-shrink: 0;
    height: 10px;
    background: #383838;
    border: 1px solid #505050;
    margin-left: auto;
    margin-right: 96px;
    overflow: hidden;
}

.hud-bar-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}

.hud-bar-rocket { background: #c07020; }
.hud-bar-laser  { background: #00aaaa; }

.laser-toggle-btn {
    font: bold 13px "Courier New", monospace;
    letter-spacing: 1px;
    padding: 2px 10px;
    border: 1px solid #505050;
    background: #1e1e1e;
    cursor: pointer;
    margin-left: 10px;
    flex-shrink: 0;
}
.laser-toggle-on  { color: #00d4aa; border-color: #00d4aa; }
.laser-toggle-off { color: #666666; border-color: #444444; }

/* --- Left upgrade panel (360px, upgrades only) --- */
#ui-panel {
    width: 360px;
    min-height: 672px;
    align-self: stretch;
    background: #141414;
    border-right: 1px solid #333333;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.panel-section-label {
    font-size: 11px;
    letter-spacing: 3px;
    color: #5c5c5c;
    margin-bottom: 8px;
    flex-shrink: 0;
}

/* --- Tab bar --- */
.tab-bar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin-bottom: 10px;
    flex-shrink: 0;
    min-height: 48px;
    border-bottom: 1px solid #2a2a2a;
}

.tab {
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 8px 10px 10px;
    flex: 1 1 0;
    min-width: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.tab.active   { color: #c0c0c0; border-bottom: 2px solid #c0c0c0; }
.tab.inactive { color: #555555; border-bottom: 2px solid transparent; }
.tab.inactive:hover { color: #888888; }

/* Tab highlights when any purchase in that tab is affordable */
.tab.tab-available {
    color: #ff8800;
    font-weight: 900;
}
.tab.active.tab-available {
    border-bottom-color: #ff8800;
}
.tab.inactive.tab-available:hover {
    color: #ffaa33;
}

/* --- Upgrade list --- */
.upgrade-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    overflow: hidden;
}

.upgrade-row {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 5px 4px 5px;
    border-bottom: 1px solid #1e1e1e;
    cursor: default;
}

/* Inner flex row: sprite + info + own + buy */
.row-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
}

/* Collection bar */
.row-bar-wrap {
    width: 100%;
    height: 5px;
    background: #222222;
    margin-top: 5px;
    border-radius: 1px;
    overflow: hidden;
    flex-shrink: 0;
}

.row-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 1px;
    transition: width 0.5s ease;
}

.row-sprite {
    flex-shrink: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.row-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.row-name {
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 1px;
    white-space: nowrap;
}

.row-stats {
    font-size: 15px;
    letter-spacing: 0.5px;
}

.row-own {
    font-size: 16px;
    font-weight: bold;
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.row-buy {
    font-size: 22px;
    font-weight: bold;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}

/* --- Affordability states --- */
.upgrade-row.affordable .row-name  { color: #c0c0c0; }
.upgrade-row.affordable .row-stats { color: #707070; }
.upgrade-row.affordable .row-own   { color: #c8c8c8; }
.upgrade-row.affordable .row-buy   { color: #e0e0e0; cursor: pointer; }
.upgrade-row.affordable .row-buy:hover { color: #ffffff; }

.upgrade-row.unaffordable .row-name  { color: #555555; }
.upgrade-row.unaffordable .row-stats { color: #484848; }
.upgrade-row.unaffordable .row-own   { color: #555555; }
.upgrade-row.unaffordable .row-buy   { color: #484848; cursor: default; }

.upgrade-row .row-own.none { color: #5a5a5a; }

/* --- Game canvas (world + top HUD) --- */
#gameCanvas {
    display: block;
    width: 1110px;
    height: 672px;
    flex-shrink: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* --- Carry / rate upgrade block: line1 = stats, line2 = cost + [^] --- */
.row-carry-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 4px;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.row-carry-line1 {
    line-height: 1.25;
}

.row-carry-line2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.row-carry-meta {
    min-width: 0;
    line-height: 1.25;
}

.row-carry-btn {
    font-size: 18px;
    font-weight: bold;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}

/* Dim stats + cost line with row affordability; [^] uses its own classes */
.upgrade-row.affordable   .row-carry-line1,
.upgrade-row.affordable   .row-carry-meta { color: #707070; }
.upgrade-row.unaffordable .row-carry-line1,
.upgrade-row.unaffordable .row-carry-meta { color: #4a4a4a; }

/* Upgrade button states are NOT gated by parent row affordability —
   so [^] is always clickable when you can afford the upgrade cost    */
.row-carry-btn.carry-upgradeable       { color: #e0e0e0; cursor: pointer; }
.row-carry-btn.carry-upgradeable:hover { color: #ffffff; }
.row-carry-btn.carry-locked            { color: #505050; cursor: default; }
.row-carry-btn.carry-maxed             { color: #5a5a5a; cursor: default; }

/* Orange cost text — dims when whole row is unaffordable */
.row-cost { color: #cc7722; }
.upgrade-row.unaffordable .row-cost { color: #4a3010; }

/* row-buy affordability states (used by Ghost row and any non-perk buy buttons) */
.upgrade-row.affordable   .row-buy           { color: #e0e0e0; cursor: pointer; }
.upgrade-row.affordable   .row-buy:hover     { color: #ffffff; }
.upgrade-row.unaffordable .row-buy           { color: #484848; cursor: default; }
.row-buy-locked                              { color: #505050; cursor: default; }

/* --- Four-tab layout: tighter padding/font so more tabs can fit later --- */
.tab-bar.four-tabs .tab {
    font-size: 15px;
    padding: 8px 4px 10px;
    letter-spacing: 0;
    min-width: 68px;
}

/* --- BASE tab: static info rows (non-purchasable) --- */
.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px;
    border-bottom: 1px solid #1e1e1e;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.info-row-label {
    color: #505050;
    font-weight: bold;
    min-width: 90px;
    flex-shrink: 0;
}

.info-row-value {
    flex: 1;
    padding-left: 8px;
    color: #484848;
}

.info-row-status {
    color: #444444;
    min-width: 60px;
    text-align: right;
    flex-shrink: 0;
}

/* --- PERKS tab rows --- */
.perk-row {
    display: flex;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid #1e1e1e;
    gap: 8px;
}

.perk-name {
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #484848;
    min-width: 130px;
    flex-shrink: 0;
}

.perk-desc {
    font-size: 13px;
    letter-spacing: 0.3px;
    color: #3a3a3a;
    flex: 1;
}

.perk-cost {
    font-size: 15px;
    font-weight: bold;
    color: #4a3010;
    min-width: 80px;
    text-align: right;
    flex-shrink: 0;
}

.perk-buy {
    font-size: 20px;
    font-weight: bold;
    color: #444444;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}

/* PERKS tab — affordability and state variants */
.perk-row.perk-affordable .perk-name { color: #c0c0c0; }
.perk-row.perk-affordable .perk-desc { color: #707070; }
.perk-row.perk-affordable .perk-cost { color: #cc7722; }

.perk-buy-ready        { color: #e0e0e0; cursor: pointer; }
.perk-buy-ready:hover  { color: #ffffff; }
.perk-buy-locked       { color: #505050; cursor: default; }
.perk-buy-maxed        { color: #5a5a5a; cursor: default; }

.perk-row.perk-maxed .perk-name { color: #888888; }
.perk-row.perk-maxed .perk-desc { color: #606060; }

/* --- Population cap row (BASE tab) --- */
.pop-cap-row {
    border-bottom: 1px solid #2a2a2a;
}

.pop-cap-label {
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #707070;
    flex: 1;
}

.pop-cap-row .row-carry-line1 { color: #707070; }
.pop-cap-row .row-carry-meta  { color: #606060; }

/* Coin cost text in pop-cap upgrade cost */
.coin-cost { color: #ccaa00; }

/* --- Population limit popup --- */
#pop-limit-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1a1a1a;
    border: 1px solid #555555;
    color: #cc4444;
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 14px 24px;
    pointer-events: none;
    z-index: 9999;
}