/* Pipe Rush - the grid page. The kit draws the cards, claim form and leaderboards (kit.css, "verified
   leaderboards"); this file is the stage: a heads-up display with the speed button, the queue of
   pieces beside (desktop) or above (phones) the canvas grid, the panels over it and the side column.
   Sizes only from the kit scale. */

.pr { max-width: 1180px; margin: 0 auto; padding: 16px var(--gutter) 24px; display: grid; gap: 16px; }
.pr__stage {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.pr__stage[aria-busy="true"] { min-height: 420px; background: linear-gradient(110deg, var(--surface-2) 35%, var(--surface) 50%, var(--surface-2) 65%) 0 0 / 300% 100%; animation: skeleton 1.4s ease-in-out infinite; }
.pr__hud { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; }
.hud-chip { display: inline-flex; flex-direction: column; min-width: 64px; padding: 4px 10px; border-radius: 10px; background: var(--surface-2); color: var(--ink); line-height: 1.25; }
.hud-chip__label { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.hud-chip strong { font-size: var(--fs-m); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud-chip--status { justify-content: center; min-height: 44px; font-size: var(--fs-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.hud-chip--status[data-state="flow"] { background: rgb(185 101 42 / .18); color: var(--gold-ink); }
.hud-chip--status[data-state="fast"] { background: var(--primary-bg); color: var(--primary-ink); }
.hud-chip--status[data-state="clear"] { background: rgb(201 165 90 / .25); color: var(--gold-ink); }
.pr__speed { margin-left: auto; min-width: 96px; }
.pr__speed:disabled { opacity: .5; }

/* the queue beside the grid (desktop) or above it (phones) */
.pr__play { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.pr__queue { display: grid; gap: 6px; justify-items: center; }
.pr__queue-label { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.pr__queue-canvas { display: block; }
.pr__field { position: relative; width: 100%; min-height: 240px; display: grid; place-items: center; }
.pr__canvas { display: block; max-width: 100%; border-radius: 12px; box-shadow: inset 0 0 0 2px #15110e; background: #211b17; touch-action: manipulation; }
.pr[data-phase="play"] .pr__canvas { cursor: pointer; }
.pr[data-layout="portrait"] .pr__play { grid-template-columns: minmax(0, 1fr); }
.pr[data-layout="portrait"] .pr__queue { grid-auto-flow: column; align-items: center; justify-content: start; gap: 10px; }

/* cards over the grid */
.pr__panel { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 16px; overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; background: rgb(33 27 23 / .45); touch-action: pan-y; }
.end-badge[data-reason="spill"] { background: rgb(185 101 42 / .18); color: var(--gold-ink); }
.end-badge[data-reason="timeout"] { background: rgb(201 165 90 / .22); color: var(--gold-ink); }

/* beside the grid */
.pr__side { display: grid; gap: 16px; align-content: start; }

@media (min-width: 1024px) {
    .pr { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; padding-top: 24px; }
    .pr__side { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 24px); }
}

/* phones: the stage as wide as the screen, the queue in a row above the turned grid */
@media (max-width: 639px) {
    .pr { padding: 0 0 16px; gap: 10px; }
    .pr__stage { min-height: min(520px, calc(100svh - var(--header-h) - 24px)); padding: 8px; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line); }
    .pr[data-phase="play"] .pr__stage { min-height: 0; }
    .pr__hud { gap: 4px; }
    .hud-chip { min-width: 0; padding: 3px 8px; }
    .hud-chip--status { flex: 1 1 100%; min-height: 36px; }
    .pr__speed { min-width: 84px; }
    .pr__panel { padding: 12px; place-items: start center; border-radius: 0; }
    .panel-card { padding: 18px 16px; }
    .end-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 10px 0; }
    .end-stats div { padding: 4px 6px; }
    .end-stats dt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .end-stats dd { font-size: var(--fs-s); }
    .pr__side { padding: 0 var(--gutter); }
}

/* phones on their side: the grid is wide, the queue goes back beside it */
@media (orientation: landscape) and (max-height: 500px) {
    .pr { padding-top: 8px; }
    .pr__stage { min-height: 0; }
    .hud-chip--status { flex: 0 1 auto; }
}