/* The Arcade: a riso-printed cabinet with a pixel screen inside. */

.arcade {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-inline: auto;
}

/* the word being spelled, above the cabinet.
   Wide:   [hear] [w o r d . . .] [Word 2 of 5]
   Narrow: [hear] [w o r d . . .]
           [hear] [Word 2 of 5]
   The word stays on one line, its letters scaled to fit, and the HUD keeps the same
   height from word to word, so the cabinet never jumps while a child is tapping it. */
.arcade-hud {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "hear slots status" "clue clue clue";
  align-items: center;
  column-gap: 0;
  row-gap: 4px;
}
.arcade-hud.has-hear { min-height: 56px; }
.arcade-hear { grid-area: hear; align-self: center; }
.arcade-hear:empty { display: none; }
.arcade-hear .btn { flex: none; margin-inline-end: 12px; }
/* a full 56px target on touch; 48px is plenty with a mouse */
@media (pointer: fine) {
  .arcade-hud.has-hear { min-height: 48px; }
  .arcade-hear .btn-icon { width: 48px; min-width: 48px; height: 48px; min-height: 48px; }
}
.arcade-slots {
  --slot-max: clamp(1.5rem, 6vw, 2.4rem);
  grid-area: slots;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 4px 0.12em;
  min-width: 0;
  min-height: calc(var(--slot-max) * 1.1 + 6px);
  font-family: var(--font-word);
  font-weight: 700;
  font-size: var(--slot-max);
  line-height: 1.1;
}
.arcade-slot {
  flex: none;
  min-width: 0.7em;
  text-align: center;
  border-bottom: 3px solid var(--ink-soft);
  padding-inline: 1px;
  color: var(--ink);
}
/* letters still to catch, shown as support: full-strength ink-soft (about 5:1 on the play
   background), told apart from caught letters by the leaf colour and underline */
.arcade-slot.is-hint { color: var(--ink-soft); }
.arcade-slot.is-got { color: var(--leaf); border-bottom-color: var(--leaf); }
.arcade-slot.is-next { border-bottom-color: var(--yolk-deep); border-bottom-width: 4px; }
.arcade-slots.is-done .arcade-slot { color: var(--leaf); }
.arcade-status {
  grid-area: status;
  margin-inline-start: 12px;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.arcade-clue {
  grid-area: clue;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--ink-soft);
}
.arcade-clue-label { font-weight: 700; color: var(--ink); }
.arcade-clue-blank {
  display: inline-block;
  width: 2.6em;
  height: 0.9em;
  margin-inline: 0.12em;
  vertical-align: baseline;
  border-bottom: 3px solid var(--think-ink);
}

/* Narrow (phones, and the tall Spell Racer cabinet): the count tucks under the word */
@supports not (container-type: inline-size) {
  @media (max-width: 559px) {
    .arcade-hud {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "hear slots" "hear status" "clue clue";
      row-gap: 2px;
    }
    .arcade-status { margin-inline-start: 0; font-size: var(--text-xs); }
    /* a clue keeps two lines' room, so a short one doesn't pull the cabinet up */
    .arcade-clue { min-height: 2.8em; margin-top: 4px; }
  }
}

@supports (container-type: inline-size) {
  .arcade { container: arcade / inline-size; }
  .arcade-slots {
    /* room for the letters: the HUD's width less the hear button (and the count, when wide) */
    --room: calc(100cqw - 70px);
    --slot-max: clamp(1.5rem, 7.5cqw, 2.4rem);
    /* each letter takes about 0.7em of underline, 0.12em of gap and 2px of padding
       (0.88em leaves room for the wide ones: m, w) */
    font-size: min(var(--slot-max), max(0.8rem, calc((var(--room) / var(--n, 6) - 2px) / 0.88)));
  }
  @container arcade (min-width: 560px) {
    .arcade-slots { --room: calc(100cqw - 70px - 120px); }
    .arcade-hud.has-clock .arcade-slots { --room: calc(100cqw - 70px - 190px); }
  }
  /* a container query, not a media query: the tall Spell Racer cabinet is narrow on any screen */
  @container arcade (max-width: 559px) {
    .arcade-hud {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "hear slots" "hear status" "clue clue";
      row-gap: 2px;
    }
    .arcade-status { margin-inline-start: 0; font-size: var(--text-xs); }
    /* a clue keeps two lines' room, so a short one doesn't pull the cabinet up */
    .arcade-clue { min-height: 2.8em; margin-top: 4px; }
  }
}

/* The play stage: the game screen is as big as the space allows (keeping its shape),
   and the touch controls float over it like a console game's. The whole stage is a touch
   surface too, so tapping or swiping anywhere steers. */
.arcade { height: 100%; }
.arcade-body {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* the cabinet: a thin riso-printed frame around the pixel screen */
.arcade-cabinet {
  position: relative;
  box-sizing: border-box;
  width: min(100cqw, calc((100cqh - 12px) * var(--ar, 1.6) + 12px));
  padding: 6px;
  background: var(--plum);
  border: var(--stroke) solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 5px 0 var(--dusk);
}
.arcade-cabinet::before {
  /* a second print pass, slightly out of register */
  content: "";
  position: absolute;
  inset: 0;
  border: var(--stroke) solid var(--think);
  border-radius: inherit;
  transform: translate(3px, 3px);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.arcade-bezel {
  position: relative;
  width: 100%;
  background: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
}
.arcade-screen {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  cursor: pointer;
}
.arcade-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.arcade-banner { display: grid; justify-items: center; gap: 6px; }
.arcade-banner-text {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-weight: 900;
  font-size: clamp(2.2rem, 10vw, 4.6rem);
  color: var(--yolk);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--ink);
  line-height: 1;
}
.arcade-banner-sub {
  font-weight: 700;
  color: var(--paper-light);
  background: var(--ink);
  padding: 4px 12px;
  border-radius: 8px;
}

/* touch controls, floating over the stage */
.arcade-pad {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  padding: 0 4px 6px;
  pointer-events: none;
}
.arcade-pad-btn {
  pointer-events: auto;
  flex: none;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid rgba(255, 250, 241, 0.85);
  border: 3px solid color-mix(in srgb, var(--paper-light) 85%, transparent);
  background: rgba(42, 38, 51, 0.38);
  background: color-mix(in srgb, var(--ink) 38%, transparent);
  color: var(--paper-light);
  box-shadow: 0 3px 0 rgba(42, 38, 51, 0.35);
  touch-action: none;
  cursor: pointer;
  transition: transform 80ms var(--out), background-color 80ms var(--out);
}
.arcade-pad-btn svg { width: 38px; height: 38px; filter: drop-shadow(0 2px 0 rgba(42, 38, 51, 0.5)); }
.arcade-pad-btn.is-down, .arcade-pad-btn:active {
  transform: scale(0.92);
  background: rgba(244, 185, 66, 0.75);
  background: color-mix(in srgb, var(--yolk) 75%, transparent);
  color: var(--ink);
}
/* one big jump button, bottom right, where a thumb rests */
.arcade-pad.is-jump { justify-content: flex-end; }
.arcade-pad.is-jump .arcade-pad-btn { width: 96px; height: 96px; }
/* up and down stacked on the right */
.arcade-pad.is-ud { inset: auto 0 0 auto; flex-direction: column; align-items: flex-end; gap: 12px; }
/* a cross for the snake, bottom right */
.arcade-pad.is-dpad {
  inset: auto 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 62px);
  grid-template-rows: repeat(3, 62px);
  grid-template-areas: ". up ." "left . right" ". down .";
  gap: 4px;
}
.arcade-pad.is-dpad .arcade-pad-btn { width: 62px; height: 62px; }
.arcade-pad.is-dpad .arcade-pad-btn svg { width: 30px; height: 30px; }
.arcade-pad.is-dpad [data-key="left"] { grid-area: left; }
.arcade-pad.is-dpad [data-key="up"] { grid-area: up; }
.arcade-pad.is-dpad [data-key="down"] { grid-area: down; }
.arcade-pad.is-dpad [data-key="right"] { grid-area: right; }

/* a computer with a mouse: keys and clicks, no floating buttons */
@media (hover: hover) and (pointer: fine) {
  .arcade-pad { display: none; }
}

/* the "turn sideways" tip: phones held upright, games that are wider than tall */
.arcade-rotate { display: none; }
@media (orientation: portrait) and (max-width: 700px) and (pointer: coarse) {
  .arcade[data-shape="wide"] .arcade-rotate {
    position: absolute;
    left: 50%;
    /* just above the cabinet, which is centred in the room the touch controls leave */
    top: max(8px, calc((100% - var(--pad-room, 0px)) / 2 - 50cqw / var(--ar, 1.6) - 64px));
    z-index: 4;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: var(--stroke-thin) solid var(--ink);
    border-radius: var(--r);
    background: var(--yolk-light);
    color: var(--ink);
    font: 700 var(--text-sm) var(--font-ui);
    white-space: nowrap;
    animation: rotate-tip 600ms var(--out) both;
  }
}
@keyframes rotate-tip { from { opacity: 0; transform: translate(-50%, -8px); } }