/* the Playground: its scene is 360 x 320 units */
.stage[data-mode="park"] { aspect-ratio: 360 / 320; }
/* the scene takes the keyboard's focus while the park is open (the arrows walk the booger): its ring is drawn inside the stage, which clips */
.stage[data-mode="park"] #cv:focus-visible { outline-offset: -7px; border-radius: 26px; }

/* the card beside a neighbour that was tapped. Inside the stage, placed by pkPlace(); never over the neighbour */
.pk-card {
  position: absolute; z-index: 6; width: min(172px, 48%); max-height: calc(100% - 16px); overflow-y: auto;
  display: grid; gap: 4px; padding: 8px 10px 10px;
  box-shadow: var(--shadow-hard); font-size: 13px; line-height: 1.3;
}
.pk-name { padding-right: 30px; font-size: 16px; font-weight: 600; line-height: 1.15; }
/* the card's way out, in its top corner: round, and 44px to a finger (the ring of space round it is its own) */
.pk-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; background: #fff; border: 2px solid var(--ink); border-radius: 50%; }
.pk-x .ic { width: 16px; height: 16px; }
.pk-x::before { content: ''; position: absolute; inset: -7px; }
@media (hover: hover) { .pk-x:hover { background: var(--butter); } }
.pk-x:active { transform: translateY(1px); }
.pk-lvl { display: flex; align-items: center; gap: 5px; color: var(--soft); }
.pk-lvl .ic { width: 15px; height: 15px; color: var(--ink); }
.pk-bar { flex: 1; display: block; height: 8px; background: #efe3cf; border: 1.5px solid var(--ink); border-radius: var(--r-pill); overflow: hidden; }
.pk-bar i { display: block; height: 100%; width: 0; background: var(--coral); transition: width .5s ease; }
.pk-line { margin: 0; color: var(--ink); }
.pk-acts { display: grid; gap: 6px; margin-top: 2px; }
.pk-acts:empty { display: none; }
.pk-acts .btn { padding: 6px 10px; font-size: 13.5px; }

/* the closed gate's notice, along the bottom of the stage */
.pk-shut { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 6; margin: 0; box-shadow: var(--shadow-hard); }
.pk-shut .btn { justify-self: start; margin-top: 4px; }

/* what a game earned: a small card in the middle of the stage */
.pk-result {
  position: absolute; inset: 0; z-index: 10; margin: auto; width: min(250px, calc(100% - 32px)); height: fit-content;
  display: grid; justify-items: center; gap: 6px; padding: 10px 14px 12px; text-align: center;
  border-width: 3px; box-shadow: 0 8px 0 rgba(61, 51, 64, .25);
  animation: popIn .25s cubic-bezier(.175, .885, .32, 1.275);
}
.pk-result h3 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.15; }
.pk-stars { display: flex; gap: 4px; }
.pk-stars .ic { width: 34px; height: 34px; color: var(--ink); }
.pk-result .acts { display: flex; gap: 8px; margin-top: 2px; }
.pk-result .acts .btn:not(.plain) { font-weight: 600; }

/* while a game runs: the way out, in the stage's top corner, clear of the row of marks in the middle */
.pk-leave { position: absolute; top: 8px; right: 8px; z-index: 6; display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px 4px 8px; box-shadow: 0 2px 0 var(--ink); font-weight: 600; }
.pk-leave .ic { width: 15px; height: 15px; }
@media (max-width: 420px) { .pk-leave { top: 6px; right: 6px; padding: 3px 9px 3px 6px; font-size: 13px; } }

/* who is at the park, in the side column */
.pk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pk-who {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; width: 100%;
  padding: 4px 10px 4px 4px; text-align: left;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r-chip);
}
.pk-who canvas { grid-row: span 2; width: 40px; height: 40px; }
.pk-who b { font-size: 15px; font-weight: 600; }
.pk-who span { font-size: 13px; color: var(--soft); }
.pk-who small { grid-column: 2 / -1; font-size: 13px; color: var(--soft); }
@media (hover: hover) { .pk-who:hover { background: var(--butter); } }

@media (pointer: coarse) { .pk-acts .btn, .pk-shut .btn, .pk-result .btn, .pk-who, .pk-leave { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .pk-result { animation: none; } .pk-bar i { transition: none; } }

/* Replaced 2026-10-15 at the owner's request (the park fills a big screen, as Home does); kept so it can come back.
   The park took Home's big-screen layout: the game column grew with the window's height, the side column beside it
@media (min-width: 900px) {
  body[data-mode="park"] main { grid-template-columns: minmax(460px, var(--col-w)) minmax(320px, 1fr); gap: 28px; max-width: calc(var(--col-w) + var(--side-w) + 28px); margin-inline: auto; }
}
@media (min-width: 821px) and (max-aspect-ratio: 4/5) {
  body[data-mode="park"] main { grid-template-columns: minmax(0, 1fr); justify-items: center; max-width: none; }
  body[data-mode="park"] .stage-col, body[data-mode="park"] .side { width: 100%; max-width: var(--col-w); }
}
*/
/* the park on a big screen takes Home's layout: one column, the park as wide as the page and as tall as the rest of
   the column leaves (--chrome, measured in fitStage), showing more park round its own (ROOM_PX in app/room-draw.js),
   and "Who's here" under it */
@media (min-width: 821px) {
  body[data-mode="park"] main { grid-template-columns: minmax(0, 1fr); max-width: none; }
  body[data-mode="park"] .stage-col > :not(.stage) { max-width: max(var(--col-w), 720px); margin-inline: auto; }
  body[data-mode="park"] .stage[data-mode="park"] { --vh: 100vh; aspect-ratio: auto; height: min(578px, max(280px, calc(var(--vh) - var(--chrome, 340px)))); }
  /* (578px: the park's 320 units with 40% more sky, at ROOM_PX. Taller showed mostly empty sky) */
  body[data-mode="park"] .side { width: 100%; max-width: max(var(--col-w), 720px); margin: 6px auto 0; }
}
@supports (height: 100svh) { @media (min-width: 821px) { body[data-mode="park"] .stage[data-mode="park"] { --vh: 100svh; } } }

/* the snack shelf, opened from a neighbour's card. The same drawer and tiles as Home's, but here it sits under the
   status line with room of its own (the park leaves it), so it never lies over the friend who is about to eat */
body[data-mode="park"] .tray { position: static; margin-top: 6px; }
.tray[data-kind="share"] { --shelf: #ffe6ea; }
.tray[data-kind="share"]::after, .tray[data-kind="share"] .shelf-say { display: none; }

/* what a neighbour likes, on its card; and a gift's picture */
.pk-likes { margin: 0; color: var(--soft); }
.pk-gift { width: 40px; height: 40px; justify-self: center; }

/* who is coming later today */
.pk-sub { margin: 12px 0 6px; font-size: 15px; font-weight: 600; }
.pk-soon { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; padding: 0 10px 0 4px; }
.pk-soon canvas { width: 40px; height: 40px; }
.pk-soon b { font-size: 15px; font-weight: 500; }
.pk-soon span { font-size: 13px; color: var(--soft); }