:root {
  --ink: #d9dde0; --dim: rgba(217, 221, 224, 0.62); --faint: rgba(217, 221, 224, 0.18);
  --ember: #ff9a4a; --ember-soft: rgba(255, 154, 74, 0.18); --blood: #e0573e; --steel: rgba(16, 20, 24, 0.62);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --display: 'Avenir Next Condensed', 'Futura', 'DIN Condensed', 'Helvetica Neue', Arial, sans-serif;
}
html, body { margin: 0; height: 100%; background: #0b0d0f; color: var(--ink); overflow: hidden; font: 14px/1.45 system-ui, sans-serif; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: crosshair; }
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; font: 600 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: rgba(10, 12, 14, 0.55); border: 1px solid var(--faint); padding: 12px 18px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
#hud button:hover { border-color: var(--ember); background: rgba(40, 24, 12, 0.6); }
#hud button.primary { border-color: var(--ember); color: #fff; background: rgba(120, 52, 16, 0.55); }
#hud button:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* Title card */
.title-card { position: absolute; left: clamp(20px, 7vw, 120px); bottom: clamp(32px, 12vh, 140px); max-width: 560px; pointer-events: auto; }
.title-card h1 { font: 700 clamp(44px, 7vw, 92px)/0.9 var(--display); letter-spacing: 0.04em; text-transform: uppercase; margin: 6px 0 4px; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6); }
.title-card .tagline { font: 500 clamp(16px, 2vw, 22px)/1 var(--display); letter-spacing: 0.5em; text-transform: uppercase; color: var(--ember); margin: 0 0 22px; }
.title-card .lede { color: var(--dim); max-width: 46ch; margin: 0 0 24px; }
.title-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.controls-help, .fine { font: 11px/1.5 var(--mono); color: var(--dim); letter-spacing: 0.04em; margin-top: 18px; }
.eyebrow { font: 600 11px/1 var(--mono); letter-spacing: 0.28em; text-transform: uppercase; color: var(--dim); margin: 0; }

#hud[data-mode='title'] > :not(.title-card) { display: none; }
#hud:not([data-mode='title']) .title-card { display: none; }
#hud[data-mode='play'] .agent-panel { display: none; }
#hud[data-mode='agent'] .reticle, #hud[data-mode='agent'] .prompt { display: none; }

/* Battle readouts */
.hud-top { position: absolute; top: 18px; left: 22px; right: 22px; display: flex; gap: 22px; align-items: baseline; font: 600 12px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 8px #000; }
.hud-top .clock { font-size: 18px; color: #fff; }
.hud-top .phase { color: var(--ember); }
.hud-top .objective { color: var(--dim); margin-left: auto; }
.jacket { position: absolute; left: 22px; bottom: 22px; width: 240px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-shadow: 0 1px 6px #000; }
.bar { grid-column: 1 / -1; height: 4px; background: var(--faint); position: relative; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); transition: width 0.12s linear; }
.bar.heat i { background: var(--ember); }
.bar.heat.over i { background: var(--blood); animation: blink 0.25s steps(2) infinite; }
.bar::before { position: absolute; top: -14px; left: 0; font: 600 9px/1 var(--mono); letter-spacing: 0.2em; color: var(--dim); }
.bar.health::before { content: 'JACKET'; }
.bar.heat { margin-top: 12px; }
.bar.heat::before { content: 'HEAT'; }
.jacket .bar.health { margin-top: 12px; }
.crest { position: absolute; left: 50%; top: 52px; width: min(320px, 50vw); transform: translateX(-50%); height: 2px; background: var(--faint); }
.crest i { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.crest span { position: absolute; right: -54px; top: -5px; font: 600 9px/1 var(--mono); letter-spacing: 0.2em; color: var(--dim); }
.subtitle { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%); max-width: min(760px, 86vw); text-align: center; font: 500 18px/1.35 system-ui, sans-serif; text-shadow: 0 1px 4px #000, 0 0 18px #000; margin: 0; }
.subtitle b { font: 700 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember); margin-right: 8px; }
.prompt { position: absolute; left: 50%; bottom: 22vh; transform: translateX(-50%); font: 700 14px/1 var(--mono); letter-spacing: 0.3em; color: #fff; text-shadow: 0 0 12px var(--ember); animation: pulse 1s ease-in-out infinite; margin: 0; }
.reticle { position: absolute; left: 50%; top: 46%; width: 26px; height: 26px; margin: -13px 0 0 -13px; transition: border-color 0.08s, transform 0.08s; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); }
.reticle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; margin: -1px; background: #fff; }
.death-card { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.7)); animation: fade 0.8s ease-out; }
.death-card[hidden] { display: none; }
.death-card h2 { font: 700 clamp(28px, 5vw, 58px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px; }
.death-card p { font: 12px/1.5 var(--mono); letter-spacing: 0.14em; color: var(--dim); margin: 4px 0; }
.death-card .hint { color: var(--ember); margin-top: 18px; }

/* Live. Die. Repeat. panel */
.agent-panel { position: absolute; right: 18px; top: 72px; width: 300px; padding: 16px 18px; background: var(--steel); border: 1px solid var(--faint); backdrop-filter: blur(6px); pointer-events: auto; }
.agent-loop { font: 700 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; margin: 8px 0 10px; }
.agent-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0 0 12px; }
.agent-stats dt { font: 600 9px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.agent-stats dd { margin: 4px 0 0; font: 600 15px/1 var(--mono); }
.agent-curve { width: 100%; height: 70px; display: block; margin-bottom: 10px; }
.agent-causes { list-style: none; padding: 0; margin: 0 0 12px; font: 11px/1.7 var(--mono); }
.agent-causes li { display: flex; justify-content: space-between; color: var(--dim); }
.agent-causes b { color: var(--ink); }
.agent-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.agent-controls button { padding: 8px 10px !important; font-size: 10px !important; }

@keyframes pulse { 50% { opacity: 0.45; } }
@keyframes blink { 50% { opacity: 0.3; } }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 720px) {
  .agent-panel { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 42vh; overflow: auto; }
  #hud[data-mode='agent'] .jacket { display: none; }
  .hud-top .objective { display: none; }
}
@media (prefers-reduced-motion: reduce) { .prompt, .bar.heat.over i { animation: none; } .death-card { animation: none; } }
.agent-intent { font: 700 12px/1.3 var(--mono); letter-spacing: 0.12em; color: var(--ember); margin: 0 0 10px; min-height: 1.3em; }
.agent-advice { list-style: none; padding: 0; margin: 0 0 12px; font: 11px/1.5 var(--mono); color: var(--ink); }
.agent-advice:not(:empty)::before { content: 'GRADIENT SAYS'; display: block; font: 600 9px/1 var(--mono); letter-spacing: 0.2em; color: var(--dim); margin-bottom: 6px; }
.agent-showing { font: 11px/1.4 var(--mono); letter-spacing: 0.08em; color: var(--dim); margin: -6px 0 12px; }
.wake-card { position: absolute; inset: 0; display: grid; place-content: center; background: #f2f1ec; color: #1a1c1e; pointer-events: none; opacity: 0; }
.wake-card[hidden] { display: none; }
.wake-card.play { animation: wake 1.7s ease-out forwards; }
.wake-card p { font: 600 13px/1 var(--mono); letter-spacing: 0.4em; text-transform: uppercase; }
@keyframes wake { 0% { opacity: 0.95; } 35% { opacity: 0.85; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wake-card.play { animation: none; } }
.control-strip { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 8px; align-items: center; pointer-events: auto; }
.control-strip .views { display: flex; border: 1px solid var(--faint); }
.control-strip .views button { border: 0 !important; border-right: 1px solid var(--faint) !important; padding: 9px 11px !important; font-size: 10px !important; }
.control-strip .views button:last-child { border-right: 0 !important; }
#hud .control-strip button[aria-pressed='true'] { background: rgba(120, 52, 16, 0.6); color: #fff; }
.control-strip .sound { padding: 9px 12px !important; font-size: 10px !important; min-width: 92px; }
#hud[data-mode='title'] > .control-strip { display: flex; }
@media (max-width: 720px) { .control-strip { left: 12px; right: 12px; bottom: auto; top: 44px; flex-wrap: wrap; } }
.agent-toggle { display: none; }
.death-card p { text-shadow: 0 1px 6px #000, 0 0 16px #000; }
.death-card { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.75)); }
@media (max-width: 720px) {
  .agent-panel { top: auto; bottom: 56px; left: 10px; right: 10px; width: auto; max-height: none; padding: 8px 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .agent-panel > * { display: none; }
  .agent-panel > .agent-loop, .agent-panel > .agent-toggle { display: block; }
  .agent-panel .agent-loop { font-size: 15px; margin: 0; }
  .agent-panel .agent-toggle { padding: 6px 10px !important; font-size: 10px !important; }
  .agent-panel.open { max-height: 60vh; overflow: auto; display: block; }
  .agent-panel.open > * { display: revert; }
  .agent-panel.open > .agent-toggle { float: right; }
  .control-strip { top: auto; bottom: 10px; left: 10px; right: 10px; justify-content: space-between; }
  .crest { top: 44px; }
  .crest span { display: none; }
  .jacket { bottom: 108px; }
  .subtitle { bottom: 150px; font-size: 15px; }
}
.agent-panel .agent-toggle { order: 2; }
@media (max-width: 720px) { .agent-panel .agent-loop { order: 1; } }

.reticle.on-target { border-color: #ff5a3c; transform: scale(0.8); box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 0 12px rgba(255,90,60,0.6); }
.reticle.hit::before { content: ''; position: absolute; inset: -9px; background:
  linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%); opacity: 0.9; }
.aim-hint { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); font: 600 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin: 0; }
.aim-hint[hidden], #hud[data-mode='agent'] .aim-hint { display: none; }
.agent-curve { cursor: pointer; }
.life-picker { display: flex; gap: 6px; margin: 10px 0 0; align-items: center; }
.life-picker input { width: 76px; pointer-events: auto; font: 600 11px/1 var(--mono); color: var(--ink); background: rgba(10, 12, 14, 0.55); border: 1px solid var(--faint); padding: 8px 6px; }
.life-picker input:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
.life-picker button { padding: 8px 9px !important; font-size: 10px !important; }
#hud[data-mode='title'] .control-strip .menu { display: none; }
.control-strip .menu { padding: 9px 12px !important; font-size: 10px !important; }