/* ============ ARMORY BAY 07 — olive & steel UI ============ */
@font-face { font-family: 'Black Ops One'; src: url('../fonts/black-ops-one.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Share Tech Mono'; src: url('../fonts/share-tech-mono.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('../fonts/saira-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('../fonts/saira-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Saira Condensed'; src: url('../fonts/saira-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --olive: #5b6146;
  --olive-d: #3c412f;
  --steel: #2b2f33;
  --steel-l: #434a50;
  --hazard: #e0b13a;
  --amber: #ffb36b;
  --holo: #6fd7e2;
  --alert: #e2543e;
  --ink: #10130e;
  --bone: #d8d4c4;
  --font-stencil: 'Black Ops One', 'Arial Black', sans-serif;
  --font-ui: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-mono: 'Share Tech Mono', 'Courier New', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #0b0d0a; }
body { font-family: var(--font-ui); color: var(--bone); -webkit-font-smoothing: antialiased; }
#app { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.hidden { display: none !important; }

/* ---------- boot / title ---------- */
.boot {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(91,97,70,.28), transparent 60%),
    linear-gradient(180deg, #14160f 0%, #0b0d0a 55%, #070806 100%);
  transition: opacity .6s ease;
}
.boot.fading { opacity: 0; pointer-events: none; }
.boot-inner { text-align: center; position: relative; padding: 0 24px; max-width: 720px; }
.boot-stencil {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 1.2em; text-indent: 1.2em;
  color: var(--hazard); border: 1px solid rgba(224,177,58,.45); display: inline-block;
  padding: 6px 14px 5px; margin-bottom: 26px; background: rgba(224,177,58,.06);
}
.boot-title {
  font-family: var(--font-stencil); font-weight: 400; font-size: clamp(44px, 8vw, 92px);
  line-height: .92; letter-spacing: .04em; color: var(--bone);
  text-shadow: 0 2px 0 #000, 0 0 42px rgba(224,177,58,.14);
}
.boot-title span { display: block; color: var(--hazard); }
.boot-sub {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .42em; text-indent: .42em;
  color: #8e917f; margin: 18px 0 34px;
}
.boot-meter { height: 6px; width: min(420px, 70vw); margin: 0 auto; border: 1px solid #3a3f38; background: #14160f; padding: 1px; }
.boot-bar { height: 100%; width: 0%; background: repeating-linear-gradient(90deg, var(--hazard) 0 8px, #7c6420 8px 10px); transition: width .25s ease; }
.boot-status { font-family: var(--font-mono); font-size: 11px; letter-spacing: .28em; color: #7d8272; margin-top: 12px; min-height: 15px; }
.boot-actions { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.boot-legend {
  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 34px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: #6f7466;
}
.boot-legend b { color: var(--bone); font-weight: 400; }
.boot-stripes {
  position: absolute; left: 0; right: 0; bottom: 0; height: 10px; opacity: .8;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 18px, #15170f 18px 36px);
}

/* ---------- buttons / chips ---------- */
.btn {
  font-family: var(--font-stencil); font-size: 15px; letter-spacing: .12em;
  color: var(--bone); background: linear-gradient(180deg, #3a4034, #23271d);
  border: 1px solid #59604c; border-bottom-color: #181b12; padding: 12px 26px;
  cursor: pointer; position: relative; transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.25); }
.btn:active { transform: translateY(1px); }
.btn-primary { color: #14160f; background: linear-gradient(180deg, #ecc251, #b78c1e); border-color: #8a6c16 #6d5410 #4a3a0c; }
.chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  color: var(--bone); background: rgba(20,22,15,.72); border: 1px solid #4c5240;
  padding: 7px 13px; cursor: pointer; transition: background .15s, color .15s;
}
.chip:hover { background: rgba(91,97,70,.5); }
.chip.active { background: var(--hazard); color: #14160f; border-color: var(--hazard); }
.chip-ghost { color: #9aa088; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
}
.hud-brand {
  font-family: var(--font-stencil); font-size: 15px; letter-spacing: .14em; color: var(--bone);
  text-shadow: 0 1px 0 #000; background: rgba(14,16,10,.55); border: 1px solid rgba(90,97,72,.5);
  border-left: 4px solid var(--hazard); padding: 7px 14px;
}
.hud-brand em { font-style: normal; color: var(--hazard); }
.hud-brand-mark { color: var(--hazard); }
.hud-modes { display: flex; gap: 8px; pointer-events: auto; }

.hint {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: #c9c4b2;
  background: rgba(14,16,10,.6); border: 1px solid rgba(90,97,72,.4); border-left: 3px solid var(--hazard);
  padding: 8px 12px; max-width: min(430px, 60vw); text-shadow: 0 1px 0 #000;
}
.hint b { color: var(--hazard); font-weight: 400; }

.crosshair {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px;
  transform: translate(-50%, -50%); pointer-events: none;
}
.crosshair::before, .crosshair::after { content: ''; position: absolute; background: rgba(216,212,196,.85); }
.crosshair::before { left: 6px; top: 0; width: 2px; height: 14px; }
.crosshair::after { left: 0; top: 6px; width: 14px; height: 2px; }
.crosshair.hot::before, .crosshair.hot::after { background: var(--hazard); }

/* ---------- tour bar ---------- */
.tour-bar {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 16px 16px; gap: 14px;
}
.tour-caption {
  font-family: var(--font-stencil); font-size: clamp(15px, 2.2vw, 22px); letter-spacing: .1em;
  color: var(--bone); text-shadow: 0 2px 0 #000, 0 0 26px rgba(0,0,0,.7);
  background: linear-gradient(90deg, rgba(14,16,10,.72), rgba(14,16,10,.18));
  border-left: 4px solid var(--hazard); padding: 10px 18px; max-width: 60vw;
}
.tour-caption small { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; color: var(--hazard); margin-bottom: 4px; }
.tour-meta { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.tour-dots { display: flex; gap: 6px; }
.tour-dots i { width: 9px; height: 9px; background: rgba(216,212,196,.25); border: 1px solid #4c5240; transform: rotate(45deg); }
.tour-dots i.on { background: var(--hazard); border-color: var(--hazard); }

/* ---------- spec plate ---------- */
.plate {
  position: absolute; top: 64px; right: 16px; width: min(330px, calc(100vw - 32px));
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgba(23,26,19,.92), rgba(13,15,10,.94));
  border: 1px solid #4c5240; border-top: 3px solid var(--hazard);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.5);
  padding: 12px 14px 10px;
  animation: plate-in .28s ease;
}
@keyframes plate-in { from { transform: translateX(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.plate-head { display: flex; justify-content: space-between; align-items: center; }
.plate-code {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .3em; color: var(--hazard);
  border: 1px solid rgba(224,177,58,.4); padding: 3px 8px; background: rgba(224,177,58,.07);
}
.plate-close { background: none; border: none; color: #9aa088; font-size: 22px; cursor: pointer; line-height: 1; padding: 0 2px; }
.plate-close:hover { color: var(--alert); }
.plate-name { font-family: var(--font-stencil); font-weight: 400; font-size: 21px; letter-spacing: .05em; color: var(--bone); margin: 10px 0 2px; }
.plate-class { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .22em; color: var(--holo); margin-bottom: 10px; }
.plate-rows { border-top: 1px dashed #3f4536; padding-top: 8px; }
.plate-rows .row { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 11.5px; padding: 3px 0; }
.plate-rows .row span:first-child { color: #7d8272; letter-spacing: .08em; }
.plate-rows .row span:last-child { color: var(--bone); text-align: right; }
.plate-status {
  margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  color: #9fe08a; border-top: 1px dashed #3f4536; padding-top: 8px;
}
.plate-status::before { content: '▸ '; color: var(--hazard); }
.plate-foot { margin-top: 10px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; color: #6f7466; }

/* ---------- help ---------- */
.help { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(7,8,6,.72); backdrop-filter: blur(3px); }
.help-card { background: linear-gradient(180deg, #191c13, #0e100a); border: 1px solid #4c5240; border-top: 3px solid var(--hazard); padding: 22px 26px; max-width: min(520px, 92vw); }
.help-card h3 { font-family: var(--font-stencil); font-weight: 400; letter-spacing: .14em; color: var(--hazard); margin-bottom: 14px; }
.help-card table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 18px; }
.help-card td { padding: 5px 8px; border-bottom: 1px dashed #343a2c; }
.help-card td:first-child { font-family: var(--font-mono); font-size: 11.5px; color: var(--hazard); white-space: nowrap; letter-spacing: .1em; }
.help-card td.alt { font-family: var(--font-mono); font-size: 10.5px; color: #7d8272; text-align: right; }
.help-card .btn { display: block; margin: 0 auto; }

/* ---------- vignette / letterbox ---------- */
.vignette { position: absolute; inset: 0; z-index: 10; pointer-events: none; transition: box-shadow .5s; }
.vignette.cine { box-shadow: inset 0 70px 60px -40px rgba(0,0,0,.92), inset 0 -70px 60px -40px rgba(0,0,0,.92); }
.vignette.soft { box-shadow: inset 0 0 180px rgba(0,0,0,.55); }

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  .hud-brand { font-size: 12px; padding: 6px 10px; }
  .chip { padding: 9px 12px; font-size: 10px; }
  .hint { font-size: 10px; max-width: calc(100vw - 32px); bottom: 12px; }
  .tour-caption { max-width: none; font-size: 14px; }
  .tour-bar { flex-direction: column; align-items: stretch; }
  .tour-meta { justify-content: space-between; }
  .plate { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; max-height: 46vh; overflow: auto; }
  .boot-legend { display: none; }
  .boot-title { font-size: 44px; }
}