.fh-hh {
  --hh-black: #020208;
  --hh-cream: #fff9ed;
  --hh-orange: #ff7824;
  --hh-purple: #4740b5;
  --hh-yellow: #ffc321;
  color: var(--hh-cream);
  font-family: "Courier New", Courier, monospace;
  margin: 2rem auto;
  max-width: 760px;
  width: 100%;
}

.fh-hh *,
.fh-hh *::before,
.fh-hh *::after { box-sizing: border-box; }

.fh-hh [hidden] { display: none !important; }

.fh-hh__cabinet {
  background: var(--hh-black);
  border: 3px solid #292933;
  box-shadow: 0 18px 55px rgb(0 0 0 / 32%);
  overflow: hidden;
}

.fh-hh__stage {
  aspect-ratio: 6 / 7;
  background: var(--hh-black);
  position: relative;
  width: 100%;
}

.fh-hh__canvas {
  background: var(--hh-black);
  display: block;
  height: 100%;
  image-rendering: pixelated;
  outline: 0;
  touch-action: none;
  width: 100%;
}

.fh-hh__canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--hh-orange); }

.fh-hh__screen {
  align-items: center;
  background: rgb(2 2 8 / 91%);
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  padding: clamp(1.25rem, 6vw, 4rem);
  position: absolute;
  text-align: center;
  transition: opacity 120ms linear, visibility 120ms linear;
}

.fh-hh__screen.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.fh-hh__screen h2 {
  color: var(--hh-yellow);
  font: 700 clamp(2.2rem, 9vw, 5.5rem)/0.9 "Courier New", Courier, monospace;
  letter-spacing: -0.06em;
  margin: 0 0 1.2rem;
  max-width: 620px;
  text-shadow: 5px 5px 0 #8f5616;
  text-transform: uppercase;
}

.fh-hh__screen > p:not(.fh-hh__eyebrow, .fh-hh__hint) {
  color: #d0cfda;
  font-size: clamp(0.82rem, 2.1vw, 1.05rem);
  margin: 0 auto 1.7rem;
  max-width: 510px;
}

.fh-hh__eyebrow {
  color: var(--hh-orange);
  font-size: clamp(0.64rem, 1.7vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.23em;
  margin: 0 0 1rem;
}

.fh-hh__hint { color: #858492; font-size: clamp(0.58rem, 1.4vw, 0.74rem); margin: 1.35rem 0 0; }

.fh-hh__button,
.fh-hh__controls button {
  appearance: none;
  background: var(--hh-orange);
  border: 0;
  border-radius: 0;
  box-shadow: 5px 5px 0 #8c3611;
  color: #130b05;
  cursor: pointer;
  font: 700 0.9rem/1 "Courier New", Courier, monospace;
  min-height: 46px;
  padding: 0.9rem 1.4rem;
  text-transform: uppercase;
}

.fh-hh__button:hover { background: #ff9859; }
.fh-hh__difficulty {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}
.fh-hh__difficulty[hidden] { display: none; }
.fh-hh__difficulty .fh-hh__button { min-width: 112px; }
.fh-hh__difficulty .fh-hh__button.is-selected {
  background: var(--hh-yellow);
  box-shadow: 5px 5px 0 #8f5616;
}
.fh-hh__button:active,
.fh-hh__controls button:active,
.fh-hh__controls button.is-active { box-shadow: 2px 2px 0 #8c3611; transform: translate(3px, 3px); }
.fh-hh button:focus-visible { outline: 3px solid var(--hh-yellow); outline-offset: 3px; }

.fh-hh__controls {
  align-items: center;
  background: #11111a;
  display: none;
  gap: 0.55rem;
  grid-template-columns: repeat(3, 62px) 48px 48px;
  justify-content: center;
  padding: 0.8rem;
}

.fh-hh__controls button { font-size: 1.05rem; min-width: 48px; padding: 0.72rem; }
.fh-hh__controls button[data-control="up"] { grid-column: 2; }
.fh-hh__controls button[data-control="left"] { grid-column: 1; grid-row: 2; }
.fh-hh__controls button[data-control="down"] { grid-column: 2; grid-row: 2; }
.fh-hh__controls button[data-control="right"] { grid-column: 3; grid-row: 2; }
.fh-hh__controls .fh-hh__utility { background: #353440; box-shadow: 5px 5px 0 #19181f; grid-row: 2; }
.fh-hh__controls [data-control="pause"] { grid-column: 4; }
.fh-hh__controls [data-action="fullscreen"] { grid-column: 5; }

.fh-hh: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-hh:fullscreen .fh-hh__cabinet { border: 0; margin: auto; width: min(100vw, calc(100vh * 6 / 7)); }

@media (hover: none), (pointer: coarse), (max-width: 700px) {
  .fh-hh { margin: 1rem auto; }
  .fh-hh__controls { display: grid; }
  .fh-hh__hint { display: none; }
}

@media (max-width: 440px) {
  .fh-hh__controls { grid-template-columns: repeat(3, 54px) 44px 44px; }
  .fh-hh__controls button { min-height: 42px; min-width: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .fh-hh__screen { transition: none; }
}