/* Bridge console screens (lcars.js): LCARS frame (elbows, sidebar segments, bars), panels with a coloured
   edge, pill buttons with their label low and right. The faction theme arrives as --lc-* custom properties
   on #lcars and data-shape picks the geometry: pill (Federation), angular (Klingon, Cardassian), warbird. */
@font-face { font-family: "LCARS Antonio"; src: url(fonts/antonio.woff2) format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "LCARS Cinzel"; src: url(fonts/cinzel.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "LCARS Cormorant"; src: url(fonts/cormorant.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "LCARS Rubik"; src: url(fonts/rubik.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }

#lcars {
  --lc-ok: #66dd88; --lc-warn: #ffcc44; --lc-bad: #ff5555;
  --lc-r: 999px; --lc-elbow: 48px; --lc-inner: 24px; --lc-edge: 6px; --lc-panel-r: 0 14px 14px 0;
  --lc-side: 132px; --lc-barh: 22px;
  position: fixed; z-index: 60; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1240px, calc(100vw - 20px)); height: min(790px, calc(100vh - 20px));
  display: grid; grid-template-columns: var(--lc-side) minmax(0, 1fr); grid-template-rows: 62px minmax(0, 1fr) 44px; gap: 6px 10px;
  padding: 12px 14px 12px 12px; background: #000; color: var(--lc-text); font-family: var(--lc-font);
  border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 90px rgba(0, 0, 0, 0.85);
  -webkit-font-smoothing: antialiased; user-select: none;
}
#lcars[data-shape="angular"] { --lc-r: 0px; --lc-elbow: 0px; --lc-inner: 0px; --lc-edge: 4px; --lc-panel-r: 0; }
#lcars[data-shape="warbird"] { --lc-r: 0 12px 0 12px; --lc-elbow: 0px; --lc-inner: 0px; --lc-edge: 3px; --lc-panel-r: 0 0 18px 0; }
#lcars button { font-family: inherit; }

/* frame: top and bottom rows, each an elbow into the sidebar and bars across */
.lc-top, .lc-bot { grid-column: 1 / -1; display: flex; gap: 6px; min-width: 0; }
.lc-top { align-items: flex-start; }
.lc-bot { align-items: flex-end; }
.lc-elbow { position: relative; flex: 0 0 calc(var(--lc-side) + 70px); align-self: stretch; background: var(--lc-p1); border-top-left-radius: var(--lc-elbow); }
.lc-elbow::after { content: ""; position: absolute; left: var(--lc-side); right: 0; top: var(--lc-barh); bottom: 0; background: #000; border-top-left-radius: var(--lc-inner); }
.lc-elbow-b { border-radius: 0 0 0 var(--lc-elbow); background: var(--lc-p3); }
.lc-elbow-b::after { top: 0; bottom: var(--lc-barh); border-radius: 0 0 0 var(--lc-inner); }
.lc-bar { flex: 0 0 52px; height: var(--lc-barh); background: var(--lc-p2); }
.lc-bar.lc-grow { flex: 1 1 auto; min-width: 20px; background: var(--lc-p3); }
.lc-bot .lc-bar.lc-grow { background: var(--lc-p4); }
.lc-bar.lc-short { flex: 0 0 34px; background: var(--lc-p4); }
.lc-bar.lc-cap { flex: 0 0 30px; background: var(--lc-p1); border-radius: 0 var(--lc-r) var(--lc-r) 0; }
#lcars[data-shape="warbird"] .lc-bar.lc-cap { border-radius: 0 0 12px 0; }
.lc-title { font-size: 40px; line-height: 0.78; text-transform: uppercase; color: var(--lc-head); letter-spacing: 0.02em; white-space: nowrap; padding: 0 2px; }
.lc-shipname { font-size: 21px; line-height: var(--lc-barh); color: var(--lc-cream); white-space: nowrap; letter-spacing: 0.08em; }
.lc-status { font-size: 19px; line-height: 0.9; color: var(--lc-cream); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }

/* sidebar: stacked segments, the last two are buttons */
.lc-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.lc-seg { --tone: var(--lc-p2); background: var(--tone); color: #000; min-height: 46px; padding: 4px 10px 5px; border: 0; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-end; text-align: right; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; }
.lc-seg.lc-tall { min-height: 112px; }
.lc-seg b { font-size: 30px; font-weight: 700; line-height: 1; }
.lc-seg span { font-size: 13px; }
.lc-seg.lc-grow { flex: 1 1 auto; justify-content: flex-start; font-size: 12px; overflow: hidden; }
.lc-seg.lc-btn { cursor: pointer; min-height: 52px; }
.lc-seg.lc-btn:hover { filter: brightness(1.18); }
.lc-seg.lc-btn:active { filter: brightness(0.8); }
.lc-seg.blink { animation: lcBlink 1s steps(2) infinite; }
.lc-side > * { animation: lcIn 0.3s both; }

/* the console's own area: two columns of panels over the log */
.lc-main { display: grid; grid-template-rows: minmax(0, 1fr) 168px; gap: 8px; min-height: 0; min-width: 0; }
#lcars.big-log .lc-main { grid-template-rows: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.lc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; min-height: 0; }
.lc-col { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; padding-right: 4px; scrollbar-color: var(--lc-p4) transparent; scrollbar-width: thin; }
.lc-panel { --tone: var(--lc-p1); flex: 0 0 auto; background: var(--lc-panel); border-left: var(--lc-edge) solid var(--tone); border-radius: var(--lc-panel-r);
  padding: 6px 12px 10px 12px; animation: lcIn 0.35s both; }
.lc-panel h3, .lc-loghead { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 17px; line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--tone); }
.lc-rule { flex: 1 1 auto; height: 5px; min-width: 12px; background: var(--tone); opacity: 0.5; border-radius: var(--lc-r); }
.lc-note { color: var(--lc-cream); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.lc-wait { font-size: 24px; color: var(--lc-gold); letter-spacing: 0.08em; text-transform: uppercase; padding: 24px 8px; animation: lcBlink 1.2s steps(2) infinite; }

/* pills */
.lc-grp { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 0; }
.lc-pill { --tone: var(--lc-p1); border: 0; border-radius: var(--lc-r); background: var(--tone); color: #000; font: 600 15px/1 var(--lc-font);
  letter-spacing: 0.05em; text-transform: uppercase; padding: 9px 15px 6px; min-height: 31px; cursor: pointer;
  display: inline-flex; align-items: flex-end; justify-content: flex-end; text-align: right; white-space: nowrap; }
.lc-pill.small { font-size: 13px; padding: 7px 12px 5px; min-height: 26px; }
.lc-pill:hover { filter: brightness(1.2); }
.lc-pill:active { filter: brightness(0.8); transform: translateY(1px); }
.lc-pill.on { background: var(--lc-cream); box-shadow: inset 0 0 0 3px var(--tone); }
.lc-pill:disabled { background: #24242c; color: #5f5f6c; cursor: default; filter: none; transform: none; }
.lc-pill.arm { background: var(--lc-bad); animation: lcBlink 0.5s steps(2) infinite; }
.lc-grp.ladder { gap: 4px; }
.lc-grp.ladder .lc-pill { min-width: 46px; }

/* readouts */
.lc-rows { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 14px; font-size: 15px; margin: 2px 0; }
.lc-rows .k, .lc-meter .k, .lc-slider .k, .lc-k { color: var(--lc-dim); text-transform: uppercase; letter-spacing: 0.07em; font-size: 13px; }
.lc-rows .v { color: var(--lc-cream); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-k { display: block; margin: 8px 0 0; }
.lc-meter, .lc-slider { display: grid; grid-template-columns: 92px minmax(0, 1fr) 76px; align-items: center; gap: 10px; margin: 4px 0; }
.lc-meter .track { height: 12px; background: #1b1b27; border-radius: var(--lc-r); overflow: hidden; }
.lc-meter .track i { display: block; height: 100%; border-radius: inherit; transition: width 0.4s, background 0.4s; }
.lc-meter .txt, .lc-slider .v { color: var(--lc-cream); font-size: 14px; text-align: right; white-space: nowrap; }
.lc-slider input[type="range"] { width: 100%; margin: 0; accent-color: var(--tone, var(--lc-p1)); cursor: pointer; }
.lc-line { font-size: 14px; color: var(--lc-cream); margin: 6px 0 0; }
.lc-dim { color: var(--lc-dim); font-size: 13px; }
.lc-line.lc-dim { font-size: 13px; }

/* text fields */
.lc-field { display: flex; gap: 6px; margin: 7px 0 0; align-items: center; }
.lc-field input, .lc-filter, .lc-select { flex: 1 1 auto; min-width: 0; background: #000; color: var(--lc-cream); border: 2px solid var(--lc-p3);
  border-radius: var(--lc-r); padding: 5px 13px 4px; font: 15px var(--lc-font); letter-spacing: 0.04em; outline: none; user-select: text; }
.lc-field input:focus, .lc-filter:focus, .lc-select:focus { border-color: var(--lc-gold); }
.lc-field input[type="number"] { flex: 0 0 96px; }
.lc-field .lc-k { margin: 0; }
.lc-select { flex: 0 0 auto; cursor: pointer; }
.lc-filter { display: block; width: 100%; margin: 7px 0 2px; }

/* lists: destinations, contacts, crises */
.lc-list { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 0; max-height: 196px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--lc-p4) transparent; }
.lc-list.tall { max-height: 300px; }
.lc-row { display: flex; align-items: center; gap: 8px; padding: 2px 4px 2px 9px; border-left: 3px solid var(--lc-p4); background: rgba(255, 255, 255, 0.03); font-size: 14px; min-height: 30px; }
.lc-row .nm { flex: 1 1 auto; min-width: 0; color: var(--lc-cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-row .meta { color: var(--lc-dim); font-size: 12px; white-space: nowrap; }
.lc-row.cur { border-left-color: var(--lc-gold); background: rgba(255, 204, 102, 0.09); }
.lc-row.hostile { border-left-color: var(--lc-bad); }

/* shield quadrants around a hull outline */
.lc-quads { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: ". fore ." "port ship starboard" ". aft ."; gap: 5px 10px; align-items: center; justify-items: center; margin: 6px 0 2px; }
.lc-quads .q-fore { grid-area: fore; }
.lc-quads .q-aft { grid-area: aft; }
.lc-quads .q-port { grid-area: port; justify-self: end; }
.lc-quads .q-starboard { grid-area: starboard; justify-self: start; }
.lc-quad-ship { grid-area: ship; width: 40px; height: 54px; border: 2px solid var(--lc-blue); border-radius: 50% 50% 38% 38%; opacity: 0.55; }

/* engineering systems and bridge officers */
.lc-sys { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; margin: 4px 0; }
.lc-sys .nm { color: var(--lc-cream); text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; }
.lc-sys .st { color: var(--lc-dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-sys.hit .st { color: var(--lc-bad); }
.lc-officer { display: flex; gap: 10px; align-items: baseline; margin: 9px 0 0; font-size: 14px; }
.lc-officer b { flex: 0 0 104px; color: var(--lc-gold); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; }
.lc-officer .who { color: var(--lc-cream); }
.lc-officer.off .who { color: var(--lc-dim); }

/* the console log: each order, then the MUD's answer drawn as LCARS (lcars.js readout): lines, and its
   reports as cards of sections, label/value rows, meters and tables */
.lc-logbox { --tone: var(--lc-blue); display: flex; flex-direction: column; min-height: 0; background: var(--lc-panel); border-left: var(--lc-edge) solid var(--lc-blue);
  border-radius: var(--lc-panel-r); padding: 5px 10px 6px 12px; }
.lc-loghead { margin: 0; }
.lc-log { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: 4px; font-size: 15px; line-height: 1.3; letter-spacing: 0.03em;
  color: var(--lc-cream); user-select: text; scrollbar-width: thin; scrollbar-color: var(--lc-p4) transparent; }
.lc-log .lc-cmd { color: #000; background: var(--lc-gold); border-radius: var(--lc-r); display: table; margin: 8px 0 3px; padding: 2px 12px 1px;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; }
.lc-log .lc-reply { opacity: 0.92; }
.lc-log .lc-dim { font: inherit; }
.lc-card { border-left: 4px solid var(--lc-p3); padding: 3px 0 5px 10px; margin: 3px 0 6px; }
.lc-card h4 { margin: 0 0 3px; display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 17px; line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--lc-p3); --tone: var(--lc-p3); }
.lc-card .lc-rows { margin: 2px 0 4px; }
.lc-card .lc-rows .v { white-space: normal; }
.lc-card .lc-meter { margin: 3px 0; max-width: 620px; }
.lc-card .lc-meter .txt { text-align: left; }
.lc-card .lc-meter { grid-template-columns: 110px minmax(0, 1fr) minmax(76px, auto); }
.lc-csec { color: var(--lc-p2); text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; margin: 8px 0 2px; display: flex; gap: 12px; align-items: baseline; }
.lc-csec .lc-note { max-width: none; }
.lc-ctable { display: grid; gap: 1px 18px; margin: 3px 0 4px; font-size: 14px; justify-content: start; }
.lc-ctable span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lc-ctable .hd { color: var(--lc-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; }
.lc-crow { display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 14px; margin: 2px 0; }
.lc-crow span:first-child { color: var(--lc-gold); }

/* the turbolift's panel: the frame round a list of decks, as tall as the list */
#lcars.lc-lift { width: min(780px, calc(100vw - 20px)); height: auto; max-height: calc(100vh - 20px); grid-template-rows: 62px minmax(0, auto) 44px; }
.lc-decks { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; padding: 4px 4px 4px 0;
  scrollbar-width: thin; scrollbar-color: var(--lc-p4) transparent; }
.lc-deck { display: grid; grid-template-columns: 34px 210px minmax(0, 1fr); align-items: center; gap: 10px; animation: lcIn 0.3s both; }
.lc-deckno { color: var(--lc-dim); font-size: 22px; text-align: right; letter-spacing: 0.04em; }
.lc-deck .lc-pill { min-height: 40px; font-size: 18px; }
.lc-deck .lc-pill.on { cursor: default; filter: none; transform: none; }
.lc-deckrooms { color: var(--lc-cream); font-size: 14px; line-height: 1.25; letter-spacing: 0.03em; min-width: 0; }
.lc-deck.cur .lc-deckno, .lc-deck.cur .lc-deckrooms { color: var(--lc-gold); }

/* the mission board: the mission in hand, then the board's slots as cards */
.lc-bmain { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; overflow-y: auto; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: var(--lc-p4) transparent; }
.lc-bactive { flex: 0 0 auto; }
.lc-bcols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 18px; }
.lc-bttl { font-size: 24px; line-height: 1.05; color: var(--lc-cream); margin: 2px 0 6px; }
.lc-bbrief { margin: 8px 0 2px; color: var(--lc-text); font-size: 14px; line-height: 1.35; white-space: pre-wrap; }
.lc-breward { font-size: 30px; line-height: 1; color: var(--lc-gold); }
.lc-bactive .lc-meter { grid-template-columns: 72px minmax(0, 1fr) 70px; margin-top: 10px; }
.lc-bsurvey { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--lc-cream); }
.lc-bsurvey .done { color: var(--lc-ok); text-decoration: line-through; }
.lc-bhead { display: flex; align-items: center; gap: 8px; font-size: 17px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lc-p2); --tone: var(--lc-p2); margin-top: 2px; }
.lc-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.lc-mcard { --tone: var(--lc-p3); display: flex; flex-direction: column; gap: 4px; min-height: 196px; background: var(--lc-panel);
  border-left: var(--lc-edge) solid var(--tone); border-radius: var(--lc-panel-r); padding: 7px 12px 9px; animation: lcIn 0.3s both; }
.lc-mcard.taken { min-height: 0; justify-content: center; color: var(--lc-dim); border-left-style: dashed; border-left-color: var(--lc-p4);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; }
.lc-mtop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.lc-mtop .no { color: var(--lc-dim); }
.lc-mtop .ty { color: var(--tone); }
.lc-tag { border: 1px solid currentColor; border-radius: var(--lc-r); padding: 1px 8px 0; font-size: 11px; line-height: 1.3; }
.lc-mttl { font-size: 19px; line-height: 1.1; color: var(--lc-cream); }
.lc-mcard .lc-rows { font-size: 14px; gap: 1px 10px; }
.lc-mcard .lc-rows .v { white-space: normal; }
.lc-mbrief { flex: 1 1 auto; margin: 2px 0 0; color: var(--lc-dim); font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }
.lc-mfoot { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--lc-dim); flex-wrap: wrap; }
.lc-mfoot .xp { color: var(--lc-gold); font-size: 16px; }
.lc-mfoot .lim { color: var(--lc-p1); }
.lc-mfoot .lc-pill { margin-left: auto; }

/* mission news: cards over whatever is on screen, top centre (lcars.js pop) */
#lcars-pop { --lc-ok: #66dd88; --lc-warn: #ffcc44; --lc-bad: #ff5555; --lc-r: 999px; --lc-edge: 6px; --lc-panel-r: 0 14px 14px 0;
  position: fixed; z-index: 70; left: 50%; top: 64px; transform: translateX(-50%); width: min(560px, calc(100vw - 20px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; font-family: var(--lc-font); color: var(--lc-text);
  -webkit-font-smoothing: antialiased; }
#lcars-pop[data-shape="angular"] { --lc-r: 0px; --lc-edge: 4px; --lc-panel-r: 0; }
#lcars-pop[data-shape="warbird"] { --lc-r: 0 12px 0 12px; --lc-edge: 3px; --lc-panel-r: 0 0 18px 0; }
#lcars-pop button { font-family: inherit; }
.lc-pop { --tone: var(--lc-p1); pointer-events: auto; background: #000; border-left: 14px solid var(--tone); border-radius: var(--lc-panel-r);
  padding: 8px 14px 12px 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 60px rgba(0, 0, 0, 0.8); animation: lcIn 0.3s both; }
.lc-pop h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 19px; line-height: 1.1;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--tone); }
.lc-popttl { font-size: 24px; line-height: 1.05; color: var(--lc-cream); margin: 0 0 4px; }
.lc-popalert { color: var(--lc-text); white-space: pre-wrap; margin: 0 0 6px; }
.lc-pop .lc-meter { grid-template-columns: 110px minmax(0, 1fr) 46px; margin: 8px 0 2px; }
.lc-pop .lc-rows .v { white-space: normal; }
.lc-rating { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; }
.lc-rating i { width: 34px; height: 14px; border-radius: var(--lc-r); background: #24242c; }
.lc-rating span { margin-left: 6px; }
.lc-popxp { display: flex; align-items: baseline; gap: 12px; margin: 2px 0 6px; }
.lc-popxp b { font-weight: 400; font-size: 30px; color: var(--lc-gold); line-height: 1; }

@keyframes lcIn { from { opacity: 0; transform: translateX(-14px); } }
@keyframes lcBlink { 50% { opacity: 0.45; } }
@media (max-width: 960px) {
  #lcars { --lc-side: 86px; grid-template-rows: 54px minmax(0, 1fr) 38px; }
  .lc-cols { grid-template-columns: minmax(0, 1fr); }
  .lc-title { font-size: 30px; }
  .lc-shipname, .lc-bar.lc-short { display: none; }
  .lc-deck { grid-template-columns: 26px 150px minmax(0, 1fr); gap: 8px; }
  .lc-bcols { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { #lcars *, #lcars *::after, #lcars-pop * { animation: none !important; } }