*, *::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;
    height: 351px;
}

/* --- 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-cmd-max-dist {
    margin-left: auto;
    flex-shrink: 0;
    gap: 8px;
}

.hud-max-dist-label {
    color: #d4af37;
    font: bold 13px "Courier New", monospace;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.hud-stat-count--max-dist {
    color: #e8c040;
    font-variant-numeric: tabular-nums;
}

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

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

#content-dog.upgrade-list {
    min-height: 0;
    overflow-y: auto;
}

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

.peep-stat-btn {
    font: bold 18px "Courier New", Courier, monospace;
    letter-spacing: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    border: 1px solid #4a6068;
    border-radius: 2px;
    background: #1a2830;
    color: #9ee0e8;
    cursor: pointer;
    line-height: 1;
}

.peep-stat-btn:hover {
    background: #243844;
    color: #c8f4f8;
    border-color: #5a8088;
}

.peep-stat-btn:active {
    background: #152028;
}

.peep-stat-btn:disabled {
    opacity: 0.45;
    cursor: default;
    border-color: #353535;
    color: #6a7a80;
}

.peep-stat-btn:disabled:hover {
    background: #1a2830;
    color: #6a7a80;
    border-color: #353535;
}

/* --- Game canvas --- */
#gameCanvas {
    display: block;
    width: 1110px;
    height: 351px;
    flex-shrink: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    vertical-align: top;
    cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><line x1='12' y1='1' x2='12' y2='9' stroke='%23ff7700' stroke-width='2'/><line x1='12' y1='15' x2='12' y2='23' stroke='%23ff7700' stroke-width='2'/><line x1='1' y1='12' x2='9' y2='12' stroke='%23ff7700' stroke-width='2'/><line x1='15' y1='12' x2='23' y2='12' stroke='%23ff7700' stroke-width='2'/></svg>") 12 12, crosshair;
}

/* --- Dog stat bars --- */
.hud-stats-bars {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.hud-stat-bar-group {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hud-stat-bar-label {
    font: bold 12px "Courier New", monospace;
    letter-spacing: 0.5px;
    color: #cc6644;
    flex-shrink: 0;
    width: 28px;
}

.hud-stat-bar-track {
    width: 110px;
    height: 7px;
    background: #2a2a2e;
    border: 1px solid #3a3a3e;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
}

.hud-stat-bar-fill {
    height: 100%;
    border-radius: 1px;
    transition: width 0.1s linear;
}

.hud-stat-bar-fill--level     { background: #e0c040; }
.hud-stat-bar-fill--hunger    { background: #e06030; }
.hud-stat-bar-fill--energy    { background: #30b0e0; }
.hud-stat-bar-fill--happiness { background: #60c060; }

.hud-stat-bar-value {
    font: bold 12px "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    color: #c8d0d8;
    width: 26px;
    text-align: right;
    flex-shrink: 0;
}

/* --- Clickable command buttons in CMD HUD row --- */
.cmd-btn {
    font: bold 13px "Courier New", monospace;
    letter-spacing: 0.5px;
    color: #c8a030;
    cursor: pointer;
    padding: 3px 7px;
    border: 1px solid #3a3a24;
    background: #1c1c10;
    border-radius: 2px;
    user-select: none;
    flex-shrink: 0;
}
.cmd-btn:hover {
    color: #ffcc44;
    background: #2a2a14;
    border-color: #c8a030;
}
.cmd-btn:active {
    background: #3c3c1c;
}

/* --- Debug console (dual: status + scroll log) --- */
#debug-console.debug-console {
    --debug-font-size: calc(12px + 1pt);
    width: 100%;
    box-sizing: border-box;
    background: #0a0a0c;
    border-top: 1px solid #2a2a2e;
    padding: 6px 12px;
    flex-shrink: 0;
}

.debug-console-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
}

.debug-console--status,
.debug-console--log-wrap {
    flex: 1 1 0;
    min-width: 0;
    width: 50%;
    box-sizing: border-box;
    border: 1px solid #2a2a2e;
    border-radius: 2px;
    padding: 4px 6px;
    background: #08080a;
}

.debug-console--log-wrap {
    display: flex;
    flex-direction: column;
    min-height: calc(1.45em * 16);
}

#debug-console-status {
    margin: 0;
    font-family: "Courier New", monospace;
    font-size: var(--debug-font-size);
    line-height: 1.45;
    color: #6fd060;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: calc(1.45em * 16);
}

.debug-console-log {
    margin: 0;
    flex: 1 1 auto;
    min-height: calc(1.45em * 16);
    max-height: calc(1.45em * 16);
    overflow-y: auto;
    overflow-x: hidden;
    font-family: "Courier New", monospace;
    font-size: var(--debug-font-size);
    line-height: 1.45;
    color: #c8a060;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}