/* Attract mode overlay: blinking arcade prompts, a three-game select and PRESS START, then a one-frame flash. */
.attract {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 18px; padding: var(--gutter);
  background: var(--yellow); text-align: center; cursor: pointer; overflow-y: auto;
}
.attract[hidden] { display: none; }
.attract__dots {
  position: absolute; inset: -20px; opacity: .14;
  animation: breathe 2.4s steps(6, end) infinite alternate;
}
.attract__logo { position: relative; margin-bottom: 18px; color: var(--ink); }
.attract__line { position: relative; margin: 0; }
.attract__coin { font-size: 20px; animation: blink .5s steps(2, jump-none) infinite; }
.attract__credit { font-size: 15px; visibility: hidden; }
.attract__start {
  font-size: clamp(38px, 6vw, 72px); font-weight: 900; font-style: italic; line-height: 1; color: var(--chalk);
  text-shadow: 4px 4px 0 var(--ink);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
}
.attract.has-credit .attract__credit { visibility: visible; animation: tick-in calc(var(--frame) * 6) steps(3, end); }
.attract.has-start .attract__coin { animation: none; visibility: hidden; }
/* A button the visitor has to press never blinks fully out, unlike the INSERT COIN prompt. */
.attract.has-start .attract__start { animation: pulse .8s steps(2, jump-none) infinite; }
.attract.has-start .attract__coin, .attract.has-start .attract__credit { display: none; }

/* ---------- game select: three slanted cabinets, the checked one lit 1P blue ---------- */
.attract__menu { position: relative; display: none; justify-items: center; gap: 20px; }
.attract.has-start .attract__menu { display: grid; animation: tick-in calc(var(--frame) * 6) steps(3, end); }
.attract__ask { font-size: 13px; letter-spacing: .1em; }
.attract__games { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.game {
  display: grid; justify-items: center; gap: 8px; width: 216px; padding: 14px 20px 12px;
  background: var(--ink); color: var(--chalk); border: var(--line) solid var(--ink);
  box-shadow: var(--drop) var(--drop) 0 var(--ink);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: transform calc(var(--frame) * 3) steps(2, end);
}
.game:hover { transform: translateY(-3px); }
.game[aria-checked="true"] { background: var(--p1); }
.game:focus-visible { outline: var(--line) solid var(--chalk); outline-offset: -8px; box-shadow: none; }
.game__faces { display: flex; }
.game__face {
  width: 44px; height: 44px; margin-left: -8px; background-color: var(--chalk); background-repeat: no-repeat;
  border: var(--line) solid var(--ink); border-radius: 50%;
}
.game__face:first-child { margin-left: 0; }
.game__label { font-size: 22px; font-stretch: 125%; font-weight: 900; font-style: italic; line-height: 1; }
.game__title { font-size: 10px; letter-spacing: .08em; opacity: .8; }
.attract__hint { font-size: 11px; letter-spacing: .08em; }
.attract__hint span + span { margin-left: 10px; }
@media (hover: none) { .attract__hint .hint-keys { display: none; } }
@media (max-width: 640px) {
  .attract__games { flex-direction: column; align-items: center; gap: 10px; }
  .game { width: min(280px, 82vw); grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
  .game__faces { grid-row: span 2; }
  .game__face { width: 36px; height: 36px; }
  .game__label { font-size: 20px; font-stretch: 115%; }
}
.attract__flash { position: absolute; inset: 0; background: var(--chalk); opacity: 0; pointer-events: none; }
.attract.is-flash .attract__flash { opacity: 1; }

@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pulse { 0% { opacity: 1; } 100% { opacity: .35; } }
@keyframes tick-in { 0% { transform: translateY(8px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes breathe { 0% { transform: scale(1); } 100% { transform: scale(1.02); } }