/*
 * Layout: flex column filling 100vh.
 *   1. 3D scene      — flex:1, takes whatever height is left
 *   2. MFD row       — three square MFDs, left-to-right
 *   3. Status bar
 *   4. HOTAS controls
 *
 * MFD size is min(33vw, 30vh) so the MFDs are never wider than one-third of
 * the screen and never tall enough to crowd the 3D scene.  Both constraints
 * scale with the browser window, keeping proportions intact.
 */

.radar-app {
    background: #0a0d10;
    color: #cdd6cf;
    font-family: monospace;

    /* Full-bleed breakout from PaperMod's 720px content column. */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 8px;

    display: flex;
    flex-direction: column;
    gap: 8px;

    /* Fill one viewport height; scroll past page header to see it all at once. */
    height: 100vh;
}

.scene3d {
    display: block;
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 1px solid #1a6b33;
    border-radius: 6px;
    background: #05080a;
    touch-action: none;
}

.mfd-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
    flex-shrink: 0;
}

.mfd {
    /* Never wider than 1/3 of screen; never taller than 30% of viewport. */
    width: min(calc(33.333vw - 8px), 30vh);
    height: min(calc(33.333vw - 8px), 30vh);
    flex: none;
    background: #000;
    border-radius: 6px;
    cursor: pointer;
}

.status {
    flex-shrink: 0;
    padding: 6px 10px;
    background: #05080a;
    border: 1px solid #1a6b33;
    border-radius: 6px;
    color: #33ff66;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hotas-row {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
}

.hotas-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.hotas-label {
    font-size: 11px;
    color: #7a8a7f;
    letter-spacing: 1px;
}

.tdc-pad {
    position: relative;
    width: 80px;
    height: 80px;
    background: #11171b;
    border: 2px solid #33ff66;
    border-radius: 10px;
    touch-action: none;
    cursor: grab;
}

.tdc-pad:active {
    cursor: grabbing;
}

.tdc-knob {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #33ff66;
    border-radius: 50%;
    pointer-events: none;
}

.hotas-btn {
    background: #11171b;
    color: #33ff66;
    border: 2px solid #33ff66;
    border-radius: 8px;
    padding: 8px 12px;
    font-family: monospace;
    font-size: 13px;
    line-height: 1.1;
    cursor: pointer;
    min-width: 60px;
}

.hotas-btn:hover {
    background: #16331f;
}

.hotas-btn:active {
    background: #33ff66;
    color: #000;
}

.rocker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rocker .hotas-btn {
    min-width: 40px;
    padding: 5px 8px;
}

.rocker-mid {
    font-size: 11px;
    color: #7a8a7f;
}