/* Star Trek MUD client. The look is STO's own UI art from client/skin (tools/build_skin.py):
   window glass, angled window buttons, blue action buttons, chat-input kit, character select panes,
   faction / career / species icons. Layout and behaviour live in game.js; this file is presentation. */
/* STO's own typeface, Eurostile, traced from the game's font atlases by tools/build_font.py. */
@font-face { font-family: "STO Eurostile"; src: url(skin/fonts/sto-eurostile-medium.woff2) format("woff2"); font-weight: 100 500; font-display: swap; }
@font-face { font-family: "STO Eurostile"; src: url(skin/fonts/sto-eurostile-demi.woff2) format("woff2"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "STO Eurostile Condensed"; src: url(skin/fonts/sto-eurostile-condensed.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #02050a; --text: #dbe8f4; --dim: #8ea4b9; --title: #a8dcff; --accent: #4cc4ff; --accent-ink: #03121d;
  --ok: #58d08a; --warn: #f0b64a; --bad: #ff6161; --line: rgba(76, 196, 255, 0.2); --line-hi: rgba(76, 196, 255, 0.45);
  --ui: "STO Eurostile", "Eurostile", "Segoe UI", system-ui, sans-serif; --cond: "STO Eurostile Condensed", var(--ui);
  --mono: "JetBrains Mono", Consolas, "Liberation Mono", monospace;   /* MUD text only: its tables line up in columns */
  --scroll: #1d6fa5;
}
/* Faction kits: game.js setSkin() swaps the art for skin/klingon or skin/romulan and sets data-faction here. */
body[data-faction="klingon"] { --title: #ffc4b2; --accent: #ff5a40; --line: rgba(255, 84, 60, 0.22); --line-hi: rgba(255, 84, 60, 0.5); --scroll: #9a2a18; }
body[data-faction="romulan"] { --title: #b6efc6; --accent: #56d68a; --line: rgba(86, 214, 138, 0.2); --line-hi: rgba(86, 214, 138, 0.45); --scroll: #1d7f48; }
* { box-sizing: border-box; scrollbar-color: var(--scroll) rgba(0, 0, 0, 0.25); scrollbar-width: thin; }
html, body { margin: 0; height: 100%; color: var(--text); font: 14px/1.45 var(--ui); overflow: hidden; }
/* Spacedock over Earth until the 3D scene draws (and always where WebGL is missing). */
body { background: var(--bg) url(skin/backdrop.jpg) center / cover no-repeat; }
button, input { font: inherit; color: inherit; }
.hidden { display: none !important; }
.dim { color: var(--dim); }
.small { font-size: 12px; }

/* ---------------------------------------------------------------- STO kit pieces */
/* Window glass: Kit_Window_Background_16px_Radius + Edging. */
#gate .card, #hud, #deck, #contacts, #comms {
  border: 1px solid transparent; border-image: url(skin/window.png) 32 fill / 16px; background: none;
}
/* Angled window button: Default_Button_{Idle,Mouseover,Pushed,Selected,Disabled}. */
button.ghost, button.op {
  border: 1px solid transparent; border-image: url(skin/btn-idle.png) 6 6 12 12 fill / 4px 4px 8px 8px;
  background: none; color: var(--text); cursor: pointer;
}
button.ghost:hover, button.op:hover { border-image-source: url(skin/btn-over.png); }
button.ghost:active, button.op:active { border-image-source: url(skin/btn-down.png); }
button.op.on { border-image-source: url(skin/btn-sel.png); color: var(--accent-ink); font-weight: 600; }
button.op:disabled, button.ghost:disabled { border-image-source: url(skin/btn-off.png); color: #5d6c7a; cursor: default; }
/* Blue action button: Button_Blue_{Idle,Mouseover,Pushed}. */
button.primary {
  min-height: 34px; padding: 6px 22px; border: 1px solid transparent; border-image: url(skin/btn-blue-idle.png) 10 12 fill / 10px 12px;
  background: none; color: #fff; font-weight: 600; letter-spacing: 0.03em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75); cursor: pointer;
}
button.primary:hover { border-image-source: url(skin/btn-blue-over.png); }
button.primary:active { border-image-source: url(skin/btn-blue-down.png); }
button.primary:disabled { filter: grayscale(0.8) brightness(0.7); cursor: default; }
button:focus-visible { outline: 1px solid var(--title); outline-offset: 2px; }
/* Text fields: the chat input kit (Chat_Frame_Text_Input_Blue). */
.step label input, form.inline input, #cmdline input {
  border: 1px solid transparent; border-image: url(skin/input.png) 6 16 20 8 fill / 5px 14px 14px 7px;
  background: none; outline: 0; color: var(--text);
}
.step label input:focus, form.inline input:focus, #cmdline input:focus { filter: brightness(1.35); }

#view { position: fixed; inset: 0; }
#view canvas { display: block; }
.label { color: #cfe3ff; font: 11px var(--cond); text-shadow: 0 0 4px #000, 0 0 2px #000; white-space: nowrap; pointer-events: none; }
.label.hostile { color: #ff8a8a; }
.label.planet { color: #9fd9b5; }
.label.starbase { color: #ffd77a; }
.label.selected { outline: 1px solid var(--accent); outline-offset: 2px; padding: 0 3px; }
.label.targeted { outline: 1px solid #ff8a5c; outline-offset: 2px; padding: 0 3px; }

#errbar { position: fixed; left: 0; right: 0; top: 0; z-index: 50; padding: 6px 14px; background: #3a1010; color: #ffb4b4; border-bottom: 1px solid #7a2a2a; white-space: pre-wrap; font: 12px var(--cond); }

/* ------------------------------------------------------------------ gate */
#gate { position: fixed; inset: 0; z-index: 10; display: grid; grid-template-rows: auto 1fr; justify-items: center; padding: 3vh 16px 5vh; pointer-events: none; transition: opacity 0.7s ease; }
#gate.leaving { opacity: 0; }
#gate .brand { text-align: center; }
#gate .logo { display: block; width: min(330px, 70vw); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7)); }
#gate .tag { margin-top: 2px; color: var(--title); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
#gate .eyebrow { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
#gate .card { pointer-events: auto; align-self: center; width: 420px; max-width: 100%; padding: 20px 24px 14px; filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.55)); }
#gate-card[data-step="manifest"], #gate-card[data-step="create"], #gate-card[data-step="menu"] { width: 720px; }
.step { display: none; }
.step.on { display: block; }
.step h2 { margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: 0.01em; color: var(--title); }
.step label { display: block; margin: 12px 0; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.step label input { display: block; width: 100%; margin-top: 5px; padding: 8px 18px 8px 11px; letter-spacing: normal; text-transform: none; font-size: 14px; }
.actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
button.ghost { padding: 7px 14px; }
button.ghost.small { padding: 3px 10px; font-size: 12px; }
.err { min-height: 18px; margin-top: 8px; color: var(--bad); font-size: 13px; }
form.inline { display: flex; gap: 8px; margin-top: 10px; }
form.inline input { flex: 1; min-width: 0; padding: 7px 18px 7px 10px; }

/* Faction banner header (Character_Creation_Faction_Banner): text on the left, emblem on the right. */
.banner { margin: -6px -10px 12px; padding: 12px 210px 10px 16px; min-height: 72px; background: url(skin/banner.png) right center / cover no-repeat; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.banner[data-faction="klingon"] { background-image: url(skin/banner-klingon.png); }
.banner[data-faction="romulan"] { background-image: url(skin/banner-romulan.png); }
.banner h2 { margin-bottom: 2px; text-shadow: 0 1px 3px #000; }
.banner p { margin: 0; text-shadow: 0 1px 2px #000; }
.banner .eyebrow { margin-bottom: 2px; }
#gate-card[data-step="confirm"] .banner { padding-right: 155px; }

/* Crew manifest: one character select pane per officer (Select_Pane_Border, lit on hover). */
#manifest-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; max-height: 46vh; overflow: auto; padding: 2px; }
.officer, button.choice {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 10px 12px;
  border: 1px solid transparent; border-image: url(skin/pane.png) 24 fill / 12px; background: none; color: var(--text); cursor: pointer; text-align: center;
}
.officer:hover, .officer:focus-visible, button.choice:hover, button.choice:focus-visible { border-image-source: url(skin/pane-hi.png); outline: none; }
.officer { min-height: 182px; }
.officer .fac { position: absolute; left: 10px; top: 10px; width: 26px; height: 26px; }
.officer .car { width: 92px; height: 92px; margin: 4px 0 4px; background: var(--i) center / contain no-repeat; }
.officer:hover .car { background-image: var(--i-over, var(--i)); }
.officer .nm { font-size: 16px; font-weight: 600; }
.officer .meta { font-size: 12px; color: var(--dim); }
.officer .lvl { font: 11px var(--cond); color: var(--title); }
#manifest-list .empty { grid-column: 1 / -1; color: var(--dim); font-size: 13px; padding: 6px 0; }

#menu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 10px; }
#menu-list button { text-align: left; padding: 10px 14px; display: flex; gap: 10px; align-items: baseline; }
#menu-list button .k { font: 11px var(--cond); color: var(--title); min-width: 18px; }
#menu-list button.first { grid-column: 1 / -1; }
#menu-note { max-height: 30vh; overflow: auto; margin: 10px 0 0; padding: 10px; background: rgba(2, 8, 14, 0.7); border: 1px solid var(--line); border-radius: 4px; font: 12px/1.4 var(--mono); white-space: pre-wrap; color: #c8d3df; }
#prompt-text { max-height: 40vh; overflow: auto; margin: 0 0 6px; padding: 10px; background: rgba(2, 8, 14, 0.7); border: 1px solid var(--line); border-radius: 4px; font: 12px/1.4 var(--mono); white-space: pre-wrap; color: #c8d3df; }

#boarding-log { margin: 0; padding-left: 18px; color: var(--dim); }
#boarding-log li { padding: 3px 0; }
#boarding-log li:last-child { color: var(--text); }

#gate-status { display: flex; gap: 8px; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); }
#gate-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
#gate-status.busy i { background: var(--accent); animation: pulse 1.2s ease-in-out infinite; }
#gate-status.ok i { background: var(--ok); }
#gate-status.bad i { background: var(--bad); }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ------------------------------------------------------- gate: new officer */
.recruit { margin: 6px 0 4px; font-size: 26px; font-weight: 600; letter-spacing: 0.02em; color: #fff; }
/* Creation choices as panes: gender symbols, species portraits, career icons (STO character creation art). */
#create-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; max-height: 54vh; overflow: auto; padding: 2px; }
#create-options[data-step="species"] { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
#create-options[data-step="gender"] { grid-template-columns: repeat(2, 180px); justify-content: center; }
#create-options .group { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--title); }
#create-options .group img { width: 22px; height: 22px; }
#create-options .group:first-child { margin-top: 0; }
button.choice .ico { width: 84px; height: 84px; margin: 2px 0 4px; background: var(--i) center / contain no-repeat; }
button.choice.gender .ico { width: 64px; height: 64px; margin: 10px 0 8px; }
button.choice.species .ico { background: var(--i) center / 84px no-repeat, url(skin/species/bg.png) center / 84px no-repeat; border-radius: 50%; }
button.choice.department:hover .ico { background-image: var(--i-over, var(--i)); }
button.choice .k { display: none; }
button.choice .lbl { font-size: 15px; font-weight: 600; }
button.choice .note { font: 11px var(--cond); color: var(--dim); white-space: nowrap; }

/* ---------------------------------------------------------------- bridge */
#hud { position: fixed; left: 8px; right: 8px; top: 8px; display: flex; gap: 18px; align-items: center; padding: 7px 16px; font-size: 13px; }
#hud .name { color: var(--title); font-weight: 600; min-width: 160px; }
#hud .alert { font-weight: 600; min-width: 90px; }
#hud .alert.green { color: var(--ok); } #hud .alert.yellow { color: var(--warn); } #hud .alert.red { color: var(--bad); }
#hud .where { color: var(--dim); margin-left: auto; font: 12px var(--cond); }
#hud .conn { width: 9px; height: 9px; border-radius: 50%; background: #555; }
#hud .conn.open { background: var(--ok); } #hud .conn.auth { background: var(--accent); } #hud .conn.error { background: var(--bad); }

#contacts { position: fixed; right: 8px; top: 58px; width: 280px; max-height: calc(70% - 66px); overflow: auto; padding: 4px 2px 6px; font-size: 13px; }
/* Aboard, the minimap takes the top right and the ship HUD the bottom right: the list sits between them. */
#game.ship-mode #contacts { top: 340px; max-height: calc(100% - 340px - 262px); }
#contacts h3, #comms-head, #deck .panel h3 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--title); }
#contacts h3 { margin: 0; padding: 6px 12px; border-bottom: 1px solid var(--line); }
#contacts div.row { display: flex; gap: 8px; padding: 4px 12px; cursor: pointer; }
#contacts div.row:hover { background: rgba(76, 196, 255, 0.1); }
#contacts div.row.sel { background: rgba(76, 196, 255, 0.18); }
#contacts .kind { color: var(--dim); width: 60px; }
#contacts .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#contacts .nm.hostile { color: var(--bad); }
#contacts .dist { color: var(--dim); font: 12px var(--cond); }

#comms { position: fixed; left: 8px; bottom: 8px; width: min(760px, calc(100% - 16px)); height: calc(30% - 16px); display: flex; flex-direction: column; padding: 4px 4px 6px; }
#game.ship-mode #comms { width: max(360px, min(560px, calc(100% - 862px))); }
#comms.collapsed { height: auto; }
#comms.collapsed #log { display: none; }
#comms-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px 5px 12px; border-bottom: 1px solid var(--line); }
#log { flex: 1; min-height: 0; overflow: auto; padding: 6px 12px; font: 12.5px/1.45 var(--mono); color: #c8d3df; }
#log div { white-space: pre-wrap; word-break: break-word; }
#log div.me { color: var(--accent); }
#log div.sys { color: var(--dim); }
#cmdline { display: flex; gap: 8px; align-items: center; padding: 6px 10px 2px; }
#cmdline span { color: var(--accent); font-family: var(--mono); }
#cmdline input { flex: 1; padding: 4px 16px 4px 9px; font: 13px var(--mono); }

/* -------------------------------------------------------------- bridge deck */
#deck { position: fixed; left: 8px; top: 58px; bottom: 30%; width: 300px; overflow: auto; padding: 2px 2px 4px; font-size: 13px; }
#deck .panel { padding: 8px 12px 9px; border-bottom: 1px solid var(--line); }
#deck .panel:last-child { border-bottom: 0; }
#deck .panel h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 7px; }
#deck .panel h3 span { font: 11px var(--cond); letter-spacing: 0; text-transform: none; color: var(--dim); }
#deck:not(.ship-mode) .panel.ship { display: none; }
#deck.ship-mode #deck-ground { display: none; }
.btns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.btns:first-of-type { margin-top: 0; }
button.op { padding: 4px 10px; font-size: 12px; }
.speeds .op { min-width: 34px; text-align: center; padding: 4px 7px; }
/* Alert buttons light in their condition colour: the blue action button hue-shifted, and STO's yellow one. */
.alerts .op.alert-green.on { border-image: url(skin/btn-blue-idle.png) 10 12 fill / 7px 9px; filter: hue-rotate(-75deg); color: #fff; text-shadow: 0 1px 2px #000; }
.alerts .op.alert-yellow.on { border-image: url(skin/btn-yellow.png) 8 12 10 12 fill / 6px 9px 7px; color: #241a00; }
.alerts .op.alert-red.on { border-image: url(skin/btn-blue-idle.png) 10 12 fill / 7px 9px; filter: hue-rotate(160deg) saturate(1.5); color: #fff; text-shadow: 0 1px 2px #000; }
#deck form.inline { margin-top: 8px; }
#deck form.inline input { padding: 4px 16px 4px 8px; font-size: 12px; }
#deck form.inline .op { padding: 4px 12px; }
.hits { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.hits button { padding: 4px 8px; background: transparent; border: 1px solid transparent; border-radius: 3px; color: var(--text); text-align: left; cursor: pointer; font-size: 12px; }
.hits button:hover { border-color: var(--line-hi); background: rgba(76, 196, 255, 0.08); }
.hits button span { color: var(--dim); font: 11px var(--cond); margin-left: 6px; }
#target-none { margin-top: 7px; }
#deck-ground .room { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--title); }
.exits { display: grid; grid-template-columns: repeat(3, 44px) 16px 44px; grid-template-rows: repeat(3, 30px); gap: 4px; margin: 4px 0 8px; }
.exits .op { padding: 0; text-align: center; }
.exits .op.n { grid-area: 1 / 2; } .exits .op.w { grid-area: 2 / 1; } .exits .op.e { grid-area: 2 / 3; } .exits .op.s { grid-area: 3 / 2; }
.exits .op.u { grid-area: 1 / 5; } .exits .op.d { grid-area: 3 / 5; }
.cname { font-size: 15px; font-weight: 600; }

/* -------------------------------------------------------------- space HUD */
/* STO's space HUD, all from client/skin/hud: minimap, shield tray, weapon tray, target window. */
#game:not(.ship-mode) .ship-only { display: none; }
#hud .viewsw { display: flex; gap: 4px; }
#hud .viewsw .op { padding: 3px 12px; font-size: 12px; }

/* Interior view: the ship's deck plan over STO's map grid (game.js, interior view). */
#interior { position: fixed; left: 316px; right: 296px; top: 58px; bottom: calc(30% + 8px); display: flex; flex-direction: column; border: 1px solid transparent; border-image: url(skin/window.png) 32 fill / 16px; font-size: 13px; }
.iv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 14px 6px; border-bottom: 1px solid var(--line); }
.iv-head h3, .iv-side h4 { margin: 0; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--title); }
.iv-head span { font: 12px var(--cond); }
.iv-body { flex: 1; min-height: 0; display: flex; }
.iv-decks { width: 128px; flex: none; overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); }
.iv-decks .op { padding: 4px 10px 5px; text-align: left; font-size: 12px; line-height: 1.25; }
.iv-decks .op small { display: block; font: 11px var(--cond); color: var(--dim); }
.iv-decks .op.on small { color: inherit; }
.iv-decks .op.here::after { content: ""; float: right; width: 12px; height: 12px; margin-top: 1px; background: url(skin/hud/iv-you.png) center / contain no-repeat; }
.iv-map { position: relative; flex: 1; min-width: 0; overflow: hidden; background: linear-gradient(rgba(2, 8, 18, 0.66), rgba(2, 8, 18, 0.66)), url(skin/hud/iv-grid.png) 0 0 / 64px; }
#iv-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#iv-links line { stroke: var(--line-hi); stroke-width: 3; stroke-linecap: round; }
#iv-links line.path { stroke: var(--title); stroke-dasharray: 5 5; }
.iv-room { position: absolute; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 7px 3px; border: 1px solid var(--line-hi); border-radius: 6px; background: rgba(4, 14, 26, 0.9); color: var(--text); font-size: 11.5px; line-height: 1.2; text-align: left; cursor: pointer; overflow: hidden; }
.iv-room:hover { border-color: var(--accent); }
.iv-room.here { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--line-hi); }
.iv-room.path { border-color: var(--title); }
.iv-room.dest { border: 1px dashed var(--title); }
.iv-room .nm { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-right: 14px; }
.iv-room .who { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; min-height: 18px; }
.iv-room .who img { width: 20px; height: 20px; object-fit: contain; }
.iv-room .lift { position: absolute; right: 4px; top: 4px; display: flex; gap: 1px; }
.iv-room .lift img { width: 8px; height: 14px; object-fit: contain; opacity: 0.85; }
.iv-empty { position: absolute; inset: 0; display: grid; place-items: center; font: 12px var(--cond); }
.iv-side { width: 196px; flex: none; overflow: auto; padding: 8px 4px; border-left: 1px solid var(--line); }
.iv-side h4 { margin: 0 8px 6px; }
.iv-side h4 + div { margin-bottom: 10px; }
.iv-row { display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; align-items: center; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
.iv-row:hover { background: var(--line); }
.iv-row img { grid-row: span 2; width: 26px; height: 26px; object-fit: contain; }
.iv-row .nm { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.iv-row .at { overflow: hidden; font: 11px var(--cond); color: var(--dim); text-overflow: ellipsis; white-space: nowrap; }
.iv-row.off { opacity: 0.55; cursor: default; }
.iv-foot { display: flex; align-items: center; gap: 14px; padding: 6px 12px 7px; border-top: 1px solid var(--line); }
.iv-foot .room { color: var(--title); font-weight: 600; }
.iv-foot .exits { display: flex; gap: 4px; margin: 0; }
.iv-foot .exits .op { min-width: 34px; padding: 3px 6px; }

/* Minimap: STO's arc hugging a masked sector grid; game.js draws the contacts on the canvas. */
#minimap { position: fixed; right: 8px; top: 58px; width: 280px; }
#minimap .mm-title { display: flex; justify-content: space-between; gap: 8px; padding: 0 8px 3px 44px; font-size: 12px; color: var(--title); text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#minimap .mm-title span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mm-range { color: var(--dim); font: 11px var(--cond); white-space: nowrap; }
#minimap .mm-body { position: relative; height: 180px; }
#mm-canvas { position: absolute; right: 0; top: 0; width: 245px; height: 180px; cursor: crosshair;
  background: url(skin/hud/mm-grid.png) center / 120px, rgba(2, 12, 28, 0.8);
  -webkit-mask: url(skin/hud/mm-mask.png) center / 100% 100% no-repeat; mask: url(skin/hud/mm-mask.png) center / 100% 100% no-repeat; }
#minimap .mm-arc { position: absolute; left: 20px; top: 0; width: 110px; height: 180px; background: url(skin/hud/mm-arc.png) left / contain no-repeat; pointer-events: none; }
button.mm-zoom { position: absolute; left: 22px; width: 21px; height: 21px; padding: 0; border: 0; background: center / contain no-repeat; cursor: pointer; }
button.mm-zoom.in { top: 2px; background-image: url(skin/hud/mm-zoomin.png); }
button.mm-zoom.in:hover { background-image: url(skin/hud/mm-zoomin-over.png); }
button.mm-zoom.out { bottom: 2px; background-image: url(skin/hud/mm-zoomout.png); }
button.mm-zoom.out:hover { background-image: url(skin/hud/mm-zoomout-over.png); }
#minimap .mm-btns { display: flex; justify-content: flex-end; gap: 4px; margin-top: 4px; }
button.mm-btn { width: 66px; padding: 44px 0 0; white-space: nowrap; border: 0; background: center top / 40px 37px no-repeat; color: var(--dim); font: 12px var(--cond); text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 2px #000; cursor: pointer; }
button.mm-btn:hover { color: var(--text); }
button.mm-btn:disabled { cursor: default; color: #5d6b78; }
button.mm-btn.hail { background-image: url(skin/hud/mm-hail.png); }
button.mm-btn.hail:hover { background-image: url(skin/hud/mm-hail-over.png); }
button.mm-btn.hail:disabled { background-image: url(skin/hud/mm-hail-off.png); }
button.mm-btn.beam { background-image: url(skin/hud/mm-beam.png); }
button.mm-btn.beam:hover { background-image: url(skin/hud/mm-beam-over.png); }
button.mm-btn.warp { background-image: url(skin/hud/mm-warp.png); }
button.mm-btn.warp:hover { background-image: url(skin/hud/mm-warp-over.png); }
button.mm-btn.scan { background-size: 26px 33px; background-position: center 2px; background-image: url(skin/hud/mm-scan.png); }
button.mm-btn.scan:hover { background-image: url(skin/hud/mm-scan-over.png); }

#shiphud { position: fixed; right: 8px; bottom: 8px; display: flex; align-items: flex-end; gap: 8px; }

/* Shield tray: the arched STO window, the shield ring with an arc per facing, the hull silhouette.
   Arcs drain toward their middle as the facing weakens; the hull fills from the bottom. */
#ship-tray { position: relative; width: 200px; height: 244px; background: url(skin/hud/tray.png) center / 100% 100% no-repeat; }
.st-shield { position: absolute; left: 10px; top: 10px; width: 180px; height: 180px; }
.st-shield .ring { position: absolute; inset: 0; background: url(skin/hud/shield-ring.png) center / 100% 100%; }
.st-shield .arc { position: absolute; --p: 0; }
.st-shield .arc::before, .st-shield .arc::after { content: ""; position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
.st-shield .arc::after { opacity: calc(0.5 + 0.5 * var(--p)); transition: clip-path 0.3s; }
.st-shield .arc.top, .st-shield .arc.bottom { left: 28.33%; width: 43.33%; height: 13.33%; }
.st-shield .arc.top { top: 0; } .st-shield .arc.bottom { bottom: 0; }
.st-shield .arc.left, .st-shield .arc.right { top: 28.33%; width: 13.33%; height: 43.33%; }
.st-shield .arc.left { left: 0; } .st-shield .arc.right { right: 0; }
.st-shield .arc.top::after, .st-shield .arc.bottom::after { clip-path: inset(0 calc(50% - 50% * var(--p)) 0 calc(50% - 50% * var(--p))); }
.st-shield .arc.left::after, .st-shield .arc.right::after { clip-path: inset(calc(50% - 50% * var(--p)) 0 calc(50% - 50% * var(--p)) 0); }
.st-shield .arc.top::before { background-image: url(skin/hud/shield-track-top.png); }
.st-shield .arc.top::after { background-image: url(skin/hud/shield-top.png); }
.st-shield .arc.bottom::before { background-image: url(skin/hud/shield-track-bottom.png); }
.st-shield .arc.bottom::after { background-image: url(skin/hud/shield-bottom.png); }
.st-shield .arc.left::before { background-image: url(skin/hud/shield-track-left.png); }
.st-shield .arc.left::after { background-image: url(skin/hud/shield-left.png); }
.st-shield .arc.right::before { background-image: url(skin/hud/shield-track-right.png); }
.st-shield .arc.right::after { background-image: url(skin/hud/shield-right.png); }
.st-shield .hull { position: absolute; left: 20.67%; top: 22%; width: 58.67%; height: 56%; }
.st-shield .hull img { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-shield .hull .fill { position: absolute; inset: 0; clip-path: inset(calc(100% - 100% * var(--p, 1)) 0 0 0); transition: clip-path 0.4s; }
.st-read { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 12px; font-size: 12px; color: var(--dim); }
.st-read b { color: var(--text); font: 600 12px var(--cond); }

/* Throttle: STO's impulse bar. --p is the handle, 0 = full reverse, 0.2 = stop, 1 = full impulse (and warp).
   The level fills from the stop line to the handle (down to it in reverse); white segments at full impulse. */
#throttle { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 92px; height: 244px; box-sizing: border-box;
  padding: 10px 6px 10px; border: 1px solid transparent; border-image: url(skin/window.png) 32 fill / 16px; --p: 0.2; }
.thr-read { display: flex; flex-direction: column; align-items: center; min-height: 30px; text-align: center; line-height: 1.1; }
.thr-read b { font: 600 13px var(--cond); color: var(--title); letter-spacing: 0.02em; }
.thr-read em { font: 11px var(--cond); font-style: normal; color: #ff8a6a; }
.thr-bar { position: relative; flex: 1; width: 24px; cursor: pointer; border: solid transparent; border-width: 6px 4px; box-sizing: border-box;
  border-image: url(skin/hud/thr-base.png) 8 fill / 6px 4px; }
.thr-bar .lvl { position: absolute; inset: 0; background: url(skin/hud/thr-level.png) center / 100% 100% no-repeat;
  clip-path: inset(calc(100% - 100% * var(--p)) 0 20% 0); transition: clip-path 0.25s; }
#throttle.reverse .thr-bar .lvl { clip-path: inset(80% 0 calc(100% * var(--p)) 0); filter: hue-rotate(160deg) saturate(1.6); }
#throttle.full .thr-bar .lvl { background-image: url(skin/hud/thr-full.png); }
#throttle.warp .thr-bar .lvl { filter: brightness(1.35) saturate(1.3); }
.thr-bar .zero { position: absolute; left: -6px; right: -6px; bottom: 20%; height: 1px; background: rgba(168, 220, 255, 0.55); }
.thr-bar .handle { position: absolute; left: -18px; right: -18px; height: 14px; bottom: calc(100% * var(--p) - 7px);
  background: url(skin/hud/thr-handle.png) center / 100% 100% no-repeat; transition: bottom 0.25s; pointer-events: none; }
.thr-bar:hover .handle { background-image: url(skin/hud/thr-handle-over.png); }
.thr-btns { display: flex; gap: 2px; }
button.thr { width: 26px; height: 26px; padding: 0; border: 0; background: center / 100% 100% no-repeat; cursor: pointer; }
button.thr.rev { background-image: url(skin/hud/thr-reverse.png); }
button.thr.rev:hover { background-image: url(skin/hud/thr-reverse-over.png); }
button.thr.rev:active { background-image: url(skin/hud/thr-reverse-down.png); }
button.thr.rev.on { background-image: url(skin/hud/thr-reverse-on.png); }
button.thr.stop { background-image: url(skin/hud/thr-stop.png); }
button.thr.stop:hover { background-image: url(skin/hud/thr-stop-over.png); }
button.thr.stop:active { background-image: url(skin/hud/thr-stop-down.png); }
button.thr.full { background-image: url(skin/hud/thr-impulse.png); }
button.thr.full:hover { background-image: url(skin/hud/thr-impulse-over.png); }
button.thr.full:active { background-image: url(skin/hud/thr-impulse-down.png); }
button.thr.full.on { background-image: url(skin/hud/thr-impulse-on.png); }

/* What the MUD answered a control: STO's centre-screen notice. */
#notice { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); max-width: min(720px, 80vw); padding: 6px 18px; z-index: 30;
  font: 600 17px var(--cond); color: #d8f0ff; text-align: center; text-shadow: 0 0 6px rgba(40, 150, 255, 0.85), 0 1px 2px #000; pointer-events: none; }
#notice.hit { color: #ffd9a0; }   /* a shot of ours that reached the hull */
#notice.bad { color: #ffb39c; text-shadow: 0 0 6px rgba(255, 70, 40, 0.8), 0 1px 2px #000; }

/* Weapon tray: STO's fire buttons, the two weapon slots with cooldown shade, power levels and presets. */
#weap-tray { display: flex; align-items: flex-end; gap: 12px; padding: 10px 12px 10px 10px; border: 1px solid transparent; border-image: url(skin/window.png) 32 fill / 16px; }
.fire-col { display: flex; flex-direction: column; gap: 4px; }
button.fire { width: 25px; height: 40px; padding: 0; border: 0; background: center / 100% 100% no-repeat; cursor: pointer; }
button.fire.all { background-image: url(skin/hud/fire-all.png); }
button.fire.all:hover { background-image: url(skin/hud/fire-all-over.png); }
button.fire.all:active { background-image: url(skin/hud/fire-all-down.png); }
button.fire.all:disabled { background-image: url(skin/hud/fire-all-off.png); }
button.fire.beam { background-image: url(skin/hud/fire-beam.png); }
button.fire.beam:hover { background-image: url(skin/hud/fire-beam-over.png); }
button.fire.beam:active { background-image: url(skin/hud/fire-beam-down.png); }
button.fire.beam:disabled { background-image: url(skin/hud/fire-beam-off.png); }
button.fire.torp { background-image: url(skin/hud/fire-torp.png); }
button.fire.torp:hover { background-image: url(skin/hud/fire-torp-over.png); }
button.fire.torp:active { background-image: url(skin/hud/fire-torp-down.png); }
button.fire.torp:disabled { background-image: url(skin/hud/fire-torp-off.png); }
button.fire:disabled, button.slot:disabled, button.preset:disabled { cursor: default; }
.slots { display: flex; flex-direction: column; gap: 8px; }
button.slot { position: relative; display: grid; grid-template-columns: 46px 1fr; column-gap: 8px; align-items: center; width: 142px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
button.slot::before { content: ""; grid-row: 1 / 3; width: 44px; height: 44px; border: 1px solid var(--line-hi); border-radius: 3px; background: center / cover no-repeat; }
button.slot.phaser::before { background-image: url(skin/hud/weapon-phaser.png); }
button.slot.torp::before { background-image: url(skin/hud/weapon-torpedo.png); }
button.slot:not(:disabled):hover::before { border-color: var(--accent); box-shadow: 0 0 7px rgba(76, 196, 255, 0.6); }
button.slot:disabled::before { filter: grayscale(0.8) brightness(0.55); }
button.slot .lbl { align-self: end; font-size: 12px; font-weight: 600; }
button.slot em { align-self: start; font: 11px var(--cond); font-style: normal; color: var(--dim); white-space: nowrap; }
button.slot.safe .lbl::after { content: " · safe"; font-weight: 400; color: var(--dim); }
button.slot .cd { position: absolute; left: 1px; top: 50%; width: 44px; height: 44px; margin-top: -22px; background: rgba(0, 0, 0, 0.62); pointer-events: none; display: none; }
button.slot.cooling .cd { display: block; }
.power { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.power .levels { display: flex; gap: 6px; }
.pw { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 22px; }
.pw em { font: 10px var(--cond); font-style: normal; }
.pw i { position: relative; width: 14px; height: 66px; background: url(skin/hud/power-track.png) center / 100% 100%; }
.pw i b { position: absolute; left: 2px; right: 2px; bottom: 1px; height: calc((100% - 2px) * var(--p, 0)); background: url(skin/hud/power-fill.png) bottom / 100% 64px; transition: height 0.3s; }
.pw .ico { width: 18px; height: 19px; background: center / contain no-repeat; opacity: 0.85; }
.pw .ico.weapons { background-image: url(skin/hud/power-weapons.png); }
.pw .ico.shields { background-image: url(skin/hud/power-shields.png); }
.pw .ico.engines { background-image: url(skin/hud/power-engines.png); }
.pw .ico.auxiliary { background-image: url(skin/hud/power-auxiliary.png); }
.presets { display: flex; flex-direction: column; gap: 3px; }
button.preset { display: flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--dim); font: 12px var(--cond); white-space: nowrap; cursor: pointer; }
button.preset:hover { color: var(--text); }
button.preset::before { content: ""; width: 18px; height: 23px; background: center / contain no-repeat; }
button.preset.attack::before { background-image: url(skin/hud/preset-attack.png); }
button.preset.attack:hover::before { background-image: url(skin/hud/preset-attack-over.png); }
button.preset.attack:active::before { background-image: url(skin/hud/preset-attack-down.png); }
button.preset.balance::before { background-image: url(skin/hud/preset-balance.png); }
button.preset.balance:hover::before { background-image: url(skin/hud/preset-balance-over.png); }
button.preset.balance:active::before { background-image: url(skin/hud/preset-balance-down.png); }

/* Target window: STO's frame by standing, the shield ring with two arcs per facing, the faction ship
   disc that drains with the target's hull, name, hull bar, range. Positions are the frame's own (244x108). */
#target-win { position: relative; width: 305px; height: 135px; background: url(skin/hud/target-neutral.png) center / 100% 100% no-repeat; }
#target-win[data-stand="enemy"] { background-image: url(skin/hud/target-enemy.png); }
#target-win[data-stand="ally"] { background-image: url(skin/hud/target-ally.png); }
.tw-ring { position: absolute; left: 8.2%; top: 10.2%; width: 37.7%; height: 85.2%; background: url(skin/hud/target-ring.png) center / 100% 100%; }
.tarc { position: absolute; background: center / 100% 100% no-repeat; opacity: calc(0.1 + 0.9 * var(--p, 0)); transition: opacity 0.3s; }
.tarc.top-l, .tarc.top-r, .tarc.bottom-l, .tarc.bottom-r { width: 34.8%; height: 23.9%; }
.tarc.port-l, .tarc.port-r, .tarc.starboard-l, .tarc.starboard-r { width: 23.9%; height: 34.8%; }
.tarc.top-l { left: 15.2%; top: 0; background-image: url(skin/hud/tarc-top-l.png); }
.tarc.top-r { left: 50%; top: 0; background-image: url(skin/hud/tarc-top-r.png); }
.tarc.bottom-l { left: 15.2%; top: 76.1%; background-image: url(skin/hud/tarc-bottom-l.png); }
.tarc.bottom-r { left: 50%; top: 76.1%; background-image: url(skin/hud/tarc-bottom-r.png); }
.tarc.port-r { left: 0; top: 15.2%; background-image: url(skin/hud/tarc-port-r.png); }
.tarc.port-l { left: 0; top: 50%; background-image: url(skin/hud/tarc-port-l.png); }
.tarc.starboard-r { left: 76.1%; top: 15.2%; background-image: url(skin/hud/tarc-starboard-r.png); }
.tarc.starboard-l { left: 76.1%; top: 50%; background-image: url(skin/hud/tarc-starboard-l.png); }
.tw-ship { position: absolute; left: 14.75%; top: 25%; width: 24.6%; height: 55.6%; }
.tw-ship img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tw-ship .fill { clip-path: inset(calc(100% - 100% * var(--p, 1)) 0 0 0); transition: clip-path 0.4s; }
.tw-fac { position: absolute; left: 43.2%; top: 9.5%; width: 8%; height: 18%; object-fit: contain; }
.tw-name { position: absolute; left: 54%; top: 11%; width: 40%; height: 18.5%; display: flex; align-items: center; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.tw-hull { position: absolute; left: 48%; top: 35%; width: 39%; height: 13%; display: flex; align-items: center; gap: 6px; }
.tw-hull i { flex: 1; height: 8px; background: rgba(0, 0, 0, 0.55); border-radius: 2px; overflow: hidden; }
.tw-hull b { display: block; height: 100%; width: 0; background: linear-gradient(#ffe6a8, #e0a030); transition: width 0.3s; }
.tw-hull em { font: 11px var(--cond); font-style: normal; text-shadow: 0 1px 2px #000; }
.tw-dist { position: absolute; left: 48%; top: 51%; width: 33%; height: 17%; display: flex; align-items: center; font: 11px var(--cond); color: var(--text); white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px #000; }

/* -------------------------------------------------------------- 3D rooms */
/* Interior view in a room (room3d.js): the room fills the screen, the deck plan becomes a corner map. */
#interior.mini { right: auto; bottom: auto; width: 420px; height: 300px; }
#interior.mini .iv-side { display: none; }
#interior.mini .iv-decks { width: 92px; }
#interior.mini .iv-decks .op { padding: 3px 8px 4px; font-size: 11px; }
#interior.mini .iv-head span { display: none; }
.iv-head #iv-size { margin-left: auto; padding: 2px 10px; font-size: 11px; }
#game:not(.in-room) #room-help, #game:not(.in-room) #room-status, #game.in-room #fly-help { display: none; }
#room-help, #fly-help { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 4px 14px; font: 12px var(--cond); color: var(--dim);
  text-shadow: 0 1px 2px #000, 0 0 6px #000; pointer-events: none; animation: roomhelp 12s forwards; }
@keyframes roomhelp { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* Out in space the bottom belongs to the HUD: the flight keys sit under the top bar. */
#fly-help { top: 40px; bottom: auto; }
#room-status { position: fixed; left: 50%; top: 45%; transform: translateX(-50%); padding: 8px 18px; font: 13px var(--cond); color: var(--title);
  border: 1px solid transparent; border-image: url(skin/window.png) 32 fill / 16px; pointer-events: none; }
.room-labels .room-door { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 3px 10px 5px;
  border: 1px solid transparent; border-image: url(skin/btn-idle.png) 6 6 12 12 fill / 4px 4px 8px 8px; background: none; color: var(--text);
  font: 12px var(--ui); line-height: 1.2; cursor: pointer; white-space: nowrap; }
.room-labels .room-door:hover { border-image-source: url(skin/btn-over.png); }
.room-labels .room-person { display: flex; flex-direction: column; align-items: center; color: #e8f2ff; text-shadow: 0 1px 2px #000, 0 0 5px #000; white-space: nowrap; pointer-events: none; }
.room-labels .room-person .n { font: 600 12px var(--ui); }
.room-labels .room-person .r { font: 10px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--title); }
.room-labels .room-person.player .n { color: var(--accent); }
/* The crosshair while the mouse looks around (room3d.js, and space in game.js): STO's HUD crosshair, lit over a
   door, console, panel or contact, with its name under it. */
.mouse-reticle { position: fixed; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 5; }
.mouse-reticle i { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; background: url(skin/hud/crosshair.png) center / contain no-repeat;
  opacity: 0.55; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 2px #000); }
.mouse-reticle.on i { opacity: 1; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 4px var(--accent)); }
.mouse-reticle span { position: absolute; left: 0; top: 22px; transform: translateX(-50%); white-space: nowrap; font: 600 12px var(--ui); color: var(--title);
  text-shadow: 0 1px 2px #000, 0 0 5px #000; }
/* In a room the space HUD (minimap, contacts, shield and weapon trays) steps aside for the view. */
#game.in-room #minimap, #game.in-room #contacts, #game.in-room #shiphud { display: none; }
/* Walking a room: the flight deck gives way to the room (the consoles are where ship orders are given), and
   the deck plan hides too: the doors in the room are the way around. */
#game.in-room #deck, #game.in-room #interior { display: none; }

/* Gunner mode (game.js gunnerOpen): out in space from the Tactical seat. The space HUD comes back over the room
   (not the throttle: the helm flies), with the gunner's window top left, clear of the middle of the view, in STO's
   window glass and buttons. Engineering mode (engineerOpen) the same from the Engineering seat. */
#game.in-room.gunner #shiphud, #game.in-room.engineer #shiphud, #game.in-room.science #shiphud, #game.in-room.dcmode #shiphud { display: flex; }
#game.in-room.gunner #minimap, #game.in-room.gunner #contacts, #game.in-room.engineer #minimap, #game.in-room.engineer #contacts,
#game.in-room.science #minimap, #game.in-room.science #contacts, #game.in-room.dcmode #minimap, #game.in-room.dcmode #contacts { display: block; }
#game.gunner #throttle, #game.gunner #room-help, #game.gunner #fly-help,
#game.engineer #throttle, #game.engineer #room-help, #game.engineer #fly-help,
#game.science #throttle, #game.science #room-help, #game.science #fly-help,
#game.dcmode #throttle, #game.dcmode #room-help, #game.dcmode #fly-help { display: none; }
#game:not(.gunner) #gunner-bar { display: none; }
#game:not(.engineer) #eng-bar, #game:not(.engineer) #eng-warn, #game:not(.engineer) #seal { display: none; }
#game:not(.science) #sci-bar, #game:not(.science) #reso { display: none; }
#game:not(.dcmode) #dc-bar { display: none; }
#game.gunner .st-shield .arc { cursor: pointer; }
#gunner-bar { position: fixed; left: 8px; top: 44px; z-index: 6; display: flex; flex-direction: column; gap: 5px; width: 400px; box-sizing: border-box;
  padding: 8px 14px 9px; border: 1px solid transparent; border-image: url(skin/window.png) 32 fill / 16px; font-size: 12px; white-space: nowrap; }
#gunner-bar .gb-head { display: flex; align-items: center; gap: 12px; padding-bottom: 2px; }
#gunner-bar .gb-head b { font: 600 14px var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--title); }
#gunner-bar .gb-head span { flex: 1; color: var(--text); }
#gunner-bar .gb-row { display: flex; align-items: center; gap: 5px; }
#gunner-bar .k { width: 58px; font: 11px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
#gunner-bar .gb-note { font: 11px var(--cond); color: var(--dim); }
#gunner-bar .op.down { text-decoration: line-through; }
#gunner-bar .op.alert-yellow.on { border-image: url(skin/btn-yellow.png) 8 12 10 12 fill / 6px 9px 7px; color: #241a00; }
#gunner-bar .op.alert-red.on { border-image: url(skin/btn-blue-idle.png) 10 12 fill / 7px 9px; filter: hue-rotate(160deg) saturate(1.5); color: #fff; text-shadow: 0 1px 2px #000; }
#gunner-bar .gb-keys { font: 11px var(--cond); color: var(--dim); padding-top: 2px; white-space: normal; line-height: 1.35; }

/* The engineer's window: STO's power levels (track, fill, the transfer to the level set, handle) with tng_ui's six
   systems under STO's four icons and STO's four presets; the Engineering officer's tray (frame, emblem, powers with
   a cooldown sweep); damage control; overclock and diagnostics; the core's strain. Top left like the gunner's, and
   it scrolls above the comms log when the screen is short. */
#eng-bar { position: fixed; left: 8px; top: 44px; z-index: 6; display: flex; flex-direction: column; gap: 5px; width: 432px; box-sizing: border-box;
  max-height: calc(70% - 52px); overflow-y: auto; padding: 8px 14px 9px; border: 1px solid transparent; border-image: url(skin/window.png) 32 fill / 16px;
  font-size: 12px; white-space: nowrap; }
#eng-bar .gb-head { display: flex; align-items: center; gap: 12px; padding-bottom: 2px; }
#eng-bar .gb-head b { font: 600 14px var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--title); }
#eng-bar .gb-head span { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
#eng-bar .gb-row { display: flex; align-items: center; gap: 5px; }
#eng-bar .k { width: 72px; flex: none; font: 11px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
#eng-bar .gb-note { font: 11px var(--cond); color: var(--dim); }
#eng-bar .gb-row .op { padding: 1px 10px 2px; font-size: 11px; }
#eng-bar .op.on { border-image-source: url(skin/btn-sel.png); color: var(--accent-ink); font-weight: 600; }
#eng-bar .gb-keys { font: 11px var(--cond); color: var(--dim); padding-top: 2px; white-space: normal; line-height: 1.35; }
.eb-power { display: flex; align-items: flex-end; gap: 16px; padding: 2px 0 0 4px; }
.eb-levels { display: flex; gap: 12px; }
.eb-grp { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.eb-bars { display: flex; gap: 5px; }
.eb-bar { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 24px; cursor: ns-resize; touch-action: none; user-select: none; }
.eb-bar em { font: 600 11px var(--cond); font-style: normal; color: var(--text); }
.eb-bar.moving em { color: #ff7aa8; }
.eb-bar span { font: 10px var(--cond); color: var(--dim); text-transform: uppercase; }
.eb-bar i { position: relative; width: 17px; height: 78px; background: url(skin/hud/power-track.png) center / 100% 100%; }
.eb-bar i b { position: absolute; left: 2px; right: 2px; bottom: 1px; height: calc((100% - 2px) * var(--lo, 0)); background: url(skin/hud/power-fill.png) bottom / 100% 76px; transition: height 0.25s; }
.eb-bar i s { position: absolute; left: 2px; right: 2px; bottom: calc(1px + (100% - 2px) * var(--lo, 0)); height: calc((100% - 2px) * (var(--hi, 0) - var(--lo, 0)));
  background: url(skin/hud/power-target.png) bottom / 100% 76px; transition: bottom 0.25s, height 0.25s; }
.eb-bar i u { position: absolute; left: 0; width: 17px; height: 12px; bottom: calc(1px + (100% - 2px) * var(--t, 0) - 6px); background: url(skin/hud/power-handle.png) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 2px #000); }
.eb-bar:hover i u { filter: drop-shadow(0 0 4px var(--accent)); }
.eb-grp .ico { width: 22px; height: 24px; background: center / contain no-repeat; opacity: 0.85; }
.eb-grp .ico.weapons { background-image: url(skin/hud/power-weapons.png); }
.eb-grp .ico.shields { background-image: url(skin/hud/power-shields.png); }
.eb-grp .ico.engines { background-image: url(skin/hud/power-engines.png); }
.eb-grp .ico.auxiliary { background-image: url(skin/hud/power-auxiliary.png); }
.eb-presets { gap: 4px; padding-bottom: 26px; }
button.preset.defense::before { background-image: url(skin/hud/preset-defense.png); }
button.preset.defense:hover::before { background-image: url(skin/hud/preset-defense-over.png); }
button.preset.defense:active::before { background-image: url(skin/hud/preset-defense-down.png); }
button.preset.speed::before { background-image: url(skin/hud/preset-speed.png); }
button.preset.speed:hover::before { background-image: url(skin/hud/preset-speed-over.png); }
button.preset.speed:active::before { background-image: url(skin/hud/preset-speed-down.png); }
.eb-alloc { font: 12px var(--cond); color: var(--dim); padding-left: 4px; }
.eb-alloc.warn { color: var(--warn); white-space: normal; }
.eb-alloc.over { color: var(--warn, #ffc448); padding-left: 24px; background: url(skin/hud/power-overload.png) left center / 12px 20px no-repeat; }
.eb-tray { display: flex; align-items: center; gap: 4px; }
.eb-officer { flex: none; width: 50px; height: 59px; margin-right: 4px; background: url(skin/hud/eng-officer.png) center / 100% 100% no-repeat, url(skin/hud/eng-emblem.png) 2px 2px / 37px 37px no-repeat; }
button.eb-pow { position: relative; flex: none; width: 41px; height: 54px; padding: 0; border: 0; border-radius: 3px; background: var(--art) center / 100% 100% no-repeat; cursor: pointer; }
button.eb-pow:hover:not(:disabled) { box-shadow: 0 0 0 1px var(--accent), 0 0 8px rgba(76, 196, 255, 0.6); }
button.eb-pow:disabled { cursor: default; filter: grayscale(0.7) brightness(0.6); }
button.eb-pow.cooling:disabled, button.eb-pow.on { filter: none; }
button.eb-pow.on { box-shadow: 0 0 0 1px #ffd36a, 0 0 9px rgba(255, 200, 90, 0.75); }
button.eb-pow .cd { position: absolute; inset: 0; border-radius: 3px; display: none; background: conic-gradient(rgba(0, 0, 0, 0.7) calc(var(--cd, 0) * 360deg), rgba(0, 0, 0, 0.25) 0); }
button.eb-pow.cooling .cd { display: block; }
button.eb-pow em { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font: 600 16px var(--cond); font-style: normal; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
button.eb-pow.on em { color: #ffd36a; }
button.eb-pow kbd { position: absolute; left: 2px; top: 1px; font: 10px var(--cond); color: var(--text); text-shadow: 0 1px 2px #000; }
.eb-sys { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.eb-row { display: flex; align-items: center; gap: 5px; padding: 1px 0; }
.eb-row .nm { width: 72px; flex: none; font-weight: 600; }
.eb-row .st { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 12px var(--cond); color: var(--dim); }
.eb-row.hit .nm, .eb-row.hit .st { color: var(--bad); }
.eb-row.fixing .st { color: #ffd36a; }
.eb-row .op { padding: 1px 10px 2px; font-size: 11px; }
.eb-core .op.alarm, #eng-bar .op.alarm { border-image: url(skin/btn-blue-idle.png) 10 12 fill / 7px 9px; filter: hue-rotate(160deg) saturate(1.5); color: #fff; text-shadow: 0 1px 2px #000; animation: ebalarm 0.9s infinite alternate; }
@keyframes ebalarm { to { filter: hue-rotate(160deg) saturate(1.5) brightness(1.35); } }
.eb-strain { flex: 1; display: flex; align-items: center; gap: 6px; }
.eb-strain i { flex: 1; height: 8px; background: rgba(0, 0, 0, 0.55); border-radius: 2px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.eb-strain b { display: block; height: 100%; width: calc(100% * var(--p, 0)); background: linear-gradient(#a8e6ff, #3aa0d8); transition: width 0.3s; }
.eb-strain.warn b { background: linear-gradient(#ffe6a8, #e0a030); }
.eb-strain.bad b { background: linear-gradient(#ffb0a0, #e04030); }
.eb-strain em { font: 11px var(--cond); font-style: normal; color: var(--text); min-width: 64px; }
.eb-strain.bad em { color: var(--bad); }
/* STO's warning bands either side of a straining or breaching core, under the top bar in the middle. */
#eng-warn { position: fixed; left: 50%; top: 46px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 12px; pointer-events: none;
  font: 600 14px var(--ui); letter-spacing: 0.06em; color: #ffd36a; text-shadow: 0 1px 2px #000, 0 0 6px #000; white-space: nowrap; }
#eng-warn i { width: 118px; height: 20px; background: url(skin/hud/warn-yellow.png) center / 100% 100% no-repeat; }
#eng-warn i:last-child { transform: scaleX(-1); }
#eng-warn.red { color: #ff8070; animation: ebwarn 0.8s infinite alternate; }
#eng-warn.red i { background-image: url(skin/hud/warn-red.png); }
@keyframes ebwarn { to { opacity: 0.55; } }
/* The repair seal: a small window in the middle of the view. */
#seal { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); }
#seal .seal-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 22px 14px; border: 1px solid transparent; border-image: url(skin/window.png) 32 fill / 16px; }
#seal b#seal-title { font: 600 15px var(--ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--title); }
#seal .seal-help, #seal .seal-read { font: 12px var(--cond); color: var(--dim); }
#seal .seal-read b { color: var(--text); }
#seal canvas { width: 320px; height: 44px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-hi); border-radius: 3px; }
#seal .seal-btns { display: flex; gap: 8px; }

/* The Science officer's window (science mode): STO's Sensor Analysis over a spectrum of the four sensor bands, each
   contact a peak on its band that rises as the gain nears what it takes to resolve it; the contacts in range; the
   Science officer's tray (frame, emblem, powers with the deflector's cooldown sweep); the anomaly. Top left like the
   engineer's. Faint contacts are marked out in space with STO's sensor ring. The resonance array's popup is the seal's
   box. */
#sci-bar { position: fixed; left: 8px; top: 44px; z-index: 6; display: flex; flex-direction: column; gap: 5px; width: 432px; box-sizing: border-box;
  max-height: calc(70% - 52px); overflow-y: auto; padding: 8px 14px 9px; border: 1px solid transparent; border-image: url(skin/window.png) 32 fill / 16px;
  font-size: 12px; white-space: nowrap; }
#sci-bar .gb-head { display: flex; align-items: center; gap: 12px; padding-bottom: 2px; }
#sci-bar .gb-head b { font: 600 14px var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--title); }
#sci-bar .gb-head span { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
#sci-bar .gb-row { display: flex; align-items: center; gap: 5px; }
#sci-bar .k { width: 62px; flex: none; font: 11px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
#sci-bar .gb-row .op { padding: 1px 10px 2px; font-size: 11px; }
#sci-bar .op.on { border-image-source: url(skin/btn-sel.png); color: var(--accent-ink); font-weight: 600; }
#sci-bar .gb-keys { font: 11px var(--cond); color: var(--dim); padding-top: 2px; white-space: normal; line-height: 1.35; }
.sb-analysis { display: flex; flex-direction: column; gap: 4px; }
.sb-title { display: flex; align-items: center; gap: 6px; font: 600 11px var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--title); }
.sb-title i { width: 31px; height: 23px; background: url(skin/hud/sensor-frame-off.png) center / 100% 100% no-repeat; opacity: 0.8; }
#sci-bar.active .sb-title i { background-image: url(skin/hud/sensor-frame.png); }
.sb-title span { flex: 1; text-align: right; font-weight: 400; color: var(--dim); letter-spacing: 0.04em; }
#sb-spectrum { width: 400px; height: 112px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-hi); cursor: pointer; background: rgba(0, 0, 0, 0.45); }
.sb-bands { display: flex; gap: 4px; }
.sb-bands .op { min-width: 74px; }
#sb-gain { flex: 1; accent-color: var(--accent); }
#sci-bar .gb-row em { width: 26px; font: 600 12px var(--cond); font-style: normal; color: var(--text); text-align: right; }
.sb-contacts { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sb-contact { display: flex; align-items: center; gap: 6px; padding: 1px 4px; cursor: pointer; border-radius: 2px; }
.sb-contact:hover { background: rgba(76, 196, 255, 0.08); }
.sb-contact.picked { background: rgba(76, 196, 255, 0.16); box-shadow: inset 2px 0 0 var(--accent); }
.sb-contact .nm { flex: none; width: 112px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.sb-contact.faint .nm { color: #c9a6ff; font-style: italic; }
.sb-contact .st { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: right; font: 12px var(--cond); color: var(--dim); }
.sb-contact.faint .st { color: #b993ff; }
.sb-contacts .none { font: 12px var(--cond); color: var(--dim); padding: 2px 4px; white-space: normal; }
.sb-note { font: 12px var(--cond); color: var(--text); white-space: normal; min-height: 15px; }
.sb-note.bad { color: var(--bad); }
.sb-note.good { color: #8fe3a0; }
.eb-officer.sci { background-image: url(skin/hud/sci-officer.png), url(skin/hud/sci-emblem.png); }
.sb-anomaly .st { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 12px var(--cond); color: var(--dim); }
.sb-anomaly.live .st { color: #ffd36a; }
/* a faint contact out in space: STO's sensor ring around where active sensors put it */
/* (three.js places the element with an inline transform: the ring that pulses is a child) */
.ghost-mark { width: 54px; height: 54px; pointer-events: auto; cursor: pointer; }
.ghost-mark i { position: absolute; inset: 0; background: url(skin/hud/sensor-ring.png) center / 100% 100% no-repeat;
  filter: sepia(1) hue-rotate(215deg) saturate(3) brightness(0.9); opacity: 0.55; animation: ghostpulse 1.6s ease-in-out infinite alternate; }
.ghost-mark span { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; font: 11px var(--cond); color: #d8c2ff; text-shadow: 0 1px 2px #000; }
.ghost-mark.picked i { opacity: 0.95; animation: none; filter: sepia(1) hue-rotate(215deg) saturate(4) brightness(1.2) drop-shadow(0 0 6px #b48cff); }
@keyframes ghostpulse { from { opacity: 0.3; transform: scale(0.94); } to { opacity: 0.7; transform: scale(1.04); } }
/* The damage-control window (damage control mode): the ship's integrity, a card per crisis (STO's ship-injury art,
   deck, severity, who is on it and what happens next), the parties, the drill. The crises are marked on our own ship
   out in space at their decks (.dc-mark). */
#dc-bar { position: fixed; left: 8px; top: 44px; z-index: 6; display: flex; flex-direction: column; gap: 5px; width: 432px; box-sizing: border-box;
  max-height: calc(70% - 52px); overflow-y: auto; padding: 8px 14px 9px; border: 1px solid transparent; border-image: url(skin/window.png) 32 fill / 16px;
  font-size: 12px; white-space: nowrap; }
#dc-bar .gb-head { display: flex; align-items: center; gap: 12px; padding-bottom: 2px; }
#dc-bar .gb-head b { font: 600 14px var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--title); }
#dc-bar .gb-head span { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.dc-state { font: 600 13px var(--cond); color: var(--text); }
.dc-state.alert { color: #ff8a6a; }
.dc-state.drill { color: #ffd36a; }
#dc-bar .gb-row { display: flex; align-items: center; gap: 6px; }
#dc-bar .gb-row .op, #dc-bar .dc-card .op, #dc-bar .dc-team .op { padding: 1px 10px 2px; font-size: 11px; }
#dc-bar .gb-keys { font: 11px var(--cond); color: var(--dim); padding-top: 2px; white-space: normal; line-height: 1.35; }
.dc-integ { display: flex; gap: 14px; font: 12px var(--cond); color: var(--dim); }
.dc-integ b { color: var(--text); font-weight: 600; }
.dc-crises { display: flex; flex-direction: column; gap: 3px; padding: 3px 0; border-top: 1px solid var(--line); }
.dc-card { display: grid; grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto auto; column-gap: 7px; align-items: center; padding: 3px 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.25); cursor: pointer; }
.dc-card:hover { box-shadow: inset 0 0 0 1px var(--line-hi); }
.dc-card > i { grid-row: 1 / 4; width: 34px; height: 44px; background: center / 100% 100% no-repeat; }
.dc-card .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.dc-card .nm kbd { font: 10px var(--cond); color: var(--dim); margin-right: 4px; }
.dc-card .sev { grid-column: 2 / 3; height: 6px; border-radius: 2px; background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.dc-card .sev b { display: block; height: 100%; width: calc(100% * var(--p, 0)); background: linear-gradient(#ffe6a8, #e0a030); transition: width 0.4s; }
.dc-card.hot .sev b { background: linear-gradient(#ffb3a0, #e04a30); }
.dc-card.peak .sev b { animation: dcblink 0.6s infinite alternate; }
@keyframes dcblink { to { opacity: 0.4; } }
.dc-card .st { grid-column: 2 / 4; font: 12px var(--cond); color: var(--dim); white-space: normal; line-height: 1.25; }
.dc-card.worked .st { color: #8fe3a0; }
.dc-card.peak .st { color: var(--bad); }
.dc-card .op { grid-row: 1 / 3; grid-column: 3 / 4; }
.dc-crises .none { font: 12px var(--cond); color: var(--dim); padding: 2px 4px; white-space: normal; }
.dc-teams { display: flex; flex-direction: column; gap: 1px; padding: 3px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dc-team { display: flex; align-items: center; gap: 6px; padding: 1px 2px; }
.dc-team > i { flex: none; width: 18px; height: 23px; background: url(skin/hud/eng-team.png) center / 100% 100% no-repeat; }
.dc-team .nm { width: 52px; flex: none; font-weight: 600; }
.dc-team .st { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 12px var(--cond); color: var(--dim); }
.dc-team.busy .st { color: #8fe3a0; }
.dc-team.hurt .st { color: var(--bad); }
.dc-team.off { opacity: 0.45; }
.dc-drill-note { font: 12px var(--cond); color: var(--dim); white-space: normal; }
/* a crisis on our own ship: its injury art in a ring that pulses faster as it worsens, the deck and the severity under it */
.dc-mark { width: 38px; height: 48px; pointer-events: auto; cursor: pointer; }
.dc-mark i { position: absolute; inset: 0; background: center / 100% 100% no-repeat; border-radius: 4px; box-shadow: 0 0 0 2px var(--ring, #ff7a4a), 0 0 12px var(--ring, #ff7a4a);
  animation: dcpulse var(--beat, 1.4s) ease-in-out infinite alternate; }
.dc-mark.worked i { box-shadow: 0 0 0 2px #8fe3a0, 0 0 10px #8fe3a0; animation: none; }
.dc-mark span { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 2px; white-space: nowrap; font: 11px var(--cond); color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.dc-mark b { position: absolute; right: -9px; top: -9px; width: 18px; height: 23px; background: url(skin/hud/eng-team.png) center / 100% 100% no-repeat; display: none; }
.dc-mark.team b { display: block; }
@keyframes dcpulse { from { opacity: 0.55; transform: scale(0.94); } to { opacity: 1; transform: scale(1.06); } }
#reso { position: fixed; inset: 0; z-index: 25; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); }
#reso .seal-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 22px 14px; border: 1px solid transparent; border-image: url(skin/window.png) 32 fill / 16px; max-width: 380px; }
#reso b#reso-title { font: 600 15px var(--ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--title); }
#reso .seal-help, #reso .seal-read { font: 12px var(--cond); color: var(--dim); text-align: center; white-space: normal; }
#reso .seal-read b { color: var(--text); }
#reso canvas { width: 320px; height: 200px; cursor: none; box-shadow: inset 0 0 0 1px var(--line-hi); border-radius: 3px; background: rgba(0, 0, 0, 0.5); }
#reso .seal-btns { display: flex; gap: 8px; }

/* The bridge console screens are LCARS, styled in lcars.css. */