/* THE ARCADE - the picker in front of the seven games.
   Its own file for the same reason practice.css is: everything here is
   prefixed .arc- or scoped to #screen-arcade, so nothing leaks. */

#screen-arcade .arc-wrap {
  max-width: 560px; margin: 0 auto; padding: 18px 16px 32px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
#screen-arcade h1 { margin: 2px 0 0; }
/* 🔴 The margin reset, for the reason practice.css states at .pr-top: a
   .ghost-btn carries `margin: 18px auto 0` for its life as a centred block
   button, and two auto margins in a flex row eat the free space before
   justify-content is consulted. Back sat dead centre until this zeroed it. */
#screen-arcade .pr-top { margin-bottom: 2px; }
#arc-back { margin: 0; }

/* Two columns, and 🔴 minmax(0, 1fr) rather than 1fr.
   A bare 1fr track cannot shrink below the widest word in it, so one long
   game name pushes its column wide and the other tile shrinks to match what
   is left - which is exactly the 223-vs-227 bug on the Memory shelf, in a
   grid instead of a flex row. minmax(0, ...) removes the floor. */
.arc-grid {
  width: 100%; display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.arc-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  /* Tall enough for a two-line description in the pixel skin, where the type
     is wider - so one long line does not make its whole row taller than the
     two under it. The best is pushed to the bottom by its own margin, so the
     slack reads as a layout rather than as a gap. */
  min-height: 102px; padding: 12px 14px;
  border: 2px solid var(--line); border-radius: 14px;
  background: var(--card); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
  transition: transform .08s ease, border-color .12s ease;
}
.arc-tile:active { transform: translateY(1px); }
@media (hover: hover) {
  .arc-tile:hover { border-color: var(--turq); }
}

/* Free throws spans both columns and sits first. It is the one with a ladder
   behind it and a limit in front of it, so it is not one of six equals. */
.arc-ft { grid-column: 1 / -1; min-height: 66px; border-color: var(--turq); }

.arc-name { font-family: var(--pixel); font-size: 15px; line-height: 1.25; }
.arc-what { color: var(--muted); font-size: 13px; line-height: 1.3; }
/* Always in the flow, even with no best yet (the markup puts a space there),
   so a tile does not grow the first time he scores and shove the grid down. */
.arc-best { margin-top: auto; font-family: var(--pixel); font-size: 12px; color: var(--turq); }

/* An iPad mini in portrait is 744px wide and a phone is 390. Below that the
   two columns leave no room for a name and a line under it. */
@media (max-width: 360px) {
  .arc-grid { grid-template-columns: minmax(0, 1fr); }
}