/* ════════════════════════════════════════════════════════════════════════
   LOST VESSEL — UI SYSTEM (design tokens + reusable primitives)
   Phase 0 of the UI overhaul. ADDITIVE: lv-* prefixed, collides with nothing.
   Panels compose these primitives; never re-invent per panel.
   Mobile behavior is defined per-primitive (see the @media block at the end).
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Fonts (SIL OFL, to be self-hosted at integration) ── */
  --lv-display: 'Oxanium', 'Rajdhani', sans-serif;   /* chrome: titles, nav, buttons */
  --lv-mono:    'Martian Mono', 'Share Tech Mono', monospace; /* data: numbers, readouts */

  /* ── Anchors (LOCKED) ── */
  --lv-cyan:    #00c8ff;   /* primary accent: active, progress, links */
  --lv-orange:  #ff7b00;   /* secondary accent: legendary, effects, warnings-of-power */
  --lv-gold:    var(--lv-orange);   /* RETIRED Jun 20 2026: gold is CUT from the CI (clashed with the orange anchor). Aliased to orange so any stray usage recolors; do not use --lv-gold in new code. Earned/notable = orange + a non-colour highlight (glow/weight/motion); legendary = --lv-r-legendary. */
  --lv-blue:    #4a9eff;   /* cool variant / rare tier / secondary info */

  /* ── Surfaces / structure ── */
  --lv-bg:        #080c14;
  --lv-border:        #1e2d45;
  --lv-border-bright: #2a4060;
  --lv-edge:    rgba(0,200,255,.12);   /* holographic inner edge */
  --lv-glow:    rgba(0,200,255,.06);

  /* ── Text (full strength only — NO general dim token) ── */
  /* Optional global text dimmer (Settings -> Text brightness). 100% = full
     strength; lower mixes the body-text tokens toward black. Accent colors and
     the disabled token are deliberately left untouched. */
  --text-brightness: 100%;
  --lv-text:        color-mix(in srgb, #d6e6f3 var(--text-brightness, 100%), #000);   /* body text */
  --lv-text-bright: color-mix(in srgb, #d8eaf5 var(--text-brightness, 100%), #000);
  --lv-text-white:  color-mix(in srgb, #e8f4ff var(--text-brightness, 100%), #000);   /* headers / key values */
  --lv-text-disabled: #5a6b7d; /* ONLY on a disabled/can't-afford control. Never decoration. */

  /* ── Functional — MINIMAL (audit Jun 18: cyan 595 / orange 109 / danger 92 carry the UI;
     heal/loot/combat tokens were near-unused). Positive/info reuse cyan, caution reuses
     orange — no separate green/amber. Red is the ONE warm functional color we keep. ── */
  --lv-positive: var(--lv-cyan);
  --lv-caution:  var(--lv-orange);
  --lv-danger:   #f0524f;     /* danger / low-HP / destructive — the only red */

  /* ── Rarity (REAL ladder; gear = rare/epic/legendary, +mythic special, common = base.
     NO uncommon. Each maps onto a CI color, so rarity adds no new hues. ── */
  --lv-r-common:    #8a8a7a;          /* neutral grey */
  --lv-r-rare:      var(--lv-blue);   /* blue */
  --lv-r-epic:      #9a6cf0;          /* LOCKED epic violet */
  --lv-r-legendary: var(--lv-orange); /* orange */
  --lv-r-mythic:    var(--lv-danger); /* red */
  /* Short aliases: many components (forge cards, loot boxes, codex slots, quick-use,
     log entries, research-unlock, nav rings) reference --lv-epic / --lv-legendary.
     They were never defined, so those colors silently fell back to a default border.
     Alias them to the canonical rarity tokens so every rarity renders correctly. */
  --lv-epic:        var(--lv-r-epic);
  --lv-legendary:   var(--lv-r-legendary);

  /* ── Scale ── */
  --lv-s1:4px; --lv-s2:8px; --lv-s3:12px; --lv-s4:16px; --lv-s5:20px;
  --lv-notch: 12px;          /* corner cut size for framed surfaces */
  --lv-text-min: 12px;       /* never render UI text below this */

  /* ── Type scale (px; comfortable readable base — there is NO body zoom).
     Converted components reference these instead of hard-coding px so the whole
     UI shares ONE readable scale; tune here, not per panel. Floor = 12px.
     This replaces the old body{zoom} text-scale hack. ── */
  --lv-fs-hero:  26px;   /* panel hero title (e.g. CRASH SITE) */
  --lv-fs-title: 17px;   /* card / section cartouche headers */
  --lv-fs-body:  16px;   /* default body text + stat values */
  --lv-fs-label: 15px;   /* labels / secondary lines */
  --lv-fs-tag:   13px;   /* status pills / tiny tags (>= 12 floor) */
}

/* ── PANEL: framed + textured surface (the locked hero material) ──────────── */
.lv-panel{
  position:relative; color:var(--lv-text-bright);
  background:
    repeating-linear-gradient(0deg, rgba(0,200,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(150deg, #121b2e 0%, #0d1320 55%, #0a0f1a 100%);
  border:1px solid var(--lv-border-bright);
  box-shadow: inset 0 0 0 1px var(--lv-edge), inset 0 0 22px var(--lv-glow), 0 10px 40px rgba(0,0,0,.5);
  clip-path: polygon(var(--lv-notch) 0, 100% 0, 100% calc(100% - var(--lv-notch)), calc(100% - var(--lv-notch)) 100%, 0 100%, 0 var(--lv-notch));
}
.lv-panel--orange{ border-color:var(--lv-orange); box-shadow: inset 0 0 0 1px rgba(255,123,0,.15), inset 0 0 22px rgba(255,123,0,.06), 0 10px 40px rgba(0,0,0,.5); }

/* corner brackets: add <span class="lv-bracket tl/tr/bl/br"> as children */
.lv-bracket{ position:absolute; width:13px; height:13px; border:2px solid var(--lv-cyan); opacity:.85; pointer-events:none; }
.lv-bracket.tl{ top:5px; left:5px; border-right:0; border-bottom:0; }
.lv-bracket.tr{ top:5px; right:5px; border-left:0; border-bottom:0; }
.lv-bracket.bl{ bottom:5px; left:5px; border-right:0; border-top:0; }
.lv-bracket.br{ bottom:5px; right:5px; border-left:0; border-top:0; }

/* ── CARTOUCHE: header bar ─────────────────────────────────────────────────── */
.lv-cartouche{
  display:flex; align-items:center; justify-content:space-between; gap:var(--lv-s3);
  padding:9px var(--lv-s4) 8px; font-family:var(--lv-display);
  background:linear-gradient(180deg, rgba(0,200,255,.10), rgba(0,200,255,0));
  border-bottom:1px solid rgba(0,200,255,.28);
}
.lv-cartouche--orange{ background:linear-gradient(180deg, rgba(255,144,32,.12), rgba(255,144,32,0)); border-bottom-color:rgba(255,144,32,.30); }
.lv-cartouche__title{ font-weight:700; font-size:15px; letter-spacing:1.2px; text-transform:uppercase; color:var(--lv-text-white); text-shadow:0 0 10px rgba(0,200,255,.30); }

/* ── BUTTON ────────────────────────────────────────────────────────────────── */
.lv-btn{
  font-family:var(--lv-display); font-weight:700; font-size:13px; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; padding:8px 18px; text-align:center; color:var(--lv-cyan);
  background:linear-gradient(180deg, rgba(0,200,255,.16), rgba(0,200,255,.03)); border:1px solid var(--lv-cyan);
  box-shadow:inset 0 0 10px rgba(0,200,255,.18); transition:all .14s;
  clip-path: polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.lv-btn:hover{ background:var(--lv-cyan); color:var(--lv-bg); box-shadow:0 0 14px rgba(0,200,255,.4); }
.lv-btn--ghost{ color:var(--lv-text); background:rgba(255,255,255,.02); border-color:var(--lv-border-bright); box-shadow:none; }
.lv-btn--ghost:hover{ color:var(--lv-text-white); background:var(--lv-border); }
.lv-btn--danger{ color:var(--lv-danger); border-color:var(--lv-danger); background:linear-gradient(180deg, rgba(240,82,79,.14), rgba(240,82,79,.02)); box-shadow:inset 0 0 10px rgba(240,82,79,.15); }
.lv-btn--danger:hover{ background:var(--lv-danger); color:var(--lv-bg); box-shadow:0 0 14px rgba(240,82,79,.4); }
.lv-btn:disabled,.lv-btn[disabled]{ color:var(--lv-text-disabled); border-color:var(--lv-border); background:transparent; box-shadow:none; cursor:default; }

/* ── SLOT: framed icon / item bezel ────────────────────────────────────────── */
.lv-slot{
  position:relative; width:var(--lv-slot-size,62px); height:var(--lv-slot-size,62px); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 35%, #16233c, #0a0f1a); border:1px solid var(--lv-border-bright);
  box-shadow:inset 0 0 12px rgba(0,0,0,.7), inset 0 0 0 1px var(--lv-edge);
  clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.lv-slot img{ width:70%; height:70%; object-fit:contain; }
.lv-slot--legendary{ border-color:var(--lv-r-legendary); box-shadow:inset 0 0 12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,144,32,.18), 0 0 8px rgba(255,144,32,.2); }
.lv-slot--epic{ border-color:var(--lv-epic); }
.lv-slot__tag{ position:absolute; bottom:-1px; right:-1px; font-family:var(--lv-mono); font-size:12px; color:var(--lv-cyan); background:#0a0f1a; border:1px solid var(--lv-border-bright); padding:0 4px; line-height:1.4; }

/* ── DIVIDER (ornamented) ──────────────────────────────────────────────────── */
.lv-divider{ height:1px; margin:11px 2px; position:relative;
  background:linear-gradient(90deg, transparent, rgba(0,200,255,.35) 20%, rgba(0,200,255,.35) 80%, transparent); }
.lv-divider::after{ content:''; position:absolute; left:50%; top:-3px; width:6px; height:6px; transform:translateX(-50%) rotate(45deg); background:var(--lv-cyan); box-shadow:0 0 6px var(--lv-cyan); }

/* ── SECTION LABEL ─────────────────────────────────────────────────────────── */
.lv-section{ font-family:var(--lv-mono); font-size:var(--lv-text-min); letter-spacing:2px; text-transform:uppercase; color:var(--lv-cyan); padding:0 2px 4px; }

/* ── CHIP / BADGE (rarity, status, tag) ────────────────────────────────────── */
.lv-chip{ display:inline-flex; align-items:center; gap:5px; font-family:var(--lv-mono); font-size:12px; letter-spacing:1px;
  padding:2px 8px; border-radius:2px; color:var(--lv-cyan); border:1px solid currentColor; }
.lv-chip--rare{ color:var(--lv-r-rare); } .lv-chip--epic{ color:var(--lv-r-epic); } .lv-chip--legendary{ color:var(--lv-r-legendary); }
.lv-chip--positive{ color:var(--lv-positive); } .lv-chip--danger{ color:var(--lv-danger); }

/* ── STAT / LIST ROW ───────────────────────────────────────────────────────── */
.lv-statrow{ display:flex; align-items:center; gap:9px; padding:4px 2px; font-family:var(--lv-mono); font-size:13px; }
.lv-statrow__ico{ width:17px; height:17px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.lv-statrow__ico img{ width:17px; height:17px; object-fit:contain; }
.lv-statrow__lbl{ flex:1; color:var(--lv-text); }
.lv-statrow__val{ color:var(--lv-cyan); font-weight:700; }

/* ── BAR (progress / resource) ─────────────────────────────────────────────── */
.lv-bar{ height:8px; background:#0a0f1a; border:1px solid var(--lv-border); overflow:hidden; }
.lv-bar__fill{ height:100%; background:linear-gradient(90deg, var(--lv-cyan), #38e0ff); box-shadow:0 0 8px rgba(0,200,255,.5); }
.lv-bar--hp .lv-bar__fill{ background:linear-gradient(90deg, var(--lv-danger), var(--lv-cyan)); box-shadow:none; }

/* ── EFFECT / LEGENDARY CALLOUT ────────────────────────────────────────────── */
.lv-callout{ padding:8px 10px; border-left:2px solid var(--lv-orange); background:linear-gradient(90deg, rgba(255,123,0,.12), rgba(255,123,0,.02)); }
.lv-callout__h{ font-family:var(--lv-display); color:var(--lv-orange); font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; }
.lv-callout__d{ color:var(--lv-text-bright); font-size:12px; margin-top:3px; font-family:var(--lv-mono); }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE / PORTRAIT — defined alongside the primitives, not retrofitted.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  :root{ --lv-notch:9px; }
  .lv-cartouche{ padding:8px var(--lv-s3) 7px; }
  .lv-cartouche__title{ font-size:14px; letter-spacing:.8px; }
  .lv-btn{ padding:9px 14px; font-size:13px; letter-spacing:1.5px; }  /* >=12px floor kept; bigger tap target */
  .lv-slot{ --lv-slot-size:54px; }
  .lv-statrow{ font-size:12px; gap:7px; }
}

/* ── Name glow cosmetic: "breathing halo" ──────────────────────────────────
   Shared by the chat name (chat.js) + profile name + profile picker chip.
   Identity colour comes in via inline custom props (--glow / --glow-hi /
   --glow-lo) set from data/cosmetics.js glowVars(); the class owns the layered
   halo + the slow bloom pulse so a maxed cosmetic reads as a real reward, not a
   flat drop-shadow. Hot near-white core + identity colour + warm outer bloom.
   Reserved sibling (foil shimmer) lives in memory for a future premium cosmetic. */
@keyframes lv-name-glow-breathe{
  0%,100%{ text-shadow:0 0 2px #fff, 0 0 5px var(--glow), 0 0 10px var(--glow-lo),
    0 0 16px color-mix(in srgb, var(--glow-lo) 35%, transparent); }
  50%{ text-shadow:0 0 3px #fff, 0 0 8px var(--glow), 0 0 16px var(--glow-lo),
    0 0 26px color-mix(in srgb, var(--glow-lo) 60%, transparent); }
}
.lv-name-glow{
  color:var(--glow-hi);
  text-shadow:0 0 2px #fff, 0 0 6px var(--glow), 0 0 12px var(--glow-lo);
  animation:lv-name-glow-breathe 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .lv-name-glow{ animation:none; } }