* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    color: #eafbff;
    background: #040b19;
    font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    touch-action: none;
}

.controllerShell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 12px;
    background: #07142b;
}

.pilotHud {
    display: flex;
    align-items: center;
    min-height: 82px;
    padding: 10px;
    border: 1px solid #183958;
    border-radius: 7px 7px 2px 2px;
    background: #0b1d36;
}

.shipBadge {
    position: relative;
    width: 66px;
    height: 52px;
    margin-right: 11px;
    overflow: hidden;
    border: 1px solid #31627b;
    border-radius: 5px;
    background: #102d46;
    flex: none;
}

.shipBody {
    position: absolute;
    top: 21px;
    left: 12px;
    width: 42px;
    height: 11px;
    border-radius: 10px 70% 70% 10px;
    background: #53e6ff;
}

.shipBody:after {
    position: absolute;
    top: 3px;
    right: 5px;
    width: 10px;
    height: 4px;
    border-radius: 4px;
    background: #fff;
    content: "";
}

.shipWing {
    position: absolute;
    top: 10px;
    left: 22px;
    border-right: 18px solid transparent;
    border-bottom: 17px solid #dffcff;
}

.shipBadge.spriteReady {
    background-image: url("/space-shooter/player-sprites.png");
    background-repeat: no-repeat;
    background-size: 800% 300%;
}

.shipBadge.spriteReady .shipBody,
.shipBadge.spriteReady .shipWing {
    display: none;
}

.pilotIdentity {
    min-width: 0;
    flex: 1;
}

.pilotIdentity span,
.pilotIdentity strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pilotIdentity .eyebrow {
    color: #67b9cb;
    font-family: Consolas, monospace;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.14em;
}

#pilotName {
    margin-top: 3px;
    font-size: 17px;
    letter-spacing: 0.06em;
}

#pilotStatus {
    margin-top: 4px;
    color: #86aebb;
    font-size: 10px;
}

.statBlock {
    min-width: 56px;
    margin-left: 8px;
    padding-left: 9px;
    border-left: 1px solid #224a65;
    text-align: right;
}

.statBlock span,
.statBlock strong {
    display: block;
}

.statBlock span {
    color: #6fa8b7;
    font-family: Consolas, monospace;
    font-size: 8px;
    letter-spacing: 0.1em;
}

.statBlock strong {
    margin-top: 4px;
    color: #ffe583;
    font-family: Consolas, monospace;
    font-size: 18px;
}

.flightPad {
    position: relative;
    min-height: 0;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #1c4d69;
    border-radius: 3px;
    background: #08192f;
    flex: 1;
    touch-action: none;
}

.padFrame {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border: 1px solid rgba(84, 207, 232, 0.19);
    border-radius: 3px;
}

.padFrame:before,
.padFrame:after {
    position: absolute;
    width: 34px;
    height: 34px;
    border-color: #56dff7;
    border-style: solid;
    content: "";
}

.padFrame:before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.padFrame:after {
    right: -1px;
    bottom: -1px;
    border-width: 0 2px 2px 0;
}

.axis {
    position: absolute;
    background: rgba(91, 206, 230, 0.11);
}

.horizontalAxis {
    top: 50%;
    right: 18px;
    left: 18px;
    height: 1px;
}

.verticalAxis {
    top: 18px;
    bottom: 18px;
    left: 50%;
    width: 1px;
}

.flightPuck {
    position: absolute;
    top: 50%;
    left: 35%;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    border: 2px solid #59e4fa;
    border-radius: 50%;
    background: rgba(27, 118, 151, 0.28);
    pointer-events: none;
}

.flightPuck:before,
.flightPuck:after {
    position: absolute;
    top: 50%;
    left: 50%;
    background: #8af2ff;
    content: "";
}

.flightPuck:before {
    width: 32px;
    height: 2px;
    margin: -1px 0 0 -16px;
}

.flightPuck:after {
    width: 2px;
    height: 32px;
    margin: -16px 0 0 -1px;
}

.flightPuck span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: #fff;
}

.flightPuck.active {
    border-color: #fff;
    background: rgba(52, 201, 231, 0.38);
}

.padPrompt {
    position: absolute;
    right: 0;
    bottom: 12%;
    left: 0;
    color: rgba(134, 211, 225, 0.54);
    text-align: center;
    pointer-events: none;
}

.padPrompt strong,
.padPrompt span {
    display: block;
}

.padPrompt strong {
    font-family: Consolas, monospace;
    font-size: 16px;
    letter-spacing: 0.18em;
}

.padPrompt span {
    margin-top: 5px;
    font-size: 11px;
}

.controllerFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding: 8px 4px 0;
    color: #5e8b99;
    font-family: Consolas, monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
}

.controllerFooter a {
    color: #72cfe1;
    text-decoration: none;
}

.controllerShell.alert .flightPad {
    border-color: #ff657d;
    background: #261022;
}

.controllerShell.victory .flightPad {
    border-color: #76efc0;
    background: #0b2b31;
}

@media (max-width: 380px) {
    .controllerShell {
        padding: 8px;
    }

    .pilotHud {
        min-height: 72px;
        padding: 8px;
    }

    .shipBadge {
        width: 52px;
        height: 44px;
        margin-right: 8px;
    }

    .shipBody {
        top: 18px;
        left: 7px;
        width: 38px;
    }

    .shipWing {
        top: 8px;
        left: 17px;
    }

    #pilotName {
        font-size: 14px;
    }

    .statBlock {
        min-width: 45px;
        margin-left: 5px;
        padding-left: 6px;
    }

    .livesBlock {
        display: none;
    }

    .flightPuck {
        width: 66px;
        height: 66px;
        margin: -33px 0 0 -33px;
    }
}