* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #1a140e;
  font-family: "Segoe UI", system-ui, sans-serif; color: #f0e8da; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* HUD */
#hud { position: fixed; top: 14px; left: 14px; max-width: 380px; pointer-events: none; }
#step-label { font-size: 18px; font-weight: 600; text-shadow: 0 1px 4px #000;
  background: rgba(20, 14, 8, .65); border-left: 4px solid #b33; padding: 8px 12px;
  border-radius: 4px; }
#step-label .badge { display: inline-block; margin-left: 8px; font-size: 11px;
  font-weight: 700; color: #ffd27a; border: 1px solid #ffd27a; border-radius: 3px;
  padding: 1px 5px; vertical-align: 2px; }
#time-readout { display: inline-block; margin-top: 6px; padding: 3px 8px; font-size: 13px;
  font-variant-numeric: tabular-nums; color: #d8ccb8; background: rgba(20, 14, 8, .55);
  border-radius: 4px; text-shadow: 0 1px 3px #000; }
#time-readout:empty { display: none; }
#bunkai-card { margin-top: 10px; background: rgba(20, 14, 8, .75); border-left: 4px solid #7a1f1f;
  padding: 10px 12px; border-radius: 4px; font-size: 14px; line-height: 1.4; max-width: 360px; }
#bunkai-card h4 { color: #e89b9b; font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 4px; }

/* Kiai */
#kiai-flash { position: fixed; inset: 0; background: radial-gradient(circle,
  rgba(255,60,40,.35), rgba(255,60,40,.08)); opacity: 0; pointer-events: none;
  transition: opacity .12s ease-in; z-index: 5; }
#kiai-flash.on { opacity: 1; }
#kiai-text { position: fixed; top: 32%; left: 50%; transform: translate(-50%, -50%) scale(.6);
  font-size: 64px; font-weight: 900; color: #ff5040; text-shadow: 0 2px 12px #000;
  opacity: 0; pointer-events: none; z-index: 6; letter-spacing: .1em; }
#kiai-text.on { animation: kiai-pop .7s ease-out; }
@keyframes kiai-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  60% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1.05); }
}

/* Error banner */
#error-banner { position: fixed; top: 0; left: 0; right: 0; background: #7a1f1f;
  color: #fff; padding: 8px 16px; font-size: 14px; z-index: 10; text-align: center; }

/* Control bar */
#controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  background: linear-gradient(rgba(18, 12, 7, .55), rgba(18, 12, 7, .92));
  padding: 10px 16px 12px; backdrop-filter: blur(6px); }
#controls .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#controls .row + .row { margin-top: 8px; font-size: 13px; }
#controls button { background: #33261a; color: #f0e8da; border: 1px solid #55402b;
  border-radius: 6px; padding: 6px 12px; font-size: 15px; cursor: pointer; }
#controls button:hover { background: #4a3625; }
#controls select { background: #33261a; color: #f0e8da; border: 1px solid #55402b;
  border-radius: 6px; padding: 6px 8px; font-size: 14px; }
#controls label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

#scrub-wrap { position: relative; flex: 1 1 240px; height: 28px; display: flex; align-items: center; }
#scrub { width: 100%; accent-color: #c9503c; cursor: pointer; }
#markers { position: absolute; left: 0; right: 0; top: 1px; height: 8px; pointer-events: none; }
#markers .tick { position: absolute; top: 2px; width: 1px; height: 5px; background: #8a7458; }
#markers .kiai { position: absolute; top: 0; width: 3px; height: 9px; background: #ff4030;
  border-radius: 1px; box-shadow: 0 0 4px #ff4030; }

.speed-label { gap: 8px; }
#speed { width: 130px; accent-color: #c9503c; }
#speed-value { min-width: 48px; font-variant-numeric: tabular-nums; }
#btn-link { font-size: 12px; padding: 4px 10px; }
#link-out { flex: 1 1 220px; min-width: 180px; background: #1e150e; color: #f0e8da;
  border: 1px solid #55402b; border-radius: 6px; padding: 5px 8px; font-size: 12px;
  font-family: ui-monospace, Consolas, monospace; }
#camera-presets { display: inline-flex; gap: 6px; margin-left: auto; }
#camera-presets button { font-size: 12px; padding: 4px 10px; }