/* The Arcade's 2D games (arcade2d.html, game/arcade2d/host.js, docs/120): what they have that Cara Runs (css/run.css)
   does not. The game's 480 × 640 canvas sits in the middle, as large as the screen allows; around it the game's own
   colour (--a2-bg), darkened at the edges. */

/* the page round the game: fixed layers, since the body itself has no height here (all of it is fixed). Deepest, the
   game's own colour darkened; over it the ambient picture (a tiny copy of the game, blurred and dimmed: host.js keeps
   it current), then a vignette that pulls the edges down to the cards' dark, and a soft glow of the game's accent */
.a2-body { background: #070a0d; }
.a2-body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--a2-bg, #1d2a33) 34%, #0c1216), color-mix(in srgb, var(--a2-bg, #1d2a33) 10%, #06090b) 72%); }
.a2-ambient { position: fixed; inset: -12%; width: 124%; height: 124%; z-index: 0; pointer-events: none;
  filter: blur(42px) saturate(1.3) brightness(0.52); opacity: 0.95; transition: opacity 0.6s ease; }
.a2-vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(4, 7, 9, 0.55) 78%, rgba(3, 5, 7, 0.88) 100%),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--a2-accent, #ffcf6a) 14%, transparent), transparent 55%); }
.a2-stage { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
#a2-canvas { display: block; border-radius: 14px; cursor: pointer; touch-action: none;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 60px color-mix(in srgb, var(--a2-accent, #ffcf6a) 16%, transparent); }
@media (prefers-reduced-transparency: reduce) { .a2-ambient { display: none; } }
/* a phone held upright: the game fills the screen, edge to edge */
@media (max-width: 560px) {
  .a2-stage { padding: 0; }
  #a2-canvas { border-radius: 0; box-shadow: none; }
  /* the game's own top strip is under the corner: only a small pause there (sound and the call are on its card) */
  .a2-body .rhud__btn--call, .a2-body #a2-mute { display: none; }
  .a2-body #a2-pause-btn { width: 32px; height: 32px; font-size: 0.85rem; opacity: 0.78; }
}

.a2-logo { display: flex; align-items: center; justify-content: center; gap: 0.4em; }
.a2-logo__icon { font-size: 0.9em; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)); }
#a2-story p { margin: 0 0 10px; text-align: left; }
.a2-body .rhud { z-index: 3; }   /* over the game (the stage is a layer of its own, z 1) */
.a2-body .rhud__right { z-index: 5; }
/* wider than a phone: the buttons in a column at the right, beside the game (host.js keeps 66 px clear each side) */
@media (min-width: 561px) { .a2-body .rhud__right { flex-direction: column; } }
/* the title card beside the game on a wide screen, so the game playing itself shows */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .a2-body .rscreen--clear { justify-items: start; padding-left: max(5vw, 32px); background: linear-gradient(90deg, rgba(6, 12, 20, 0.7), rgba(6, 12, 20, 0.1) 60%); }
}

/* Watch Cara play (host.js): her card in the corner while she plays, what she says, and Take over. Bottom left, as a
   call's card is; on a call it sits above that card (body.a2-oncall). */
.a2-watchbtn .gbtn__label { font-weight: 700; }
.a2-cara { position: fixed; z-index: 6; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); width: min(300px, calc(100vw - 28px)); display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: rgba(8, 14, 20, 0.84); border: 1px solid color-mix(in srgb, var(--a2-accent, #ffcf6a) 45%, transparent); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); color: #f4efe4; font-family: var(--font-body, system-ui, sans-serif); transition: opacity 0.4s ease, transform 0.4s ease; }
.a2-cara[hidden] { display: none; }
.a2-cara.is-leaving { opacity: 0; transform: translateY(8px); }
.a2-cara__face { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid color-mix(in srgb, var(--a2-accent, #ffcf6a) 70%, #fff); }
.a2-cara.is-talking .a2-cara__face { box-shadow: 0 0 0 3px color-mix(in srgb, var(--a2-accent, #ffcf6a) 45%, transparent); }
.a2-cara__body { flex: 1; min-width: 0; }
.a2-cara__who { font: 700 0.68rem/1.2 var(--font-body, system-ui, sans-serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--a2-accent, #ffcf6a); }
.a2-cara__line { margin: 3px 0 7px; font: 600 0.9rem/1.35 var(--font-body, system-ui, sans-serif); min-height: 1.35em; }
.a2-cara__take { min-height: 32px; padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.1); color: #fff; font: 600 0.82rem/1 var(--font-body, system-ui, sans-serif); cursor: pointer; }
.a2-cara__take:hover { background: rgba(255, 255, 255, 0.2); }
.a2-cara.is-player .a2-cara__take { display: none; }
.a2-body.a2-oncall .a2-cara { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 120px); }
/* a phone held upright: smaller, over the foot of the game */
@media (max-width: 560px) {
  .a2-cara { width: min(250px, calc(100vw - 20px)); left: 10px; bottom: 10px; padding: 8px 10px; gap: 8px; opacity: 0.94; }
  .a2-cara__face { width: 40px; height: 40px; }
  .a2-cara__line { font-size: 0.82rem; margin-bottom: 5px; }
}