/* The Losing War - 3D campaign shell.
   Mobile-first: the canvas is the page, everything else floats over it. */

:root {
    color-scheme: dark;
    --bg: #06090b;
    --panel: rgba(10, 14, 17, 0.92);
    --panel-solid: #0b0f13;
    --line: rgba(215, 196, 162, 0.2);
    --line-strong: rgba(235, 210, 167, 0.46);
    --ink: #f3ecdf;
    --muted: rgba(243, 236, 223, 0.62);
    --faint: rgba(243, 236, 223, 0.38);
    --amber: #d9a75f;
    --red: #d85f4d;
    --blue: #8db3c7;
    --green: #8dbf9c;
    --radius: 4px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, "Segoe UI", system-ui, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior: none;
}

body { touch-action: none; }

h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }

#scene {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

.eyebrow {
    color: var(--amber);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* The portrait set is full-body 2:3. A square crop centred by default lands on
   the torso and slices the top of the head off, so every circular portrait
   biases the crop upward to sit the face in the frame. */
.card-portrait,
.inspector-portrait,
.command-quote img,
.modal-portrait img,
.loss-portrait {
    object-position: 50% 12%;
}

/* --- Loading / fallback ------------------------------------------------- */

.loading, .fallback {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: radial-gradient(circle at 50% 40%, rgba(30, 22, 18, 0.9), var(--bg) 70%);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.fallback { display: none; }
.fallback.is-open { display: grid; z-index: 120; }

.loading.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-inner, .fallback-inner {
    max-width: 32rem;
    text-align: center;
    display: grid;
    gap: 0.7rem;
    justify-items: center;
}

.loading-inner h1, .fallback-inner h2 {
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    letter-spacing: 0.04em;
}

.loading-note { color: var(--muted); font-size: 0.875rem; }

.fallback-inner p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

.fallback-inner a {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.7rem 1.2rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.fallback-inner a.primary { background: var(--amber); color: #12100c; border-color: var(--amber); }

/* --- HUD ---------------------------------------------------------------- */

.hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: calc(0.5rem + var(--safe-top)) calc(0.6rem + var(--safe-right)) 0.5rem calc(0.6rem + var(--safe-left));
    background: linear-gradient(180deg, rgba(6, 9, 11, 0.94), rgba(6, 9, 11, 0.55) 65%, transparent);
    pointer-events: none;
}

.hud > * { pointer-events: auto; }

.hud-brand { display: none; }

.hud-stats {
    flex: 1;
    display: grid;
    /* Turn / Ruun / Risk / Saved / Left Behind - Ruun carries a range, so it
       gets the extra width instead of an ellipsis. Hull count is legible from
       the card rail, so on a phone the loss column takes its place. */
    grid-template-columns: 0.74fr 1.32fr 0.78fr 1.02fr 1.06fr;
    gap: 0.22rem;
    min-width: 0;
}

.stat {
    display: grid;
    gap: 0.05rem;
    padding: 0.26rem 0.34rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(9, 13, 16, 0.72);
    min-width: 0;
}

.stat span {
    font-size: 0.875rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat strong {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Phones get only the numbers a decision actually turns on. The rest live in
   the situation report and the turn accounting. Declared after `.stat` so it
   wins the display cascade. */
.stat.stat-secondary { display: none; }

.stat-loss strong { color: var(--red); }

#hud-risk[data-level="low"] { color: var(--green); }
#hud-risk[data-level="medium"] { color: var(--blue); }
#hud-risk[data-level="high"] { color: var(--amber); }
#hud-risk[data-level="severe"] { color: var(--red); }

.hud-menu { position: relative; }

#menu {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.22rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(9, 13, 16, 0.8);
    cursor: pointer;
}

#menu span {
    display: block;
    width: 1.05rem;
    height: 1.5px;
    background: var(--ink);
}

.menu-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    width: 12.5rem;
    display: none;
    gap: 0.4rem;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-solid);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.menu-panel.is-open { display: grid; }

.menu-panel button,
.menu-panel a {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.menu-panel button:hover,
.menu-panel a:hover { border-color: var(--line-strong); }

.menu-panel label {
    font-size: 0.875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

.menu-panel input[type="range"] { width: 100%; accent-color: var(--amber); }

/* --- Map labels --------------------------------------------------------- */

.labels {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
}

.map-label {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    gap: 0.05rem;
    padding: 0.24rem 0.45rem;
    border: 1px solid var(--line);
    border-left: 2px solid var(--blue);
    border-radius: 2px;
    background: rgba(6, 9, 11, 0.74);
    backdrop-filter: blur(2px);
    color: var(--ink);
    text-align: left;
    white-space: nowrap;
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
    transition: border-color 0.25s ease, opacity 0.3s ease;
}

.map-label.is-faded {
    opacity: 0;
    pointer-events: none;
}

.map-label b {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.map-label small {
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.map-label[data-level="high"] { border-left-color: var(--amber); }
.map-label[data-level="severe"] { border-left-color: var(--red); }
.map-label[data-level="federation"] { border-left-color: var(--red); opacity: 0.85; }
.map-label[data-level="closed"] { border-left-color: rgba(243, 236, 223, 0.3); opacity: 0.6; }
.map-label[data-level="closed"] small { color: var(--red); }
.map-label.is-selected { border-color: var(--line-strong); background: rgba(20, 16, 12, 0.9); }

/* --- Inspector ---------------------------------------------------------- */

.inspector {
    position: fixed;
    z-index: 40;
    left: calc(0.6rem + var(--safe-left));
    right: calc(0.6rem + var(--safe-right));
    top: calc(4.6rem + var(--safe-top));
    max-height: 40vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    backdrop-filter: blur(6px);
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.55);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.inspector.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.inspector-close {
    position: absolute;
    z-index: 2;
    top: 0.35rem;
    right: 0.35rem;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(6, 9, 11, 0.78);
    backdrop-filter: blur(2px);
    color: var(--ink);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.inspector-art {
    margin: -0.8rem -0.8rem 0.6rem;
    height: 6.5rem;
    overflow: hidden;
    position: relative;
}

.inspector-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(10, 14, 17, 0.95));
}

.inspector-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.inspector-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.inspector-portrait {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line-strong);
    flex-shrink: 0;
}

.inspector h3 { font-size: 0.95rem; letter-spacing: 0.02em; }
.inspector p { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }

/* --- Shared stat list --------------------------------------------------- */

.stat-list {
    display: grid;
    gap: 0.28rem;
    margin-top: 0.6rem;
}

.stat-list > div {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.3rem 0.42rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.875rem;
}

.stat-list span { color: var(--faint); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.875rem; align-self: center; }
.stat-list strong { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Caption / skip ----------------------------------------------------- */

.caption {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(1.2rem + var(--safe-bottom));
    z-index: 35;
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    padding: 0 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    pointer-events: none;
}

.caption.is-active { opacity: 1; visibility: visible; }

.caption p {
    max-width: 34rem;
    padding: 0.5rem 0.9rem;
    border-left: 2px solid var(--amber);
    background: rgba(6, 9, 11, 0.8);
    font-size: 0.875rem;
    line-height: 1.45;
    text-align: center;
}

.caption p.is-fresh { animation: caption-in 0.45s ease both; }

@keyframes caption-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

#skip-button {
    pointer-events: auto;
    padding: 0.45rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(9, 13, 16, 0.85);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

/* --- Decision sheet ----------------------------------------------------- */

.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    max-height: min(56vh, 30rem);
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(11, 15, 19, 0.97), rgba(8, 11, 14, 0.99));
    backdrop-filter: blur(8px);
    box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.6);
    padding-bottom: var(--safe-bottom);
    transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.3s ease;
}

.sheet.is-collapsed { transform: translateY(calc(100% - 2.9rem - var(--safe-bottom))); }
.sheet.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }

.sheet-handle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.9rem 0.5rem;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: left;
}

.grip {
    width: 2.2rem;
    height: 3px;
    border-radius: 2px;
    background: var(--line-strong);
    flex-shrink: 0;
}

.sheet-title {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-rail {
    display: flex;
    gap: 0.25rem;
    padding: 0 0.9rem 0.5rem;
    flex-wrap: wrap;
}

.pip {
    width: 1.2rem;
    height: 0.28rem;
    border-radius: 2px;
    background: rgba(243, 236, 223, 0.16);
    display: block;
    flex: 1 1 0;
    min-width: 0.9rem;
    max-width: 2.4rem;
}

.pip b { display: none; }
.pip.done { background: rgba(216, 167, 95, 0.45); }
.pip.active { background: var(--amber); }

.card {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.9rem 1rem;
    display: grid;
    gap: 0.7rem;
    align-content: start;
}

.card-copy h2 {
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    margin: 0.15rem 0 0.35rem;
}

.card-copy > p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted);
}

.card-head {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: 0.45rem;
}

.card-portrait {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line-strong);
    flex-shrink: 0;
}

.card-lead { font-size: 0.875rem; color: var(--amber); }

.command-quote {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin: 0.6rem 0 0;
    padding: 0.55rem 0.65rem;
    border-left: 2px solid var(--amber);
    background: rgba(216, 167, 95, 0.07);
}

.command-quote img {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.command-quote span {
    display: block;
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
}

.command-quote p { font-size: 0.875rem; font-style: italic; line-height: 1.45; }

/* Last window's signal traffic, read here rather than behind a modal. */
.signal-block {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.7rem;
    padding: 0.55rem 0.65rem;
    border-left: 2px solid rgba(141, 179, 199, 0.4);
    background: rgba(141, 179, 199, 0.05);
}

.signal-block p {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted);
}

.signal-block b {
    color: var(--blue);
    font-weight: 700;
}

.card-options { display: grid; gap: 0.45rem; }

.option {
    display: grid;
    gap: 0.22rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.025);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.option:hover:not(:disabled),
.option:focus-visible {
    border-color: var(--line-strong);
    background: rgba(216, 167, 95, 0.08);
    outline: none;
}

.option:active:not(:disabled) { transform: scale(0.995); }

.option .category {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber);
}

.kind-icon { font-size: 0.875rem; opacity: 0.8; }

.option strong { font-size: 0.875rem; line-height: 1.3; }

.option .option-copy,
.option > span:not(.category):not(.option-meta) {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--muted);
}

.option-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.28rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(243, 236, 223, 0.09);
}

.option-target {
    color: var(--ink);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
}

/* Why the window is open. Set apart from the description so it reads as a
   note from the field rather than more of the order's own prose. */
.option-bark {
    display: block;
    margin-top: 0.3rem;
    padding-left: 0.55rem;
    border-left: 2px solid rgba(216, 95, 77, 0.55);
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.45;
    color: rgba(243, 236, 223, 0.78);
}

.option.high-risk { border-color: rgba(216, 95, 77, 0.5); background: rgba(216, 95, 77, 0.08); }
.option.high-risk .category { color: var(--red); }

.option.blocked, .option:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    border-style: dashed;
}

.order-line {
    padding: 0.42rem 0.55rem;
    border-left: 2px solid rgba(243, 236, 223, 0.16);
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--muted);
}

.risk-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.16rem;
    flex-shrink: 0;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.risk-chip i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(243, 236, 223, 0.22);
    display: block;
}

.risk-chip strong { margin-left: 0.2rem; font-size: 0.875rem; }
.risk-low { color: var(--green); }
.risk-low i:nth-child(-n + 1) { background: var(--green); }
.risk-medium { color: var(--blue); }
.risk-medium i:nth-child(-n + 2) { background: var(--blue); }
.risk-high { color: var(--amber); }
.risk-high i:nth-child(-n + 3) { background: var(--amber); }
.risk-severe { color: var(--red); }
.risk-severe i { background: var(--red); }
.risk-extreme { color: var(--red); border-color: rgba(216, 95, 77, 0.6); }
.risk-extreme i { background: var(--red); }

/* --- Modal -------------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: end center;
    padding: 1rem calc(0.8rem + var(--safe-right)) calc(1rem + var(--safe-bottom)) calc(0.8rem + var(--safe-left));
    background: rgba(3, 5, 7, 0.72);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
}

.modal.is-open { opacity: 1; visibility: visible; }

.modal-card {
    width: 100%;
    max-width: 30rem;
    max-height: 86vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--panel-solid);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.7);
    animation: modal-in 0.3s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-card h2 { font-size: 1.1rem; margin: 0.4rem 0 0.6rem; letter-spacing: 0.01em; }

.modal-art {
    margin: 0.5rem -1rem 0.7rem;
    height: 8.5rem;
    overflow: hidden;
    position: relative;
}

.modal-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 15, 19, 0.25), rgba(11, 15, 19, 0.9));
}

.modal-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.modal-portrait { margin: 0.55rem 0 0.2rem; }

.modal-portrait img {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line-strong);
}

.modal-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem;
    margin-bottom: 0.7rem;
}

.modal-stats > div {
    display: grid;
    gap: 0.1rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
}

.modal-stats span {
    font-size: 0.875rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--faint);
}

.modal-stats strong { font-size: 0.875rem; font-variant-numeric: tabular-nums; }

/* --- Hull status record ------------------------------------------------- */

.loss-record {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.2rem 0 0.85rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--line);
    border-left: 2px solid var(--line-strong);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
    transition: border-left-color 0.9s ease, background 0.9s ease;
}

.loss-portrait {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line-strong);
    flex-shrink: 0;
    filter: none;
    transition: filter 1.1s ease, opacity 1.1s ease;
}

.loss-initials {
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.loss-detail {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.loss-name {
    position: relative;
    align-self: start;
    justify-self: start;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* The line is drawn across the name rather than applied instantly, so the
   record reads as being closed while you watch. */
.loss-name::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 55%;
    height: 1.5px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left center;
}

.loss-lead {
    font-size: 0.875rem;
    color: var(--amber);
}

.loss-status {
    margin-top: 0.2rem;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 0.9s ease;
}

.loss-node {
    font-size: 0.875rem;
    color: var(--faint);
}

.is-loss .loss-record {
    border-left-color: var(--red);
    background: rgba(216, 95, 77, 0.06);
}

.is-loss .loss-portrait {
    filter: grayscale(1) brightness(0.78) contrast(0.9);
    opacity: 0.82;
}

.is-loss .loss-status {
    color: var(--red);
}

.is-loss .loss-name::after {
    animation: strike-record 0.75s cubic-bezier(0.3, 0.7, 0.4, 1) 0.5s both;
}

@keyframes strike-record {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.modal-events {
    display: grid;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
}

.modal-events li {
    padding-left: 0.7rem;
    border-left: 2px solid rgba(216, 167, 95, 0.35);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted);
}

button.primary {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--amber);
    border-radius: var(--radius);
    background: var(--amber);
    color: #12100c;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

button.primary:hover { background: #e6b871; }

/* --- Final report ------------------------------------------------------- */

.report {
    position: fixed;
    inset: 0;
    z-index: 80;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(1.2rem + var(--safe-top)) calc(0.9rem + var(--safe-right)) calc(2rem + var(--safe-bottom)) calc(0.9rem + var(--safe-left));
    background: linear-gradient(180deg, rgba(4, 6, 8, 0.97), rgba(6, 9, 11, 0.99));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.report.is-open { opacity: 1; visibility: visible; }

.report-body {
    max-width: 44rem;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.report-cover { display: grid; gap: 0.4rem; }
.report-cover h2 { font-size: clamp(1.3rem, 5.5vw, 1.9rem); letter-spacing: 0.02em; }
.report-cover p { font-size: 0.875rem; line-height: 1.55; color: var(--faint); }

.report-verdict {
    display: grid;
    gap: 0.3rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--amber);
    background: rgba(216, 167, 95, 0.06);
}

.report-verdict span {
    font-size: 0.875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

.report-verdict strong {
    font-size: clamp(1.7rem, 6vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--amber);
}

.report-verdict p { font-size: 0.875rem; line-height: 1.55; color: var(--muted); }

/* --- Extraction meter ---------------------------------------------------
   One ratio against a limit: a meter, not a chart. The unfilled track is a
   darker step of the same amber ramp (validated 2.26:1 against this surface,
   so the empty part of the bar is still visible), both parts are directly
   labelled, and every label wears a text token rather than the series colour. */

.report-meter {
    display: grid;
    gap: 0.45rem;
    margin: 0;
}

.report-meter figcaption {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}

.meter {
    position: relative;
    height: 14px;
    border-radius: 4px;
    background: #614829;
    overflow: hidden;
}

.meter-fill {
    position: relative;
    height: 100%;
    min-width: 3px;
    border-radius: 4px;
    background: var(--amber);
}

/* 2px of surface between the fill and the track it sits in. */
.meter-fill::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -2px;
    width: 2px;
    background: var(--panel-solid);
}

.meter-legend {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--muted);
}

.meter-legend b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.report-section {
    display: grid;
    gap: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

.report-section h3 {
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--amber);
}

.report-section p { font-size: 0.875rem; line-height: 1.6; color: var(--muted); }

.report-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.35rem;
}

.report-metrics > div {
    display: grid;
    gap: 0.12rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.02);
}

.report-metrics span {
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--faint);
}

.report-metrics strong { font-size: 0.92rem; font-variant-numeric: tabular-nums; }

.report-list { display: grid; gap: 0.4rem; margin: 0; padding-left: 1.1rem; }
.report-list li { font-size: 0.875rem; line-height: 1.55; color: var(--muted); }

/* Hulls that did not come back stay legible, but the ledger marks them. */
.report-list li.is-lost { color: rgba(216, 95, 77, 0.88); }
.report-list li.is-lost::marker { color: var(--red); }

.report-closing {
    margin-top: 0.3rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--red);
    font-style: italic;
}

.report-actions {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.6rem;
}

.report-actions button,
.report-actions a {
    padding: 0.7rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

/* --- Toast -------------------------------------------------------------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(6rem + var(--safe-bottom));
    z-index: 85;
    transform: translate(-50%, 10px);
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-solid);
    font-size: 0.875rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.toast.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* --- Landscape phones --------------------------------------------------- */

@media (min-width: 560px) {
    .stat.stat-secondary { display: grid; }
    .hud-stats { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0.28rem; }
}

@media (max-height: 520px) and (orientation: landscape) {
    /* The sheet owns the right edge, so the HUD stops short of it and keeps
       only the decision numbers, on one row. */
    .hud { right: min(24rem, 52vw); }
    .hud-stats { grid-template-columns: 0.74fr 1.32fr 0.78fr 1.02fr 1.06fr; }
    .stat.stat-secondary { display: none; }
    .sheet { max-height: none; width: min(24rem, 52vw); left: auto; right: 0; border-left: 1px solid var(--line); border-top: 0; top: 0; bottom: 0; }
    .sheet.is-collapsed { transform: translateX(calc(100% - 2.4rem)); }
    .sheet.is-hidden { transform: translateX(120%); }
    .sheet-handle { padding-top: calc(0.55rem + var(--safe-top)); }
    .inspector { max-height: 46vh; right: auto; width: min(20rem, 46vw); }
}

/* --- Tablet and desktop ------------------------------------------------- */

@media (min-width: 900px) {
    .hud {
        align-items: center;
        gap: 1rem;
        padding: calc(0.7rem + var(--safe-top)) calc(1rem + var(--safe-right)) 0.7rem calc(1rem + var(--safe-left));
    }

    .hud-brand { display: block; flex-shrink: 0; }
    .hud-brand h1 { font-size: 1.05rem; letter-spacing: 0.06em; }

    /* Turn / Clock / Official / Ruun / Risk / Saved / Left Behind / Seed /
       Hulls. Unequal tracks so the two columns carrying long values - the
       Svarog clock and the Ruun range - are not the ones that get an ellipsis
       at narrow desktop widths. */
    .hud-stats {
        grid-template-columns: 0.7fr 1.25fr 0.75fr 1.15fr 0.7fr 0.95fr 1fr 0.62fr 0.68fr;
        gap: 0.34rem;
        max-width: 60rem;
    }
    .stat { padding: 0.34rem 0.5rem; }
    .stat span { font-size: 0.875rem; }
    .stat strong { font-size: 0.92rem; }

    .sheet {
        top: calc(5.2rem + var(--safe-top));
        bottom: 1rem;
        left: 1rem;
        right: auto;
        width: 25rem;
        max-height: none;
        border: 1px solid var(--line);
        border-radius: var(--radius);
    }

    .sheet.is-collapsed { transform: translateY(calc(100% - 3.2rem)); }
    .sheet.is-hidden { transform: translateX(-120%); }

    .inspector {
        left: auto;
        right: 1rem;
        width: 21rem;
        top: calc(5.2rem + var(--safe-top));
        max-height: 62vh;
    }

    .caption { bottom: 2rem; }
    .modal { place-items: center; }
    .modal-card { max-height: 82vh; }
    .report-actions { grid-template-columns: repeat(3, 1fr); }
    .map-label b { font-size: 0.875rem; }
    .map-label small { font-size: 0.875rem; }
}

@media (min-width: 1400px) {
    .sheet { width: 27rem; }
    .inspector { width: 23rem; }
}

/* The embedded mission owns input, audio, and the viewport until its return. */
.tactical-interlude[hidden], .tactical-confirm[hidden] { display: none; }
.tactical-interlude { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #06090b; color: #eee7d8; }
.tactical-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 16px; flex-shrink: 0; border-bottom: 1px solid #655537; }
.tactical-bar h2 { margin: 0; font-size: 16px; }.tactical-bar p { margin: 4px 0 0; font-size: 13px; }
.tactical-bar button, .tactical-confirm button { min-height: 44px; padding: 8px 14px; }
.tactical-frame-container { flex: 1; min-height: 0; }.tactical-frame-container iframe { width: 100%; height: 100%; border: 0; display: block; }
.tactical-confirm { padding: 14px 16px; border-bottom: 1px solid #655537; background: #1d1811; }.tactical-confirm p { margin-bottom: 12px; }
#modal-secondary { margin-top: 12px; width: 100%; min-height: 44px; }
@media (max-width: 600px) { .tactical-bar { flex-wrap: wrap; gap: 8px; }.tactical-bar h2 { font-size: 14px; }.tactical-bar button { font-size: 12px; } }

/* Readable defaults, with proportional text/control sizing and bounded panels. */
html { font-size: calc(100% * var(--interface-scale, 1)); }
.card-copy > p, .option > span, .option p, .command-quote p, .signal-traffic p, .modal-card li, .inspector p, .report-cover p, .report-body p { font-size: 1rem; line-height: 1.55; }
.option strong, .stat strong, .menu-panel button, .menu-panel a { font-size: 1rem; }
.option > span:not(.category):not(.option-meta) { font-size: 1rem; line-height: 1.55; }
.card-copy h2, .modal-card h2 { font-size: 1.3rem; }
.stat span, .stat strong, .sheet-title { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.hud { background: rgba(6,9,11,.94); }
.hud-stats { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); max-width: none; }
.hud-brand { max-width: 11rem; }
.stat { padding: .4rem .5rem; }
.map-label { white-space: normal; max-width: 15rem; }
.map-label b { font-size: .875rem; }.map-label small { font-size: .75rem; }
.menu-panel { width: min(20rem, calc(100vw - 24px)); max-height: calc(100dvh - var(--hud-bottom, 100px) - 12px); overflow-y: auto; }
.menu-panel button, .menu-panel a, .sheet-handle, .option, #modal-continue { min-height: 44px; }
.menu-panel input[type="range"] { min-height: 36px; }
#interface-size-value { float: right; }
.sheet-handle, .card-rail { flex-shrink: 0; }
.card, .modal-card, .inspector, .report-body { overflow-wrap: anywhere; }
.modal-card { max-width: min(38rem, calc(100vw - 24px)); }
@media (min-width: 900px) {
    .sheet { top: var(--hud-bottom, 120px); width: min(28rem, 48vw); }
    .inspector { top: var(--hud-bottom, 120px); max-height: calc(100dvh - var(--hud-bottom, 120px) - 16px); }
}
@media (max-width: 899px) {
    .sheet { max-height: min(56vh, calc(100dvh - var(--hud-bottom, 120px) - 8px)); }
}
@media (max-height: 520px) and (orientation: landscape) {
    .sheet { top: 0; max-height: 100dvh; }
    .hud-stats { grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); }
}

/* --- Motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    .sheet, .modal, .inspector, .report { transition-duration: 0.01ms !important; }
}