/*
  Shared terminal/cockpit theme - dark background, phosphor-green text,
  bordered panels reminiscent of an old Apple II/Atari-era console.
  Global (not a Blazor CSS-isolation *.razor.css file) because more than
  one page uses it: /play originated it, /lobby reuses it, and any future
  page should too rather than duplicating this theme locally.
*/

.cockpit-shell {
    --cockpit-bg: #01120a;
    --cockpit-panel-bg: #041c10;
    --cockpit-green: #33ff77;
    --cockpit-green-dim: #1c8a49;
    --cockpit-amber: #ffb000;
    --cockpit-red: #ff3b3b;
    --cockpit-font: 'Consolas', 'Courier New', monospace;
    font-family: var(--cockpit-font);
    color: var(--cockpit-green);
    background: var(--cockpit-bg);
    padding: 10px;
    border: 2px solid var(--cockpit-green-dim);
    box-sizing: border-box;
    /* Fixed to /play's own natural footprint (900px field + 12px gap +
       340px side column, all inside this shell's own padding/border) so
       every cockpit page is the same size - switching from /lobby to
       /play (or back) shouldn't resize the window/content at all, which
       matters even more once this isn't just a browser tab. display:flex
       here doesn't change /play's own look (its direct children already
       stack top-to-bottom in normal flow) - it's what lets a lighter page
       like /lobby center its content in the remaining space below the
       topbar instead of sitting flush in the corner of a much bigger box. */
    width: 1300px;
    min-height: 1120px;
    display: flex;
    flex-direction: column;
}

.cockpit-topbar {
    display: flex;
    justify-content: space-between;
    padding: 4px 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--cockpit-green-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cockpit-main {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.cockpit-field {
    border: 1px solid var(--cockpit-green-dim);
    padding: 4px;
    background: #000;
    line-height: 0;
}

.cockpit-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 340px;
    font-size: 15px;
}

.cockpit-weapon-row,
.cockpit-status-grid,
.cockpit-nav-row,
.cockpit-opponent-row {
    display: flex;
    justify-content: space-between;
}

.cockpit-status-grid {
    flex-wrap: wrap;
    row-gap: 4px;
}

.cockpit-status-grid span {
    width: 48%;
}

.cockpit-opponent-row.out {
    opacity: 0.45;
    text-decoration: line-through;
}

.cockpit-bar-track {
    background: #062513;
    border: 1px solid var(--cockpit-green-dim);
    height: 14px;
    width: 100%;
    position: relative;
}

.cockpit-bar-fill {
    background: var(--cockpit-green);
    height: 100%;
}

.cockpit-bar-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #eafff2;
    mix-blend-mode: difference;
}

.cockpit-log {
    margin-top: 10px;
    border: 1px solid var(--cockpit-green-dim);
    background: #000;
    padding: 6px 10px;
    height: 120px;
    overflow-y: auto;
    font-size: 14px;
}

.cockpit-checkbox-row input[type="checkbox"] {
    accent-color: var(--cockpit-green);
}

.cockpit-log-line::before {
    content: "> ";
    color: var(--cockpit-green-dim);
}

.cockpit-select,
.cockpit-input,
.cockpit-button {
    font-family: var(--cockpit-font);
    background: #000;
    color: var(--cockpit-green);
    border: 1px solid var(--cockpit-green);
    padding: 3px 6px;
    box-sizing: border-box;
}

.cockpit-button {
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.cockpit-button:hover:not(:disabled) {
    background: var(--cockpit-green-dim);
    color: var(--cockpit-bg);
}

.cockpit-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.cockpit-checkbox-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cockpit-error {
    color: var(--cockpit-amber);
}

.cockpit-hint {
    color: var(--cockpit-green);
    font-size: 12px;
    margin-top: 4px;
}

.cockpit-controls > div {
    margin-top: 6px;
}

.cockpit-controls > div:first-child {
    margin-top: 0;
}

.cockpit-field-row {
    margin-top: 8px;
}

.cockpit-field-row:first-child {
    margin-top: 0;
}

.cockpit-field-row label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    margin-bottom: 3px;
}

.cockpit-participant-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cockpit-participant-list li {
    padding: 2px 0;
}

.cockpit-participant-list li::before {
    content: "- ";
    color: var(--cockpit-green-dim);
}