/* The arcade is the same terminal as /dev (dev.css): system mono, one weight, the studio's
   three colors. This file only adds the cabinet list, the README card and the play line. */
:root { --cabinet-fill: #141416; --cabinet-line: #45454c; }

/* Small terminal text still needs generous touch targets. */
.arcade-term .bar .nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; touch-action: manipulation; }
.arcade-term .prompt-line { align-items: center; min-height: 44px; }
.arcade-term .prompt-line .line { min-height: 44px; padding-block: 12px; }
.arcade-term .prompt-line input { touch-action: manipulation; }
.arcade-skip { position: absolute; top: 8px; left: 16px; z-index: 2; padding: 12px; background: var(--bg); transform: translateY(-160%); }
.arcade-skip:focus { transform: none; }

/* ls -l: each cabinet is a row; the pixel cabinet is the bullet, the selected row gets a › */
.cabinet-list { list-style: none; margin: 4px 0 0; padding: 0; }
.cabinet-choice {
  display: grid; grid-template-columns: 2ch 12px 9ch 1fr; column-gap: 1.2ch; align-items: center;
  width: 100%; min-height: 44px; padding: 2px 0; margin: 0;
  border: 0; background: none; color: var(--dim); font: inherit; text-align: left; cursor: pointer;
  touch-action: manipulation;
}
.cabinet-choice::before { content: ""; }
.cabinet-choice[aria-pressed="true"] { color: var(--ink); }
.cabinet-choice[aria-pressed="true"]::before { content: "›"; color: var(--yellow); }
.cabinet-choice .px { width: 12px; height: 12px; }
.cabinet-choice .choice-status { color: var(--dim); font-weight: 300; letter-spacing: -0.015em; }
.cabinet-choice:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .cabinet-choice:hover { color: var(--ink); } }

/* cat README: small pixel cabinet beside the text */
.cabinet { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2ch; align-items: start; }
.cabinet-art { width: 56px; height: 59px; display: block; image-rendering: pixelated; }
.game-copy p { margin: 0 0 4px; max-width: 62ch; overflow-wrap: anywhere; }
.game-status { color: var(--yellow); }

/* ./play: plain output, or a link once a game is ready */
.play-line { margin-bottom: 0; }
.play-link { color: var(--yellow); text-decoration-color: var(--yellow); }

[hidden] { display: none !important; }

/* ---------- Layout: title bar across the top, terminal on the left, game tower on the right ---------- */
.arcade-layout { display: grid; grid-template-columns: minmax(0, 84ch) 250px; column-gap: 44px; justify-content: center; align-items: start; padding: 48px 32px 0; }
.arcade-layout > .bar { grid-column: 1 / -1; }
.arcade-layout .term { margin: 0; max-width: none; padding: 0 0 48px; }
.tower { position: sticky; top: 24px; }
/* Phones: title bar, then the games, then the terminal, so the way in is the first thing you see. */
@media (max-width: 920px) {
  .arcade-layout { grid-template-columns: minmax(0, 1fr); padding: max(20px, env(safe-area-inset-top)) 16px 0; }
  .arcade-layout > .bar { order: -2; }
  .tower { position: static; margin-bottom: 28px; order: -1; }
  .bays li:nth-child(n + 3):has(.bay-empty) { display: none; } /* one empty bay is enough on a phone */
}

/* ---------- The tower: drive bays, one per game ---------- */
.tower { padding: 12px; border: 1px solid var(--faint); border-radius: 12px; background: rgba(255, 255, 255, 0.025); }
.tower-head { display: flex; justify-content: space-between; margin: 2px 2px 10px; font-size: 11px; }
.bays { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bay {
  position: relative; display: grid; grid-template-columns: 8px 1fr; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 0 10px; margin: 0;
  border: 1px solid var(--faint); border-radius: 7px; background: #0e0e10;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; touch-action: manipulation;
}
.bay .led { width: 6px; height: 6px; background: var(--yellow); }
.bay.ready .led { background: var(--blue); }
/* The cartridge: a spine with the game's name; it slides out of its bay when picked. */
.cart {
  display: flex; flex-direction: column; justify-content: center; min-height: 34px; padding: 3px 9px;
  border-left: 3px solid var(--yellow); background: #18181b; border-radius: 3px;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bay.ready .cart { border-left-color: var(--blue); }
.cart-title { font-size: 12px; line-height: 1.2; }
.cart-id { font-size: 10px; color: var(--dim); font-weight: 300; }
.bay[aria-pressed="true"] { border-color: rgba(255, 255, 255, 0.22); }
.bay[aria-pressed="true"] .cart { transform: translateX(-6px); background: #202024; }
.bay:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .bay:hover .cart { transform: translateX(-3px); } .bay[aria-pressed="true"]:hover .cart { transform: translateX(-6px); } }
.bay-empty { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px dashed var(--faint); border-radius: 7px; color: var(--dim); font-size: 11px; font-weight: 300; }
.tower-action { margin-top: 12px; }
.tower-play, .tower-wait { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; border-radius: 7px; font: inherit; text-decoration: none; }
.tower-play { background: var(--yellow); color: var(--bg); }
.tower-wait { border: 1px solid var(--faint); background: none; color: var(--dim); cursor: not-allowed; }
.tower-note { margin: 10px 2px 0; font-size: 11px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .cart { transition: none; } }

/* ---------- Hints under the prompt: clickable commands ---------- */
.hints { margin: 6px 0 0; font-size: 11px; }
.hints button { appearance: none; border: 0; background: none; padding: 6px 2px; margin: -6px 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .hints button:hover { color: var(--yellow); } }

/* The native dialog owns focus trapping; only its empty shell moves on exit. */
html.arcade-playing { overflow: hidden; }
.arcade-player { box-sizing: border-box; width: min(1100px, calc(100vw - 64px)); height: min(900px, calc(100dvh - 64px)); max-width: none; max-height: none; padding: 0; border: 1px solid var(--faint); border-radius: 14px; background: #000; color: var(--ink); overflow: hidden; }
.arcade-player[open] { display: flex; flex-direction: column; animation: player-in 180ms cubic-bezier(.19,1,.22,1); }
.arcade-player::backdrop { background: rgba(0,0,0,.75); }
.arcade-player.closing { animation: player-out 110ms cubic-bezier(.19,1,.22,1) forwards; }
.player-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: env(safe-area-inset-right); border-bottom: 1px solid var(--faint); }
.player-bar h2 { margin: 0; font: 600 14px/1.3 system-ui, sans-serif; }
#player-close { min-height: 48px; min-width: 96px; padding: 0 16px; border: 0; background: none; color: inherit; font: 500 14px/1.3 system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
#player-close span { margin-left: 8px; }
#player-close:focus-visible { outline: 2px solid var(--yellow); outline-offset: -4px; }
#player-close:active { background: #252525; }
.player-frame { flex: 1; min-height: 0; }
.player-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #cce9f6; }
@media (hover: hover) and (pointer: fine) { #player-close:hover { background: #191919; } }
@media (max-width: 700px), (max-height: 500px) {
  .arcade-player { width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .player-bar { padding-top: env(safe-area-inset-top); }
}
@keyframes player-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes player-out { to { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .arcade-player[open], .arcade-player.closing { animation: none; } }