:root {
    /* Witchcraft palette (option B): magenta is the primary text +
     * border tone, cyan is the highlight/accent.  Variable NAMES are
     * unchanged (--cga-green, --cga-yellow) on purpose — every rule
     * reads through them, so reassigning their values cascades
     * everywhere without renaming hundreds of references.  Read
     * --cga-green as "primary" and --cga-yellow as "accent" rather
     * than the literal hue. */
    --cga-black: #000000;
    --cga-bg-dark: #0a0612;
    --cga-green: #ff66ff;          /* primary text — magenta */
    --cga-green-dim: #aa00aa;      /* borders + secondary text — magenta-dim */
    --cga-red: #FF5555;            /* danger stays red */
    --cga-red-dim: #AA0000;
    --cga-yellow: #66ffff;         /* highlight + panel titles — cyan */
    --cga-yellow-dim: #00aaaa;

    /* CRT glow tuned to the new primary so panels still have the
     * expected halo without bleeding green. */
    --crt-glow: 0 0 5px rgba(255, 110, 255, 0.4);
    --border-thick: 2px solid var(--cga-green);
    --border-thin: 1px solid var(--cga-green-dim);
}

* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }

body, html {
    width: 100vw; height: 100vh;
    background-color: var(--cga-black);
    color: var(--cga-green);
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    overflow: hidden;
}

#UntoldDarkCanvas {
    /* Letterbox the 640×400 backbuffer at its native 8:5 aspect so
       square world units stay square on screen.  Old rule was
       width:100%; height:100% which stretched non-uniformly on any
       window that wasn't 1.6:1, making circles read as ovals and
       motion drift diagonally.  The DOM HUD floats over the letterbox
       gutters for now — Phase 2 migrates the HUD onto the canvas and
       this CSS becomes irrelevant. */
    position: absolute;
    /* Fill the viewport. The WebGL buffer (NATIVE_W×400) now tracks the
       window aspect, so square world units stay square without the 8:5
       letterbox — the canvas can stretch to the full window 1:1. */
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
    /* Parent (.game-container) sets pointer-events: none so the empty
       overlay grid cells let clicks fall through to UI panels.  The
       canvas itself needs to opt back in so left-drag free-look fires. */
    pointer-events: auto;
    /* CGA pixel pipeline removed: the 3D scene renders directly at full
       buffer resolution, so let the browser scale it smoothly (crisp) to
       the window instead of forcing blocky nearest-neighbour upscaling. */
    image-rendering: auto;
    background: #000;
    /* Show the OS cursor (crosshair). The in-engine pixel cursor was
       drawn into the render pipeline and trailed the real mouse by the
       render latency, so it's disabled (see ui_canvas drawCursor). */
    cursor: crosshair;
}

/* DOM HUD fully retired.  Every panel that used to live here
   (gauges, radar, contact list, terminal log, top bar, warp
   slider) is now drawn by the CGA pipeline.  Hiding the empty
   overlay container is handled below in #UntoldDarkControlOverlay
   { display:none; }. */

/* Suppress the desktop blue drag-selection rectangle that, prior to this
 * rule, repainted the whole game viewport once the pilot accidentally
 * mouse-dragged across it.  Editable inputs (login, modal text fields)
 * still allow selection — the browser default for <input> overrides
 * `user-select:none` on ancestors.  The transparent ::selection makes
 * any selection that does happen invisible.  -webkit-tap-highlight-color
 * removes the grey flash iOS draws on tap. */
html, body {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
::selection      { background: transparent; }
::-moz-selection { background: transparent; }

/* Pseudo-fullscreen fallback for iOS Safari / iPhone Firefox / iPad
 * Firefox — engines whose Fullscreen API either doesn't exist or
 * silently rejects requestFullscreen() on non-<video> elements.  When
 * the toggle below detects that path, it adds `.pseudo-fullscreen` to
 * <body> instead and we fill the viewport here. */
body.pseudo-fullscreen { overflow: hidden; margin: 0; }
body.pseudo-fullscreen #UntoldDarkLoginBg,
body.pseudo-fullscreen #UntoldDarkGameUI {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh;
    z-index: 99999;
}

/* Login background canvas — fullscreen 3D scene + canvas-rendered auth
 * form, all drawn into the same letterboxed backbuffer.  Native cursor
 * is hidden (pixel-art cursor is drawn into the UI canvas instead). */
#UntoldDarkLoginBg {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width:  min(100vw, calc(100vh * 8 / 5));
    height: min(100vh, calc(100vw * 5 / 8));
    aspect-ratio: 8 / 5;
    z-index: 1;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    background: #000;
    cursor: crosshair;   /* OS cursor; in-engine pixel cursor disabled */
    /* Without this, iOS Safari steals one-finger drags as scroll/zoom
     * before our pointer handlers see them. */
    touch-action: none;
}
#UntoldDarkCanvas { touch-action: none; }

/* Invisible real-DOM auth form layered over the login canvas.  The
 * canvas paints the visible pixel-art fields; these inputs exist only
 * so password managers can autofill / save credentials. */
#UntoldDarkAuthForm {
    position: fixed; top: 0; left: 0;
    width: 0; height: 0;
    margin: 0; padding: 0;
    pointer-events: none;
    z-index: 2;
}
#UntoldDarkAuthForm input {
    position: fixed;
    pointer-events: auto;
    background: transparent;
    border: 0; margin: 0; padding: 0 4px;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: transparent;
    text-shadow: none;
    outline: none;
    cursor: none;
    /* >=16px so iOS Safari doesn't auto-zoom on focus */
    font: 16px monospace;
    box-sizing: border-box;
}
#UntoldDarkAuthForm input::selection           { color: transparent; background: transparent; }
#UntoldDarkAuthForm input::-moz-selection      { color: transparent; background: transparent; }
#UntoldDarkAuthForm input.is-hidden            { display: none !important; }
#UntoldDarkAuthForm button {
    position: fixed; top: -9999px; left: -9999px;
    width: 1px; height: 1px; opacity: 0;
}
/* Mute Chrome's autofill yellow background + dark forced text colour so
 * the canvas pixel-art beneath stays unobscured.  The 600000s transition
 * delay is the standard trick to defer the autofill paint indefinitely. */
#UntoldDarkAuthForm input:-webkit-autofill,
#UntoldDarkAuthForm input:-webkit-autofill:hover,
#UntoldDarkAuthForm input:-webkit-autofill:focus,
#UntoldDarkAuthForm input:-webkit-autofill:active {
    -webkit-text-fill-color: transparent !important;
    transition: background-color 600000s 0s, color 600000s 0s;
}

/* The .btn-tactical legacy class is still referenced by some in-game
 * panels; preserve a minimal style so they don't lose their button look. */
.btn-tactical {
    background: var(--cga-black);
    color: var(--cga-green);
    border: 1px solid var(--cga-green-dim);
    padding: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: inherit;
}
.btn-tactical:hover { background: var(--cga-green); color: var(--cga-black); }

/* Main Game Overlay - Compressed & Responsive Grid */
.game-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10; pointer-events: none; }

/* Continuous-job progress panel — floats at the top-centre of the
   viewport while a mine / salvage / scrap loop is running.  Shows
   the action label, target name, progress bar, and a STOP button.
   Pointer-events auto since the user needs to click STOP.  Hidden
   (removed from DOM) when no job is running. */
.job-progress-panel {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    min-width: 320px;
    padding: 6px 10px 7px 10px;
    background: rgba(8, 14, 8, 0.88);
    border: 1px solid var(--cga-green-dim);
    color: var(--cga-green);
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    pointer-events: auto;
}
.job-progress-head,
.job-progress-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.job-progress-label  { color: var(--cga-yellow); font-weight: bold; }
.job-progress-target { color: var(--cga-green-dim); }
.job-progress-track {
    margin: 4px 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--cga-green-dim);
}
.job-progress-fill {
    height: 100%;
    background: var(--cga-yellow);
    transition: width 200ms linear;
}
.job-progress-remaining {
    color: var(--cga-green);
    font-variant-numeric: tabular-nums;
}
.btn-job-stop {
    padding: 0 10px !important;
    font-size: 0.7rem !important;
    color: var(--cga-red) !important;
    border-color: var(--cga-red) !important;
    background: transparent !important;
    cursor: pointer;
}
.btn-job-stop:hover { background: var(--cga-red) !important; color: var(--cga-black) !important; }

#UntoldDarkControlOverlay {
    /* Legacy DOM HUD retired -- every panel renders through the
       CGA pipeline now (gfx_engine._drawUi).  The overlay element
       stays in the DOM for any future fallback path but is hidden
       so it never takes layout space. */
    display: none;
}

.panel-title { color: var(--cga-yellow); border-bottom: var(--border-thin); padding-bottom: 3px; margin-bottom: 8px; font-size: 0.9rem; }
.panel-title { display: none; }
.chart-header { display: none; }

/* WEAVING TABLE modal — uses .chart-modal as a full-screen darken
 * overlay only.  Window + grid are its own so it doesn't inherit
 * chart-modal-window's three-row sidebar layout. */
.craft-modal-window {
    width: min(900px, 92vw);
    height: min(640px, 80vh);
    background-color: var(--cga-bg-dark);
    border: 1px solid var(--cga-green-dim);
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
}
.craft-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--cga-yellow);
    text-shadow: var(--crt-glow);
    font-size: 1.05rem;
    letter-spacing: 2px;
    padding: 8px 12px;
    border-bottom: var(--border-thin);
}
.craft-modal-close {
    background: rgba(255, 85, 85, 0.15);
    color: var(--cga-red);
    border: none;
    padding: 2px 10px;
    cursor: pointer;
    font-weight: bold;
    font-family: 'Courier New', monospace;
}
.craft-modal-close:hover { background: var(--cga-red); color: var(--cga-black); }
.craft-modal-body {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 10px;
    padding: 10px;
    min-height: 0;
    overflow: hidden;
}
/* Death overlay still uses .craft-modal-window + .craft-modal-header
 * (its DOM template above) so the modal chrome rules at the top of
 * this file stay; the per-pane / per-row craft + market + faction
 * sub-selectors are gone with the _renderXxxModal renderers. */
.death-modal-window { width: min(560px, 92vw); }

/* Idle "are you still there?" modal */
#idle-modal {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 500;
    display: flex; justify-content: center; align-items: center;
    pointer-events: auto;
}
.idle-modal-window {
    background: var(--cga-bg-dark);
    color: var(--cga-green);
    padding: 24px 32px;
    max-width: 480px; width: 90vw;
    font-family: 'Courier New', monospace;
    text-align: center;
}
.idle-title {
    color: var(--cga-yellow);
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 14px;
}
.idle-body {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 18px;
}
.idle-body #idle-countdown {
    color: var(--cga-red);
    font-weight: bold;
}
.idle-actions {
    display: flex; gap: 10px; justify-content: center;
}
.idle-actions .btn-tactical { width: auto; min-width: 140px; margin: 0; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--cga-black); }
::-webkit-scrollbar-thumb { background: var(--cga-green-dim); }

.btn-tactical { margin-bottom: 0; font-size: 0.8rem; padding: 6px; }

.manual-nav-box { display: flex; gap: 5px; margin-top: 5px; }
.manual-nav-box input {
    width: 33.3%; background: rgba(170, 0, 170, 0.08); border: none;
    color: var(--cga-green); padding: 4px; text-align: center;
    font-family: inherit; font-size: 0.8rem; outline: none;
}

/* ================================================================= */
/* CHART COURSE modal — large celestial-chart window with pannable canvas */
/* ================================================================= */
.chart-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 200;
    display: none;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}
.chart-modal.open { display: flex; }
.chart-modal-window {
    width: 90vw;
    height: 88vh;
    max-width: 1400px;
    background-color: var(--cga-bg-dark);
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-rows: auto 1fr auto;
    gap: 8px;
    padding: 10px;
}
.chart-header {
    grid-column: 1 / span 2;
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--cga-yellow);
    font-size: 1.1rem;
    text-shadow: var(--crt-glow);
    border-bottom: var(--border-thin);
    padding-bottom: 6px;
}
.chart-header .btn-close {
    background: rgba(255, 85, 85, 0.15);
    color: var(--cga-red);
    border: none;
    padding: 4px 12px;
    cursor: pointer;
    font-weight: bold;
}
.chart-header .btn-close:hover { background: var(--cga-red); color: var(--cga-black); }
.chart-canvas-wrap {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    background: var(--cga-black);
    overflow: hidden;
}
#chart-canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.chart-controls {
    position: absolute;
    top: 8px; left: 8px;
    display: flex;
    gap: 4px;
    align-items: center;
    color: var(--cga-yellow);
    font-size: 0.8rem;
}
.chart-controls button {
    background: rgba(170, 0, 170, 0.15);
    color: var(--cga-green);
    border: none;
    padding: 2px 8px;
    cursor: pointer;
    font-weight: bold;
}
.chart-controls button:hover { background: var(--cga-green); color: var(--cga-black); }
.chart-readout {
    position: absolute;
    bottom: 8px; left: 8px;
    color: var(--cga-green);
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 8px;
}
.chart-sidebar {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}
.chart-sidebar .panel-title { font-size: 0.85rem; }
.chart-sidebar .collapse-header {
    color: var(--cga-yellow);
    padding: 4px 0; margin-bottom: 4px; font-size: 0.85rem;
    cursor: pointer; user-select: none; letter-spacing: 1px;
    display: block;
}
.chart-sidebar .collapse-header:hover { background: rgba(85, 255, 255, 0.1); }
.chart-sidebar .contact-list-box,
.chart-sidebar #chart-waypoint-list {
    max-height: 180px;
    overflow-y: auto;
    padding: 4px;
    font-size: 0.8rem;
}
.chart-sidebar .contact-item {
    padding: 2px 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}
.chart-sidebar .contact-item:hover { background: var(--cga-green-dim); color: var(--cga-black); }
.chart-sidebar .contact-item.selected { background: var(--cga-yellow-dim); color: var(--cga-black); }
.chart-sidebar .manual-nav-box { display: flex; gap: 3px; }
.chart-sidebar .manual-nav-box input {
    flex: 1;
    background: var(--cga-black);
    border: var(--border-thin);
    color: var(--cga-green);
    padding: 3px;
    outline: none;
    font-family: inherit;
    font-weight: bold;
    min-width: 0;
}
.chart-footer {
    grid-column: 1 / span 2;
    grid-row: 3;
    border-top: var(--border-thin);
    padding-top: 6px;
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}
.chart-footer .btn-engage {
    color: var(--cga-yellow);
    border-color: var(--cga-yellow);
    min-width: 180px;
}
.chart-footer .btn-engage:hover { background: var(--cga-yellow); color: var(--cga-black); }