.fh-ha {
  --ha-ink: #11131b;
  --ha-cream: #fff4cd;
  --ha-gold: #ffc13b;
  --ha-orange: #ed7625;
  --ha-green: #2f6b3d;
  color: var(--ha-cream);
  font-family: "Courier New", Courier, monospace;
  margin: 2rem auto;
  max-width: 1000px;
  width: 100%;
}

.fh-ha *, .fh-ha *::before, .fh-ha *::after { box-sizing: border-box; }
.fh-ha [hidden] { display: none !important; }

.fh-ha__cabinet {
  background: var(--ha-ink);
  border: 4px solid #292b38;
  box-shadow: 0 18px 52px rgb(0 0 0 / 30%);
  overflow: hidden;
}

.fh-ha__hud {
  align-items: center;
  background: #10131a;
  border-bottom: 3px solid var(--ha-orange);
  display: grid;
  font-size: clamp(0.67rem, 1.8vw, 1rem);
  font-weight: 700;
  grid-template-columns: repeat(5, 1fr);
  letter-spacing: 0.04em;
  padding: 0.72rem clamp(0.6rem, 2vw, 1.25rem);
  text-align: center;
}

.fh-ha__hud b { color: var(--ha-gold); }
.fh-ha__power { align-items: center; display: flex; flex-wrap: wrap; gap: 0.25rem 0.45rem; justify-content: center; }
.fh-ha__flight-meter { background: #34343d; border: 2px solid #77747b; display: block; height: 8px; overflow: hidden; width: 62px; }
.fh-ha__flight-meter em { background: #f5a623; display: block; height: 100%; transition: width 80ms linear; width: 0; }
.fh-ha__flight-meter.is-ready { border-color: #fff4cd; box-shadow: 0 0 7px #ffd34e; }
.fh-ha__flight-meter.is-ready em { animation: fh-ha-ready 320ms steps(2, end) infinite; background: #fff4cd; }
@keyframes fh-ha-ready { 50% { background: #ff7628; } }
.fh-ha__stage { aspect-ratio: 16 / 9; background: #65c5d3; position: relative; }
.fh-ha__canvas { display: block; height: 100%; image-rendering: pixelated; outline: 0; touch-action: none; width: 100%; }
.fh-ha__canvas:focus-visible { box-shadow: inset 0 0 0 4px var(--ha-gold); }

.fh-ha__debug { background: rgb(10 17 23 / 91%); border: 2px solid var(--ha-gold); color: var(--ha-cream); font: 700 12px/1.5 "Courier New", monospace; left: 10px; max-width: min(300px, calc(100% - 20px)); padding: 9px; position: absolute; top: 10px; z-index: 3; }
.fh-ha__debug-title { align-items: center; color: var(--ha-gold); display: flex; justify-content: space-between; margin-bottom: 5px; }
.fh-ha__debug label { align-items: center; display: flex; gap: 8px; }
.fh-ha__debug input { background: #11131b; border: 1px solid #a89968; color: var(--ha-cream); font: inherit; min-width: 0; padding: 4px; width: 100%; }
.fh-ha__debug-buttons { display: grid; gap: 4px; grid-template-columns: repeat(2, 1fr); margin: 7px 0; }
.fh-ha__debug button { background: #41464e; border: 1px solid #a89968; color: #fff4cd; cursor: pointer; font: inherit; padding: 4px 5px; }
.fh-ha__debug button:hover { background: #6a5d40; }
.fh-ha__debug button:focus-visible { outline: 2px solid var(--ha-gold); }

.fh-ha__screen {
  align-items: center;
  background: linear-gradient(rgb(10 17 23 / 76%), rgb(13 11 18 / 92%));
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  padding: clamp(1.2rem, 5vw, 4rem);
  position: absolute;
  text-align: center;
  transition: opacity 140ms linear, visibility 140ms linear;
}

.fh-ha__screen.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.fh-ha__screen h2 {
  color: var(--ha-gold);
  font: 900 clamp(2.3rem, 8vw, 5.5rem)/0.86 "Courier New", Courier, monospace;
  letter-spacing: -0.075em;
  margin: 0 0 1.15rem;
  max-width: 820px;
  text-shadow: 6px 6px 0 #7b3f1e;
  text-transform: uppercase;
}

.fh-ha__screen > p:not(.fh-ha__eyebrow, .fh-ha__hint) {
  color: #f2e8d4;
  font-size: clamp(0.82rem, 2vw, 1.08rem);
  margin: 0 auto 1.6rem;
  max-width: 600px;
}

.fh-ha__eyebrow { color: #ff8b32; font-size: clamp(0.65rem, 1.6vw, 0.9rem); font-weight: 900; letter-spacing: 0.25em; margin: 0 0 0.9rem; }
.fh-ha__hint { color: #c2b8a5; font-size: clamp(0.58rem, 1.25vw, 0.76rem); margin: 1.3rem 0 0; }

.fh-ha__button,
.fh-ha__controls button {
  appearance: none;
  background: var(--ha-orange);
  border: 0;
  border-radius: 0;
  box-shadow: 5px 5px 0 #72381d;
  color: #1a0c05;
  cursor: pointer;
  font: 900 0.9rem/1 "Courier New", Courier, monospace;
  min-height: 46px;
  padding: 0.9rem 1.35rem;
  text-transform: uppercase;
}

.fh-ha__button:hover { background: #ff9851; }
.fh-ha__button:active, .fh-ha__controls button:active, .fh-ha__controls button.is-active { box-shadow: 2px 2px 0 #72381d; transform: translate(3px, 3px); }
.fh-ha button:focus-visible { outline: 3px solid var(--ha-gold); outline-offset: 3px; }

.fh-ha__controls {
  align-items: center;
  background: #171a22;
  display: none;
  justify-content: space-between;
  padding: 0.8rem;
}

.fh-ha__move-controls, .fh-ha__action-controls { display: flex; gap: 0.65rem; }
.fh-ha__controls button { min-width: 54px; padding: 0.8rem; }
.fh-ha__controls [data-control="jump"] { background: var(--ha-gold); }
.fh-ha__controls [data-control="attack"] { background: #55c9ed; }
.fh-ha__controls [data-control="kick"] { background: #f39b43; }
.fh-ha__controls [data-control="pause"] { background: #555a66; color: #fff; }

.fh-ha:fullscreen { align-items: center; background: #000; display: flex; margin: 0; max-width: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.fh-ha:fullscreen .fh-ha__cabinet { border: 0; margin: auto; width: min(100vw, calc((100vh - 58px) * 16 / 9)); }

@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .fh-ha { margin: 1rem auto; }
  .fh-ha__controls { display: flex; }
  .fh-ha__hint { display: none; }
}

@media (max-width: 520px) {
  .fh-ha__hud { grid-template-columns: repeat(3, 1fr); row-gap: 0.35rem; }
  .fh-ha__controls { gap: 0.5rem; }
  .fh-ha__move-controls, .fh-ha__action-controls { gap: 0.38rem; }
  .fh-ha__controls button { font-size: 0.68rem; min-height: 42px; min-width: 42px; padding: 0.66rem; }
}

@media (prefers-reduced-motion: reduce) { .fh-ha__screen { transition: none; } }
@media (prefers-reduced-motion: reduce) { .fh-ha__flight-meter.is-ready em { animation: none; } }