/* nullbyte/css/raid.css
 *
 * RAID THEATER -- the alliance state-level raid screen (Season 0, VAIHE 6).
 * Uses the theme variables from styles.css (:root). No new palette; the raid
 * borrows the same amber/cyan/red/magenta language as the rest of the game.
 *
 * The signature element is the TRACE countdown: it escalates through threat
 * tiers as the fixed Finnish-time deadline approaches, turning the clock
 * itself into the hardcore stake made visible.
 *
 * 2026-07-11 REBUILD: the stylesheet had drifted from raid.js -- three whole
 * families of classes the JS emits had NO rule (contribute grid, the trace
 * threat tiers, the alliance card, the outcome panel, the progress bar), so
 * those panels rendered unstyled. This file is re-synced to the ACTUAL class
 * names raid.js produces (JS is the source of truth; DOM comes from it) and
 * given a proper mobile breakpoint. raid.js is NOT touched.
 *
 * Global classes (panel, panel-title, btn, btn-block, btn-sm, btn-ghost,
 * input, input-mono) come from styles.css and are never redefined here.
 */

.raid-wrap {
  max-width: 640px;
  margin: 0 auto;
}

/* ---- header ------------------------------------------------------------- */
/* JS emits .raid-header (was .raid-head). .raid-back sits top-left of it. */

.raid-header {
  text-align: center;
  position: relative;
}

.raid-back {
  position: absolute;
  left: 10px;
  top: 10px;
}

.raid-title {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 5px;
  color: var(--fg-bright);
  text-shadow: 0 0 12px var(--fg-dim);
}

.raid-sub {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--fg-dim);
}

/* ---- alliance summary line --------------------------------------------- */
/* JS emits .raid-alliance / -name / -tag / -meta (was -card / -al-*). */

.raid-alliance {
  text-align: center;
}

.raid-alliance-name {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--fg-bright);
}

.raid-alliance-tag {
  font-size: 13px;
  color: var(--cyan);
  letter-spacing: 1px;
}

.raid-alliance-meta {
  margin-top: 6px;
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
}

.raid-status-forming { color: var(--fg-dim); }
.raid-status-raiding { color: var(--amber); text-shadow: 0 0 8px rgba(255, 184, 77, 0.25); }
.raid-status-cleared { color: var(--cyan); }
.raid-status-failed  { color: var(--red); }

/* ---- gate / empty panels ----------------------------------------------- */

.raid-gate-desc,
.raid-launch-desc,
.raid-feed-desc,
.raid-actions-desc,
.raid-layer-hint,
.raid-presence-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-dim);
  letter-spacing: 0.3px;
  margin: 6px 0 12px 0;
}

.raid-actions-desc,
.raid-layer-hint {
  margin: 4px 0 10px 0;
  font-size: 11px;
}

/* ---- launch panel ------------------------------------------------------- */
/* JS emits .raid-launch-lbl inside .raid-launch-row (was .raid-field-lbl). */

.raid-launch-row {
  margin-top: 8px;
}

.raid-launch-lbl,
.raid-field-lbl {
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 8px 0 4px 0;
}

.raid-launch-btn {
  margin-top: 12px;
  border-color: var(--red);
  color: var(--red);
  letter-spacing: 2px;
}

.raid-launch-btn:hover:not(:disabled) {
  background: var(--red);
  color: var(--bg);
}

.raid-launch-status {
  margin-top: 8px;
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.3px;
  min-height: 14px;
}

.raid-launch-status.err { color: var(--red); }
.raid-launch-status.ok { color: var(--cyan); }

/* ---- the hardcore risk block ------------------------------------------- */
/* JS emits .raid-risk-tag (was .raid-risk-head). Keep both mapped. */

.raid-risk {
  margin-top: 12px;
  border: 1px solid var(--red);
  border-left-width: 3px;
  background: rgba(255, 60, 60, 0.06);
  padding: 10px 12px;
}

.raid-risk-tag,
.raid-risk-head {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--red);
}

.raid-risk-body {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg);
  letter-spacing: 0.3px;
}

/* REPLAY variant: an archived-season practice run is risk-off, so the block
 * must NOT read as danger. raid.js sets class="raid-risk raid-replay"; these
 * rules override the red border/tag with the calm cyan the rest of the game
 * uses for safe/info states, keeping the same box shape. */
.raid-replay {
  border-color: var(--cyan);
  background: rgba(0, 255, 255, 0.05);
}

.raid-replay .raid-risk-tag {
  color: var(--cyan);
}

/* ---- trace countdown (SIGNATURE) --------------------------------------- */
/* JS threatLevel() emits nominal | warning | critical | over as
 * .raid-trace-<lvl> (the old .raid-threat-low/mid/high/max never matched, so
 * the clock rendered with no threat color at all). Mapped 1:1 below:
 *   nominal  -> calm cyan
 *   warning  -> amber
 *   critical -> red, glowing, pulsing
 *   over     -> trace complete, solid red
 */

.raid-trace {
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 10px;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.raid-trace-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--fg-dim);
}

.raid-trace-clock {
  font-family: var(--font-display);
  font-size: 44px;
  letter-spacing: 4px;
  margin: 4px 0 2px 0;
  color: var(--fg-bright);
  font-variant-numeric: tabular-nums;
}

/* nominal = calm cyan */
.raid-trace-nominal  { border-top-color: var(--cyan); }
.raid-trace-nominal  .raid-trace-clock { color: var(--cyan); }

/* warning = amber */
.raid-trace-warning  { border-top-color: var(--amber); }
.raid-trace-warning  .raid-trace-clock { color: var(--amber); }

/* critical = red, glowing, pulsing (OVERSEER closing in) */
.raid-trace-critical {
  border-top-color: var(--red);
  box-shadow: inset 0 0 34px rgba(255, 60, 60, 0.18);
}
.raid-trace-critical .raid-trace-lbl { color: var(--red); }
.raid-trace-critical .raid-trace-clock {
  color: var(--red);
  text-shadow: 0 0 16px rgba(255, 60, 60, 0.6);
  animation: raid-trace-pulse 1.1s steps(2, start) infinite;
}

/* over = trace complete, solid red, no pulse */
.raid-trace-over {
  border-top-color: var(--red);
  box-shadow: inset 0 0 26px rgba(255, 60, 60, 0.1);
}
.raid-trace-over .raid-trace-lbl { color: var(--red); }
.raid-trace-over .raid-trace-clock {
  color: var(--red);
  text-shadow: 0 0 12px rgba(255, 60, 60, 0.4);
}

@keyframes raid-trace-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  100% { opacity: 1; }
}

/* ---- progress bar ------------------------------------------------------- */
/* JS emits .raid-bar-outer > .raid-bar-inner, then .raid-bar-meta with a
 * .raid-layers span (was .raid-bar / .raid-bar-fill / .raid-progress-*). */

.raid-omega {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--amber);
  text-shadow: 0 0 8px rgba(255, 184, 77, 0.3);
}

.raid-bar-outer {
  margin: 10px 0 6px 0;
  height: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  overflow: hidden;
}

.raid-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--amber));
  transition: width 0.5s ease;
}

.raid-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

.raid-bar-meta #raid-pct {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--fg-bright);
}

.raid-layers {
  font-family: var(--font-mono);
}

.raid-detail {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-dim);
  letter-spacing: 0.2px;
}

/* ---- layer selector ----------------------------------------------------- */
/* JS emits the panel as .raid-layer-sel (styling inherited from .panel; this
 * hook is here so the section has a home if it ever needs one). */

.raid-layer-sel .panel-title {
  margin-bottom: 2px;
}

.raid-layer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.raid-layer-tab {
  font-size: 11px;
  padding: 6px 14px;
  letter-spacing: 1px;
}

.raid-layer-tab.active {
  background: var(--cyan);
  color: var(--bg);
  border-color: var(--cyan);
}

/* ---- contribute actions (the grid) ------------------------------------- */
/* JS builds .raid-act-grid holding 5 buttons, each .raid-act.raid-act-<type>
 * with a stacked .raid-act-lbl + .raid-act-hint. The old .raid-action-row /
 * -btn / -label / -desc had NO matching DOM, so the whole grid fell back to
 * bare .btn and overflowed on phones. This is the core "buttons over the
 * edge" fix. Auto-fit keeps 2-3 per row on the widest phones, wrapping the
 * odd 5th button to a full-width cell that still lines up. */

.raid-act-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.raid-act {
  text-align: left;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  height: auto;
}

.raid-act-lbl {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--fg-bright);
}

.raid-act:disabled .raid-act-lbl { color: var(--fg-dim); }

.raid-act-hint {
  font-size: 10px;
  line-height: 1.35;
  color: var(--fg-dim);
  letter-spacing: 0.2px;
  text-transform: none;
  white-space: normal;
}

/* per-type accent stripe so the five channels read apart at a glance */
.raid-act-cipher { border-left: 2px solid var(--cyan); }
.raid-act-route  { border-left: 2px solid var(--amber); }
.raid-act-cpu    { border-left: 2px solid var(--fg-dim); }
.raid-act-gpu    { border-left: 2px solid var(--fg-dim); }
.raid-act-ram    { border-left: 2px solid var(--fg-dim); }

.raid-presence {
  margin-top: 10px;
}

/* ---- feed + presence status -------------------------------------------- */

.raid-feed-status {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.3px;
  min-height: 14px;
  color: var(--fg-dim);
}

.raid-feed-status.err { color: var(--red); }
.raid-feed-status.ok { color: var(--cyan); }

/* ---- outcome (cleared / failed) ---------------------------------------- */
/* JS emits .raid-outcome + .raid-outcome-win|-fail with -tag / -desc (the old
 * .raid-resolved-* had no matching DOM). Kept the resolved rules below too in
 * case another view still uses them. */

.raid-outcome {
  text-align: center;
}

.raid-outcome-win  { border-top: 2px solid var(--cyan); }
.raid-outcome-fail { border-top: 2px solid var(--red); }

.raid-outcome-tag {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 3px;
  margin-top: 4px;
}

.raid-outcome-win .raid-outcome-tag { color: var(--cyan); text-shadow: 0 0 12px rgba(0, 255, 255, 0.3); }
.raid-outcome-fail .raid-outcome-tag { color: var(--red); text-shadow: 0 0 12px rgba(255, 60, 60, 0.35); }

.raid-outcome-desc {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-dim);
  letter-spacing: 0.3px;
}

/* legacy resolved-* (kept, no matching DOM in raid.js as of 2026-07-11) */
.raid-resolved-win,
.raid-resolved-fail { text-align: center; }
.raid-resolved-win { border-top: 2px solid var(--cyan); }
.raid-resolved-fail { border-top: 2px solid var(--red); }
.raid-resolved-head { font-family: var(--font-display); font-size: 26px; letter-spacing: 3px; }
.raid-resolved-win .raid-resolved-head { color: var(--cyan); text-shadow: 0 0 12px rgba(0, 255, 255, 0.3); }
.raid-resolved-fail .raid-resolved-head { color: var(--red); text-shadow: 0 0 12px rgba(255, 60, 60, 0.35); }
.raid-resolved-body { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--fg-dim); letter-spacing: 0.3px; }
.raid-resolved-meta { margin-top: 8px; font-size: 11px; color: var(--fg-faint); letter-spacing: 1px; }

/* ---- states ------------------------------------------------------------- */

.raid-loading,
.raid-empty {
  text-align: center;
  padding: 24px;
  color: var(--fg-dim);
  font-size: 12px;
  letter-spacing: 0.3px;
}

/* ---- cipher minigame overlay (VAIHE 6) :: center-fix v2 ---------------- */
/* Scrolls from the top so a tall minigame is never clipped on phones. Sits
 * above the bottom nav (z-index 100000); the toolbox (100001) layers above. */

.raid-mg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 12px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.raid-mg-overlay > * {
  max-width: 480px;
  width: 100%;
  margin: auto;
  background: var(--bg-panel, #0a0a0a);
  border: 1px solid var(--border-bright, #2a2a2a);
  border-radius: 4px;
  padding: 16px;
  box-sizing: border-box;
}

/* ---- deposit panel (your BTC -> alliance war pool) ---------------------- */

.raid-deposit-stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 10px 0;
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.3px;
}

.raid-deposit-stats strong {
  color: var(--fg);
}

/* Shared row layout for the deposit + feed input/button pairs. Input grows to
   fill, the action button hugs its content. */
.raid-deposit .raid-feed-row,
.raid-feed .raid-feed-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.raid-deposit .raid-feed-row .input,
.raid-feed .raid-feed-row .input {
  flex: 1 1 auto;
  min-width: 0;
}

.raid-deposit .raid-feed-row .btn,
.raid-feed .raid-feed-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---- next scheduled raid ("next raid opens X") ------------------------- */

.raid-next .raid-next-body {
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-dim);
  letter-spacing: 0.2px;
}

.raid-next-clock {
  font-family: var(--font-mono);
  color: var(--fg);
  letter-spacing: 0.5px;
}

.raid-next-open { color: var(--green, #4ade80); }
.raid-next-omega { color: var(--amber, #fbbf24); }

/* ======================================================================== */
/* MOBILE ( <= 480px ). The layout had NO breakpoint before -- fixed px
 * sizes (30/44px display type, 640px wrap) overflowed a ~360-390px phone.
 * Scale the big type down, tighten spacing, and let the action grid drop to
 * two columns so no cell runs off the edge. WpE plays from mobile, so this
 * is the primary target, not an afterthought. */
/* ======================================================================== */

@media (max-width: 480px) {
  .raid-wrap {
    max-width: 100%;
  }

  .raid-title {
    font-size: 22px;
    letter-spacing: 3px;
  }

  .raid-back {
    left: 6px;
    top: 8px;
  }

  .raid-alliance-name {
    font-size: 17px;
  }

  /* the signature clock: still dominant, but inside the viewport */
  .raid-trace-clock {
    font-size: 34px;
    letter-spacing: 2px;
  }

  .raid-trace-lbl {
    letter-spacing: 2px;
  }

  /* two clean columns; the 5th button wraps to a full-width cell */
  .raid-act-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .raid-act {
    padding: 10px;
  }

  .raid-act-lbl {
    font-size: 12px;
  }

  .raid-bar-meta #raid-pct {
    font-size: 16px;
  }

  .raid-outcome-tag,
  .raid-resolved-head {
    font-size: 22px;
  }

  /* deposit/feed: stack input over button so neither is cramped */
  .raid-deposit .raid-feed-row,
  .raid-feed .raid-feed-row {
    flex-direction: column;
  }

  .raid-deposit .raid-feed-row .btn,
  .raid-feed .raid-feed-row .btn {
    width: 100%;
  }

  .raid-deposit-stats {
    flex-direction: column;
    gap: 2px;
  }
}

/* very narrow ( <= 340px ): one column so labels never clip */
@media (max-width: 340px) {
  .raid-act-grid {
    grid-template-columns: 1fr;
  }

  .raid-trace-clock {
    font-size: 30px;
  }
}

/* ======================================================================== */
/* REPLAY ARCHIVE (crew-window replay tab). One row per ended season: a head
 * line with the season name + its active date window, and a compact 3-icon
 * action row (replay / wall of legends / wall of shame) so a long season list
 * stays tight on mobile. Uses the same theme tokens as the rest of raid.css. */
/* ======================================================================== */

.replay-row {
  border: 1px solid var(--border);
  border-left: 2px solid var(--cyan);
  background: var(--bg-soft);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.replay-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.replay-row-name {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--fg-bright);
}

.replay-row-window {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.3px;
}

/* three equal icons across the row */
.replay-row-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.replay-act {
  font-size: 15px;
  line-height: 1;
  padding: 8px 0;
  text-align: center;
}

.replay-act-play:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.replay-act-play:disabled { opacity: 0.4; cursor: not-allowed; }
.replay-act-fame { border-color: var(--amber); color: var(--amber); }
.replay-act-shame { border-color: var(--red); color: var(--red); }

.replay-act-fame:hover { background: var(--amber); color: var(--bg); }
.replay-act-shame:hover { background: var(--red); color: var(--bg); }
/* ---- KILO :: pre-raid bribe + recon (the sub-net janitor) --------------- */
/* Kilo is off-books: an amber/grey market panel, distinct from the red
 * HARDCORE launch/risk look. Sabotage (aggression) borrows red; recon data
 * stays mono/dim like a terminal readout. Classes emitted by raid.js
 * kiloPanel(): .raid-kilo (panel), -desc/-pool/-boost/-recon/-status/-sub/
 * -line/-hint/-btn/-sabo/-target/-target-detail/-mark/-recon-row/-recon-lbl/
 * -recon-data/-recon-btn/-lbl. */

.raid-kilo {
  border-left: 3px solid var(--amber);
}

.raid-kilo .panel-title {
  color: var(--amber);
  letter-spacing: 2px;
}

.raid-kilo-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-dim);
  letter-spacing: 0.3px;
  margin: 6px 0 10px 0;
  font-style: italic;
}

.raid-kilo-pool {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-bright);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 7px 10px;
  margin-bottom: 12px;
  letter-spacing: 0.4px;
}

.raid-kilo-pool strong { color: var(--amber); }

/* boost / recon sub-blocks */
.raid-kilo-boost,
.raid-kilo-recon {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

.raid-kilo-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--cyan);
  margin-bottom: 5px;
}

.raid-kilo-line {
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-dim);
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.raid-kilo-hint {
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.3px;
  font-style: italic;
}

/* Kilo action buttons: amber outline (deal), full-width like feed. */
.raid-kilo-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  border-color: var(--amber);
  color: var(--amber);
  letter-spacing: 1px;
}

.raid-kilo-btn:hover:not(:disabled) {
  background: var(--amber);
  color: var(--bg);
}

.raid-kilo-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Boost already bought this raid -- clearly "done", not just greyed out. */
.raid-kilo-btn.raid-kilo-btn-done {
  opacity: 1;
  border-color: var(--fg-faint);
  color: var(--fg-dim);
  background: var(--bg-soft);
  cursor: default;
}
.raid-kilo-btn.raid-kilo-btn-done::before { content: '\2713 '; }

/* Sabotage = aggression = red, overrides the amber. */
.raid-kilo-sabo {
  border-color: var(--red);
  color: var(--red);
  margin-top: 12px;
}

.raid-kilo-sabo:hover:not(:disabled) {
  background: var(--red);
  color: var(--bg);
}

/* target picker */
.raid-kilo-lbl {
  display: block;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 8px 0 4px 0;
}

.raid-kilo-mark {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
  margin: 10px 0 6px 0;
  letter-spacing: 0.4px;
}

.raid-kilo-mark strong { color: var(--red); }

/* recon layer rows: terminal-readout look */
.raid-kilo-recon-rows {
  margin: 6px 0;
  border: 1px solid var(--border);
  background: var(--bg-soft);
}

.raid-kilo-recon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
}

.raid-kilo-recon-row:last-child { border-bottom: none; }

.raid-kilo-recon-lbl {
  flex: 1 1 auto;
  color: var(--fg-dim);
  letter-spacing: 0.3px;
}

.raid-kilo-recon-data {
  flex: 0 0 auto;
}

.raid-kilo-recon-data {
  color: var(--cyan);
  text-align: right;
  letter-spacing: 0.3px;
}

.raid-kilo-recon-btn {
  flex: 0 0 auto;
  width: 150px;
  box-sizing: border-box;
  padding: 3px 8px;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-color: var(--fg-faint);
  color: var(--fg-dim);
  letter-spacing: 1px;
}

.raid-kilo-recon-btn:hover:not(:disabled) {
  border-color: var(--amber);
  color: var(--amber);
}

/* status line (fizzle / result feedback) */
.raid-kilo-status {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--amber);
  letter-spacing: 0.3px;
  min-height: 14px;
}


/* Kilo standalone-tab additions */
.raid-kilo-ver { font-size: 9px; color: var(--fg-faint); letter-spacing: 1px; margin-left: 6px; }
.raid-kilo-mybal {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim);
  margin: 6px 0; padding: 4px 8px; border-left: 2px solid var(--cyan);
}

/* Raid-theater nudge pointing to the Kilo tab */
.raid-kilo-nudge {
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid var(--amber);
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-dim);
  letter-spacing: 0.3px;
}
.raid-kilo-nudge strong { color: var(--amber); }

/* Kilo tab: target-raid picker */
.raid-kilo-pick { margin: 12px 0 4px 0; }

/* Deposit buttons: fixed width so they line up regardless of label. */
.raid-kilo-dep-btn {
  flex: 0 0 auto;
  min-width: 108px;
  text-align: center;
  white-space: nowrap;
  border-color: var(--amber);
  color: var(--amber);
  letter-spacing: 1px;
}
.raid-kilo-dep-btn:hover:not(:disabled) {
  background: var(--amber);
  color: var(--bg);
}

/* ============================================================
   raid.css APPEND -- A-BUILD node-scan "layer & trace intel" panel.
   Append to css/raid.css. Palette reuses the existing tokens the
   raid/minigame views already rely on (--amber/--cyan/--red/--fg-dim
   /--border/--bg-soft/--font-mono) + the shard machine's band greens,
   so it sits visually with the shard app, not as a new theme.
   ============================================================ */

.raid-shard-intel {
  border-left: 3px solid var(--amber);
}

.raid-shard-intel .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.raid-intel-depth {
  font-size: 10px;
  font-weight: bold;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 3px;
  padding: 1px 6px;
  letter-spacing: 0.5px;
}

.raid-intel-desc {
  font-size: 11px;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  margin: 6px 0 10px;
  line-height: 1.4;
}

/* dormant (no synthetics slotted) -- the perk is dark, nudge to slot */
.raid-intel-dormant {
  font-size: 12px;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 12px;
}

/* intel rows -- one per upcoming raid */
.raid-intel-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.raid-intel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

/* rid label takes the flexible middle; tags sit in fixed columns on the
   right so cipher/trace boxes line up vertically down every row. */
.raid-intel-rid { flex: 1 1 auto; min-width: 0; }

/* trace-risk severity drives the left border colour (low->severe) */
.raid-intel-risk-low      { border-left-color: #35e08a; }
.raid-intel-risk-elevated { border-left-color: var(--amber); }
.raid-intel-risk-high     { border-left-color: #ff9d3c; }
.raid-intel-risk-severe   { border-left-color: var(--red); }

.raid-intel-rid {
  font-size: 13px;
  font-weight: bold;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* "HERE" marker on the raid the alliance is currently in */
.raid-intel-here {
  font-size: 9px;
  font-weight: bold;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: 3px;
  padding: 0 5px;
  letter-spacing: 0.5px;
}

.raid-intel-tags {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.raid-intel-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--border);
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
}

.raid-intel-cipher {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(77, 226, 255, 0.08);
  width: 118px;
}

.raid-intel-trace {
  color: var(--amber);
  border-color: var(--amber);
  background: rgba(255, 193, 7, 0.08);
  width: 104px;
}

/* narrow phones: let the tags shrink rather than overflow the row */
@media (max-width: 380px) {
  .raid-intel-cipher { width: auto; }
  .raid-intel-trace  { width: auto; }
}

/* omega-online banner (finale eased) */
.raid-intel-omega {
  margin-top: 10px;
  font-size: 11px;
  font-weight: bold;
  color: #35e08a;
  font-family: var(--font-mono);
  border: 1px solid #35e08a;
  border-radius: 4px;
  padding: 8px 10px;
  background: rgba(53, 224, 138, 0.08);
}

/* ==================================================================== */
/* NARRATIVE (#6) -- story beats from the season script. APPEND to        */
/* css/raid.css (do NOT overwrite it). Reuses the raid palette:           */
/* --amber accent, --bg-panel/--border, mono font. GHOST OS remaps        */
/* --amber -> --nos-warn via desktop.css so it themes with the OS.        */
/* ==================================================================== */

/* ---- broadcast line inside the active-raid panel --------------------- */
.raid-narr-broadcast {
  margin: 8px 0 10px;
  padding: 9px 11px;
  border-left: 2px solid var(--amber, #ffb020);
  background: rgba(255, 176, 32, 0.06);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-dim, #b8a488);
  letter-spacing: 0.3px;
  white-space: pre-line;   /* the script uses line breaks for dialogue */
}

/* ---- outcome: rival-claimed-it line under a fail --------------------- */
.raid-outcome-rival {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--border, #3a2e1a);
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  line-height: 1.5;
  color: var(--magenta, #d84f8c);
  white-space: pre-line;
}

/* ---- [SYSTEM] transmission modal (layer beats) ---------------------- */
.raid-narr-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 10, 0.9);
  backdrop-filter: blur(3px);
  animation: raid-narr-in 0.18s ease-out;
  padding: 20px;
}
@keyframes raid-narr-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.raid-narr-modal {
  width: min(94vw, 480px);
  border: 1px solid var(--amber, #ffb020);
  background: linear-gradient(180deg, rgba(18,14,6,0.98), rgba(8,6,3,0.98));
  box-shadow: 0 0 26px rgba(255, 176, 32, 0.28), inset 0 0 44px rgba(0,0,0,0.55);
  border-radius: 8px;
  padding: 18px 18px 16px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  color: var(--fg, #f3e6cf);
}
.raid-narr-title {
  color: var(--amber, #ffb020);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-shadow: 0 0 12px rgba(255, 176, 32, 0.45);
  border-bottom: 1px solid rgba(255, 176, 32, 0.25);
  padding-bottom: 8px;
}
.raid-narr-body {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fg, #f3e6cf);
  letter-spacing: 0.2px;
  white-space: pre-line;   /* preserve the script's line breaks / dialogue */
  margin-bottom: 16px;
  /* subtle terminal feel: a faint left rail */
  border-left: 2px solid rgba(255, 176, 32, 0.35);
  padding-left: 12px;
}
.raid-narr-close {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

/* rival-flavoured layer beat (if a future beat wants the magenta accent,
   add class raid-narr-rival on the overlay; harmless if unused) */
.raid-narr-overlay.raid-narr-rival .raid-narr-modal {
  border-color: var(--magenta, #d84f8c);
  box-shadow: 0 0 26px rgba(216, 79, 140, 0.3), inset 0 0 44px rgba(0,0,0,0.55);
}
.raid-narr-overlay.raid-narr-rival .raid-narr-title {
  color: var(--magenta, #d84f8c);
  border-bottom-color: rgba(216, 79, 140, 0.3);
  text-shadow: 0 0 12px rgba(216, 79, 140, 0.45);
}
.raid-narr-overlay.raid-narr-rival .raid-narr-body {
  border-left-color: rgba(216, 79, 140, 0.4);
}