/* ─────────────────────────────────────────────────────────────────────────────
   LunarFoundry — HUD layer for the 3D base view.

   Separate from app.css on purpose: app.css still styles Auth, Admin and the
   existing tabs, and none of that changes. This file only adds the layer that
   sits ON TOP of the world (brief §8, §14).

   Identity note: monospace type and the signature green (#7fff7f) are retained.
   The world went lunar-industrial; the interface is still LunarFoundry.
   ───────────────────────────────────────────────────────────────────────────── */

/* Design tokens live in app.css (loaded first). Only the two values specific to
   the in-world glass HUD are defined here. */
:root {
    --lf-glass: rgba(10, 16, 20, 0.72);
    --lf-muted: var(--lf-text-dim);
}

/* ── Canvas host ───────────────────────────────────────────────────────────── */

/* The world should dominate the screen rather than sit in a column, so both 3D
   views break out of .game-wrap's measure (brief §8, §15). Full-bleed trick,
   applied only where there is room — every other tab keeps its existing width. */
.base-wrap, .map-wrap { display: flex; flex-direction: column; gap: 8px; }

@media (min-width: 800px) {
    .base-wrap, .map-wrap {
        width: calc(100vw - 40px);
        max-width: 1500px;
        margin-left: calc(-50vw + 50% + 20px);
    }
    /* Recentre when the viewport is wider than the max-width */
    @media (min-width: 1540px) {
        .base-wrap, .map-wrap { margin-left: calc(-750px + 50%); }
    }
}

.base-canvas-host {
    position: relative;
    width: 100%;
    height: 680px;
    border: 1px solid #1a3a1a;
    border-radius: 6px;
    overflow: hidden;
    background: var(--lf-void);
}

.base-canvas { display: block; width: 100%; height: 100%; }

/* ── World-space label layer ───────────────────────────────────────────────── */
/* Positioned entirely by baseView.js from projected 3D anchors. Must not
   intercept pointer events — the canvas underneath needs every click. */

.lf-label-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.lf-label {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 3px 7px 4px;
    background: var(--lf-glass);
    border: 1px solid var(--lf-hairline-2);
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.15;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
    will-change: transform, opacity;
}

/* The leader tick that ties a label to its structure */
.lf-label::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 1px;
    height: 7px;
    background: var(--lf-hairline-2);
}

.lf-label-t { font-size: 11px; font-weight: 700; color: #cfe9ff; letter-spacing: 1px; }
.lf-label-s { font-size: 9px;  color: var(--lf-muted); letter-spacing: 1px; }

.lf-label-active       { border-color: rgba(255, 166, 63, 0.5); }
.lf-label-active .lf-label-t { color: var(--lf-warning); }

.lf-label-alert        { border-color: rgba(255, 90, 60, 0.6); }
.lf-label-alert .lf-label-t { color: var(--lf-alert); }
.lf-label-alert .lf-label-s { color: var(--lf-alert); }

/* Silo readouts: the number IS the label, tinted by resource identity */
.lf-label-res-helium3  { border-color: rgba(74, 144, 255, 0.5); }
.lf-label-res-helium3 .lf-label-t  { color: var(--lf-he3); font-size: 14px; }
.lf-label-res-iron     { border-color: rgba(176, 106, 74, 0.5); }
.lf-label-res-iron .lf-label-t     { color: var(--lf-iron); font-size: 14px; }
.lf-label-res-titanium { border-color: rgba(143, 168, 196, 0.5); }
.lf-label-res-titanium .lf-label-t { color: var(--lf-titanium); font-size: 14px; }
.lf-label-res-water    { border-color: rgba(63, 208, 224, 0.5); }
.lf-label-res-water .lf-label-t    { color: var(--lf-water); font-size: 14px; }

/* ── In-world selection panel ──────────────────────────────────────────────── */
/* Blazor renders the content; baseView.js sets left/top every frame so the panel
   stays pinned to its structure. No style attribute is set in Razor, so there is
   no diffing conflict over position. */

.lf-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 236px;
    padding: 0;
    background: var(--lf-glass);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid var(--lf-hairline-2);
    border-left: 2px solid var(--lf-data);
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.7);
    z-index: 5;
    will-change: left, top;
}

.lf-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 9px;
    border-bottom: 1px solid rgba(63, 208, 224, 0.18);
}

.lf-panel-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--lf-data);
    text-transform: uppercase;
}

.lf-panel-close {
    background: transparent;
    border: none;
    color: var(--lf-muted);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0 2px;
}
.lf-panel-close:hover { color: var(--lf-alert); }

.lf-panel-body { padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 5px; }

.lf-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 1px;
}
.lf-row-k { color: var(--lf-muted); }
.lf-row-v { color: #cfe9ff; font-weight: 700; }
.lf-row-v.is-active { color: var(--lf-warning); }
.lf-row-v.is-alert  { color: var(--lf-alert); }
.lf-row-v.is-ok     { color: var(--lf-green); }

.lf-meter {
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin: 2px 0 1px;
}
.lf-meter-fill {
    height: 100%;
    background: var(--lf-warning);
    border-radius: 2px;
    transition: width 0.6s linear;
}
.lf-meter-fill.is-data { background: var(--lf-data); }

.lf-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }

.lf-act {
    flex: 1 1 auto;
    min-width: 62px;
    background: rgba(63, 208, 224, 0.08);
    border: 1px solid rgba(63, 208, 224, 0.35);
    border-radius: 3px;
    color: var(--lf-data);
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 6px 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.lf-act:hover:not(:disabled) { background: rgba(63, 208, 224, 0.18); border-color: var(--lf-data); }
.lf-act:disabled { color: #3a4248; border-color: rgba(255, 255, 255, 0.08); cursor: not-allowed; }

.lf-act-go {
    background: rgba(127, 255, 127, 0.08);
    border-color: rgba(127, 255, 127, 0.35);
    color: var(--lf-green);
}
.lf-act-go:hover:not(:disabled) { background: rgba(127, 255, 127, 0.18); border-color: var(--lf-green); }

/* Raid action on the map panel — hostile intent reads red */
.lf-act-raid {
    background: rgba(255, 90, 60, 0.10);
    border-color: rgba(255, 90, 60, 0.35);
    color: var(--lf-alert);
}
.lf-act-raid:hover:not(:disabled) { background: rgba(255, 90, 60, 0.20); border-color: var(--lf-alert); }

.lf-note { font-size: 9px; color: var(--lf-muted); line-height: 1.5; letter-spacing: 0.5px; }

/* ── Canvas overlay controls ───────────────────────────────────────────────── */

.base-controls {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.hud-btn {
    pointer-events: auto;
    background: var(--lf-glass);
    border: 1px solid var(--lf-hairline-2);
    border-radius: 4px;
    color: var(--lf-data);
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.hud-btn:hover { background: rgba(63, 208, 224, 0.16); border-color: var(--lf-data); }

.base-hint {
    font-family: 'Courier New', Courier, monospace;
    font-size: 9px;
    letter-spacing: 1px;
    color: rgba(125, 131, 138, 0.85);
    text-shadow: 0 1px 4px #000;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
    .base-canvas-host { height: 420px; }
    .lf-panel { width: 200px; }
    .base-hint { display: none; }
    .lf-label-s { display: none; }
}