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

html {
    height: 100%;
    overflow: auto;
}

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 */
#game-canvas-wrap {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 1110px;
}

/* Game world viewport */
.game-canvas-viewport {
    position: relative;
    flex-shrink: 0;
    width: 1110px;
}

/* --- Bottom HUD row (below canvas) --- */
.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;
    justify-content: space-between;
    gap: 12px 14px;
    flex-shrink: 0;
}

.hud-bottom-armament {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    min-width: 0;
    flex: 1 1 auto;
}

.hud-bottom-stat {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 0 0 auto;
}

.hud-heli-deaths {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.hud-stat-count {
    font: bold 16px "Courier New", monospace;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    color: #c8d0d8;
    white-space: nowrap;
}

.stat-bar-wrap {
    display: inline-block;
    width: 80px;
    height: 10px;
    background: #222;
    border: 1px solid #444;
    vertical-align: middle;
    margin: 0 5px;
}
.stat-bar {
    height: 100%;
    transition: width 0.1s;
}
.stat-bar--oxy { background: #5ab8e8; }
.stat-bar--cal { background: #7ec850; }
.stat-bar--sta { background: #e8a030; }

.hud-fuel-label {
    color: #c8a030;
    font: bold 16px "Courier New", monospace;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

/* Row identity label at the left of each hud row */
.hud-row-label {
    font: bold 13px "Courier New", monospace;
    letter-spacing: 1px;
    flex-shrink: 0;
    padding-right: 10px;
    white-space: nowrap;
}
.hud-row-label--player { color: #44aaff; }
.hud-row-label--enemy  { color: #ff4422; }

.hud-bottom-row--enemy {
    border-top: 1px solid #1e1e1e;
}

.hud-fuel-label--enemy {
    color: #cc6644;
}

.hud-stat-count--enemy {
    color: #d0a8a0;
}

.hud-center-objectives-slot {
    flex: 1 1 0;
    min-width: 0;
    font: bold 15px "Courier New", monospace;
    letter-spacing: 0.4px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hud-center-objectives-slot:first-child  { text-align: left; }
.hud-center-objectives-slot:nth-child(2) { text-align: center; flex: 1.1 1 0; }
.hud-center-objectives-slot:last-child   { text-align: right; }
.hud-center-objectives-slot--neutral { color: #8a9aaa; }
.hud-center-objectives-slot--pad     { color: #c8a030; }

/* --- Left upgrade panel (360px) --- */
#ui-panel {
    width: 360px;
    align-self: stretch;
    background: #141414;
    border-right: 1px solid #333333;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 12px;
    overflow: hidden;
    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: #e8e8e8; border-bottom: 2px solid #c8c8c8; }
.tab.inactive { color: #909090; border-bottom: 2px solid transparent; }
.tab.inactive:hover { color: #b8b8b8; }

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

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

.row-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
}

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

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

.row-stats {
    font-size: 16px;
    letter-spacing: 0.3px;
}

.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;
}

.upgrade-row.affordable .row-name  { color: #e8e8e8; }
.upgrade-row.affordable .row-stats { color: #a8a8a8; }
.upgrade-row.affordable .row-own   { color: #dcdcdc; }
.upgrade-row.affordable .row-buy   { color: #f0f0f0; cursor: pointer; }
.upgrade-row.affordable .row-buy:hover { color: #ffffff; }

.upgrade-row.unaffordable .row-name  { color: #a0a0a0; }
.upgrade-row.unaffordable .row-stats { color: #8a8a8a; }
.upgrade-row.unaffordable .row-own   { color: #989898; }
.upgrade-row.unaffordable .row-buy   { color: #9a9a9a; cursor: default; }

.row-cost { color: #e0a040; }

/* --- Game canvas --- */
#gameCanvas {
    display: block;
    width: 1110px;
    flex-shrink: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}