/* The HUD strip, the canvas housing, and how they size to the viewport. */

.cabinet {
  /* One height drives everything: the console and the touch pad both derive
     their width from it so the three pieces always line up. */
  --screen-h: clamp(300px, calc(100dvh - 300px), 720px);
  --console-w: min(100%, calc(var(--screen-h) * 0.7));

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-height: 0;
}

.console {
  width: var(--console-w);
}

/* HUD --------------------------------------------------------------------- */

.hud {
  /* Queried below so the cells respond to the board width, not the viewport. */
  container-type: inline-size;

  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface);
  overflow: hidden;
}

.hud__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border-right: 1px solid var(--line-soft);
}

.hud__cell:last-child {
  border-right: 0;
}

.hud__cell--round {
  flex: 1.35 1 0;
}

.hud__label {
  font-family: var(--font-display);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hud__value {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 2.2vw, 0.9375rem);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hud__value--dim {
  color: var(--ink-muted);
}

.hud__note {
  font-size: 0.625rem;
  line-height: 1.3;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud__pips {
  display: flex;
  gap: 3px;
  align-items: center;
  min-height: 0.9375rem;
}

.life-pip {
  width: 14px;
  height: 6px;
  border-radius: 1px;
  background: var(--accent-alt);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.35);
}

.life-pip--empty {
  background: transparent;
  border: 1px dashed var(--line);
  box-shadow: none;
}

/* Screen ------------------------------------------------------------------ */

.screen {
  position: relative;
  width: 100%;
  aspect-ratio: 448 / 640;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface-sunk);
  overflow: hidden;
}

#stage {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

#stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Responsive -------------------------------------------------------------- */

@media (pointer: coarse), (max-width: 760px) {
  .cabinet {
    /* Leaves room for the masthead, HUD, touch pad and footer. */
    --screen-h: clamp(200px, calc(100dvh - 300px), 620px);
  }
}

/* The round name is the first thing to go when the strip gets tight. */
@container (max-width: 360px) {
  .hud__cell--round .hud__note {
    display: none;
  }
}

/* Below this the four cells would collide, so High steps out. It is still on
   the title and game over panels. */
@container (max-width: 300px) {
  .hud__cell {
    flex: 0 1 auto;
    padding: 0.35rem 0.45rem;
  }

  .hud__cell--high {
    display: none;
  }

  .hud__cell--round {
    flex: 1 1 auto;
  }
}

/* Short landscape phones. A portrait playfield only fits a wide, short
   viewport if the HUD and the pad move to either side of the board. */
@media (max-height: 560px) and (orientation: landscape) {
  .cabinet {
    --screen-h: clamp(180px, calc(100dvh - 102px), 460px);

    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
  }

  .console {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
  }

  .hud {
    flex-direction: column;
    width: clamp(94px, 13vw, 128px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .hud__cell {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }

  .hud__cell:last-child {
    border-bottom: 0;
  }

  .hud__cell--round .hud__note {
    display: none;
  }

  .screen {
    width: calc(var(--screen-h) * 0.7);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .brand__kicker,
  .brand__sub,
  .colophon {
    display: none;
  }

  .masthead {
    padding-bottom: 0.35rem;
  }

  .brand__title {
    font-size: 1.5rem;
    margin-block: 0;
  }

  .shell {
    gap: 0.4rem;
  }
}