@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
    --hud-bg: #0a0d0a;
    --hud-panel: #10140f;
    --hud-panel-border: #2a3a2a;
    --hud-green: #39ff6a;
    --hud-green-dim: #1e8f3e;
    --hud-amber: #ffb000;
    --hud-red: #ff3b30;
    --hud-blue: #3b82f6;
    --hud-text: #c8f2d0;
    --hud-text-dim: #6c8f74;
    --hud-font: 'Share Tech Mono', 'Courier New', monospace;
    /* Floor for the short header controls — ?, EL, EN. Without it a one- or two-character
       label renders narrower than the buttons beside it, and they stop reading as a set.
       Also keeps them a reasonable thumb target on a phone. */
    --hud-control-min-width: 3.25rem;
    /* What the shared `button, .hud-btn` metrics add up to: 0.5rem padding either side,
       a ~1.06rem line box and a 1px border. Named because the fixed .lang-switch's
       footprint has to be reserved by elements that cannot measure it. */
    --hud-control-height: 2.0625rem;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--hud-bg);
    color: var(--hud-text);
    font-family: var(--hud-font);
    letter-spacing: 0.02em;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

.hud-scanlines {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        rgba(0, 0, 0, 0) 2px
    );
    mix-blend-mode: overlay;
}

.hud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Extra right padding reserves the space the fixed .lang-switch occupies, so the
       LOCK form and the clock never end up underneath it. Two 3.25rem buttons plus their
       gap and the switcher's own 1.5rem offset come to ~8.2rem, so this is that plus a
       little air — at 8rem the LOCK button and EL overlapped by 2px. Grow this if the
       switcher's metrics change. */
    padding: 0.75rem 9rem 0.75rem 1.5rem;
    background: linear-gradient(180deg, #14180f 0%, #0a0d0a 100%);
    border-bottom: 1px solid var(--hud-panel-border);
    box-shadow: 0 0 12px rgba(57, 255, 106, 0.08);
}

/* Everything on the left of the header bar reads as the wordmark does on the front
   page: lowercase, tightly tracked, no underline. That covers the game names too —
   every game template overrides the brand block with its own (FLIGHT RADAR, TACTICAL
   DROPS, SECTOR CONTROL), and lowercasing here means they all follow without editing
   seventeen templates, and any future one follows by default.

   0.06em rather than the old 0.15em to match .lobby__wordmark in events/css/lobby.css:
   at the wider tracking the dot in play.airsoft stops reading as part of one word.

   text-decoration is explicit because the global `a` rule only sets colour, so the
   brand was picking up the browser's default underline. */
.hud-header__brand {
    color: var(--hud-green);
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    text-decoration: none;
    text-shadow: 0 0 6px rgba(57, 255, 106, 0.6);
}

/* Sits immediately after the brand, sharing its baseline so it reads as sitting at the
   bottom of the lettering rather than floating mid-height.

   Both the brand and this are align-self: baseline, which puts them in the same baseline
   group. Setting align-items: baseline on .hud-header instead would drag the clock and
   the LOCK form in header_right out of centre too. margin-right: auto absorbs the slack
   that justify-content: space-between would otherwise open up between the brand and
   this, which would strand the version in the middle of the bar. */
.hud-header__brand,
.hud-header__version {
    align-self: baseline;
}

.hud-header__version {
    margin-left: 0.6rem;
    margin-right: auto;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--hud-text-dim);
}

/* Whatever the page puts in header_right: the console's LOCK form, the player maps'
   clock. The language switcher is no longer in here — see .lang-switch. */
.hud-header__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Narrow screens: the header reserves 8rem on the right for the fixed .lang-switch,
   which is a third of a 360px phone and leaves nothing for the console controls — the
   LOCK form alone is wider than what remains, so the whole page was dragged into
   sideways scrolling. Below 480px the header wraps instead: the brand keeps the first
   row and clears the switcher, and the controls take a full-width row underneath where
   the reserved padding no longer applies. */
@media (max-width: 480px) {
    .hud-header {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        padding-right: 1.5rem;
    }

    .hud-header__brand {
        /* Still has to clear the fixed switcher on the first row — same ~8.2rem it
           occupies, rounded up, as the padding above. */
        max-width: calc(100% - 9rem);
        /* And vertically: the switcher is fixed, so the header cannot see it, and the
           wrapped second row (the console's LOCK form, the player map's clock) would
           otherwise run underneath it — it did, by 6px. Reserving the switcher's height
           on the first row is what keeps the two apart. Blockified as a flex item, so
           min-height applies to this anchor. Keep in step with .lang-switch's height. */
        min-height: var(--hud-control-height);
    }

    .hud-header__right {
        width: 100%;
        justify-content: flex-end;
        gap: 0.6rem;
    }
}

/* Pinned top-right on every page, including the front page, which has no header bar at
   all. z-index clears .hud-scanlines (999) so it is never dimmed by the overlay. */
.lang-switch {
    position: fixed;
    /* Matches .hud-header's top padding, so the fixed switcher lands on the same line as
       the buttons inside the bar. It has to stay fixed — the front page has no header at
       all and the player maps need it over the map — so this is the only way to align it
       with flex children it is not a sibling of. Keep the two in step. */
    top: 0.75rem;
    right: 1.5rem;
    z-index: 1000;
    display: flex;
    gap: 0.2rem;
}

.lang-switch__opt {
    /* No font-size or padding of its own: the shared `button, .hud-btn` rule gives the
       same height as LOCK and the ? button, which is what lets all three sit on one
       line. Only the minimum width is set, so the short labels match each other. */
    min-width: var(--hud-control-min-width);
    letter-spacing: 0.12em;
    /* --hud-text, not --hud-text-dim: dim green on near-black was genuinely hard to
       read, and this is a control rather than a caption. */
    color: var(--hud-text);
    border: 1px solid var(--hud-panel-border);
    /* Opaque rather than transparent, so it stays legible where it floats over satellite
       imagery on the player maps. */
    background: rgba(10, 13, 10, 0.85);
    cursor: pointer;
}

.lang-switch__opt:hover {
    border-color: var(--hud-green-dim);
}

.lang-switch__opt--on {
    color: var(--hud-green);
    border-color: var(--hud-green);
    box-shadow: 0 0 8px rgba(57, 255, 106, 0.25);
}

.hud-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--hud-green);
}

button, .hud-btn {
    display: inline-block;
    font-family: var(--hud-font);
    background: var(--hud-panel);
    color: var(--hud-green);
    border: 1px solid var(--hud-green-dim);
    padding: 0.5rem 1rem;
    cursor: pointer;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s, box-shadow 0.15s;
}

button:hover, .hud-btn:hover {
    background: var(--hud-green-dim);
    color: #0a0d0a;
    box-shadow: 0 0 10px rgba(57, 255, 106, 0.5);
}

input, select {
    font-family: var(--hud-font);
    background: #0e120d;
    color: var(--hud-text);
    border: 1px solid var(--hud-panel-border);
    padding: 0.5rem;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--hud-green);
    box-shadow: 0 0 6px rgba(57, 255, 106, 0.4);
}

.hud-panel {
    background: var(--hud-panel);
    border: 1px solid var(--hud-panel-border);
    padding: 1.5rem;
}

.hud-error {
    color: var(--hud-red);
    border: 1px solid var(--hud-red);
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.hud-gate {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Gutter, so a box that has shrunk to the viewport still has air either side
       instead of sitting flush against the screen edges on a phone. */
    padding: 1rem;
}

.hud-gate__box {
    /* width is the preference, max-width is the rule: below ~350px the box gives way
       to the screen rather than overflowing it. Everything is border-box (see the
       reset at the top of this file), so this includes any padding a box carries. */
    width: 320px;
    max-width: 100%;
    text-align: center;
}

.hud-gate__box h1 {
    color: var(--hud-green);
    letter-spacing: 0.2em;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.hud-gate__box input[type="password"], .hud-gate__box input[type="text"] {
    width: 100%;
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 0.3em;
}

.hud-gate__box button {
    width: 100%;
}

/* Missile range zone marker: a permanent missile icon + name at the circle's center
   (shared between the viewer and the console's flight/zone map editors). Icon size
   can't be set via transform on .missile-icon itself (Leaflet uses that to position
   it on the map) — the inner .missile-icon__scale wrapper carries the zoom-based
   scale instead (see bindIconScaling in map-base.js). */
.missile-icon {
    pointer-events: none;
}

.missile-icon__scale {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(var(--icon-scale, 1));
    transform-origin: center top;
}

.missile-icon__img {
    width: 22px;
    height: 22px;
    display: block;
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.8));
}

.missile-icon__label {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--hud-font);
    font-size: 0.65rem;
    color: var(--hud-blue);
    background: rgba(10, 13, 10, 0.75);
    padding: 1px 4px;
    text-shadow: 0 0 4px rgba(59, 130, 246, 0.6);
}

/* Black box (flight recorder) marker: same pattern as .missile-icon — amber/orange to
   match the real-world "orange box" convention, distinct from green aircraft, red
   hazards, and blue missile ranges. */
.blackbox-icon {
    pointer-events: none;
}

.blackbox-icon__scale {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: scale(var(--icon-scale, 1));
    transform-origin: center top;
}

.blackbox-icon__img {
    width: 22px;
    height: 22px;
    display: block;
    filter: drop-shadow(0 0 4px rgba(255, 176, 0, 0.8));
}

.blackbox-icon__label {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
    font-family: var(--hud-font);
    font-size: 0.65rem;
    color: var(--hud-amber);
    background: rgba(10, 13, 10, 0.75);
    padding: 1px 4px;
    text-shadow: 0 0 4px rgba(255, 176, 0, 0.6);
}

.hud-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hud-checkbox-label input[type="checkbox"] {
    width: auto;
}

.blackbox-fields {
    display: none;
}

/* Shared form/text primitives. These live here rather than in console.css because
   the lobby (game picker, event create, manage login) uses them too. */
.hud-hint {
    color: var(--hud-text-dim);
    font-size: 0.75rem;
}

.hud-text-dim {
    color: var(--hud-text-dim);
}

.hud-hint--warn {
    color: var(--hud-amber);
}

.field-row {
    margin-bottom: 0.75rem;
    text-align: left;
}

.field-row label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--hud-text-dim);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.hud-gate__box--wide {
    /* 420px is wider than a typical phone (360-390px). It did not overflow, because
       .hud-gate is a flex container and shrank the box to exactly the viewport width
       — leaving no gutter at all, so the create-event form sat flush against both
       screen edges while the 320px login box, which still fit, looked fine. The
       max-width makes the shrinking explicit and the padding on .hud-gate supplies
       the gutter. */
    width: 420px;
    max-width: 100%;
}

.hud-gate__box--wide input[type="text"],
.hud-gate__box--wide input[type="password"] {
    text-align: left;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

/* --- self-locator.js (shared/js/self-locator.js) ---------------------------------
   The GPS "you are here" overlay is game-agnostic, so its styling lives here rather
   than in any one game's stylesheet. */
.gps-toggle-btn {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
}

.gps-status {
    display: block;
    margin-top: 0.3rem;
    color: var(--hud-text-dim);
    font-size: 0.65rem;
}

/* "You are here" marker: the viewer's own GPS position + compass heading, in a
   distinct cyan/white so it never reads as an aircraft or hazard. .self-icon__scale
   carries both the zoom scale and the heading rotation together (see self-locator.js) —
   Leaflet owns the outer .self-icon element's own transform for map positioning. */
.self-icon {
    pointer-events: none;
}

.self-icon__scale {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    transition: transform 200ms linear;
}

.self-icon__cone {
    position: absolute;
    bottom: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-top: 54px solid rgba(0, 229, 255, 0.22);
    transform: translateX(-50%);
}

.self-icon__img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    display: block;
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.9));
}

/* --- 404 -----------------------------------------------------------------------------
   templates/404.html. In the shared theme rather than a page stylesheet because the
   error page can be reached from anywhere, including URLs that match no app. */
.notfound {
    flex: 1;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    text-align: center;
}

.notfound__code {
    margin: 0;
    font-size: clamp(3rem, 18vw, 7rem);
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--hud-green);
    text-shadow: 0 0 20px rgba(57, 255, 106, 0.35);
}

.notfound__title {
    margin: 0.5rem 0 1.5rem;
    font-size: 1rem;
    letter-spacing: 0.25em;
    color: var(--hud-amber);
}

.notfound__text {
    font-size: 0.8rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}