/* Game UI kit (U1b). Uses only the :root variables from base.html. Nothing links this yet except hud_kit.html.
   Keyframes animate transform and opacity only (meter bars use scaleX). Timings are starting values. */

/* ── Panel ─────────────────────────────────────────────────────────────────── */
.hud-panel { position: relative; background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); color: var(--text2); font-size: var(--fs-body); line-height: var(--lh-body); }
.hud-panel--float { background: var(--hud-panel); box-shadow: var(--shadow); }
.hud-brk { position: absolute; width: 14px; height: 14px; border: 0 solid var(--amber); pointer-events: none;
  opacity: 0; animation: hud-brk-in 340ms ease-out forwards; }
.hud-brk--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; transform-origin: top left; }
.hud-brk--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; transform-origin: top right; }
.hud-brk--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; transform-origin: bottom left; }
.hud-brk--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; transform-origin: bottom right; }
@keyframes hud-brk-in { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: scale(1); } }

.hud-head { font-family: var(--display); font-weight: 700; font-size: var(--fs-header); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text1); line-height: 1.35; }
.hud-cap { display: block; font-family: var(--sans); font-weight: 400; font-size: var(--fs-caption); letter-spacing: 0;
  text-transform: none; color: var(--text3); margin-top: 2px; }

/* ── Alert ─────────────────────────────────────────────────────────────────── */
.hud-alert { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border2); border-left-width: 4px; border-radius: var(--radius); font-size: var(--fs-body);
  color: var(--text1); background: var(--bg3); animation: hud-drop 380ms ease-out, hud-pulse 600ms ease-in-out 380ms 2; }
.hud-alert--red { background: var(--alert-red-bg); border-color: var(--red); }
.hud-alert--amber { background: var(--alert-amber-bg); border-color: var(--amber); color: var(--amber-text); }
.hud-alert--info { background: var(--bg3); border-color: var(--blue); }
.hud-alert-tag { font-family: var(--display); font-weight: 700; font-size: var(--fs-caption); letter-spacing: .14em;
  text-transform: uppercase; padding: 1px 8px; border-radius: 3px; color: var(--bg); background: var(--blue); white-space: nowrap; }
.hud-alert--red .hud-alert-tag { background: var(--red); }
.hud-alert--amber .hud-alert-tag { background: var(--amber); }
.hud-alert-text { flex: 1; min-width: 0; }
.hud-alert-act { font: inherit; font-weight: 600; color: var(--text1); background: transparent; border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 4px 12px; cursor: pointer; }
.hud-alert-act:hover { background: var(--bg4); }
.hud-alert.is-out { opacity: 0; transform: translateY(-12px); transition: opacity 200ms, transform 200ms; }
@keyframes hud-drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hud-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }

/* ── Brief ─────────────────────────────────────────────────────────────────── */
.hud-brief { max-width: 560px; margin: 0 auto; background: var(--hud-panel); border: 1px solid var(--amber);
  border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow); color: var(--text1);
  font-size: var(--fs-brief); line-height: var(--lh-body); animation: hud-rise 340ms ease-out; }
@keyframes hud-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ── Comms feed ────────────────────────────────────────────────────────────── */
.hud-comms { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.hud-msg { position: relative; background: var(--bg3); border: 1px solid var(--border); border-left: 3px solid var(--blue);
  border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-size: var(--fs-body); color: var(--text2);
  animation: hud-slide 340ms ease-out; }
.hud-msg--warn { border-left-color: var(--amber); }
.hud-msg--bad { border-left-color: var(--red); }
.hud-msg--good { border-left-color: var(--green2); }
.hud-msg-id { font-family: var(--mono); font-weight: 500; font-size: var(--fs-caption); color: var(--blue); margin-right: var(--space-2); }
.hud-msg-text { color: var(--text1); }
.hud-msg-grade { display: block; font-family: var(--mono); font-weight: 500; font-size: var(--fs-caption); color: var(--text3); margin-top: 2px; }
.hud-new { font-family: var(--display); font-weight: 700; font-size: var(--fs-caption); letter-spacing: .14em; color: var(--amber);
  margin-left: var(--space-2); }
@keyframes hud-slide { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }

/* ── Meter ─────────────────────────────────────────────────────────────────── */
.hud-meter { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); font-size: var(--fs-body); }
.hud-meter-lbl { color: var(--text2); }
.hud-meter-val { font-family: var(--mono); font-weight: 500; color: var(--text1); }
.hud-meter-track { grid-column: 1 / -1; height: 8px; background: var(--bg4); border-radius: 4px; overflow: hidden; }
.hud-meter-bar { height: 100%; width: 100%; background: var(--blue); transform-origin: left center; transform: scaleX(0);
  transition: transform 800ms cubic-bezier(.2, .8, .2, 1); }
.hud-meter-why { grid-column: 1 / -1; font-size: var(--fs-caption); color: var(--text3); }
.hud-delta { position: absolute; right: 0; top: -6px; font-family: var(--mono); font-weight: 500; font-size: var(--fs-caption);
  padding: 0 6px; border-radius: 3px; background: var(--bg4); color: var(--green2); opacity: 0; pointer-events: none; }
.hud-delta--neg { color: var(--red); }
.hud-delta.is-on { animation: hud-delta 2600ms ease-out forwards; }
@keyframes hud-delta { 0% { opacity: 0; transform: translateY(6px); } 12% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-10px); } }

/* ── Objective pips ────────────────────────────────────────────────────────── */
.hud-pips { display: flex; gap: var(--space-2); list-style: none; }
.hud-pips li { width: 14px; height: 14px; border: 2px solid var(--text3); border-radius: 50%; }
.hud-pips li.is-done { background: var(--green2); border-color: var(--green2); }
.hud-pips li.is-lost { background: var(--red); border-color: var(--red); }

/* ── Unit card / chip ──────────────────────────────────────────────────────── */
.hud-unit { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) var(--space-3);
  font-size: var(--fs-body); color: var(--text2); }
.hud-unit-id { font-family: var(--mono); font-weight: 500; color: var(--text1); }
.hud-unit-status { font-size: var(--fs-caption); color: var(--text3); }
.hud-unit-exp { height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden; margin-top: var(--space-1); }
.hud-unit-exp > i { display: block; height: 100%; width: 100%; background: var(--amber); transform-origin: left center; transform: scaleX(var(--exp, 0)); }
.hud-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; padding: 0 var(--space-3);
  background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); font-family: var(--mono); font-weight: 500;
  font-size: var(--fs-caption); color: var(--text1); }
.hud-chip.is-hot { border-color: var(--red); color: var(--red); }

/* ── Order row ─────────────────────────────────────────────────────────────── */
.hud-order { display: grid; grid-template-columns: auto 1fr auto; gap: 0 var(--space-3); align-items: center; min-height: 44px;
  padding: var(--space-2) var(--space-3); background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: var(--fs-body); color: var(--text1); }
.hud-order-detail { grid-column: 2; font-size: var(--fs-caption); color: var(--text3); }
.hud-order-cost { grid-column: 3; grid-row: 1; font-family: var(--mono); font-weight: 500; color: var(--amber); }
.hud-order--danger { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }

/* ── Resolve ───────────────────────────────────────────────────────────────── */
.hud-resolve { font-family: var(--display); font-weight: 700; font-size: var(--fs-resolve); letter-spacing: .14em; text-transform: uppercase;
  min-height: 44px; padding: var(--space-3) var(--space-6); color: var(--bg); background: var(--amber); border: 0;
  border-radius: var(--radius); cursor: pointer; opacity: .55; transition: opacity var(--transition), transform var(--transition); }
.hud-resolve.is-armed { opacity: 1; animation: hud-armed 1400ms ease-in-out infinite; }
@keyframes hud-armed { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* ── Phase ticker ──────────────────────────────────────────────────────────── */
.hud-ticker { display: flex; gap: var(--space-1); list-style: none; font-family: var(--display); font-weight: 600;
  font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; }
.hud-ticker li { padding: 2px var(--space-3); color: var(--text3); background: var(--bg3); border-radius: 3px; }
.hud-ticker li.is-done { color: var(--text2); }
.hud-ticker li.is-now { color: var(--bg); background: var(--amber); }

/* ── Turn overlay ──────────────────────────────────────────────────────────── */
.hud-turn { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(20, 22, 26, .94); opacity: 0; pointer-events: none; }
.hud-turn.is-on { animation: hud-turn 1150ms ease-in-out forwards; pointer-events: auto; }
.hud-turn-n { font-family: var(--display); font-weight: 700; font-size: 64px; letter-spacing: .2em; color: var(--amber); }
.hud-turn-sum { font-size: var(--fs-brief); color: var(--text1); margin-top: var(--space-3); max-width: 560px; text-align: center; }
@keyframes hud-turn { 0% { opacity: 0; transform: translateX(-6%); } 25% { opacity: 1; transform: translateX(0); }
  75% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(6%); } }

/* ── Rotate card and the landscape rule ────────────────────────────────────── */
.hud-rotate { display: none; position: fixed; inset: 0; z-index: 2000; background: var(--bg); color: var(--text1);
  flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); text-align: center; }
.hud-rotate h2 { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: .14em; text-transform: uppercase; }
.hud-rotate p { font-size: var(--fs-body); color: var(--text2); max-width: 360px; }
.hud-rotate a { color: var(--blue); }
.hud-rotate-icon { width: 56px; height: 36px; border: 3px solid var(--amber); border-radius: 6px; animation: hud-tilt 1800ms ease-in-out infinite; }
.hud-rotate-fs { display: none; min-height: 44px; padding: 0 var(--space-5); font: inherit; font-weight: 600; color: var(--bg);
  background: var(--amber); border: 0; border-radius: var(--radius); cursor: pointer; }
.hud-rotate-fs.is-avail { display: inline-block; }
.hud-rotate--demo { display: flex; position: static; border: 1px solid var(--border2); border-radius: var(--radius-lg); }
@keyframes hud-tilt { 0%, 30% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (orientation: portrait) and (max-width: 900px) {
  .hud-game > *:not(.hud-rotate) { display: none !important; }
  .hud-game > .hud-rotate { display: flex; }
}

/* ── Reduced motion: snap everything ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hud-brk, .hud-alert, .hud-brief, .hud-msg, .hud-resolve.is-armed, .hud-rotate-icon { animation: none !important; }
  .hud-brk { opacity: 1; }
  .hud-meter-bar, .hud-alert.is-out { transition: none !important; }
  .hud-delta.is-on { animation: none !important; opacity: 1; }
  .hud-turn.is-on { animation: none !important; opacity: 1; }
}

/* ── In-app confirm (issue 192) ─────────────────────────────────────────────────── */
.hud-confirm-veil { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); background: rgba(20, 22, 26, .8); }
.hud-confirm { width: min(440px, 100%); max-height: 80vh; overflow: auto; padding: var(--space-4) var(--space-5); border-color: var(--amber); }
.hud-confirm-t { font-family: var(--display); font-weight: 700; font-size: var(--fs-header); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.hud-confirm-m { margin: var(--space-3) 0 var(--space-4); color: var(--text1); font-size: var(--fs-body); line-height: var(--lh-body); }
.hud-confirm-row { display: flex; justify-content: flex-end; gap: var(--space-3); }
.hud-confirm-row .hud-btn { min-height: 44px; min-width: 96px; }
.hud-confirm-yes { background: var(--amber); color: var(--bg); border-color: var(--amber); }
.hud-confirm-yes.is-danger { background: var(--red); border-color: var(--red); color: var(--text1); }
.hud-confirm .hud-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* U3a chrome pattern library (HCI-reference section 7): gw-header slots, gw-commit, gw-help.
   Slots are fixed: left (scenario + progress) | situation | grow | chips | Brief | How to play. An empty slot keeps its place. */
.gw-header .gw-slot { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; white-space: nowrap; }
.gw-header .gw-slot--situ { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.gw-header .gw-slot--chips { gap: var(--space-3); min-width: 0; }
.gw-header .gw-slot--brief, .gw-header .gw-slot--help { flex: none; }
.gw-commit { font-family: var(--display); font-weight: 700; font-size: var(--fs-resolve); letter-spacing: .14em; text-transform: uppercase;
  min-height: 44px; padding: var(--space-3) var(--space-6); color: var(--bg); background: var(--amber); border: 0;
  border-radius: var(--radius); cursor: pointer; }
.gw-commit:disabled { opacity: .55; cursor: default; }
.gw-commit:focus-visible { outline: 2px solid var(--text1); outline-offset: 2px; }

/* U3b chrome pattern library: gw-tabs, gw-transport, gw-filters, gw-voice vs gw-chrome-note, gw-cost, gw-statusbar.
   Three grammars in the bottom strip, never mixed in one row: tabs (underline), filters (pills, inside their tab), transport (one right-aligned cluster). */
.gw-tabs { gap: 2px; }
.gw-transport { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; }
.gw-transport .tl-btns { gap: var(--space-2); }
.gw-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.gw-filters-lbl { font-family: var(--mono); font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--text4); margin-right: var(--space-1); }
/* a watchstander speaks (quoted, source badge, may be wrong); the system guides (unquoted, neutral, never wrong) */
.gw-voice { border-left-style: solid; }
.gw-voice .hud-msg-id { padding: 0 6px; border: 1px solid var(--blue); border-radius: 3px; }
.gw-chrome-note { color: var(--text2); font-style: normal; border-left: 2px dashed var(--border2); padding-left: var(--space-3); }
.gw-chrome-note::before, .gw-chrome-note::after { content: none; }
.gw-cost { font-family: var(--mono); font-weight: 500; font-size: var(--fs-caption); letter-spacing: .04em; color: var(--text3); margin-left: var(--space-2); }
.gw-statusbar { flex: 1 1 auto; font-family: var(--mono); font-size: var(--fs-caption); color: var(--text3); letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#hud-say:not(:empty) + .gw-statusbar, .arming .gw-statusbar { display: none; }   /* one job at a time: hint (first run) or title + count + confidence */