/* Lobby layout. Phone portrait first: header, machine (takes the space left), shelf. Desktop is the same column, centred.
   Motion is stepped (steps()) so UI movement matches the pixel art; prefers-reduced-motion turns it off. */
[hidden] { display: none !important; }
body { min-height: 100dvh; overflow-x: hidden; }
.lobby {
  box-sizing: border-box; display: flex; flex-direction: column; min-height: 100dvh; max-width: 560px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
}
.lobby__head { padding-right: 112px; min-height: 48px; }   /* room for the language and sound buttons */
.lobby__head h1 { margin: 0; font-size: var(--arcade-text-l); font-weight: normal; color: var(--arcade-gold-2); letter-spacing: 1px; text-shadow: 0 var(--arcade-px) 0 var(--arcade-red-1); }
.lobby__head p { margin: 2px 0 0; font-size: var(--arcade-text-s); color: var(--arcade-ink-dim); }

/* flex-basis 0 + overflow hidden: the machine's box is the space left over, never pushed up by the canvas inside it,
   so fit() can shrink the machine when the window gets shorter or the shelf fills up */
.machine { flex: 1 1 0; min-height: 280px; overflow: hidden; display: grid; place-items: center; position: relative; }
.machine__stage { position: relative; line-height: 0; }
.machine__stage canvas { display: block; }
.machine__hit {
  position: absolute; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.machine__hit--crank { cursor: grab; }
.machine__hit--crank:active { cursor: grabbing; }
.machine__hit:focus-visible { outline: var(--arcade-px) dashed var(--arcade-accent-2); outline-offset: 0; }
.machine__hint {
  --fill: var(--arcade-cream); --lit: var(--arcade-cream); --shade: var(--arcade-paper-shade);
  position: absolute; left: 50%; top: 6%; translate: -50% 0; margin: 0; padding: 6px 12px; max-width: 86%; width: max-content;
  color: var(--arcade-ink-dark); font-size: var(--arcade-text-m); line-height: 1.4; text-align: center; pointer-events: none;
  animation: hint-bob 1.2s steps(2) infinite;
}
@keyframes hint-bob { 50% { translate: -50% calc(-1 * var(--arcade-px)); } }

.shelf { padding-top: 6px; }
.shelf h2 { margin: 0 0 4px; font-size: var(--arcade-text-s); font-weight: normal; color: var(--arcade-ink-dim); letter-spacing: 1px; }
.shelf__row {
  list-style: none; margin: 0; padding: 4px 2px 6px; display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scroll-snap-type: x proximity;
}
.shelf__item { flex: 0 0 auto; scroll-snap-align: start; }
.shelf__capsule {
  --fill: var(--arcade-night-1); --lit: var(--arcade-night-2); --shade: var(--arcade-outline); --line: var(--arcade-outline);
  display: grid; justify-items: center; align-content: start; gap: 2px; width: 92px; min-height: 84px; padding: 6px 4px;
  margin: var(--arcade-px); box-sizing: border-box; color: var(--arcade-ink); text-decoration: none; background: var(--fill);
  box-shadow:
    0 calc(-1 * var(--arcade-px)) 0 0 var(--line), 0 var(--arcade-px) 0 0 var(--line),
    calc(-1 * var(--arcade-px)) 0 0 0 var(--line), var(--arcade-px) 0 0 0 var(--line),
    inset 0 var(--arcade-px) 0 0 var(--lit), inset 0 calc(-1 * var(--arcade-px)) 0 0 var(--shade);
  -webkit-tap-highlight-color: transparent;
}
.shelf__capsule:active { translate: 0 var(--arcade-px); }
.shelf__capsule:focus-visible { outline: var(--arcade-px) solid var(--arcade-accent-2); outline-offset: calc(2 * var(--arcade-px)); }
.shelf__name, .shelf__best { font-size: var(--arcade-text-s); line-height: 1.25; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.shelf__best { color: var(--arcade-gold-2); }
.shelf__item--new .shelf__capsule { animation: shelf-pop 360ms steps(4); }
@keyframes shelf-pop { 0% { scale: 0.4; } 50% { scale: 1.15; } 100% { scale: 1; } }
.shelf__empty { margin: 0; padding: 8px 0 4px; font-size: var(--arcade-text-s); color: var(--arcade-ink-dim); }

/* capsule slip */
.card-layer {
  position: fixed; inset: 0; z-index: 900; display: grid; align-items: end; justify-items: center;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: rgb(20 12 36 / 0.72);
}
.card {
  --fill: var(--arcade-cream); --lit: #ffffff; --shade: var(--arcade-paper-shade); --line: var(--arcade-outline);
  box-sizing: border-box; width: min(100%, 420px); padding: 0 16px 16px; margin: var(--arcade-px);
  background: var(--fill); color: var(--arcade-ink-dark);
  box-shadow:
    0 calc(-1 * var(--arcade-px)) 0 0 var(--line), 0 var(--arcade-px) 0 0 var(--line),
    calc(-1 * var(--arcade-px)) 0 0 0 var(--line), var(--arcade-px) 0 0 0 var(--line),
    inset 0 calc(-1 * var(--arcade-px)) 0 0 var(--shade), 0 calc(4 * var(--arcade-px)) 0 0 var(--arcade-outline);
  animation: card-rise 300ms steps(5);
}
.card:focus { outline: none; }
@keyframes card-rise { 0% { translate: 0 48px; scale: 0.9; } 100% { translate: 0 0; scale: 1; } }
.card__band {
  display: flex; align-items: center; gap: 8px; margin: 0 -16px 10px; padding: 6px 12px;
  background: var(--capsule-top); box-shadow: inset 0 calc(-1 * var(--arcade-px)) 0 0 var(--arcade-outline), inset 0 calc(-2 * var(--arcade-px)) 0 0 var(--capsule-bottom);
  min-height: 48px;
}
.card__icon { display: grid; line-height: 0; }
.card__new, .card__external {
  padding: 4px 8px; font-size: var(--arcade-text-s); line-height: 1; background: var(--arcade-outline); color: var(--arcade-gold-2);
}
.card__external { color: var(--arcade-glass-3); margin-left: auto; }
.card__new { animation: new-blink 0.8s steps(1) infinite; }
@keyframes new-blink { 50% { color: var(--arcade-cream); } }
.card__name { margin: 0; font-size: var(--arcade-text-l); font-weight: normal; line-height: 1.3; }
.card__pitch { margin: 6px 0 10px; font-size: var(--arcade-text-m); line-height: 1.5; }
.card__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.card__facts li { padding: 3px 8px; font-size: var(--arcade-text-s); background: var(--arcade-paper-shade); }
.card__note { margin: 0 0 10px; font-size: var(--arcade-text-s); color: var(--arcade-night-2); }
.card__best { margin: 0 0 14px; font-size: var(--arcade-text-m); color: var(--arcade-red-1); }
.card__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.card__actions .arcade-btn { flex: 1 1 auto; min-height: 52px; font-size: var(--arcade-text-m); }
.card__play { flex-grow: 2; font-size: var(--arcade-text-l) !important; }

@media (prefers-reduced-motion: reduce) {
  .machine__hint, .card, .card__new, .shelf__item--new .shelf__capsule { animation: none; }
}