/* The Arcade — only what base.css does not already give us.
   Two registers live here. AVATAR, PACK, SCORE and RESULT are the cool paper register every other
   game uses (.scene, .card, .eyebrow, .pack-card), with the sticker head as the one new object.
   PLAY is the arcade's own dark register: a pixel cabinet with the Press Start 2P face, which is
   why the tokens below are scoped to .ar-cab rather than added to :root. */

.ar {
  --cab: #221E3A;
  --cab-2: #2E2950;
  --cab-line: #4A4374;
  --cab-glow: #6BF0B8;
  --cab-dim: #9A93C8;
}

/* ---------- START preview ---------- */
.ar-preview { width: 82%; border-radius: var(--r8); overflow: hidden; box-shadow: var(--shadow-1); border: 2px solid var(--cab-line); }
.ar-preview svg { display: block; width: 100%; height: auto; }

/* ---------- the sticker head ---------- */
.ar-sticker { display: block; }
.ar-face { display: grid; place-items: center; min-height: 300px; }

/* ---------- AVATAR ---------- */
.ar-avatar { width: min(760px, calc(100vw - 32px)); min-height: calc(100svh - var(--bar-h, 0px)); justify-content: center; }
.ar-avatar__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
.ar-avatar__panel { padding: 22px 18px 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 420px; }
.ar-avatar__cap { font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.ar-avatar__stage { width: 216px; height: 216px; border-radius: 50%; overflow: hidden; position: relative; border: 3px solid var(--line); background: var(--paper); flex: none; }
/* Once the sticker exists, the camera's ring has done its job — the character stands on the page,
   not inside a lens. */
.ar-avatar__stage.is-sticker { border-color: transparent; background: transparent; overflow: visible; display: grid; place-items: center; }
.ar-avatar__stage .cam { position: absolute; inset: 0; border-radius: 50%; }
.ar-avatar__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; }
.ar-emoji-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 260px; }
.ar-emoji-row__cap { flex: 1 0 100%; text-align: center; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.ar-emoji-row button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper-raised); font-size: 22px; line-height: 1; }
.ar-emoji-row button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.ar-avatar__status { font: 13px var(--mono); color: var(--ink-soft); }
@media (max-width: 720px) {
  .ar-avatar__panels { grid-template-columns: 1fr; }
  .ar-avatar__panel { min-height: 0; }
  .ar-avatar__stage { width: 168px; height: 168px; }
}

/* ---------- the camera stage (same shape as /hunt and /fashion) ---------- */
.cam { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #101116; overflow: hidden; display: grid; place-items: center; }
.cam__video, .cam__still { width: 100%; height: 100%; object-fit: cover; }
.cam__video.is-mirrored { transform: scaleX(-1); }
.cam__video.is-behind { visibility: hidden; }
.cam__still { position: absolute; inset: 0; }
.cam__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam__flash.is-on { animation: ar-cam-flash 420ms ease-out; }
@keyframes ar-cam-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
.cam__err { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; background: var(--paper); }
.cam__errtext { font-size: 13px; color: var(--ink-soft); max-width: 22ch; }

/* ---------- PACK ---------- */
.ar-pack { width: min(760px, calc(100vw - 32px)); padding-top: 28px; }
.ar-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
.ar-mode { text-align: left; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; border-radius: var(--r8); border: 1px solid var(--line); background: var(--paper-raised); box-shadow: var(--shadow-1); }
.ar-mode[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: -1px; }
.ar-mode .emoji { font-size: 24px; line-height: 1; }
.ar-mode .t { font-size: 19px; font-weight: 800; }
.ar-mode .d { font-size: 13px; color: var(--ink-soft); }
.ar-mode .seg { margin-top: 8px; }
.ar-mode .seg button { min-width: 0; height: 34px; padding: 0 12px; border-radius: 999px; font: 700 13px var(--mono); }
.ar-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; width: 100%; }
.ar-tile { position: relative; text-align: left; padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 4px; min-height: 128px; border-radius: var(--r8); border: 1px solid var(--line); background: var(--paper-raised); box-shadow: var(--shadow-1); }
.ar-tile .emoji { font-size: 20px; line-height: 1; }
.ar-tile .t { font-size: 14px; font-weight: 800; line-height: 1.15; }
.ar-tile .d { font-size: 11px; color: var(--ink-soft); line-height: 1.3; flex: 1; }
.ar-tile .n { font: 11px var(--mono); color: var(--ink-faint); }
.ar-tile .pick { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--pink); color: var(--on-pink); font: 700 12px/22px var(--mono); text-align: center; }
.ar-tile[aria-pressed="true"] { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink); }
/* Dim the AFFORDANCE, not the text. A Random Rush tile is still a game you are about to play, so
   it keeps every colour it had; what it loses is the raised shadow, the pick badge and the pointer.
   The 42 % wash is reserved for `is-soon` — a tile that is not built yet and is really disabled.
   (Measured before: title 2.67:1, blurb 1.92:1, seconds 1.75:1 in light. All of them AA failures.) */
.ar-tile.is-dealt { box-shadow: none; border-style: dashed; cursor: default; }
.ar-tile.is-dealt .pick { display: none; }
.ar-tile.is-off { opacity: .42; }
.ar-tile.is-soon .n { color: var(--ink-faint); }
.ar-foot { font: 13px var(--mono); color: var(--ink-soft); }
/* The coin button is the widest thing on PACK, and the pixel face has no narrow cut, so it is the
   one that pushed the 390 px viewport 40 px sideways. It now wraps inside the column instead. */
.ar-coin {
  min-height: 58px; padding: 12px 30px; max-width: 100%; border-radius: 10px; border: 2px solid #4A4374;
  background: linear-gradient(180deg, #2E2950, #1D1934); color: #F5D66B;
  font-family: var(--pixel); font-size: 15px; letter-spacing: .02em; text-transform: lowercase;
  line-height: 1.5; text-align: center; white-space: normal; overflow-wrap: anywhere;
  box-shadow: 0 6px 0 #12101F, 0 12px 26px rgba(23, 24, 28, .28);
}
.ar-coin:disabled { opacity: .5; }
.ar-coin:active { transform: translateY(3px); box-shadow: 0 3px 0 #12101F; }
@media (max-width: 720px) { .ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ar-modes { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .ar-coin { font-size: 12px; padding: 12px 16px; letter-spacing: 0; } }

/* ---------- PLAY: the cabinet ---------- */
.ar-play { width: min(760px, calc(100vw - 24px)); min-height: calc(100svh - var(--bar-h, 0px)); justify-content: center; gap: 12px; }
.ar-cab {
  width: 100%; border-radius: 16px; padding: 10px; background: var(--cab);
  border: 2px solid var(--cab-line); box-shadow: 0 18px 46px rgba(23, 24, 28, .28);
  display: flex; flex-direction: column; gap: 8px;
}
.ar-cab__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 4px 6px 2px; }
.ar-cab__top > * { min-width: 0; }
.ar-cab__mid { text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-cab__title { font-family: var(--pixel); font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-cab__timer { font-family: var(--pixel); font-size: 19px; color: var(--cab-glow); letter-spacing: .04em; }
.ar-cab__timer.is-low { color: #FF8A8A; }
.ar-cab__of { font: 11px var(--mono); color: var(--cab-dim); letter-spacing: .1em; }
.ar-tag { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 3px 12px 3px 3px; border-radius: 999px; background: #1A1730; border: 2px solid var(--cab-line); max-width: 100%; }
.ar-tag--pink { border-color: var(--pink); }
.ar-tag--blue { border-color: var(--blue); }
.ar-tag__head { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: none; background: #fff; }
.ar-tag__head canvas { width: 100%; height: 100%; }
.ar-tag__col { display: contents; }
.ar-tag__name { color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-tag__score { font-family: var(--pixel); font-size: 11px; color: #F5D66B; margin-left: auto; white-space: nowrap; }
.ar-tag--right { margin-left: auto; }
.ar-screen { position: relative; border-radius: 8px; overflow: hidden; background: #0E1020; border: 2px solid #12101F; aspect-ratio: 4 / 3; }
.ar-screen canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.ar-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; pointer-events: none; }
.ar-over__n { font-family: var(--pixel); font-size: clamp(40px, 9vw, 72px); color: #F5D66B; text-shadow: 0 5px 0 rgba(0, 0, 0, .35); }
.ar-over__t { font-family: var(--pixel); font-size: clamp(14px, 3.2vw, 22px); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.ar-over__h { font-family: var(--mono); font-size: 13px; color: #D8D3F0; }
.ar-over__loading { font-family: var(--pixel); font-size: 12px; color: var(--cab-dim); }
.ar-play__hint { font: 12px var(--mono); color: var(--ink-faint); }
/* On a phone the two name tags and the title fight for one row, and the pixel face has no narrow
   cut — so the whole header shrinks together rather than letting the game's name go to an ellipsis. */
@media (max-width: 560px) {
  .ar-cab__top { gap: 4px; padding: 4px 2px 2px; }
  .ar-tag { height: 38px; gap: 5px; padding: 2px 8px 2px 2px; }
  .ar-tag__head { width: 30px; height: 30px; }
  .ar-tag__col { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; gap: 2px; overflow: hidden; }
  .ar-tag__name { font-size: 11px; max-width: 96px; }
  .ar-tag__score { font-size: 8px; margin-left: 0; max-width: 96px; overflow: hidden; text-overflow: clip; }
  .ar-cab__title { font-size: 9px; }
  .ar-cab__timer { font-size: 16px; }
  .ar-cab__of { font-size: 9px; }
}

/* ---------- SCORE ---------- */
.ar-score { min-height: calc(100svh - var(--bar-h, 0px)); justify-content: center; gap: 16px; width: min(640px, calc(100vw - 32px)); }
.ar-score__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
.ar-score__card { padding: 18px 12px 20px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ar-score__card.is-pink { border-color: var(--pink); }
.ar-score__card.is-blue { border-color: var(--blue); }
.ar-score__who { font-weight: 800; margin-top: 4px; }
.ar-score__raw { font-family: var(--pixel); font-size: 26px; }
/* The noun under the number: what 97 actually was. Full ink-soft, never a whisper. */
.ar-score__unit { font: 13px var(--mono); color: var(--ink-soft); margin-top: 2px; }
.ar-score__pts { font-family: var(--pixel); font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.ar-score__band { font-size: 18px; font-weight: 800; }
.ar-totals { display: flex; gap: 12px; justify-content: center; }
.ar-total { min-width: 70px; padding: 8px 10px 6px; border: 1px solid var(--line); border-radius: var(--r4); background: var(--paper-raised); text-align: center; }
.ar-total.is-pink { border-bottom: 3px solid var(--pink); }
.ar-total.is-blue { border-bottom: 3px solid var(--blue); }
.ar-total .who { font-size: 11px; color: var(--ink-soft); }
.ar-total .n { font-family: var(--pixel); font-size: 15px; }

/* ---------- RESULT ---------- */
/* The "💡 Give feedback" pill is `position: fixed` bottom-left for the whole product, and on an
   iPhone it landed exactly on the game-by-game row at first paint: 177×44 at y 604, over a row at
   y 603 (test-results/realuse/arcade §3 P10). On a narrow screen this page hands it back to the
   flow — same button, same handler, at the end of the page, where it covers nothing. On a wide one
   it stays where the rest of Sunny puts it and the page reserves its height underneath. */
.ar-result { padding-top: 30px; gap: 14px; padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 560px) {
  .ar-result { padding-bottom: 10px; }
  .ar-result + .feedback-pill { position: static; display: block; margin: 2px auto 26px; }
}
.ar-result__crown { font-size: 30px; }
.ar-result__name { font-size: clamp(34px, 7vw, 54px); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.ar-result__name.pink { color: var(--pink); }
.ar-result__name.blue { color: var(--blue); }
.ar-result__band { font-size: 19px; font-weight: 800; }
.ar-rows { width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; }
.ar-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r4); background: var(--paper-raised); }
.ar-row.is-pink { border-left: 4px solid var(--pink); }
.ar-row.is-blue { border-left: 4px solid var(--blue); }
.ar-row .who { font-weight: 800; }
.ar-row .pts { font-family: var(--mono); font-weight: 700; }
/* KEEP, then the souvenir. One column so the download reads as underneath the real action rather
   than beside it, and the honest line sits under both — it is never a toast that goes away. */
.ar-keepbox { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ar-keepbox .btn { width: 100%; }
.ar-keep__note { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); text-align: center; text-wrap: pretty; }

.ar-bygame { width: min(460px, 100%); display: flex; flex-direction: column; gap: 6px; }
.ar-bygame__row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ar-bygame__n { font: 11px var(--mono); color: var(--ink-faint); width: 22px; }
.ar-bygame__t { flex: 1; text-align: left; }
.ar-bygame__u { font: 12px var(--mono); color: var(--ink-soft); }
.ar-chip { display: inline-block; min-width: 30px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 3px; font: 700 12px var(--mono); text-align: center; }
.ar-chip.is-win { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ar-chip.is-pink { border-color: var(--pink); }
.ar-chip.is-blue { border-color: var(--blue); }

/* ---------- room for the activity bar (docs/R2-INTERFACE.md S5) ----------
   These top paddings exist to hold a scene off the top of the WINDOW. With the 44px bar there,
   the bar already does that, and the two together push the first line of a scene ~9%% of an
   iPhone's screen down before anything is said. Trimmed by 20px, so the gap a person sees is the
   gap that was designed. Nothing moves on a page with no bar. */
body.has-activitybar .ar-pack { padding-top: 8px; }
body.has-activitybar .ar-result { padding-top: 10px; }