/* hud.css -- styles for Hud (core/hud.js). Dark glass panels over the 3D scene. */
.hud { position: absolute; inset: 0; pointer-events: none; font: 13px/1.35 "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif; color: #e2e8f0; overflow: hidden; user-select: none; }
.hud * { box-sizing: border-box; }
.hud .panel { background: rgba(12, 18, 32, 0.74); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(2, 6, 23, 0.35); pointer-events: auto; }
.hud button { font: inherit; color: inherit; cursor: pointer; }

/* title */
.hud-title { position: absolute; left: 14px; top: 12px; display: flex; gap: 10px; align-items: center; padding: 9px 14px 9px 10px; max-width: calc(100% - 28px); }
.hud-logo { height: 34px; padding: 4px 10px; border-radius: 9px; background: #f8fafc; display: grid; place-items: center; flex: none; }
.hud-logo img { height: 26px; width: auto; display: block; }
.hud-title b { display: block; font-size: 14px; font-weight: 650; letter-spacing: 0.1px; white-space: nowrap; }
.hud-title small { display: block; color: #94a3b8; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* stats strip */
.hud-stats { position: absolute; right: 14px; top: 12px; display: flex; gap: 8px; max-width: calc(100% - 28px); }
.hud-stat { padding: 7px 12px; min-width: 92px; }
.hud-stat span { display: block; color: #94a3b8; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-stat b { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hud-stat b i { font-style: normal; font-size: 12px; color: #94a3b8; font-weight: 500; }
.hud-stat[data-k="prod"] b { color: #fbbf24; }
.hud-stat[data-k="bugs"] b { color: #fb7185; }
.hud-stat[data-k="friction"] b { color: #fdba74; }
.hud-stat[data-k="done"] b { color: #4ade80; }

/* milestone band */
.hud-band { position: absolute; left: 50%; top: 74px; transform: translate(-50%, -14px); opacity: 0; transition: opacity 0.35s, transform 0.35s; padding: 10px 26px; border-radius: 999px; font-size: 17px; font-weight: 650; text-align: center; max-width: min(92%, 760px); pointer-events: none; background: rgba(12, 18, 32, 0.86); border: 1px solid rgba(148, 163, 184, 0.3); box-shadow: 0 10px 40px rgba(2, 6, 23, 0.5); }
.hud-band.on { opacity: 1; transform: translate(-50%, 0); }
.hud-band small { display: block; font-size: 11.5px; font-weight: 500; color: #cbd5e1; margin-top: 1px; }
.hud-band.k-milestone { border-color: #fbbf24; background: linear-gradient(90deg, rgba(120, 53, 15, 0.92), rgba(30, 27, 75, 0.92)); }
.hud-band.k-good { border-color: #4ade80; }
.hud-band.k-bad { border-color: #f87171; background: rgba(127, 29, 29, 0.9); }

/* lower third caption */
.hud-caption { position: absolute; left: 50%; bottom: 112px; transform: translate(-50%, 10px); opacity: 0; transition: opacity 0.3s, transform 0.3s; padding: 9px 22px; border-radius: 12px; font-size: 16px; font-weight: 550; max-width: min(92%, 820px); text-align: center; pointer-events: none; background: rgba(2, 6, 23, 0.78); border: 1px solid rgba(148, 163, 184, 0.2); }
.hud-caption.on { opacity: 1; transform: translate(-50%, 0); }

/* roster */
.hud-roster { position: absolute; left: 14px; top: 78px; width: 232px; padding: 8px 6px; max-height: calc(100% - 210px); overflow-y: auto; overflow-x: hidden; }
.hud-roster h4 { margin: 2px 8px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; color: #94a3b8; display: flex; justify-content: space-between; align-items: center; }
.hud-roster h4 button { background: none; border: 0; color: #94a3b8; padding: 0 2px; font-size: 14px; line-height: 1; }
.hud-row { display: grid; grid-template-columns: 10px 1fr; gap: 9px; align-items: start; padding: 5px 8px; border-radius: 9px; cursor: pointer; }
.hud-row:hover { background: rgba(148, 163, 184, 0.12); }
.hud-row > div { min-width: 0; }
.hud-row i { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); }
.hud-row b { display: block; font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-row small { display: block; font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-row[data-s="work"] small { color: #86efac; }
.hud-row[data-s="work"] i { animation: hudpulse 1.4s infinite; }
.hud-row[data-s="ready"] small { color: #67e8f9; }
.hud-row[data-s="ready"] i { box-shadow: 0 0 0 2px rgba(103, 232, 249, 0.85); }
.hud-row[data-s="todo"] small { color: #a5b4fc; }
.hud-row[data-s="todo"] i { box-shadow: none; outline: 1.5px dashed #a5b4fc; outline-offset: 2px; }
.hud-row[data-s="blocked"] small { color: #fca5a5; }
.hud-row[data-s="warn"] small { color: #fcd34d; }
@keyframes hudpulse { 0% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08), 0 0 0 0 rgba(134, 239, 172, 0.7); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08), 0 0 0 9px rgba(134, 239, 172, 0); } }
.hud-roster.min { width: auto; }
.hud-roster.min .hud-row, .hud-roster.min .hud-rowwrap { display: none; }

/* view buttons slot */
.hud-views { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 999px; pointer-events: auto; max-width: calc(100% - 20px); }
.hud-views:empty { display: none; }
.hud-views button { background: transparent; border: 0; padding: 6px 14px; border-radius: 999px; color: #cbd5e1; font-weight: 550; white-space: nowrap; }
.hud-views button:hover { background: rgba(148, 163, 184, 0.16); }
.hud-views button.on { background: #e2e8f0; color: #0f172a; }
.hud-extra { position: absolute; right: 14px; bottom: 84px; display: flex; gap: 6px; pointer-events: auto; }

/* control bar */
.hud-bar { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.hud .hud-play { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #e2e8f0; color: #0f172a; display: grid; place-items: center; flex: none; }
.hud .hud-play:hover { background: #fff; }
.hud-play svg { width: 16px; height: 16px; }
.hud-speeds { display: flex; background: rgba(148, 163, 184, 0.12); border-radius: 999px; padding: 2px; flex: none; }
.hud-speeds button { border: 0; background: transparent; padding: 5px 11px; border-radius: 999px; color: #cbd5e1; font-weight: 600; font-variant-numeric: tabular-nums; }
.hud-speeds button.on { background: #6366f1; color: #fff; }
.hud-slider { position: relative; flex: 1; height: 38px; min-width: 120px; }
.hud-slider input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; z-index: 2; }
.hud-slider input::-webkit-slider-runnable-track { height: 38px; background: transparent; }
.hud-slider input::-moz-range-track { height: 38px; background: transparent; }
.hud-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.5); }
.hud-slider input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.5); }
.hud-track { position: absolute; left: 0; right: 0; top: 17px; height: 4px; border-radius: 2px; background: rgba(148, 163, 184, 0.25); }
.hud-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(90deg, #6366f1, #22d3ee); width: 0; }
.hud-ticks { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 3; pointer-events: none; }
.hud-tick { position: absolute; top: 6px; width: 3px; height: 12px; margin-left: -1px; border-radius: 2px; background: #94a3b8; pointer-events: auto; cursor: pointer; }
.hud-tick.t-DEPLOY-PROD { background: #fbbf24; top: 2px; height: 18px; width: 4px; box-shadow: 0 0 8px #fbbf24; }
.hud-tick.t-CLOSEOUT { background: #4ade80; top: 3px; height: 16px; }
.hud-tick.fail { background: #f87171; }
.hud-tick.t-RELEASE { background: #38bdf8; }
.hud-tick.t-GATE { background: #c084fc; }
.hud-clock { text-align: right; flex: none; min-width: 124px; font-variant-numeric: tabular-nums; }
.hud-clock b { display: block; font-size: 19px; font-weight: 650; letter-spacing: 0.3px; }
.hud-clock small { display: block; color: #94a3b8; font-size: 11px; }
.hud-clock small.gap { color: #fbbf24; }
.hud-live { flex: none; border: 1px dashed rgba(148, 163, 184, 0.45); background: transparent; border-radius: 999px; padding: 5px 12px; color: #64748b; display: flex; align-items: center; gap: 6px; cursor: not-allowed; }
.hud-live i { width: 8px; height: 8px; border-radius: 50%; background: #64748b; }

/* flash */
.hud-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
.hud-flash.bad { opacity: 1; transition: opacity 0.08s; box-shadow: inset 0 0 120px 30px rgba(239, 68, 68, 0.55); }
.hud-flash.good { opacity: 1; transition: opacity 0.08s; box-shadow: inset 0 0 120px 30px rgba(74, 222, 128, 0.35); }

/* small screens: stack things, hide roster by default */
@media (max-width: 920px) {
  .hud-stats { top: 72px; left: 14px; right: 14px; max-width: none; } .hud-stat { flex: 1; }
  .hud-stat { min-width: 0; padding: 5px 9px; } .hud-stat b { font-size: 15px; }
  .hud-roster { top: auto; bottom: 150px; width: 210px; max-height: 38%; }
  .hud-band { top: 132px; font-size: 14px; padding: 8px 16px; }
  .hud-bar { flex-wrap: wrap; gap: 8px 10px; padding: 9px 10px; left: 8px; right: 8px; bottom: 8px; }
  .hud-slider { order: 5; flex-basis: 100%; height: 26px; } .hud-slider input::-webkit-slider-thumb { margin-top: 6px; } .hud-track { top: 11px; }
  .hud-tick { top: 3px; height: 10px; }
  .hud-clock { margin-left: auto; min-width: 0; } .hud-clock b { font-size: 16px; }
  .hud-views { bottom: 118px; }
  .hud-extra { bottom: 160px; right: 8px; }
  .hud-caption { bottom: 150px; font-size: 14px; }
}
@media (max-width: 560px) {
  .hud-stats { top: 56px; right: 8px; left: 8px; } .hud-stat { flex: 1; } .hud-stat span { font-size: 9px; letter-spacing: 0.3px; }
  .hud-title { left: 8px; top: 8px; padding: 6px 10px 6px 8px; } .hud-title b { font-size: 12.5px; }
  .hud-roster { display: none; }
  .hud-title small { display: none; }
  .hud-band { top: 118px; }
  .hud-live { display: none; }
  .hud-speeds button { padding: 5px 8px; }
}